Основные примеры HTML

Не волнуйтесь, если в этих примерах используются неизвестные вам теги.

Вы узнаете о них в следующих главах.

HTML-документы

Все HTML-документы должны начинаться с объявления типа документа: ‹!DOCTYPE html›.

Сам HTML-документ начинается с ‹html› и заканчивается ‹/html›.

Видимая часть документа HTML находится между ‹body› и ‹/body›.

Пример

‹!DOCTYPE html›
‹html›
‹body›

‹h1›Мой первый заголовок‹/h1›
‹p›Мой первый абзац.‹/p›

‹/тело›
‹/html›

"Попробуй сам ""

HTML-заголовки

Заголовки HTML определяются тегами от ‹h1› до ‹h6›.

‹h1› определяет самый важный заголовок. ‹h6› определяет наименее важный заголовок:

Пример

‹h1›Заголовок 1‹/h1›
‹h2›Заголовок 2‹/h2›
‹h3›Заголовок 3‹/h3›

"Попробуй сам ""

HTML-абзацы

Абзацы HTML определяются с помощью тега ‹p›:

Пример

‹p›Это абзац.‹/p›
‹p›Это другой абзац.‹/p›

"Попробуй сам ""

HTML-ссылки

Ссылки HTML определяются с помощью тега ‹a›:

Пример

‹a href="http://www.w3schools.com›Это ссылка‹/a›

"Попробуй сам ""

Назначение ссылки указывается в атрибуте href.

Атрибуты используются для предоставления дополнительной информации об элементах HTML.

HTML-изображения

HTML-изображения определяются с помощью тега ‹img›.

Предоставляется исходный файл (src), альтернативный текст (alt) и размер (width и height). как атрибуты:

Пример

‹img src="w3schools.jpg" alt="W3Schools.com" width="104 height="142›

"Попробуй сам ""

HTML-элементы

HTML-элемент обычно состоит из тега start и тега end, между которыми вставляется содержимое:

‹tagname›Содержимое находится здесь…‹/tagname›

HTML элемент — это все, от начального до конечного тега:

‹p›Мой первый абзац.‹/p›

Начальный тегЭлемент содержимогоКонечный тег‹h1›Мой первый заголовок‹/h1›‹p›Мой первый абзац.‹/p›‹br›

Некоторые элементы HTML пусты (не содержат содержимого) и не имеют закрывающего тега, например элемент ‹br› (который указывает на разрыв строки).

Вложенные элементы HTML

Элементы HTML могут быть вложенными (элементы могут содержать элементы).

Все документы HTML состоят из вложенных элементов HTML.

Этот пример содержит четыре элемента HTML:

Пример

‹!DOCTYPE html›
‹html›
‹body›

‹h1›Мой первый заголовок‹/h1›
‹p›Мой первый абзац.‹/p›

‹/тело›
‹/html›

"Попробуй сам ""

Объяснение примера

Элемент ‹html› определяет весь документ.

Он имеет начальный тег ‹html› и конечный тег ‹/html›.

Элемент content — это еще один элемент HTML (элемент ‹body›).

‹html›
‹тело›

‹h1›Мой первый заголовок‹/h1›
‹p›Мой первый абзац.‹/p›

‹/тело›
‹/html›

Элемент ‹body› определяет тело документа.

Он имеет начальный тег ‹body› и конечный тег ‹/body›.

Элемент content — это два других элемента HTML (‹h1› и ‹p›).

‹h1›Мой первый заголовок‹/h1›
‹p›Мой первый абзац.‹/p›

Элемент ‹h1› определяет заголовок.

Он имеет начальный тег ‹h1› и конечный тег ‹/h1›.

Элемент content: Мой первый заголовок.

‹h1›Мой первый заголовок‹/h1›

Элемент ‹p› определяет абзац.

Он имеет начальный тег ‹p› и конечный тег ‹/p›.

Элемент content: Мой первый абзац.

‹p›Мой первый абзац.‹/p›

Не забудьте конечный тег

Некоторые элементы HTML будут отображаться правильно, даже если вы забудете конечный тег:

Пример

‹html›
‹тело›

‹p›Это абзац
‹p›Это абзац

‹/тело›
‹/html›

"Попробуй сам ""

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

Никогда не полагайтесь на это. Если вы забудете конечный тег, это может привести к неожиданным результатам и/или ошибкам.

Пустые HTML-элементы

Элементы HTML без содержимого называются пустыми элементами.

‹br› — пустой элемент без закрывающего тега (тег ‹br› определяет разрыв строки).

Пустые элементы можно «закрыть» в открывающем теге следующим образом: ‹br /›.

HTML5 не требует закрытия пустых элементов. Но если вам нужна более строгая проверка или если вам нужно сделать ваш документ доступным для чтения синтаксическим анализаторам XML, вы должны правильно закрыть все элементы HTML.

Используйте строчные теги

Теги HTML не чувствительны к регистру: ‹P› означает то же, что и ‹p›.

Стандарт HTML5 не требует тегов нижнего регистра, но W3C рекомендует строчные буквы в HTML и требует строчные буквы для более строгих типов документов, таких как XHTML.

В W3Schools мы всегда используем теги нижнего регистра.

Атрибуты предоставляют дополнительную информацию об элементах HTML.

HTML-атрибуты

• Все элементы HTML могут иметь атрибуты.
• Атрибуты предоставляют дополнительную информацию об элементе.
• Атрибуты всегда указываются в начальном теге.
• Атрибуты обычно представляют собой пары имя/значение, например: name="value".

Атрибут lang

Язык документа можно указать в теге ‹html›.

Язык объявляется с помощью атрибута lang.

Объявление языка важно для приложений специальных возможностей (программ чтения с экрана) и поисковых систем:

‹!DOCTYPE html›
‹html lang="en-US"›
‹body›

…

‹/тело›
‹/html›

Первые две буквы определяют язык (en). Если есть диалект, используйте еще две буквы (США).

Атрибут заголовка

Здесь к элементу ‹p› добавляется атрибут title. Значение атрибута title будет отображаться в виде всплывающей подсказки при наведении указателя мыши на абзац:

Пример

‹p title="Я всплывающая подсказка"›
Это абзац.
‹/p›

"Попробуй сам ""

Атрибут href

Ссылки HTML определяются с помощью тега ‹a›. Адрес ссылки указывается в атрибуте href:

Пример

‹a href="http://www.w3schools.com›Это ссылка‹/a›

"Попробуй сам ""

Вы узнаете больше о ссылках и теге ‹a› позже в этом руководстве.

Атрибуты размера

HTML-изображения определяются с помощью тега ‹img›.

Имя исходного файла (src) и размер изображения (ширина и высота) предоставляются в виде атрибутов:

Пример

‹img src="w3schools.jpg" ширина="104 высота="142›

"Попробуй сам ""

Размер изображения указывается в пикселях: width="104" означает ширину экрана 104 пикселя.

Вы узнаете больше об изображениях и теге ‹img› позже в этом руководстве.

Атрибут alt

Атрибут alt указывает альтернативный текст, который будет использоваться, когда изображение не может быть отображено.

Значение атрибута может быть прочитано программами чтения с экрана. Таким образом, кто-то «слушает» веб-страницу, например. слепой человек может «слышать» стихию.

Пример

‹img src="w3schools.jpg" alt="W3Schools.com" width="104 height="142›

"Попробуй сам ""

Мы предлагаем: используйте атрибуты нижнего регистра

Стандарт HTML5 не требует имен атрибутов в нижнем регистре.

Атрибут title может быть написан прописными или строчными буквами, например Title и/или TITLE.

W3C рекомендует строчные буквы в HTML и требует строчные буквы для более строгих типов документов, таких как XHTML.

В W3Schools мы всегда используем имена атрибутов в нижнем регистре.

Мы предлагаем: указывать значения атрибутов

Стандарт HTML5 не требует заключения значений атрибутов в кавычки.

Атрибут href, продемонстрированный выше, можно записать так:

Пример

‹href=http://www.w3schools.com›

"Попробуй сам ""

W3C рекомендует кавычки в HTML и требует кавычки для более строгих типов документов, таких как XHTML.

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

Пример

‹p title=О W3Schools›

"Попробуй сам ""

Использование кавычек является наиболее распространенным. Отсутствие кавычек может привести к ошибкам.
В W3Schools значения атрибутов всегда заключаются в кавычки.

Одинарные или двойные кавычки?

Двойные кавычки вокруг значений атрибутов наиболее распространены в HTML, но также можно использовать и одинарные кавычки.

В некоторых ситуациях, когда само значение атрибута содержит двойные кавычки, необходимо использовать одинарные кавычки:

‹p title=’Джон «Шотган» Нельсон’›

Или наоборот:

‹p title="Джон "Шотган" Нельсон"›

Подробнее:
Учебник по HTML 5 на телугу

В этом уроке вы узнаете об «Учебнике по HTML 5 и CSS 3 на телугу».

Создание приложений для офиса с помощью AngularJS и HTML5
☞ http://goo.gl/VYljC4

Создание приложений для Office с помощью AngularJS и HTML5
☞ http://goo.gl/ICn0pI

Разработка игр на C++ DirectX: развлечения со звуками и шейдерами
☞ http://goo.gl/DmwuNg

Введение и развертывание WebGL 3D с HTML5 и Babylon.JS
☞ http://goo.gl/HWQ3nJ