1. Основы веб-разработки: HTML5 и CSS3 для создания структуры и стиля
Основы веб-разработки: HTML5 и CSS3 для создания структуры и стиля
Добро пожаловать на курс «Веб-разработка: Полный курс с нуля до релиза». Это первая статья нашего путешествия, в котором мы пройдем путь от чистого листа до публикации вашего собственного веб-сайта. Мы начнем с фундамента, на котором держится весь интернет: языков HTML и CSS.
Многие новички ошибочно полагают, что создание сайтов — это сложная магия, доступная только математическим гениям. На самом деле, веб-разработка больше похожа на строительство дома и его декорирование. Сегодня мы научимся возводить стены и красить их.
Что такое веб-страница?
Когда вы открываете браузер (Chrome, Safari, Firefox) и вводите адрес сайта, происходит процесс обмена данными. Ваш компьютер (клиент) отправляет запрос на удаленный компьютер (сервер), и тот в ответ присылает набор файлов. Браузер — это программа, которая умеет читать эти файлы и превращать их в красивую картинку, которую вы видите на экране.
Основными «кирпичиками» любой страницы являются две технологии:
!Аналогия строительства дома: HTML создает каркас, а CSS отвечает за отделку.
HTML5: Скелет вашего сайта
HTML — это не язык программирования в привычном смысле. Здесь нет сложной логики или математических вычислений. Это язык разметки. Мы просто сообщаем браузеру: «Вот это — заголовок, а вот это — абзац текста».
Теги и элементы
Основа HTML — это теги. Тег — это команда для браузера, заключенная в угловые скобки. Большинство тегов являются парными: у них есть открывающая часть и закрывающая часть (со слэшем /).
Пример:
Здесь <p> — открывающий тег (от англ. paragraph), а </p> — закрывающий. Всё, что находится внутри, является содержимым элемента.
Структура HTML-документа
Любой правильный HTML-файл имеет строгую структуру. Давайте посмотрим на базовый шаблон:
Разберем каждую строку:
* <!DOCTYPE html>: Инструкция для браузера, сообщающая, что мы используем современную версию HTML5.
* <html>: Корневой элемент, в который вложено всё остальное.
* <head>: «Голова» документа. Здесь хранится техническая информация, которая не видна на странице (кодировка, заголовок вкладки браузера, подключение стилей).
* <body>: «Тело» документа. Всё, что вы напишете здесь, пользователь увидит на экране.
Основные теги, которые нужно знать
В HTML5 существует более 100 тегов, но в 90% случаев вы будете использовать лишь малую часть из них:
* Заголовки: от <h1> (самый важный) до <h6> (самый маленький).
* Текст: <p> (абзац), <span> (строчный контейнер для текста).
* Ссылки: <a>. У этого тега есть важный атрибут href, который указывает, куда ведет ссылка.
* Изображения: <img>. Это одиночный тег (ему не нужен закрывающий). Атрибут src указывает путь к картинке.
* Контейнеры: <div>. Это универсальная «коробка», в которую можно положить другие элементы, чтобы сгруппировать их.
> Важно: Соблюдайте вложенность. Если вы открыли тег внутри другого, вы должны закрыть его до того, как закроется внешний тег. Принцип «матрёшки».
CSS3: Добавляем красоту
Если HTML — это скелет, то CSS — это кожа и одежда. Без CSS все сайты выглядели бы как скучные документы из 90-х: черный текст на белом фоне.
Синтаксис CSS
CSS работает на основе правил. Каждое правило состоит из селектора (к чему применяем стиль) и блока объявлений (какой стиль применяем).
* p — это селектор. Мы говорим браузеру: «Найди все абзацы (<p>) на странице».
* color: red; — это свойство и его значение. Мы говорим: «Сделай текст красным».
Как подключить CSS к HTML?
Существует три способа, но профессионалы используют внешние таблицы стилей. Вы создаете отдельный файл (например, style.css) и подключаете его в <head> вашего HTML-файла:
Это позволяет отделить структуру от оформления, что делает код чище и удобнее для поддержки.
Блочная модель (Box Model)
Это самая важная концепция в CSS, которую нужно понять новичку. Каждый элемент на странице (картинка, заголовок, блок div) браузер воспринимает как прямоугольную коробку.
!Визуализация блочной модели CSS: контент, внутренние отступы, границы и внешние отступы.
Эта коробка состоит из четырех слоев:
Понимание этой модели критически важно для создания макетов. Если вы хотите отодвинуть один блок от другого, вы используете margin. Если вы хотите, чтобы текст не прилипал к краям кнопки, вы используете padding.
Основные свойства CSS
Вот несколько свойств, с которыми вы будете работать постоянно:
* color и background-color: Цвет текста и фона.
* font-family и font-size: Шрифт и его размер.
* width и height: Ширина и высота элемента.
* margin и padding: Отступы (например, margin: 20px;).
* border: Граница (например, border: 1px solid black;).
Практический пример
Давайте объединим знания. Представьте, что мы делаем кнопку.
HTML:
CSS:
Здесь мы использовали класс (.my-btn). Классы позволяют применять стили не ко всем тегам сразу (например, ко всем кнопкам), а только к конкретным элементам. В HTML мы добавляем атрибут class="my-btn", а в CSS обращаемся к нему через точку.
Заключение
Сегодня мы заложили первый камень в фундамент вашего обучения. Мы разобрали, что HTML создает структуру (заголовки, абзацы, блоки), а CSS отвечает за визуальное оформление (цвета, отступы, размеры).
В следующей статье мы углубимся в работу с формами и интерактивными элементами, чтобы научить ваш сайт «общаться» с пользователем. А пока рекомендую поэкспериментировать: создайте простой файл .html, напишите в нем пару строк о себе и попробуйте изменить их цвет с помощью CSS.
Для более глубокого погружения в документацию вы всегда можете обратиться к MDN Web Docs — это «библия» веб-разработчика.