Знакомимся с языком разметки HTML
Без него вы бы вряд ли смогли просматривать наш «Джино.Журнал» или любой другой сайт. HTML — специальный язык, который формирует «скелет» страниц большинства сайтов в интернете.
Да, HTML является языком, но не языком программирования, а языком разметки. Это значит, что с помощью него не получится выполнить логические операции, а его предназначение — размечать элементы на веб-странице. Другими словами, благодаря HTML браузерам становится понятно, где на странице сайта находится заголовок и подзаголовки, блоки текста, списки, картинки и другого рода содержимое.
Элементы страницы в HTML помечаются словами или буквами, заключёнными в угловые скобки — их называют дескриптерами или попросту тегами. При анализе веб-страницы браузер считывает все теги и представляет её нужным образом на экране пользователя. Однако HTML отвечает только за расположение элементов, а создание дизайна страницы в задачи этого языка уже не входит.
Рассмотрим простой пример кода HTML-документа:
<!DOCTYPE html>
<html>
<head>
<title>Пример веб-страницы</title>
</head>
<body>
<h3>Подзаголовок</h3>
<p>Абзац 1</p>
<p><strong>Абзац 2</strong></p>
</body>
</html>
Обязательными тегами для документов в HTML являются <!DOCTYPE html>, <html> / </html>, <head> / </head> и <body> / </body>, причём они всегда идут в том порядке, в каком показано здесь. Между дескриптерами <head> и </head> размещается информация, которая не показывается на самой странице, а между <body> и </body> — как раз то, что мы видим, открывая сайт. Поэтому на странице с таким кодом мы бы увидели это:
Подзаголовок
Абзац 1
Абзац 2
Вид содержимого обозначается другими разными тегами. К примеру, в этом случае мы оформили подзаголовок с помощью дескриптеров <h3> и </h3>, а вторую строчку в тексте выделили полужирным с помощью <strong> и </strong>. Как вы наверняка уже успели заметить, теги в HTML в основном являются двойными и окружают с двух сторон ту часть контента, к которой они должны быть применены.
Код выше можно оформить в отдельный файл с расширением .html и затем открыть его в любом браузере. А вставив внутри одного HTML-документа ссылки на другие такие же документы, можно создать прообраз сайта.
Кроме самих тегов, для оформления веб-страниц используются атрибуты, они же — аргументы. С помощью указания тех или иных значений атрибуты могут вносить изменения в тег. Например, с помощью них можно выровнять текст либо картинку по краю или по центру. Тег с артибутами выглядит так:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Создавать HTML-код можно в любом текстовом редакторе, однако это часто занимает много времени, особенно у тех, кто только начинает осваивать язык. Большой популярностью пользуются специальные HTML-редакторы, где процесс написания упрощается засчёт автоматических действий и других полезных функций. В качестве примера можно привести редакторы Notepad++ и Brackets, но есть несколько других бесплатных и платных альтернатив.
Для чего вам может пригодиться знание HTML?
-
Это поможет в создании своего самописного сайта. Если вы решили отказаться от использования CMS, конструкторов и генераторов статических сайтов, то освоить HTML будет, безусловно, необходимо.
-
Если вы администрируете сайт на CMS, то HTML вам тоже может пригодиться. Не все возможности можно реализовать с помощью плагинов и прочих готовых решений, поэтому в особых случаях придётся иметь дело с изменением самого кода сайта.
-
HTML в целом пригождается там, где есть веб-интерфейс — и речь может идти о работе не только с сайтами, но и с приложениями.
-
Составление текста писем в рассылках по электронной почте также зачастую требует знания HTML.