Структура html документа

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

Общие сведения HTML

• Hyper Text Markup Language• Код используется для создания Web сайтов• Представляет собой совокупность команд,

которые называются тегами• Интерпретируется браузерами и

отображается в виде документа• Обеспечивает презентационный уровень

приложния

История HTML

• 1991 – HTML теги• 1995 – HTML 2.0• 1997 – HTML 3.2• 1997 – HTML 4.0• 1999 – HTML 4.01• 2000 – XHTML 1.0• 2001 – XHTML 1.1• 2002 – XHTML 2.0• 2000 – XHTML 1.0• 2004 – HTML 5.0

Назначение HTML тегов

• Форматирование текста• Форматирование таблиц и списков• Организация ссылок на другие ресурсы• Описание фреймов• Вставка изображений и мультимедиа

Формат HTML тегов

• HTML тег записывается в угловых скобках и состоит из имени за которым может следовать список атрибутов

• Атрибуты – элементы, которые дают браузеру дополнительную информацию об отображении расширяемой информации

• Большинство тегов имеют два компонента – открывающий и закрывающий теги(парные теги)

• Закрывающий компонент имеет то же название, но при записи перед названием ставится символ « / »

Формат HTML тегов

<p>Это параграф</p>

TAGоткрывающий

TAGзакрывающий


<p class=“summary”>Это параграф</p>

АТРИБУТ

<p id=“main” class=“summary”>Это параграф</p>

АТРИБУТАТРИБУТ


<p class=“summary”>Это параграф</p>

СОДЕРЖАНИЕ ЭЛЕМЕНТА

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

<!doctype html><html>

<head><title>Заголовок</title>

</head><body>

<p>Параграф</p></body>

</html>

HTML

BODY

TITLE

HEAD

P

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

•Тег <HTML> указывает программе просмотра страниц что это HTML документ

•Тег <HEAD> определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа

•Тег <TITLE> - тег названия документа. Текст внутри него отображается не на странице, а как заголовок окна браузера.

•Тег <BODY> определяет видимую часть документа. В этом разделе располагается вся содержательная часть документа (текст статьи, фотографии, формы для заполнения, другие объекты).

Структура HTML заголовка

<head><title>Заголовок</title>

<meta name=“description”>Описание сайта</meta><meta name=“keywords”>фото, видео, музыка</meta>

<link type=“text/css” rel=“stylesheets” href=“style.css”><script type=“text/javascript” src=“script.js”></script>

</head>

Тег META

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

Атрибуты

charset – задает кодировку документа

content – устанавливает значение атрибута, заданного с помощью name или http-equiv

http-equiv – предназначен для конвертирования метатега в заголовок HTTP

name – Имя метатега, также косвенно устанавливает его предназначение

Тег LINK

• Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами

Атрибуты

charset – кодировка связываемого документа

href– путь к связываемому файлу

rel – определяет отношения между текущим документом и файлом, на который делается ссылка

type – MIME-тип данных подключаемого файла

Тег SCRIPT• Предназначен для описания скриптов, может содержать ссылку на

программу или ее текст на определенном языке• Скрипты могут располагаться во внешнем файле и связываться с любым

HTML-документом• Такой подход позволяет использовать одни и те же общие функции на многих

веб-страницах и ускоряет их загрузку, т.к. внешний файл кэшируется при первой загрузке, и скрипт вызывается быстрее при последующих вызовах

Атрибуты

language – устанавливает язык программирования на котором написан скрипт.

src – адрес скрипта из внешнего файла для импорта в текущий документ

rel – определяет отношения между текущим документом и файлом, на который делается ссылка

type – определяет тип содержимого тега

Элемент DOCTYPE

• Предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа).

• Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису.

• Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Элемент DOCTYPE HTML 4.01

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

Строгий синтаксис HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Переходный синтаксис HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

В HTML-документе применяются фреймы.

Элемент DOCTYPE HTML 4.01

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


Элемент DOCTYPE HTML 5

<!DOCTYPE html>

Элемент DOCTYPE XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


Элемент DOCTYPE XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Никакого деления на виды это определение не имеет, синтаксис один и подчиняется четким правилам.

Элемент DOCTYPE синтаксис

• <!DOCTYPE [Элемент верхнего уровня] [Публичность] "[Регистрация]//[Организация]//[Тип] [Имя]//[Язык]" "[URL]">

Типы элементов

• Блочный элемент (block element)• Встроеный элемент (inline element)

Блочный элемент

• Блочным называется элемент, который отображается на веб-странице в виде прямоугольника

• Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки

• К блочным элементам относятся контейнеры <div>, <h1> и <p>

• Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы

• Запрещено добавлять внутрь встроенных элементов блочные


<html><head>

<title>Блочные элементы</title><meta http-equiv="Content-Type" content="text/html;

charset=utf-8"> </head><body>

<div><p>Параграф</p></div><h2><a href="link1.html">Ссылка</a></h2>

</body> </html>



• Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц

• Такие элементы характерны тем, что всегда начинаются с новой строки и занимают всю доступную ширину области, в которой располагаются

• Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями height и width, но к ним еще плюсуется значение полей, отступов и границ.

• Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы.

Встроенный элемент

• Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца

• К встроенным элементам относятся теги <span>, <a>, <q>, <code> и др.

• В основном они используются для изменения вида текста или его логического выделения.


<body><div>

<span class="pic"><img src="images/mail.gif" width="45" height="38" alt=""></span>

<span class="send">Отправить ссылку на эту статью другу</span></div>

</body>



• Встроенные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов

• Для этой цели обычно применяется универсальный тег <span>, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы

• С помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков

Отличия inline и block элементов• Встроенные элементы могут содержать только данные

или другие встроенные элементы, а в блочные допустимо вкладывать другие блочные элементы, встроенные элементы, а также данные. Иными словами, встроенные элементы никак не могут хранить блочные элементы

• Блочные элементы всегда начинаются с новой строки, а встроенные таким способом не акцентируются

• Блочные элементы занимают всю доступную ширину, например, окна браузера, а ширина встроенных элементов равна их содержимому плюс значения отступов, полей и границ

Структура html документа

Technology