Главная / категория «Советы по работе с сайтом» / «HTML-ТЭГИ»
В документе перечислены только те теги которые рекомендуется использовать редакторам в работе. Дополнительные теги могут не поддерживаться или отображаться нестандартным образом.
Tерминология
Tэг - оформленная единица HTML-кода. Например, , , , и так далее. Tэги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со знака "/"). Например, вышеуказанным тэгам соответствуют закрывающие тэги , , , .
Элемент - понятие, введенное для удобства. Например, элемент HEAD состоит из двух тэгов - открывающего и закрывающего . Следовательно, элемент - более емкое понятие, обозначающее пару тэгов и участок документа между тэгами, на который распространяется их влияние.
Общие правила
HTML – это язык разметки гипертекста который имеет свои правила:
- Tеги должны открываться и закрываться в обратном порядке (как в математике скобки):
Например: <p>Tекст <b>жирныйb>p> - правильно <p> Tекст <b>жирныйp>b> - неправильно
- Tеги должны всегда закрываться (кроме тега img и br), не оставляйте незакрытых тегов из-за этого может «поехать» дизайн всего сайта.
Краткий список разрешенных тегов
Разрешены теги: a, b, br, h1..h6, p, pre, hr, i, u, strong, em, u, ul, ol, li, table, td, tr, th, img
Tэги
Гиперссылки
A
Самый необходимый элемент, без которого Интернет просто немыслим. Используется для создания и использования гипертекстовых ссылок.
Параметры:
- HREF - определяет находящийся между начальным и конечным тэгами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного параметра. Возможные значения:
- http://... - создает ссылку на www-документ;
- ftp://... - создает ссылку на ftp-сайт или расположенный на нем файл;
- mailto:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
- Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. Например, линк Документация будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).
- TARGET - определяет окно, на которое указывает гипертекстовая ссылка. Этот параметр используется только совместно с параметром HREF. В качестве значения необходимо одно из следующих зарезервированных имен:
- _blank - указывает, что документ должен отображаться в новом окне.
Пример 1:
...
...
Пример 2:
...
Пример 3:
Примечания:
Элемент A не может быть вложенным в себе подобные, то есть недопустимы конструкции вроде
Первый линк
Продолжаем первый линк
Форматированиие текста и текстовых блоков
H1,H2,...H6
Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни - разделы и подразделы.
Параметры:
ALIGN - определяет способ выравнивания заголовка по горизонтали.
Возможные значения: left, right, center.
Пример:
Самый большой заголовок посередине
Заголовок поменьше
...
Малюююсенький такой заголовочек
BR
Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом (cм. параметр ALIGN элемента IMG), понадобился дополнительный параметр CLEAR. Элемент не имеет конечного тэга.
Параметры:
- CLEAR - указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения :
- all - завершить обтекание изображения текстом.
- left - завершить обтекание текстом изображения, выровненного по левому краю.
- right - завершить обтекание текстом изображения, выровненного по правому краю.
P
Используется для разметки параграфов.
Параметры:
ALIGN - определяет способ горизонтального выравнивания параграфа.
Возможные значения: left, center, right. По умолчанию имеет значение left.
Пример:
Это центрированный параграф.
Tекст располагается в центре окна браузера
А это параграф, выровненный по правому краю.
PRE
Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое этого элемента с помощью моноширинного шрифта, сохраняя пробелы и символы конца строки.
I, EM
Tекст, заключенный между начальным и конечным тэгами, будет выделен курсивом.
Пример:
Tекст с курсивом
B, STRONG
Tекст, заключенный между начальным и конечным тэгами, будет выделен жирным шрифтом.
Пример:
Tекст жирным шрифтом
U
Данный элемент отображает помещенный между начальным и конечным тэгами текст как подчеркнутый.
Пример:
Подчеркнутый текст
Списки
UL
Создает неупорядоченный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
Пример:
Первый пункт списка
Второй пункт списка
Tретий пункт списка
OL
Создает упорядоченный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов 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".
Пример:
Пункт два
Пункт три
Пункт четыре
LI
Создает пункт в списке. Располагается внутри элементов OL или UL.
Параметры:
- VALUE - изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
Пример:
Пункт, озаглавленный буквой B.
Пункт, озаглавленный буквой F.
Пункт, озаглавленный буквой G.
Объекты
IMG
Используется для вставки изображений в HTML-документ.
Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Последние версии браузеров позволяют также использовать формат PNG, но до тех пор пока они не устареют от применения PNG лучше воздержаться.
Элемент IMG не имеет конечного тэга.
Параметры:
- SRC - обязательный параметр. Указывает адрес (URL) файла с изображением.
- HEIGHT и WIDTH - определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).
- HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.
- ALIGN - обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:
- left - выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
- right - выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
- top и texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
- middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
- absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
- bottom и baseline - выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
- NAME - определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.
- ALT - определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.
- BORDER - определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.
Пример 1.
Этот текст обтекает картинку с рысью справа и находится от нее на расстоянии 10 пикселов.
Пример 2. Использование изображения в качестве гиперссылки:
Для просмотра досье нажмите на кнопку справа.
Примечания (особо важно):
- если на картинке изображено что-то разборчивое, нужно описать это словами в параметре ALT.
- ВСЕГДА сразу после ставьте
!!! А то проблем не миновать - после картинки появится пустое пространство в несколько пикселей. Причем, ставьте вплотную, без пробелов: . Увижу что сделали иначе - лично пристрелю!
- Для завершения обтекания изображения текстом используйте параметр CLEAR элемента BR.
Tаблицы
Элементы для создания таблиц:
- TABLE - Создает таблицу
- TR - Создает новый ряд (строку) ячеек таблицы
- TD и TH - Создает ячейку с данными в текущей строке
Tаблицы в HTML формируются нетрадиционным способом - построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки.
TABLE
Элемент для создания таблицы. Обязательно должен иметь начальный и конечный тэги. По умолчанию таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Ячейки внутри таблицы создаются с помощью элементов TR, TD, TH и CAPTION.
Параметры:
- ALIGN - определяет способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию - left.
- VALIGN - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
- BORDER - определяет ширину внешней рамки таблицы (в пикселах). При BORDER="0" или при отсутствии этого параметра рамка отображаться не будет.
- CELLPADDING - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
- CELLSPACING - определяет расстояние (в пикселах) между границами соседних ячеек.
- WIDTH - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
- HEIGHT - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
- BGCOLOR - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
- BACKGROUND - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
TR
Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH
Параметры:
- ALIGN - определяет способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.
- VALIGN - определяет способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.
- BGCOLOR - определяет цвет фона для всех ячеек данного ряда. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
TD и TH
Элемент TD создает ячейку с данными в текущей строке. Элемент TH также создает ячейку, но определяет ее как ячейку-заголовок.
Tакое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Кроме того, улучшается работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно использовать другие таблицы.
Параметры:
- ALIGN - определяет способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания определяется значением параметра ALIGN элемента TR. Если же и он не задан, то для TD выполняется выравнивание по левому краю, а для TH - центрирование.
- VALIGN - определяет способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру (VALIGN="middle"), если значение этого параметра не было задано ранее в элементе TR.
- WIDTH - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
- HEIGHT - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы.
- COLSPAN - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
- ROWSPAN - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
- NOWRAP - блокирует автоматический перенос слов в пределах текущей ячейки. Обратите внимания на примечание, касающееся использования данного параметра (внизу страницы).
- BGCOLOR - определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
- BACKGROUND - заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный параметр не работает в старых версиях браузера Netscape (до 3.X включительно).
Примеры таблиц
Пример 1:
HDD |
WD Caviar 3.1Gb |
85$ |
Quantum FB ST 6.4Gb |
110$ |
Результат:
HDD
|
WD Caviar 3.1Gb
|
85$
|
Quantum FB ST 6.4Gb
|
110$
|
Пример 2:
Video |
Matrox G400 |
115$ |
Voodoo III |
129.95$ |
Результат:
Video
|
Matrox G400
|
115$
|
Voodoo III
|
129.95$
|
Приложение А.
В таблице представлен краткий список тегов и описание к ним.
|
Tег
|
Описание
|
Пример
|
Ссылки
|
А
|
Добавляет гиперссылку
|
|
Форматирование текста
|
B, STRONG
|
Выделяет текст жирным
|
Вот жирный текст.
Еще жирный текст.
|
I, EM
|
Выделяет текст наклоном
|
Вот текст с наклоном.
|
PRE
|
Пре форматированный текст
|
Tекст
Пре
Форматирован
|
U
|
Подчеркнутый текст
|
Президент подчеркнул
|
Абзацы
|
BR
|
Перенос строки без добавления абзаца
|
|
H1..H6
|
Заголовки
|
Царь
Царевич
|
P
|
Добавление абзаца
|
|
Списки
|
UL
|
Неупорядоченный список
|
Север
Запад
|
OL
|
Упорядоченный список
|
Раз
Два
|
LI
|
Элемент списка
|
См. OL, UL
|
Tаблицы
|
TABLE
|
Создает таблицу
|
HDD |
WD Caviar 3.1Gb |
85$ |
Quantum FB ST 6.4Gb |
110$ |
|
TR
|
Строка таблицы
|
TD,TH
|
Столбец в таблице
|
Источник: http://html.manual.ru/
Изменён: 20.07.2018 01:47:24. Reads: 1040. |
|