1. Заголовки
HTML предоставляет множество тегов для форматирования и структурирования текстового контента, изображений, ссылок и списков. Основные HTML-теги позволяют создать легко читаемую и логично организованную страницу, которая выглядит привлекательно и удобна для восприятия. Рассмотрим наиболее популярные базовые теги и их назначение.
Заголовки (или header) используются для обозначения различных уровней заголовков на странице. HTML предоставляет шесть уровней заголовков — от <h1> до <h6>, где <h1> — это самый крупный и важный заголовок, а <h6> — самый мелкий.
<h1>Основной заголовок страницы</h1>
<h2>Подзаголовок первого уровня</h2>
<h3>Подзаголовок второго уровня</h3>
...
<h6>Наименьший заголовок</h6>
Использование заголовков помогает структурировать текстовую информацию, а также улучшает SEO (поисковую оптимизацию), поскольку поисковые системы учитывают заголовки при анализе содержания страницы.
2. Оформление текста
Для оформления текста HTML предлагает несколько простых, но мощных тегов.
Параграфы/Абзацы
Теперь, когда мы познакомились с заголовками, самое время обратить внимание на текст. Параграфы в HTML создаются с использованием тега <p>. Это как ваши любимые текстовые редакторы, где вы нажимаете "Enter", чтобы начать новый абзац. Вот пример:
<p>Это первый параграф на нашей странице, и он расскажет вам немного больше о нашей теме.</p>
<p>А это уже второй параграф, потому что «первого» иногда недостаточно для передачи всех мыслей!</p>
Текстовые блоки
Не забываем и про <span> и <div>. <span> — это ваши скромные помощники для стилизации текстовых фрагментов в ходе HTML-кода, а вот <div> — настоящий чемпион для создания блоков и контейнеров.
<div>Этот блок может содержать много чего интересного!</div>
<span>А этот текст может быть выделен по цвету или шрифту.</span>
Жирный текст
Жирный текст — <b>: Тег <b> выделяет текст жирным шрифтом. Этот тег часто используется для подчеркивания важности отдельных слов или фраз.
<p>Это <b>важный текст</b>, который привлекает внимание.</p>
Наклонный текст
Курсив — <i>: Тег <i> делает текст курсивом. Он подходит для выделения цитат, иностранных слов или других элементов, требующих акцента.
<p>Это текст с курсивом: <i>пример курсивного текста</i>.</p>
3. Картинки
Для добавления изображений на страницу используется тег <img>. Этот тег является одиночным, и для его работы необходимо указать путь к изображению с помощью атрибута src. Также важно добавить описание изображения с помощью атрибута alt (альтернативный текст), чтобы пользователи с ограниченными возможностями или при проблемах с загрузкой изображения могли понять, что должно быть на картинке.
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg"" alt="Описание изображения">
<img src="image.jpg" alt="Описание изображения">
Другие полезные атрибуты <img>:
-
width— ширина изображения (например,width="200"). -
height— высота изображения (например,height="150").
Пример с атрибутами width и height:
<img data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Описание изображения" width="200" height="150">
<img src="http://google.com/image.jpg" alt="Описание изображения" width="200" height="150">
4. Гиперссылки
Ссылки — важный элемент HTML, который позволяет пользователям переходить на другие страницы или ресурсы. Ссылки создаются с помощью тега <a>, где ключевым атрибутом является href, указывающий URL назначения. 'A' здесь значит 'anchor' (якорь), ведь ссылке требуется закрепиться в определенной точке в иерархии документа:
<a href="https://example.com">Перейти на пример сайта</a>
Полезные атрибуты ссылки:
-
target="_blank"— открывает ссылку в новой вкладке. -
title="Подсказка"— добавляет всплывающую подсказку при наведении на ссылку.
Пример ссылки с дополнительными атрибутами:
<a href="https://example.com" target="_blank" title="Откроется в новой вкладке">Посетите наш сайт</a>
5. Списки
Списки помогают организовать информацию в удобные для восприятия блоки. HTML поддерживает два типа списков:
Список с точечками
Маркированный список (неупорядоченный) — <ul>: Элементы в таком списке отмечены маркерами (точками).
<ul>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ul>
Список с числами
Нумерованный список (упорядоченный) — <ol>: Элементы этого списка автоматически нумеруются.
<ol>
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
<li>Третий элемент списка</li>
</ol>
Элементы в списках создаются с помощью тега <li>, который размещается внутри <ul> или <ol>. Списки широко применяются для оформления меню, последовательностей действий, перечней и других структурированных данных.
6. Пример использования всех базовых тегов
Теперь соберем все описанные теги в один HTML-фрагмент:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример страницы с базовыми HTML-тегами</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<h2>Подзаголовок</h2>
<p>Это пример абзаца текста, в котором есть <b>жирный текст</b> и <i>курсивный текст</i>.</p>
<h3>Картинка</h3>
<img data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Описание изображения" width="200" height="150">
<h3>Ссылка</h3>
<p>Вот <a href="https://example.com" target="_blank" title="Пример сайта">ссылка на внешний сайт</a>.</p>
<h3>Пример маркированного списка</h3>
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
<h3>Пример нумерованного списка</h3>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример страницы с базовыми HTML-тегами</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<h2>Подзаголовок</h2>
<p>Это пример абзаца текста, в котором есть <b>жирный текст</b> и <i>курсивный текст</i>.</p>
<h3>Картинка</h3>
<img src="image.jpg" alt="Пример изображения" width="200" height="150">
<h3>Ссылка</h3>
<p>Вот <a href="https://example.com" target="_blank" title="Пример сайта">ссылка на внешний сайт</a>.</p>
<h3>Пример маркированного списка</h3>
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>
<h3>Пример нумерованного списка</h3>
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ol>
</body>
</html>
Заключение
Теперь, когда у вас есть представление о том, как использовать основные HTML-теги, вы можете начать экспериментировать с их комбинацией для создания более сложных страниц. Попробуйте создать свою собственную HTML-страницу с заголовком, несколькими параграфами и изображением, которое будет служить ссылкой на другой ресурс.
В мире HTML знание тегов — это только начало. Это как знать, где на клавиатуре находятся любимые клавиши. В следующих лекциях мы разберемся с CSS, который поможет нам стилизовать эти элементы и придать им форму, соответствующую нашему замыслу. А пока продолжайте экспериментировать и запоминайте, что выражение «посмотри под капот» — отличный способ описать работу с HTML.
На этом опустим занавес нашей небольшой, но насыщенной лекции. Надеюсь, вы поняли, что HTML — это сердце ваших веб-страниц. Теперь вы знаете, как сделать первые шаги в веб-разработке: написать код, который поймет браузер!
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ