1. HTML. Основы

2.

Сегодня мы
01
02
УЗНАЕМ
ПОЙМЕМ
Что такое HTML и как он
ключевые правила и основные
работает.
теги.
03
СОЗДАДИМ
Свою веб-страницу.

HTML — скелет
сайта
HTML (HyperText Markup Language) — это язык разметки,
который служит основой для любой веб-страницы. Он
определяет структуру вашего контента, подобно скелету, на
который затем "наращиваются" другие элементы.
Представьте ваш сайт как живой организм:
HTML (структура) — это его скелет.
CSS Cascading Style Sheets, «каскадные таблицы стилей» (стили)
— это его кожа и одежда.
JS JavaScript (логика) — это его мышцы и мозг.
Вместе они создают полноценный, интерактивный сайт!

4.

Код → Браузер → Сайт
<html>
<h1>Привет, мир!</h1>
<p>Это мой первый абзац.</p>
<p>Я учу <strong>HTML</strong>.</p>
</html>
Когда вы пишете HTML-код, браузер интерпретирует его и превращает в то, что
вы видите на экране. Это как переводчик, который делает ваши инструкции
понятными для компьютера, создавая визуально привлекательную вебстраницу.

5.

Азбука HTML: Тег, Атрибут,
Элемент
Тег: Это ключевое слово (например, <p> для абзаца), заключенное в
угловые скобки.
Атрибут: Дополнительная информация, которая изменяет поведение
или внешний вид тега (например, href в ссылке).
Элемент: Состоит из открывающего тега, контента и закрывающего
тега. Например: <p>Мой абзац</p>.
Правило: Открывающий тег + Контент + Закрывающий тег =
Элемент. Атрибуты всегда указываются в открывающем
теге. Есть исключения: теги без закрывающего тега, такие
как <br> (перенос строки), <img> (изображение) и <hr>
(горизонтальная линия).

6.

Каркас страницы
Каждая HTML-страница имеет базовую структуру. Это её фундамент, без
которого ничего не будет работать корректно. Вот как выглядит этот
"каркас":
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href="css/style.css">
<meta charset="UTF-8"> 
<title>Моя страница</title> 
</head>
<body>

</body>
</html>
в VS Code можно открыть пустой файл формата .html, написать один
восклицательный знак и нажать "Enter". Каркас готов!

7.

Что такое CSS и зачем он
нужен?
CSS = КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ
HTML отвечает за структуру и содержание: что находится на странице
(заголовок, абзац, картинка). CSS отвечает за внешний вид и
оформление: как это выглядит (цвет, размер, расположение).
Представьте, что HTML — это скелет и органы человека, а CSS — это
его кожа, одежда и прическа. Вместе они создают полноценный,
стильный веб-сайт.
<head>
<link rel = "stylesheet" href="css/style.css">
</head>

8.

Заголовки и текст
HTML предоставляет различные теги для структурирования текста, помогая браузеру понять иерархию и назначение
каждого фрагмента. Это критически важно для доступности и SEO.
<h1>
Главный заголовок страницы (используется
<h1>Мой блог</h1>
один раз)
<h2>-<h6>
Подзаголовки, структурирующие контент по
<h2>Про кошку</h2>
важности
<p>
Обычный текст. Параграф.
<p>Она пушистая.</p>

9.

Синтаксис CSS: Селектор, Свойство,
Значение
СЕЛЕКТОР { СВОЙСТВО: ЗНАЧЕНИЕ; }
Примеры кода
Ключевые термины
p {
color: blue;
/* Свойство: цвет текста */
font-size: 18px;
/* Свойство: размер шрифта */
text-align: center;
/* Свойство: выравнивание текста */
Селектор — указывает, к какому элементу HTML применить стили.
Свойство — что именно мы хотим изменить (цвет, размер, отступ).
Значение — конкретная настройка свойства (синий, 20px, жирный).
}
Мини-код для примера
До применения CSS:
После применения CSS:
<h1>Заголовок</h1>
<h1 style="color: darkred; font-family: Arial, sans-serif;">Заголовок</h1>
<p>Это параграф.</p>
<p style="color: blue; font-size: 18px; text-align: center;">Это
параграф.</p>

10.

Цвет
Цвет — один из самых мощных инструментов в веб-дизайне, позволяющий
создавать настроение, выделять важные элементы и улучшать читаемость. В CSS
мы можем легко управлять цветом текста и фона.
p {
color: blue;
background-color: #f0f0f0;
}
h1 { color: darkgreen; }
color (Цвет текста)
Определяет цвет текста элемента. Можно использовать названия цветов
(blue), RGB, HEX-коды (#f0f0f0) или HSL.
background-color (Цвет фона)
Задает цвет заднего плана элемента. Принимает те же значения, что и
свойство color, позволяя создавать контрасты и визуальные блоки.

11.

Текст: свойства
С помощью CSS мы можем легко управлять внешним видом текста на нашей веб-странице, делая его более читабельным и стилистически настроенным.
Шрифт
Размер
Выравнивание
font-family определяет тип шрифта (например,
font-size устанавливает размер текста.
text-align контролирует горизонтальное
Arial) и его запасные варианты.
выравнивание текста.
Примеры:
Примеры:
12px (маленький)
Примеры:
Arial, sans-serif (чистый, современный)
16px (обычный)
left (слева)
Georgia, serif (классический, для чтения)
24px (большой)
center (по центру)
"Courier New", monospace (фиксированная
2em (относительный размер)
right (справа)
ширина, для кода)
justify (по ширине)
Стиль
Оформление
font-weight для жирности и font-style для курсива добавляют акценты.
text-decoration добавляет линии к тексту.
Примеры:
Примеры font-weight:
underline (подчеркивание)
normal, bold, 700 (значения от 100 до 900, где 100 - самое тонкое начертание)
overline (надчеркивание)
line-through (зачеркивание)
Примеры font-style:
normal, italic
none (без линий)

12.

Оформляем блоки: линии, рамки, отступы
Чтобы выделить контент и улучшить его восприятие, в HTML и CSS мы используем различные элементы оформления. Они позволяют создавать визуальные разделители,
акцентировать внимание на блоках информации и обеспечивать комфортное чтение за счет внутренних отступов.
Горизонтальная линия-разделитель <hr>
Свойство border для рамок, горизонтальных линий, таблиц
Тег <hr> создает горизонтальную линию, которая служит отличным
Свойство border в CSS позволяет добавлять рамки вокруг любого HTML-
визуальным разделителем контента. Это блочный элемент, внешний вид
элемента, что идеально подходит для выделения блоков текста, изображений
которого можно полностью изменить с помощью CSS, превратив его из простой
или других компонентов страницы. Вы можете настроить толщину, стиль, цвет и
линии в сложный дизайнерский элемент.
даже закругление углов.

/* Подробная настройка рамки */
<hr>
.my-image {
border-width: 3px;

border-style: dashed; /* solid, dotted, dashed, double */
<hr class="my-line">
border-color: red;
/* Пример стилизации <hr> в CSS */
hr.my-line {
border: 1px solid #ccc; /* Рисуем только верхнюю границу */}
border-radius: 10px; /* Закругленные углы! */
}
/* Короткая запись для рамки */
.my-block {
border: 2px solid #3498db;
}
Эти инструменты помогут вам не только структурировать контент, но и придать вашей веб-странице уникальный и профессиональный вид.

13.

Списки
Списки помогают организовать информацию, делая ее легкой для
восприятия. Разделители используются для визуального отделения
секций контента.
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
</ul>
<ol>
Пункт 1
Пункт 2
1. Шаг первый
2. Шаг второй
Неупорядоченные списки (<ul>)
<li>Шаг первый</li>
отлично подходят для
<li>Шаг второй</li>
перечисления элементов без
</ol>
определенного порядка, а
упорядоченные (<ol>) — для
<hr>
пошаговых инструкций.

14.

CSS для списков: от простого к продвинутому
Погрузитесь в мир стилизации списков CSS, от базового изменения маркеров до продвинутых техник кастомизации.
Уровень 1: Базовый
Уровень 2: Средний
Уровень 3: Продвинутый
Изменение маркеров списка
Позиция и пользовательские маркеры
Полный контроль с сокращенным
Свойство list-style-type позволяет
list-style-position: управляет
свойством
легко менять вид маркеров:
расположением маркеров
list-style: сокращенное свойство
Неупорядоченные: square, circle,
относительно содержимого списка
для list-style-type, list-style-
disc, none
position и list-style-image в одной
Упорядоченные: decimal, lower-roman,
(inside или outside).
Пользовательские изображения:
upper-alpha
Используйте list-style-image:
Пример: Удаление маркеров для
url('marker.png'); для значков.
навигации с list-style-type: none;
строке.
Пример: list-style: square inside
url('bullet.gif');

English Русский Rules