Карта сайта

Урок 1: Что такое HTML и CSS?

/Уроки по HTML/CSS/Урок 1: Что такое HTML и CSS?
Урок 1: Что такое HTML и CSS?
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

Если вы зашли на этот урок, значит решили научиться создавать сайты с нуля и это отличный выбор! Ведь умение работать с HTML и CSS это базовый навык, который открывает двери в мир цифровых технологий. Давайте начнём наше путешествие с самого начала. Разберёмся, что такое HTML и CSS, как они работают и почему без них не существует ни одного сайта.

Знакомство с HTML и CSS

HTML: Скелет вашего сайта

HTML (HyperText Markup Language — «язык гипертекстовой разметки») это основа любого веб-сайта. Представьте, что сайт это человеческое тело, тогда как HTML это его скелет. Он задаёт структуру, где будет заголовок, текст, изображения, кнопки или формы.

HTML состоит из тегов, специальных команд, которые говорят браузеру, как отображать контент. Например:

  • <h1>Заголовок</h1> — заголовок первого уровня.
  • <p>Это абзац текста.</p> — абзац.
  • <img src="cat.jpg"> — изображение.

Каждый тег имеет своё назначение. Они могут вкладываться друг в друга, создавая иерархию элементов. Например:

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

Здесь <body>это «тело» страницы, внутри которого находятся заголовок и абзац.

CSS: Одежда и макияж

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

Например, чтобы сделать заголовок красным, вы напишете:

h1 {  
  color: red;  
}

CSS работает через правила, вы выбираете элемент (например, <h1>) и задаёте ему свойства (цвет, размер и т.д.).

Как они взаимодействуют?

HTML и CSS это два отдельных языка, но они тесно связаны. HTML структурирует контент, а CSS его украшает. Без CSS сайты выглядели бы как чёрно-белые документы с текстом и ссылками. Без HTML не было бы структуры, к которой можно применить стили.

Как работает веб-сайт?

Давайте представим, что вы вводите адрес сайта (например, https://max-gabov.ru) в браузере. Что происходит дальше?

1. Запрос к серверу

Браузер отправляет запрос на сервер, где хранится сайт. Сервер это мощный компьютер, который постоянно подключён к интернету.

2. Получение кода

Сервер отправляет браузеру файлы: HTML, CSS, изображения и другие ресурсы.

3. Обработка кода

Браузер читает HTML и CSS, строит из них DOM (Document Object Model — объектная модель документа) и отображает страницу.

Пример:

  • HTML говорит: «Здесь должен быть заголовок».
  • CSS добавляет: «Сделай его синим и центрируй».
  • Браузер объединяет эти инструкции и показывает готовую страницу.

4. Динамические элементы

Если на сайте есть JavaScript (язык для создания интерактива), браузер выполняет его код, чтобы добавить анимации, формы обратной связи и другие «движущиеся» элементы.

Структура курса и цели обучения

Что вы узнаете за 30 уроков?

  1. Основы HTML:
    • Структура HTML-документа.
    • Работа с текстом, списками, таблицами.
    • Создание форм для ввода данных.
  2. Основы CSS:
    • Стилизация текста и блоков.
    • Позиционирование элементов.
    • Адаптивный дизайн (под разные устройства).

Цели курса:

  • Научиться создавать статические сайты с нуля.
  • Понимать, как исправлять ошибки в вёрстке.
  • Подготовиться к изучению JavaScript.

Вы сделали первый шаг в веб-разработке. В следующих уроках мы подробно разберём структуру HTML-документа и основные теги.

Если хотите продолжить обучение, переходите к полному курсу «HTML/CSS для начинающих». Там вас ждут 30 уроков с заданиями, примерами кода и поддержкой от меня лично.