Embed Size (px)
Citation preview
HTML (от англ. Hyper Text Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине.
Большинство веб-страниц создаются при помощи языка HTML (или XHTML).
Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме.
HTML
Версии 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 — в разработке.
Инструментарий
• Текстовый редактор.• Браузер для просмотра результатов.• Валидатор — программа для проверки
синтаксиса HTML и выявления ошибок в коде (http://validator.w3.org).
• Графический редактор.• Справочник по тегам HTML.
Инструментарий - firebug
Структура 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>
Структура HTML-кода
Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях
Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).
Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>.
Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.
Тег (и)
<тег атрибут1="значение" атрибут2="значение"> - одиночный тег
<тег атрибут1="значение" атрибут2="значение">...</тег> - парный тег (контейнер)
Правила применения тегов
Для тегов любого типа действуют определенные правила их использования. Причем, некоторые правила обязательны для выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет.
– Атрибуты тегов и кавычки – Теги можно писать как прописными, так и строчными символами– Переносы строк – Неизвестные теги и атрибуты – Порядок тегов– Закрывайте все теги– Порядок атрибутов в тегах – Формат атрибутов
<!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>
Типы тегов Каждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.
Условно теги делятся на следующие типы:
– теги верхнего уровня
– теги заголовка документа
– блочные элементы
– встроенные элементы
– универсальные элементы
– списки
– таблицы
Теги верхнего уровня
<html> - является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги <head> и <body>. Открывающий и закрывающий теги <html> в документе необязательны, но хороший стиль диктует непременное их использование.
<head> - предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
<body> - предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, таблицы, списки и др.
Теги заголовка документа
<title> - используется для отображения строки текста в левом верхнем углу окна браузера. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.
<meta> - метатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
<meta name="description" content="Сайт об HTML и создании сайтов">
<meta name="keywords" content="HTML, META, метатег, тег, поисковая система"><meta http-equiv="content-type" content="text/html; charset=utf-8">
Блочные элементы
Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
– <DIV> - блочный элемент (слои)– <H1, … H6> - заголовки– <HR> - горизонтальная линия– <P> - абзац (параграф)– <PRE> - блок форматированного текста
Встроенные элементы Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
– <a> - ссылки– <b>, <strong> - жирное выделение– <big> - увеличение шрифта на 1 п– <br> - перевод строки– <i>,<em> - курсивное начертание– <img> - изображение– <small> - уменьшение шрифта на 1 п– <span> - тег, определяющий встроенный элемент– <sup>,<sub> - верхний и нижний регистры
Теги для списков
Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.
– <ol> - нумерованный список– <ul> - маркерованный список– <li> - элемент списка
Теги для таблиц
Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для
упорядочения и представления табличных данных.
– <table> - контейнер для элементов таблицы– <td> - ячейка таблицы– <th> - заголовочная ячейка таблицы– <tr> - контейнер для создания строки
