3. Применение языка html
3.1. Структура документа html
Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Документ HTML всегда должен начинаться с тега <HTML> и заканчиваться закрывающим тегом </HTML>. В каждом HTML-документе есть раздел заголовков и тело документа. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD>…</HEAD>. В раздел <HEAD> вложен тэг <TITLE>…</TITLE>, служащий для обозначения наименования страницы. Наименования страниц отображаются в строке заголовка окна браузера. Браузер - это программа, установленная на компьютере пользователя, и служащая для поиска и отображения информации в сети. Браузер считывает Web-страницы и другие файлы с диска сервера и отображает их содержимое на мониторе компьютера пользователя.
Тело документа ограничивается тегами <BODY>…</BODY>. Эта та часть документа, которую разрабатывает автор страницы и которая отображается браузером.
Задание №1
Запустите текстовый редактор Блокнот.
Введите текст документа:
<HTML>
<HEAD>
<TITLE>Лабораторная работа «Создание Web-страницы»</TITLE>
</HEAD>
<BODY>
Это моя первая страница!
</BODY>
</HTML>
Сохраните этот документ с именем first.html.
Запустите программу Internet Explorer.
Выполните команду меню ФайлОткрыть. Щелкните на кнопке
Обзор и откройте файл first.html.
Получите изображение файла как на рисунке 3.1.
Рис. 3.1. Пример простейшей Web-страницы
Название страницы, заключенное в теги <TITLE>…</TITLE>, отобразилось в заголовке окна браузера, имя файла страницы – в строке адреса, а содержание страницы, ограниченное тегами <BODY>…</BODY> – в окне просмотра.
3.2. Заголовки и абзацы
Язык HTML поддерживает 6 уровней заголовков, отличающихся размерами текста. Они задаются парными тэгами от <H1>…</H1> до <H6>…</H6>. Заголовки 1 уровня обозначаются тэгом <Н1> и отображаются самым крупным шрифтом, а 6 уровня <Н6> самым мелким. Грамотное использование заголовков значительно улучшает читабельность страницы, но не следует использовать на одной странице заголовки более трех различных уровней вложенности.
При создании абзацев в HTML-документах необходимо учитывать, что нажатие клавиши Enter не создает новый абзац. Текст, который надо представить на странице в виде отдельного абзаца, заключается в теги <P>…</P>. Закрывающий тег </P> необязателен. После открытия страницы в окне Web-браузера все абзацы ее текста, помеченные тэгом <P>, разделяются пустыми строками, что улучшает ее компоновку и внешний вид.
Для заголовков и абзацев можно использовать атрибут ALIGN, задающий выравнивание текста по левому краю, по центру или по правому краю. По умолчанию браузер выравнивает заголовки и абзацы по левому полю.
<H1 ALIGN="CENTER">заголовок выровнен по центру</H1>
<P ALIGN="RIGHT">абзац выровнен по правому краю</P>
В качестве ограничителя абзацев можно использовать горизонтальную линию. Для этого используется непарный тег горизонтальной линейки <HR>.
<HR ALIGN="LEFT" SIZE=10 WIDTH=50% NOSHADE>
Этот тег задаёт горизонтальную линию шириной в 10 пикселов, расположенную слева и занимающую половину ширины окна. Атрибут NOSHADE указывает, что при отображении линии объемное затенение отсутствует.
Для перехода к новой строке используется непарный тег <BR>. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки. Основное использование этого тэга - для принудительного размещения встроенных элементов в определенном месте страницы. Он удобен в тех случаях, когда необходимо увеличить пустые области между отдельными элементами страницы.
Задание №2
В редакторе Блокнот введите текст второго документа:
<HTML>
<HEAD>
<TITLE>ВПИ</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Волжский политехнический институт</H1>
<H2 ALIGN="CENTER">(филиал) ВолгГТУ</H2>
<H3 ALIGN="CENTER">www.volpi.ru</H3>
<P>Направление 230100 – «Информатика и вычислительная
техника»</P>
<P> Кафедра «Информатика и технология программирования»</P>
<HR ALIGN="RIGHT" SIZE=6 WIDTH=50%>
<H3 ALIGN="RIGHT">Контактная информация</H3>
<P ALIGN="RIGHT">Телефон: (8443) 41-22-62</P>
<P ALIGN="RIGHT">e-mail: vit@volpi.ru</P>
</BODY>
</HTML>
Сохраните документ в файле с именем format.html.
Вернитесь в программу Internet Explorer, откройте документ format.html и получите изображение файла как на рисунке 3.2.
Рис. 3.2. Страница "ВПИ"