Введение в HTML

Когда вы просматриваете веб-страницу в браузере, то видите её на самом простейшем уровне - просто текст. Но редко можно увидеть веб-страницу,  содержащую только обычный текст. Текст веб-страницы обычно стилизован определённым образом. В современных реалиях веб-дизайнеры имеют доступ к сотням различных шрифтов различных размеров, цветов и даже алфавитов (например, испанский, японский, русский), а браузеры могут точно отображать большинство из них. Веб-страницы могут также содержать изображения, видеоклипы и фоновую музыку. Они могут включать выпадающие меню, поля для поиска, активные ссылки на продукты или другие страницы этого же веб-сайта, а также ссылки на внешние ресурсы. Некоторые веб-сайты даже поддерживают опции для настройки отображения веб-страницы согласно предпочтениям пользователя или физиологическим ограничениям, таким как плохое зрение, глухота или дальтонизм. Часто веб-страница может содержать подвижный контент, который перемещается (пролистывается), в то время как остальная часть веб-страницы остаётся неподвижной.

Некоторые технологии (такие как CSS, JavaScript, Flash, AJAX, JSON) могут использоваться для определения элементов веб-страницы. Тем не менее, на самом базовом уровне, веб-страница создаётся с использованием HTML - (языка гипертекстовой разметки). Без HTML невозможно создать веб-страницу. HTML - это то, что обрабатывает браузер для представления страницы на компьютере клиента.

Международные стандарты и спецификации HTML поддерживаются консорциумом World Wide Web (W3C) и  рабочей группой Web Hypertext Application Technology Working Group (WHATWG). Если WHATWG рассматривает HTML как "живой стандарт", который постоянно развивается, то W3C работает с разными версиями HTML, наиболее свежая из которых это HTML5, и над следующей версией HTML (HTML 5.2).

Спецификация HTML определяет язык разметки, но есть две основные версии синтаксиса, свободный HTML и строгий XML (Расширенный язык разметки), которые имеют определённые отличия. HTML не описывает стилизацию или форматирование контента, его назначение, а только сам контент и его значение.

Создатель веб-страницы может воспользоваться CSS, чтобы определить внешний вид и размещение текста, а также других материалов. В современной индустрии веб-разработки считается хорошим тоном использование CSS вместо явного указания стилей в коде HTML.

Это статья - введение в HTML. Если вам любопытно узнать, что же происходит внутри вашего веб браузера, то это лучшее место, чтобы начать обучение.

Краткое описание истории HTML

В конце 1980х Тим Бернерс Ли работал физиком в ЦЕРН (Европейская организация по ядерным исследованиям). Он придумал способ, с помощью которого ученые смогли совместно пользоваться документами через интернет. До этого изобретения связь через интернет была ограничена простым текстом,  с помощью форумов Usenet. Изобретение HTML основано на модели клиент-сервер, когда контент хранится на центральном сервере и может передаваться для отображения в браузере, запущенном на другой рабочей станции. Это сильно упростило доступ к информации и позволило отображать более сложный и функциональный контент (например, сложное форматирование текста и изображений).

Что означает HTML?

HTML это язык разметки. С его помощью браузер знает как отобразить веб-страницу. HTML отделяет "контент" (слова, изображения, аудио, видео и т.д.) от "представления" (определения типа контента и правила как должен отображаться контент такого типа). HTML использует предопределённый набор 'элементов. Элементы могут либо иметь вложенную структуру и содержать другие элементы, либо содержать контент. Элементы определяются "тегами" которые всегда окружены угловыми скобками. Большинство тегов идёт парами - открывающий и закрывающий теги,  и закрывающий всегда имеет слэш-символ перед именем тега.

Например, элемент параграф состоит из открывающего тега "<p>" и закрывающего тега "</p>". Следующий пример показывает параграф заключённый внутри HTML-элемента параграф:

<p>You are beginning to learn HTML.</p>

Содержимое этого примера отобразится в веб браузере следующим образом:

Браузер использует теги как индикаторы, которые указывают как отображать содержимое тегов.

Элементы, которые содержат контент, обычно могут заключать в себя и другие элементы. Например, элемент выделения "<em>" (обычно отображается курсивом с целью выделить текст из общего потока), может быть встроенным в элемент параграф "<p>", чтобы выделить отдельное слово или фразу:

<p>You are <em>beginning </em> to learn HTML.</p>

В веб-браузере это будет выглядеть следующим образом:

Некоторые элементы не содержат других элементов. Например, в теге изображения ("<img>") в аттрибуте указывается имя файла содержащего изображение:

<img src="smileyface.jpg" alt="Smiley face" >

Часто символ слэш ставится перед закрывающей угловой скобкой если элемент пустой, чтобы обозначить закрывающий тег в XHTML (это XML схема, которая реализует элементы HTML).

Оставшаяся часть статьи содержит более подробную информацию приведённую в этой секции. Если Вам хочется увидеть HTML в действии, перейдите в Mozilla Thimble. Mozilla Thimble это интерактивный онлайн редактор, который поможет Вам изучить HTML. Также Вы можете просмотреть список доступных HTML-элементов, их описание и принцип действия.

Элементы — базовые строительные блоки

HTML состоит из набора элементов. Элементы определяют семантическое обозначение их содержимого. Элементы включают в себя всё, что находится между парными тегами элемента, включая сами теги. Например, элемент "<p>" обозначает параграф; элемент "<img>" обозначает изображение. Здесь можно просмотреть полный список HTML-элементов.

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

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

<html>
  <body>
    <p> you are in your beginning stage of HTML</p>
  </body>
</html>

Вы можете видеть, что элемент <html> полностью окружает весь документ, а элемент <body> окружает содержимое веб-страницы. Такую структуру часто представляют как дерево с ветвями (в нашем случае, элементы <body> и <p> растут от ствола <html>). Такая иерархическая структура называется DOM: Document Object Model.

Теги

HTML документы представляют собой обыкновенный текст. Они могут быть написаны в любом текстовом редакторе, который позволяет сохранять содержимое как простой текст, например Notepad, Notepad++ или Sublime, но большая часть веб-разработчиков предпочитает использовать специализированные редакторы, которые подсвечивают синтаксис и показывают DOM. Теги могут быть написаны как в верхнем регистре так и в нижнем, но W3C (глобальный консорциум, который занимается поддержкой HTML-стандарта) рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).

В HTML любой текст, который начинается со знака менее-чем ("<") и заканчивается перед знаком более чем (">"), имеет особый смысл.  Такая разметка называется тег. Всегда закрывайте теги, так как хотя некоторые элементы не требуют закрывающего тега, то для других он обязателен, и его отсуствие может приводить к непредсказуемым ошибкам, если вы забудете поставить его.

Простой пример:

<p>This is text within a paragraph.</p>

В приведённом примере есть открывающий тег и закрывающий тег. Закрывающий тег такой же как и открывающий с одним отличием, он содержит символ слэш сразу после знака менее-чем "</p>". Большинство элементов в HTML требуют оба, и закрывающий и открывающий теги. Открывающие и закрывающие теги требуют правильного, иерархического вложения - закрывающие теги должны идти в обратном порядке по отношению к открывающим. Правильный порядок вложения тегов следует соблюдать, чтобы писать валидный html-код.

Далее пример валидного  кода:

<em>I <strong>really</strong> mean that</em>.

А здесь приведён пример неверного вложения тегов:

Invalid: <em>I <strong>really</em> mean that</strong>.

Заметьте, что в валидном примере закрывающий тег вложенного элемента расположен перед закрывающим тегом элемента, в который он вложен.

Некоторые элементы не содержат текста или других вложенных элементов. Это пустые элементы, которым не нужен закрывающий тег. Например:

<img src="smileyface.jpg" alt="Smiley face">

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

<img src="smileyface.jpg" alt="Smiley face" />

В HTML этот слэш имеет значение, которое не реализовано в Firefox и поэтому не должен использоваться. Пустые элементы не должны закрываться в режиме HTML.

Атрибуты

Открывающий тег может содержать дополнительную информацию, как в примере выше. Такая информация называется аттрибутом. Аттрибуты обычно состоят из 2 частей:

• имя аттрибута
• значение аттрибута

Некоторые аттрибуты могут иметь только одно значение. Это Boolean аттрибуты имеющие сокращённый синтаксис. Такой аттрибут можно определить указав только имя аттрибута или оставить его значение пустым. Таким образом, следующие 3 примера имеют одинаковое значение:

<input required="required">

<input required="">

<input required>

Если значение аттрибута состоит из одного слова или цифры, то можно прямо прописать значение аттрибута не окружая значение в кавычки, но если значение аттрибута содержит более одного набора символов разделённых пробелом, то нужно окружить значение в кавычки. Допускаются как одинарные (') так и двойные (") кавычки. Многие веб-разработчики предпочитают всегда использовать кавычки, чтобы избежать двухсмысленности в коде и не допустить случайно ошибку. Например, в следующем коде демонстрируется ошибка такого рода:

<p class=foo bar> (Осторожно, возможно этот код совсем не то что вы ожидаете.)

В этом примере предполагалось, что значение аттрибута  class будет "foo bar", но так как оно не было завёрнуто в кавычки, то при парсинге этот код будет обработан, как если бы его написали следующим образом:

<p class="foo" bar="">

Спецсимволы

Спецсимволы используются, чтобы отобразить символы, которые имеют особое значение в HTML. Например, в HTML символы меньше чем и больше чем используются для обозначение тегов, поэтому если Вам нужно отобразить эти символы в тексте, то воспользуйтесь замещающими спецсимволами. Далее список часто используемых 4 общих спецсимволов, которые нужно знать:

• > обозначает знак больше чем (>)
• < обозначает знак менее чем (<)
• & обозначает знак амперсанда (&)
• " обозначает знак двойных кавычек (")

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

Doctype и комментарии

В добавок к тегам, текстовому контенту и спецсимволам, HTML документ должен содержать объявление doctype на самой первой строчке. Объявление doctype это не тег HTML, это инструкция для веб-браузера о том, на какой версии HTML написана страница.

В HTML 4.01 doctype ссылается на DTD (Document Type Definition) основанном на SGML. Есть 3 разных типа doctype в HTML 4.01.

HTML 4.01 Strict

Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также не допускается использование frameset (фреймов).

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

HTML 4.01 Transitional

Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.

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

HTML 4.01 Frameset

Этот DTD аналогичен HTML 4.01 Transitional, но допускает использование frameset (фреймов).

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

В HTML5 есть только один doctype и определяется он следующим образом:

<!DOCTYPE html>

Doctype имеет долгую и запутанную историю, но всё, что Вам нужно знать это то, что doctype указывает браузеру интерпретировать HTML и CSS код в соответствии со стандартами W3C и не пробовать "маскироваться" под Internet Explorer из 90х. (Подробнее quirks mode.)

HTML имеет возможность встроить комментарии, которые не будут отражаться на странице в браузере. Это позволяет вставить объяснение к блоку разметки, или оставить заметку для других разработчиков, которые будут работать над этой страницей, или просто поставить заметку для себя. HTML-комментарии определяются следующим образом:

<!-- This is comment text -->

Минимальный html-документ

Теперь сложим всё вместе и приведём пример простого  HTML документа. Вы можете скопировать этот код в текстовый редактор, сохранить как myfirstdoc.html, и загрузить его в браузер. Убедитесь, что Вы сохранили его в кодировке UTF-8. Так как этот документ не содержит стилей, то он будет выглядеть просто и являться лишь стартом для создания более сложных и красиво оформленных документов

<!DOCTYPE html>
<html lang="en">
<head>
  <title>A RMScreenprint</title>
</head>
<body>
  <h1>Main heading in my document</h1>
  <!-- Note that it is "h" + "1", not "h" + the letters "one" -->
  <p>Look Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>