2. HTML — Введение в язык: теги для создания html-документа и его структура

HTML — расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.

  • Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
  • Как следует из названия, HTML — это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.

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

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

HTML-документ

В следующем примере показан HTML-документ в простейшей форме:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Здесь содержание документа...</p>
  </body>
</html>

Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:

Пример html-документа

Теги для создания HTML-документа

Как уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки <Имя тега>. Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег <html> имеет закрывающий тег </html> и тег <body> имеет тег закрытия </body> и другие.

В приведенном выше примере используются следующие теги для создания HTML-документа:

ТегОписание
<!DOCTYPE...>Этот тег определяет тип документа и версию HTML.
<html>Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами <head>...</head> и телом документа, которое представлено тегами <body>...</body>.
<head>Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как <title>, <link> и т.д.
<title>Тег <title> используется внутри тега <head>, чтобы указать название документа.
<body>Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как <h1>, <div>, <p> и другие.
<h1>Этот тег представляет заголовок.
<p>Этот тег представляет абзац.

Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).

Чтобы изучить HTML, Вам нужно знать различные теги и понимать, как они ведут себя при форматировании текстового документа. Учить HTML легко, так как пользователям нужно только выучить использование разных тегов, чтобы отформатировать текст или изображения, тем самым сделать красивую веб-страницу.

Консорциум World Wide Web (W3C) рекомендует использовать строчные теги, начиная с HTML 4.

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

Структура типичного HTML-документа будет иметь следующий вид:

Тег декларации документа
<html>
  <head>
    <title>Теги, связанные с заголовком документа</title>
  </head>
  <body>
    Теги, связанные с телом документа
  </body>
</html>

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

Декларация <!DOCTYPE>

Тег декларация <!DOCTYPE> используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML — 5, и она использует следующее объявление:

<!DOCTYPE html>

Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега <!DOCTYPE...> вместе с другими тегами HTML.

Поделитесь:

О сайте

Все материалы сайта proglang.su являются результатом труда его авторов. Копирование материалов в некоммерческих целях без указания источника в виде прямой ссылки на сайт proglang.su запрещено. Использование материалов в коммерческих целях разрешено только с письменного согласия автора. Нарушение авторских прав преследуется по закону. Мы это делаем, чтобы защитить плоды своих трудов от воровства. © 2014-2017

Присоединяйтесь