Введение в HTML

HTML довольно прост в изучении, но является чрезвычайно важным элементом веб-разработки, т.к. фактически лежит в основе любой страницы в Интернете. Без него не обходится ни один сайт! Кроме того, HTML является фундаментом для целого ряда других важнейших технологий создания сайтов, таких как, например, каскадные таблицы стилей (СSS), используемые для визуального оформления сайтов, и язык программирования JavaScript, применяемый для создания динамических, т.е. изменяемых, страниц.

Язык гипертекстовой разметки развивается на основе стандартов, разрабатываемых Консорциумом Всемирной паутины (W3C) и сообществом WHATWG. Эти стандарты устанавливают правила разметки языка, вводят новые элементы и выводят устаревшие, сохраняя при этом обратную совместимость, т.е. поддержку устаревших элементов в новых версиях HTML. Текущая версия стандарта языка гипертекстовой разметки, рекомендованная к использованию разработчикам программного обеспечения и веб-мастерам — это пятая версия, сокращенно HTML5. Изучением этой версии мы и займемся в рамках данного курса.

HTML-редакторы

Для создания HTML-разметки подходит практически любой текстовый редактор, в том числе самый обыкновенный Блокнот в системе Windows, но лучше, конечно, сразу начать использовать один из множества профессиональных редакторов, таких как, например, NotePad++, Sublime Text 2, Dreamweaver, HomeSite или CoffeeCup HTML Editor.

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

Среди вышеперечисленных программ особенно хотелось бы выделить довольно мощный и популярный редактор с открытым исходным кодом NotePad++, который можно бесплатно скачать с официального сайта программы notepad-plus-plus.org.

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

В дальнейших уроках данного курса многие примеры на языке HTML будут приведены именно в редакторе NotePad++. При этом мы обратим внимание на некоторые наиболее важные и интересные возможности редактора.

Смело рекомендуем NotePad++ начинающим веб-разработчикам.

HTML-теги

Перейдем непосредственно к изучению синтаксиса HTML. Основными элементами языка гипертекстовой разметки являются теги. Они разграничивают все материалы веб-страницы на части и определяют их как параграфы, цитаты, списки, таблицы и т.д. Например, для того, чтобы обозначить с помощью языка гипертекстовой разметки абзац текста достаточно поместить его в тег <p> (от английского «paragraph» – «абзац»). На языке HTML эта запись будет выглядеть следующим образом:

<p>
  Это абзац текста.
</p>

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

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

Пример простейшего HTML-документа

Теперь для более детального знакомства с языком гипертекстовой разметки перейдем к разбору простейшего HTML-документа.

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок веб-страницы</title>
    <meta name="keywords" content="HTML, теги, веб-страница" />
  </head>
  <body>
    <h1>Заголовок</h1>
    <!-- Это пример комментария -->
    <p>Это абзац текста со ссылкой 
      <a href="http://www.w3.org/">на другую страницу</a>.</p>
  </body>
</html>

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

Далее идет корневой элемент веб-страницы - тег <html>, который определяет границы HTML-документа и содержит все прочие элементы разметки. Обратите внимание, редактор NotePad++ подсвечивает открывающий и закрывающий теги при размещении курсора мыши на одном из них. Это довольно удобно.

На следующем уровне разметки страницы, т.е. внутри тега <html>, присутствуют теги <head> и <body>. В теге <head> (от английского "голова") размещена скрытая часть страницы, которую еще называют «метаданные», а видимая часть страницы заключена в тело документа, т.е. тег <body>.

В данном примере в разделе метаданных документа, т.е. в теге <head>, присутствуют два других тега - это <title> и <meta>. Тег <title>, от английского "название", "заглавие", содержит заголовок документа, который не отображается на самой странице, но выводится в качестве названия вкладки в браузере. Также содержимое именно этого тега выводится в качестве ссылки в результатах поиска наиболее популярных поисковых систем. Поэтому тег <title> является чрезвычайно важным с точки зрения продвижения сайтов в поисковых системах.

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

С этим тегом мы впервые сталкиваемся с таким понятием как атрибуты тегов.

Атрибуты тегов

Атрибуты введены в HTML для уточнения и расширения значения тегов. Они размещаются сразу после названия открывающего тега в его угловых скобках. Сначала идет название атрибута, затем символ «равно» и далее значение атрибута в одинарных или двойных кавычках. У одного тега может быть сразу несколько атрибутов, причем порядок их следования значения не имеет и на результате отображения страницы не сказывается.

Пример простейшего HTML-документа

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

Первый тег, который размещается в видимой части документа, т.е. в теге <body> – это тег <h1>, от английского "Header 1", т.е. заголовок первого уровня. Вообще существует шесть тегов для выделения заголовков различной степени важности: от <h1> до <h6>. Они указывают на относительную значимость следующего за заголовком текста. Среди них тег <h1> является наиболее, а <h6> наименее значимым. Тег <h1> используется практически на всех веб-страницах всех сайтов. Как правило, его применяют для вывода на экран заголовка страницы. Наряду с тегом <title>, данный тег чрезвычайно важен с точки зрения продвижения сайтов в поисковых системах.

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

Далее в нашем примере мы вновь сталкиваемся с тегом <p>, который размечает абзац текста. Однако, в отличие от предыдущего примера, помимо обычного текста, этот абзац содержит еще гиперссылку, создаваемую тегом a (от английского «anchor» – «якорь»). Адрес страницы, на которую необходимо перенаправить пользователя при клике на данную ссылку, указывается в атрибуте href. Еще раз обратите внимание на синтаксис добавления атрибута: сначала идет название атрибута href, затем знак равенства и адрес ссылки в кавычках.

Теперь пришло время сохранить данный HTML-документ и посмотреть как он будет отображаться в браузере. Для этого необходимо выполнить в редакторе команду «Файл / Сохранить как...», выбрать место размещения страницы на диске, задать название файла и указать в качестве его расширения html или htm. Это, кстати, типичные расширения для веб-страниц, с которыми, они, как правило, без проблем открываются в браузере при двойном клике.

Итак, веб-страница сохранена. Теперь найдем ее на компьютере и откроем двойным кликом по имени файла.

Страница загрузилась в браузере, и мы видим на экране заголовок из тега <h1>, текст со ссылкой из тега <p> и содержимое тега <title> в качестве названия вкладки.

Древовидная структура HTML

В заключение еще раз обратим внимание на структуру HTML-документов, которая представляет собой дерево из тегов и текста. Корневой элемент веб-страницы — тег <html>. На втором уровне — теги <head> и <body>. Далее, на третьем уровне — теги <title>, <meta>, <h1>, <p>, и так далее.

На этом вводный урок по языку гипертекстовой разметки подошел к концу. Успехов вам в изучении новых компьютерных технологий.

HTML - это компьютерный язык для создания сайтов в Интернете. Сокращение HTML происходит от английского «HyperText Markup Language», что дословно переводится как «язык гипертекстовой разметки». Гипертекстом называются страницы в Интернете, по которым посредством гиперссылок могут перемещаться пользователи. Таким образом, язык гипертекстовой разметки - это язык разметки страниц в Интернете.