Программирование в сетевых операционных средах
Введение в HTML

Введение в HTML

Что такое HTML?

HTML (название расшифровывается как HyperText Markup Language – «язык гипертекстовой разметки») — это стандартный язык для создания структуры и содержания веб-страниц. В отличие от языков программирования, HTML не выполняет каких-либо логических операций, а является языком разметки, который указывает браузеру, как необходимо отображать саму страницу и ее элементы. Простыми словами, HTML «размечает» ваш текст и медиаконтент особыми метками (тегами), чтобы определить их роль и принцип отображения на странице. Например, можно структурировать контент в виде нескольких абзацев, списков или даже встраивать изображения и таблицы. Файлы HTML имеют расширение .html (или .htm) и могут открываться в браузере.

Основные теги HTML

В HTML используется набор меток-тегов, с помощью которых определяется тип и назначение текста и элементов на странице. Большинство HTML-элементов имеют открывающий и закрывающий теги, образуя пару, между которыми находится сам контент. Например, тег <p> открывает абзац текста, а закрывающий тег </p> завершает абзац. Некоторые теги не имеют пары (обозначаются как «пустой тег»), например, тег встраивания изображения <img>: он не закрывается парным тегом и не оборачивает внутри себя контент (т.е. является элементом без тега-пары).

Атрибуты HTML

HTML-теги могут содержать атрибуты – дополнительные сведения об элементе, которые не отображаются напрямую на . Атрибуты помещаются в открывающий тег и обычно задаются в форме имя="значение". Например, атрибут class позволяет дать элементу уникальное имя (класс) для последующего применения стилей или скриптов. Каждый атрибут записывается с пробелом после имени тега или предыдущего атрибута, за именем следует знак = и значение в кавычках.

Рассмотрим небольшой пример таблицы с использованием атрибутов:

<table border="1">
  <tr>
    <th colspan="2">Заголовок таблицы</th>
  </tr>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
  </tr>
</table>

У тега

есть атрибут border="1", задающий видимость границ таблицы, а у ячейки-заголовка <th> использован атрибут colspan="2", благодаря которому эта ячейка занимает две колонки.

Атрибуты позволяют настраивать поведение и отображение элементов (например, объединять столбцы таблицы или задавать границы). Многие атрибуты являются универсальными (глобальными) и могут применяться к любому тегу (например, id, class, title и др.), тогда как некоторые атрибуты специфичны для определённых элементов (как colspan для ячеек таблицы).

Заголовки (<h1>–<h6>): в HTML доступно шесть уровней заголовков. Тег <h1> обозначает на странице главный, самый важный заголовок, а тег <h6> — мелкий заголовок шестого уровня. По умолчанию браузеры отображают заголовки большим и жирным шрифтом, подчеркивая их заголовочную функцию. Заголовки помогают структурировать страницу и делают контент более читаемым. Вот пример кода с несколькими заголовками разного уровня:

<h1>Основной заголовок</h1>
<h2>Подзаголовок 1</h2>
<h3>Подзаголовок 2</h3>

Абзацы текста (<p>): это тег для создания отдельных абзацев текста. Он оборачивает блок текста, отделяя его от других блоков пустой строкой спереди и после него (в неофициальном языке такие блоки иногда называются «параграфы»). Весь основной текст на странице обычно оформляется в виде нескольких параграфов, что делает текст читаемым и логично структурированным. Пример:

<p>Это мой первый абзац.</p>
<p>Это второй абзац, в котором приводятся детали.</p>

Изображения (<img>): тег для вставки изображений в контент. Он относится к одиночным тегам, т.к. не имеет парного закрывающего тега и не обладает собственным текстовым содержимым. Вместо этого, с помощью атрибута src (от слова source, «источник») вы указываете путь к файлу изображения, которое должно отобразиться в этом месте. Для корректного отображения и адаптации изображений часто дополнительно указывают размеры (ширину и/или высоту) через атрибуты width и height. Обязательно стоит добавить атрибут alt («альтернативный текст») — описание изображения для пользователей, которые по каким-либо причинам не видят картинку (например, если она не загрузилась или пользователь имеет ограничения по зрению). Пример использования тега <img> (включая параметр width для установки ширины изображения в 200 пикселей):

<img src="images/photo.jpg" alt="Моё фото" width="200">

При необходимости выровнять изображение по центру, можно обернуть этот тег в блок, например, в тег <p> с CSS-стилем text-align: center;. Если же с CSS вы ещё не знакомы, можно временно воспользоваться устаревшим тегом <center>.

Списки (маркированные и нумерованные): для показа перечня или списка элементов в HTML предусмотрены специальные теги. Ненумерованный («маркированный») список создаётся тегом <ul> (от unordered list), а каждый пункт списка определяется тегом <li> (list item). Если нужно пронумеровать пункты, вместо <ul> используется тег <ol> (ordered list). Пример HTML-кода для простого ненумерованного списка:

<ul>
    <li>Первый пункт</li>
    <li>Второй пункт</li>
    <li>Третий пункт</li>
</ul>

Ссылки (элемент <a>): тег для создания гиперссылок на другие страницы и ресурсы. Сам элемент — парный: между открывающим и закрывающим помещается текст ссылки, который будет виден пользователю. Главный атрибут тега <a> — href, который задаёт адрес (или URL) ресурса, на который перейдёт пользователь при клике по ссылке. Дополнительно можно задать атрибут target, например, target="_blank" — чтобы открывать ссылку в новой вкладке браузера. Пример ссылки:

<a href="https://www.example.com" target="_blank">Посетить мой сайт</a>

Таблицы (<table>): используются для представления данных в виде сетки (матрицы) из строк и столбцов. Таблица определяется тегом <table>, каждая её строка — элементом <tr> (table row), а ячейки в строке отмечаются тегом <td> (table data). Если нужно обозначить ячейку как заголовочную (например, в начале строк или в шапке таблицы), то используется тег <th> (table header), который по умолчанию отображает текст внутри себя жирным и центрированным. Пример таблицы:

<table border="1">
    <tr>
        <th>Категория</th>
        <th>Описание</th>
    </tr>
    <tr>
        <td>Технические навыки</td>
        <td>HTML, CSS, JavaScript</td>
    </tr>
    <tr>
        <td>Управленческие навыки</td>
        <td>Коммуникация, тайм-менеджмент</td>
    </tr>
</table>

Для простоты в примере ниже используется атрибут border="1" для отображения границ таблицы, но в современном веб-дизайне оформление таблиц обычно делается без этого атрибута, а все визуальные стили выносятся в CSS.

Помимо базовых тегов вроде <html>, <head>, <body>, заголовков <h1>…<h6>, абзацев

и ссылок , в HTML широко применяются и другие элементы:

Семантические теги HTML

С появлением HTML5 в язык были добавлены семантические теги – элементы, которые явно описывают смысловое назначение своего содержимого, делая структуру страницы более понятной. В отличие от нечитаемых семантически контейнеров <div> и <span>, которые сами по себе ничего не говорят о содержимом, семантические элементы сообщают браузеру и разработчику, какую роль играет заключённый в них контент. Например, элемент <h1> семантически обозначает заголовок первого уровня страницы, придавая соответствующий смысл тексту внутри (а не только визуально выделяя его).

К основным семантическим тегам HTML относятся следующие элементы:

  • <header> – определяет шапку документа или раздела. Обычно содержит вступительный контент: заголовки, логотип, навигацию и прочие вводные элементы.

  • <nav> – обозначает раздел навигационных ссылок. Такой блок содержит меню или другие ссылки для перемещения по сайту (например, панель навигации).

  • <main> – основной контент страницы. В этот тег помещается главная смысловая часть документа – то, ради чего страница создана (без навигации, боковых блоков, футера и прочего вспомогательного).

<section> – раздел документа, логически сгруппированный по теме. Чаще всего имеет свой заголовок и используется для структурирования большого контента на смысловые блоки.

<article> – самостоятельный фрагмент содержания, например статья, новостной блок или пост в блоге. Такой элемент самодостаточен и может распространяться отдельно от остального содержимого страницы.

  • <aside> – блок побочного контента, не центрального для страницы. Обычно это сайдбар, колонка с дополнительной информацией, сноски или рекламные блоки – то есть содержимое, косвенно связанное с основным содержанием.

  • <footer> – нижний колонтитул (подвал) страницы или раздела. Включает заключительную информацию: сведения об авторе, контакты, ссылки на связанные документы, дату обновления, права и т.д. Обычно отображается внизу страницы.

Использование семантических тегов улучшает структурирование HTML-документа и способствует пониманию страницы поисковыми системами и ассистивными технологиями. Проще говоря, подобные теги делают разметку более осмысленной. Например, поисковые боты и скринридеры могут сразу распознать, где на странице находится шапка, меню навигации, основной контент или отдельная статья. Для более детального ознакомления со всеми HTML-элементами и их назначением рекомендуется обратиться к официальной документации MDN, где приведён полный справочник тегов с описаниями.

Структура HTML-документа

Любой HTML-файл (например, файл index.html) содержит основную обязательную структуру. Она включает в себя объявление типа документа (декларацию DOCTYPE), корневой тег <html>, а также секции <head> и <body>. Рассмотрим пример минимально необходимого HTML-кода для начала страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Сайт</title>
</head>
<body>
    <!-- Здесь может находиться контент сайта -->
</body>
</html>

  • <!DOCTYPE html>: первая строка в каждом HTML5-документе, декларирующая тип файла. Она указывает браузеру, что документ написан на HTML5, и браузер должен обрабатывать его соответствующим образом.

  • <html lang="ru">: корневой тег всего HTML-документа, включающий в себя всю разметку. Атрибут lang="ru" определяет, что основной язык страницы — русский. Эта информация важна, в том числе, для поисковых систем и специальных программ чтения с экрана (screen readers), чтобы озвучивать текст на правильном языке.

  • <head>: вспомогательная часть HTML-страницы, в которой предоставляется метаинформация о странице. Внутри не размещают видимый контент; он предназначен для служебных данных. Здесь обычно располагаются такие элементы, как <meta charset="UTF-8"> (задаёт кодировку символов UTF-8, что позволяет корректно отображать текст на разных языках, в т.ч. на кириллице), <meta name="viewport" content="width=device-width, initial-scale=1.0"> (обеспечивает корректное отображение сайта на мобильных устройствах), а также тег <title> — его содержимое отображается в качестве заголовка вкладки браузера.

  • <body>: основное тело HTML-документа, внутри которого располагается весь видимый пользователю контент — текст, изображения, ссылки, списки, таблицы и прочее. Проще говоря, все, что помещено в , составляет содержимое веб-страницы, отображаемое на экране.

Структура веб-проекта

При работе с веб-сайтами рекомендуется организовывать файлы и каталоги проекта следующим образом:

assets/
    css/
    js/
    images/
    fonts/
index.html

Здесь assets/ — директория для хранения всех ресурсов сайта: файлов стилей (в папке css/), файлов JavaScript (в папке js/), изображений (images/) и шрифтов (если используются, в папке fonts/). Главный HTML-файл index.html располагается в корне проекта (т.е. непосредственно в папке с названием проекта) и ссылается на подключаемые ресурсы (например, подключение стилей через тег <link> и скриптов через тег <script> внутри раздела <head> или перед закрывающим тегом </body>).

Практическое задание: Создание веб-страницы визитки

В рамках этого задания вы начнете делать небольшой личный сайт-визитку. С его помозью необходимо немного рассказать о себе: о своих навыках, образовании и контактных данных.

Секции сайта: страница должна быть разделена на несколько основных разделов: «О себе», «Навыки», «Образование», «Контакты». В разделе «О себе» напишите несколько предложений о вашем профессиональном опыте и личных интересах. Раздел «Навыки» перечисляет ваши ключевые навыки; желательно разделить их на две категории в формате таблицы: технические (например, используемые технологии, языки программирования, инструменты) и надпрофессиональные (коммуникация, управление временем и т.п.). В разделе «Образование» укажите ваше учебное заведение (вуз) и/или пройденные вами курсы. Раздел «Контакты» может содержать ваш email для связи, ссылки на профили в социальных сетях и другие контактные данные.

Ключевые требования: при реализации используйте различные HTML-теги, рассмотренные выше. Применяйте <h1> и <h2> для заголовков разделов, <p> для обычного текста, добавьте фотографию или аватар с помощью <img> (не забудьте указать атрибут alt). Если необходимо, оформляйте части информации в виде списков с использованием <ul>/<ol> и вложенных <li>. Для внешних ссылок на ресурсы (например, на ваши соцсети) используйте тег <a> с соответствующим href. Секцию “Навыки” сделайте в виде HTML-таблицы, как описано выше, с двумя колонками (“Категория” и “Навыки”) для разделения видов навыков. Не забудьте вставить на страницу вашу фотографию и разместить её по центру.

Небольшой пример для ориентира:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя визитка</title>
</head>
<body>
    <h1>О себе</h1>
    <p>Привет! Я веб-разработчик с опытом работы в создании современных и адаптивных веб-сайтов.</p>

    <h2>Навыки</h2>
    <table border="1">
        <tr>
            <th>Категория</th>
            <th>Навыки</th>
        </tr>
        <tr>
            <td>Технические навыки</td>
            <td>HTML, CSS, JavaScript</td>
        </tr>
        <tr>
            <td>Управленческие навыки</td>
            <td>Управление проектами, коммуникации</td>
        </tr>
    </table>

    <h2>Образование</h2>
    <ul>
        <li>Университет XYZ, Бакалавр в области информатики</li>
        <li>Курсы веб-разработки на платформе ABC</li>
    </ul>

    <h2>Контакты</h2>
    <p>Email: myemail@example.com</p>
    <p>Социальные сети: 
        <a href="https://www.linkedin.com" target="_blank">LinkedIn</a>, 
        <a href="https://www.github.com" target="_blank">GitHub</a>
    </p>
</body>
</html>
Введение в CSS