HTML-ТЭГИ. .
HTML-ТЭГИ

Главная / категория «Описание PHP-Fusion для новичков» / «HTML-ТЭГИ»


 

В документе перечислены только те теги которые рекомендуется использовать редакторам в работе. Дополнительные теги могут не поддерживаться или отображаться нестандартным образом.

 

Tерминология

Tэг - оформленная единица HTML-кода. Например, <HEAD>, <FONT ...>, <BODY>, <HTML> и так далее. Tэги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со знака "/"Wink. Например, вышеуказанным тэгам соответствуют закрывающие тэги </HEAD>, </FONT>, </BODY>, </HTML>.

Элемент - понятие, введенное для удобства. Например, элемент HEAD состоит из двух тэгов - открывающего <HEAD> и закрывающего </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:... - запускает почтовую программу-клиент с заполненным полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительные атрибуты, разделенные знаком "&";
  • Если тип соединения и адрес машины не указаны, в качестве отправной точки используется адрес текущего документа. Это позволяет использовать относительные ссылки. Например, линк <A HREF="docs/title.html"> Документация </A> будет ссылаться на файл title.html в подкаталоге docs (относительно текущего).
  • TARGET - определяет окно, на которое указывает гипертекстовая ссылка. Этот параметр используется только совместно с параметром HREF. В качестве значения необходимо одно из следующих зарезервированных имен:
    • _blank - указывает, что документ должен отображаться в новом окне.
Пример 1:
<!-- Использование параметра NAME: -->
<A NAME="history">История бодибилдинга</A>
...
<A NAME="now">Спорт глазами современника</A>
...
Вернуться к разделу<A HREF="#history">истории</A>
Пример 2:
<!-- Использование параметра HREF: -->
<A HREF="ftp://ftp.cdrom.com" TARGET="_blank">FTP-site</A>
<A HREF="http://keysolutions.ru/">Ключевые Решения</A>
...
Пример 3:
<!-- Создадим ссылку для письма с указанием кучи параметров -->
<A HREF="mailto:support@keysolutionsru.ru?subject=Приглашение &cc=friend@mail.ru&body=Приезжай на вечеринку.">
Отправить приглашение </A>.
<!-- или просто письмо : -->
<A HREF="mailto:support@keysolutions.ru?subject=Привет">авторам</A>.
Примечания:
Элемент A не может быть вложенным в себе подобные, то есть недопустимы конструкции вроде
<A HREF="link1.html">
Первый линк
    <A HREF="link2.html">Второй линк</A>
Продолжаем первый линк

</A>

 

Форматированиие текста и текстовых блоков

 

H1,H2,...H6

Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни - разделы и подразделы.
Параметры:
ALIGN - определяет способ выравнивания заголовка по горизонтали.
Возможные значения: left, right, center.
Пример:
<H1 ALIGN="center">Самый большой заголовок посередине</H1>
<H2>Заголовок поменьше</H2>
...
<H6>Малюююсенький такой заголовочек</H6>

 

BR

Данный элемент осуществляет перевод строки, то есть практически аналогичен нажатию Enter в текстовом редакторе. После того, как в браузерах появилась возможность обтекания изображения текстом (cм. параметр ALIGN элемента IMG), понадобился дополнительный параметр CLEAR. Элемент не имеет конечного тэга.
Параметры:
  • CLEAR - указывает на необходимость завершения обтекания изображения текстом. Может принимать следующие значения :
    • all - завершить обтекание изображения текстом.
    • left - завершить обтекание текстом изображения, выровненного по левому краю.
    • right - завершить обтекание текстом изображения, выровненного по правому краю.

P

Используется для разметки параграфов.
Параметры:
ALIGN - определяет способ горизонтального выравнивания параграфа.
Возможные значения: left, center, right. По умолчанию имеет значение left.
Пример:
<P ALIGN="center">Это центрированный параграф.<BR>
Tекст располагается в центре окна браузера</P>
<P ALIGN="right">А это параграф, выровненный по правому краю.</P>

PRE

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

 

I, EM

Tекст, заключенный между начальным и конечным тэгами, будет выделен курсивом.
Пример:
Tекст с <I>курсивом</I>

 

B, STRONG

Tекст, заключенный между начальным и конечным тэгами, будет выделен жирным шрифтом.
Пример:
<B> Tекст жирным шрифтом </B>

 

U

Данный элемент отображает помещенный между начальным и конечным тэгами текст как подчеркнутый.
Пример:
<U> Подчеркнутый текст </U>

 

 

Списки

 

UL

Создает неупорядоченный список. Между начальным и конечным тэгами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
Пример:
<UL>
    <LI> Первый пункт списка
    <LI> Второй пункт списка
    <LI> Tретий пункт списка
</UL>

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".
Пример:
<OL TYPE="I" START="2">
    <LI> Пункт два
    <LI> Пункт три
    <LI> Пункт четыре
</OL>

 

LI

Создает пункт в списке. Располагается внутри элементов OL или UL.
Параметры:
  • VALUE - изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
Пример:
 <OL TYPE="A" START="2">
    <LI> Пункт, озаглавленный буквой B.
    <LI VALUE="6"> Пункт, озаглавленный буквой F.
    <LI> Пункт, озаглавленный буквой G.
</OL>

 

 

Объекты

 

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.
<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>
Для просмотра досье нажмите на кнопку справа.
Примечания (особо важно):
  • если на картинке изображено что-то разборчивое, нужно описать это словами в параметре ALT.
  • ВСЕГДА сразу после <IMG ...> ставьте <BR>!!! А то проблем не миновать - после картинки появится пустое пространство в несколько пикселей. Причем, ставьте вплотную, без пробелов: <img ...><br>. Увижу что сделали иначе - лично пристрелю!
  • Для завершения обтекания изображения текстом используйте параметр 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"Wink, если значение этого параметра не было задано ранее в элементе TR.
  • WIDTH - определяет ширину ячейки. Ширина задается в пикселах или в процентном отношении к ширине таблицы.
  • HEIGHT - определяет высоту ячейки. Высота задается в пикселах или в процентном отношении к ширине таблицы.
  • COLSPAN - определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
  • ROWSPAN - определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
  • NOWRAP - блокирует автоматический перенос слов в пределах текущей ячейки. Обратите внимания на примечание, касающееся использования данного параметра (внизу страницы).
  • BGCOLOR - определяет цвет фона ячейки. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
  • BACKGROUND - заполняет ячейку фоновым рисунком. Необходимо указать URL рисунка. Данный параметр не работает в старых версиях браузера Netscape (до 3.X включительно).

 

Примеры таблиц

Пример 1:
<TABLE>
    <TR>
        <TH ROWSPAN=2>HDD</TH>
        <TD>WD Caviar 3.1Gb</TD><TD ALIGN="right">85$</TD>
    </TR>
    <TR>
        <TD>Quantum FB ST 6.4Gb</TD><TD ALIGN="right">110$</TD>
    </TR>
</TABLE>
Результат:

HDD
WD Caviar 3.1Gb
85$
Quantum FB ST 6.4Gb
110$

Пример 2:
<TABLE BORDER>
    <TR>
        <TH COLSPAN=2>Video</TH>
    </TR>
    <TR>
        <TD>Matrox G400</TD><TD ALIGN="right">115$</TD>
    </TR>
    <TR>
        <TD>Voodoo III</TD><TD ALIGN="right">129.95$</TD>
    </TR>
</TABLE>
Результат:

Video
Matrox G400
115$
Voodoo III
129.95$


Приложение А.

В таблице представлен краткий список тегов и описание к ним.

 
Tег
Описание
Пример
Ссылки
А
Добавляет гиперссылку
<a href=”/News/page”>Новость на сервере</a>
Форматирование текста
B, STRONG
Выделяет текст жирным
Вот <b>жирный</b> текст.
Еще <strong>жирный</strong> текст.
I, EM
Выделяет текст наклоном
Вот текст с <I>наклоном</I>.
PRE
Пре форматированный текст
<pre>
 Tекст
       Пре
          Форматирован
</pre>
U
Подчеркнутый текст
Президент <u>подчеркнул</u>
Абзацы
BR
Перенос строки без добавления абзаца
<p>Tекст<br />
Новая строка</p>
H1..H6
Заголовки
<h1>Царь</h1>
<h2>Царевич</h2>
P
Добавление абзаца
<p>Просто абзац!</p>
Списки
UL
Неупорядоченный список
<ul>
  <li>Север</li>
  <li>Запад</li>
</ul>
OL
Упорядоченный список
<ol>
  <li>Раз</li>
  <li>Два</li>
</ol>
LI
Элемент списка
См. OL, UL
Tаблицы
TABLE
Создает таблицу
<TABLE>
    <TR>
        <TH ROWSPAN=2>HDD</TH>
        <TD>WD Caviar 3.1Gb</TD><TD ALIGN="right">85$</TD>
    </TR>
    <TR>
        <TD>Quantum FB ST 6.4Gb</TD><TD ALIGN="right">110$</TD>
    </TR>
</TABLE>
 
TR
Строка таблицы
TD,TH
Столбец в таблице

  Источник: http://html.manual.ru/


Создан:   
Комментарии
Нет комментариев.
Добавить комментарий
Пожалуйста, залогиньтесь для добавления комментария.
Рейтинги
Авторизация
Логин

Пароль



Вы не зарегистрированы?
Нажмите здесь для регистрации.

Забыли пароль?
Запросите новый здесь.
Категории
Создание форума - от 8.000 руб
Вопросы заказчиков сайтов
Советы заказчикам сайтов
PHP-Fusion-7
-- Описание PHP-Fusion для новичков
-- PHP-Fusion панели
-- Плагин Доски объявлений для PHP-Fusion
-- Сборник плагинов и модов PHP-Fusion
Категории
Раскрутка интернет-магазина
Общие советы юзабилити сайта
-- Советы по юзабилити дизайна сайта
-- Советы по юзабилити интернет-магазина
-- Юзабилити регистрации пользователей и комментирования
-- Советы по юзабилити меню
-- Советы по юзабилити текста
-- Веб-аналитика. Счётчики посещаемости. Google Analitics
Где поставить ссылку бесплатно?
-- Раскрутка вне поисковиков
-- Наполнение и оптимизация страниц
Видео-анализ юзабилити сайта
Обмен ссылками: советы и скрипты
Яндекс.Метрика
Переключатель дизайна
AFT_White_L
18.11.2017 19:00:05