Язык разметки гипертекста HTML

 

 

Специальные  символы

 

Название	Символ	Мнемоническое  имя	Числовой  код
Меньше	<	&lt	&#060
Больше	>	&gt	&#062
Амперсант	&	&amp	&#038
Неразрывный пробел		&nbsp	&#160
Копирайт	C	&copy	&#169
Тире	--		&#151
Левая  „Елочка”	«	&laquo	&#171
Превая „елочка”	»	&raquo	&#187
Левая  „лапка”	“		&#147
Превая „лапка”	”		&#148
Номер	№		&#8470

 

Программирование  списков

Допускается задание  в  документах списков  двух  типов.

• Ненумерованный ( маркированный )

Каждый элемент  этого  списка браузер  предворяет  меткой  в  начале  строки,  а сами строки  смещают вправо.

Вид  метки, которую  браузер  помещает  перед  каждым  элементом списка,  настраивается  при  помощи  атрибута  type – окружность, диск, квадрат.

<ul  type=circle |disc | square >

    <li> первый элемент  </li>

    <li> второй  элемент  </li>

     …….

    <li> последний элемент  </li>

<ul>

Пример.

<ul  type=disc >

    <li> урган  </li>

    <li> дорога  из  желтого  кирпича  </li>

    <li> великий  и  ужасный  </li>

    <li> исполнение желаний  </li>

<ul>

• Нумерованный
• вложенные  списки

 

Вопросы  и  упражнения.

 

Рисунки   на  Web -  странице.

 

В Интернете  наиболее  популярны  два  графических  формата.JPG  ,  GIF

Картинка  в тексте

Для  вставки  картинки  нужно  воспользоваться  командой   <img>

   Атрибут  src = имя файла

При  помощи  главного  атрибута src   можно задать   имя файла   с картинкой

<img   src =./pic/img.gif>

   Атрибут   alt = “ текст надписи “

Если браузер  не находит  картинки  в  указанном  месте  на  диске,  он  вместо  нее рисует  на  экране   маленький прямоугольник и вписывает в него надпись,  которая задана  атрибутом alt.

<img src =monstr.jpg alt =” Страшный  зверь“>

   Атрибуты  width=n    и height =m

Эти  атрибуты задают ширину  и  высоту  (  в  пикселах ) прямоугольника,   в который входит   выводится картинка. Рекомендуется всегда  записывать  эти атрибуты и указывать в них   естественные  размеры  картинки, чтобы картинка  выводилась  без  искажения.

   Атрибут   border =n

Позволяет задать  рамку  вокруг  иллюстации  толщиной  в n пикселов.  При n =0 или отсутствии  рамка  не  рисуется.

   Атрибут   align

Позволяет задавать  положение  иллюстрации   по  отношению  к  соседним  элементам   документа. Можно  использовать  следующие  значения  атрибута:

Align =top                вертикальное   выравнивание   по  верхнему  краю

Align =middle          вертикальное   выравнивание   по  центру

Align =bottom          вертикальное   выравнивание   по  нижнему  краю

Align =left                вертикальное   выравнивание   по  левому  краю

Align =right              вертикальное   выравнивание   по  правому  краю

 

   Атрибут  hspace=n     и vspace=n

Определяют  свободное  пространство  слева  и  справа  (hspace ),   над   и под (vspace  )  картинкой.

Примеры.

<img scr=./pic/07.gif  width=200 height=200 border=1

       align=top hspace=15 vspace=0 alt=”Петька  прагает  вниз  “>

сочинил  забавный  рассказ про бабушкиного  цыпленка и  ре шил набрать его  в  текстовом  редакторе.

• Заменить  на  align= middle
• Заменить  на  align= bottom
• Заменить  на  align= left
• Заменить  на  align= right

 

Картинка  как  ссылка

Для того.  чтобы  заставить работать  картинку как гиперссылку,  достаточно вложить  команду  <img> внутрь  команды <a>. Картинка- ссылка  обрамляется    в рамочку. Курсор  при попадании  на картинку -  ссылку  менует  свою  форму.

<a  href="адрес ссылки "> <img  src="ссылка на рисунок "></a>

 

<a  href=dog.html> <img  src=dog.gif   border=0 width=200 height=200  alt=”Собака “></a>

 

Вопросы  и  упражнения

1. Запишите  HTML – коды  для  вывода  на  экран  таких  страниц

Бабочка  крапивница зимовала в  стогу. Солнцк  нагрело  стог,   Крапивница отогрелась  и затрепетала от нетерпенья Качнулся ветерок, она вспорхнула  и  понеслась

 

 

 

 

Гиперссылки

 

Гипертексты  и броузеры

HTML – документ  - это   гипертекст. Текст  проектируется  в  расчете  на  возможность  чтения  не по  порядку,  а  по  контексту.

• Гипертекстовые  ссылки среди  других  элементов выделяются  цветом  и  подчеркиванием
• Курсор  мыши  на  ссылке меняет  свою  форму  и  превращается   в указующий   перст
• Для перехода  по ссылке  необходимо  выполнить на ней клик  мышью
• Для  возврата необходимо использовать навигационную  кнопку  браузера  Назад

Можно выделить  несколько  видов  гиперссылок

• Внутренние связывают документы  внутри  одного  узла

Используется  относительный путь от данной  страниці  или от  корневой  папки.

Для  задания  гипертекстового  перехода  внутри документа  используют  две  команды <a>.

Первая  команда  с  атрибутом    href является  источником  перехода,  вторая   с атрибутом name -  приемником.

указывает на метки
< a  href = #метка > текст       </a> …… <a  name =метка   >  </a> <p> В лесу  родилась  елочка	Задание  перехода  по  метке На экран  выводится  ссылка:  текст Метка. Сюда  браузер приходит  по  ссылке   На экране отображается  фраза.

 

             указывает  на  документ

Для того, чтобы  браузер  загрузил в  свое  окно  новый  HTML  - документ, нужно записать  в программе ссылку  при  помощи  команды  <a>  с атрибутом   href =  имя_фала.

…… < a  href = имя_файла> текст       </a> ……	Выполнить  файл  имя_файла. На экран  выводится  ссылка:  текст При щелчке  мыши на  ссылке  браузер строит  на  экране документ  по  программе,  заданной  в файле имя_файла.

             можно  предать  управление  из  одного  документа  к  метке  в нутрии  другого.

Первый  HTML- файл < a  href = имя_файла#метка> текст  </a>       Второй HTML – файл <a  name =метка   >  </a>	Приступить  к  показу  фрагмента  с  меткой   метка  в файле   имя  файла На экран  выводится  ссылка:  текст   При щелчке  мыши на  ссылке  браузер строит  на  экране документ  по  программе,  заданной  в  файле  имя_файла, начиная  с Фрагмента  с  меткой  метка .

 

• указывает  на почтовый  адрес

<a  href="mailto:vebmaster@mail.ru ">Текст для  щелчка  </a>

• внешние связывают  страницу   с  документами,  не  принадлежащими  данному  Web - узлу

Каждая страница имеет  свой уникальный адрес  в  Интернете,  который  называется  универсальным указателем  ресурса. Указывает на ресурс  Интернета

Пример.

• абсолютный путь.

При  переносе  требуется  менять  все  гиперссылки

http://www.dodbar.ru/rus/index.html

• относительно просматриваемого докумета

rus/index.html            / - прямой  слэш

• относительно  корневой папки

/ support/www.dodbar.ru /rus/index.html  -    начинается с прямого слэша

 

Произвольный  текст <a  href="адрес ссылки ">Текст для  щелчка  </a>

•    указывает на  рисунок

 <a  href="адрес ссылки "> <img  src="ссылка на рисунок "></a>

 

Внутри тэга <body>  используются  атрибуты ,  определяющие  цвет  гиперссылок:

link – задает цвет   ссылок   на  всей странице

vlink – задает  цве посещенных  ссылок

аlink  - задает  цвет  активных   ссылок  ( цвет  появляется  при нажатии )

<body link ="0000ff" vlink="cc0066" alink="ff0000">

 

Пример 3 . doc1.htm

<HTML>     <HEAD>         < meta http-equiv = “Content-Type”                  content =”text/html;   charset = windows-1251 “>          <TITLE>  Упражнение   3     </TITLE>     </HEAD>     <BODY>           <h1> Третий   HTML --  документ  </h1>           <hr>            <p> Корова  похожа  на  лошадь. А лошадь  не похожа  на корову. Имеено это  сходство  мы  берем  за  основу               </p>      <P>      <a href= doc3.htm> Перевод</a>          </BODY> </HTML>

Начало  HTML  - документа Начало головной  части Информация  о документе   Название  документа Конец  головной  части Начало  тела  документа   Заголовок Горизонтальная  линия Начало  абзаца Абзац       Конец  абзаца     Ссылка на  страницу     Конец  тела  документа Конец  HTML -  документаа

 

Пример 4 . doc3.htm

<HTML>     <HEAD>         < meta http-equiv = “Content-Type”                  content =”text/html;   charset = windows-1251 “>          <TITLE>  Упражнение   4.      </TITLE>     </HEAD>     <BODY>           <h1> Четвертый   HTML --  документ  </h1>           <hr>            <p> Корова  похожа  на  лошадь. А лошадь  не похожа  на корову. Имеено это  сходство  мы  берем  за  основу               </p>       </BODY> </HTML>

Начало  HTML  - документа Начало головной  части Информация  о документе   Название  документа Конец  головной  части Начало  тела  документа   Заголовок Горизонтальная  линия Начало  абзаца Абзац       Конец  абзаца Конец  тела  документа Конец  HTML -  документаа

 

Вопросы и упражнения

1. Справочник  по  животным

<UL>

    <LI><A href =#волк></A>волк

    <LI>><A href =#цыпа></A>цыпа

</UL>

<HR>

<P> <a name=волк>

Волк&nbsp;&#151; плохой зверь.Кусается

<HR>

<P> <a name=цыпа>

Цыпа&nbsp;&#151; хороший зверь ( птица)

Не  кусается, несет  яйца.

<HR>

Почему  броузер  не  показывает  ссылки ?

• Ссылки  нельзя  записывать  внутри  списков
• Метки нужно  записывать так:

      <a name=#цыпа>

• ссылки нужно  записывать  так:

<A href =#цыпа>цыпа</A>

• имя  метки  нужно  записывать  в  кавычках

 

Таблицы

 

     Создание  и форматирование  таблиц

Что такое таблица

Таблицы –это  прямоугольник, расчерченный   на  клетки. Вертикальные ряды  клеток образуют  столбцы., горизонтальные -  строки. Каждая  строка   и  столбец   в  таблице  имеет  свой  заголовок  в  первом  столбце      .

Как создать  таблицу

Таблица задается  командой  <table>…</table>. Внутри этих тегов задаются  строки  командами <tr>…</tr> . Наконец,  внутри строк задаються  клетки (ячейки)  командами  <td>…</td>.

 

<table>

1,1 1,2 2,1 2,2 3,1 3,2

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

</table>

 

 
 
 

<table   border=1>

    <tr>                                            <!-- первая  строка   -- >

         <td> (1,1) </td>                    <!-- первая  ячейка   -- >

         <td> (1,2) </td>                    <!-- вторая  ячейка   -- >

    </tr>

    <tr>                                            <!-- вторая  строка   -- >

         <td> (2,1) </td>                    <!-- первая  ячейка   -- >

         <td> (2,2) </td>                    <!-- вторая  ячейка   -- >