Введение в HTML

HTML (Hyper Text Markup Language) - язык гипертекстовой разметки, который используется для создания веб-страниц. Он состоит из набора структурных и семантических элементов, которые описывают, как должны быть представлены части документа (заголовки, абзацы, списки, изображения, и т.д.) в браузере.

Версии HTML

Язык HTML был разработан британским ученым Тимом Бернерсом-Ли в 1991 году. Позже начали появляется усовершенствованные версии HTML.

Версия Год
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

Основные понятия в HTML

Элементы, теги и атрибуты - основные понятия в HTML.

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

HTML теги

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

HTML теги заключаются в угловые скобки < >, к примеру <html>.

Большинство тегов в HTML парные (к примеру, <p> </p>), т.е. состоят из двух частей - открывающего (< p>) и закрывающего (< /p>) тегов.

Одиночные теги не имеют закрывающего тега. Например, одиночным является тег <img/>, который используется для определения изображения.

Рассмотрим вышесказанное на примере.

Если нам нужно обозначить в HTML документе абзац (который в HTML документе является элементом), мы используем HTML тег <p>. Содержимое абзаца мы запишем между открывающим (<p>) и закрывающим (</p>) тегами.

Пример

Абзац между двумя тегами - открывающим <p> и закрывающим </p>.

HTML атрибуты

Для того, чтобы сообщить дополнительную информацию об элементе, используются HTML атрибуты. К примеру, если мы размечаем изображение тегом < img/>, то при помощи атрибутов мы можем дополнительно сообщить браузеру адрес изображения (src), его высоту (height), ширину (width) и т.д.

Структура HTML страницы

Элемент <!DOCTYPE html> указывает на принадлежность текущего документа к определенному типу HTML. Как мы уже отмечали, существует несколько версий HTML, и для того, чтобы браузер не путался и отображал правильный стандарт, необходимо ему на него указать.

Различают несколько видов < !DOCTYPE> , для каждой версии HTML языка существует свой.

Начало и конец HTML документа обозначаются тегами <html> </html>, который сообщает браузеру информацию об HTML документе.

В теге <head> содержатся другие HTML элементы, а также предназначенные для поисковых систем метаданные (мета-заголовок, мета-описание, ключевые слова, и т.д. ). Содержимое этого тега не показывается на веб-странице, за исключением содержимого тега <title>, который устанавливает заголовок окна веб-страницы.

Заголовок веб-страницы пишется между открывающим <title> и закрывающим </title> тегами.

Элемент <body> содержит всю информацию о веб-странице (текст, изображения, видео, и т.д.). Информация записывается между открывающим <body> и закрывающим </body> тегами.

Теги заголовка <h1>-<h6> используются для обозначения заголовков разного уровня.

Всего существует 6 уровней заголовков: тег <h1> обозначает самый важный заголовок на странице (не путать с <title>, где содержится заголовок окна веб-страницы), а тег <h6> - наименее важный.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Заголовок веб-страницы</title>
 </head>
 <body>
  <h1>Самый важный заголовок на странице</h1>
   <p> Первый абзац </p>
   <h2> Второй по значимости заголовок </h2>
  </body>
</html>

Результат

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





Похожие статьи