7 октября 2019 г.
Время чтения: 2 минуты

Знакомимся с языком разметки 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.

Доменная зона .dev — новое пространство для айтишников

Почему это так важно — продлевать домены вовремя

Рекомендуем

Домен .SALE: как купить его за 790 ₽ и для каких сайтов использовать

Защита PHP-сайта: зачем подключать услугу «Антивирус для PHP-сайтов» на хостинге

Нашли ошибку в тексте? Выделите ее и нажмите Ctrl + Enter
© Джино, 2003–2024. «Джино» является зарегистрированным товарным знаком.
Лицензия на телематические услуги связи № 150549 от 09.03.2017.
Правовая информация Политика конфиденциальности Карта сайта