Тег <HEAD>…</HEAD>
Тег-контейнер <HEAD> содержит техническую информацию о вебстранице. С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для посетителей веб-страницы, но просто незаменимая для правильной индексации страницы роботами поисковых серверов.
Описание происходит при помощи тегов TITLE, BASE, STYLE, LINK, META.
<TITLE> присваивает веб-странице заголовок, по которому её распознаёт броузер и поисковые роботы. Отображается в строке заголовка окна броузера.
Пример.
<TITLE>Моя персональная страница</TITLE>
С помощью тега <META> определятся информация, описывающая вебстраницу и используемая поисковыми системами.
<META NAME=“description” CONTENT=”Описание веб-страницы”> <META NAME=“keywords” CONTENT=”ключевые слова поиска”>
Практическое задание 5.
Добавить описание и ключевые слова на первую страницу нашего сайта. HTML-код:
<META NAME=“description” CONTENT=”Cтраница начинающего журналиста”>
<META NAME=“keywords” CONTENT=”Васильев В.В., вебдизайн,
журналистика”>
<TITLE>Добро пожаловать к Васильеву В.В.!</TITLE>
Таблицы.
Таблицы HTML используются для вывода на экран табличных данных, а также для компоновки и дизайна всего содержимого страницы.
Создание простой таблицы
Пример. Вывод на экран табличных данных. Нужно создать таблицу 2X3 следующего вида:
Заголовок таблицы
1-ый столбец |
2-ой столбец |
|
|
ААА |
ВВВ |
АААВВВ
HTML-код этой таблицы:
<TABLE BORDER=“1”> <CAPTION>Заголовок таблицы</CAPTION>
<TR>
<TH>1-ый столбец</TH> <TH>2-ой столбец</TH>
</TR>
<TR> <TD>ААА</TD> <TD>ВВВ</TD>
</TR>
<TR> <TD>ААА</TD> <TD>ВВВ</TD>
</TR>
</TABLE>
Рассмотрим второй вариант использования таблиц HTML. Различают два типа компоновки данных на странице – “жесткий” и “резиновый” дизайн. В первом случае размеры таблицы задаются в пикселях. Во втором – в процентах. При использовании “резинового” дизайна ширина и высота веб-страницы как бы подстраивается под размер и разрешение экрана посетителя. Полезная площадь экрана используется на максимум, а горизонтальная полоса прокрутки появится лишь в случае оконного режима просмотра. Вертикальную полосу прокрутки нельзя избежать при большом объеме информации. Но использование “резинового” дизайна хорошо лишь для текста. Растянутые или сжатые картинки выглядят не очень привлекательно.
Пример. Расположить букву А в центре страницы. Вид таблицы в окне броузера:
А
HTML-код таблицы:
<TABLE WIDTH=“100%” HEIGHT=“100%”> <TR ALIGN=“center” VALIGN=“middle”>
<TD>А</TD> </TR>
</TABLE>
WIDTH=“100%” и HEIGHT=“100%” – соответственно ширина и высота полезной площади окна броузера. Атрибут VALIGN отвечает за выравнивание по вертикали. Более подробно все атрибуты описаны ниже.
Независимо от размеров монитора и разрешения экрана посетителя этой страницы, буква А всегда будет в центре.
Атрибуты тега <TABLE>:
атрибут |
|
значение |
описание |
|
|
|
|
BORDER |
2 |
(пикселы) |
Толщина рамки таблицы |
|
|
|
|
ROWS |
3 |
(шт) |
Кол-во строк таблицы |
|
|
|
|
COLS |
2 |
(шт) |
Кол-во столбцов таблицы |
|
|
|
|
WIDTH |
80, 20% (пикселы или %) |
Ширина таблицы |
|
|
|
|
|
HEIGHT |
80, 20% (пикселы или %) |
Высота таблицы |
|
|
|
|
|
BGCOLOR |
Red, #ff0000 |
Цвет фона таблицы |
|
|
|
|
|
BACKGROUND |
images/fon.gif |
Фоновая картинка |
|
|
|
|
|
BORDERCOLOR |
Red, #ff0000 |
Цвет рамки таблицы |
|
|
|
|
|
ALIGN |
center, right, left, justify |
Выравнивание |
|
|
|
|
|
FRAME |
см. ниже |
Рамка вокруг таблицы |
|
|
|
|
|
RULES |
см. ниже |
Линии в сетке между ячейками |
|
|
|
|
|
CELLPADDING |
1 |
|
Расстояние между границей |
|
ячейки и данными в ней |
||
|
|
|
|
|
|
|
|
CELLSPACING |
5 |
|
Свободное пространство внут- |
|
ри таблицы между ячейками |
||
|
|
|
|
|
|
|
|
Атрибут FRAME задаёт рамку, окружающую таблицу. Может принимать следующие значения:
значение |
действие |
|
|
ABOVE |
Вывести верхнюю линию рамки |
|
|
BELOW |
Вывести нижнюю линию рамки |
|
|
BORDER |
Вывести все линии рамки |
|
|
BOX |
Вывести все линии рамки |
|
|
HSIDES |
Вывести верхнюю и нижнюю линии рамки |
|
|
LHS |
Вывести левую линию рамки |
|
|
RHS |
Вывести правую линию рамки |
|
|
VOID |
Не выводить рамку вообще |
|
|
VSIDES |
Вывести левую и правую линии рамки |
|
|
Атрибут RULES определяет вывод линий в сетке между ячейками. Его значения и их описание представлены в таблице ниже.
значение |
действие |
|
|
|
|
ALL |
Вывести линии во всех рядах и столбцах |
|
|
|
|
|
Вывести горизонтальные линии между всеми группами |
|
GROUPS |
таблицы, определёнными в тегах <THEAD>, <TBODY>, |
|
|
<TFOOT> |
|
|
|
|
COLS |
Вывести вертикальные линии между столбцами таблицы |
|
|
|
|
NONE |
Не выводить никаких линий внутри таблицы (по умолча- |
|
нию) |
||
|
||
|
|
|
ROWS |
Вывести горизонтальные линии между всеми рядами таб- |
|
лицы |
||
|
||
|
|
Пример. Вывести на экран таблицу вида:
Первая строка
Вторая строка
Третья строка
HTML-код этой таблицы: