HTML — это скелет любой страницы в интернете. Он не делает сайт красивым (это задача CSS) и не добавляет логику (это JavaScript). HTML просто говорит браузеру: «тут заголовок, тут абзац, тут картинка, тут кнопка». Если представить страницу как дом, то HTML — это каркас: стены, окна, двери. Без него ничего не получится.
Минимальный набор: что обязательно должно быть в любом HTML-файле
Любой корректный HTML-документ начинается с объявления типа документа и содержит базовую структуру. Вот шаблон, который можно копировать и использовать как основу:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Моя первая страница</title> </head> <body> <!-- Всё видимое содержимое страницы идёт сюда --> </body> </html>
Коротко про каждый элемент:
<!DOCTYPE html>— говорит браузеру: «это современный HTML5». Без этой строки браузер может включить «режим совместимости» и отображать страницу по старым правилам.<html>— корневой элемент всей страницы. Атрибутlang="ru"сообщает, что язык страницы — русский. Это важно для скринридеров, автопереводов и SEO.<head>— «техническая» часть. Здесь не видно текста на странице, но здесь живут метаданные: кодировка, заголовок вкладки, ссылки на стили и скрипты.<meta charset="utf-8">— критически важная строка. Она говорит браузеру, что текст на странице закодирован в UTF‑8. Если её не указать, вместо русских букв могут появиться «кракозябры».<title>— заголовок вкладки браузера. Он виден в верхней панели и в результатах поиска.<body>— тело страницы. Всё, что пользователь видит на экране, должно быть внутри этого тега.
Как создать и открыть свою первую страницу
- Создай на компьютере папку для проекта (например,
my-site). - Внутри папки создай текстовый файл и переименуй его в
index.html. Важно, чтобы расширение было именно.html, а не.txt. - Открой этот файл в любом текстовом редакторе (Блокнот, VS Code, Notepad++).
- Вставь туда шаблон выше.
- Сохрани файл.
- Дважды кликни по файлу — он откроется в браузере.
Теперь у тебя есть настоящая веб-страница. Дальше будем наполнять её контентом.
Заголовки и абзацы: строим текст
Заголовки в HTML бывают шести уровней: от <h1> (самый важный) до <h6> (самый мелкий). На практике используют в основном <h1>, <h2> и <h3>. Правило простое: на странице должен быть один <h1> — это главный заголовок всей страницы. Подзаголовки разделов — <h2>, подразделы — <h3> и так далее.
Абзацы текста оформляются тегом <p>.
Пример:
<h1>Добро пожаловать на мою страницу</h1> <p>Это первый абзац. Здесь я рассказываю, о чём эта страница.</p> <h2>Почему это важно</h2> <p>Здесь я объясняю, зачем всё это нужно. HTML — основа веба.</p>
Списки: перечисляем пункты
Списки делают текст структурированным. Есть два основных типа:
- Маркированный список (точки) —
<ul>+<li>. - Нумерованный список (цифры) —
<ol>+<li>.
Пример:
<h3>Что я изучаю</h3> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <h3>План на день</h3> <ol> <li>Проснуться</li> <li>Позавтракать</li> <li>Написать код</li> </ol>
<li> — это отдельный пункт списка. Его нельзя использовать без родительского тега (<ul> или <ol>).
Ссылки: переходим между страницами
Ссылка создаётся тегом <a> с атрибутом href, в котором указывается адрес.
Пример:
<p>Узнать больше можно на <a href="https://example.com">официальном сайте</a>.</p>
Если нужно открыть ссылку в новой вкладке, добавляют атрибут target="_blank":
<a href="https://example.com" target="_blank">Открыть в новой вкладке</a>
Для ссылок на другие страницы своего сайта используют относительные пути:
<a href="about.html">О нас</a> <a href="/blog/post-1.html">Первая статья блога</a>
Картинки: добавляем визуал
Картинка вставляется тегом <img>. У него нет закрывающего тега. Обязательные атрибуты:
src— путь к файлу картинки.alt— текстовое описание, которое показывается, если картинка не загрузилась, и читается скринридерами. Это важно для доступности и SEO.
Пример:
<img src="images/photo.jpg" alt="Красивый пейзаж в горах">
Пути могут быть разными:
- Относительный путь (картинка лежит рядом):
src="photo.jpg" - Папка внутри проекта:
src="images/photo.jpg" - Ссылка из интернета:
src="https://example.com/photo.jpg"
Таблицы: структурируем данные
Таблицы в HTML создаются с помощью трёх основных тегов:
<table>— сама таблица.<thead>— шапка таблицы (заголовки столбцов).<tbody>— тело таблицы (строки с данными).- Внутри них — строки
<tr>и ячейки<th>(заголовок) или<td>(данные).
Пример таблицы:
<table> <thead> <tr> <th>Процент</th> <th>Расход</th> </tr> </thead> <tbody> <tr> <td>0%</td> <td>1.00</td> </tr> <tr> <td>10%</td> <td>2.10</td> </tr> <tr> <td>20%</td> <td>3.20</td> </tr> </tbody> </table>
Раньше для таблиц использовали атрибут border="1", но сейчас лучше задавать рамки через CSS. Однако если нужно быстро и без CSS, можно оставить border="1" у тега <table>:
<table border="1"> <!-- содержимое таблицы --> </table>
Это как раз пригодится, если ты делаешь калькулятор или ротаметр и хочешь сразу видеть сетку без дополнительных стилей.
Формы: собираем данные от пользователя
Форма создаётся тегом <form>. Внутри неё — поля ввода, кнопки и подписи.
Основные элементы:
<input>— универсальное поле. Тип задаётся атрибутомtype:text,number,email,passwordи т.д.<label>— подпись к полю. Лучше связывать с полем через атрибутforиid.<button>— кнопка отправки.
Пример простой формы:
<form action="/submit" method="post"> <label for="name">Ваше имя:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <button type="submit">Отправить</button> </form>
Атрибут action указывает, куда отправлять данные, а method — каким способом (обычно post или get). Если ты делаешь калькулятор на чистом HTML и JS, то action можно вообще не указывать, а обрабатывать отправку через JavaScript.
Семантика: делаем страницу понятной для всех
Семантические теги помогают браузерам, поисковикам и людям с ограниченными возможностями лучше понимать структуру страницы. Вместо того чтобы всё делать через <div>, используй подходящие теги:
<header>— верхняя часть страницы (логотип, меню, заголовок).<nav>— навигационное меню.<main>— основной контент страницы.<article>— отдельный смысловой блок (статья, пост, товар).<section>— раздел внутри страницы.<aside>— боковая панель, дополнительная информация.<footer>— подвал страницы (контакты, копирайт).
Пример структуры:
<header> <h1>Мой сайт</h1> <nav> <a href="/">Главная</a> <a href="/about">О нас</a> </nav> </header> <main> <article> <h2>Первая статья</h2> <p>Текст статьи...</p> </article> </main> <footer> <p>© 2024 Мой сайт. Все права защищены.</p> </footer>
Собираем первую страницу: каталог статей на HTML + CSS
Простая статичная страница без JavaScript. Основа — сетка из карточек статей на CSS Grid.
Карточки сделаны через <article> — это семантически верно и сразу даёт понятную структуру. Дата вынесена в отдельный блок с классом article-date.
Сетка задаётся так:
.articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
auto-fit плюс minmax(250px, 1fr) дают адаптивность: карточки встают в ряды и сами перестраиваются при изменении ширины экрана. gap задаёт отступы между ними.
Чтобы карточки в одной строке были одинаковой высоты, у .article-card стоит height: 100%.
Полный код страницы:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Каталог статей</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; color: #333; } header { background: #2c3e50; color: #fff; padding: 1.5rem 2rem; } main { padding: 2rem; } h2 { margin-bottom: 1rem; } .articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .article-card { border: 1px solid #ddd; border-radius: 6px; padding: 1rem; background: #fff; height: 100%; } .article-date { color: #777; font-size: 0.9rem; margin-bottom: 0.5rem; } footer { background: #2c3e50; color: #fff; text-align: center; padding: 1rem; margin-top: 2rem; } </style> </head> <body> <header> <h1>Блог: полезные статьи</h1> <p>Разбираем веб‑технологии просто</p> </header> <main> <section> <h2>Свежие материалы</h2> <div class="articles-grid"> <article class="article-card"> <div class="article-date">10.10.2024</div> <h3>Как работает CSS Grid</h3> <p>Коротко про колонки, отступы и автоподстройку без медиазапросов.</p> </article> <article class="article-card"> <div class="article-date">08.10.2024</div> <h3>Семантика в HTML: зачем нужны header, main, article</h3> <p>Объясняем на простых примерах, как теги помогают поисковикам и скринридерам.</p> </article> <article class="article-card"> <div class="article-date">05.10.2024</div> <h3>Базовые селекторы CSS</h3> <p>Типы, классы, ID и каскад: что применять и в каком порядке.</p> </article> </div> </section> </main> <footer> <p>© 2024 Блог о веб‑разработке. Все права защищены.</p> </footer> </body> </html>
Загрузка...