Тэги HTML
Разметка гипертекстового документа производится, так называемыми тэгами. Тэги – это набор символов или типичное сокращение английских слов, заключенные в угловые скобки без пробелов (<тэг>). Тэги бывают парными и непарными. Парные тэги должны закрываться с применением слэша (<⁄тэг>). Парные тэги ко всему прочему, являются еще и контейнерами. Это значит, что внутри этих тэгов могут располагаться другие тэги, как парные, так и непарные. При закрытии тэгов будьте внимательны, последний открытый тэг должен быть закрыт первым.
А сейчас рассмотрим назначение основных тэгов, которые мы будем использовать в своей работе по строительству сайта. Запомнить их сразу будет не так просто, поэтому нам часто придется сюда возвращаться. Не беспокойтесь. Когда мы начнем работать и поймем что к чему и для чего - эти тэги запоминаются быстро. Да их и не так много. Тэги, для удобства их поиска, выстроены по алфавиту.
Тэг |
Назначение и атрибуты |
ссылка href="документ.html" - путь к документу target=_blank - открывает ссылку в новом окне name="anchor1" - имя закладки title="Ваша подсказка" - подсказка к ссылке (текстовой) accesskey - определение "горячей клавиши" для гиперссылки tabindex - определяет порядок перехода по гиперссылкам |
|
позволяет дать аббревиатуре всплывающую подсказку при наведении на нее мышкой title="подсказка" - текст подсказки |
|
позволяет дать слову или группе слов всплывающую подсказку при наведении на нее мышкой title="подсказка" - текст подсказки |
|
выделяет адреса на странице. Адрес выделяется курсивом, что тоже легко меняется с помощью стилей title="подсказка" - текст подсказки |
|
определяет геометрические области внутри карты и ссылки для них shape="rect" (circle, poly) - тип области coords="x1,y1,..." - координаты области alt="описание" - описание, подсказка href="document.html" - ссылка shape - задает форму зоны карты ссылок tabindex - задает порядок перехода по зонам карты ссылок |
|
выделение текста полужирным шрифтом
|
|
изменяет внешний вид всего текста size - изменяет размер шрифта всего текста |
|
выделение текста более крупным шрифтом, чем основной
|
|
текст, заключенный в этот тэг, выводится браузером на экран с отступом левого поля
|
|
тело документа, обязательный тэг. Определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты). text="#cc0000" - задает цвет текста всего документа bgcolor="#000000" - задает цвет фона документа background="картинка.jpg" - задает фоновую картинку link="#ff9999" - задает цвет ссылки alink="#ff9999" - задает цвет активной (нажатой) ссылки vlink="#ff9999" - задает цвет посещенной ссылки topmargin="0" - ширина верхнего и нижнего полей документа для IE leftmargin="0" - ширина левого и правого полей документа для IE marginheight="0" - ширина верхнего и нижнего полей документа для других браузеров marginwidth="0" - ширина левого и правого полей документа для других браузеров bgproperties="0" - определяет возможность перемещения графического фона при пролистывании страницы bottommargin="0" - изменяет высоту нижнего поля topmargin="0" - изменяет высоту верхнего поля |
|
принудительный перенос текста на другую строку clear="all" (left, right) - завершение обтекания текстом объекта |
|
создает кнопку с рисунком или с другими встроенными элементами
|
|
снабжает таблицу заголовком align - задает признак выравнивания заголовка таблицы |
|
центрирование текста и объектов
|
|
используется для цитат, названий книг. Использовать этот тег можно для цитирования библиографий и других ссылок сайта title="подсказка" - текст подсказки |
|
отмечает текст как небольшой фрагмент программного кода. Обычно отображается моноширинным шрифтом title="подсказка" - текст подсказки |
|
создает неструктурную группу столбцов таблицы align - задает признак выравнивания данных в ячейках группы по горизонтали bgcolor - задает цвет фона ячеек группы char - задает символ, определяющий порядок выравнивания данных в ячейках группы span - задает количество столбцов в группе valign - задает признак выравнивания данных в ячейках группы по вертикали |
|
создает структурную группу столбцов таблицы align - задает признак выравнивания данных в ячейках группы по горизонтали bgcolor - задает цвет фона ячеек группы char - задает символ, определяющий порядок выравнивания данных в ячейках группы span - задает количество столбцов в группе valign - задает признак выравнивания данных в ячейках группы по вертикали |
|
является описанием списка определений |
|
зачеркивает текст |
|
выравнивание текста и объектов align="center" - центрирование align="right" - выравнивание по правому краю документа align="left" - выравнивание по левому краю документа align="justify" - выравнивание по обоим краям документа class - определяет стиль, применяемый для области вэб-страницы |
|
создает список определений |
|
отмечает текст термина в списке определений |
|
выделяет текст курсивом |
|
логически группирует элементы формы |
|
управление шрифтами color="#cc0000" - задает цвет для блока текста size="+0" - задает размер шрифта текста (от -2 до +4) face="Arial" - задает определенный тип шрифта |
|
создает форму accept-charset - задает формат кодировки данных action - задает место назначения данных формы enctype - определяет формат передаваемых данных формы method - задает способ пересылки данных формы по сети target - определяет место отображения сообщения о доставке данных формы |
|
определяет содержимое и вид одного фрейма marginheight="0" - ширина верхнего и нижнего полей фрэйма marginwidth="0" - ширинау левого и правого полей фрэйма scrolling="yes" (no, auto) - линейка прокрутки name="window-1" - имя фрейма bordercolor - изменяет цвет линий рамки фрейма noresize - запретить посетителю менять размеры фреймов frameborder - обеспечивает сокрытие рамки фрейма src - определяет имя и местоположение файла данных, отображаемых фреймом |
|
определяет макет основного окна в виде прямоугольных пространств rows="100,200,*" - определяет расположение горизонтальных фреймов cols="10%,20%,70%" - определяет расположение вертикальных фреймов border - определяет ширину рамок фрэймов в пикселах bordercolor - изменяет цвет линий рамок фреймов frameborder - скрывает рамки фреймов framespacing - задает толщину линий рамок фреймов |
|
заголовки (H1, H2, H3, H4, H5, H6)
|
|
голова документа, обязательный тэг
|
|
линия align="right" (center или left) width="30%" (ширина линии в процентах) size="6" (толщина линии) NoShade (отмена объемности) color="cc0000" цвет линии |
|
указывает на тип документа, обязательный тэг
|
|
выделение текста курсивом
|
|
"плавающий" фрейм src="ancorpri.html" - путь к подгружаемому документу width="300" - вширина "плавающего" фрейма height="250" - высота "плавающего" фрейма scrolling="auto" (yes, no) - полоса прокрутки frameborder="1" (0) - отображать или нет границы фрейма |
|
подгрузка изображений (картинок) border="5" - рамка покруг картинки width="500" - ширина картинки height="100" - высота картинки align="left" - расположение текста по отношению к картинке vspace="10" - расстояние от картинки до текста по вертикали hspace="30" - расстояние от картинки до текста по горизонтали alt="описание" - описание картинки usemap="#karta1" - ссылка на карту dynsrc - создает внедренный объект видео ismap - создает карту ссылок lowsrc - указывает имя и расположение файла изображения низкого разрешения name - именует изображение src - определяет имя и местоположение файла графического изображения tabindex - определяет порядок перехода по изображениям |
|
подчеркивание текста
|
|
выделяет текст курсивом
|
|
задаются метки элементам формы. Этот тег просто незаменим в голосовалках |
|
позиционирует слой (группу элементов) страницы height, width - задает высоту и ширину слоя left - координата слоя относительно левой кромки окна top - координата слоя относительно верхней кромки окна z-index - задает приоритет воспроизведения перекрывающихся элементов слоя |
|
определяет элемент списка type - стиль маркирования элемента списка value - устанавливает номер элемента списка |
|
определяет клиентскую навигационную карту name="karta1" - имя карты |
|
создает объект бегущей строки behavior - способ поведения бегущей строки alternate - колебательные движения налево и направо scroll - перемещение текста в направлении, указанном в direction. slide - cхоже с scroll, но текст перемещается только один раз и останавливается bgcolor - задает цвет фона бегущей строки direction - направление перемещения бегущей строки down - движение вниз left - движение справа налево. По умолчанию right - движение слева направо up - движение вверх height, width - высота и ширина бегущей строки hspace, vspace - обрамление бегущей строки полосами чистого пространства loop - число циклов перемещения бегущей строки scrollamount - шаг единовременного перемещения бегущей строки scrolldelay - величина задержки между отдельными тактами перемещения текста бегущей строки truespeed - определяет минимальное значение нтервала задержки scrolldelay |
|
служебная информация о Вэб-странице для поисковых роботов. Вынесена на отдельную страничку МЕТА-тэгов
|
|
запрет перехода текста на новую строку
|
|
отображает альтернативный текст при невозможности показа фреймов
|
|
отображает альтернативный текст при невозможности исполнения сценариев JavaScript
|
|
упорядоченные списки type="I" - стиль элемента списка 1 - арабские числа (по умолчанию) i - маленькие римские числа I - большие римские числа a - прописные буквы A - заглавные буквы start - задает начальный номер элементов списка title="подсказка" - текст подсказки |
|
параграф (абзац), выравнивание текста и объектов align="center" - центрирование align="right" - выравнивание по правому краю документа align="left" - выравнивание по левому краю документа align="justify" - выравнивание по обоим краям документа |
|
возможность сохранения признаков предварительного форматирования
|
|
краткий блок цитаты
|
|
перечеркнутый текст
|
|
выделяет текст примеров
|
|
создает объект сценария JavaScript
|
|
выделение текста более мелким шрифтом, чем основной
|
|
добавляет блок чистого пространства align - признак обтекания блока текстом height, width - высота и ширина блока чистого пространства type - тип блока |
|
перечеркнутый текст
|
|
полужирный текст
|
|
создает определение внутреннего листа стилей
|
|
нижний индекс
|
|
верхний индекс
|
|
создание таблиц align - признак обтекания таблицы текстом frame - определяет набор линий рамки таблицы, которые будут показаны rules - определяет набор внутренних линий таблицы, которые будут показаны bgcolor="#FFCC33" - цвет фона таблицы (строки, ячейки) background="картинка.gif" - задает фоновый рисунок width="50" или width="50%"- ширина таблицы height="45" или height="45%"- высота таблицы cellspacing="5" - расстояние между ячейками cellpadding="5" - расстояние внутри ячеек border="3" - задает толщину рамки таблицы bordercolor="#000000" - задает цвет рамки таблицы | |
группа строк данных таблицы align - способ выравнивания данных по горизонтали char - задает символ, определяющий порядок выравнивания данных в ячейках группы valign - способ выравнивания данных по вертикали bgcolor="#FFCC33" - цвет фона группы | |
ячейка данных таблицы bgcolor="#FFCC33" - цвет фона background="картинка.gif" - задает фоновый рисунок width="50" или width="50%"- ширина height="45" или height="45%"- высота align="center" (right, left) - горизонтальное выравнивание содержимого valign="middle" (top, bottom) - вертикальное выравнивание содержимого colspan="2" - растянуть ячейку на несколько стобцов rowspan="2" - растянуть ячейку на несколько рядов cellspacing="5" - расстояние между ячейками char - задает символ, определяющий порядок выравнивания данных в ячейках nowrap - запрещает перенос слов внутри ячейки на новую строку |
|
создает группу строк итоговых данных таблицы bgcolor="#FFCC33" - цвет фона align="center" (right, left) - способ выравнивания данных по горизонтали valign="middle" (top, bottom) - способ выравнивания данных по вертикали char - задает символ, определяющий порядок выравнивания данных в ячейках группы |
|
ячейка заголовка таблицы bgcolor="#FFCC33" - цвет фона background="картинка.gif" - задает фоновый рисунок width="50" или width="50%"- ширина height="45" или height="45%"- высота align="center" (right, left) - горизонтальное выравнивание содержимого valign="middle" (top, bottom) - вертикальное выравнивание содержимого colspan="2" - растянуть ячейку на несколько стобцов rowspan="2" - растянуть ячейку на несколько рядов cellspacing="5" - расстояние между ячейками char - задает символ, определяющий порядок выравнивания данных в ячейках nowrap - запрещает перенос слов внутри ячейки на новую строку |
|
заголовок документа
|
|
строка таблицы bgcolor="#FFCC33" - цвет фона background="картинка.gif" - задает фоновый рисунок width="50" или width="50%"- ширина height="45" или height="45%"- высота align - способ выравнивания данных по горизонтали char - задает символ, определяющий порядок выравнивания данных в ячейках строки valign - способ выравнивания данных по вертикали |
|
шрифт пишущей машинки (моноширинный)
|
|
подчеркнутый текст
|
|
неупорядоченные списки type="disk" (circle, square) - стиль элемента списка |
Шадуро Николай 