Знакомство с языком разметки гипертекста HTML
Лабораторная работа 12
Задание. Изучить теоретический материал и выполнить задания 1–12.
Стандарты языка HTML.. 2
Браузеры.. 2
Редакторы HTML-документов. 2
Задание 1. 3
Основы языка HTML.. 3
Синтаксис HTML-тегов. 3
Структура HTML-документа. 4
Задание 2. 4
Информация о документе в секции заголовка. 4
Задание 3. 4
Форматирование абзацев. 5
Задание 4. 5
Задание 5. 5
Форматирование символов. 6
Задание 6. 6
Параметры шрифта. 6
Представление цветов в HTML-документах. 6
Задание 7. 7
Цвета основного текста и фон документа. 7
Задание 8. 7
Адресация ресурсов. 7
Графические изображения. 8
Задание 9. 9
Графические форматы.. 9
Списки. 9
Задание 10. 9
Таблицы.. 10
Задание 11. 11
Заголовки разных уровней внутри текста. 11
Символьные примитивы.. 11
Комментарий. 12
Гиперссылки. 12
Задание 12. 12
Одним из основных сервисов Интернет можно считать службу World Wide Web (WWW). Информация в WWW представлена в виде гипертекстовых (или, более широко, гипермедийных) документов, которые могут содержать отформатированный текст, графику, аудио- и видеофрагменты. Основной особенностью гипертекстовых документов является наличие активных зон, чувствительных к щелчку мыши. Активными могут быть фрагменты текста, целые изображения и их части; щелчок по активной зоне вызывает загрузку связанного с этой зоной (целевого) документа.
Гипертекстовые документы представляют собой текстовые файлы, размеченные в соответствии со стандартами языка HTML (HyperText Markup Language – язык разметки гипертекста). Говоря о таких файлах, употребляют разные термины: HTML-файл, HTML-документ, HTML-страница, Web-страница, WWW-страница и т.д. Совокупность HTML-файлов, посвященных определенной теме, оформленных в едином стиле и связанных друг с другом гиперссылками, представляют собой Web-сайт.
Просмотр HTML-документов осуществляется с помощью программ-браузеров (от англ. browser), которые отображают документ в соответствии с HTML-разметкой и обеспечивают навигацию по гиперссылкам.
Стандарты языка HTML
Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами(от англ. tag). Встречающиеся в тексте документа HTML-теги интерпретируются браузером при отображении документа. Ряд тегов указывает браузеру, как надо отформатировать текстовый фрагмент (они задают размер, цвет, начертание, выравнивание текста). Другие теги определяют графическое оформление (фон документа, вставка изображений), задают активные зоны и т.д. Каждый из многих десятков тегов позволяет задать какие-то параметры отображения документа.
Синтаксис и семантика языка HTML определяются в стандарте HTML. Стандарты разрабатываются на основании многочисленных предложений, проходят ряд стадий. Разработка проводится группой под эгидой World Wide Web Consortium (W3C).
Основными вехами на пути развития стандартов HTML можно считать принятие стандартов HTML 1.0, HTML 2.0, HTML 3.2, HTML 4.01. Каждый вновь принимаемый стандарт предоставляет в распоряжение web-мастера новые теги, позволяющие сделать HTML-документ эффективным и внешне привлекательным.
Браузеры
В Интернет представлены разные типы информационных ресурсов, передача которых с компьютера на компьютер подчиняется определенным сетевым протоколам. Для гипертекстовых документов системы WWW это протокол http (HyperText Transfer Protocol – протокол передачи гипертекстов). Обмен данными между компьютерами согласно определенному протоколу организуется программами двух типов: программами-серверами и программами-клиентами. Браузер – это программа-клиент.
Программа-сервер обеспечивает хранение информационных ресурсов и выдачу их по запросам программ-клиентов. Программа-клиент должна уметь формировать запросы серверу, принимать и интерпретировать для пользователя получаемую с сервера информацию.
За годы развития Интернет был создан целый ряд программ просмотра гипертекстовых документов, сейчас часто используют Netscape Navigatorфирмы Netscape Communications Corporation либо Microsoft Internet Explorerфирмы Microsoft Corporation. Каждая из этих фирм постоянно развивает и дорабатывает свой браузер, выпуская все новые версии.
В процессе создания новой версии браузера разработчики разных фирм учитывают как рекомендации ныне действующего стандарта HTML, так и предложения по его развитию, особенно предложения, выдвинутые данной фирмой. Результат очевиден:
• браузеры разных фирм иногда по-разному интерпретируют теги в HTML-документе;
• есть теги, поддерживаемые только браузерами конкретной фирмы;
• браузеры устаревших версий “не понимают” тегов, соответствующих новым стандартам.
В случае, когда в HTML-документе встречаются теги, неизвестные браузеру, он их просто игнорируетбез всяких сообщений об ошибках.
Таким образом, HTML-документ, не содержащий тегов, соответствующих последнему принятому стандарту HTML, скорее всего, будет адекватно отображен практически всеми браузерами. Применяя же новинки последнего стандарта, Вы, скорее всего, лишитесь существенной части потенциальной аудитории, которая в лучшем случае не сможет в полной мере насладиться изяществом оформления Вашего сайта, а в худшем – вообще не сможет получить никакой информации.
Редакторы HTML-документов
Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте. Это очень поучительно, поскольку Вы поневоле изучите синтаксис HTML-тегов и прочувствуете особенности структуры HTML-документа, но при этом все теги придется вводить вручную.
Наиболее часто, все же, используют специализированные редакторы, предназначенные именно для подготовки HTML-документов. Отличаясь друг от друга спектром возможностей, предоставляемых разработчику, они обладают принципиально схожим интерфейсом, позволяя вставлять теги с помощью кнопок панелей инструментов либо команд меню, и задавать атрибуты тегов в диалоговых окнах. При этом разработчик видит документ таким, каким он будет при просмотре с помощью браузера. Возможны также просмотр и правка исходного текста HTML-документа.
Особенно распространены HTML-редакторы фирм-разработчиков браузеров; на сегодняшний день это Netscape Composerи редакторы фирмы MicrosoftFrontPageи FrontPage Express. Много новых возможностей по сравнению с ними предоставляют редакторы других фирм – например, Macromedia Dreamweaver и Allaire Homesite.
Наконец, HTML-документ может быть получен преобразованием в HTML-формат, например, из формата документов пакета Microsoft Office. Широко используемый текстовый редактор Microsoft Word, а также не менее популярные Microsoft Excel и Microsoft Access позволяют сохранить файл в формате HTML. При этом сохраняются, насколько это возможно, особенности форматирования символов и абзацев, изображения, таблицы, списки и так далее. Надо отметить, что при таком преобразовании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции. Значительно эффективнее пользоваться специальными HTML-редакторами.
Задание 1.
1) Откройте любой текстовый редактор, наберите, например, «Моя первая HTML-страница» и сохраните документ под именем, например, first.htm. Откройте этот документ как HTML-страницу в Internet Explorer.
2) Наберите тот же текст в текстовом процессоре Word. Сохраните как Html-документ second.htm. Сравните полученные текстовые файлы.
Основы языка HTML
Синтаксис HTML-тегов
HTML-документ представляет собой текстовый файл, содержащий собственно текст, который должен быть отображен в окне браузера, и команды разметки – HTML-теги, определяющие внешний вид документа при их интерпретации браузером.
HTML-тег записывается в угловых скобках <…> и состоит из имени, за которым может следовать список атрибутов (для большинства тегов необязательный).
<Имя_тега название_атрибута=значение_атрибута >.
Например,
<B>
<IMG SRC="pict.gif">
<FONT SIZE=+2 COLOR=RED>
Имена и атрибуты представляют собой английские слова и аббревиатуры и почти всегда их смысл прозрачен.
Атрибуты в списке отделяются друг от друга одним или несколькими пробелами, либо символами табуляции, либо символами перевода строки; последовательность записи атрибутов несущественна.
В случае, когда значение атрибута представляет собой более чем одно слово либо одно число, его следует заключить в одинарные или двойные кавычки.
Регистр символов в записи тегов и атрибутов значения не имеет.
Теги условно можно разделить на две группы:
1. Теги-контейнеры имеют два компонента: открывающий <Имя_тега>, и закрывающий < /Имя_тега>.
Фрагмент документа, расположенный между открывающим и закрывающим элементом тега-контейнера форматируется браузером согласно смыслу тега. Например, текст, расположенный между тегами <B> и </B>, будет выведен полужирным начертанием.
Теги могут быть вложены друг в друга, для придания тексту сразу нескольких свойств. В этом случае, порядок закрытия тегов должен быть строго противоположен порядку их открывания. Например, <B><I> полужирный курсивный текст </I></B>
В закрывающих компонентах тегов атрибуты не указываются.
2. Автономные теги не имеют конечного компонента. При их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тег <IMG SRC="pict.gif">, встречающийся в тексте HTML-документа, вызывает вставку графического изображения из файла pict.gif.
Вот пример тега с атрибутами: <FONT SIZE=+2 COLOR=RED>
Встретив такой тег в HTML-документе, браузер интерпретирует его, выводя следующий за тегом текст символами, увеличенными относительно базового размера (SIZE=+2) и красного цвета (COLOR=RED); это форматирование текста применяется до тех пор, пока не встретится закрывающий тег </FONT> .
Структура HTML-документа
Здесь приводится структура HTML-документа, не содержащего кадров.
HTML-документ заключается в теги <HTML> и </HTML>. Между этими тегами располагаются две секции: секция заголовка (между тегами <HEAD> и </HEAD>) и секция тела документа (между тегами <BODY> и </BODY>). Секция заголовка содержит описание параметров, используемых при отображении документа, но не отражающихся непосредственно в окне браузера. Секция тела документа содержит текст, предназначенный для отображения браузером и теги, указывающие на способ форматирования текста, определяющие графическое оформление документа, задающие параметры гиперссылок и так далее. Вот самый простой HTML-документ:
<HTML>
<HEAD>
</HEAD>
<BODY>
Моя первая HTML-страница
</BODY>
</HTML>
Задание 2.
Что отобразит браузер в указанном примере? Проверьте, изменив содержимое файла first.htm согласно данному примеру.
Информация о документе в секции заголовка
В секции заголовка <HEAD> указывается информация о документе, которая используется при его отображении. Синтаксически не является необходимым, но на практике обязательно должен быть задан заголовок документа.
Текст, заключенный между тегами <TITLE>и </TITLE>, отображается в заголовке окна браузера. Фактически, это первая информация о содержании документа, которую видит пользователь еще до загрузки документа. Заголовок должен быть достаточно кратким и в то же время емким, отражать суть документа и заинтересовывать потенциальную аудиторию.
Задание 3.
Добавьте заголовок окна HTML-документа.
В секции заголовка обычно помещается и ряд тегов <META>с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о документе.
Атрибуты тега <META>:
1. Обязательным является атрибут CONTENT, в котором указывается значение метаинформации.
2. В качестве второго атрибута может использоваться атрибут HTTP-EQUIV (эквивалентное http-имя метаинформации, которое будет включено в http-заголовок html-документа при передаче его клиенту) либо атрибут NAME, задающий имя метаинформации.
Вот примеры метаинформации, задаваемой в секции заголовка:
| <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> | указывается тип кодовой таблицы (windows-1251, Koi8-R и другие), использованной при подготовке текстовой части документа; включая подобные теги в документ, Вы избавляете свою аудиторию от необходимости настраивать браузер на конкретную кодировку кириллицы. |
| <META NAME="Author" CONTENT="Valentina Zaharkina"> | указывается автор WWW-страницы. |
| <META NAME="GENERATOR" CONTENT="Mozilla/3.01Gold (Win95; I) [Netscape]"> | указывается программа-редактор HTML-страницы. |
| <META NAME="KEYWORDS" CONTENT="фракталы, множество Мандельброта, динамические системы, fractal, Mandelbrot set, dynamical systems"> | указывается через запятую набор ключевых слов, которые могут быть использованы рядом поисковых систем |
| <META NAME="DESCRIPTION" CONTENT="Представляем информацию о творчестве учеников средней школы №1 г. Великие Луки”> | приводится краткое описание содержания сайта. |
Форматирование абзацев
Задание 4.
1) Добавьте к HTML-документу текст. Сначала название текста, затем два–три абзаца по 4–5 строк (можно скопировать из данного документа).
2) Просмотрите результат в браузере.
Текст выводится в окно браузера слово за словом; при достижении правой границы окна очередное слово переносится на новую строку. Если документ не умещается в видимой части окна, то появляется вертикальная полоса прокрутки.
Весь так называемый пробельный материал (последовательно идущие пробелы, символы табуляции, символы перевода строки) отображаются браузером как один пробел. Например, если содержимое секции <BODY> имеет вид
<BODY>
Попытаемся вывести лишние пробелы
и переводы
строки.
</BODY>
то в окне браузера будет выведен текст без лишних пробелов и перевода строки.
Для того чтобы вывести в тексте ряд последовательных пробелов или несколько пустых строк, приходится применять различные теги:
Каждый символьный примитив воспринимается как один пробел; например, текст HTML-документа
<BODY> шесть пробелов </BODY>
будет выглядеть как "шесть пробелов"
Тег <BR> (от англ. break) разрывает текстовый поток и вставляет новую строку. Несколько последовательных тегов <BR> интерпретируются как несколько пустых строк. Межстрочный интервал одинарный. Закрывающего компонента тег не имеет.
Текст, заключенный между тегами <PRE> и </PRE> (от англ. preformatted), отображается так, как он был отформатирован предварительно, со всеми пробелами и переносами строк.
Тег <P> (от англ. paragraph) начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом. Абзац пустым быть не может, то есть несколько последовательных тегов <P> интерпретируются как один (в отличие от тега <BR>).
Тег <P>имеет необязательный атрибут ALIGN, указывающий на вид выравнивания абзаца. Атрибут ALIGN может принимать значения LEFT, CENTER и RIGHT, задающие выравнивание по левому краю, центру и правому краю окна браузера.
По центру будет выровнен и текст, заключенный в теги<CENTER> ...</CENTER>.
Применение закрывающих компонентов </P> и </CENTER>, вообще говоря, не обязательно. Если закрывающего компонента нет, то заданный тип выравнивания сохраняется до следующего тега, задающего выравнивание, либо до конца документа.
Задание 5.
Расположите название текста по центру (см. синтаксис тегов).
Отформатируйте один абзац тегами <PRE> и </PRE>, остальные тегом <P> с различными выравниваниями.
Форматирование символов
Теги форматирования символов подразделяют на две группы: теги физического форматирования и логического форматирования. Все эти теги имеют как открывающий, так и закрывающий компонент. Вот наиболее употребительные из этих тегов:
Физическое форматирование:
<B>Полужирный шрифт </B>Полужирный шрифт(от англ. bold)
<I>Курсив </I> Курсив (от англ. italic)
<S>Зачеркнутый шрифт </S> Зачеркнутый шрифт (от англ. strikethrough)
<U>Подчеркнутый шрифт </U> Подчеркнутый шрифт (от англ. underline)
<Tt>Шрифт фиксированной ширины</TT> fixed шрифт (от англ. TeleType)
<SUP>Верхний индекс</SUP> Верхний индекс (от англ. superscript)
<SUB>Нижний индекс </SUB> Нижний индекс (от англ. subscript)
Теги форматирования могут быть вложены друг в друга в любом количестве. Помните про их своевременное закрытие (см. Синтаксис тегов).
Задание 6.
Добавьте к HTML-документу следующий текст: