Создание простейшей Web-страницы.
ВВЕДЕНИЕ
Размещение информации в Интернет включает два этапа: подготовку материалов и их публикацию. Подготовка материалов состоит в создании документов, имеющих формат, принятый в Интернет, то есть, Web-страниц, написанных на языке HTML (HyperText Markup Language – язык разметки гипертекста). Гипертекст, то есть расширенный текст, помимо текстовой информации включает в себя дополнительные элементы: иллюстрации, ссылки, вставные объекты. Под разметкой понимается использование специальных кодов, легко отделяемых от смыслового содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка HTML.
Публикация материалов, то есть открытие к ним доступа, осуществляется после решения организационных вопросов, связанных с получением, дискового пространства на Web-cервере для их размещения. Обычно для копирования Web-страниц на Web-cервер используется клиентская программа, работающая по протоколу FTP (File Transfer Protocol – протокол передачи файлов).
Особенность описания документа средствами языка HTML связана с принципиальной невозможностью достижения абсолютной точности воспроизведения исходного документа. Предполагается, что документ будет широко доступен в Интернете, и поэтому неизвестно, как будет организовано его воспроизведение. Документ может быть представлен на графическом экране, выведен в чисто текстовом виде или просто «прочитан» программой синтеза речи.
В настоящее время во многих приложениях существует возможность создания или сохранения документов в формате HTML, существует также множество специализированных редакторов HTML: Front Page Express, Home Site, DreamWeaver и другие. В данном же пособии рассматриваются основы создания HTML документов с помощью обычного текстового редактора.
ОСНОВЫ HTML
Структура документа HTML
Управляющие конструкции языка HTML называются тегами и вставляются непосредственно в текст документа. Все теги заключаются в угловые скобки <...>. Сразу после открывающей скобки помещается ключевое слово, определяющее тег, например <BODY>. Теги HTML бывают парными и непарными. Непарные теги оказывают воздействие на весь документ или определяют разовый эффект в месте своего появления. При использовании парных тегов в документ добавляются открывающий и закрывающий теги, которые воздействуют на часть документа, заключенную между ними. Закрывающий тег отличается от открывающего наличием символа «/» (косая черта) перед ключевым словом (</BODY>). Определение HTML как языка разметки основывается на том, что при удалении из документа всех тегов получается текстовый документ, совершенно эквивалентный по содержанию исходному гипертекстовому документу. Таким образом, при отображении документа HTML сами теги не отображаются, но влияют на способ отображения остальной части документа.
Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры. Документ HTML всегда должен начинаться с тега <HTML> и заканчиваться закрывающим тегом </HTML>. Внутри документа выделяются два основных раздела: раздел заголовков и тело документа. Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD> и </HEAD>. В частности, раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <TITLE>. Основное содержание размещается в теле документа, которое ограничивается парным тегом <BODY>.
Для парных тегов область влияния определяется частью документа между открывающим и закрывающим тегом. Такую часть документа рассматривают как элемент языка HTML. Так, можно говорить об «элементе BODY», включающем тег <BODY>, основное содержание документа и закрывающий тег </BODY>. Для непарных тегов элемент совпадает с тегом, который его определяет.
Элементы языка HTML, отражающие основное содержание документа, помещаются между тегами <BODY> и </BODY>, то есть, внутрь структурного элемента BODY. Такие элементы делят на блочные и текстовые. Блочные элементы относятся к частям текста уровня абзаца. Текстовые элементы описывают свойства отдельных фраз и еще более мелких частей текста.
В большинстве документов основными функциональными блочными элементами являются заголовки и абзацы. Заголовки задаются при помощи парных тегов от <H1> до <H6>, а абзацы – с помощью парного тега <P>. На экране компьютера абзацы разделяются пустой строкой. Закрывающий тег </P> рассматривается как необязательный. Подразумевается, что он стоит перед тегом, который задает начало очередного абзаца документа. Например:
<H1>Заголовок</H1>
<P>Первый абзац<P>Второй абзац
<H2>Заголовок второго уровня</H2>
Следствием наличия специального тега, определяющего абзац, является тот факт, что обычного символа конца сроки, вводимого по нажатию клавиши ENTER, для создания абзацного отступа недостаточно. Любая последовательность, состоящая только из пробелов и символов конца сроки, при отображении документа рассматривается как одиночный пробел. Это, в частности, означает, что символ конца строки даже не осуществляет перехода на новую строку (для этой цели используется текстовый элемент, задаваемый непарным тегом <BR>)
В качестве ограничения абзацев может также использоваться горизонтальная линейка. Этот элемент задается непарным тегом <HR>. При отображении документа на экране линейка разделяет части текста друг от друга. Её длина и толщина задаются атрибутами тега <HR>. Например, тег <HR ALIGN="RIGHT" SIZE="10" WIDTH="50%"> создает горизонтальную линейку шириной в 10 пикселов, занимающую половину ширины окна и расположенную справа (рис. 1).
Рис. 1
Гипертекстовые ссылки
Гипертекстовая ссылка является фрагментом текста документа и потому задается текстовым элементом, определяемым при помощи парного тега <A>. Этот элемент содержит обязательный атрибут HREF=, который не может быть опущен, (знак равенства показывает, что необходимо задать значение этого атрибута).
В качестве значения атрибута используется адрес URL документа, на который указывает ссылка. Она может указывать на произвольный документ, располагающийся на любом общедоступном узле сети (Web-узел, архив FTP и прочие). Например, открывающий тег ссылки может иметь вид <A HREF=http://www.site.com/index.htm>. На Web-странице гипертекстовые ссылки выделяются цветом и подчеркиванием, а указатель мыши при наведении на ссылку изменяет свою форму. Ссылки создаются не только для фрагментов текста, но и для других объектов документа HTML, например, графических.
Для вставки рисунка используется непарный тег <IMG> с обязательным атрибутом SRC= содержащем URL адрес файла с изображением: <IMG SRC="picture.gif">. Для точного задания размеров рисунка используются атрибуты WIDTH=, HEIGHT=, HSPACE= и VSPACE=, определяющие, соответственно, ширину, высоту, отступы по горизонтали, вертикали в пикселях. Положение рисунка относительно строки текста можно задать атрибутом ALIGN=. Значения "BOTTOM", "MIDDLE", "TOP" определяют вертикальное выравнивание теста и изображения, соответственно, по нижнему, среднему или верхнему уровням.
Адрес URL может быть задан в абсолютной форме, то есть начинаться с указания протокола и адреса Web-узла. Такая запись адреса используется, когда необходимо направить посетителя на другой Web-узел, и рассматривается как внешняя ссылка. При использовании относительного адреса в ссылке задается только относительный путь поиска документа и рассматривается как внутренняя. Внутренняя ссылка сохраняет свою работоспособность в случае изменения адреса Web-узла (например, в результате его переноса на другой сервер).
Форматирование текста
Парный тег <FONT> управляет параметрами шрифта и должен обязательно содержать хотя бы один из трёх атрибутов: COLOR=, FACE=, SIZE=. Атрибут COLOR= задает цвет текста, который может быть задан текстовым значением (например, COLOR=”GREEN”) или шестнадцатеричным кодом, в котором последовательные байты задают значения красной, зеленой и синей составляющих цвета (например, COLOR=”#00FF00” дает тот же результат, что и COLOR=”GREEN”). Атрибут FACE= задает гарнитуру шрифта. Значение этого атрибута сравнивается с именами шрифтов, которые установлены на компьютере. Атрибут SIZE= определяет размер шрифта в относительных единицах (от 1 до 7). Для этого атрибута можно определять значение со знаком (плюс или минус), которое определяет увеличение или уменьшение шрифта относительно текущего размера.
Параметры шрифта, используемые в документе по умолчанию, задают с помощью непарного тега <BASEFONT>,который помещает один раз внутри элемента BODY. Он может использовать те же атрибуты, что и тег <FONT>. Начертание символов задается при помощи парных тегов <B> (полужирный шрифт), <I> (курсив), <U> (подчеркнутый текст), <S> (вычеркнутый текст). Существуют и элементы фразы, описывающие функциональные особенности текста, например парный тег <CITE> предназначен для отображения цитат (выводятся курсивом). Парные теги <EM> (выделение) и <STRONG> (сильное выделение) являются функциональными аналогами курсивного и полужирного начертаний.
Язык HTML поддерживает пять видов списков, из которых два (списки меню и списки каталогов) считаются устаревшими и не рекомендуются к применению. Оставшиеся три типа – это упорядоченные списки, неупорядоченные списки и списки определений. Все списки определяют собой блочные элементы.
Упорядоченные (нумерованные) и неупорядоченные (маркированные) списки создаются при помощи парных тегов <ОL> для упорядоченного списка и <UL> для неупорядоченного. Эти списки могут содержать только элементы списка, определяемые парным тегом <LI>. Закрывающий тег </LI> можно опускать, так как его местонахождение легко восстановить. Открывающие теги могут содержать атрибуты, определяющие вид маркера (для неупорядоченного списка), способ и последовательности нумерации (для упорядоченного). Разрешается вложение списков друг в друга.
Таблицы
Таблицы удобны для представления больших объемов данных или для точного размещения элементов Web-страниц. Таблица в языке HTML задается при помощи парного тега <TABLE>. Она может содержать заголовок таблицы, определяемый парным тегом <САРТION>, и строки таблицы, задаваемые при помощи парных тегов <TR>. Ячейки в заголовках столбцов и строк задают парным тегом <ТН>, а обычные ячейки – парным тегом <TD>. Закрывающие теги <TR>, <ТН>, <TD> можно опускать.
Атрибуты элементов позволяют сколь угодно причудливо оформить таблицу по своему вкусу. В таблице 1 приведена краткая сводка допустимых атрибутов.
Язык HTML имеет множество других возможностей, среди которых и отображение нескольких документов на одной странице с помощью фреймов, и создание интерактивных Web-страниц, и внедрение в документ исполняемых текстов программ – скриптов, и так далее. Заинтересованный читатель может обратиться к официальному документу по HTML, доступному на странице http://www.w3.org/pub/WWW/MarkUp/Wilbur/.
Таблица 1. Атрибуты элементов, используемых при создании таблицы
| Атрибут | Элемент | Назначение |
| ALIGN= | Таблица, заголовок, строка, ячейка | Выравнивание таблицы по горизонтали; выравнивание данных по горизонтали; размещение заголовка над или под таблицей |
| VALIGN= | Строка, ячейка | Выравнивание по вертикали |
| WIDTH= | Таблица, ячейка | Ширина |
| HEIGHT= | Ячейка | Высота |
| COLSPAN= | Ячейка | Протяженность в несколько столбцов |
| ROWSPAN= | Ячейка | Протяженность в несколько строк |
| BGCOLOR= | Таблица, ячейка | Цвет фона |
| CELLSPACING= | Таблица | Зазор между ячейками |
| CELLPADDING= | Таблица | Зазор между содержимым ячейки и ее границей |
| BORDER= | Таблица | Отображение границ ячеек и внешней рамки таблицы |
УПРАЖНЕНИЯ
Создание простейшей Web-страницы.
1. Запустите текстовый редактор Блокнот (Пуск–Программы–Стандартные–Блокнот).
2. Введите следующий документ:
<HTML> <HEAD> <TITLE>Заголовок документа</TITLE> <HEAD>
<BODY> Содержание
документа</BODY> </HTML>
3. Сохраните этот документ под именем Перед сохранением убедитесь, что сброшен флажок Не показывать расширения для зарегистрированных типов файлов (Пуск – Настройка – Свойства папки – Вид). В противном случае редактор Блокнот может автоматически добавить в конец имени расширение. ТХТ.
4. Запустите программу Internet Explorer (Пуск–Программы–Internet Explorer)
5. Дайте команду Файл – Открыть. Щелкните на кнопке Обзор и откройте файл first.htm.
6. Просмотрите, как отображается этот файл – простейший корректный документ HTML. Где отображается содержимое элемента TITLE? Где отображается содержимое элемента BODY?
7. Как отображаются слова “Содержание” и “документа”, введенные в двух отдельных строчках? Почему? Проверьте, что происходит при уменьшении ширины окна.