Здравствуйте, друзья! Вы когда-нибудь задумывались, что скрывается за красивыми сайтами в интернете? Ответ прост — основа любого веб-ресурса — это HTML. Сегодня я покажу, как за 15 минут разобраться с базовыми тегами, чтобы вы смогли создать свою первую страницу.
Что такое HTML и зачем он нужен?
HTML (‘HyperText Markup Language’) — это язык разметки, который используется для создания структуры веб-страниц. Он задаёт каркас вашего сайта, который можно улучшать с помощью CSS и JavaScript.
Простыми словами, HTML — это как строительные блоки. Зная их основные свойства, вы уже сможете собрать нечто функциональное.
Как выглядит структура HTML-документа?
Прежде чем изучать теги, давайте посмотрим, как выглядит базовый HTML-документ:
<!DOCTYPE html>
<html>
<head>
<title>Мой первый сайт</title>
</head>
<body>
<h1>Моя первая страница</h1>
</body>
</html>
Разберём по частям:
<!DOCTYPE html>
— говорит браузеру, что мы используем HTML5.<html>
— корневой элемент, в котором содержится всё содержимое страницы.<head>
— раздел с информацией о странице (заголовок, метаданные).<title>
— текст, который отображается на вкладке браузера.<body>
— видимая часть страницы.
Теперь, когда у нас есть основа, перейдём к ключевым тегам.
Теги для заголовков и текста
Правильная структура текста помогает читателю легко воспринимать информацию. Для этого используются заголовки и абзацы.
Заголовки
HTML поддерживает 6 уровней заголовков: от <h1>
до <h6>
. Чем меньше цифра, тем важнее заголовок.
Пример:
<h1>Заголовок уровня 1</h1>
<h2>Заголовок уровня 2</h2>
Абзацы
Для обычного текста используется тег <p>
:
<p>Это пример абзаца текста.</p>
“Структурируйте текст, как книгу: сначала заголовок, потом абзацы” — простой, но эффективный совет.
Как выделять текст?
Хотите подчеркнуть важные моменты? Вот несколько полезных тегов:
<strong>
— жирный текст:
<strong>Важное сообщение!</strong>
<em>
— курсив для акцента:
<em>Очень важно!</em>
<br>
— перенос строки:
Первая строка
<br>
Вторая строка
<hr>
— горизонтальная линия для разделения блоков:
<hr>
Эти простые теги сделают ваш текст читабельнее.
Картинки и ссылки
Добавляем изображения
Чтобы добавить картинку, используйте тег <img>
. Укажите путь к изображению в атрибуте src
, а описание картинки — в alt
:
<img src="example.jpg" alt="Описание картинки">
Совет: Всегда заполняйте alt, чтобы картинки были доступны для пользователей с ограничениями зрения.
Ссылки
Ссылки создаются с помощью <a>
и атрибута href
:
<a href="https://example.com">Перейти на сайт</a>
Используйте их, чтобы связать свою страницу с другими ресурсами.
Списки: порядок важен
Иногда вам нужно показать перечень пунктов. Вот два вида списков:
- Ненумерованный список (●):
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>
- Нумерованный список:
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ol>
Добавляйте списки, чтобы упорядочить информацию и сделать её более структурированной.
Таблицы для данных
Для представления информации в виде таблицы используйте следующие теги:
<table>
— создаёт таблицу.<tr>
— строка.<td>
— ячейка.<th>
— заголовок таблицы.
Пример:
<table>
<tr>
<th>Имя</th>
<th>Возраст</th>
</tr>
<tr>
<td>Анна</td>
<td>25</td>
</tr>
</table>
“Таблицы полезны для сравнения данных” — используйте их, чтобы упрощать восприятие информации.
Полный пример страницы
Соберём всё вместе и создадим простую страницу:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая страница</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Добро пожаловать!</h1>
<p>Это пример страницы, созданной на HTML.</p>
<img src="welcome.jpg" alt="Приветственное изображение">
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
</ul>
<a href="https://example.com">Узнать больше</a>
</body>
</html>
Скопируйте этот код, вставьте в текстовый редактор и сохраните файл с расширением .html
. Откройте его в браузере — и вот ваш первый сайт!
Заключение
Поздравляю, теперь вы знаете базовые теги HTML! Это только начало, но уже на этом этапе вы можете создавать простые страницы. Главное — практикуйтесь, экспериментируйте и пробуйте новое.
Оставляйте свои вопросы в комментариях, и я с радостью отвечу. До встречи в следующих статьях!