META

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


Параметры:

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

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

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


Пример:
<HEAD>
    ...
    <META NAME="Keywords" CONTENT="Вася, Пупкин, домашняя, страничка, homepage, биография, адрес">
    <META NAME="Description" CONTENT="Домашняя страничка Васи Пупкина. Биография, увлечения, координаты.">
    <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=koi8-r">
</HEAD>

В приведенном примере первая строка задает ключевые слова, которые могут помочь при поиске информации в Интернете. Вторая строка - задает краткое описание вашей страницы - если поисковый робот не может составить описание вашей страницы самостоятельно, то он, как правило, будет использовать описание именно из этой строки. Эти две строки совершенно не важны, если вы не собираетесь делать ваш сайт доступным пользователям Сети. Но обратите внимание на третью строку - она подсказывает браузеру, какую кодировку использовать при просмотре данной страницы. Например, если текст на странице написан в кодировке windows-1251 (стандартная кодировка для операционной системы Windows), то третья строка примет следующий вид:

Пример:
<HEAD>
    ...
    <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=windows-1251">
    ...
</HEAD>

FONT

(HTML 3.2) - Font
На этом уроке, расскажем чуть поподробнее а теге FONT. Он позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тэгами. Вне тэгов <FONT> и </FONT> используется шрифт, указанный в элементе BASEFONT.


Параметры:

SIZE - определяет размер шрифта. Возможные значения:

COLOR - определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

FACE - определяет используемый шрифт.


Пример:
<FONT SIZE="+2" COLOR="#AA0000">Увеличенный красный шрифт</FONT>
<FONT SIZE="3" FACE="Courier" COLOR="Magenta">Моноширинный фиолетовый текст 3 размера</FONT>


Примечание:


 Будьте внимательны. Многие элементы форматирования текста (PRE, CODE, KBD, SAMP...), расположенные внутри элемента FONT, работают некорректно.
Параметр FACE старайтесь никогда не использовать. Если на компьютере пользователя не окажется указанного шрифта - глюки неизбежны.

Текстовые блоки

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

Элементы:

H1,H2,...H6 Используются для создания заголовков текста
P Используется для разметки параграфов.
DIV Отделяет блок HTML-документа от остальной его части
BR Осуществляет перевод строки
HR Вставляет в текст горизонтальную разделительную линию.
PRE Включает в документ (моноширинным шрифтом) блок предварительно отформатированного текста

H1,H2,...H6

(HTML 2.0) - Headers
Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни - разделы и подразделы.


Параметры:

ALIGN - определяет способ выравнивания заголовка по горизонтали.

Возможные значения: left, right, center.

Пример:
<H1 ALIGN="center">Самый большой заголовок посередине</H1>
<H2>Заголовок поменьше</H2>
...
<H6>Малюююсенький такой заголовочек</H6>

DIV

(HTML 3.2) - Division
Используется для отделения блока HTML-документа от остальной части документа. Находящиеся между начальным и конечным тэгами текст или HTML-элементы оформляются как отдельный параграф.


Параметры:

ALIGN - определяет выравнивание содержимого элемента DIV. Параметр может принимать следующие значения: left, right, center.


Пример:
...Текст документа...
<DIV ALIGN="center">
...Текст, таблицы, изображения. Выравнивание по центру.
</DIV>
...Текст документа...

Примечание:


 У параметра ALIGN есть еще одно значение - justify. Оно позволяет путем равномерного распределения выравнивать текст одновременно по левому и правому краям документа.

Списки

Списки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Отличаются они лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.


Элементы:

UL Создает неупорядоченный список
OL Создает упорядоченный список
LI Создает пункт меню внутри элементов OL или UL

UL

(HTML 2.0) - Unsorted List
Создает неупорядоченный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.


Пример:
<UL>
    <LI> Первый пункт списка
    <LI> Второй пункт списка
    <LI> Третий пункт списка
</UL>

OL

(HTML 2.0) - Ordered List
Создает упорядоченный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.


Параметры:

START - определяет первое число, с которого начинается нумерация пунктов. (только целые числа)

TYPE - определяет стиль нумерации пунктов. Может иметь значения:

    "A" - заглавные буквы A, B, C ...
    "a" - строчные буквы a, b, c ...
    "I" - большие римские числа I, II, III ...
    "i" - маленькие римские числа i, ii, iii ...
    "1" - арабские числа 1, 2, 3 ...

По умолчанию используется TYPE="1".


Пример:
<OL TYPE="I" START="2">
    <LI> Пункт два
    <LI> Пункт три
    <LI> Пункт четыре
</OL>

IMG

(HTML 2.0) - Image
Используется для вставки изображений в HTML-документ.
Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG и GIF (включая прозрачные и анимированные). Последние версии браузеров позволяют также использовать формат PNG.
Элемент IMG не имеет конечного тэга.


Параметры:

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

HEIGHT и WIDTH - определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

ALIGN - обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

    left - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
    right - выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
    top и texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
    middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
    absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
    bottom и baseline - выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
    absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

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

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

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

Пример 1:
<IMG src="/img/picture.gif" WIDTH="45" HEIGHT="53" ALT="Рысь" HSPACE="10" ALIGN="left"> Этот текст обтекает картинку с рысью справа и находится от нее на расстоянии 10 пикселов.


Пример 2. Использование изображения в качестве гиперссылки:
<A HREF="carlson.html">
<IMG src="/img/button.jpg" WIDTH="70" HEIGHT="30" ALIGN="right" BORDER="0" ALT="Досье Карлсона">
</A>
Для просмотра досье нажмите на кнопку справа.


Пример 3. Использование ISMAP:
<A HREF="http://www.tutu.ru/">
<IMG SRC="logo.gif" ISMAP></A>


Пример 4. Использование USEMAP:
<IMG src="/img/buttons.jpg" WIDTH="170" HEIGHT="120" ALIGN="middle" BORDER="0" USEMAP="#ButtonsMap">


Примечания (особо важно):


 Золотое правило web-мастера - всегда явно задавать размеры картинки в параметрах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это смотрится просто отвратительно.

Второе золотое правило web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в параметре ALT.

ВСЕГДА сразу после <IMG ...> ставьте <BR>!!! А то проблем не миновать - после картинки появится пустое пространство в несколько пикселей. Причем, ставьте вплотную, без пробелов: <img ...><br>.

Значения top и texttop параметра ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать.

Спецсимволы в HTML

В заключении сегодняшнего урока, предлагаем вам познакомиться со спецсимволами, которые можно вставлять на свои страницы. Ниже приведен лишь небольшой их список - наиболее часто встречающиеся. Остальные вы можете самостоятлеьно получить, "перебирая циферки".

Обозначения специальных символов в HTML 4

Вид по имени Вид по коду Имя Код Описание

HTMLlat1 - Latin 1
    nbsp &#160; неразрывный пробел
£ £ pound &#163; фунт стерлингов
¥ ¥ yen &#165; иена или юань
¦ ¦ brvbar &#166; разорванная вертикальная черта
§ § sect &#167; параграф
© © copy &#169; знак copyright
® ® reg &#174; знак зарегистрированной торговой марки
¯ ¯ macr &#175; macron = spacing macron = overline = APL overbar
° ° deg &#176; градус
± ± plusmn &#177; плюс-минус
² ² sup2 &#178; верхний индекс 'два' - 'квадрат'
³ ³ sup3 &#179; верхний индекс 'три' - 'куб'
¼ ¼ frac14 &#188; дробь - одна четверть
½ ½ frac12 &#189; дробь - одна вторая
¾ ¾ frac34 &#190; дробь - три четверти
€ € euro &#8364; валюта евро