Привет! Если ты здесь, значит, решил нырнуть в веб-разработку с нуля. Круто! И мы начинаем с основы основ — с HTML. Без него вообще ничего не будет: ни красивых кнопок, ни текста, ни картинок. Даже этот блог, который ты сейчас читаешь, построен на HTML.
Так что же такое HTML?
HTML — это HyperText Markup Language, по-русски «язык разметки гипертекста». По сути, это просто способ сказать браузеру: «Вот тут заголовок, вот тут абзац текста, вот тут картинка, а вот тут ссылка, по которой можно кликнуть».
HTML — не язык программирования. Он не умеет считать, принимать решения или бегать по циклу. Он просто размечает (markup) содержимое страницы: говорит, где что находится и какой смысл это несёт.
Представь, что ты строишь дом из Lego. HTML — это те базовые кирпичики, из которых собирается каркас: стены, двери, окна. Без каркаса ничего не поставишь. Потом на этот каркас CSS навешивает краску, обои и красивые шторы, а JavaScript заставляет двери открываться сами и свет включаться по хлопку.
Как выглядит HTML-код?
Открой любой сайт, нажми правой кнопкой мыши → «Просмотреть код страницы» (или Ctrl+U). Ты увидишь кучу странных штук в угловых скобках. Это и есть теги HTML.
Пример самого простого HTML-документа:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это мой первый сайт. Я только начинаю, но уже круто!</p>
</body>
</html>Давай разберём по кусочкам, что тут происходит:
<!DOCTYPE html>— говорит браузеру: «Эй, это современный HTML5, работай правильно».<html lang="ru">— корневой элемент, внутри него всё остальное. Атрибутlang="ru"подсказывает, что основной контент страницы на русском.<head>— «голова» страницы. Тут информация, которую пользователь не видит напрямую: заголовок вкладки, кодировка, подключение стилей и скриптов.<title>— то, что показывается во вкладке браузера.<body>— «тело» страницы. Здесь всё, что видит посетитель.<h1>— заголовок первого уровня (самый большой).<p>— параграф (абзац текста).
Важно: почти все теги парные. Есть открывающий <p> и закрывающий </p>. Содержимое находится между ними. Есть и одиночные теги, например <img> или <br>, но о них позже.
Атрибуты
Атрибуты — это дополнительные характеристики тега. Они пишутся внутри открывающего тега, сразу после имени тега, через пробел. Формула простая:
<тег атрибут=»значение» другой-атрибут=»другое-значение»>
Самые популярные атрибуты
| Атрибут | Для каких тегов | Что делает | Пример использования |
|---|---|---|---|
| id | почти все | Уникальный идентификатор элемента (один на всю страницу!) | <div id=»main-header»> |
| class | почти все | Класс(ы) для стилизации и JS (можно несколько через пробел) | <p class=»text big important»> |
| href | <a> | Куда ведёт ссылка | <a href=»https://google.com»>Перейти в гугл</a> |
| src | <img>, <iframe>, <script> | Источник (откуда брать файл) | <img src=»cat.jpg»> |
| alt | <img> | Альтернативный текст (очень важен для доступности и SEO!) | <img src=»cat.jpg» alt=»Мой рыжий кот спит»> |
| title | почти все | Всплывающая подсказка при наведении курсора | <button title=»Сохранить изменения»>Сохранить</button> |
| lang | <html>, иногда другие | Язык содержимого (помогает экранным читалкам и поисковикам) | <html lang=»ru»> |
| charset | <meta> | Кодировка символов (почти всегда UTF-8) | <meta charset=»UTF-8″> |
| name | <input>, <meta>, <form> | Имя поля/метки (важно для форм и мета-тегов) | <input name=»username»> |
| type | <input>, <button> | Тип элемента (text, password, checkbox, submit и т.д.) | <input type=»password»> |
О классах и id можно прочитать в статье
Основные теги, с которыми стоит познакомиться прямо сейчас
Вот минимальный набор, чтобы уже сегодня сделать свою страничку:
- Заголовки:
<h1>…<h6>(от самого большого к маленькому) - Абзацы:
<p> - Ссылки:
<a href="https://example.com">Текст ссылки</a> - Картинки:
<img src="путь/к/картинке.jpg" alt="Описание для слабовидящих"> - Списки:
- Нумерованный:
<ol><li>Пункт 1</li><li>Пункт 2</li></ol> - Маркированный:
<ul><li>Пункт 1</li><li>Пункт 2</li></ul> - Кнопки:
<button>Нажми меня</button> - Формы потом, но уже можно заглянуть:
<form>,<input>,<label>
Где писать и как смотреть результат?
- Установи Visual Studio Code (бесплатно, удобно, подсветка синтаксиса).
- Создай файл с расширением
.html, напримерindex.html. - Напиши код из примера выше. Прошу, именно напиши — не стоит копировать и вставлять пока учишься.
- Сохрани и просто открой файл в браузере (двойной клик или перетащи в окно).
Всё! Ты только что создал свой первый сайт. Даже если он пока выглядит как страница из 1999 года — это уже сайт.
Что дальше?
В следующих уроках мы:
- Поглубже разберём структуру документа
- Научимся вкладывать блоки друг в друга (это важно!)
- Познакомимся с семантическими тегами HTML5 (
<header>,<footer>,<article>,<section>и т.д.) — они делают код понятнее и помогают поисковикам - Добавим немного CSS, чтобы не было так скучно
Домашнее задание
Сделай простую страницу «О себе»:
- Заголовок с твоим именем
- Фото (можно любое из интернета)
- Несколько абзацев о себе
- Список любимых фильмов/игр/хобби
- Ссылку на любимый сайт или свой GitHub (если уже есть)
Сохрани, открой в браузере, похвали себя. Ты молодец!
Если что-то не получается — пиши в комментариях, разберёмся вместе. Веб-разработка — это практика, практика и ещё раз практика.
Добавить комментарий