Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//RU">
Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2.
После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывается тэгом <HTML> и им же закрывается.
Схематически структура HTML-документа приведена ниже.
Из схемы видно, что документ состоит из двух основных блоков - "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело - элементом BODY. Рассмотрим теги, задающие структуру и содержание HTML-документа.
<HTML>...</HTML>
Заключает в себя весь текст HTML-документа.
Блочный парный тег. Обязательных атрибутов не имеет.
<HEAD>...</HEAD>
Указывает на начало и конец заголовка документа.
Атрибуты <HEAD>:
- lang="Код языка"
Блочный парный тег. Обязательных атрибутов не имеет.
<META>...</META>
Служит для размещения дополнительной информации о Web-странице: предоставление информации о документе, его авторе, дате создания, списки ключевых слов для поисковых машин и т.п.
Общий синтаксис META-тегов:
<META name="имя_META-тэга" content="содержание_META-тэга">или
<META HTTP-EQUIV="имя_META-тэга" content="содержание_META-тэга">- name - Не обрабатывается броузером.
- HTTP-EQUIV - Обрабатывается броузером.
Теги с параметром NAME:
<META name="description" content="Описание Вашего ресурса">Описание содержимого документа.
Описание стоит составлять в виде небольшого текста, рекомендуется не более 250-300 символов.
Пример:
<META NAME="description" CONTENT="Эта страница предназначена для предоставления справочной информации по HTML"><META name="keywords" content=" Ваши ключевые слова">
Список ключевых слов документа, представленных через пробел или запятую. Эти слова нужны поисковым машинам для индексации вашей страницы в своем каталоге.
Пример:
<META NAME="keywords" CONTENT="HTML html JavaScript javascript css html CSS VBScript vbscriptVRML vrml php PHP Perl perl справочник язык программирования таги программирование"><META name="author" content="Информация_об_авторе">Имя автора документа и его email, домашний адрес и другие координаты.
<META name="generator" content="Название_программы">Название программы, создавшей документ.
<META name="Copyrigh" content="Авторские_права">Описание авторских прав на документ.
Теги с параметром HTTP-EQUIV:
<META HTTP-EQUIV="Refresh" CONTENT="0; URL=https://spravkaweb.ru">
Позволяет осуществлять редирект через заданный промежуток времени на определенный адрес. (В данном случае браузер сразу после загрузки страницы осуществит переход на https://spravkaweb.ru)
<META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251">Этот тэг задает тип содержимого (MIME) и его кодироку. В данном случае тип указывается как "text/html" - то есть гипертекст, кодировка (charset) - windows-1251. Вообще, указывать явно кодировку не рекомендуется. Броузеры и сами неплохо справляются с ее выбором.
<META HTTP-EQUIV="expires" CONTENT="Tue, 29 Apr 2001 10:00:00 GMT">Время "устаревания" документа. Указывается в формате RFC-850 (стандарт электронной почты).
- Tue - день недели;
- 29 Apr - день месяца и месяц;
- 2001 - год;
- 10:00:00 - время. Часы:минуты:секунды;
- GMT - время по Гринвичу. Тип временного пояса.
При истечении указанной даты документ будет удален из кэша и повторном обращении заново запрошен из сети. Это выполняется и броузером и прокси сервером. Обратите внимание - если дата указана как 0, то документ будет удален сразу же после загрузки, то есть он вообще не храниться в кэше. Если вы решили использовать этот параметр, то знайте, что могут возникнуть проблемы с индексированием в поисковых машинах, например, документ не будет проиндексирован вообще.
<BASE>...</BASE>
Задает базовый адрес, который может быть использован для формирования полной формы URL из неполной.
Задается в HTML-заголовке страницы (внутни тега <HEAD>) перед всеми гиперссылками.
Синтаксис:
<BASE href="Базовый адрес" id="Имя" target="Имя окна или фрейма|_blank|_parent|_search|_top">
Обязательный параметр: href, который задает интернет-адрес
<HEAD>...<BASE HREF="https://spravkaweb.ru/">...</HEAD>Тогда гиперссылка вида <A HREF="/img/10.gif"> будет расширена до <A HREF="https://spravkaweb.ru/img/10.gif">
<BODY>...</BODY>
Задает начало и конец тела HTML-документа.
Блочный парный тег. Обязательных атрибутов не имеет.
Атрибуты тега <BODY>
- bgcolor="Цвет" - определяет цвет фона документа
- text="Цвет" - определяет цвет текста документа
- link="Цвет" - определяет цвет выделенного элемента текста
- vlink="Цвет" - определяет цвет ссылки на документ, который уже просмотрен
- alink="Цвет" - определяет цвет ссылки в момент, когда на нее указывает курсор мыши
- background="Интернет-адрес файла изображения" - дает изображение, служащее фоновым
- bgproperties="fixed" - фоновое изображение не движется. Только для IE.
- class="Стилевой класс"
- id="Имя"
- lang="Код языка"
- style="Определение встроенного стиля"
<DIV>...</DIV>
Определяет отдельный элемент страницы: простой текстовой абзац или более сложный фрагмент с HTML-форматированием. Его содержимое может быть сколь угодно сложно. Зачастую используется для создания слоев и применения стилей.
Атрибуты <DIV>:
- id="Имя" - название слоя
- style="Определение встроенного стиля"
- class="Стилевой класс"
- align="left|center|right|justify";
Блочный парный тег. Обязательных атрибутов не имеет.
<LABEL>...</LABEL>
Связывает текстовое содержание с определенным элементом управления.
Атрибуты <LABEL>:
- for="Имя элемента управления"
- accesskey="Клавиша-ускоритель"
- class="Стилевой класс"
- contenteditable="inherit|true|false"
- datafld="Имя поля таблицы базы данных"
- dataformatas="text|html|localized-text"
- datasrc="Имя объекта-источника данных"
- dir="ltr|rtl"
- DISABLED
- HIDEFOCUS
- id="Имя"
- lang="Код языка"
- language="JScript|javascript|vbs|vbscript|XML|Код языка скрипта"
- style="Определение встроенного стиля"
- tabindex="Порядковый номер в последовательности"
- title="Текст подсказки"
Встроенный парный тег. Обязательных атрибутов - for, задающий имя элемента управления, к которому привязывается метка. Это имя должно быть задано атрибутом id.
Пример 1:
<LABLE FOR="Info">Send Information:</LABLE><Input type=Checkbox ID="Info">Send informationПример 2:
<STYLE type="text/css">.accesskey{text-decoration:underline}</STYLE><STYLE>...</STYLE>
Задает таблицу стиля для Web-страницы. Может присутствовать только в HTML-заголовке (внутри тега <HEAD>).
Атрибуты <STYLE>:
- type="Тип данных MIME" - обязательный атрибут, указывающий браузеру на использования CSS. "Тип данных MIME" - обычно "text/css"
Блочный парный тег.
Импортирование: Возможность ссылаться на таблицу стилей, расположенную у вас на сервере, и добавлять свои значения
@import: url(MyStyle.css)Пример:
<HEAD> <STYLE type="text/css"> <!-- @import:url(MyStyle.css) BODY:{font-family:Verbana,Sans-serif} A:hover{text-decoration:none}... --> </STYLE> </HEAD><<!-- -->>...</<!-- -->>
Комментарии в документе, которые не выводятся на экран.
Заголовки и названия
<Hn>...</Hn>
Форматирует текст как заголовок n-ого уровня (n принимает значение от 1 до 6).
Атрибуты <Hn>:
- align="left|center|right|justify";
- class="Стилевой класс"
- id="Имя"
- lang="Код языка"
- style="Определение встроенного стиля"
Блочный парный тег. Обязательных атрибутов не имеет. Доступны шесть уровней: от <H1> до <H6>.
<TITLE>...</TITLE>
Определяет заголовок Web-страницы. Может применяться только в HTML-заголовке (внутри тега <HEAD>).
Блочный парный тег. Обязательных атрибутов не имеет.
Абзацы и строки
<P>...</P>
Описывает текстовой абзац.
Атрибуты <P>:
- align="left|center|right|justify";
- class="Стилевой класс"
- id="Имя"
- lang="Код языка"
- style="Определение встроенного стиля"
Блочный парный тег, однако, в некоторый случаях может использоваться как одинарный. Обязательных атрибутов не имеет.
<BR>...</BR>
Переход на новую строку не прерывая абзаца.
Атрибуты <BR>:
- clear="all|left|right|none"
Одинарный тег. Обязательных атрибутов не имеет.
<CENTER>...</CENTER>
Используется для центрирования блока текста.
Блочный парный тег. Обязательных атрибутов не имеет.
<LEFT>...</LEFT>
Используется для расположения блока текста по левому краю.
Блочный парный тег. Обязательных атрибутов не имеет.
<RIGHT>...</RIGHT>
Используется для расположения блока текста по правому краю.
Блочный парный тег. Обязательных атрибутов не имеет.
<HR>...</HR>
Описывает горизантальную линию.
Атрибуты <HR>:
- align="left|center|right|justify";
- NOSHADE
- size="Высота в пикселах"
- width="Ширина"
Блочный одинарный тег. Обязательных атрибутов не имеет.
Стили текста
<B>...</B>
Используется для выделения текста жирным шрифтом.
Встроенный парный тег. Обязательных атрибутов не имеет.
<BIG>...</BIG>
Задает отображение текста крупным шрифтом.
Встроенный парный тег. Обязательных атрибутов не имеет.
<SMALL>...</SMALL>
Задает отображение текста мелким шрифтом. Встроенный парный тег. Обязательных атрибутов не имеет.
<STRONG>...</STRONG>
Применяется для выделения текста. Браузеры обычно отображают такой текст жирным шрифтом.
Встроенный парный тег. Обязательных атрибутов не имеет.
<EM>...</EM>
Выделяет текст терминов. Браузеры обычно отображают его курсивом.
Встроенный парный тег. Обязательных атрибутов не имеет.
<I>...</I>
Используеся для выделения текста курсивом.
Встроенный парный тег. Обязательных атрибутов не имеет.
<BLOCKQUOTE>...</BLOCKQUOTE>
Форматирует текст как цитату. Текст выводится на экран с увеличенным левым полем.
Атрибуты <BLOCKQUOTE>:
- class="Стилевой класс"
- id="Имя"
- lang="Код языка"
- style="Определение встроенного стиля"
Блочный парный тег. Обязательных атрибутов не имеет.
<CODE>...</CODE>
Рекомендуется использовать для фрагментов исходного текста, помещения на страницы примеров. Браузеры обычно отображают моноширным шрифтом.
Встроенный парный тег. Обязательных атрибутов не имеет.
<FONT>...</FONT>
Управление параметрами текста.
Атрибуты <FONT>:
- color="Цвет"
- face="Имя шрифта"
- size="Высота в пикселах"
Блочный парный тег. Обязательных атрибутов не имеет.
<BASEFONT>...</BASEFONT>
Служит для установления стандартного размера шрифта, гарнитуры и цвета текста в документе.
Атрибуты <BASEFONT>:
· size="Размер шрифта"
· color="Цвет"
- face="Имя шрифта"
- id="Имя"
Параметры, указанные в теге, действуют во всем документе, пока эти установки не будут перекрыты тегом <FONT>. После закрытия тега <FONT> характеристики <BASEFONT> вновь вступают в силу.
Одинарный тег. Обязательных атрибутов не имеет.
<KBD>...</KBD>
Выводит текст моноширным шрифтом. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры.
Встроенный парный тег. Обязательных атрибутов не имеет.
<LISTING>...</LISTING>
Выводит блок текста моноширным шрифтом. Текст выводится как он есть, со всеми пробелами и т.д.
Блочный парный тег. Обязательных атрибутов не имеет.
<PRE>...</PRE>
Выводит блок текста моноширным шрифтом с сохранением всего заданного форматирования, т.е. текст выводится как он есть, со всеми пробелами и т.д.
Атрибуты <PRE>:
- class="Стилевой класс"
- id="Имя"
- lang="Код языка"
- style="Определение встроенного стиля"
Блочный парный тег. Обязательных атрибутов не имеет.
<U>...</U>
Выводит текст подчеркнутым.
Встроенный парный тег. Обязательных атрибутов не имеет.
<S>...</S>
Выводит текст зачеркнутым.
Встроенный парный тег. Обязательных атрибутов не имеет.
<SAMP>...</SAMP>
Форматирует текст как пример исходного кода программы. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. Встроенный парный тег. Обязательных атрибутов не имеет.
<SUB>...</SUB>
Отображает текст нижним индексом (подстрочный индекс).
Встроенный парный тег. Обязательных атрибутов не имеет.
<SUP>...</SUP>
Отображает текст верхним индексом (надстрочный индекс).
Встроенный парный тег. Обязательных атрибутов не имеет.
<VAR>...</VAR>
Используется для форматирования имен переменных и функций языков программирования. Браузеры обычно выводят курсивом.
Встроенный парный тег. Обязательных атрибутов не имеет.
Списки.Ссылки
<DL>...</DL>
Этот тег используется для создания списка определений. Включает в себя теги <DT> (термин) и <DD> (определение термина).
<DL><DT>Определяемый термин<DD>определение термина</DL>Если определяемые термины короткие
<DL COMPACT>...</DL>Блочный парный тег. Обязательных атрибутов не имеет.
<OL>...</OL>
Используется для создания нумерованного списка.
Атрибуты <OL>:
- class="Стилевой класс"
- id="Имя"
- lang="Код языка"
- start="Начальный номер"
- type="A|a|I|i|1"
Каждый элемент списка начинать с <LI TYPE=вид>
- type=A - прописные буквы
- type=a - строчные
- type=I - римские прописные
- type=i - римские строчные
- type=1 - арабские
Блочный парный тег. Обязательных атрибутов не имеет.
<UL>...</UL>
Используется для создания маркированного списка.
Атрибуты <UL>:
- class="Стилевой класс"
- id="Имя"
- lang="Код языка"
- style="Определение встроенного стиля"
- type="disc|circle|square"
Блочный парный тег. Обязательных атрибутов не имеет.
<LI>...</LI>
Метка. Помечает позицию списка.
Атрибуты <LI>:
- class="Стилевой класс"
- id="Имя"
- lang="Код языка"
- style="Определение встроенного стиля"
- type="A|a|I|i|1|disc|circle|square"
- value="Номер"
Встроенный одинарный тег. Обязательных атрибутов не имеет.
<A>...</A>
Создание анкера (якоря), или гиперссылки.
Атрибуты <A>:
- href="Интернет-адрес назначения"
- name="Имя якоря"
- target="Имя окна или фрейма|_blank|_parent|_search|_top">
Обязательные атрибуты NAME или HREF
Атрибут NAME
Создание анкера(метки)
- NAME="AAA", где AAA имя гипертекстовой ссылки внутри документа
Атрибут HREF
Определяет переход по гипертекстовой ссылке к странице или анкеру
<A HREF="#AAA">Переход к анкеру AAA</A><A HREF="2.html#AAA">Переход к анкеру ААА в файде 2.html</A><A HREF="ftr://server/directory/file.ext"> Загрузить файл </A><A HREF="mailto:user@mail.box">Послать письмо</A>Атрибут TARGET
Определяет окно, в которое будет загружаться гиперссылка (_blank, _new, имя фрейма или отсутствует).
- TARGET="windowName"
Таблицы
<TABLE>...</TABLE>
Данный тег помещает на Web-страницу таблицу.
Атрибуты <TABLE>:
- align="left|center|right";
- bgcolor="Цвет"
- border="Толщина границы в пикселах"
- cellpadding="Расстояние между содержимым ячейки и ее краев"
- cellspacing="Расстояние между ячейками таблицы"
- cols="Количество колонок"
- height="Высота"
- width="Ширина"
Блочный парный тег. Обязательных атрибутов не имеет.
<CAPTION>...</CAPTION>
Заголовок таблицы.
Атрибуты <CAPTION>:
- align="bottom|center|left|right|top";
Встроенный парный тег. Обязательных атрибутов не имеет.
<TH>...</TH>
Обозначает заголовок таблицы.
Атрибуты как у TD, только содержимое выравнивается по центру.
<TR>...</TR>
Метки строк в таблице.
Aтрибуты:
ALIGN - устанавливает выравнивание текста в ячейках строки
- ALIGN=LEFT - выравнивание влево
- ALIGN=CENTER - выравнивание по центру
- ALIGN=RIGHT - выравнивание вправо
VALIGN - вертикальное выравнивание текста в ячейках строки
- VALIGN=TOP - выравнивание по верхнему краю
- VALIGN=MIDDLE - по центру
- VALIGN=BOTTON - по нижнему краю
- VALIGN=CENTER
- VALIGN=BASELINE
- bgcolor - цвет фона
- bordercolor - цвет рамки строки
- bordercolordark - темный цвет рамки строки (IE)
- bordercolorlight - светлый цвет рамки строки (IE)
<TD>...</TD>
Метки ячеек таблицы.
Aтрибуты:
NOWRAP - содержимое ячейки показывать в одну строку
COLSPAN - размах ячейки по горизонтали
- COLSPAN=3 - ячейка на 3 колонки
ROWSPAN - размах ячейки по вертикали
- ROWSPAN=2 - ячейка, за ней 2 строки
ALIGN - выравнивание текста в ячейках
- ALIGN=LEFT - выравнивание влево
- ALIGN=CENTER - выравнивание по центру
- ALIGN=RIGHT - выравнивание вправо
VALIGN - вертикальное выравнивание
- VALIGN=TOP - по верхнему краю
- VALIGN=MIDDLE - по центру
- VALIGN=BOTTOM - по нижнему краю
WIDTH - ширина ячейки в пикселях
- WIDTH=200
HEIGHT - высота ячейки в пикселях
- HEIGHT=40
- bgcolor - цвет фона
- background - фоновая графика (JPEG или GIF)
- bordercolor - цвет рамки строки
- bordercolordark - темный цвет рамки строки (IE)
- bordercolorlight - светлый цвет рамки строки (IE)
<MULTICOL>...</MULTICOL>
Вывод текста в несколько столбцов.
Атрибуты:
COLS="n"
n - количество столбцов
GUTTER="m"
m - расстояние между столбцами