Язык HTML

План
1. Введение в HTML
2. Теги
3. Структура HTML-кода
4. Типы тегов
5. Значение атрибутов тега
6. Текст
7. Ссылка
8. Якоря
9. Изображения
10.Списки
11.Таблицы
12.Фреймы
13.Валидация документов

1.Введение в HTML
HTML - это наиболее широко используемый язык для написания
веб-страниц. HTML расшифровывается как Hyper Text Markup
Language - Язык Разметки Гипер Текста.
Гипертекст помогает нам связать друг с другом HTML страницы.
Например, при щелчке по ссылке на веб-странице мы переходим на
другую страницу сайта.
Язык разметки описывает, как именно будут отображаться HTML
страницы. По сути, язык разметки это просто текстовый документ с
тегами. Именно эти теги указывают веб-браузеру, как
структурировать и отображать веб-страницы.

2. Теги
HTML-тег - символы, заключенные в угловые скобки и
являющиеся элементами языка гипертекстовой разметки (HTML).
Он является активным элементом, который изменяет
представление информации, следующей за ним. Тег определяет
границы элемента в тексте.
Теги применяются для того, что бы браузер при отображении
документа понимал, что имеет дело не с простым текстом, а с
элементом формирования.
Пример тега:
<html> Текст </html>

3. Структура HTML-кода
1. <!DOCTYPE> предназначен для указания типа текущего документа. Это
необходимо, чтобы браузер понимал, как следует интерпретировать
текущую веб-страницу, ведь HTML существует в нескольких версиях.
2. <html> определяет начало HTML-файла, внутри него хранится заголовок
(<head>) и тело документа (<body>).
3. <head> содержит главную часть программы. Он никак не отображается на
экране. В нем записывается вспомогательная информация:
<meta> является универсальным и добавляет целый класс возможностей;
<title> для отображения текста, находящегося в заголовке браузера
(обязателен).
4. <body> (тело документа) предназначено для размещения тегов и
содержательной части веб-страницы. Отображается в виде текста с
графическими или динамическими вложениями на странице сайта.

4. Типы тегов
• Открывающий тег - тег, стоящий в начале. Например, тег <b>
является открывающим и стоит перед тем
текстом, который нужно выделить жирным.
• Закрывающий тег - тег, стоящий в конце. Отличительной чертой
служит слеш «/» перед символами в угловых скобках. Так тег </b>
является закрывающим и стоит после текста, который следует
выделить жирным.
• Одиночные теги — теги, которые не имеют закрывающего тега.
Примером может служить <br>.
• Парные теги (контейнеры) — теги, которые состоят из двух
частей – открывающий и закрывающий тег.

5. Значение атрибутов тега
Чтобы расширить возможности отдельных тегов и более гибко
управлять содержимым контейнеров применяются атрибуты тегов.
Все атрибуты состоят из двух частей, имени и значения:
• имя - это атрибут, который вы хотите установить.
• значение - это параметр, который будет иметь выбранный
атрибут.

Стандартные атрибуты
Есть четыре основных атрибута, которые могут использоваться в
большинстве HTML-тегах (хотя не во всех):
• id – может использоваться для того, чтобы однозначно
идентифицировать любой элемент (тег) страницы или таблицы
стилей;
• title – задает название для элемента. Синтаксис атрибута title такой
же, как в атрибута id;
• class – используется для того, чтобы связать элемент с таблицей
стилей CSS и определяет класс элемента. То есть этот атрибут
выполняет функции атрибута id, но для связки с CSS;
• style – позволяет указать правила CSS в пределах элемента.

Атрибуты интернационализации
Существует три атрибута интернационализации, которые доступны для
большинства (хотя и не для всех) элементов XHTML:
• dir – позволяет указать браузеру, в каком направлении должен
размещаться текст. Этот атрибут может принимать одно из двух
значений:
1. ltr – слева направо;
2. rtl – справа налево;
• lang – позволяет указать основной язык, используемый в документе, но
этот атрибут хранится в HTML только для обратной совместимости с
предыдущими версиями HTML;
• xml:lang – заменяет атрибут lang в XHTML. Значение
атрибута xml:lang должно быть использованным в соответствии со
стандартом ISO-639, в котором показан список код стран и языков.

Атрибут Параметры Описание
align right, left, center Выравнивание тега по горизонтали
valign top, middle, bottom Вертикальное выравнивание тега
bgcolor числовые,
шестнадцатеричные значения
RGB
Цвет фона позади тега
background URL-адреса Фоновое изображение за тегом
id Определяется пользователем Имя тега
class Определяется пользователем Имя тега для использования Каскадных
таблиц Стилей CSS.
width Числовое значение (%, px) Задает ширину таблицы, изображения или
ячейки таблицы.
height Числовое значение (%, px) Задает высоту таблицы, изображения или
ячейки таблицы.
title Определяется пользователем "Pop-up" название элементов при
наведении курсора или когда не
загружаются.
Универсальные атрибуты

6. Текст
Для изменения вида текста существует достаточно большое количество
различных тегов.
Прежде чем редактировать код веб-страницы, следует принять во
внимание некоторые особенности, которые присущи HTML при работе с
текстом:
1. любое количество пробелов идущих подряд, в браузере отображается
как один;
2. нет расстановки переносов в тексте;
3. текст занимает ширину окна браузера.

Теги форматирования текста
Текст заголовками. Каждый заголовок начинается с новой строки,
выделен полужирным шрифтом и имеет свой размер (заголовок первого
уровня самый большой, шестого - самый маленький).
<h1></h1> <h2></h2> … <h3></h3>
Разделение на абзацы. Перед началом каждого абзаца следует поместить
тег <p>, закрывающий тег не обязателен. Абзацы отделяются друг от друга
пустой строкой.
Перенос строки. Текст, после тега <br> начинается с новой строки.
Текст курсивом:
• <cite></cite> используются для логического выделения названий книг,
статей и цитат;
• <dfn></dfn> используются для выделения определений;
• <em></em> выделяют важные фрагменты текста.

Текст полужирным шрифтом:
• <strong></strong> (предпочтительнее использовать);
• <b></b>.
Текст подчеркиванием:
• <ins></ins> (предпочтительнее использовать);
• <u></u>.
Текст моноширинным шрифтом:
• <kbd></kbd> (предпочтительнее использовать);
• <samp><samp/>;
• <tt></tt>.
Текст в верхнем и нижнем индексах:
• <sub></sub> ниже уровня строки шрифтом меньшего размера;
• <sup></sup> выше уровня строки шрифтом меньшего размера.
Тег font и его параметры
<font></font> указывают параметры шрифта текста:
• face – название шрифта;
• size – размер шрифта в условных единицах от 1 до 7;
• color – цвет текста.

Выравнивание текста
Для установки выравнивания текста обычно используется тег
параграфа <p> с атрибутом align, который определяет способ
выравнивания. Также блок текста допустимо выравнивать с помощью
тега <div> с аналогичным атрибутом align.
Он может принимать следующие значения:
• left — выравнивание по левому краю, задается по умолчанию;
• right — выравнивание по правому краю;
• center — выравнивание по центру;
• justify — выравнивание по ширине (одновременно по правому и
левому краю). Это значение работает только для текста, длина которого
более, чем одна строка.

7. Ссылки
Ссылки являются основой гипертекстовых документов и
позволяют переходить с одной веб-страницы на другую.
Особенность их состоит в том, что сама ссылка может вести не
только на HTML-файлы, но и на файл любого типа, причем этот
файл может размещаться совсем на другом сайте. Главное, чтобы
к документу, на который делается ссылка, был доступ.

Состояния ссылок
Не посещенная ссылка. Такое состояние характеризуется для ссылок,
которые еще не открывали. По умолчанию не посещенные текстовые
ссылки изображаются синего цвета и с подчеркиванием.
Активная ссылка. Ссылка помечается как активная в момент ее
открытия. Поскольку время между нажатием на ссылку и началом
загрузки нового документа достаточно мало, подобное состояние
ссылки весьма кратковременно. Активной ссылка становится также, при
ее выделении с помощью клавиатуры. Цвет такой ссылки по умолчанию
красный.
Посещенная ссылка. Как только пользователь открывает документ, на
который указывает ссылка, она помечается как посещенная и меняет
свой цвет на фиолетовый, установленный по умолчанию.

Создание ссылок
Для создания ссылки необходимо сообщить браузеру, что является
ссылкой, а также указать адрес документа, на который следует
сделать ссылку. Оба действия выполняются с помощью тега <a>.
<a href="URL">Текст ссылки</а>
Текст, расположенный между тегами <a> и </a>, по умолчанию
становится синего цвета и подчеркивается.
Ссылка на сайт:
<a href="http://www.seoded.ru/">…< /a>
Ссылка на страницу:
<a href="http://www.seoded.ru/beginner.html">…</a>
Ссылка на файл:
<a href="http://www.seoded.ru/downloads/soft/colortfinal1.5.rar">…</a>

Абсолютная ссылка
Абсолютные ссылки это ссылки, в которых указан полный адрес
документа. Такие ссылки используются для связи с внешними
ресурсами сети.
<a href="http://htmlbook.ru">Изучение HTML</a>
Абсолютные ссылки обычно применяются для указания документа
на другом сетевом ресурсе, впрочем, допустимо делать абсолютные
ссылки и внутри текущего сайта.

Относительная ссылка
Относительная ссылка это ссылка, в которой отсутствует общая адресная
часть. Такие ссылки используются в пределах одного сайта.
При создании относительных ссылок надо понимать, какое значение для
атрибута href следует указывать, поскольку оно зависит от исходного
расположения файлов.
1. Файлы располагаются в одной папке
<a href="Ссылаемый документ.html">Ссылка</a>
2. Когда исходный документ хранится в одной папке, а ссылаемый в корне
сайта
<a href="../Ссылаемый документ.html">Ссылка</a>
3. Исходный файл находится в двух вложенных папках
<a href="../../Ссылаемый документ.html">Ссылка</a>
4. Исходный файл располагается в корне сайта, а файл, на который
необходимо сделать ссылку - в папке
<a href="Папка/Ссылаемый документ.html">Ссылка</a>

Ссылки на электронную почту
Для того, чтобы создать ссылку на электронную почту, нужно вместо
URL-адреса в значении атрибута href написать адрес электронной почты с
указанием протокола (mailto:). И тогда при щелчке по такой ссылке
откроется окно почтовой программы с вписанным в поле «Кому» адресом
электронной почты. В HTML-коде это выглядит так:
<a href="mailto:aleksei.seoded@gmail.com">Моя почта< /a>
Ссылки относительно корня сайта
Иногда можно встретить путь к файлу относительно корня сайта, он
выглядит как "/Папка/Имя файла" со слэшем вначале.
<a href="/course/">Курсы</a>

8. Якоря
Якорем называется закладка с уникальным именем на
определенном месте веб-страницы, для создания перехода к ней по
ссылке. Якоря удобно применять для больших документов, чтобы
можно было быстро переходить к нужному разделу.
Создание якорей
Для создания якоря вам необходимо в месте, к которому будет
переход по ссылке, указать <а name="имя"></а>, где имя якоря —
любое слово на английском языке. В якорях совершенно не
обязательно писать что-то между тегами, ведь она используется
только в роли служебной метки.
Чтобы сделать ссылку на якорь надо написать
<a href="#имя">Любой текст</a>

9. Изображения
Добавление изображения происходит в два этапа: вначале готовится
графический файл желаемого размера, затем он добавляется на
страницу через тег <img>.
При подготовке изображений следует учесть несколько моментов.
Поскольку веб-страница загружается по сети, существенным
фактором выступает объем графического файла, встроенного в
документ. Чем он меньше, тем быстрее отобразится изображение.
Размер картинки необходимо ограничить по ширине, например,
установить не более 800 пикселов. Иначе изображение целиком не
поместится в окне браузера, и появятся полосы прокрутки.

Добавление изображения
Для добавления изображения на веб-страницу используется
тег <img>, атрибут src которого определяет адрес графического
файла. Общий синтаксис добавления изображения будет
следующий.
<img src="URL" alt="альтернативный текст">
URL (Universal Resource Locator, универсальный указатель
ресурсов) представляет собой путь к графическому файлу. Для его
указания можно использовать как абсолютный, так и относительный
адрес.

Обтекание картинки текстом
У тега img имеется атрибут align, который и определяет по какому краю
будет расположена картинка и с какого края ее будет обтекать текст. Атрибут
align имеет следующие значения:
• left - изображение будет расположено по левому краю, а текст будет
обтекать его справа;
• right - изображение расположится справа, а текст будет обтекать его слева;
• bottom - отвечает за вертикальное выравнивание, при этом картинка будет
находится слева, а нижняя часть изображения на против первой строки
текста, это значение задано по умолчанию;
• top - отвечает за вертикальное выравнивание, при этом картинка будет
находится слева, а верхняя часть изображения на против первой строки
текста;
• middle - при данном значении происходит выравнивание середины
изображения по базовой линии строки.

10. Списки
Списком называется взаимосвязанный набор отдельных фраз
или предложений, которые начинаются с маркера или цифры.
Списки предоставляют возможность упорядочить и
систематизировать разные данные и представить их в наглядном и
удобном для пользователя виде.
Любой список представляет собой контейнер <ul>, который
устанавливает маркированный список, или <ol>, определяющий
список нумерованный. Каждый элемент списка должен начинаться
с тега <li>.
Виды списков:
• Маркированный список
• Нумерованный список
• Список определений

Маркированный список
Применяется для перечисления элементом в произвольном порядке.
Для создания маркированных списков применяют тэги <ul > <li>
Тэгом <ul> отмечается начало/окончание всего списка.
Тэгом <li> обозначают начало/конец отдельного элемента списка.
При помощи атрибута type можно изменить стиль маркирования.
Маркеры могут принимать один из трех видов:
• Круг (по умолчанию)
<ul type="disc"><li>...</li></ul>
• Окружность
<ul type="circle"><li>...</li></ul>
• Квадрат
<ul type="square"><li>...</li></ul>

Нумерованный список
Применяется для перечисления элементов в строго определенном
порядке.
Для создания нумерованных списков используются тэги <ol> <li>
Тэгом <ol> отмечается начало/окончание всего списка.
Тэгом <li> обозначают начало/конец отдельного элемента списка.
При помощи атрибута type можно изменить стиль нумерации.
<ol type=“…”><li>…</li></ol>
Стили нумерации:
• А - Заглавные буквы
• а - Строчные буквы
• I - Заглавные римские цифры
• i - Строчные римские цифры
• 1 - Арабские цифры (по умолчанию)

Список определений
Список определений состоит из двух элементов — термина и его
определения.
Для создания списков определений используют три тэга:
<dl> - начало/конец списка.
<dt> - начало/конец конкретного термина.
<dd> - начало/конец определения термина.
Например:
<dl>
<dt>Термин 1</dt>
<dd>Определение 1</dd>
<dt>Термин 2</dt>
<dd>Определение 2</dd>
</dl>

11.Таблицы
В HTML таблицы применяются не только привычным нам образом
(как набор данных, распределенных по ячейкам, строкам и
столбцам), но и для удобства размещения информации на странице.
Всю html-страницу можно представить в виде таблицы и,
например, поместить меню в её левый столбец, основную
информацию в средний столбец, а дополнительные ссылки в правый
столбец.
Количество столбцов, строк и, соответственно, ячеек выбирается
только тобой и может быть любым.

Создание таблицы
Для создания таблицы в html служит тег <table>.
Как известно таблица состоит из строк, а строки, в свою очередь
состоят из ячеек. Для определения строк служит тэг <tr>, для создания
ячеек - <th>, <td>.
Тэг <th> используется для создания ячеек с заголовками.
Тэг <td> - для обыкновенных ячеек с данными.
Содержание ячеек заголовков отображается полужирным шрифтом и
выравнивается по центру.
Например:
<table>— начало таблицы
<tr>— начало строки
<td>Первая ячейка</td>— первый столбец
<td>Вторая ячейка</td>— второй столбец
</tr>— конец строки
</table>— конец таблицы

Рамка таблицы
Для того, чтобы сделать видимой границы таблицы, служит атрибут
border тэга <table>.
Определяя рамку таблицы, надо указать толщину ее внешних линий
в пикселях или процентах, для этого используем атрибут cellspacing.
Чтобы изменить цвет рамки надо применить атрибут bordercolor.
<table border="2" cellspacing="5" bordercolor="#0ff00f">…<table>

Фон таблицы
В HTML цвет фона таблицы или отдельных её ячеек устанавливается с
помощью атрибута bgcolor.
<table bgcolor="#999999">…</table>
В качестве фона таблицы или отдельной ячейки можно использовать
картинки. В HTML это делается при помощи атрибута background.
<table background="fon.jpg">…</table>
Для отдельной ячейки картинка-фон задаётся так:
<table><tr><td background="fon.jpg">Ячейка 1</td></tr></table>

Размеры и выравнивание таблицы
Изменить размеры таблицы и ячеек можно с помощью следующих атрибутов:
• width — ширина таблицы, столбца, ячейки;
• height — высота таблицы, строки, ячейки.
Выравнивание таблицы относительно страницы производиться с помощью
атрибута align. Допустимые значения:
• center — выравнивание таблицы по центру;
• left — выравнивание таблицы по левому краю;
• right — выравнивание таблицы по правому краю.
Для того, чтобы выровнять текст в таблице (и другое её содержимое), нужно
использовать атрибут align для каждой конкретной ячейки.
Для вертикального выравнивания содержимого ячеек предназначен атрибут
valign, у которого есть следующие значения:
• baseline — выравнивание по базовой линии;
• bottom — выравнивание по нижнему краю;
• middle — выравнивание по середине (значение по умолчанию);
• top — выравнивание по верхнему краю.

Отступы в таблице
Чтобы изменить отступы между соседними ячейками таблицы, в HTML
используется атрибут cellspacing.
<table cellspacing="10">…</table>
Для того, чтобы задать отступы внутри ячеек применяется атрибут
cellpadding.
<table cellpadding="10">…</table>
Объединение ячеек
Чтобы объединить ячейки таблицы по горизонтали (столбцам) или по
вертикали (строкам), в HTML применяются следующие атрибуты тега <td>:
colspan — объединение ячеек по горизонтали (столбцам);
rowspan — объединение ячеек по вертикали (строкам).

Заголовок таблицы
В случае использования таблицы для упорядочивания данных (а не для
разметки страницы), может понадобиться использование заголовка.
Заголовок таблицы задаётся тегом <caption> </caption>.
<table><caption>Заголовок таблицы</caption>…</table>
К заголовку таблицы можно применить атрибут align со следующими
значениями:
• left — выравнивает заголовок по левому краю таблицы;
• right — выравнивает заголовок по правому краю таблицы;
• center — выравнивает заголовок по центру таблицы (значение по
умолчанию);
• top — то же, что и «center», только работает во всех браузерах;
• bottom — заголовок размещаетсяпод таблицейпо центру.

12. Фреймы
Фреймы позволяют нам открыть в окне браузера - не один, а
одновременно несколько документов (допустим, документ menu.html,
который содержит меню, logo.html - документ, который содержит логотип,
шапку страницы, и content.html - документ с непосредственным
содержанием нашего сайта).
Чтобы сделать фрейм, надо создать новую Веб-страницу, с
тэгами <frameset> <frame>.
Дескриптор <frameset> формирует набор фреймов, которые делят
пространство окна на строки и столбцы. Далее необходимо задать значения
высоты/ширины всех строк/столбцов, выраженные в процентах
относительно текущих габаритов окна браузера, пикселях или в виде
символа звездочки. Символ звездочки говорит о том, что размеры фреймов
зависят от габаритов остальных фреймов страницы.
Дескриптор <frame> служит для определения структуры и содержимого
конкретного фрейма.

Атрибуты тега <frameset>
• cols – делит экран по вертикали. Принимает значения в пикселях, в
процентах или просто *.
• rows – делит экран по горизонтали. Принимает значения в пикселях, в
процентах или просто *.
• frameborder – определяет наличие рамок, т.е. границ фреймов. Принимает
значения "yes" или "no".
• border – определяет ширину рамки в пикселях.
• bordercolor – определяет цвет рамок. При определении цвета можно
выбрать как его название, так и числовой эквивалент в системе RGB.
В отдельном теге <frameset> имеет смысл использовать только один из
атрибутов – cols или rows. Это означает, что фреймовая структура будет
состоять или только из столбцов, или только из строк.

Атрибуты тега <frame>
• src – определяет URL, связанный с конкретным фреймом.
• marginwidth – определяет расстояние между содержимым фрейма и его
границами справа и слева.
• marginheight – определяет расстояние между содержимым фрейма и его
границами сверху и снизу.
• scrolling – определяет присутствие в окне фрейма полосы прокрутки.
Может принимать значения "yes", "no" и "auto"(по умолчанию).
• noresize – определяет границы фрейма как "жестко закрепленные" и не
позволяет пользователю изменить размеры окна фрейма.
• frameborder, border, bordercolor – эти атрибуты связаны с рамками.
• name – определяет имя окна фрейма.

13. Валидация документов
Валидация это проверка документа на соответствие веб-стандартам и
выявление существующих ошибок.
Валидным является такой веб-документ, который прошел подобную
процедуру и не имеет замечаний по коду. Код веб-страницы должен
подчиняться определенным правилам, которые называются спецификацией.

Язык HTML

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (13)

Similar to Язык HTML

Similar to Язык HTML (20)

Язык HTML