Что такое HTML и для чего он нужен?
HTML (от английского HyperText Markup Language) — это язык разметки гипертекста, который используется для создания веб-страниц. С его помощью можно структурировать текст, изображения, ссылки и другие элементы, которые затем отображаются в браузере.
Смысл HTML в том, чтобы дать браузеру информацию о том, как должна выглядеть веб-страница и какой контент на ней должен быть представлен. HTML позволяет добавлять заголовки, абзацы, изображения, таблицы и многое другое.
Этот язык является одним из первых языков для написания сайтов, и является самым простым в освоении и применении. Освоить его азы и написать на нем свой простенький сайт сможет каждый, кто умеет пользоваться компьютером, на освоение всех основ уйдет времени не больше чем я писал данную статью.
История зарождения и развития html
Прототипом HTML считается язык структурирования документов SGML или по стандарту ISO-8879, который возник в 1986 году с целью создания документов логически структурированных и скомпонованных для понятного вывода их на печать.
Уже в 1991 году после возникновения гипертекстовых документов во всемирной паутине этот язык приняли за первую версию HTML. В дальнейшем язык только развивался таким образом, чтобы украсить текс выводимый из интернета на экран монитора и сделать его просмотр более приятным и удобным.
Так в 1993 году появилась версия 1.2, которая содержала около 40 тегов.
В 1995 году появилась версия 2.0, в которой язык был разбит на четыре уровня, для обеспечения совместимости языка с другими версиями. И только с версией 3.2 разработанной в 1995 году язык HTML стал более подобен сегодняшнему.
Уже в 1997 году была разработана следующая версия 4.0, которая позволила создавать страницы, которые содержали в себе графические изображения, таблицы и фреймы.
В 1999 году появилась версия 4.01, которой до сих пор пользуются, ну если быть точнее то она еще встречается на старых сайтах.
В 2014 году утвержден HTML5, который добавил поддержку мультимедийных элементов, таких как видео и аудио. И менно его мы и будем изучать.
Структура HTML-документа
Каждый HTML-документ состоит из определенных разделов и тегов, которые указывают на структуру и содержимое страницы. Вот базовая структура HTML-документа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример HTML-документа</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый HTML-документ.</p>
</body>
</html>Эта структура включает следующие компоненты:
<!DOCTYPE html>— объявление типа документа, указывающее на использование HTML5.<html>— корневой элемент HTML-документа.<head>— содержит метаданные, такие как кодировка и заголовок страницы.<body>— содержит видимую часть документа.
Основные элементы HTML-документа
HTML-документ состоит из различных тегов, которые определяют тип и поведение контента. Теги заключены в угловые скобки, например, <p> для абзаца или <a> для ссылки. HTML-теги могут быть парными, когда содержат открывающий и закрывающий элементы, или одиночными, когда не имеют закрывающего тега.
Теги, атрибуты и их роли
Теги могут иметь атрибуты, которые добавляют дополнительную информацию или свойства. Например, тег <a> использует атрибут href для указания ссылки:
<a href="https://example.ru">Перейти на сайт</a>Базовые теги HTML
Рассмотрим основные теги, которые используются чаще всего при создании веб-страниц.
Теги для текстов
Текст на веб-странице может быть структурирован с помощью различных тегов:
<p>— используется для создания абзацев текста. Все содержимое между открывающим<p>и закрывающим</p>будет отображаться как отдельный абзац.<h1>—<h6>— это заголовки разного уровня.<h1>используется для основного заголовка страницы, а<h2>—<h6>для подзаголовков. Чем больше цифра, тем меньше по размеру заголовок и ниже его приоритет в структуре документа.<br>— тег для переноса строки. Он одиночный и не требует закрывающего тега. Позволяет начать текст с новой строки, не создавая при этом нового абзаца.<hr>— тег для добавления горизонтальной линии, которая визуально разделяет содержимое страницы.
Теги для ссылок и изображений
Теги <a> и <img> играют важную роль в создании связей и визуального оформления:
<a>— используется для создания гиперссылок. Атрибутhrefопределяет URL, на который ведет ссылка. Например:<a href="https://example.com">Перейти на сайт</a>.<img>— предназначен для отображения изображений на странице. Он требует атрибутsrc, который указывает путь к файлу изображения, иalt, который описывает изображение для пользователей с ограниченными возможностями и поисковых систем. Пример:<img src="photo.jpg" alt="Описание изображения">.
Теги для форматирования текста
HTML также позволяет изменять внешний вид текста с помощью следующих тегов:
<b>и<strong>— выделяют текст жирным шрифтом.<strong>также придает выделенному тексту смысловую значимость.<i>и<em>— делают текст курсивом. Тег<em>добавляет акцент, подчеркивая важность текста.<u>— подчеркивает текст. Используется редко, так как подчеркивание может восприниматься как ссылка.<mark>— выделяет текст, имитируя маркерное выделение, что привлекает внимание к важной информации.<del>и<ins>— используют для обозначения удаленного (<del>) или добавленного (<ins>) текста. Часто применяются для редактирования.
Структурные теги
HTML предоставляет несколько тегов для организации структуры страницы:
<div>— универсальный контейнер, который используется для группировки элементов и организации макета. Часто применяется вместе с CSS для стилизации.<span>— применяется для выделения части текста или инлайн-элементов, к которым нужно применить стиль. В отличие от<div>, который является блочным элементом,<span>— инлайновый элемент.<header>— используется для создания верхней части страницы или раздела, обычно содержащей навигацию или заголовок.<footer>— добавляет нижнюю часть страницы или раздела, где часто размещают контактную информацию, авторские права или ссылки на социальные сети.<section>— определяет логически обособленный раздел страницы, который можно использовать для организации контента.<article>— используется для независимого и самодостаточного содержимого, например, поста в блоге или новости.<nav>— применяется для навигационных ссылок, создавая меню навигации.
Табличные теги
Теги для создания таблиц позволяют организовать данные в виде строк и столбцов:
<table>— основной контейнер для таблицы.<tr>— создает строку в таблице.<td>— определяет ячейку в строке.<th>— используется для заголовков столбцов или строк и по умолчанию отображает текст жирным шрифтом и по центру.
Пример простой таблицы:
<table>
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Алексей</td>
<td>30</td>
</tr>
</table>Формы и ввод данных
Для создания интерактивных форм, в которых пользователи могут вводить данные, используются следующие теги:
<form>— контейнер для формы.<input>— элемент для ввода данных. Атрибутtypeопределяет тип поля (текст, пароль, отправка и т. д.).<label>— используется для описания элементов формы и связывания с ними.<textarea>— позволяет вводить многострочный текст.<button>— создает кнопку, которую можно использовать для отправки формы или выполнения других действий.
Пример формы для ввода имени и отправки:
<form>
<label for="name">Введите ваше имя:</label>
<input type="text" id="name" name="name">
<button type="submit">Отправить</button>
</form>На первый взгляд может показаться, что изучение HTML довольно сложная задача, но будьте уверены, что сегодня это очень просто, так как существует множество редакторов тегов, которые упрощают задачу веб-дизайнеру. Они сами подставляют наиболее часто используемые теги и атрибуты, а разработчику необходимо лишь выбрать то, что подходит из списка. Так же привлекает то, что отсутствует необходимость компиляции кода. Необходимо просто сохранить код в нужном формате и открыть файл при помощи браузера.
Использование HTML-комментариев
Комментарии используются для добавления заметок в код, которые не отображаются на странице. Они начинаются с <!-- и заканчиваются -->:
<!-- Это комментарий -->Создание первого HTML-документа
Создать html документ можно при помощи обычного блокнота (пересохранить текстовый документ в HTML). Учиться кодить наверное лучше в нем набирая его руками — так все быстрее в голове отложиться. А с другой стороны все равно запомните эти все теги и атрибуты когда будите практиковаться. Поэтому будем сразу использовать какой-нибудь бесплатный популярный кроссплатформенный редактор кода, пусть будет VS Code.
Visual Studio Code идет в комплекте с плагином emmet, который позволяет значительно ускорять написание кода. Если у вас какой то другой редактор и его в комплекте нет, то 90% что его можно туда установить).
Давайте создадим базовый каркас html 5 документа. Для этого запустите VS Code и нажмите Файл — Новый файл
Далее сохраните его как
html — обычно это index.html.
Далее в поле кода вводим ! после чего редактор предлагает построить для этой аббревиатуры при помощи emmet код, выбираем мышкой или жмем Enter.
И редактор моментально построить вам базовый HTML 5 каркас.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Теперь давайте накидаем простенький код в тело (body) выше приведенного каркаса.
<h1>Моя первая web страничка</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A commodi quas cum nesciunt explicabo reprehenderit iusto doloremque maiores, laudantium voluptates tenetur tempora necessitatibus quis nam. Amet ex sunt quibusdam itaque.</p>
<img src="https://web-revenue.ru/wp-content/uploads/2019/06/logo-new.png" alt="логотип">
<h2>Некий подзаголовок</h2>
<table border='1'>
<tr>
<th>№</th>
<th>Позиция</th>
<th>Цена за единицу (руб.)</th>
</tr>
<tr>
<td>1</td>
<td>Ручка синяя</td>
<td>8</td>
</tr>
<tr>
<td>2</td>
<td>Карандаш с ластиком</td>
<td>10</td>
</tr>
<tr>
<td>3</td>
<td>Линейка (40 см)</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>Дырокол</td>
<td>100</td>
</tr>
</table>
<h3>Еще один подзаголовок - подзаголовка</h3>
<ul>
<li>Пункт списка номер 1</li>
<li>Пункт списка номер 2</li>
<li>Пункт списка номер 3</li>
</ul>Теперь, если сохранить нашу страницу (файл index.hml) и открыть его при помощи браузера, то увидим следующее.
Ну и давайте немного разберем данный код.
h1, h2, h3 (их 6) — это заголовки и подзаголовки страницы, если заметили то они разного размера.
p — задает абзац;
img — отвечает за вывод изображения, путь до которого указывается в атрибуте src;
<table> — это таблица, <tr> — это ряд, а <th> и <td> — столбцы.
ul тег задающий тип списка (маркированный, если ul заменить на ol — будет нумерованный), li — элементы списка.
Да еще если заметили из кода, некоторые теги, грубо говоря просто теги открылись и сами закрылись в нашем случае img — не парные, а некоторые (их большинство) открываются и закрываются, например: <p> здесь текст и могут еще быть другие теги </p> — такие теги парные и они применяются для разметки блоков:
- контейнеров;
- абзацев;
- заголовков;
- списков;
- таблиц;
- и так далее.
В них могут находиться другие блоки или отдельные элементы, такие как изображения.
Принцип работы разметки следующий:
- Вы вводите в адресную строку адрес сайта или страницы.
- Браузер делает запрос по этому адресу и получает файл в формате.html.
- Код из полученного файла преобразуется в визуальные объекты.
При этом браузер следует правилам преобразования, которые немного отличаются в зависимости от системы, версии и типа обозревателя. Если в коде допущена ошибка, то на странице может появиться что-то неожиданное, например допустим в примере разметки таблицы ошибку:
<table border='1'>
<tr>
<th>№</th>
<th>Позиция</th>
<th>Цена за единицу (руб.)</th>
</tr>
<tr>
<td>1</td>
<td>Ручка синяя</td>
<td>8</td>
</tr>
<tr>
<td>2</td>
<td>Карандаш с ластиком</td>
<td></td>10
</tr>
</table>и посмотрим.
Цена карандаша вылетела за пределы таблицы, потому что браузер не смог понят где она должна находиться.
Валидация HTML-кода
Валидация помогает убедиться, что HTML-код соответствует стандартам и будет правильно отображаться во всех браузерах.
Почему важно соблюдать стандарты
Соблюдение стандартов обеспечивает кросс-браузерную совместимость и облегчает поддержку кода. Это также улучшает доступность для пользователей с ограниченными возможностями.
Как проверять код на валидность
Существуют онлайн-инструменты для проверки HTML-кода, такие как W3C Validator. Достаточно вставить код в поле для проверки и получить отчет о найденных ошибках.
Заключение: что изучать дальше после основ
После изучения основ HTML можно переходить к более продвинутым темам, таким как:
- CSS — стилизация веб-страниц.
- JavaScript — создание интерактивных элементов.
- Библиотеки и фреймворки, такие как Bootstrap и jQuery.
Изучение HTML — это только начало пути веб-разработчика. Продолжайте совершенствоваться и экспериментировать с созданием веб-страниц!
Для лучшего усвоения информации необходимо параллельно с прочтением заниматься выполнением практических заданий. В этом могут помочь бесплатные [mask_link href=»https://htmlacademy.ru/courses» target=»_blank»]курсы и тренажёры[/mask_link].
