1. HTML
HTML (от англ. Hyper Text Markup Language — «язык
разметки гипертекста») — стандартный язык разметки
документов во Всемирной паутине.
Большинство веб-страниц создаются при помощи языка
HTML (или XHTML).
Язык HTML интерпретируется браузером и отображается
в виде документа, в удобной для человека форме.
2. Версии HTML
• RFC 1866 — HTML 2.0, одобренный как стандарт 22 сентября
1995 года;
• HTML 3.2 — 14 января 1997 года;
• HTML 4.0 — 18 декабря 1997 года;
• HTML 4.01(изменения, причём более значительные, чем
кажется на первый взгляд) — 24 декабря 1999 года;
• ISO/IEC 15445:2000 (так называемый ISO HTML, основан на
HTML 4.01 Strict) — 15 мая 2000 года.
• HTML 5 — в разработке.
3. Инструментарий
• Текстовый редактор.
• Браузер для просмотра результатов.
• Валидатор — программа для проверки
синтаксиса HTML и выявления ошибок в коде
(http://validator.w3.org).
• Графический редактор.
• Справочник по тегам HTML.
5. Структура HTML-кода
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример веб-страницы</title>
</head>
<body>
<h1>Заголовок</h1>
<!-- Комментарий -->
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
</html>
6. Структура HTML-кода
Элемент <!DOCTYPE> предназначен для указания типа текущего
документа — DTD (document type definition, описание типа документа).
Это необходимо, чтобы браузер понимал, как следует
интерпретировать текущую веб-страницу, ведь HTML существует в
нескольких версиях
Тег <html> определяет начало HTML-файла, внутри него хранится
заголовок (<head>) и тело документа (<body>).
Заголовок документа, как еще называют блок <head>, может содержать
текст и теги, но содержимое этого раздела не показывается напрямую
на странице, за исключением контейнера <title>.
Тело документа <body> предназначено для размещения тегов и
содержательной части веб-страницы.
8. Правила применения тегов
Для тегов любого типа действуют определенные правила их использования.
Причем, некоторые правила обязательны для выполнения, а другие являются
рекомендациями, т.е. их можно выполнять, а можно и нет.
– Атрибуты тегов и кавычки
– Теги можно писать как прописными, так и строчными символами
– Переносы строк
– Неизвестные теги и атрибуты
– Порядок тегов
– Закрывайте все теги
– Порядок атрибутов в тегах
– Формат атрибутов
9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>Кавычки в атрибуте alt</title>
</head>
<body>
<BR>
<div tid="1"></div>
<p><img src="images/arena.png" alt="Вид заголовка"
width="400"
height="101"></p>
<p><img alt='Вид заголовка' width="400" height="101"
src="images/arena.png" /></p>
<br />
</body>
</html>
10. Типы тегов
Каждый тег HTML принадлежит к определенной группе тегов,
например, табличные теги направлены на формирование таблиц и
не могут применяться для других целей.
Условно теги делятся на следующие типы:
– теги верхнего уровня
– теги заголовка документа
– блочные элементы
– встроенные элементы
– универсальные элементы
– списки
– таблицы
11. Теги верхнего уровня
<html> - является контейнером, который заключает в себе всё содержимое веб-
страницы, включая теги <head> и <body>. Открывающий и закрывающий теги
<html> в документе необязательны, но хороший стиль диктует непременное их
использование.
<head> - предназначен для хранения других элементов, цель которых — помочь
браузеру в работе с данными. Также внутри контейнера <head> находятся
метатеги, которые используются для хранения информации, предназначенной
для браузеров и поисковых систем. Например, механизмы поисковых систем
обращаются к метатегам для получения описания сайта, ключевых слов и
других данных.
<body> - предназначен для хранения содержания веб-страницы, отображаемого
в окне браузера. Информацию, которую следует выводить в документе, следует
располагать именно внутри контейнера <body>. К такой информации относится
текст, изображения, таблицы, списки и др.
12. Теги заголовка документа
<title> - используется для отображения строки текста в левом верхнем
углу окна браузера. Такая строка сообщает пользователю название сайта
и другую информацию, которую добавляет разработчик.
<meta> - метатеги используются для хранения информации,
предназначенной для браузеров и поисковых систем. Например,
механизмы поисковых систем обращаются к метатегам для получения
описания сайта, ключевых слов и других данных.
<meta name="description" content="Сайт об HTML и создании сайтов">
<meta name="keywords" content="HTML, META, метатег, тег, поисковая система">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
13. Блочные элементы
Блочные элементы характеризуются тем, что занимают всю
доступную ширину, высота элемента определяется его
содержимым, и он всегда начинается с новой строки.
– <DIV> - блочный элемент (слои)
– <H1, … H6> - заголовки
– <HR> - горизонтальная линия
– <P> - абзац (параграф)
– <PRE> - блок форматированного текста
14. Встроенные элементы
Встроенными называются такие элементы веб-страницы,
которые являются непосредственной частью другого элемента,
например, текстового абзаца. В основном они используются для
изменения вида текста или его логического выделения.
– <a> - ссылки
– <b>, <strong> - жирное выделение
– <big> - увеличение шрифта на 1 п
– <br> - перевод строки
– <i>,<em> - курсивное начертание
– <img> - изображение
– <small> - уменьшение шрифта на 1 п
– <span> - тег, определяющий встроенный элемент
– <sup>,<sub> - верхний и нижний регистры
15. Теги для списков
Списком называется взаимосвязанный набор отдельных фраз или
предложений, которые начинаются с маркера или цифры. Списки
предоставляют возможность упорядочить и систематизировать
разные данные и представить их в наглядном и удобном для
пользователя виде.
– <ol> - нумерованный список
– <ul> - маркерованный список
– <li> - элемент списка
16. Теги для таблиц
Таблица состоит из строк и столбцов ячеек, которые могут
содержать текст и рисунки. Обычно таблицы используются для
упорядочения и представления табличных данных.
– <table> - контейнер для элементов таблицы
– <td> - ячейка таблицы
– <th> - заголовочная ячейка таблицы
– <tr> - контейнер для создания строки
