Элементы HTML

Материал из Seo Wiki - Поисковая Оптимизация и Программирование
Перейти к навигацииПерейти к поиску

Эта статья посвящена в основном элементам HTML. Чтобы узнать о формате элементов Википедии, см. Википедия:Как редактировать статью и m:Помощь:HTML в викитексте

HTML

XHTML
Каскадные таблицы стилей (CSS)
Кодировки символов
Сравнение движков отображения
Динамический HTML
Семейство шрифтов
Редактор HTML
Элементы HTML
Мнемоники в HTML
Скрипты в HTML
Юникод и HTML
Цвета в Web (Web colors)
WWW-Консорциум (W3C)

Элемент HTML — эта основная структурная единица веб-страницы.


Структура HTML-документа

HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML-документа:

<source lang="html4strict">

Текст между двумя тегами - открывающим и закрывающим.

<a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>

А вот пример пустого элемента:
</source>

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так: 

<source lang="html4strict"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></source>

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

Варианты DOCTYPE для HTML 4.01

  • Строгий (Strict): не содержит тегов, помеченных как «устаревшие» или «не одобряемые» (deprecated).
<source lang="html4strict"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></source>
  • Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML.
<source lang="html4strict"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></source>
  • С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов.
<source lang="html4strict"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"></source>

DOCTYPE для HTML 5

В отличие от предыдущих версий тег всего один[источник не указан 5716 дней]: 

<source lang="html4strict"><!DOCTYPE html></source>

Основные элементы («теги»)

Теги и их параметры нечувствительны к регистру. То есть <A HREF="http://yahoo.com"> и <a href="http://yahoo.com"> означают одно и то же.

В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.

Гиперссылки

<source lang="html4strict"><A HREF="filename" target="_self">текст ссылки</A></source>

  • Атрибут HREF задает значение адреса документа, на который указывает ссылка.
  • filename — имя файла или адрес Internet, на который необходимо сослаться.
  • текст_ссылки — текст гипертекстовой ссылки, который будет непосредственно показан в HTML-документе.
  • TARGET — задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:
    • _top — открытие документа в текущем окне
    • _blank — открытие документа в новом окне
    • _self — открытие документа в текущем фрейме
    • _parent — открытие документа в родительском фрейме Значение по умолчанию: _self

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

  • <H1> … </H1>, <H2> … </H2>, … ,<H6> … </H6> — заголовки 1, 2, … 6 уровня.
  • <P> — новый абзац. Можно в конце абзаца поставить </P>, но это не обязательно.
  • <BR> — новая строка. Этот тег не закрывается (то есть не существует тега </BR>)
  • <HR> — горизонтальная линия
  • <BLOCKQUOTE> … </BLOCKQUOTE> — цитата. Обычно текст сдвигается вправо.
  • <PRE> … </PRE> — режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе).
  • <DIV> … </DIV> — блок (обычно используется для применения стилей CSS)
  • <SPAN> … </SPAN> — строка (обычно используется для применения стилей CSS)

Форматирование текста

  • <EM> … </EM> — логическое ударение (обычно отображается курсивным шрифтом)
  • <STRONG> … </STRONG> — усиленное логическое ударение (обычно отображается жирным шрифтом)
  • <I> … </I> — выделение текста курсивом
  • <B> … </B> — выделение текста жирным шрифтом
  • <U> … </U> — подчёркивание текста
  • <S> … </S> — зачёркивание текста. Вот так: зачёркнутый текст.
  • <STRIKE> … </STRIKE> — то же самое, что <S> … </S>
  • <BIG> … </BIG> — увеличение шрифта
  • <SMALL> … </SMALL> — уменьшение шрифта
  • <BLINK> … </BLINK> — мигающий текст. Это один из самых ненавидимых тегов, потому что мигающий текст неприятен для глаз, к тому же не работает в Internet Explorer до 6 версии без применения JavaScript.
  • <MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст. Степень народной любви к этому тэгу примерно такая же, как и к мигающему.
  • <SUB> … </SUB> — подстрочный текст. Например, H<SUB>2</SUB>O создаст текст H2O.
  • <SUP> … </SUP> — надстрочный текст. Например, E=mc<SUP>2</SUP> создаст текст E=mc2.
  • <FONT параметры> … </FONT> — задание параметров шрифта. У этого тега есть следующие параметры:
    • COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.
    • FACE=шрифт меняет шрифт
    • SIZE=размер меняет размер шрифта. Размер от 1 до 7, стандартный по умолчанию 3. (Есть много способов изменить стандартный размер для данной страницы.)
    • SIZE=+размер или SIZE=-размер — размер задаётся по сравнению со стандартным. Например, +2 означает размер на 2 больше стандартного.

Так, например, <source lang="html4strict"> Сигналом к началу атаки являются три больших зелёных свистка. </source> создаст текст

Сигналом к началу атаки являются три больших зелёных свистка.

Списки

<source lang="html4strict">

  • первый элемент
  • второй элемент
  • третий элемент

</source> создаёт список

  • первый элемент
  • второй элемент
  • третий элемент

Если вместо <UL> (Unordered List, что означает ненумерованный список) поставить <OL> (Ordered List, нумерованный список), список получится нумерованным:

  1. первый элемент
  2. второй элемент
  3. третий элемент

Наконец, третьим, и последним, списком, является список определений: <source lang="html4strict">

Кошка
мяукающее домашнее животное
Кот
муж кошки
Крокодил
большой африканский зверь с острыми зубами

</source> создаст следующее:

Кошка
мяукающее домашнее животное
Кот
муж кошки
Крокодил
большой африканский зверь с острыми зубами

Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.

Объекты

  • EMBED — вставка различных объектов: не-HTML документов и media-файлов
  • APPLET — вставка Java-апплетов
  • SCRIPT — вставка скриптов.

Изображения

  • IMG - вставка изображения. Этот тег не закрывается.
    • SRC - имя или URL
    • ALT - альтернативное имя (отобразится, если в браузере запретить отображать картинки)
    • TITLE - краткое описание изображения (отобразится при наведении курсора на картинку)
    • WIDTH, HEIGHT - размеры (если не совпадают с истинными размерами картинки, то изображение "растянется"/"сожмется")
    • ALIGN - задает параметры обтекания текстом (top, middle, bottom, left, right)
    • VSPACE, HSPACE - задают размеры вертикального и горизонтального пространства вокруг изображения

Пример: <source lang="html4strict"> <IMG SRC=url ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)"> </source>

Изображение можно сделать ссылкой: <source lang="html4strict"> <A HREF=url ><IMG SRC=url></A> </source>

Таблицы

  • TABLE — создание таблицы. Параметры тега:
    • BORDER — толщина разделительных линий в таблице
    • CELLSPACING — расстояние между клетками
  • CAPTION — заголовок таблицы (этот тег необязателен)
  • TR — строка таблицы
  • TH — заголовок столбца таблицы (этот тег необязателен)
  • TD — ячейка таблицы
  • height - высота таблицы
  • width - ширина таблицы

Так, например,

<source lang="html4strict">

Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
1998 216
1999 207

</source>

Создаст таблицу:

Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
1998 216
1999 207

У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на

<source lang="html4strict">

</source> таблица получится такой:
Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
1998 216
1999 207

Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).

Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.

Например, если заменить первые строки таблицы на <source lang="html4strict">

</source> таблица получится такой:

Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
Улов крокодилов в Мумбе-Юмбе
Год Улов
1997 214
1998 216
1999 207


Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе с вложенными таблицами.

Формы

Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.

  • FORM — создание формы
  • INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)
  • TEXTAREA — текстовая область (многострочное поле для ввода текста)
  • SELECT — список (обычно в виде выпадающего меню)
  • OPTION — пункт списка

Если вам нравится SbUP.com Сайт, вы можете поддержать его - BTC: bc1qppjcl3c2cyjazy6lepmrv3fh6ke9mxs7zpfky0 , TRC20 и ещё....

→

Источник — https://www.sbup.com:443/w/index.php?title=Элементы_HTML&oldid=12248