Синтаксис и структура
Главной несущей конструкцией команд HTML является дескриптор. Дескриптор – это элемент HTML, определяющий некоторое действие. Мощь дескрипторов проявляется благодаря уточнениям, называемым атрибутами, которые, в свою очередь имеют значения.
Все дескрипторы находятся между символами “<” и “>”. Дескрипторы имеют открывающие и закрывающие компоненты. В закрывающем компоненте перед дескриптором добавляется косая черта “/”.
Всякая HTML страница начинается дескриптором < HTML> и заканчивается </ HTML>.
Работу начинают с создания оболочки документа. Оболочка – это дескрипторы, которые составляют заголовок и тело страницы. В оболочку входят дескрипторы HEAD и BODY.
<HEAD>…</HEAD> - дескриптор заголовка, обозначающий заголовочную часть документа HTML.
<TITLE>…</TITLE> - дескриптор названия документа. Информация, помещаемая внутри этого дескриптора, появляется в строке заголовка броузера.
<BODY>…</BODY> - тело документа HTML, в котором находится вся информация, выводимая на экран.
Атрибуты дескриптора <BODY>
background=”URL” – определяет фоновый рисунок документа
bgcolor=”color” – определяет фоновый цвет документа
text=”color” – определяет цвет текста документа
link=”color” – определяет цвет ссылок
vlink=”color” – определяет цвет посещенных ссылок
alink=”color” – определяет цвет активных ссылок
<!--…--> - дескриптор комментария, используемый для внесения в текст примечаний, которые помогают ориентироваться в коде страницы.
Форматирование и выравнивание текста – это самая простая и одновременно самая мощная часть HTML. Для форматирования текстов можно использовать ряд дескрипторов.
<H1>…</H1> - <H6>…</H6>. Диапазон дескрипторов заголовков применяется для заголовков и подзаголовков содержимого.
<BR>. Дескриптор разрыва, который равнозначен одному возврату каретки.
<P>…</P>. Дескриптор абзаца, используется для обозначения абзаца.
<PRE>…</PRE>. Дескриптор предварительного форматирования текста.
<B>…</B>. Дескриптор для задания полужирного начертания текста.
<I>…</I>. Дескриптор для задания курсива в тексте.
<U>…</U>. Дескриптор для подчеркивания текста.
<DIV>…</DIV>. Дескриптор выравнивания текста. Он имеет атрибут align и значения left (по левому краю), center (по центру), right (по правому краю) и justify (по ширине). Пример использования:
<DIV align=”center”> …</DIV>.
<HR> - выводится горизонтальная линейка. Имеет следующие атрибуты:
align=”left | center | right” – выравнивание линейки
noshade – вывод линейки как сплошной полоски
size=”x” – устанавливает высоту линейки
width=”x” – устанавливает длину линейки.
Для задания шрифта используется дескриптор <FONT>…</FONT>.
Атрибуты элемента <FONT>:
size =”x” – этот атрибут помогает определить высоту знаков текста. Значение по умолчанию – 3.
color=”color” – определяет цвет шрифта
face=”x” – определяет тип шрифта. Могут быть перечислены несколько шрифтов в порядке поиска в системе, разделенные запятыми.
Пример.
<FONT size=4 color=coral face="arial, courier">любой текст</FONT>
Списки в HTML позволяют разделить информацию на логические последовательности элементов. Общие дескрипторы списков:
<UL>…</UL> - неупорядоченный или маркированный список;
<OL>…</OL> -упорядоченный или нумерованный список;
<LI> - дескриптор элемента списка;
Возможность контролировать порядок или внешний вид элементов списка обеспечивается с помощью атрибутов списков, включая value и type.
Если требуется продолжить упорядоченный список с некоторого числа, то к его элементу можно добавить значение номера с помощью атрибута value.
Пример нумерованного списка
<OL>
<LI value=”30”> Это тридцатый элемент списка
<LI> Это тридцать первый
<LI> И так далее
</OL>
Можно изменить внешний вид маркеров списка с помощью атрибута type в элементе списка.
Пример нумерованного списка
<UL>
<LI type=”disc”> Маркер-диск
<LI type=”circle”> Маркер-окружность
<LI type=”square”> Квадратный маркер
</UL>
Для размещения на странице изображений используется дескриптор <IMG>. Для этого дескриптора требуется указать путь к файлу с изображением в атрибуте src. Например: <IMG src=”risunok.gif”>.
Набор перечисленных ниже атрибутов дескриптора IMG дает возможность управлять работой броузера с изображением.
src=”x” – источник изображения;
width = “x”- позволяет броузеру заранее установить ширину изображения;
height=”x” – используя этот атрибут вместе с атрибутом width, броузер может заранее подготовить место для изображения на странице.
border=”x” – этот атрибут используется для определения ширины рамки вокруг рисунка.
align=”x” – с помощью этого атрибута можно выровнять изображение на странице по горизонтали и вертикали (x=top, middle, bottom, left, right).
alt=”описание” – позволяет выводить на экран элемент подсказки с описанием, когда указатель мыши располагается над изображением.
usemap=”URL” – связывает с изображением карту ссылок, определенную элементом MAP.
hspace=”x”- определяет пустое пространство, вставляемое справа и слева от изображения (в пикселях).
vspace=”x” - определяет пустое пространство, вставляемое сверху и снизу от изображения (в пикселях).
Пример.
<IMG src=”images/guitar.gif” width=200 height=284 border=1 align=right alt=”Рисунок гитары”>
Для размещения на странице аудио и видео используется дескриптор <EMBED> (без закрывающего дескриптора).
В дескрипторе <EMBED> используются перечисленные ниже атрибуты:
height=”x” – высота экрана ролика в пикселях или процентах
width=”x” - ширина экрана ролика в пикселях или процентах
autoplay=”true / false” – если для автозапуска установлено значение true, то ролик запустится, как только страница станет доступной, если значение установлено false, то для запуска ролика пользователю необходимо будет щелкнуть на кнопке запуска на консоли.
controller=”true / false” – дает пользователю возможность добавления управляющих элементов
loop=”true / false / palindrome” – если требуется чтобы ролик работал циклически, то необходимо установить значение true, если требуется, чтобы ролик был прокручен один раз, а затем остановился – значение false. При значении palindrome ролик работает от начала до конца, затем в обратном порядке и т.д.
Пример.
<EMBED src="animals.avi" controller=false autoplay=true loop=true>
Основные дескрипторы для создания таблиц:
<TABLE>…</TABLE> - основной дескриптор таблицы, объявляющий ее начало и конец.
<TR>…</TR> - открывающие и закрывающие строку дескрипторы.
<TD>…</TD> - дескрипторы, создающие единичную ячейку таблицы.
Атрибуты дескрипторов таблиц.
Дескриптор <TABLE> имеет следующие атрибуты:
align=”left | center | right” – Применяется для выравнивания таблицы относительно страницы.
border=”x” – Определяет ширину границ обрамления таблицы
frame=”void | above | below | hsides | lhs | rhs | vsides | box | border” – определяет видимые рамки таблицы:
void – видимых рамок нет;
above – рамка только сверху;
below – рамка только снизу;
hsides – рамка только сверху и снизу;
lhs – рамка только слева;
rhs – рамка только справа;
vsides – рамка только слева и справа;
box – рамка сверху, снизу, слева и справа;
borde - рамка сверху, снизу, слева и справа.
rules= “none | groups | rows | cols | all” – определяет, какие внутренние линейки таблицы видны:
none – линейки не видны;
groups – линейки видны между группами строк и столбцов;
rows – линейки только между строками;
cols – линейки только между столбцами;
all – линейки между строками и столбцами.
cellspacing=”x” – Определяет ширину внутреннего пробела между соседними ячейками таблицы
cellpadding=”x” – Определяет отступы от границ ячейки таблицы до данных, размещенных в ячейке
width=”x%” width=”x” – Определяет ширину таблицы. Числовые значения, которые оно принимает, задаются либо в процентах, либо в пикселях.
bgcolor=”color” – устанавливает цвет фона ячеек таблицы
Дескриптор <TR> имеет следующие атрибуты:
align = “left | center | right” – горизонтальное выравнивание содержимого ячеек:
left – выравнивание влево;
center – выравнивание по центру;
right – выравнивание вправо;
valign=”top | middle | bottom ” – вертикальное выравнивание содержимого ячеек:
top – по верхней границе ячеек;
middle – по центру ячеек;
bottom – по нижней границе ячеек;
bgcolor=”color” – определяет цвет фона ячейки.
Дескриптор <TD> имеет следующие атрибуты:
rowspan=”x” – определяет количество строк, охватываемых текущей ячейкой. Значение по умолчанию – 1.
colspan=”x” - определяет количество столбцов, охватываемых текущей ячейкой. Значение по умолчанию – 1.
align=”left | center | right | justify ” – горизонтальное выравнивание содержимого ячеек:
left – выравнивание влево;
center – выравнивание по центру;
right – выравнивание вправо;
valign=”top | middle | bottom ” – вертикальное выравнивание содержимого ячеек:
top – по верхней границе ячеек;
middle – по центру ячеек;
bottom – по нижней границе ячеек;
nowrap – запрещается автоматический перенос текста в ячейке.
bgcolor=”color” – определяет цвет фона ячейки.
width=”x” – ширина ячейки.
height=”x” – высота ячейки.
Пример простой таблицы.
<TABLE>
<TR>
<TD>
Первая ячейка таблицы
</TD>
<TD>
Вторая ячейка таблицы
</TD>
</TR>
</TABLE>
Пример объединения строк и столбцов.
<Table width=100% border=1 bgcolor=khaki>
<TR align=center>
<TD >1 1</TD>
<TD width=30% >1 2 </TD>
<TD width=30%>1 3</TD>
</TR>
<TR align=center>
<TD rowspan=2>2 1 (занимает две строки)</TD>
<TD colspan=2>2 2 (занимает два столбца)</TD>
</TR>
<TR align=center>
<TD>3 2</TD>
<TD>3 3</TD>
</TR>
</Table>
Связывание страниц. Первоначально названный методом гиперссылок, технический прием связи с другими документами в настоящее время позволяет работать не только с текстовыми ссылками. В сегодняшней Web в качестве ссылок используется множество объектов и средств мультимедиа.
Если сущность Web заключается в связывании, то сущность связывания – в HTML-дескрипторе A, т.е. в его якоре (или, как его еще называют, элементе привязки).
Дескриптор якоря является тем компонентом, который позволяет одному HTML-документу связываться с другим. Элемент привязки ограничен открывающим дескриптором <A> и закрывающим </A>.
Чтобы дескриптор якоря работал как положено, у него должны быть атрибуты и значения. Самым главным атрибутом является href, или гипертекстовая ссылка. После него вводят значение. Любой текст или объект, находящиеся между дескриптором <A> и закрывающим дескриптором </A> будет представлять собой ссылку, при щелчке на которую вы попадете с текущей страницы на указанную дескриптором. Пример:
<A href=http://www.mcp.com/> щелкните здесь </A>
Дескрипторы якоря создают ссылки двух видов: абсолютные и относительные. Рассмотренный только что пример , где в качестве значения использовался полный путь (URL), называется абсолютной ссылкой.
Относительные ссылки позволяют связываться с файлами, находящимися по тому же адресу, т.е. на том же сервере. При этом нужно в качестве значения гипертекстовой ссылки указать имя файла:
<A href=”jo.html”>Начальная страница</A>
Полезным методом перемещения в пределах страницы является связывание с помощью внутренних ссылок. Место в странице, на которое нужно перейти, помечается именованным элементом привязки, который создается таким образом: <A name=”x”> </A>, где x – любой набор символов. Чтобы перейти к этому месту страницы создается ссылка:
<A href=”#x”> текст или объекты </A>.
Карты ссылок. Это единое графическое изображение, которое можно использовать для нескольких ссылок. Для создания карты ссылок нужно сначала выбрать изображение и вставить его дескриптором <IMG>. В атрибуте usemap дескриптора <IMG> задать имя карты.
Далее вставить дескриптор создания карты ссылок <MAP>…</Map> с атрибутом name=”имя карты ссылок”.
Внутри дескриптора <MAP> вставить дескрипторы определяющие геометрические области и связи в карте ссылок <AREA>. Дескриптор <AREA> имеет следующие атрибуты:
shape=”rect | circle | poly | default” – определяет область определенной формы:
rect – прямоугольную область;
circle – круглую область;
poly – многоугольную область;
default – указывает область целиком.
coords=”coordinates” – определяет положение области на экране. Все значения разделяются запятыми. Количество и порядок координат зависят от значения атрибута shape:
rect – левый X, верхний Y, правый X, нижний Y;
circle – X центра, Y центра, радиус;
poly – X1,Y1,X2,Y2,…,Xn,Yn.
href=”URL” – определяет местоположения связанного ресурса или якоря.
nohref – указывает, что область не имеет связи.
alt=”text” – текст, выводимый броузером, когда мышь находится в указанной области.
Пример (рисунок черепахи).
<IMG src="cherpah.jpg" alt="карта ссылок" usemap="#cherpah_map" border=0 >
<MAP name="cherpah_map">
<AREA shape="circle" alt="голова" coords="44,86,20" href="head.html">
<AREA shape="rect" alt="лапа" coords="1,45,44,70" href="leg.html">
<AREA shape="poly" alt="лапа" coords="74,94,100,155,130,155,100,90" href="leg.html">
<AREA shape="circle" alt="панцирь" coords="88,40,40" href="body.html">
<AREA shape="default" nohref>
</MAP>