Как известно, самый
главный для большинства пользователей сервис Интернета (тот,
который содержит больше всего информации и наиболее часто
используется) - это WWW (World Wide Web, «всемирная
паутина»).
С точки зрения пользователя основные элементы
WWW - это сайт и страница. Сайт - это совокупность страниц,
объединенных общей тематикой, структурой, общим названием.
Страница - это текстовый файл, размеченный с помощью
HTML.
Что такое HTML
Аббревиатура HTML означает HyperText Mark-up Language, или
язык разметки гипертекста. Точное определение HTML выглядит
примерно так: это набор описаний различных стилей, которые
определяют компоненты вебстраницы.
HTML - это не язык программирования. Для того, чтобы
создавать HTML-документы, не требуется учить сложный
синтаксис, не нужно задавать переменные и типы данных,
сочинять процедуры и функции, циклы и условные конструкции - в
HTML ничего этого нет! Создание файлов HTML напоминает работу
редактора журнала - редактор помечает красным карандашом те
места, которые нужно выделить, например, курсивом, взять в
рамку или сделать немного крупнее. Так же и в HTML -
необходимо просто разметить текст, показать, что нужно вывести
мельче, что крупнее, куда вставить картинку, а куда - таблицу.
Затем браузер проанализирует разметку и выведет текст на экран
в соответствии с данными ему указаниями. Разметка производится
при помощи тэгов.
Что такое тэги и зачем им атрибуты
Английское слово tag можно перевести на русский язык, в
частности, как ярлык. Этот перевод в целом объясняет значение
термина. Тэг состоит из названия, заключенного в угловые
скобки. Например: <B>, <BODY>. Часто
у тэга есть парный, или закрывающий тэг. Он обозначает
место, где должен закончить свое действие открывающий
тэг. Например, тэг <B> указывает, что начиная с
этого места текст будет полужирным, а тэг </B> -
что дальше все будет как раньше. Как видно из примера, к
закрывающему тэгу перед его названием добавляется символ «/»
(слэш). Вообще, легко догадаться, какие тэги требуют, чтобы их
закрыли, а какие не требуют. Если тэг играет роль некоторого
контейнера, то есть содержит в себе что-то, подчиняющееся ему,
он требует закрытия.
Тэги могут содержать атрибуты, которые позволяют
более подробно описать действие тэга. Атрибуты записываются в
открывающем тэге после его имени. Например, у тэга
<IMG>, вставляющего в документ изображение, есть
обязательный атрибут SRC (от английского source
- источник), который указывает имя и расположение графического
файла. Также у этого тэга есть несколько необязательных
атрибутов, например ALIGN, который указывает, как нужно
выравнивать картинку - по левому краю (left), правому
(right) или по центру (middle). Итак, если мы
хотим вставить картинку kartinka.jpg и выровнять ее по центру,
мы пишем так:
<IMG SRC=”kartinka.jpg”
ALIGN=”middle”>
Как видим, правила записи атрибутов совсем не сложны -
пишется имя атрибута, знак равенства и присваиваемое значение
(которое желательно брать в кавычки), а разделяются атрибуты
пробелами. Кстати, если уж мы заговорили о правилах записи,
заметим, что код HTML не зависит от регистра символов. То есть
названия тэгов и атрибутов можно набирать как прописными, так
и строчными буквами.
Простейший HTML-документ
Начнем с рассмотрения простейшего HTML-документа, то есть
шаблона, на основе которого должны создаваться более
сложные документы.
Итак, каждый HTML-документ состоит из двух частей -
заголовка (head) и основной части, или
тела (body). Заголовок содержит название
документа (title), а тело - сам текст документа: абзацы,
списки, таблицы, картинки, ссылки и т. п.
А вот и наш
простейший документ.
<HTML>
<HEAD>
<TITLE>Простейший HTML-документ</TITLE>
</HEAD>
<BODY>
<H1>Изучить HTML совсем не сложно!</H1>
<P>Добро пожаловать в мир HTML.
Это - первый параграф.
Хоть и маленький, но все равно - параграф!</P>
<P>А это - второй параграф.</P>
</BODY>
</HTML>
Основные элементы документа - это тэги <HTML>,
<HEAD>, <TITLE>,
<BODY>, которым, разумеется, соответствуют их
закрывающие тэги. Основные тэги обязательно должны
присутствовать в каждом документе, несмотря на то, что многие
современные браузеры могут правильно выводить документы и без
них.
Комментарии
Почти так же, как и в языках программирования, в HTML можно
писать комментарии. Комментарии на экран не выводятся,
просмотреть их можно только в самом коде HTML. Комментируют
HTML-документы для того, чтобы, вернувшись к файлу через
некоторое время, его было проще понять.
Комментарии оформляются при помощи специальных тэгов
комментариев - <!-- и -->.
Образец:
<!-- Текст комментария -->
Пара слов о стандартах
HTML, как и любая другая совершенствующаяся система,
находится в постоянном развитии. Появляются новые тэги,
совершенно новые концепции (например, CSS). Настоящей головной
болью для разработчиков сайтов стало появление тэгов, которые
«понимают» только браузеры какой-то одной фирмы. Например,
много «нестандартных» тэгов внедряла и внедряет Microsoft. Но
всегда должен существовать какой-то стандарт. И здесь роль
стандартизатора играет организация, называемая W3 Consortium. Она издает так
называемые рекомендации языка HTML, которым, в
принципе, должны следовать разработчики как браузеров, так и
сайтов. Первые чаще всего следуют, чего не скажешь о вторых.
Часто встречаются сайты с пометками типа «Смотреть только в
Internet Explorer». Это - яркий пример неуважения к
посетителям.
Существуют разные версии рекомендаций W3C, которые иногда
называют версиями HTML. Начиналось все с простейшей и
ограниченной в возможностях версии 1.0, дольше всего
существовала версия 3.2, на момент написания статьи в ходу
версия 4.01, на подходе все новые и новые. Мы будем
рассматривать тэги, которые были рекомендованы в версии 3.2,
так как, придерживаясь ее, можно быть на 99% уверенным, что
документ правильно увидят все посетители. Нововведения HTML 4
несложно будет освоить
и самостоятельно на базе имеющихся знаний.
Тэги
Теперь, когда мы разобрались с тем, что такое тэг, его
атрибуты, как тэги записываются и из чего состоит
HTML-документ, можно переходить и к самим тэгам.
Основные тэги
<HTML>
Этот тэг сообщает браузеру о том, что перед ним именно
HTML-документ, а не просто текст. Примерно такую же роль
играет и расширение файла - оно непременно должно быть html
или htm.
<HEAD>
Показывает начало заголовка. Именно в этой части документа
указывается его название (title).
<TITLE>
С помощью этого тэга можно указать название
документа. Оно будет написано в заголовке окна браузера и
будет добавляться в закладки. Название должно быть кратким
(желательно не более 64 символов) и в то же время уникальным.
В нем должно быть отражено и название всего сайта, и
предназначение конкретной страницы.
<BODY>
Это - вторая и самая большая часть документа. Тело -
это то, что будет выведено в окне браузера, и все тэги, о
которых будет написано ниже, должны находиться именно в теле.
У тэга <BODY> есть много необязательных атрибутов
- таких, как BGCOLOR (цвет фона), TEXT (цвет
текста), LINK (цвет ссылок) и т. д.
Тэги разметки
<H1>…<H6>
Это тэги заголовков. Заголовки могут быть разных
уровней - от 1 до 6, уровень 1 - самый высокий. Обычно
заголовки выводятся шрифтом более крупного размера, чем
обычный шрифт тела документа.
Образец:
<Hx>Текст заголовка</Hx>, (где x - номер от 1
до 6).
<P>
Пожалуй, это основной тэг. Он обозначает абзац. В
HTML новый абзац начинается только там, где есть тэг
<P>. Пробелы, пустые строки в HTML-файле
игнорируются и как бы «сжимаются» в один пробел. Поэтому, если
в тексте будут отсутствовать тэги <P>,
показывающие начала абзацев, весь текст предстанет в виде
одного большого абзаца.
Образец
:
<P>Текст первого абзаца</P> <P>Текст
второго абзаца</P>
Обратите внимание - два абзаца могут быть набраны как в
одной строке, так и в разных, но если абзацы обозначены тэгами
<P>, в браузере все будет выведено правильно.
Если закрывающий тэг </P> не писать, браузер
все равно «поймет», что, как только начинается новый абзац,
заканчивается предыдущий. Но все же лучше его указывать.
Важнейший атрибут тэга <P> - ALIGN, то
есть выравнивание. Он может принимать значения left,
center, right, то есть абзац будет выровнен,
соответственно, по левому краю, по центру или по правому
краю.
<PRE>
Этот тэг обозначает так называемый
«преформатированный» текст. С его помощью можно
исправить «недостатки» тэга <P> там, где это
необходимо. Так, текст, заключенный в тэг <PRE>,
будет выведен так называемым моноширинным шрифтом
(Courier New, например), а главное, будут сохранены все
пробелы и концы строк.
Образец
:
<PRE>
var
i: integer;
begin
for i:=1 to 10 do
writeln (‘Hello, World!’);
end.
</PRE>
Браузером эти строки будут выведены так, как и
планировалось - по одной команде в строке и с нужными
отступами. Как видно из примера, тэг <PRE> удобно
использовать для оформления листингов программ и для некоторых
других целей. Но не стоит им увлекаться. Например, левый
отступ из нашего примера можно сделать совершенно другими
средствами.
<BR>
Если посмотреть результат использования тэга
<P>, видно, что между двумя абзацами
автоматически вставляется пустое пространство, которое служит
для визуального разделения разных абзацев. В случаях, когда
это пространство нежелательно, а нужно просто перейти на новую
строку, и используют тэг <BR>.
Образец
:
National Center for Supercomputing
Applications<BR>
605 East Springfield Avenue<BR>
Champaign, Illinois
61820-5518<BR>
В этом примере все три строки будут выведены по
отдельности, но при этом между ними не будет пустого
места.
<HR>
Применив этот тэг, можно получить горизонтальную
линию в окне браузера. У линии можно менять как длину,
так и толщину. Попробуйте поэкспериментировать с образцом,
изменяя значения атрибутов. Посмотрите, что получится, если
убрать от длины символ процента.
Образец:
<HR SIZE=2 WIDTH=”60%”>
<B>, <I>, <TT>, <U>
Это - так называемые тэги физического форматирования
символов. Они так называются, потому что позволяют жестко
задавать стиль форматирования некоторого количества символов.
Тэг <B> позволяет форматировать текст полужирным
шрифтом, <I> - курсивом, <TT> -
моноширинным шрифтом (почти как <PRE>, только без
сохранения пробелов и концов строк), <U>
подчеркивает символы, но удален из рекомендаций HTML 4, 
поэтому использовать
его нежелательно.
Образец
:
<B>Полужирный текст</B>, <I>теперь
курсив</I>, <TT>а теперь почти как пишущая
машинка</TT>
Эти тэги можно вкладывать друг в друга, то есть
форматировать текст, например, полужирным курсивом:
<B><I>Красиво?</I></B>
Только нужно следить, чтобы вложение было правильным -
если, например, тэг <B> открывается первым,
закрываться он должен последним.
Специальные символы
Для того чтобы выводить на экран специальные символы,
используются так называемые escape-выражения.
Существуют три символа, которые прямо из HTML-файла вывести
невозможно, так как они обладают особыми свойствами - это
символы <, >, &. Первые два
обозначают начало и конец тэгов, а & используется
как раз для escape-выражений. Чтобы использовать один из этих
трех символов в HTML, нужно вводить их
escape-выражения.
Образец
:
< <
> >
& &
Вообще-то escape-выражения существуют для очень многих
символов. И иногда приходится ими пользоваться, чтобы 
выводить такие
символы, как ©, ® и т. д. Полный список
escape-выражений доступен по адресу.
Списки
Списки в HTML могут быть трех основных типов:
нумерованные, маркированные и смешанные.
Разберемся подробнее с маркированными списками.
Чтобы создать маркированный список, нужно пометить его
начало тэгом <UL>, перед каждым пунктом списка
поставить тэг <LI> (закрывать его не требуется),
а закончить список закрывающим тэгом
</UL>.
Образец:
<UL>
<LI>Первый пункт списка
<LI>Второй пункт
<LI>Третий пункт
</UL>
Нумерованные списки строятся совершенно аналогично
маркированным, только вместо тэга <UL>
используется тэг <OL>.
Списки можно вкладывать друг в друга.
Ссылки
Мы подошли к одному из самых важных разделов HTML. Именно
ссылки стали основой создания WWW. Если бы с одной страницы
нельзя было бы свободно перейти на другую с помощью одного
щелчка мыши, WWW не завоевал бы такую популярность.
За ссылки отвечает один тэг - <A>. В тэге
указывается обязательный атрибут HREF, который
обозначает адрес, куда ведет ссылка. Затем пишется название
ссылки, затем тэг закрывается.
Образец:
<A HREF=”page2.html”>Вторая
страница</A>
Как видно, слова «Вторая страница» - это ссылка на файл
page2.html, который находится в одном каталоге с тем файлом,
из которого сделана ссылка.
Здесь нужно сделать одно небольшое замечание о двух видах
адреса. Адрес может быть относительным и
абсолютным. Относительный адрес показывает, где
находится файл относительно текущего файла. Пример
относительного адреса - в предыдущем образце. А если бы мы
хотели дать ссылку на файл page3.html, который находится в
каталоге my_pages, являющимся подкаталогом текущего, значение
атрибута HREF было бы таким:
“my_pages/page3.html”. Если же, наоборот, нужно дать
ссылку на файл page17.html в родительском каталоге, надо
написать “../page17. html”, так как две точки - это
символ родительского каталога. В абсолютном адресе
расположение файла указывается целиком:
“http://www.w3.org/hypertext/WWW/Addressing/Addressing.html”
(здесь помещено как раз очень подробное описание
интернет-адресов). Относительная форма удобна, если файл
находится на том же сервере, что и текущий, причем недалеко.
Абсолютные адреса применяются, если необходимо сослаться на
другой ресурс.
Чтобы сделать ссылку на адрес электронной почты, в значении
атрибута HREF указывается адрес с префиксом «mailto:»,
примерно вот так:
<A HREF=”mailto:name@server.com”>Написать
письмо</A>
Изображения
В HTML-файл можно вставить изображение. Конечно, не прямо в
сам файл, а просто дать своеобразный указатель на графический
файл. В WWW есть два стандартных формата для графики - GIF и
JPEG. Причем GIF лучше подходит для простой графики с
небольшим количеством цветов, а JPEG - для полноцветных
изображений и фотографий. В последнее время приобретает
популярность формат PNG, но он еще не получил статуса
стандарта, поэтому его следует применять осторожно.
Всегда нужно следить за размером графических файлов, а
также за их количеством. Графика загружается очень долго, и не
всякий посетитель захочет ждать несколько минут, чтобы
посмотреть какую-нибудь, хоть и красивую, но бесполезную
заставку.
Для того чтобы вставить в HTML-документ изображение,
применяется уже знакомый нам тэг <IMG> с
атрибутом SRC.
Образец:
<IMG SRC=”picture.gif”>
Этот образец вставит в нужное место картинку из файла
picture.gif. Адрес графического файла формируется по тем же
правилам, что и адреса для ссылок.
По умолчанию текст, расположенный около изображения,
выравнивается по нижней части изображения. Для выравнивания по
верхней части или по центру используется атрибут ALIGN.
Он может принимать значения top, center, bottom. Например, в
следующем примере текст выравнивается по центру
изображения.
Образец:
<IMG SRC=”picture.gif”
ALIGN=”center”>
Чтобы отделить изображение от текста (например, если это
какой-либо логотип), его следует поместить в отдельный
абзац.
Образец:
<P ALIGN=”center”>
<IMG SRC=”picture.gif”>
</P>
Всегда нужно предусматривать и так называемый
альтернативный текст для изображений. Многие пользователи в
силу обстоятельств (медленный модем, слабый компьютер,
некачественная телефонная линия) до сих пор применяют
текстовые браузеры (такие, как Lynx) или отключают вывод
изображений. Тогда, если позаботиться об альтернативных
надписях для изображений, они увидят именно их. Чтобы
создавать такие надписи, используется атрибут
ALT.
Образец:
<IMG SRC=”picture.gif” ALT=”Наш
логотип”>
Изображения можно использовать и в качестве ссылок. Для
этого достаточно поместить между тэгами <A> и
</A> тэг вставки изображения.
Образец:
<A HREF=”http://www.w3.org/”><IMG
SRC=”w3logo.gif” ALT=”W3
Logo”></A>
Таблицы
До того, как были изобретены тэги таблиц, авторы мучались с
тэгом <PRE> - считали пробелы, постоянно
проверяя, правильно ли все сделано. С появлением таблиц все
стало намного проще. Появилась возможность без труда
представлять табличную информацию, а также использовать
таблицы и для других целей. Например, при помощи таблицы с
невидимыми границами можно сделать навигационную систему
сайта, разместив в левом столбце ссылки на разделы, а в правом
- непосредственно информацию.
Как делаются таблицы, легко понять на конкретном
примере.
Образец:
<TABLE>
<!-- Начало описания таблицы -->
<CAPTION> Здесь содержится название таблицы
</CAPTION>
<TR>
<!-- Начало описания строки заголовков -->
<TH> Первая ячейка строки заголовков
</TH>
<TH> Вторая ячейка строки заголовков </TH>
</TR>
<!-- Конец описания строки заголовков -->
<TR>
<!-- Начало описания первой строки таблицы -->
<TD> Первая строка, первый столбец </TD>
<TD> Первая строки, второй столбец </TD>
</TR>
<!-- Конец описания первой строки -->
<TR>
<!-- Начало описания второй строки -->
<TD> Вторая строка, первый столбец </TD>
<TD> Вторая строка, второй столбец </TD>
</TR>
<!-- Конец описания второй строки -->
</TABLE>
<!-- Конец описания таблицы -->
Из комментариев к коду видно, что тэг <TABLE>
начинает таблицу, тэг <CAPTION> - строку
названия, <TR> - строку таблицы,
<TH> - ячейку с 
заголовком, а
<TD> - обыкновенную ячейку. Все эти тэги
непременно должны быть в нужном месте закрыты, как показано в
примере.
Табличные тэги могут иметь различные атрибуты, наиболее
интересны из них атрибуты ячеек, то есть тэга
<TD>: ALIGN (left, center,
right) - выравнивание текста в ячейке;
VALIGN
(top, middle, bottom) - вертикальное
выравнивание текста в ячейке; COLSPAN=n - объединение
нескольких (n) столбцов; ROWSPAN=n - объединение
нескольких (n) строк; NOWRAP - запрет переноса слов в
ячейке.
Что делать дальше
В одной статье нельзя рассказать обо всех нюансах HTML и
обо всех тэгах, но этого и не требуется. Найти остальную
информацию и самостоятельно с ней разобраться - не проблема.
Для этого можно воспользоваться, например, справочной системой
HTML-редактора HomeSite 4.5, который можно скачать по адресу. Об
HTML написано множество книг, но все их прочитать невозможно.
Остановитесь на какой-то одной, но солидной книге. Ищите
информацию и в Сети с помощью поисковых машин - сможете найти
очень многое.
Вот четыре полезные ссылки для начала.
-
очень краткий список тэгов HTML 3.2 с атрибутами. Удобен как
справочник.
www.design.ru/kovodstvo/iskopaemoe.html
-
список ссылок на полезные ресурсы об HTML, дизайне и близких
темах.
http://www.w3.org/
-
абсолютно все об HTML и многом другом от W3C. К сожалению,
только на английском.
validator.w3.org
-
система для проверки HTML-файлов. Правда, слишком уж
придирчивая.
Вот и все. Можно считать, что HTML вы освоили.
Удачи!