HTML. Заголовки

Цель работы: изучение дескрипторов < H>, < /H> и приобретение умения создания заголовков в документе WEB.

Заголовки — прекрасный инструмент структурной организации содержимого Web-страницы. Обычно пользователю бывает достаточно пробежать глазами набор заголовков, чтобы быстро отыскать интересующую его информацию. Умело подобранные заголовки улучшают общий вид и дизайн WEB-страницы.

Создание заголовков. Стандарт HTML предусматривает возможность использования заголовков шести уровней вложенности. Заголовки уровня 1 (обозначаемые дескриптором < H1>) отображаются самым крупным шрифтом, а уровня 6 (< Н6>) — самым мелким (см. рис. 5-1). Заголовки, обозначаемые дескрипторами < Hl>, < H2> и < H3>, обычно используют по прямому назначению, в качестве средства выделения разделов документа, а тяги < H5> и < Н6> часто применяют для выделения фрагментов текста, содержащих сведения об авторских Рис. 5-1. Создание заголовков.

правах и иную подобную информацию официального характера. Шрифт заголовков, форматируемых с помощью дескриптора < H4>, как правило, не отличается по размеру от шрифта, которым набран основной
текст страницы.

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

Web-броузеры обычно отображают заголовки полужирным шрифтом, добавляя над и под ними
пустые строки. Большинство броузеров по умолчанию выравнивает текст заголовков влево. Атрибут ALIGN позволяет отступить от этого правила. Хотя атрибут ALIGN все еще поддерживается
всеми популярными Web-броузерами, в настоящее время более предпочтительным считается
применение листов стилей. Применение листов стилей поможет гарантировать сообразность использования
заголовков в тексте WEB-страницы. Лист стилей дает возможность единовременного определения внешнего вида заголовков

документа. Например, вы можете указать, чтобы все заголовки уровня 2 отображались с помощью шрифта Pragmatica Condensed (в Word > Ч) с эффектом подчеркивания.

Ход работы:

1. Ознакомиться с данной инструкцией.

2. Вызовите броузер WEB щелчком «мыши» по иконке.

3. В меню “файл→ открыть” откройте файл созданный в лабораторной работе № 4.

4. Добавьте в тело < body> ниже приведенный текст (в шаблоне, ранее созданном в лабораторной работе №4 «Калоев HTM. Лаб.4) в графическом редакторе Блокнот.

5. Документ HTML, содержащий форматирование абзаца, должен иметь описательный элемент < H>.

В итоге, документ HTML будет выглядеть следующим образом:

< html>

< HEAD> > <! -- тег заголовков -->

< TITLE> Моя первая проба сил в HTML< /TITLE> <! -- тег названия страницы -->

< STYLE>

H2 (font-family: " Pragmatica Condensed"; text-decoration: underline)
< /STYLE>

< /HEAD>

< BODY>

< Н2> Мой первый заголовок< /Н2>

< Н2> Второй заголовок< /Н2>

< Н2> ПРОБА - ШАБЛОН< /Н2>

< H2 align =" center" >

Примечание: таблицы стилей позволяют быстро форматировать заголовки Web-страниц.< /H2>

< /BODY>

< /html>

6. Сохраните набранный текст под тем же именем (под названием включающем Вашу фамилию, например: Калоев HTML. Лаб. 5) и расширением «.html» в отдельной папке в корневом каталоге или в папке «Мои документы».

7. Запустите полученный файл в броузере Internet Explorer и в открывшемся окне Вы увидите набранный абзац «Проба сил в HTML».

8. Проанализируйте набранный код фрагмента программы, поэкспериментировать, изменяя написание приведенных дескрипторов (тэгов) в редакторе Блокнот (не забудьте сохранить изменения и обновить страницу).

9. Оформите лабораторную работу в письменном виде (преподавателю лабораторную работу следует сдавать и в письменном и в электронном виде).

Задачи для самостоятельного решения.

Предлагается самостоятельно применить дескриптор < font size = ”…”> для задания шрифта заголовка? Чтобы посмотреть, как изменяется размер шрифта написания заголовка. Измените в контейнере < H2> < /H2> название заголовка. Измените атрибут 2, чтобы посмотреть изменение написания заголовка, например на 6 или на 3.

Контрольные вопросы:

1. Какие тэги вы применили в выше приведенном фрагменте?

2. Почему в HTML применяются дескрипторы отдельного форматирования заголовков?

3. Почему в HTML 3.2 применяют специальные листы стилей форматирования?

4. Можно ли применить листы стилей в HTML 2.0?

5. В каком порядке располагаются дескрипторы HTML и атрибуты?

6. Чем отличаются атрибуты от дескрипторов?