Лабораторная работа №12. Создание HTML-документов

Цель работы: Знакомство с основными элементами языка HTML. Получение навыков создания HTML-документов в текстовом редакторе Блокнот.

Краткая теория.

World Wide Web и HTML

Современный этап развития Интернета начался в начале 90-х годов с появлением нового протокола обмена информацией. Этот про­токол называется HTTP (HyperText Transfer Protocol — протокол передачи гипертекста). Вместе с этим протоколом появилась и служба World Wide Web (часто также называемая WWW или просто Web), которая представляет собой обширную сеть серверов HTTP,передающих файлы через Интернет.

Основную часть этих файлов представляют собой Web-страницы — специальные файлы, написанные на языке HTML (HyperText Markup Language — язык разметки гипертекста). Web-страницы публикуются в Интернете путем размещения таких файлов на серверах HTTP (Web-узлах). Содержание Web-страниц может быть разным и посвященным совершенно произвольным темам, но все они используют одну и ту же основу — язык HTML. До­кументы HTML обычно имеют расширение .НТМ или .HTML.

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

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

Но самое важное слово в этом описании — язык. HTMLпред­ставляет собой компьютерный язык, в некотором смысле родст­венный языкам программирования. Он включает достаточно строгие правила, которые необходимо соблюдать, чтобы получить правильные результаты. Как и любой язык программирования, HTML-язык имеет свой синтаксис и свою структуру. Синтаксис языка определяется набором команд и правилами их использования. Структура языка определяет последовательность размещения команд языка и элементов гипертекстового документа в теговой модели.

Назначение языка HTML

Несмотря на то, что Web-страницы появляются на экране компью­тера в отформатированном виде, язык HTML не предназначен для форматирования документов, поскольку жесткое задание оформления и точное позиционирование элементов текста на стра­нице приводит к ограничениям, недопустимым в Интернете.

Так, например, когда мы форматируем текст с помощью тексто­вого процессора Word, мы однозначно определяем, как должен выглядеть этот текст при печати на совершенно определенном прин­тере ина бумаге заданного формата. Когда документ размещен в Интернете, невозможно предсказать, какой компьютер будет использован для его просмотра, да и будет ли вообще у этого ком­пьютера монитор.

Может быть, текст появится на экране компьютера, работающего в
системе Windows в окне одного из современных браузеров. Может
быть, это будет текстовый браузер (неспособный отображать
графику), работающий в системе MS-DOS. Возможно, текст доку­мента вообще не будет отображаться на экране, а будет воспро­изводиться вслух с помощью синтезатора речи. Для слепого пользователя документ может выводиться на специальное устрой­ство шрифтом Брайля.

В связи с необходимостью подготавливать документы для столь разнообразных устройств язык HTML не предназначен для описа­ния формата документа. Он служит для функциональной разметки документа, то есть позволяет определить назначение фрагментов текста.

Например, если в тексте встречается заголовок, то код HTML просто указывает, что соответствующий фрагмент является заго­ловком. Получив такой код, программа просмотра (браузер) сама «решает», что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом, а может быть выровняет по центру экрана. Возможно, что синтезатор речи, воспроизводящий текст документа, использует код заголовка для того, чтобы повысить громкость и сделать необходимую интонационную паузу.

Во время просмотра веб-страницы в окне обозревателя командой ВидàПросмотр HTML-кода можно отобразить HTML-документ в окне текстового редактора Блокнот, просмотреть его и при необходимости внести правки в те или иные теги и содержательные элементы.

Язык HTML все-таки имеет некоторые команды форматирования, но общий курс на разделение содержания и оформления документа выдерживается четко. В последней версии HTML [4.0] использо­вать команды форматирования, как правило, не рекомендуется

Теги HTML

Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются тегами. Тег — это набор символов. Все теги начинаются с символа «меньше» (<) и заканчиваются символом «больше» (>). Пару этих символов иногда называют угло­выми скобками. После открывающей угловой скобки идет ключевое слово, определяющее тег.

Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения — можно использовать как строчные, так и прописные буквы, хотя общепринято исполь­зовать прописные буквы, чтобы теги отличались от обычного текста документа.

Как правило, один тег HTML воздействует только на часть доку­мента, например на абзац. В таких случаях используют парные теги: открывающий и закрывающий. Открывающий тег создает эффект, а закрывающий — прекращает его действие. Закрывающие теги начинаются с символа косой черты (/).

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

Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.

При отображении документа в браузере сами теги не отображают­ся, но влияют на способ отображения документа.

Атрибуты тегов

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

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

Закрывающие теги никогда не содержат атрибутов.

Комментарии

В языках программирования общепринята возможность использо­вания комментариев — текстовых строк, не являющихся частью программы, а служащих для пояснения. Язык HTML тоже имеет такую возможность.

Комментарии в языке HTML начинаются со специального тега <!—. Следует обратить внимание на отсутствие закрывающей угло­вой скобки. Любой текст, идущий за этим тегом, рассматривается как комментарий и не отображается при отображении документа. Заканчивают комментарий символами —>. Комментарий может содержать любые символы, кроме символа «больше» (>), и, таким образом, не может включать в себя теги.

В таблице 8 приведены примеры некоторых тегов.

Таблица 8. Примеры тегов.

Примеры тегов HTML:
<title> <BoDy> <TABLE> </A> <img> </CenTEr>
Примеры парных тегов HTML:
<HTML> </НТМL>
<B> </B>
<HEAD> </HEAD>
<H3> </H3>
<ADDRESS> </ADDRESS>
<LI> </LI>
Примеры одиночных тегов HTML:
<BR> <HR> <META> <BASEFONT> <FRAME> <INPUT>
Примеры тегов HTML с атрибутами: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" BACKGROUND ="RAIN.GIF"> <OPTION SELECTED> <FRAME SRC="file.html" NORESIZE>

 

Структура документа HTML

Документ HTML состоит из основного текста документа и тегов разметки, которые, как мы уже знаем, являются наборами обычных символов. Таким образом, документ HTML — это, по существу, обычный текстовый файл. Для его создания можно использовать любой текстовый редактор, хотя бы и тот простейший редактор Блокнот, который входит в состав Windows 9x.

1.Все документы HTML имеют строго заданную структуру. Доку­мент должен начинаться с тега <HTML> и заканчиваться соответ­ствующим закрывающим тегом </HTML>. Эта пара тегов сообщает браузеру, что перед ним действительно документ HTML.

2.Документ HTML состоит из раздела заголовков и тела документа, идущих именно в таком порядке. Раздел заголовков заключен между тегами <HEAD> и </HEAD> и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <TITLE> и < /TITLE >, между которыми размещают «официальный» заголовок документа. Большинство браузеров, работающих в системе Windows, используют этот заголовок, чтобы заполнить строку заголовка окна браузера.

3.Сам текст документа располагается в теле документа. Тело документа располагается между тегами <BODY> и </BODY>.

Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются (или их наличие подразумевается) во всех документах HTML.

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

Простейший правильный документ HTML

<HTML>

<HEAD>

<ТIТLЕ>Заголовок документа< /ТIТLЕ >

</HEAD>

<BODY>