Основы веб-разработки: HTML и CSS

Почему именно HTML и CSS?

HTML (HyperText Markup Language) и CSS (Cascading Style Sheets) — это фундамент любого сайта. Представь:

HTML — это скелет страницы: заголовки, абзацы, изображения, ссылки
CSS — это дизайн и внешний вид: цвета, шрифты, расположение элементов

Изучив эти технологии, ты сможешь создавать статические сайты любой сложности!

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

Каждая HTML-страница имеет базовую структуру:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый сайт</p>
</body>
</html>

Разберем по частям:

<!DOCTYPE html> — объявление типа документа
<html> — корневой элемент всей страницы
<head> — служебная информация (не отображается на странице)
<title> — заголовок вкладки браузера
<body> — видимое содержимое страницы

Основные HTML-теги для начала

Тег	Назначение	Пример
`<h1>-<h6>`	Заголовки разного уровня	`<h1>Главный заголовок</h1>`
`<p>`	Абзац текста	`<p>Текст абзаца</p>`
`<a>`	Ссылка	`<a href="https://site.ru">Текст ссылки</a>`
`<img>`	Изображение	`<img src="photo.jpg" alt="Описание">`
`<div>`	Блочный контейнер	`<div>Блок содержимого</div>`

Подключаем CSS: 3 способа добавить стили

Inline-стили (в строке)

<p style="color: blue;">Синий текст</p>

Внутренние стили (в head)

<style>
    p {
        color: blue;
    }
</style>

Внешний файл (рекомендуется)

<link rel="stylesheet" href="style.css">

Основы CSS: селекторы и свойства

Селекторы — выбирают элементы для стилизации:

p — все параграфы
.class — элементы с классом
#id — элемент с идентификатором

Свойства — определяют внешний вид:

p {
    color: blue;           /* Цвет текста */
    font-size: 16px;       /* Размер шрифта */
    margin: 10px;          /* Внешние отступы */
    padding: 15px;         /* Внутренние отступы */
}

Практика: создаем простую карточку

HTML:

<div class="card">
    <h2>Заголовок карточки</h2>
    <p>Описание карточки с полезной информацией</p>
    <button>Узнать больше</button>
</div>

CSS:

.card {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 10px;
    max-width: 300px;
}

.card h2 {
    color: #333;
    margin-bottom: 10px;
}

.card button {
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

Распространенные ошибки новичков

Незакрытые теги — всегда проверяйте парность тегов
Неправильные пути к файлам — используйте относительные пути
Путаница в отступах — margin (внешний) vs padding (внутренний)
Игнорирование семантики — используйте семантические теги (<header>, <nav>, <main>)

Твои первые шаги к профессии

Освоив HTML и CSS, ты сможешь:

Создавать лендинги и сайты-визитки
Верстать макеты из Figma или Photoshop
Понимать принципы работы веб-страниц
Начать изучать JavaScript для интерактива

Помни: Главное — практика! Создавай простые проекты, экспериментируй и не бойся ошибок. Каждый профессиональный разработчик когда-то написал свой первый <!DOCTYPE html>.