В качестве базового понятия примем HTML-файл, - т.е. текстовый файл, содержащий конструкции разметки (теги) и предназначенный для просмотра с помощью соответствующей программы-просмотра.
Программа-обозреватель (браузер – browser), программа, которая позволяет пользователям просматривать содержание документов, находящихся во Всемирной Паутине (WWW). Программа обращается к серверу, "читает" документ; интерпретирует полученную информацию и отображает содержание документа. Этот отображенный (чаще всего на экране) документ и называется ВЕБ-страницей. Примеры: Netscape Navigator, Internet Explorer, Opera, Lynx.
Внутреннее представление текста обусловлено чисто техническими особенностями кодирования текстовых символов (их внутренним представлением в ЭВМ). На сегодняшний момент для русских символов определены, по крайней мере, три кодировки: koi8-r, win-1251, cp866. На данный момент широко применяются koi8-r (операционные системы класса Unix), win-1251 (MS Windows), программы просмотра, как правило, корректно отображают символы в любой из этих кодировок не зависимо от платформы, для которой реализована конкретная программа-обозреватель.
При публикации информации в Интернет (размещении гипертекстовых файлов на сервере) важно учитывать, что разные программы-обозреватели по-разному строят отображения HTML-файлов. В современном HTML можно выделить класс инструкций структурной разметки (заголовки, абзацы и т.п.) и оформления (атрибуты шрифтов, позиционирования элементов страницы и т.п.) содержательного текстового материала, хотя существуют аналогичные понятия и в глобальном контексте HTML.
Принцип ортогональности состоит в обеспечении максимальной независимости структурной разметки материала, и инструкций его визуального представления, что позволяет сгладить проблемы соответствия содержательной и визуальной составляющей. Проблема состоит в том, что разные авторы могут использовать разные инструкции для разметки HTML-страниц, а оформителю требуется создать единый внешний облик всего гипертекстового массива. Выход в том, чтобы использовать максимально универсальные инструкции структурной разметки и оформления, для которых оформитель позже сможет использовать специальные стилевые расширения.
В общем случае HTML-теги могут быть парными - <парный_тег>текст или другие теги</парный_тег>, и не парными - <не_парный_тег>. Кроме этого, теги могут включать различные группы параметров (атрибутов). В общем виде, - <тег атрибут1="значение1" атрибут2="значение2">. При работе с названиями, атрибутами и значениями атрибутов не обязательно учитывать регистр символов, которыми они записаны, т.е. их можно записывать как заглавными, так и прописными буквами. Комментарии обозначаются как <!-- комментарий -->.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>пустой документ</TITLE> </HEAD > <BODY> Содержимое документа (текст и инструкции HTML) </BODY> </HTML>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> - формально обязательный элемент, описывающий глобальный тип документа
<HTML> - начало HTML-разметки, </HTML> - конец HTML-разметки
<HEAD>...</HEAD> - головная часть, - служебная информация о данной HTML-странице.
<TITLE>...</TITLE> - формальный заголовок страницы, - отображается в заголовке окна программы просмотра (если оно есть). Кроме <TITLE>...</TITLE> в головную часть часто включают тег <META> содержащий служебную информацию о странице. Например <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> говорит о том, что данный файл содержит HTML-текст в кодировке windows-1251. Эта информация может использоваться программами-обозревателями при отображении страницы на русском языке.
<BODY>...</BODY> - основная (отображаемая) часть HTML-страницы.
Приведём некоторые из тегов "блочного форматирования" которые используются для обозначения структурных элементов представляемого с помощью HTML текстового материала.
Заголовки: <H...>текст заголовка</H>. Всего описано 6 иерархических уровней заголовков, каждый из уровней имеет соответствующий номер с 1 по 6 и записывается как <H1>текст заголовка</H> для первого (главного уровня) и <H6>текст заголовка</H> для последнего. Из атрибутов форматирования доступен align="left|center|right|justify" – управляющий положением заголовка на странице (слева, в центре, справа, равномерно по всей доступной ширине). Пример: <H2 align ="center">центрированный заголовок на втором уровне</H2>.
Абзац: <P>текст абзаца</P>, - обеспечивает отступы между абзацами текста. Атрибуты форматирования: align="left|center|right|justify".
Цитата (отдельная): <BLOCKQUOTE>текст цитаты</BLOCKQUOTE>. Визуально может выделяться отступом от правого края, в начале и конце автоматически выставляются пустые строки как у абзаца. Тегов форматирования не предусмотрено.
Листинг/форматированный текст: <PRE>текст с множественными пробелами и "естественными" символами конца строки</PRE>. Текст отображается шрифтом фиксированной ширины со всеми пробелами и концами строк. Атрибуты форматирования: width="n" – ширина текстового фрагмента в символах.
Адрес (просто почтовый адрес, допустим автора): <ADDRESS>Почтовый адрес</ADDRESS>, для указания конца строки служит тег <BR>. Текст, заключённый между <ADDRESS>Почтовый адрес</ADDRESS> отображается наклонным шрифтом, в начале и конце автоматически выставляются пустые строки как у абзаца. Атрибутов форматирования не предусмотрено.
Кроме блоков текста можно выделять и самые мелкие его фрагменты (начиная от отдельных букв).
Цитата (в тексте): <CITE>в предложении</CITE>. Визуально выделяется с помощью наклонного текста.
Логическое ударение (в тексте): <EM>текст с логическим ударением</EM> Визуально выделяется наклоном. Дополнительных атрибутов форматирования не предусмотрено.
Далее приведём чисто "оформительские" конструкции.
Моноширинный шрифт: текст <TT>текст моноширинным шрифтом</TT> текст.
Полужирное начертание шрифта: <B>...</B> или <STRONG>...</STRONG>.
Наклонное начертание шрифта: <I>...</I>.
Подчёрк: <U>...</U>.
Зачёркивание: <S>...</S> или <STRIKE>...</STRIKE>.
Увеличение размера шрифта для выделенного фрагмента: <BIG>...</BIG>.
Уменьшение размера шрифта для выделенного фрагмента: <SMALL>...</SMALL>.
Верхний индекс: <SUP>...</SUP>.
Нижний индекс: <SUB>...</SUB>.
Контроль над параметрами шрифта: <FONT face="название начертания" size="-3|-2|-1|+1|+2|+3|+4" color="цвет">...</FONT>. Название начертания может включать как единичное название, так и список названий: Arial, sans-serif (без засечек)... или Times, serif (с засечками). Размер – size – относительное значение (от по умолчанию для конкретного настроенного клиента). Цвет задаётся либо через английское название (white, black, red, ...), либо через #RRGGBB, где RR, GG, BB – шестнадцатеричные номера красной, зелёной и синей составляющих (обычно получают с помощью палитр графических редакторов).
Горизонтальное позиционирование блока текста: <DIV align="left|center|right|justify">...</DIV>.
Горизонтальная линия: <HR size="высота" width="ширина" align="left|center|right|justify" color="цвет" noshade>. noshade – только для MS Internet Explorer – без "трёхмерности". Высота задаётся только в пикселях. Ширина – либо в пикселях, либо в процентах от ширины окна (число%).
Разрыв строки: <BR>.
Простой (не нумерованный) список – каждая строка имеет маркер начала (обычно крупная точка) и отступ от левого края окна программы просмотра, задаётся с помощью конструкций типа <UL><LI>...</UL>, где <UL>...</UL> указывает непосредственно на простой список, а <LI>, - на элементы списка. <UL> может иметь атрибут type="disc|circle|square" который задаёт начертание маркера элемента списка: точка, круг, квадрат.
Пример:
<UL type="disc"> <LI>Элемент 1 <LI>Элемент 2 <LI>Элемент 3 </UL>
Списки могут "вкладываться" друг в друга:
<UL> <LI>Элемент 1 <LI>Элемент 2 <UL> <LI>Элемент 2.1 <LI>Элемент 2.2 </UL> <LI>Элемент 3 </UL>
Нумерованный список - <OL><LI>...<OL>. Атрибуты <OL>:
type="А|a|I|i|1" – тип нумерации, A – заглавные буквы латинского алфавита, a – прописные буквы латинского алфавита, I – большие римские цифры, i – малые латинские цифры, 1 – арабские цифры (по умолчанию).
start="n" – начало нумерации, n – номер первого элемента (обязательно целое десятичное число арабскими цифрами).
Список определений - <DL><DT>термин<DD>определение
<DT>термин<DD>определение...</DL>, при отображении термины и определения выделяются форматированием, за счёт отступа влево, термин и определение располагаются на разных строках.
Начало и конец таблицы обозначаются с помощью <TABLE> и </TABLE>. Строки, - <TR>...</TR>, столбцы в строках, - <TD>содержимое ячейки</TD>.
Пример простой таблицы:
<TABLE border="1"> <TR> <TD>1</TD><TD>2</TD> </TR> <TR> <TD>3</TD><TD>4</TD> </TR> </TABLE>
| 1 | 2 |
| 3 | 4 |
Каждый из элементов разметки таблиц имеет свою группу атрибутов (ниже приводятся только основные):
<TABLE
width="n" – ширина таблицы (пикселы, либо проценты от размера окна).
height="n" – высота таблицы (пикселы, либо проценты от размера окна).
border="n" – ширина границ отображаемой таблицы (целые числа), n=0 - для невидимой границы.
bordercolor="цвет" – цвет границ таблицы (декларировано только для MS Internet Explorer).
bgcolor="цвет" – цвет фона таблицы.
background="адрес изображения" – указание графического фона для подложки таблицы (URL картинки в форматах GIF, JPEG, PNG).
cellpadding="n" – расстояние между содержимым ячеек и их границами.
cellspacing="n" – расстояние между границами ячеек.
align="left|center|right" – горизонтальное положение таблицы на "странице".
valign="top|middle|bottom|baseline" – положение таблицы относительно текста, или других элементов
>
<TR
align="left|center|right" – горизонтальное положение содержимого ячейки.
valign="top|middle|bottom" – вертикальное положение содержимого ячейки.
bordercolor="цвет" – цвет границ строки таблицы (декларировано только для MS Internet Explorer).
bgcolor="цвет" – цвет фона строки таблицы.
background="адрес изображения" – указание графического фона для подложки строки (URL картинки в форматах GIF, JPEG, PNG).
>
<TD
width="n" – ширина столбца (пикселы, либо проценты от размера окна).
rowspan="n" – количество объединяемых ячеек в строке (пикселы, либо проценты от размера окна).
rowspan="n" – количество объединяемых ячеек в столбце.
align="left|center|right" – горизонтальное положение содержимого ячейки.
valign="top|middle|bottom" – вертикальное положение содержимого ячейки.
bordercolor="цвет" – цвет границ строки таблицы (декларировано только для MS Internet Explorer).
bgcolor="цвет" – цвет фона строки таблицы.
background="адрес изображения" – указание графического фона для подложки строки (URL картинки в форматах GIF, JPEG, PNG).
>
Для включения графических элементов используется одноместный тег <IMG...>
Его параметры:
src="URL" – адрес графического файла (абсолютный: http://сервер/каталог/.../каталог/имя_файла.тип, относительный, например, ../каталог/имя_файла.тип). Графические файлы могут быть в форматах GIF, JPEG, PNG. Для контрастных изображений, например схем и рисунков обычно используют GIF, для фотографических изображений лучше подходит JPEG. Кстати, GIF-изображения могут иметь прозрачный фон.
alt="текст" – текстовое описание (эквивалент) графического изображения. Желательно не оставлять пустым, т.к. не всегда у читателя есть возможность просматривать графику.
width="n" – ширина графического изображения.
height="n" – высота графического изображения.
border="n" – ширина отображаемой границы графического изображения (рамка), n=0 - для невидимой границы.
align=" left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom" – горизонтальное или вертикальное положение графического изображения на "странице".
vspace="n" – вертикальный отступ вокруг графического изображения.
hspace="n" – горизонтальный отступ вокруг графического изображения.
Для установления гипертекстовой ссылки с помощью тега <A href="URL">...</A> выделяется элемент, служащий источником ссылки, и в качестве значения атрибута href указывается адрес конечного элемента ссылки (файла, возможно с дополнительным параметром (см. ниже)). Адрес файла может быть абсолютным: http://сервер/каталог/.../каталог/имя_файла.тип или относительным (от файла вызова), например, ../каталог/имя_файла.тип.
Важным дополнительным атрибутом (особенно при использовании фреймов) является target="_blank|_self|_parent|_top|имя_окна". При значении параметра _blank назначение ссылки загружается в новое пустое окно, _self – в текущее, _parent – в родительское, _top - в текущее, причём помещается поверх всех окон, либо в обозначенное пользователем.
По "умолчанию", пользователю отображается верхняя часть указанного в <A href="URL"> файла. Однако, можно делать ссылки не только на файл целиком, но и на отдельные его части, при этом пользователь увидит непосредственно ту секцию в файле, на которую будет указывать ссылка. Адрес в этом случае будет иметь вид URL#имя_секции, причём имя секции лучше задавать цифрами и латинскими буквами (в связи с особенностями HTTP – HyperText Transfer Protocol). Имя секции и её позиция задаётся непосредственно в вызываемом файле с помощью тега <A name="имя_секции">элемент, либо ничего</A>.
Фреймы дают возможность разделить окно программы-обозревателя на несколько частей, загрузить в них разные гипертекстовые страницы и оперировать с ними. Наиболее частое применение, - левая часть окна – статическая (не перезагружаемая) навигация, правая, - содержательные страницы.
Страница-фрейм, как правило, не содержит никакого материала, кроме инструкций по разбиению пространства окна, и назначения выделенным фрагментам соответствующих файлов (<FRAMESET...>...</FRAMESET>). Исключение составляют теги <TITLE>...</TITLE>и <NOFRAMES>...</NOFRAMES>.
Пример объявления фрейма, делящего окно на четыре квадранта:
<frameset rows="50%,*" cols="50%,*"> <frame name="left_up" src="left_up.htm" marginwidth="10" marginheight="10" scrolling="auto" frameborder="no"> <frame name="right_up" src="right_up.htm" marginwidth="10" marginheight="10" scrolling="auto" frameborder="no"> <frame name="left_down" src="left_down.htm" marginwidth="10" marginheight="10" scrolling="yes" frameborder="no"> <frame name="right_down" src="right_down.htm" marginwidth="10" marginheight="10" scrolling="no" frameborder="yes" noresize> </frameset>
Здесь rows="50%,*" и cols="50%,*" задают одновременно число и размеры горизонтальных и вертикальных фрагментов (можно использовать величины в пикселах и/или в процентах, *-означает "всё остальное пространство").
<frame ... - задаёт непосредственно параметры визуального фрагмента и указывает на загружаемый элемент (src="URL").
name="имя_фрейма" – имя, которое потом можно использовать в атрибуте target при создании гиперссылок.
marginwidth="n" – ширина полей (с боков).
marginheight="n" – величина полей (сверху).
scrolling=" auto|yes|no" – отображение полос прокрутки.
>
<NOFRAMES>...</NOFRAMES> - используется для замещения фрейма простым текстом, для программ просмотра не поддерживающих фреймы.
HTML нашёл очень широкое применение в современном Internet и WWW. На данный момент обнародована и поддерживается спецификация 4.0. Выше были приведены лишь основные теги и их атрибуты, пришедшие с первых спецификаций языка разметки и гарантированно правильно работающие с программами просмотра как от Microsoft так и от Netscape, а также менее широко распространёнными Opera и Lynx.
Не трудно заметить, что идея HTML достаточно проста, а для большинства тегов определены как схожие атрибуты, так и их параметры, поэтому нет острой необходимости в доскональном знании уникального набора атрибутов для каждого тега в отдельности.
Так, например, в качестве параметров горизонтальных и вертикальных размеров (width и height) в большинстве случаев можно использовать как просто целые значения (интерпретируются как размеры в пикселях) так относительные (от размеров окна программы-обозревателя, указываются, - число%).
Тот факт, что HTML-файлы, - это по сути просто текст, их можно создавать и редактировать практически в любом текстовом редакторе. Хотя существуют специальные текстовые и WYSIWG редакторы, заметно упрощающие и ускоряющие подготовку HTML-страниц.
Символы, которые входят в нотацию HTML не и могут отображаться "напрямую" задаются с помощью т.н. escape-последовательностей. Все escape-последовательности начинаются со знака & и заканчиваются знаком ;. Вот некоторые из них:
| неразрываемый пробел (non-breaking space) | |
| значок "копирайта" | © |
| знак "меньше" | < |
| знак "больше" | > |
| & | & |
| двойные кавычки | " |
|
|
© Все права защищены. При любом использовании материалов опубликованных на сайте ссылки на автора и сайт обязательны. |