Основы HTML (для начинающих)
HTML (Hypertext Markup Language) - это язык гипертекстовой разметки. Он передаёт браузеру информацию о том, как необходимо отобразить тот или иной элемент на веб-странице.
Знание HTML является обязательным не только для веб-разработчиков и дизайнеров, но также всегда может пригодиться для смежных областей - например, в интернет-маркетинге и даже в no-code разработке.
Основы HTML
HTML представляет собой текстовый документ с расширением .html. Его можно создать как в специализированных редакторах (WebStorm, Visual Studio Code, Notepad++ и т.д.), так и в самом простом текстовом редакторе ”Блокнот”.
В HTML нет переменных, функций, операторов и т.д., поэтому его нельзя отнести к полноценным языкам программирования.
HTML состоит из 2х компонентов:
- дерева элементов;
- содержания.
Каждый HTML-элемент обозначается с помощью тегов - это специальные знаки, состоящие из угловых скобок (<>). Бывают открывающие <> и закрывающие </> теги.
По сути, теги - это команды, передаваемые браузеру, которые затем обрабатываются и преобразуются им в визуальные объекты веб-страницы.
Между <> и </> находится содержание элемента страницы. Это может быть картинка, текст, заголовок и т.д.
Например:
<p>Какое-то содержание</p>В данном примере теги <p> и </p> отвечают за разметку абзацев (от англ. “paragraph”). Таким образом, браузер распознает, что здесь должен быть параграф с нашим текстом, указанным между открывающим и закрывающим тегами.
Теги также могут быть одиночными. В них содержание не хранится напрямую, а устанавливается в виде значения атрибута. К примеру, такой код:
<input type="button" value="Узнать больше"/>
создаст кнопку с текстом “Узнать больше” внутри.
Как говорилось выше, теги могут быть вписаны один в другой. Например:
<p><em>Какой-то текст</em></p>Здесь тег <p> даёт команду расположить текст отдельным абзацем, а тег <em> - отобразить текст в данном абзаце курсивным начертанием.
При вложении тегов друг в друга следует придерживаться правил их корректного закрытия. Например, вот такая запись работать не будет:
<p><em>Ваш текст</p></em>.
Виды HTML-элементов
HTML-элементы бывают двух видов:
- блочные;
- строчные.
Блочные элементы
Блочные элементы занимают всю доступную ширину, а высота элемента зависит от его содержимого. Такие элементы всегда начинается с новой строки и могут быть использованы в другом блочном элементе. Например:
<h1> - используется для главных заголовков страниц;
<h2> по <h6> - подзаголовки;
<p> - текстовый абзац;
<ul> - маркированный список;
<ol> - нумерованный список;
<blockquote> - выделяет цитаты внутри документа;
<div> - элемент разделения содержимого (используется для его группировки).
Строчные элементы
Строчные элементы занимают пространство, ограниченное тегами. То есть они входят в состав других элементов страницы. Например, это может быть абзац или заголовок.
В основном строчные элементы используются для изменения визуального отображения текста или его выделения. Пример таких тегов:
<a> - создаёт ссылки;
<i> - делает шрифт курсивным;
<input> - создаёт различные элементы интерфейса;
<span> - аналогично тегу <div>, используется для группировки элементов;
<strong> - выделяет текст жирным начертанием;
<em> - создаёт акцентированный текст (как правило, отображается в виде курсива).
В отличие от блочных, в строчных элементах их ширина определяется объемом контента. Также эти элементы не начинаются с новой строки.
Строчные элементы допускается размещать внутри как блочных, так и других строчных элементов. А вот блочные элементы внутри строчных размещать запрещено.
HTML-атрибуты
HTML-теги могут содержать атрибуты - они состоят из имени и значения, и находятся в открывающем теге в таком формате:
name="value" - id="button" Специальные значения, которые управляют элементами и их поведением, и называются атрибутами.
Атрибуты задают свойства и устанавливают поведение соответствующего тега. Они бывают глобальными - в этом случае они используются любым из элементов, например: id (определяет уникальное имя элемента), class (стилизация элементов посредством CSS).
Каждому тегу может соответствовать несколько значений class, но лишь один уникальный id. Например:
<div class=”content”> Какое-то содержимое </div>
<p id=”paragraph”> Какое-то содержимое абзаца </p>
В значениях id и class разрешено использовать только буквы, цифры, нижние подчёркивания и дефисы. Однако, начинаться они могут только с букв или цифр. Если одновременно используется несколько значений class, то они разделяются пробелом.
Документ HTML состоит из двух разделов:
заголовок (<head>);
содержимое (<body>).
Оба раздела “обёрнуты” в корневой тег <html>. Корневой элемент <html> образует дерево документа, или по-другому - DOM (document object model, с англ. - объектная модель документа). DOM связывает страницу с языками описания сценариев или программирования.
Правила, которым придерживается HTML, находятся в файле описания типа документа (Document Type Definition, или DTD). За правильное отображение веб-страницы отвечает элемент <!DOCTYPE>. Он определяет версию HTML (например, для привязки к HTML5 нужно указать: <!DOCTYPE html>) и ассоциирует страницу с нужным DTD-файлом.
Чтобы ассоциативно представить правильное расположение тегов, можно представить тело человека:
HTML - оболочка, в которой находятся все элементы.
<html>
*
*
*
</html>
Head - голова . В теге <head> содержатся данные о странице: описание, ключевые слова для поиска, заголовок, подключаемые внешние файлы. Эта информация не видна посетителю страницы. Но эти данные передают браузеру информацию о том, как нужно обрабатывать страницу.
Body - тело. В <body> располагается весь отображаемый контент документа.
Теперь более подробно. Как видим из рисунка выше, в теге <head> мы можем указывать различные элементы, содержащие данные о нашей HTML-странице, например <title>, <link>, <meta>, <style> и др.
Пример:
<title> Заголовок документа </title>
Тег <title> содержит в себе текст заголовка. Он может состоять только из текста и игнорирует любые иные элементы. Рекомендуется, чтобы заголовок был длиной не более 60 символов, иначе часть текста может потеряться в сниппете поисковой выдачи.
<style> Стили CSS </style> - тег <style> определяет стили веб-страницы. В HTML-документе они задаются с использованием CSS. Тегов <style> может быть несколько на странице.
Пример:
<style>
h1.h2{
font-family:sans-serif;
color:gray;}
</style>
Этот вариант хоть и рабочий, но использовать его нежелательно, т.к. он уже устарел.
Наиболее оптимальным спобобом установки стилей является их запись в файл с расширением .css (например, style.css). И затем этот файл можно подключить к HTML-странице с помощью элемента <link/>:
<link rel="stylesheet" href="/style.CSS">
Данный способ подключения стилей является актуальным на сегодняшний день.
<meta> - этот тег содержит метаданные (дополнительные данные) о веб-странице. Пользователь не видит их на странице, но они выполняют множество важных функций: сообщают поисковым системам информацию о странице, устанавливают срок действия веб-страницы, предотвращают кэширование браузером страницы и т.д. Информация в теге <meta> передаётся с использованием атрибутов.
Резюмируя вышесказанное, можем написать несложную веб-страницу:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html">
<title>Заголовок нашей страницы</title>
<link rel="stylesheet" href="/style.CSS">
</head>
<body>
<div class=container>
<p class="content">Возможно, это ваша первая HTML-страница</p>
</div>
</body>
</html>
Теперь вы можете попробовать написать этот код сами или скопировать его в любой редактор кода, сохранить в формате HTML (например, создав файл index.html) и затем открыть в браузере. Вот что у вас должно получиться:
Как видите, в данном примере стили у нас не подключились. Как мы уже говорили, для них нужно создать файл с расширением .css (style.css или с любым другим именем) и задать в нём стили для разных элементов.
В завершение можно сказать, что язык HTML является очень важным и неотъемлемым инструментом веб-дизайна и разработки. Вместе с CSS и JavaScript эти три технологии являются основой в создании полностью функциональных сайтов и приложений.
