Язык гипертекстовой разметки HTML

Теговая модель документа

Вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">" . Такой фрагмент, например, <html>, называется меткой (по-английски – tag, читается “тег”).

Большинство HTML-меток парные, то есть на каждую открывающуюся метку вида <tag> есть закрывающаяся метка вида </tag> с тем же именем, но с добавлением слэша. Синтаксис такой метки:

<"имя тега" "список атрибутов"> содержание элемента </"имя тега">

Список атрибутов является необязательным параметром. Если атрибуты не указаны, используются некоторые стандартные установки.

Кроме того, есть метки непарные, они имеют синтаксис:

<"имя тега" "список атрибутов">

Регистр символов тегов не имеет никакого значения, но хорошим тоном считается набор тегов в верхнем регистре, т. е. заглавными буквами. При закрытии тегов необходимо руководствоваться следующим правилом: если один закрывающий тег вложен внутрь второго, первым необходимо закрывать вложенный тег. Запомните, что закрывающие теги должны идти в порядке, обратном открывающим.

Структура документа

HTML-файл состоит из двух основных частей: «головы» (HEAD) и «тела» (BODY). «Тело» HTML-документа заключает в себе все информативное содержание, тогда как в заголовке указывается тип документа, его кодировка, язык, имя автора и прочая дополнительная информация.

Первыми метками, которые мы разместим на будущей web-странице, будут <HTML> и </HTML>. Этот тег начинает и завершает любую страницу, указывая броузеру на то, что данная страница описана на HTML. На странице закрывающий тег будет стоять самым последним, в конце документа. Все, что мы будем набирать далее, должно быть расположено между этими метками.

Следующие метки необходимы для создания заголовка HTML-документа. Тег <HEAD> </HEAD> служит для определения заголовка документа, т. е. части файла, содержащей подробную информацию о документе, как-то: заголовок окна документа, имя создателя, индексный текст, используемый для помещения информации о странице в поисковые системы, и глобальные переменные, такие, как применяемая в документе кодировка и т. п. Этот тег также требует закрытия.

   <HTML>

      <HEAD>

      Содержание заголовка

      </HEAD>

      <BODY>

      Содержание тела документа

      </BODY>

   </HTML>

Элементы заголовка

<TITLE> Этим требующим закрытия дескриптором определяется название окна броузера, в котором будет просматриваться ваша страничка.

Пример элементов заголовка:
<TITLE>Моя первая web-страничка </TITLE>

<META> Этот тег используется для указания подробной информации о документе. Употребляется в сочетании с описаниями атрибутов документа и не требует закрытия.

Атрибутами дескриптора <META> может быть любая информация, которую вы хотите сообщить. Существует несколько стандартных атрибутов, необходимых для указания броузеру способа кодировки документа, имени создателя и информации для поисковых систем. Атрибут CONTENT (содержание) указывает броузеру, что содержанием документа является HTML в кодировке (CHARSET) CP-1251(Windows):

Общая структура тега <META> такова:

Атрибут NAME содержит имя определяемого параметра, а CONTENT — значение параметра, определенного атрибутом NAME. Например, если вы хотите дать сведения об авторе документа, это можно сделать следующим образом:

Можно разместить ключевые слова в теге <META>:

Ключевые слова необходимы для индексации вашей странички в поисковых системах. Чем больше слов, соответствующих содержанию вашей страницы вы напишите в этой строке, тем больше вероятность того, что вашу страницу посетит кто-нибудь кроме вас.

Заголовок нашего WWW-шаблона будет содержать следующую информацию:

<HEAD>

<TITLE>Первая web-страничка</TITLE>

<META HTTP-EQUIV="Content-Type"

CONTENT="text/html; charset=windows-1251">

</HEAD>

Основные классы элементов тела документа

Заголовок HTML-документа вы уже создали. Осталось сделать «тело» нашей страницы. «Тело», как и «голова», ограничивается с двух сторон соответствующим тегом — <BODY> </BODY>. В открывающий тег <BODY> могут входить элементы, определяющие параметры страницы, такие, как используемый фоновый рисунок, цвет и размер основного шрифта и гиперссылок, цвет фона и т. п. Цвета этих элементов web-страницы указываются в шестнадцатеричном исчислении.

Тело документа может состоять из:

Заголовков уровней от H1 до H6. H1 – самые крупные заголовки, H6 –самые мелкие;
Блоков (параграфы, списки, формы, таблицы, картинки и т. п.):
Горизонтальных отчеркиваний;
Текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);
Изображений;
Гипертекстовых ссылок.

Вот самый простой HTML-документ:

<HTML>

<HEAD>

<TITLE> Название документа 1</TITLE>

</HEAD>

<BODY>

<h1>

Это крупный заголовок!

</h1>

<p>

Это абзац текста. Простейший пример HTML-документа

</p>

</BODY>

</HTML>

Обязательные метки тела документа

<body> ... </body>

Начальный и конечный теги тела документа.

Атрибуты

alink=цвет

Установка цвета активных гипертекстовых ссылок в документе.

background=url

Указывается URL фонового изображения.

bgсоlоr=цвет

Установка цвета фона документа.

link=цвет

Установка цвета "непосещенных" гипертекстовых ссылок в документе.

text=цвет

Установка цвета обычного текста в документе.

vlink=цвет

Установка цвета "посещенных" ссылок в документе.

Пример:

При таком варианте описания раздела <BODY> явно указываются только цвета фона и основного текста. Цвет гиперссылки и посещенной гиперссылки устанавливаются автоматически, в соответствии с настройками броузера. Если вы хотите установить для гиперссылок нестандартные цвета, например зеленый для непосещенной и голубой для посещенной, вам нужно будет указать цвета этих элементов.

Пример:

Для того чтобы оформить страничку фоновым рисунком (обоями), в теге <BODY> нужно указать параметр BACKGROUND="имя файла". Естественно, графический файл с фоновым рисунком также должен находиться на вашем Internet-сервере. В качестве фонового рисунка вы можете использовать только файлы формата GIF или JPEG.

Пример:

Заключенный в теги текст представляет собой заголовок уровня n. Возможные значения n — от 1 до 6.

Атрибуты

аllign=тип

Указывается способ выравнивания заголовка: по левому краю (left, по умолчанию), по центру (center) или по правому краю (right).

<р> ... </р>

Начальный и конечный теги абзаца.

Атрибуты

align=тип

Задается способ выравнивания текста в абзаце; по левому краю (left), центру (center) или правому краю (right).

Как известно, на странице текст размещается в абзацах. Для определения абзаца в HTML используется тег <P> </P>. Он имеет параметр ALIGN, управляющий выравниванием текста параграфа с помощью четырех аргументов: LEFT, RIGHT, CENTER и JUSTIFY:

<P ALIGN=LEFT> — выравнивание текста по левому краю экрана;

<P ALIGN=RIGHT> — выравнивание текста по правому краю экрана;

<P ALIGN=CENTER> — выравнивание текста по центру экрана;

<P ALIGN=JUSTIFY> — полное выравнивание текста по обоим краям экрана.

Внутри абзаца

Для управления шрифтовым оформлением WEB-страниц может использоваться дескриптор <FONT>. Этим тегом указываются параметры шрифта, такие, как размер, цвет и название. Параметры шрифта в теге <FONT> указываются в кавычках в любом порядке. Строка, указывающая, что данный фрагмент текста необходимо будет отображать с установленным по умолчанию шрифтом размером 6 единиц и буквами фиолетового цвета, будет выглядеть так:

<FONT SIZE="6" COLOR="#8080C0">Текст.</FONT>

Если вы желаете использовать для текста нестандартный шрифт, в теге <FONT> необходимо будет указать параметр FACE, т. е. для отображения той же строки шрифтом Arial тег будет выглядеть так:

<FONT FACE="Arial" SIZE="6" COLOR="#8080C0">Текст.</FONT>

В параметре FACE можно указывать несколько шрифтов в порядке предпочтения. Текст будет отображаться тем шрифтом, который установлен на компьютере пользователя, в порядке предпочтения, указанном вами.

<FONT FACE="Verdana, Tahoma, Arial">Текст.<FONT>

Для управления начертанием символов, т. е. для установки параметров Жирный (Bold), Курсив (Italic) и Подчеркнутый (Underlining), используются теги <B>, <I>, <U>. Эти теги требуют закрытия и могут использоваться вложенными.

Примеры:
<B>Жирный </B>

<I> Курсив </I>

<U> Подчеркнутый </U>

Внутри абзаца можно использовать также непарные метки:

<br>

Возобновление абзаца с начала следующей строки.

Пример:

На странице этот текст <BR>
будет располагаться в две строки.

<hr>

Разрыв абзаца. В месте разрыва будет вставлена горизонтальная линия.

Атрибуты (необязательные)

align=тип

Задается способ выравнивания линии: по левому краю (left), центру (center, по умолчанию) или правому краю (right).

noshade

Отключение трехмерного режима отображения линий. При указании этого параметра линия будет отображаться как простая черная полоса

size=пикселы

Установка толщины линии равной целому числу пикселей.

width=значение

Установка ширины линии либо равной целому числу пикселей, либо в процентах от ширины страницы.

Пример:

Маркированный и нумерованный список

Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>.

Тег <ol> устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>.

Синтаксис

<ol>

<li>элемент нумерованного списка</li>

</ol>

Синтаксис

<ul>

<li>элемент маркированного списка</li>

</ul>

Вставка изображения

Для размещения картинок на Web-страницах существует специальный тег <IMG>, имеющий обязательный параметр SRC="URL" (путь к файлу и имя файла) и несколько необязательных. Рассмотрим этот тег подробнее.

Атрибуты

alt=текст

Задается альтернативный текст для броузеров, не поддерживающих работу с изображениями (необязательный параметр).

border=n

Установка толщины (в пикселях) обрамления изображений, содержащихся в гиперссылках (необязательный параметр).

height=n

Задается высота изображения в пикселях (необязательный параметр).

hspace=n

Задается размещение слева и справа от изображения областей свободного пространства шириной по n пикселей (необязательный параметр).

src=url

Указывается исходный адрес изображения, подлежащего воспроизведению. Этот атрибут является необходимым. Если файл изображения находится на сервере в том же каталоге, что и документ, из которого к нему обращаются, то путь к нему указывать не нужно — требуется указать только имя файла. Если файл изображения находится на том же сервере, но в другом каталоге, требуется указать путь к файлу от каталога, где находится документ, из которого к нему обращаются.

vspace=n

Задается размещение над и под изображением областей свободного пространства (высотой по n пикселей) (необязательный параметр).

width=n

Указывается ширина изображения в пикселях (необязательный параметр).

Примеры:

Файл изображения logo.gif находится на сервере в том же каталоге, что и документ. Указывается высота, ширина изображения, выравнивание по левому краю:

<IMG SRC="logo.gif" HEIGHT=120 WIDTH=160 ALIGN=LEFT ALT="Логотип">

Файл изображения logo.gif находится в каталоге pictures, вложенном в основной каталог сайта. Путь к нему будет выглядеть так:

<IMG SRC="pictures/logo.gif">

Файл с изображением находится на другом сервере, необходимо указать полный путь к файлу:

<IMG SRC="http://www.image.com/images/logo.gif">

Гипертекстовые ссылки

Для того чтобы объединить несколько страниц в один сайт, естественно необходимо связать их гиперссылками. Гиперссылки могут быть внешние и внутренние. Внешние гиперссылки могут ссылаться на документ, который находится в этом же каталоге, или на документ на другом сервере. Если документ находится на сервере в том же каталоге, что и документ, из которого к нему обращаются, то путь к нему указывать не нужно. Если документ находится на другом сервере, требуется указать полный путь к документу.

Внутренние гиперссылки связываются с разными частями одного и того же документа.

Для организации гиперссылки существует специальный тег <A>.

<а> ... </а>

В документе создается гиперссылка (атрибут href) или идентификатор фрагмента (атрибут name).

Примеры внешних ссылок:

<A HREF="ind2.html">  Раздел базы данных </A>

<A HREF="http://polyn.net.kiae.su/index.html">  Индекс базы данных "Полынь"</A>

Пример организации внутренней ссылки в документе index.html:

<A HREF="#point1">  Ссылка на точку "point1" в документе "index.html "</A>

В теле документа index.html должен находиться тег:

<A NAME="point1">

Таблицы

Один из основных недостатков классического HTML — отсутствие возможности абсолютного позиционирования элементов Web-страницы, т. е. вы не можете расположить что-либо в точно указанном вами месте страницы. Классический вариант решения этой проблемы заключается в применении таблиц для позиционирования элементов страницы. Это не слишком просто, но это единственный универсальный путь. Именно так в настоящее время и устроено большинство сложных Web-страниц.

Суть метода заключается в следующем: на страничке создается таблица с невидимыми границами ячеек, и элементы, требующие точного позиционирования, располагаются в ячейках таблицы. Для каждой из ячеек вы можете указать собственные параметры форматирования, соответственно команды форматирования действуют только в пределах ячейки. К примеру, создав на странице однострочную таблицу, состоящую из трех ячеек, получим вариант страницы, при этом в левой ячейке таблицы может размещаться оглавление, по центру – обзор сайта, в правой ячейке - фотографии.

Рассмотрим подробнее теги, применяющиеся для создания таблиц. В HTML любая таблица состоит из строк, разделенных на ячейки. Минимальное их количество – одна строка, содержащая одну ячейку. Максимальное количество не ограничено.

Каждая строка и ячейка описываются отдельными тегами. Все теги, применяющиеся для описания таблиц, требуют ограничения действия, т. е. закрытия. Структура HTML-таблицы выглядит так:

<ОПИСАНИЕ ТАБЛИЦЫ>

<ОПИСАНИЕ СТРОКИ1>

<ОПИСАНИЕ ЯЧЕЙКИ1> содержание </ОПИСАНИЕ ЯЧЕЙКИ1>

<ОПИСАНИЕ ЯЧЕЙКИ2> содержание </ОПИСАНИЕ ЯЧЕЙКИ2>

<ОПИСАНИЕ ЯЧЕЙКИ3> содержание </ОПИСАНИЕ ЯЧЕЙКИ3>

</ОПИСАНИЕ СТРОКИ1>

</ОПИСАНИЕ ТАБЛИЦЫ>

Рассмотрим синтаксис этих тегов:

<TABLE> </TABLE> — главный тег, применяющийся для описания начала и конца таблицы, а также параметров отображения таблицы, таких, как ее размеры, оформление границ ячеек и т. п.

<TR> </TR> - тег, описывающий начало и конец строки таблицы.

<TD> </TD> - тег, описывающий начало и конец ячейки.

Каждый из этих тегов имеет набор параметров, служащих для управления отображением таблицы, установки размеров, выравнивания и т. д.

Каждая таблица и ячейки, составляющие ее, имеют такие свойства, как ширина и высота, выравнивание по ширине и высоте, толщина границы, цвет фона. Эти свойства присваиваются элементам таблицы с помощью параметров.

Параметр WIDTH управляет шириной таблицы и ячейки. В случае, если этот параметр не указан, ширина таблицы/ячейки будет зависеть от ширины ее содержимого. Ширина может указываться в процентах относительно ширины окна (для ячейки – относительно ширины таблицы) или в пикселях.

HEIGHT – то же самое, но для управления высотой таблицы.

Вот примеры таблиц:

<TABLE>

<TR>

<TD>Таблица из одной строки</TD>

<TD>из трех столбцов</TD>

<TD>без указания ширины таблицы и ячеек.</TD>

</TR>

</TABLE>

<TABLE BORDER WIDTH=100%>

<TR>

<TD>Таблица из одной строки</TD>

<TD>и трех столбцов</TD>

<TD>c указанием ширины таблицы,

равной 100% ширины окна броузера.</TD>

</TR>

</TABLE>

<TABLE BORDER>

<TR>

<TD WIDTH=75>  Ячейка с указанием ширины в 75 пикселей</TD>

<TD WIDTH=100>  Ячейка с указанием ширины в 100 пикселей</TD>

<TD WIDTH=150> Ячейка с указанием ширины в 150 пикселей</TD>

</TR>

</TABLE>

Для управления выравниванием таблицы на Web-странице и для форматирования данных внутри таблицы служат параметры ALIGN (горизонтальное выравнивание) и VALIGN (вертикальное выравнивание).

Параметр ALIGN может иметь значения LEFT, RIGHT и CENTER.

VALIGN может принимать значения TOP, MIDDLE и BOTTOM.

При отсутствии этих параметров таблица всегда будет выравниваться относительно левого края страницы, а содержимое ячеек – по горизонтали относительно левого края ячейки и по вертикали относительно ее центра. При употреблении в теге <TABLE> параметр ALIGN управляет выравниванием таблицы относительно окна броузера, а при употреблении в тегах <TD> и <TR> — выравниванием содержимого относительно границ ячейки.

Параметр VALIGN применяется только внутри тегов <TR> и <TD>. При употреблении параметров ALIGN и VALIGN внутри тега <TR> выравнивание задается сразу для всех ячеек, содержащихся в этой строке.

Вот исходный код этих таблиц:

<TABLE BORDER WIDTH=400 HEIGHT=150>

<TR>

<TD VALIGN=TOP>VALIGN=TOP</TD>

<TD VALIGN=MIDDLE ALIGN=CENTER>ALIGN=CENTER VALIGN=MIDDLE</TD>

<TD VALIGN=BOTTOM ALIGN=RIGHT>ALIGN=RIGHT VALIGN=BOTTOM</TD>

</TR>

</TABLE>

<TABLE BORDER WIDTH=400 HEIGHT=150 ALIGN=CENTER>

<TR VALIGN=BOTTOM ALIGN=CENTER>

<TD>Для этой строки задан параметр VALIGN=BOTTOM

и ALIGN=CENTER</TD>

</TR>

<TR VALIGN=TOP ALIGN=CENTER>

<TD>А для этой — VALIGN=TOP и ALIGN=CENTER</TD>

</TR>

</TABLE>

Параметр BORDER служит для управления толщиной границ таблицы. Употребляется он только в теге <TABLE>.

<TABLE BORDER=15 WIDTH=400 HEIGHT=150 ALIGN=CENTER>

<TR>

<TD>Для этой таблицы задан параметр BORDER=15</TD>

</TR>

</TABLE>

Параметр BGCOLOR предназначен для окрашивания фона ячеек таблицы, а параметр BACKGROUND – для размещения графического файла в качестве фона таблицы. Применять эти параметры можно как для таблицы в целом, так и для отдельных ячеек. Значения этих параметров необходимо указывать так же, как и в теге <BODY>, т. е. цвет указывается в восьмеричном исчислении или с помощью стандартного имени, а путь к файлу, используемому в качестве «обоев» для фона таблицы, необходимо указывать в соответствии со всеми правилами указания URL. Вот исходный код этих таблиц:

<TABLE BORDER=3 WIDTH=400

HEIGHT=100 ALIGN=CENTER BGCOLOR=BLACK>

<TR>

<TD ALIGN=CENTER BGCOLOR=RED>Для этой

ячейки задан параметр BGCOLOR=RED</TD>

<TD ALIGN=CENTER><FONT COLOR=WHITE>А в этой цвет шрифта

 изменен на белый</FONT></TD>

</TR>

</TABLE>

<TABLE BORDER=1 WIDTH=400 HEIGHT=100

BACKGROUND="backgr.gif" ALIGN=CENTER>

<TR>

<TD ALIGN=CENTER>Для этой таблицы задан параметр BACKGROUND="file"</TD>

</TR>

</TABLE>

<TABLE BORDER=0 ALIGN=CENTER>

<TR>

<TD>А эта таблица – самая скромная. У нее нет ни фона, ни границ.</TD>

</TR>

</TABLE>

Фреймы

Рассмотрим еще один способ оформления страниц, очень широко применяемый в Web-дизайне. Это – использование фреймов (от англ. Frame – рамка).

Что же такое фреймы? Представьте себе Web-страницу, условно разделенную на несколько частей таким образом, что источником каждой из этих частей является независимая страница. Представили? А теперь представьте, как удобно будет использовать такую структуру для страниц, содержащих большие объемы информации: в одной части страницы можно поместить меню, в другой – элементы графического оформления, неизменные для всей данной части сайта, а в третью загружать страницы с информацией. Это позволит минимизировать задержки, возникающие при загрузке страниц, и уменьшить объем HTML-кода сайта.

С позиции HTML фреймы устроены очень просто и описываются небольшим количеством тегов. Рассмотрим их. Для создания странички с фреймами мы должны создать количество страниц, равное количеству частей (фреймов), на которое разделена страничка, плюс еще одну «материнскую» страничку, которая будет содержать описание фреймовой структуры.

Структура фреймов описывается в отдельном файле с помощью тега <FRAMESET> . Для создания на страничке 2 фреймов равной ширины, расположенных в левой и правой частях страницы, мы должны будем создать HTML-файл со следующим кодом:

<FRAMESET COLS=50%,50%>

<FRAME SRC=”путь_к_файлу _для _левого_фрейма.html">

<FRAME SRC=”путь_к_файлу _для _правого_фрейма.html">

</FRAMESET>

Это весь код, который должна содержать «материнская» страничка. В нашем примере значение параметра COLS=”50%, 50%" cообщает броузеру о том, что он должен сгенерировать на страничке два вертикальных фрейма, а ширина каждого из них будет равна 50% ширины окна броузера. Значения <FRAME SRC=”URL”> указывают броузеру на файлы, которые будут являться документами наполнения фреймов.

Для создания горизонтальной фреймовой структуры необходимо использовать тег <FRAMESET> с параметром ROWS. Таким образом, для создания такой же структуры, как и в приведенном выше примере, но с горизонтальным разделением страницы на две половины, необходимо будет использовать следующий код:

<FRAMESET ROWS=50%,50%>

<FRAME SRC="путь_к_файлу _для _верхнего_фрейма.html">

<FRAME SRC="путь_к_файлу_для _нижнего_фрейма.html>

</FRAMESET>

Вы можете сочетать вертикальные и горизонтальные фреймы в любом порядке. Для этого необходимо лишь применять уже известные вам правила использования вложенных тегов (см. выше) и правильно описывать структуру в теге <FRAMESET>, соблюдая желаемую последовательность расположения.

<HTML>

<HEAD>

<TITLE>Примеры фреймовой структуры

</TITLE>

</HEAD>

<FRAMESET COLS=20%,*>

<FRAME SRC="fr1.html">

<FRAMESET ROWS=50%,*>

<FRAME SRC="fr2.html">

<FRAME SRC="fr3.html">

</FRAMESET>

</FRAMESET>

</HTML>

Как вы видите, здесь используется набор из двух горизонтальных фреймов, вложенный в другой набор из двух вертикальных фреймов. Взгляните на значения ширины фреймов в тегах <FRAMESET> – в этом примере вместо значения ширины второго фрейма используется знак «*». Он сообщает броузеру, что для этого фрейма необходимо отвести все свободное пространство, оставшееся после первого фрейма. Вы можете указывать ширину фреймов как в процентах относительно свободного окна броузера, так и в пикселях.

&-последовательности

Поскольку символы "<" и ">" воспринимаются броузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы в HTML-документе. Для их кодировки используются &-последовательности.

Броузер показывает на экране символ "<", когда встретит в тексте последовательность > ">" кодируется как < . Точка с запятой – обязательный элемент. Пробел кодируется   . С помощью такой кодировки в текст можно вставить несколько идущих подряд пробелов.