Теги, определяющие разделы документа

⇐ ПредыдущаяСтр 3 из 36Следующая ⇒

Спецификация HTML5 вводит множество новых элементов, в том числе несколько элементов, призванных улучшить описание структуры документа. Предпосылка создания новых структурных тегов — желание разделять Web-страницы на логические части с помощью элементов, описательные названия которых соответствуют контенту, который они содержат.

С концептуальной точки зрения Web-страницу можно рассматривать как документ, содержащий заголовки, нижние колонтитулы, главы и различные другие условные обозначения, разделяющие документы на логические части.

В данном разделе рассмотрим теги, с помощью которых можно создать логичную структуру документа.

< div> … < / div> - контейнер для элементов. Элемент < div> …< /div> является абстрактным блоковым элементом. Чаще всего этот тег используется для выделения фрагмента документа в целях изменения стиля внешнего представления содержимого с помощью правил CSS. Содержимое данного тега всегда начинается с новой строки, а после него добавляется перенос строки.

Верстка содержимого веб-страниц в основном основывается на использовании блоков < div> …< /div>.

< address> …< /address> - контактная информация автора документа, статьи. Элемент address не подходит для указания списка всех адресов. Как правило, его размещают в начале или в конце документа или же связывают с большим разделом (например, с формой). Например:

< address>

При участии < а href="../authors/sitnik/" > Irina Sitnik< /a>, < а href=" http: //www.sstu.com/" > SGTU< /a>

< /address>

< article> …< /article> (HTML5) - тег, представляющий независимую часть содержания, контент, предназначенный для самостоятельного распространени. Тег article обозначает важные разделы контента внутри Web-страницы. Скажем, в блоге каждый отдельный пост представляет собой значимый фрагмент контента.

< aside> …< /aside> (HTML5) - тег, определяющий дополнительный контент. Служит для размещения ссылок, меток и т.п. на иную информацию, не относящуюся напрямую по смыслу к основному содержанию текста. В определенном смысле его применение аналогично внедрению комментария в тело основного текста.

< blockquote> … < / blockquote> - длинная цитата. Используйте элемент blockquote для создания длинных цитат, особенно таких, которые охватывают несколько абзацев и требуют переводов строки.

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

< blockquote cite = " http: //www.jenandtheneverendingstory.com" > < р> Это начало длинной цитаты (текст продолжается...) < /р> < р> Цитата все длится и длится (текст продолжается...) < /р> < /blockquote >

Атрибут cite предназначен для указания информации об источнике, откуда взята цитата, но этот атрибут очень ограниченно поддерживается браузерами, и его нечасто используют.

В спецификации HTML рекомендуется, чтобы элементы blockquote отображались в виде текста с отступом. Не следует использовать элемент blockquote только для получения отступа.

< footer> … < / footer> (HTML5) - нижний колонтитул (нижняя часть документа или раздела). Данный элемент может содержать информацию об авторе, авторском праве и так далее.

< header> … < / header> (HTML5) - верхний колонтитул (верхняя часть документа или раздела). Пример использования < header>:

< header>

< div class=" into_header" >

< img src=" pictures/fon_header.jpg" alt=" Цветы в оазисе" />

< /div>

< /header>

Примечание: Обратите внимание на следующее: Для того, чтобы новые теги корректно выводились в браузере, следует вначале сделать их блоковыми через свойство display:

< style> header { display: block;

background: #ccddaa repeat-y url(pictures/fon_header.jpg); }

< /style>

Можно также создать фиктивный элемент с помощью JavaScript для того, чтобы можно было работать с элементами, которые браузер не понимает. Для этого следует включить в < head> такой код:

< script> document.createElement(" header" ); < /script>

Конечно, если на странице встречается всего один новый тег, то вполне достаточно этого скрипта. Но если новых тегов в документе окажется несколько, нецелесообразно повторять один и тот же код многократно. Для компактной записи воспользуемся циклом, в котором теги будут указаны списком:

< script>

var tag_array = (" header, footer, hgroup, nav, article, section, aside, figure, figcaption" ).split(', ');

for (var j = 0; j < tag_array.length; j++)

{ document.createElement(tag_array [j]); } < /script>

Cкрипты должны располагаться в коде перед CSS.

< main> … < / main> (HTML5) - контейнер с основным контентом веб-страницы.

< nav> …< / nav> (HTML5) - раздел навигационных ссылок. Элемент < nav> представляет собой часть страницы, которая ссылается на другие страницы или части текущей. Следует учитывать, что не все группы ссылок на странице должны быть заключены в элемент < nav> — этот элемент главным образом предназначен для группировки главных навигационных блоков.

В частности, в подвалах часто содержатся короткие списки ссылок на различные части сайта, вроде правил использования сервиса, домашней страницы и копирайтов. Элемента < footer> вполне достаточно для группировки такого рода ссылок, и совершенно необязательно дополнительно использовать элемент < nav>.

< section> … < / section> (HTML5) - раздел документа. Тег section предназначен для разбиения контента на существенные блоки. В определенном смысле его применение аналогично разбиению книги на главы.

Не следует использовать < section> как разновидность тега div. Одна из самых распространённых проблем — это произвольная замена элементов < div> структурными элементами из HTML5, особенно замена оформительской обёртки на < section>.

<! -- Этот код неправильный! --> < section id=" wrapper" > < header> < h1> Моя супер-пупер страница< /h1> <! -- Содержимое шапки --> < /header> < div id=" main" > <! -- Содержимое страницы --> < /div> < section id=" secondary" > <! -- Вторичное содержимое --> < /section> < footer> <! -- Содержимое подвала --> < /footer> < /section>

< section> — это не обёртка. Элемент < section> определяет смысловую секцию содержимого для созданияструктуры документа. Он должен содержать заголовок. Если вы ищете элемент для того чтобы обернуть в него часть содержимого страницы, используйте < div>.

< hr /> - горизонтальная линия. Одиночный тег, служит обычно визуальным разделителем между разделами текста. У элемента hr имеются следующие атрибуты:

align=" center|left|right" – способ выравнивания;

noshade=" noshade" – выключение эффекта объема;

size=" number" – толщина линии;

width=" number" или " number%" – размер (ширина) линии.

Следует пользоваться соответствующими стилями CSS для оформления линий. Элемент hr всегда находится на отдельной строке и обычно над ним и под ним остается немного свободного пространства. По умолчанию браузеры отображают горизонтальную линейку в виде линии заданного размера со скосом.

< hgroup> …< /hgroup> –парный тег, определяющий группу заголовков.

Пример:

< html> < body>

< hgroup>

< h1> Справочник элементов HTML < /h1>

< h4> Новые теги HTML5< /h4>

< /hgroup>

< p> В спецификации HTML 5 добавлены следующие новые теги...< /p>

< /body> < /html>

< time> …< /time> - парный тег, определяющий время, или дату.

< mark> …< /mark> - парный тег, определяющий важную смысловую часть текста.

< bdo> … < /bdo> - парный тег, определяющий направление текста. Атрибуты dir=" rtl" (направление справа налево), dir=" ltl" (направление слева направо) – определяют направление текста.

< figure> … < / figure> (HTML5) - контейнер для группировки контента (обычно используется с элементом < figcaption> ).

< figcaption> … < / figcaption> (HTML5)- подпись к содержимому элемента < figure>.

Пример.

Приведем пример использованияэлементов < figure>. .. < /figure> и < figcaption >. .. < / figcaption > (результат применения нижеприведенного кода можно видеть на рисунке 2):

<! DОCTYPЕ html> < html> < hеаd>

< mеtа http-equiv=" cоntеnt-typе" cоntеnt=" tеxt/html; chаrseеt=utf-8" >

< titlе> Пример использования тега figure < /title>

< style>

figure { display: block; /* элемент объявляется блоковым */

background: #6f5a88; /* фоновый цвет*/

width: 160px; /* ширина */

float: left; /* блок прижимается к левому краю */

margin: 0 12px 12px 0; /* поля*/

text-align: center; /* Выравнивание по центру */ }

padding: 12px; /* Поля вокруг */

figcaption {color: #fee; /* Цвет текста */ } < /style>

< script> document.createElement(" figure" );

document.createElement(" figcaption" );

< /script> < /head>

< body>

< article>

< figure> < p> < img src=" pictures/caf1.jpg" alt=" Собор Софийский" /> < /p>

< figcaption> Софийский собор< /figcaption>

< /figure>

< figure>

< p> < img src=" pictures/caf2.jpg " alt=" Польский костел" /> < /p>

< figcaption> Польский костел< /figcaption>

< /figure> < /article> < /body>

< /html>

Рисунок 2 – Результат использования тегов figure и figcaption

Интерактивные элементы

В данном разделе рассмотрим еще несколько тегов, появившихся в спецификации HTML5, обладающие собственной интерактивностью.

< menu> …< /menu> - определяет список/меню команд. Тег < menu> используется для контекстного меню, панели инструментов и для включения списка управления формой и команд.

Атрибуты: label - Определяет видимую метку для меню.

type – Определяет то, какой тип меню будет отображен на экране:

· context - контекстное меню с командами, с которыми может взаимодействовать пользователь.

· toolbar - список активных команд.

· list - неупорядоченный список элементов (каждый элемент такого списка создается с помощью тега < li> ). Значение list используется по умолчанию.

Пример.

< menu type=" toolbar" >

< li>

< menu label=" Файл " >

< button type=" button" onclick=" file_new()" > Новый...< /button>

< button type=" button" onclick=" file_open()" > Открыть...< /button>

< button type=" button" onclick=" file_save()" > Сохранить< /button>

< /menu>

< /li>

< li>

< menu label=" Edit" >

< button type=" button" onclick=" edit_cut()" > Вырезать< /button>

< button type=" button" onclick=" edit_copy()" > Скопировать< /button>

< button type=" button" onclick=" edit_paste()" > Вставить< /button>

< /menu>

< /li>

< /menu>

Результат выполнения данного кода можно видеть на рисунке 3.

Рисунок 3 - Результат использования тега menu

< command> < /command> - парный тег, в котором размещают команды для выпадающих списков, кнопок. Теги < command> < /command> должны быть размещены внутри < menu> < /menu>. Тег создает команду в виде переключателя, флажка или обычной кнопки.

Атрибуты:

checked - Активирует команду, атрибут доступен только если type установлен как radio или checkbox.

disabled - задает, доступна команда или нет.

icon - адрес картинки, которая показывается как команда.

label - название команды.

radiogroup - з адает имя группы переключателей. Доступно только если type установлен как radio.

type - определяет тип команды: checkbox, command, radio (по умолчанию - command).

Пример.

< menu> < command onclick=" alert(Откроем страницу на русском ')" label=" Выполнить загрузку русской версии" > < command onclick=" alert('Откроем страницу на английском ')" label=" Выполнить загрузку английской версии " > < command onclick=" alert(''Откроем страницу на немецком ')" label=" Выполнить загрузку немецкой версии " > < /menu>

details – указывает дополнительную информацию, которую можно скрыть или показать по требованию пользователя. Тег < details> может использоваться для создания интерактивных виджетов, которые пользователь может открывать и закрывать. По умолчанию содержимое тега < details> не отображается, для изменения статуса применяется атрибут open, который указывает, что содержимое тега изначально должно быть показано в развернутом виде. Значения для логического атрибута open можно задавать следующими способами:

< details open>

< details open=" open" >

< details open=" " >

summary - заголовок для элемента < details>. HTML тег < summary> определяет видимый заголовок для элемента < details>. По заголовку можно щелкать, чтобы просмотреть либо скрыть информацию. Тег < summary> должен идти первым внутри элемента < details>.

Пример:

< details open=" open" >

< summary> Тут есть какое-то содержимое! < /summary>

< p> Здесь можно разместить полезную информацию, такую, какую захочется! < /p>

< /details>

Результат выполнения данного кода можно видеть на рисунке 4.

Рисунок 4 - Результат использования тегов details и summary. Слева – информация скрыта, справа - открыта

Вставляемый контент

< iframe> …< /iframe > - встроенный фрейм – тег для добавления на веб-страницу содержимого другого веб-документа. Этот элемент, в отличие от тега < frame />, остался в новой спецификации. iframe может быть внедрен в любое место страницы, может не иметь полос прокрутки и рамки. Его местоположение устанавливается с помощью каскадных таблиц стилей.

Атрибуты:

src – указывает url адрес документа.

frameborder – наличие границы вложенного документа: 1 – граница есть (по умолчанию), 0 – границы нет.

scrolling – определяет наличие полосы прокрутки. yes – по умолчанию, no – полосы прокрутки нет.

width – ширина фрейма в пикселях или в процентах.

height – высота фрейма в пикселях или в процентах.

align – определяет тип выравнивания. Значения: top, right, bottom, left, middle.

Пример.

< body>

< iframe src=" HTML.php" width=" 91%" height=" 323" frameborder=" 1" >

< /iframe>

< /body>

< img /> - добавление изображения. Изображения не вставляются напрямую на веб-страницу, тег содержит лишь ссылку на изображение и создает пространство нужного размера, в котором отображается картинка в графическом формате GIF, JPEG или PNG. HTML тег < img> имеет два обязательных атрибута: src и alt.

Атрибут src задает путь к изображению. Атрибут alt задает альтернативный текст для изображения, который будет отображен только в том случае, когда изображение не может быть отображено (указан неправильный путь, картинка удалена, отключено отображение изображений).

Пример.

< img src=" image.jpg" alt=" Фото моего кота" />

У элемента < img> имеется также ряднеобязательных атрибутов:

width – ширина изображения;

height – высота изображения;

border – толщина границы изображения;

align – способ выравнивания изображения;

hspace – величина отступа от изображения до ближайшего элемента по горизонтали;

vspace – величина отступа от изображения до ближайшего элемента по вертикали;

ismap – указывает, является ли изображение картой ссылок. То есть к различным фрагментам изображения могут быть привязаны" гиперссылки;

usemap – ссылка на элемент < map>, содержащий координаты конкретной карты.

< map> - карта-изображение.

Тег < map> служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может по гиперссылкам переходить к связанным документам.

Для тега доступен атрибут name, который задает имя карты. Значение атрибута name для тега < map> должно соответствовать имени в атрибуте usemap элемента < img>.

< area /> - активная область внутри карты-изображения. Тег < area> одиночный, описывает одну активную область в составе карты изображений на стороне клиента. Если одна активная область перекрывает другую, то сработает первая ссылка из списка областей.

Атрибуты:

coords - определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми: для круга — координаты центра и радиус круга; для прямоугольника — координаты верхнего левого и правого нижнего углов; для многоугольника — координаты вершин многоугольника в нужном порядке.

href - указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки.

rel – тип отношения между текущим и связанным документами. Атрибут rel может принимать значения:

author — ссылка на автора документа;

alternate — ссылка на альтернативную версию документа;

help — ссылка на справочную информацию;

search — показывает, что в целевом документе содержится инструмент для поиска;

bookmark — URL-адрес, используемый для закладок;

license — ссылка на информацию об авторских правах на данный веб-документ;

tag — показывает ключевое слово для текущего документа.

next/prev — указывает логическую последовательность связей отдельных URL;

nofollow — запрет перехода поисковой системе по всем ссылкам на данной странице или по конкретной ссылке;

noreferrer — показывает, браузер не должен при переходе по ссылке отправлять заголовок HTTP-запроса (referrer). В referrer размещается информация о том, с какой страницы пришел посетитель.

prefetch — указывает, что целевой документ должен быть кэширован;

type - указывает MIME-тип файлов ссылки, другими словами, расширение файлов.

shape - задает форму активной области на карте и ее координаты. Может принимать следующие значения: rect — активная область прямоугольной формы; circle — активная область в форме круга; poly — активная область в форме многоугольника; default — активная область занимает всю площадь изображения.

target - указывает, куда при переходе по ссылке будет загружен документ:

_self —загрузка страницы осуществляется в текущее окно;

_blank — страница загружается в новое окно браузера;

_parent — закгрузка происходит в родительский фрейм;

_top — страница будет загружена в корневое окно браузера.

Пример.

< img src=" original.jpg" alt=" Карта Европы" width=" 800" height=" 865" usemap=" #Map" >

< map name=" Map" >

< area shape=" rect" coords=" 350, 516, 424, 570" href=" index.html" alt=" Карта Польши" >

< area shape=" circle" coords=" 434, 634, 29" href=" page1.html" alt=" Карта Румынии" >

< area shape=" poly" coords=" 463, 608, 479, 628, 519, 631, 545, 616, 561, 600, 566, 582, 540, 575, 517, 560, 506, 543, 492, 546, 480, 559, 447, 553, 423, 554, 423, 568, 416, 574, 412, 582, 404, 600, 417, 608, 432, 602, 451, 610, 461, 615, 464, 617" href=" #" >

< /map>

На рисунке 5 можно видеть 3 активные области, полученные в результате выполненияданного кода прямоугольную, круглую и полигональную.

Рисунок 5 – Активные области на карте изображения

Добавление видео и звука

В версии HTML5 появились теги для работы с видео и аудио файлами. Это, соответственно, элементы: < video> и < audio>. Для воспроизведения мультимедиа информации не используются никакие внешние средства, они содержатся в собственной среде браузера. Это обстоятельство повышает безопасность, позволяет организовать управление из веб-сценариев и помогает избежать некоторых проблем, связанных с отображением информации, в частности, пересечений с другими элементами контента.

К сожалению, HTML5 поддерживает далеко не все известные и популярные кодеки, строго говоря, из спецификации языка вообще исключены требования обязательной поддержки каких-либо кодеков. Однако, частично проблема решаема путем использования элемента < source>, который позволяет объявить сразу несколько источников видео или звука, из которых браузер сам выберет подходящий для воспроизведения.

< video> …< /video> - элемент для добавления видео. Тег < source /> определяет источник видео.

Пример:

< video controls=" controls" >

< source src=" video.m4v" type=" video/mp4" /> <! -- MPEG4 для браузеров Safari -->

< source src=" video.ogg" type=" video/ogg" /> <! -- Ogg Theora для Firefox -->

< /video>

Атрибуты:

autoplay=" autoplay" – видео воспроизводится сразу после загрузки страницы.

autobuffer=" autobuffer" – видео воспроизводится уже в момент загрузки страницы.

controls=" controls" – отображать панель управления видеоплеером.

loop=" loop" – по окончании вновь проигрывать видео.

src=" url" – источник видео.

type=" video/ogg" – определяет формат видео.

height=" " – высота видеоплеера.

width=" " – ширина видеоплеера.

poster =" " Указывает адрес картинки, которая будет отображаться, пока видео не доступно или не воспроизводится.

preload - используется для загрузки видео вместе с загрузкой веб-страницы. Этот атрибут игнорируется, если установлен autoplay. Его возможные значения: none - загружать видео; metadata -загрузить только служебную информацию (размеры видео, первый кадр, продолжительность и др.); auto - з агрузить видео целиком при загрузке страницы.

Пример

< video controls preload=" metadata" >

< source src=" video/duel.ogv" type='video/ogg; codecs=" theora, vorbis" ' /> < source src=" video/duel.mp4" type='video/mp4; codecs=" avc1.42E01E, mp4a.40.2" ' />

< source src=" video/duel.webm" type='video/webm; codecs=" vp8, vorbis" ' />

Тег video не поддерживается вашим браузером.

< a href=" video/duel.mp4" > Скачайте видео< /a>.

< /video>

< audio> < /audio> - элемент для добавления звукового фрагмента.

Пример:

< audio src=" music.ogg" controls=" controls" > Ваш браузер не поддерживает теги < audio> < /audio>! Обновите версию браузера! < /audio>

Атрибуты:

autoplay=" autoplay" – определяет воспроизведение музыкального файла сразу же после загрузки страницы.

autobuffer=" autobuffer" – используется в паре с autoplay=" autoplay" – определяет воспроизведение музыкального файла уже в момент загрузки страницы.

controls=" controls" – показывает панель управления плеером.

src=" url" – источник звукового файла.

< embed>. - используется для загрузки и отображения объектов, таких, как видеофайлы, флэш-ролики, некоторые звуковые файлы и т.д., которые исходно браузер не понимает. Закрывающий тег не требуется.

Атрибуты:

align – определяет то, как объект будет выравниваться на странице и способ его обтекания текстом;

height - высота добавляемого объекта;

width - ширина добавляемого объекта;

hspace - величина горизонтального отступа от объекта до соседнего контента;

vspace - величина вертикального отступа от объекта до соседнего контента;

hidden - указывает, скрыть объект на странице или нет.

pluginspage - адрес страницы в Интернете, откуда можно скачать и установить плагин к браузеру.

src - путь к файлу.

typ e - MIME-тип объекта.

Пример.

< embed src=" images/horse.swf" height=" 300" width=" 450" type=" application/x-shоckwfаvе-flаsh" pluginspаgе= " http: //www.mасrоmеdiа.соm/gо/gеtflаshplаyеr" >

< canvas> - область для рисования графики посредством сценариев. Использование данного объекта будет рассмотрено позднее, при рассмотрении программирования на Java Script.

< object> - внешний подключаемый ресурс, встроенный объект в HTML-документе. Тег используется для вставки таких объектов, как изображения, аудио, видео, java-апплетов, activeX-элементов, PDF и flash. Дополнительно внутрь элемента < object> можно поместить тег < param>, который передает дополнительные параметры плагинов для отображения объекта.

< param> - значения параметров для объекта, используется внутри элемента < object>.

Атрибуты:

name - определяет имя параметра, которое используется совместно с атрибутом value для указания параметром плагина, указанного с помощью элемента < object>. Значением атрибута name может быть любое имя, поддерживаемое указанным объектом.

value - указывает значение параметра, которое используется совместно с атрибутом name для указания парметров плагина. Значением атрибута value может быть любое значение, поддерживаемое указанным объектом.

Пример:

< object width=" 300" height=" 200" data=" restless.swf" >

< param name=" autoplay" value=" false" />

< /object>

Спецсимволы

Кроме тегов, в HTML-документах присутствуют сущности (англ. entities) или специальные символы, которые используются для добавления знаков и символов, отсутствующих на клавиатуре, или же для представления символов, которые нельзя записать обычным образом по причине их особой роли в HTML, например, таких, как— символ «меньше» (< ), код которого & lt; символ «больше» (> ), код которого & gt; — амперсанд (& ), код которого & amp; и многих других.

Спецсимволы начинаются с символа амперсанда и имеют вид либо & name; или & #cod;, где name – имя специального символа, а - cod — его код в десятичной системе счисления в кодировке Юникод.

В таблице 3 перечислены некоторые наиболее часто используемые сущности.

Таблица 3 – Фрагмент таблицы спецсимволов

Имя	Код	Вид	Описание
& nbsp;	& #160;		неразрывный пробел
& pound;	& #163;	£	фунт стерлингов
& euro;	& #8364;	?	знак евро
& para;	& #182;	¶	символ параграфа
& sect;	& #167;	§	параграф
& copy;	& #169;	©	знак copyright
& reg;	& #174;	®	знак зарегистрированной торговой марки
& deg;	& #176;	°	градус
& plusmn;	& #177;	±	плюс-минус
& times;	& #215;	×	знак умножения
& divide;	& #247;	÷	знак деления

Списки

Различают следующие виды списков:

• Маркированные, неупорядоченные или несортированные;

• Нумерованные, упорядоченные или сортированные;

• Термины и определения.

Рассмотрим порядок создания списков.

Маркированные, неупорядоченные или несортированные списки в HTML обозначаются элементом < ul>...< /ul>. Отдельный пункт списка задается тегом < li> < /li>. С помощью атрибутаtype=" disc | circle | square" можно задать вид маркера. На рисунке 6 показан код списков, в том числе вложенных, с использованием различных маркеров, и результат их использования.

Рисунок 6 – Маркированные списки

< ul type=" disc" >...< /ul> - такая запись задает список, маркированный закрашенными окружностями.

< ul type=" circle" >...< /ul> - список маркирован незакрашенными окружностями.

< ul type=" square" >...< /ul> - список маркирован закрашенными прямоугольниками.

Нумерованные, упорядоченные или сортированные списки обозначаются элементом < ol> …< /ol>, и они также включают в себя один или несколько элементов < li> …< /li>, обозначающих пункт списка.

Атрибуты:

start=" число" - с какого по порядку значения следует начать нумерацию списка;

type=" тип" – тип нумерации. Значениями типа в HTML могут быть: 1 – нумерация арабскими цифрами (значение по умолчанию), A - заглавными буквами, a - маленькими буквами, I – римскими цифрами, i – маленькими римскими цифрами.

На рисунке 7 можно видеть код вложенных друг в друга списков с разными типами нумерации.

Рисунок 7 – Нумерованные списки

Списки определений используютсядля таких списков, которые состоят из пар «термин – определение». Примером могут служить словари, справочники, энциклопедии и так далее. Список определений обозначается тегами < dl>...< /dl> .

Содержимым списка определений dl является некоторое количество пар «термин» (обозначаемый элементом < dt> < /dt> ) и «определение» (обозначаемое элементом < dd> < /dd>.

На рисунке 8 приведен пример списка терминов и определений и его внешний вид при отображении в окне браузера.

Рисунок 8– Нумерованные списки

Создание гиперссылок

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

Атрибут href определяет адрес документа или фрагмента документа для гипертекстовой ссылки.

Пример: Так выглядит ссылка на поисковый портал Яндекс:

< a href =" http: //yandex.ru" > Яндех.ru< /a>

Ссылка на файл index.html в текущей папке:

< a href=" index.html" > Оперативная память < /a>

⇐ Предыдущая 1 234 5 6 7 8 9 10 Следующая ⇒