- •1 Структура html-документа
- •2 Структурирование и разметка контента
- •2.1 Заголовки
- •2.2 Встроенные и блочные элементы
- •2.3 Списки
- •2.4 Разметка текста
- •2.5 Таблицы
- •2.6 Гипертекстовые ссылки
- •2.7 Изображения
- •2.8 Включение объектов в документ
- •3 Формы
- •3.1 Формирование элементов управления
- •3.2 Организация списков
- •3.3 Связывание элементов формы
- •4 Фреймы
- •4.1 Разбиение окна браузера на фреймы
- •4.2 Определение фрейма для отображения документа
- •4.3 Встроенные фреймы
Лабораторная работа №1
Создание WEB-страниц c помощью языка HTML
Цель работы: научиться создавать HTML-документы с использованием основных элементов (заголовков, списков, таблиц, графических изображений, гиперссылок, форм и фреймов).
1 Структура html-документа
Все элементы языка образуют определенную иерархию. Есть более важные, а есть те, без которых можно обойтись; одни могут вкладываться в другие, обратная ситуация не всегда возможна; есть работающие самостоятельно, а есть такие, которые работают только в паре.
1.1 Информация о версии языка. Элемент <!doctype>
Если рассмотреть любой HTML-документ, то определенные элементы в нем всегда можно найти.
Правила хорошего тона советуют в первом элементе разместить информацию о версии языка, которую вы используете, чтобы браузер, отображающий Web-страницу, мог учесть особенности или ограничения этой версии.
Рассматриваемый элемент имеет только открывающий тег <!doctype>, который начинается восклицательным знаком. В данном теге заключена информация о типе документа.
В версии HTML 4.01 есть ссылки на три вида документов.
1. HTML 4.01 Strict - наиболее «правильная» версия, не поддерживающая отмененные элементы для форматирования текста. Элемент обычно имеет вид
<!doctype html public "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/ html4/ strict.dtd">
С указанного адреса браузер (в случае, необходимости) может загрузить описание элементов данной версии языка. Часть, касающаяся адреса, может быть опущена. Аббревиатура DTD (Document Type Definition) означает «определение типа документа». Эта версия языка не поддерживает подокна-фреймы, речь о которых пойдет позже.
2. HTML 4.01 Transitional - переходная версия языка, наиболее популярная в настоящее время. Подразумевается, что предыдущие требования к синтаксису смягчаются и поддерживаются страницы, написанные до появления стандарта HTML 4.0. Допустимы отмененные в современном языке элементы, например, <font>. В этом случае <!doctype> имеет вид
<!doctype html public"-//W3C//DTD HTML 4.01 Transitional//EN">
Как и в предыдущем примере, может быть использован адрес документа: http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd
3. HTML 4.01 Frameset — используется в том случае, если ваш документ включает фреймы. Записывается
<!doctype html pubiic"-//W3C//DTD HTML 4.01 Frameset//EN">
Адрес документа: http://www.w3.org/TR/1999/REC-html40l-19991224/ frameset.dtd
1.2 Элемент <html>
Этот элемент служит признаком того, что перед нами Web-страница, или HTML-документ.
Правило записи (синтаксис): элемент является контейнером. Открывающий тег - <html>, закрывающий - </html>. Оба тега могут отсутствовать. Однако их использование является правилом хорошего тона. Все остальные элементы, кроме <!doctype>, помещаются внутрь контейнера <html>...</html> и служат его контентом.
Из содержимого контейнера наибольшее значение имеют два элемента, располагаемые друг за другом - <head> (голова) и <body> (тело), то есть заголовочная и основная части. Документ может содержать один раздел <head> и один <body>. Заголовочная часть не отображается браузером и несет служебную информацию. В <body> располагается основное содержание Web-страницы.
|
Пример 1.1. Структура элементарного WEB-документа |
|
<!doctype html public"-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Title</title> </head> <body> Hello, world! </body> </html>
|
1.3 Элемент <HEAD> - высокоуровневая информация о Web-странице
Раздел HEAD — первый раздел HTML-документа. Он располагается после декларации DOCTYPE и открывающего тега <HTML>, перед разделом BODY. В составе HEAD должен присутствовать элемент TITLE, который часто является единственным элементом данного раздела. Элемент TITLE обязателен в составе документа HTML 4.0 и содержит текст заголовка. Содержимое элемента TITLE представляется в заголовке окна браузера.
Элементы МЕТА позволяют записывать информацию о документе, перенаправлять и обновлять Web-страницы, а также включать звуковые файлы. Как привило, данные в теге МЕТА задаются в виде пар NAME-CONTENT, где NAME представляет имя свойства, a CONTENT— его значение. Обычно с именем связываются такие записи, как author (автор документа), description (краткое описание), keywords (ключевые слова, разделенные запятыми, предназначенные для использования поисковыми серверами) и generator (программа, с помощью которой документ был сгенерирован).
|
Пример 1.2. Раздел HEAD, содержащий тег МЕТА |
|
<HEAD> <ТITLE>Why You Should Buy Windows 2000</TITLE> <META NAME="author" CONTENT="Bill Gates"> <MEТA NAME="keywords" CONTENT="Windows,Advocacy,OS,Operating Systems"> <MЕTA NAME="description" CONTENT="A summary of the advantages of Windows 2000."> </HEAD> . . .
|
Атрибут HTTP-EQUIV позволяет обновлять страницы, используя значение Refresh. Предположим, что электронная версия газеты содержит заголовки, которые время от времени изменяются. Чтобы отобразить эти изменения, страница должна обновляться каждые 30 минут (1800 секунд). В примере 1.3 показано, как может быть использован дескриптор МЕТА для автоматического обновления документа на экране. Для этого задается выражение НТТР-EQUIV="Refresh", а в качестве значения атрибута CONTENT указывается время (1800 секунд), по истечении которого страница должна быть перезагружена.
|
Пример 1.3. Web-страница автоматически перезагружается каждые 30 минут |
|
<HЕАD> <ТITLЕ>Why You Should Buy Windows 2000</TITLE> <МЕТА HTTР-EQUIV="Rеfresh" CONТЕNT="1800"> </HЕАD> . . .
|
Вместо перезагрузки страницы автор может предоставить пользователю документ, расположенный по другому URL (пример 1.4). Такой подход применяется тогда, когда URL документа изменился и автор собирается автоматически перенаправить пользователя к новому URL. Новая страница автоматически отобразится на экране браузера по истечении 5 секунд. Чтобы это произошло, надо задать значение атрибута HTTP-EQUIV, равное Refresh, и указать новый URL документа.
|
Пример 1.4. Перенаправление по новому адресу |
|
<HEAD> <ТIТLE>Why You Should Buy Windows 2000 (New Address)</TITLE> <MЕТА HTTP-EQUIV="Refresh" СОNTЕNT="5; URL=http://www.apple.com/Buy-Win2000.html"> </HEАD> . . .
|