Тематические статьи и публикации. Все, что связанно с созданием веб сайтов и Интернет.

Краткий учебник HTML для начинающих. Часть 1

[29 Сентября, 2007 г.] | Рубрика: HTML

HEAD

(HTML 1.0) – Head

Определяет начало и конец заголовка документа. Является контейнером для элементов, содержащих техническую информацию о документе. (TITLE,BASE,STYLE,LINK,META).

Пример:

<HTML>
<!-- Начинаем заголовок... -->
<HEAD>
<TITLE>Справочник по HTML</TITLE>
</HEAD>
<!-- ...закончили. Дальше пошло тело документа -->
<BODY>
Текст документа

</BODY>
</HTML>

TITLE

(HTML 2.0) – Title

Определяет имя всего документа. Имя, как правило, отображается в заголовке окна браузера. Данный элемент обязателен для любого HTML-документа и может быть указан не более одного раза.

Пример:

     ...


<HEAD>

<TITLE>Руководство по эксплуатации</TITLE>

</HEAD>

...

BASE

(HTML 3.2) – Base URL

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

Атрибуты:

HREF – определяет базовый адрес (URL) текущего документа.

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

Пример:

<HEAD>

<!-- Пусть браузер думает, что находится по адресу : -->


<BASE href="http://www.igf.ru/other/index.html">

<TITLE>Руководство по эксплуатации</TITLE>

</HEAD>

...

<!-- А теперь создадим относительную ссылку на документ -->

<!-- http://www.igf.ru/list.html --><A href="../list.html">Список</A>...

STYLE

(HTML 3.2) – Style

Используется для вставки в документ таблицы стилей (CSS – Cascade Style Sheet).

Атрибуты:

TYPE – обязательный атрибут. Определяет MIME-тип вставляемого блока стилей. Как правило, значением этого атрибута является "text/css".

TITLE – определяет имя создаваемой таблицы стилей. Необходим, если вы собираетесь использовать несколько элементов STYLE в одном документе. В этом случае браузер должен спросить пользователя, какой из предложенных стилей будет применен к документу.

Пример:

<HEAD>

<TITLE>Пример использования таблицы стилей</TITLE><!-- Втыкаем табличку стилей -->

    <STYLE type="text/css" title="Cool table"><!-- 

        A {text-decoration : none;}


        P {color : blue; font-size : 12pt; font-family : Arial;}

        H1 {color : red; font-size : 18pt;}

        --></STYLE><!-- ... закончили втыкать -->

</HEAD>

Примечания:

Практически все популярные браузеры игнорируют атрибут TITLE, поэтому можете его не использовать. А жаль, задумка-то была неплохая...

LINK

(HTML 2.0) – Link

Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тега. В заголовке может содержаться несколько элементов LINK.

Атрибуты:

HREF – определяет URL объекта.

REL – определяет тип взаимосвязи текущего документа с объектом, определенным атрибутом HREF. Возможные значения:

stylesheet – указывает на файл, содержащий таблицу стилей (CSS) для текущего
документа. Браузер загрузит css-файл с указанного в атрибуте HREF адреса и
применит его к текущему документу (см. также элемент STYLE)
home – указывает на заглавную страницу вашего сайта
toc, contents – указывают на файл, содержащий оглавление данного документа.
index – указывает на файл, содержащий информацию для индексного поиска по
текущему документу.
glossary – указывает на файл, содержащий перечень терминов, относящихся к
текущему документу.
copyright – указывает на страницу сайта, в которой говорится о его создателях,
авторских правах и т.п.
up, parent – указывает на "родительскую" страницу (документ, стоящий на
ступеньку выше в иерархической структуре вашего сайта).
child – указывает на "дочернюю" страницу (документ, стоящий на ступеньку ниже в
иерархической структуре вашего сайта).
next – указывает на следующую страницу в последовательности документов (напр.
следующую страницу электронного каталога, документации или словаря).
previous – указывает на предыдущую страницу в последовательности документов.
last, end – указывает на последнюю страницу в последовательности документов.
first – указывает на первую страницу в последовательности документов.
help – указывает на страницу с подсказкой (напр. по навигации по вашему сайту).

TYPE – определяет MIME-тип для объекта, указанного в атрибуте HREF.

Пример 1:

<HEAD>
<TITLE>Элемент DIV</TITLE>
<LINK rel="HOME" title="HTML-справочник" href="index.html">
<LINK rel="UP" title="Текстовые блоки" href="textblocks.html">
<LINK rel="PREVIOUS" title="Элемент P" href="p.html">
<LINK rel="NEXT" title="Элемент ADDRESS" href="address.html">

</HEAD>

Пример 2:

<HEAD>
<TITLE>Полдневье</TITLE>
<LINK rel="stylesheet" type="text/css" href="deco1.css">
</HEAD>

Примечания:

Элемент LINK, к сожалению, используется web-мастерами довольно редко, чаще всего только для внедрения CSS из отдельного файла. Почти все браузеры игнорируют информацию о положении документа в структуре сайта – эта информация интересна только индексирующим роботам поисковых систем.

META

(HTML 2.0) – Meta

Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары "имя-значение". С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тега.

Атрибуты:

NAME – определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.

HTTP-EQUIV – определяет имя мета-записи. Практически аналогичен атрибуту NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.

CONTENT – присваивает значение мета-записи, определенной в атрибуте NAME (или HTTP-EQUIV).

Пример:

<HEAD>
...
<META http-equiv="Expires" content="Sat, 26 Jun 1999 17:38:15 GMT">
<META name="GENERATOR" content="Greenback">
<META name="Publisher-Email" content="green@igf.ru">

<META name="Publisher-URL" content="Idea GraFix – http://www.igf.ru/">
<META name="Keywords" content="OpenGL,3D,graphics,3Dfx,Permedia,Diamond,графика">
<META name="Description" content="Российский сайт, полностью посвященный
3D-графике, ее разработке и использованию.">...
</HEAD>

FRAMESET

(HTML 4.0) – Frame Set

Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице. Создаётся вместо тела документа (то есть элемент BODY в документе не используется).

Открывает и закрывает список фреймов, определяемых с помощью элемента FRAME. Между начальным и конечным тегами кроме элементов FRAME и NOFRAMES могут находиться другие элементы FRAMESET. То есть элемент FRAMESET поддерживает вложенные конструкции фреймов.

Атрибуты:

ROWS – определяет количество и размеры горизонтальных фреймов (фреймов-строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров:

в процентах от высоты рабочей области окна браузера. Например: "30%,30%,40%";
в виде знака "*" (звездочка), говорящего о том, что фрейм занимает все свободное пространство окна браузера, незанятое другими фреймами с явно указанными размерами. Например, звездочка в записи "25%,25%,*" равносильна 50%;
в пикселах. Например: "75,*";

Все три способа можно совмещать. Например, "25%,40,*" разобъет экран на три горизонтальных фрейма, первый из которых будет высотой в четверть окна браузера, второй – в 40 пикселов, а третий займет всю оставшуюся площадь.

COLS – определяет количество и размеры вертикальных фреймов (фреймов-столбцов) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Размеры задаются так же, как и в предыдущем атрибуте ROWS.

BORDER – определяет ширину рамок фреймов в пикселах. Данный атрибут действует только в браузерах Netscape;

FRAMEBORDER – определяет наличие рамок у содержащихся внутри FRAMESET фреймов. Возможные значения:

Yes – отображать рамки;
No или 0 – не отображать рамки;

Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER.

FRAMESPACING – определяет расстояние (так называемую "серую область") между фреймами в пикселах. Данный атрибут необходим для создания фреймов без рамок.

Примечание:

Обратите внимание на то, что FRAMESET-структура создаётся вместо элемента BODY. FRAMESET-структура, расположенная в заголовке (внутри элемента HEAD) считается ошибкой.

FRAME

(HTML 4.0) – Frame

Определяет фрейм и его свойства внутри FRAMESET-структуры. (см. элемент FRAMESET)

Атрибуты:

SRC – обязательный атрибут. Указывает адрес (URL) HTML-файла, отображаемого в данном фрейме.

NAME – определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута TARGET (см. элемент A). В качестве значения нужно указать любое имя без пробелов с использованием латинских символов и цифр. Имя не должно начинаться с цифр и специальных символов.

MARGINWIDTH – определяет ширину (в пикселах) левого и правого полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа.

MARGINHEIGHT – определяет ширину (в пикселах) верхнего и нижнего полей фрейма. Если атрибут не указан, браузер самостоятельно определит оптимальный размер отступа.

SCROLLING – определяет наличие линеек прокрутки содержимого фрейма. Возможные значения:

yes – отображать линейки прокрутки.
no – не отображать линейки прокрутки.
auto – отображать линейки прокрутки при необходимости (если документ, указанный в атрибуте SRC, не умещается во фрейме).

NORESIZE – не позволяет изменять размеры фрейма. Данный атрибут является флагом и не требует указания значения.

FRAMEBORDER – определяет наличие рамок у фрейма. Возможные значения:

yes – отображать рамки;
no или 0 – не отображать рамки;

Браузеры Netscape не поддерживают данный атрибут в полной мере и для глобального определения ширины рамок используют атрибут BORDER элемента FRAMESET.

Пример (файл index.html):

 ...
    <FRAMESET frameborder="0" framespacing="0" border="0" cols="265,*">
        <FRAME src="frame1.html" name="page">
        <FRAMESET rows="165,*">

            <FRAME src="frame2.html" name="menu1" marginwidth="0">
            <FRAME src="frame3.html" name="menu2" marginwidth="0">
        </FRAMESET>
<NOFRAMES>Ваш браузер не поддерживает фреймы</NOFRAMES>
    </FRAMESET>
<BODY>

</BODY>
...

NOFRAMES

(HTML 4.0) – No Frames

Все, что находится между начальным и конечным тегами данного элемента, будет отображено браузером, если он не поддерживает фреймы. Элемент NOFRAMES не имеет атрибутов и должен находиться внутри элемента FRAMESET.

Пример:

<FRAMESET rows="*,*">

<NOFRAMES>Ваш браузер не поддерживает фреймы. Обыдно, да?</NOFRAMES>
        <FRAME src="frame1.html">
        <FRAME src="frame2.html">
    </FRAMESET>

SCRIPT

(HTML 3.2) – Script

Вставляет скрипт в документ. Сам текст скрипта либо располагается между начальным и конечным тегами, либо определяется как URL файла, содержащего скрипт, в атрибуте SRC.

Атрибуты:

LANGUAGE – определяет язык, на котором написан скрипт, например, JavaScript.

SRC – определяет URL скрипта.

Пример 1:

<SCRIPT LANGUAGE="JavaScript" SRC="http://www.igf.ru/js/script.js"></SCRIPT>

В целях совместимости со старыми браузерами, содержимое элемента SCRIPT следует заключать между , т.е. оформлять его как html-комментарий:

Пример 2:

<SCRIPT LANGUAGE="JavaScript"><!--
window.location="http://www.art-russia.com";
// -->

</SCRIPT>

Где размещать скрипт:

Элемент SCRIPT можно располагать либо в заголовке (внутри элемента HEAD) либо в теле документа (внутри BODY).

NOSCRIPT

(HTML 4.0) – No Script

Определяет текст, который будет отображен, если браузер по какой-либо причине не работает со скриптами.

Пример:

<SCRIPT LANGUAGE="JavaScript"><NOSCRIPT> Пора менять браузер... </NOSCRIPT>
    <!--
    window.location="http://www.igf.ru";
    -->
</SCRIPT>

MAP

(HTML 3.2) – Map

Создает новую навигационную карту. Между начальным и конечным тегами содержит один или несколько элементов AREA, определяющих навигационные области карты.

Атрибуты:

NAME – единственный и обязательный атрибут. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью атрибута USEMAP элемента IMG. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.

Пример:

 <!-- Создаем карту Map1 : -->

<MAP name="Map1">
<!-- Задаем области -->
<AREA href="...>
    <AREA HREF=" ...>
...
</MAP>
<!-- Карта готова. Применим её к картинке: --><IMG src="image.gif" usemap="#Map1" width="200" height="100" alt="Картинка">

AREA

(HTML 3.2) – Map Area

Создает область карты, определенной с помощью элемента MAP. Элемент должен располагаться между начальным и конечным тегами элемента MAP. Не имеет конечного тега.

Атрибуты:

SHAPE – определяет форму навигационной области. Возможные значения:

rect – прямоугольник;
circle – окружность;
poly – многоугольник.

В зависимости от выбранной формы меняется способ задания ее координат в атрибуте COORDS.

COORDS – определяет координаты навигационной области на карте. Используется в паре с атрибутом SHAPE. Способы задания координат для разных типов областей:

SHAPE="rect" COORDS="левый x, верхний y, правый x, нижний y";
SHAPE="circle" COORDS="центр x, центр y, радиус";
SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,...";

HREF – определяет область как гипертекстовую ссылку. Значение задается в виде ссылки (URL).

TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов (см. элемент FRAME) либо одно из зарезевированных имен, подробно описанных в атрибуте TARGET элемента A.

NOHREF – определяет область как неактивную (невосприимчивую к нажатию). Данный атрибут противоположен атрибуту HREF и используется для отмены действия последнего.

ALT – определяет альтернативный текст-подсказку для данной области.

Пример:

 <!-- Создаем хитрую карту с круглой дыркой посередине -->
<MAP name="map1">
<AREA nohref shape="circle" coords="80,70,40">

<AREA href="guide.html" alt="Путеводитель" shape="rect" coords="0,0,167,140">
</MAP>
...
<!-- Применяем ее к картинке --><IMG src="/img/logo.gif" width="167" height="140" border="0" alt="Путеводитель" usemap="#map1">

Примечания:

В последовательности из нескольких элементов AREA наибольший приоритет имеют те, которые были определены первыми. Они перекрывают области, определенные позже. Именно поэтому в приведенном выше примере сначала создается пассивная область (отверстие) и лишь потом – активная со ссылкой.

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