Изучите HTML с нуля — введение, основы и примеры ?

Содержание

Что такое HTML и для чего он нужен?
История зарождения и развития html
Структура HTML-документа
Основные элементы HTML-документа
Теги, атрибуты и их роли
Базовые теги HTML
Теги для текстов
Теги для ссылок и изображений
Теги для форматирования текста
Структурные теги
Табличные теги
Формы и ввод данных
Использование HTML-комментариев
Создание первого HTML-документа
Валидация HTML-кода
Почему важно соблюдать стандарты
Как проверять код на валидность
Заключение: что изучать дальше после основ

Что такое 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 — это только начало пути веб-разработчика. Продолжайте совершенствоваться и экспериментировать с созданием веб-страниц!

Для лучшего усвоения информации необходимо параллельно с прочтением заниматься выполнением практических заданий. В этом могут помочь бесплатные курсы и тренажёры.

< Важные языки веб-разработки: путеводитель для начинающих

Основы CSS: стилизация и адаптивность для начинающих >