Основы HTML: Создаем свою первую веб-страницу

🌐 Что такое HTML?

HTML (HyperText Markup Language) - это язык разметки, который используется для создания структуры веб-страниц. Он состоит из набора элементов, называемых тегами, которые определяют, как контент должен отображаться в браузере.

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

Каждый HTML-документ имеет определенную структуру:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<!-- Базовая структура HTML документа -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Заголовок страницы</title>
</head>
<body>
    <h1>Заголовок первого уровня</h1>
    <p>Это параграф текста.</p>
</body>
</html>

<!DOCTYPE html>: Объявление типа документа.
<html>: Корневой элемент HTML-страницы.
<head>: Содержит метаданные о документе, такие как заголовок страницы.
<title>: Заголовок страницы, отображаемый во вкладке браузера.
<body>: Содержит видимый контент страницы.
<h1>: Заголовок первого уровня.
<p>: Параграф текста.

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

<head>: Контейнер для метаданных (информация о HTML-документе).
<title>: Определяет заголовок документа (отображается на вкладке браузера).
<body>: Определяет тело документа (содержит все содержимое, отображаемое на веб-странице).
<h1> - <h6>: Определяют заголовки разных уровней.
<p>: Определяет параграф.
<a>: Определяет гиперссылку.
<img>: Определяет изображение.
<ul>: Определяет неупорядоченный список.
<ol>: Определяет упорядоченный список.
<li>: Определяет элемент списка.
<div>: Определяет раздел в документе.
<span>: Определяет строчный контейнер для текста.

🚀 Создание простой веб-страницы

Создайте файл index.html.
Вставьте базовую структуру HTML-документа.
Добавьте заголовки, параграфы и другие элементы.
Откройте файл в браузере, чтобы увидеть результат.

Пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


<!DOCTYPE html>
<html>
<head>
    <title>Моя первая веб-страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это моя первая веб-страница, созданная с использованием HTML.</p>
</body>
</html>

🎯 Следующие шаги

В следующих статьях мы рассмотрим более сложные темы, такие как работа с изображениями, ссылками, списками и таблицами. Следите за обновлениями!