HTML (от англ. HyperText Markup Language) — это язык, который используется для создания и оформления структуры веб-страниц. Проще говоря, HTML — это основа вашего сайта, с помощью которой вы задаете, что и где будет находиться: текст, картинка, таблица, кнопка и так далее.

Простыми словами:

Если представить веб-страницу как дом, то HTML — это чертеж этого дома. Он определяет, где будут комнаты, окна и двери, но без дизайна (для дизайна используется CSS). HTML говорит браузеру (например, Google Chrome или Firefox): «Вот тут размести заголовок, здесь покажи картинку, а сюда поставь текстовый абзац».

Как работает HTML?

  1. Теги (<тег>): HTML состоит из специальных "ярлыков", которые называются теги. Эти теги говорят браузеру, как отображать тот или иной элемент.
  2. Открывающий и закрывающий теги: Большинство тегов начинают с <тег> и заканчиваются </тег>. Например, для текста есть тег <p> (параграф), который выглядит так: <p>Это текст</p>.
  3. Структура: HTML строится как иерархия: один элемент вложен в другой. Это называется «древовидная структура».

Пример простого HTML-кода

Вот пример самой базовой HTML-страницы:


Моя первая страница

Привет, мир!

Это мой первый текст на HTML.

Нажми сюда, чтобы перейти на другой сайт

Теперь объясним построчно, что здесь происходит:

  1. <!DOCTYPE html> — это технический момент: говорит браузеру, что мы создаем страницу на языке HTML.
  2. <html> — тут начинается наша HTML-страница (весь код находится внутри этого тега).
  3. <head> — это "голова" страницы. Здесь указывают техническую информацию, например, название вкладки.
  4. <title>Моя первая страница</title> — то, что будет отображаться в названии вкладки браузера.
  5. <body> — это "тело" страницы, всё, что пользователь увидит в браузере.
  6. <h1>Привет, мир!</h1> — заголовок страницы (1-го уровня, самый крупный и важный).
  7. <p>Это мой первый текст на HTML.</p> — абзац (параграф) текста.
  8. <img> — вставляет картинку. Мы указываем ссылку на изображение: src, и текст на случай, если картинка не загрузится: alt.
  9. <a> — это ссылка. Она ведет на указанный сайт (в примере указан адрес https://example.com).

Как открыть HTML-страницу?

  1. Создайте файл: Откройте блокнот (или текстовый редактор, например, Notepad++ или VS Code) и вставьте туда код из примера выше.
  2. Сохраните файл: Сохраните файл с расширением .html (например, index.html).
  3. Откройте в браузере: Нажмите правой кнопкой мыши на этот файл, выберите "Открыть с помощью" -> "Браузер" (например, Google Chrome или Firefox). Вы увидите вашу HTML-страницу в браузере.

Несколько советов для начинающих

  • HTML — это каркас сайта. Для оформления (цвета, размеры шрифта, отступы) изучайте CSS, а для функциональности (кнопки, формы) — JavaScript.
  • Пробуйте сами: Создавайте что-то, изменяйте теги, добавляйте картинки и текст, чтобы понять, как всё работает.
  • Не бойтесь ошибаться: Ошибки — это нормальная часть обучения. Если что-то не работает, проверяйте закрывающие теги (</тег>) и синтаксис.

Чуть больше о структуре HTML

HTML-страница строится по принципу "вкладывания" тегов. Например:

Заголовок внутри блока

Текст внутри этого блока.

Ещё один заголовок

  • Первый пункт списка
  • Второй пункт списка

Обратите внимание:

  • <div> — это блок (как коробка), в него можно класть другие элементы.
  • <ul> — это список (нумерованный или маркированный).
  • <li> — пункт списка (например, первый или второй пункт).

Что делать дальше?

  1. Освойте основные теги:
    • Заголовки: <h1> до <h6>
    • Текст: <p> (абзац), <b> (жирный), <i> (курсив)
    • Ссылки: <a>
    • Картинки: <img>
    • Списки: <ul> (маркированный) и <ol> (нумерованный), пункты: <li>
    • Таблицы: <table>
    1. Изучите, как добавлять цвет, шрифт и оформление (с помощью CSS).
    2. Создавайте свои страницы! Это весело и познавательно.

    Теперь вы знаете, что такое HTML, и как с его помощью можно создавать свои первые веб-страницы. Удачи в ваших экспериментах! 😊