search

Глава 4: Анатомия HTML и CSS

4.1 Разбор файла index.html: язык разметки

HTML (HyperText Markup Language) — это не язык программирования. Это язык разметки. Его задача — объяснить браузеру, что и в каком порядке показывать на странице: "здесь заголовок, здесь абзац, здесь картинка, а здесь — меню".

Представь, что ты пишешь инструкцию для робота-сборщика мебели. HTML — это текст этой инструкции, а теги — это пометки типа «это крышка стола (деталь А)», «это ножка (деталь Б)», «соединить А и Б».

Откроем наш index.html для изучения. Лучше всего сделать это в терминале сервера с помощью удобного текстового редактора nano:

cd /var/www/html
sudo nano index.html

Теперь давай пройдёмся по ключевым тегам. Не нужно запоминать всё сразу — просто смотри и улавливай логику.

1. Корни документа:

<!DOCTYPE html>

Самая первая строка. Говорит браузеру: "Эй, это документ в формате HTML5, самой современной версии".

<html lang="ru">

Открывающий тег всего нашего документа. Атрибут lang="ru" сообщает браузеру и поисковым системам, что основной язык страницы — русский.

2. Голова (<head>): Невидимая служебная часть. Всё, что внутри <head>, пользователь не видит. Это инструкции для браузера и мета-информация.

<head>
    <meta charset="UTF-8"> <!-- Кодировка. UTF-8 включает поддержку русского языка. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- ВАЖНО! Делает сайт адаптивным, подстраивает под ширину экрана устройства. -->
    <title>Деревянная Мастерская | Изделия ручной работы</title>
    <!-- Заголовок вкладки браузера. Его же видно в результатах поиска Google. -->
    <link rel="stylesheet" href="style.css"> 
    <!-- ПОДКЛЮЧЕНИЕ СТИЛЕЙ. Эта строка связывает HTML с нашим файлом CSS. -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/...">
    <!-- Подключение иконок FontAwesome из интернета. -->
</head>

3. Тело (<body>): Видимая часть сайта. Всё, что находится между <body> и </body>, пользователь видит в окне браузера.

4. Основные строительные блоки:

  • <header class="header"> — шапка сайта. Обычно содержит логотип и меню.

  • <section class="hero"> — крупная секция-баннер. class="hero" — это её имя (класс), чтобы мы могли обратиться к ней из CSS.

  • <h1>, <h2> — заголовки. <h1> — самый главный, на странице должен быть только один. <h2> — заголовки разделов.

  • <p> — абзац обычного текста.

  • <a href="#gallery" class="btn">Посмотреть работы</a> — ссылка (гиперссылка).

    • href — куда ведёт ссылка. #gallery означает "к разделу с id="gallery"" на этой же странице.

    • class="btn" — даёт ссылке специальный класс, чтобы стилизовать её как красивую кнопку.

  • <div class="container"> — универсальный контейнер. <div> сам по себе ничего не означает, это "коробка" для группировки других элементов. class="container" — очень популярный класс, который центрирует содержимое и задаёт ему максимальную ширину.

  • <footer class="footer"> — подвал сайта.

Главное правило: Почти у каждого открывающего тега (<tag>) есть закрывающий (</tag>). Всё, что между ними — содержимое этого элемента.

4.2 Структура страницы: как это всё собирается

Давай мысленно соберём нашу страницу из блоков, как из Lego:

  1. Фундамент: <body>

  2. Первый блок: <header> (приклеился кверху).

  3. Второй блок: <section class="hero"> (встал под шапку).

  4. Третий блок: <section class="about"> (встал под героем).

  5. Четвёртый блок: <section class="gallery">

  6. Последний блок: <footer> (приклеился к низу).

Браузер читает файл сверху вниз и рисует блоки в том же порядке. Это и есть поток документа.

4.3 Разбор файла style.css: инструкция по украшению

Если HTML — это скелет и внутренние органы, то CSS (Cascading Style Sheets) — это кожа, одежда, причёска и макияж. CSS отвечает за внешний вид: цвет, размер, расположение.

Откроем файл стилей:

1. Селектор: Это "крючок", которым мы цепляем нужный HTML-элемент, чтобы его стилизовать.

  • По тегу: header { ... } — стили применяются ко ВСЕМ тегам <header> на странице.

  • По классу (самый частый способ!): .hero { ... } — стили применяются ко ВСЕМ элементам, у которых в HTML есть class="hero". Обрати внимание на точку перед именем класса!

  • Комбинированный: .nav a { ... } — означает "все теги <a> (ссылки), которые находятся ВНУТРИ элемента с классом .nav".

2. Свойства и значения: Внутри фигурных скобок { } мы пишем команды.

3. Самые полезные свойства для начала:

  • color: #333; — цвет текста.

  • background-color: #fefefe; — цвет фона.

  • font-size: 1.5rem; — размер шрифта.

  • margin: 20px; — внешний отступ (отодвигает элемент от соседей).

  • padding: 10px; — внутренний отступ (отодвигает содержимое от краёв самого элемента).

  • width: 100%; height: 200px; — ширина и высота.

  • border: 1px solid #ccc; — рамка: толщина 1px, сплошная, цвет светло-серый.

ПРАКТИКА: Меняем цвета вживую!

Давай не просто читать, а сразу менять. В файле style.css найди блок .hero и измени свойство color:

  1. В редакторе nano найди строчку color: white; (используй стрелки для навигации).

  2. Замени white на #e6d2b9 (это светлый беж из нашей палитры).

  3. Сохрани изменения (Ctrl+O, Enter).

  4. Выйди из редактора (Ctrl+X).

  5. Обнови страницу в браузере. Текст в большой баннерной секции стал бежевым!

Верни всё обратно или поэкспериментируй с другими цветами. Попробуй поменять background-color у .header с #2c1810 на #4a7c59 (тёмно-зелёный). Сохрани и обнови. Шапка позеленела!

4.4 Добавляем свою фотографию

Картинки в коде от ИИ ведут на интернет (Unsplash). Давай загрузим свою.

  1. Подготовь картинку. Возьми любую свою фотографию или скачай подходящую из интернета (например, фото столярной мастерской). Назови её workshop.jpg.

  2. Скопируй картинку на сервер (аналогично тому, как копировали HTML). Через scp или общую папку:

  3. Создай папку для изображений:

    Теперь на сервере есть путь /var/www/html/images/workshop.jpg.

  4. Измени код index.html. Найди строку с картинкой в секции "О нас". Она выглядит так:

    Замени длинный URL на путь к нашей локальной картинке:

    Обрати внимание на слэш в начале: /images/.... Это абсолютный путь от корня сайта. Так правильно.

  5. Сохрани изменения в index.html (Ctrl+O, Enter, Ctrl+X в nano).

  6. Обнови страницу в браузере. Интернет-картинка сменилась на твою собственную!

Что мы узнали: Пути к файлам. Если файл лежит в одной папке с index.html, ссылаемся просто: src="myphoto.jpg". Если в подпапке images — src="images/myphoto.jpg". Если ссылка начинается со / — это путь от корня сайта (/var/www/html/).

Практическое задание к главе 4:

  1. Свой текст: Найди в index.html параграф (<p>) в секции "О нас" и замени сгенерированный ИИ текст на 2-3 предложения от себя. Сохрани и проверь.

  2. Покрасить кнопку: В style.css найди селектор .btn и поменяй background-color на любой другой цвет из палитры (например, оранжевый #d98c20). Посмотри, как изменилась кнопка.

  3. Добавить новую картинку в галерею: Скопируй ещё одну картинку в папку /var/www/html/images/. Затем в index.html найди блок gallery-grid и скопируй один из элементов gallery-item. Внутри него замени иконку <i class="fas fa-couch"></i> на свою картинку <img src="/images/твоя_картинка.jpg" alt="Описание">. Не забудь изменить заголовок <h3> под ней.

Вывод главы: Ты перестал быть просто пользователем сгенерированного кода. Теперь ты знаешь, как устроен HTML-скелет и CSS-стили. Ты можешь менять текст, цвета, картинки и понимаешь, к чему приведут твои изменения. Это фундаментальный шаг. Теперь мы готовы расширять наш сайт, делать его многостраничным.

ПредыдущаяГлава 3: Быстрое прототипирование с помощью ИИСледующаяГлава 5: Древо страниц — создаем многостраничный сайт

Последнее обновление