2.23. Создание гипертекстовых документов
Цель занятия – обучение основам языка HTML и создание Web-страниц.
Для подготовки Web-страниц к публикации в Internet применяется специальный язык разметки гипертекста – HTML (Hyper Text Markup Language), дословно с английского «язык маркировки гипертекста». Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли. Как любой программный продукт HTML имеет пронумерованные версии, или спецификации. Известны спецификации 2.0, 3.0, 3.2 и 4.0. Текущую спецификацию HTML всегда можно найти на сервере W3C (http://www.w3.org/). Разметка гипертекста указывает браузеру, в каком виде информация должна выводиться на экран. Браузер – это программа обмена информацией между компьютером и Web-сервером и отображения ее на экране. Подготовленный (размеченный) документ нужно поместить на Web-сервер, способный общаться с другими серверами по протоколу HTTP.
Что нужно для создания Web-документа. Любой браузер, пригодный для просмотра HTML-файлов, например, Microsoft Internet Explorer, а также любой простой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке, например, Блокнот (Notepad) – одно из приложений Microsoft Windows. Компьютер, на котором создаются HTML-документы, может не иметь подключения к Internet. При этом один и тот же файл с расширением *.html или *.htm может быть одновременно открыт и в Notepad, и в Microsoft Internet Explorer.
После сохранения изменений в Notepad, нажимается кнопка Reload («обновить») в окне браузера (например, Microsoft Internet Explorer), чтобы увидеть эти изменения реализованными в Web-документе.
О редакторах HTML-документов. В настоящее время широко используются следующие два типа редакторов HTML. Редакторы типа WYSIWYG , дословно с английского «что видишь, то и получишь»: Netscape Navigator Gold, Microsoft Front Page. Пользователь не видит внутренних особенностей разметки документа, с которым он работает, точно так, как при работе с текстовым процессором Microsoft Word. В последнем существует возможность сохранения текстового документа в формате HTML-файла. Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Для изучения основ HTML необходим только текстовый редактор и браузер.
Структура HTML-документа. Язык HTML не является языком программирования в общепринятом смысле этого понятия. Его операторы или теги (от английского слова tag, дословно «ярлык»), по терминологии этого языка, просто маркируют содержание документа (файла с текстовой, графической или другой информацией) для последующей интерпретации и отображения на экране программой-браузером.
Основные термины и определения языка.
ТЕГ – это символьная конструкция из < (открывающей) и >(закрывающей) угловых скобок, между которыми находится конкретный символ или строка символов, предписывающие браузеру отображение последующего содержания документа в соответствии с их назначением. Например, тег <P> предписывает браузеру отображение последующего текста в новом абзаце с вводом пустой строки перед этим новым абзацем. Язык HTML использует различные вводимые в текстовые документы теги, которые указывают, каким образом информация должна считываться Web-браузером. Большинство тегов - парные. Размечаемая информация помещается между открывающим тегом и закрывающим. Отличие закрывающего тега - наличие прямой косой черты после открывающей угловой скобки, например, </P >. Символы внутри угловых скобок тегов допускается записывать прописными или строчными буквами, так как браузеры не чувствительны к регистру, в котором набраны названия тегов.
ЭЛЕМЕНТ – это контейнер из открывающего и закрывающего тегов, внутри угловых скобок которых находится название элемента в виде символа или строки символов, а между тегами - фрагмент документа, подлежащий интерпретации и отображению браузером в соответствии с назначением элемента.
Существуют элементы, состоящие только из одного открывающего тега. Например, тег перевода строки <BR>. Некоторые элементы допускают использование без закрывающего тега. Например, тег абзаца <P>, тег горизонтальной линии <HR> и другие. В языке HTML существует возможность вложения элементов.
АТРИБУТ – это ключевое слово внутри открывающего тега элемента, имеющее стандартное имя и определенный набор значений, придающих те или иные свойства фрагменту документа, находящемуся между открывающим и закрывающим тегами элемента. В открывающем теге элемента может быть несколько атрибутов. Они отделяются друг от друга пробелами. Имя и значение атрибута рекомендуется записывать строчными буквами. Значение атрибута ставится в кавычки. Например, <P «align=center»>. Здесь значение «center» атрибута выравнивания align задает выравнивание текста абзаца по центру экрана. Численные значения атрибутов допускается использовать без кавычек.
В соответствии со стандартами HTML простейший документ должен включать элементы HTML, HEAD, TITLE, BODY и имеет вид:
<HTML>
<HEAD>
<TITLE>Невидимое в окне браузера название документа</TITLE>
...другие элементы, которые могут быть вложены в элемент HEAD
</HEAD>
<BODY>
...Содержание документа
</BODY>
</HTML>
Теги текста определяют, каким образом текстовая информация и графика должны быть представлены на экране.
Задача № 1. Вызовите текстовый редактор «Блокнот», который находится в группе «Стандартные». Наберите следующий ниже текст и сохраните под именем «web1.html» в личной папке на сетевом диске.
<HTML>
<HEAD>
<TITLE>Моя персональная страничка (заголовок)</TITLE>
</HEAD>
<BODY>
ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (Укажите свою фамилию, имя и отчество).
</BODY>
</HTML>
Форматирование смысловых групп текста. Для описания крупных структур документа, несущих общую смысловую нагрузку, применяются следующие элементы языка HTML уровня блока:
H1-H6 (заголовки)
P (абзац)
HR (горизонтальная линия)
DIV (деление документа на отдельные блоки)
CENTER (выравнивание текста или объекта)
BLOCKQUOTE (разметка цитат)
ADDRESS (адрес автора страницы)
UL, OL, DL (списки)
TABLE (таблицы)
PRE (предварительное форматирование)
FRAMESET (фреймы)
FORM (формы)
H1-H6 (заголовки). Элементы H1, H2, H3, H4, H5 и H6 используются в документе для разметки заголовков. Всегда указываются начальный и конечный теги. Заголовки, размеченные элементом H1, имеют более высокий уровень по сравнению с заголовком, размеченным элементом H2, и так далее вплоть до заголовка с разметкой элементом H6. При использовании этих элементов осуществляется вставка пустой строки до и после заголовка. Для выравнивания заголовка относительно полей страницы в открывающем теге используется атрибут «align», который может принимать значения «center» (выравнивание по центру), «left» (выравнивание по левому краю) или «right» (выравнивание по правому краю). По умолчанию заголовок выравнивается по левому краю. Например:
...конец текста абзаца. <H1 align="center">Центрированный заголовок</H1> Начало следующего абзаца... ...конец текста абзаца.
Центрированный заголовок
Начало следующего абзаца...
P (абзац). Для этого элемента разметки параграфов (абзацев) необходимо указывать открывающий тег, закрывающий тег может быть опущен.
Тег нового абзаца - <P> предписывает браузеру разделить два фрагмента текста пустой строкой.
Тег нового абзаца - <P> с атрибутом align="right" предписывает браузеру форматирование по правому краю страницы.
Тег нового абзаца - <P> с атрибутом align=«center» предписывает браузеру форматирование по центру страницы.
Тег нового абзаца - <P> с атрибутом align=«justify» предписывает браузеру форматирование по ширине страницы.
По умолчанию форматирование по левому краю (align=«left») страницы.
Элемент перевода строки, состоящий из непарного тега <BR> аналогичен элементу нового абзаца, но он не вводит пустую строку до отделяемого им текста. После этого элемента текст продолжает отображаться с начала следующей строки. Тег удобен при публикации стихов, также можно использовать при создании короткого списка.
HR (горизонтальная линия). Элемент горизонтальной линии <HR> помогает понять, какие части документа являются семантически законченными, а также разделяет страницу на части. Не имеет закрывающего тега.
Тег горизонтальной линии <HR> с атрибутом width=50% (или другое количество процентов) предписывает браузеру отображение линии определенной длины в сотношении с размером экрана. Задание значения этого атрибута в пикселах предписывает браузеру отображение линии фиксированной длины. По умолчанию, независимо от ширины линия выравнивается по центру экрана.
С помощью атрибута align в сочетании с атрибутом width можно задать выравнивание горизонтальной линии по левому краю, по центру (по умолчанию) и по правому краю.
Толщина горизонтальной линии в пикселах (по умолчанию два пиксела) задается с помощью атрибута size в пределах от 1 до 175 пикселов. Например: <HR width=50% size=5>
<HR width=50% size=20>
Чтобы линии изображались сплошными (темными), а не контурными (с тенью), которые задаются по умолчанию, используется атрибут noshade, не имеющий значения. Например: <HR width=50% size=5 noshade>
<HR width=50% size=40 noshade>
<HR width=50% noshade>
Атрибут color задает цвет линии. Например:
<HR noshade color="red" width=60%>
Задача № 2. Откройте файл «web1.html» в «Блокноте» и измените его так, как показано ниже. После редактирования файл «web1.html» сохраните под именем «web2.html».
<HTML>
<HEAD>
<TITLE>Моя персональная страничка (заголовок)</TITLE>
</HEAD>
<BODY>
<H1 ALIGN = Center> ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (Укажите свою фамилию, имя и отчество). </H1>
<hr>
<H2> Мой город </H2>
<p>Я живу в (Укажите город)
<H3 ALIGN =Left> Моя учеба </H3>
<p align = left> Я учусь ……
<H4 ALIGN = Center> Мои увлечения </H4>
<p align = center> Мои увлечения ‑ ……
<H5 ALIGN = Right> Мои коллеги </H5>
<p align = right> Мои коллеги ….. </p>
<br>
<HR>
<H6 ALIGN = Center> Design "STUDENT" </H6>
</BODY>
</HTML>
Форматирование шрифта. HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру.
Физическое форматирование. Под физическом стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, все, что находится между метками <B> и </B>, будет написано жирным шрифтом. Текст между метками <I> и </I> будет написан наклонным шрифтом. Несколько особняком стоит пара меток <TT> и </TT>. Текст, размещенный между этими метками, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа. Например:
Это пример <I>выделения фразы курсивом</I> в тексте документа
Это пример выделения фразы курсивом в тексте документа
Элементы физического форматирования текста. Эти элементы задают шрифт, используемый при разметке документа. Для всех элементов данного класса требуется указывать как открывающий, так и закрывающий тег.
B - Полужирный шрифт. Пример текста
I - Курсив. Пример текста
TT - Пишущая машинка. Пример текста
S
- Зачеркнутый текст. Пример текста
U - Подчеркнутый текст. Пример текста
BIG - Увеличенный размер шрифта. Пример текста
SMALL - Уменьшенный размер шрифта. Пример текста
SUB - Нижний индекс. Пример H2O
SUP - Верхний индекс. Пример 1ое Мая
Использование элемента FONT. Элемент позволяет управлять стилем, цветом, размером и видом шрифта в гораздо большей степени, чем остальные элементы.
Изменение размера шрифта. Текст может быть выведен шрифтом семи различных размеров - от 1 (наименьший) до 7 (наибольший). Текст без использования элемента FONT по умолчанию выводится шрифтом размера 3. Для задания размера шрифта используется атрибут size в открывающем теге элемента FONT. Например: <FONT size=5>Пример увеличения шрифта до размера 5</FONT> в тексте Пример увеличения шрифта до размера 5 в тексте Размер шрифта можно задать относительной величиной, например, +4 или -1. Браузер прибавляет или вычитает это число к номеру шрифта, используемого по умолчанию, то есть к трем. Использование этого способа в сочетании с заданием базового размера шрифта с помощью элемента BASEFONT, описанном ниже, позволяет изменять размер шрифта в широком диапазоне. Например:
<FONT size=+3>Пример относительного увеличения шрифта </FONT> в тексте Пример относительного увеличения шрифта в тексте
Изменение типа шрифта. Атрибут face предписывает браузеру отобразить текст тем шрифтом, который вы указали. При использовании этого атрибута в открывающем теге элемента FONT важно правильно называть шрифты, установленные на компьютере. Например:
<FONT face=«Impact»>Пример шрифта Impact</FONT> в тексте документа Пример шрифта Impact в тексте документа
Изменение цвета текста. Использование атрибута color тега <FONT> дает предписание браузеру на отображение текста определенным цветом. Например:
<FONT color="blue">выделения фразы цветом </FONT> в тексте документа выделения фразы цветом в тексте документа
Таблица названий основных цветов:
Black - черный
Navy - темно-синий
Silver - светло-серый
Blue -синий
Maroon - каштановый
Purple - сиреневый
Red - красный
Fuchsia - розовый
Green - темно-зеленый
Teal - голубой
Lime - зеленый
Aqua - бирюзовый
Olive - оливковый
Gray - темно-серый
Yellow - желтый
White - белый
Палитра основных цветов |
|
|
Темно-синий цвет |
|
Светло-серый цвет |
|
Синий цвет |
|
Каштановый цвет |
|
Сиреневый цвет |
|
Красный цвет |
|
Розовый цвет |
|
Темно-зеленый цвет |
|
Голубой цвет |
|
Зеленый цвет |
|
Бирюзовый цвет |
|
Оливковый цвет |
|
Темно-серый цвет |
|
Желтый цвет |
Использование элемента BASEFONT. Элемент используется для указания размера, типа и цвета шрифта, считающегося действующим по умолчанию. В качестве атрибутов применяются size, face и color , то есть те же, что и в элементе FONT. С помощью элемента FONT их значения могут переопределяться в пределах его действия. Для всего документа значения параметров шрифтов могут переопределяться любое число раз вставкой в требуемом месте элемента BASEFONT с новыми значениями атрибутов. У элемента BASEFONT нет закрывающего тега. Пример использования элемента BASEFONT:
Текст до переопределения <BASEFONT size=5 color="red">Текст после переопределения <BASEFONT size=3 color="black">Восстановленный текст Текст до переопределения Текст после переопределения Восстановленный текст
Другие способы управления цветом.
Атрибут text в элементе BODY. Задание цвета текста документа значением атрибута text в элементе BODY. Значение атрибута определяется названием из таблицы цветов или 6-значным шестнадцатеричным кодом цвета.
16-теричные коды цветов. Использование в атрибуте color элемента FONT или в атрибуте text элемента BODY 6-значного шестнадцатеричного кода цвета дает возможность задавать различные варианты основных (красного, зеленого, синего) цветов для отображения текста. Примеры кодов: color=«#4f2f4f» - фиолетовый , color=«#BC8F8F» - нежно-розовый , color=«#04048E» -темно-синий. Например:
<FONT color=«#4f2f4f»> выделение фразы темно-синим цветом </FONT> в тексте документа выделение фразы темно-синим цветом в тексте документа
Задача № 3. Выберите из библиотеки рисунков линию и сохраните ее в тот же каталог, что и документы «web.html» и «web1.html». Откройте файл «web2.html» в «Блокноте» и отредактируйте как показано ниже. После редактирования файл «web2.html» сохраните под именем «web3.html».
<HTML>
<HEAD>
<TITLE>Моя персональная страничка </TITLE>
</HEAD>
<BODY>
<H1 ALIGN = Center> ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (Укажите свою фамилию, имя и отчество). </H1>
<hr>
<H2> Мой город </H2>
<p>Я живу в <FONT SIZE = +2>(Укажите город)</FONT>
<H3> Моя работа </H3>
<p> Я работаю в ……
<H4> Мои увлечения </H4>
<p> Мои увлечения ‑ <B>музыка</B>, спорт.
<H5 > Мои коллеги </H5>
<p> <U> Мои коллеги</U> во всем мне <I>помогают</I>. </p>
<Img SRC="имя рисунка.jpg">
<H6 ALIGN = Center> Design "NIHE" </H6>
</BODY>
</HTML>
Организация текста внутри HTML-документов с помощью списков. UL (ненумерованные списки). Для создания ненумерованного списка используется элемент UL. Для этого элемента обязательны открывающий и закрывающий теги, которые обеспечивают перевод строки до и после списка, отделяя список от остального текста. Для маркировки заголовка или названия списка применяется элемент языка LH (от английского List Heading). Для маркировки отдельного элемента списка применяется элемент языка LI (от английского List Item).
Ненумерованные или неупорядоченные (от английского Unordered Lists) списки имеют вид записи:
<UL>
<LH>Название списка</LH>
<LI>Первый пункт списка
<LI>Второй пункт списка
....
</UL>
Тип маркировки (метки) элемента списка определяется атрибутом type. Допустимые значения атрибута и, соответственно, символы маркировки диск, круг, квадрат:
<UL type = «disc|circle|square»>
Для всего списка.
<LI type = «disc|circle|square»>
Этот и последующие элементы, в теги которых включен атрибут type.
Значение атрибутов в элементах языка HTML рекомендуется записывать строчными буквами и заключать в кавычки. Например, type=«disc».
Для записи списка в более компактном виде может использоваться атрибут compact, практически не влияющий на отображение списка браузером.
Например:
Компактный список:
<UL compact>
<LH>Название списка</LH>
<LI>Первый пункт списка
<LI>Второй пункт списка
....
</UL>
Примеры списков: