HTML

HTML — это язык разметки гипертекстовых документов. Он нужен, чтобы отображать в браузере специальным образом отформатированный документ с множеством вложенных элементов: заголовками, абзацами, списками, гиперссылками, медиаисточниками, расположением изображений, видео и аудио.

Возможности HTML

HTML-документ можно составлять в любом редакторе, который есть в операционной системе: Notepad на MS Windows, TextEdit в Mac, Pico на Linux. Браузер для работы HTML–документа желателен, но необязателен. Он нужен для того, чтобы показать отформатированный документ.

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

Что такое теги

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

Тег выглядит как набор символов, заключенный в угловые скобки. Символы в скобках обозначают имя тега, которое описывает его функции. Вот несколько примеров:

  • <h1> </h1> — заголовок;
  • <p> </p> — абзац;
  • <i> </i> — курсив.

Тег – это составной элемент, определяющий разметку структурных блоков. Он открывается, и этим начинает свое действие; и закрывается, обозначая завершение команды. Закрытые и открытые теги различаются только слешем перед именем тега. Эти теги создают оболочку, в которую помещается текст.

Именно незакрытые теги приводят к частым ошибкам и некорректным отображениям страницы. Для наглядности представим, что теги – это матрешки, из которых можно собрать набор. Складывая в большую матрешку все фигурки важно не забывать закрывать все половинки (ставить закрывающие теги), иначе игрушка не получится.

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

Есть теги, которые нет необходимости закрывать. Пример: тег переноса строки <br> — он одиночный и закрывать его не нужно. Раньше одиночные теги писались с закрывающим слэшем перед закрывающей скобкой. Например: <br />. В стандарте HTML5 использование закрывающего слеша в одиночных тегах необязательно. Примеры одиночных тегов: <br>, <hr>, <img>.

Помимо атрибутов в тег можно добавлять вложения, эти элементы могут менять стиль текста. Например, можно выделить какое-то слово <strong>жирным</strong> шрифтом.

Как это выглядит

<!DOCTYPE html>

<html>

<head>

<title>Привет, SkillFactory</title>

</head>

<body>

<img src=» https://static.tildacdn.com/tild6565-6361-4831-a664-366538616534/SF_MRG_logo_new.svg«>

</body>

</html>

<!DOCTYPE html> –предназначается для указания типа документа, так как браузер может интерпретировать разные версии HTML (например, EXtensible HyperText Markup Language, расширенный язык разметки гипертекста). По умолчанию его всегда включают в начало страницы.

<html> </html> – сообщает браузеру, что это за HTML-документ. Этот тег хранит в себе остальные теги.

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

<body> </body> – тело документа, в котором находятся все видимые пользователю элементы.

<title> </title> – заголовок веб-страницы. Именно его браузер загрузит как название, а при сохранении страницы в избранное он использует эту фразу как описание закладки.

<img> – помещает изображение в нужное место. Обычно к нему добавляют атрибут src, в котором содержится путь к этому изображению. Атрибуты width, height определяют ширину и высоту изображения в пикселях.

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

Курс

Frontend-разработчик

Получите перспективную и творческую профессию, изучив HTML, JavaScript и CSS. Дополнительная скидка 5% по промокоду BLOG.

Узнать больше

Заголовки

В HTML бывает шесть уровней заголовков: <h1> – <h6>.

<h1>Привет, SkillFactory</h1>

<h2>Расскажешь</h2>

<h3>Какие бывают</h3>

<h4>Уровни заголовка</h4>

Заголовок типа <h1> используют обычно один раз, потому что он основной.

Абзац

Как и на обычном письме, делит текст по смыслу.

<p>Спасибо, SkillFactory, всё понятно. Давай дальше</p>

Списки

Самые распространенные типы списков нумерованные и ненумерованные.

Ненумерованные или маркированные списки добавляются тегом <ul></ul>. Такие списки применяются когда нам не важна последовательность их элементов.

В нумерованном списке, где пункты расположены в определенном порядке, используется тег <ol></ol>.

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

Тест

IT-рентген: Какая вам нужна профессия?

Пройдите тест, изучите карту IT-профессий и выберите подходящее вам направление

Узнать

Является ли HTML языком программирования?

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

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

« ВСЕ ТЕРМИНЫ

Какие курсы вам подходят

Профессия «Frontend-разработчик»

От 8570 Р/мес

7 мес

Подробнее о курсе
Блог SkillFactory
Добавить комментарий