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

Видео на Rutube

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

Представьте себе дом. HTML – это как каркас дома, его стены и комнаты, определяющие планировку и структуру. CSS – это как дизайн интерьера, обои, мебель и освещение, делающие дом уютным и красивым.

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

Что такое HTML?

HTML (Hypertext Markup Language), или Язык Гипертекстовой Разметки – это язык, который используется для создания структуры веб-страниц. Важно понимать, что HTML – это не язык программирования. Это язык разметки. Представьте, что вы пишете письмо и используете ручку, чтобы подчеркнуть важные моменты или выделить заголовки. HTML делает примерно то же самое, но для веб-страниц. Он позволяет браузеру понимать, где на странице находится заголовок, абзац текста, изображение или ссылка.

С помощью HTML вы создаёте веб-страницы для интернета, которые видят миллионы пользователей, или для локального использования, например, для внутреннего сайта вашей компании.

Как выглядит HTML?

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

<!DOCTYPE html>
<html>
<head>
    <title>Пример HTML-документа</title>
</head>
<body>
    <h1>Добро пожаловать на мою веб-страницу!</h1>
    <p>Это простой параграф текста, который объясняет основную идею HTML.</p>
    <hr>
    <p>Ниже вы увидите изображение:</p>
    <img src="https://via.placeholder.com/300x200" alt="Placeholder Image" width="300" height="200">
    <p>Изображения добавляют визуальную привлекательность веб-страницам.</p>
</body>
</html>

Этот код демонстрирует основные элементы HTML, которые мы будем изучать на курсе.

HTML-элементы создаются с использованием тегов. Тег – это команда для браузера, которая сообщает ему, как отображать контент. Большинство HTML-тегов парные и состоят из:

Открывающего тега: Начинается с угловой скобки <, затем идет название тега, и заканчивается угловой скобкой >. Например, для создания параграфа используется открывающий тег <p>.
Закрывающего тега: Выглядит так же, как открывающий, но с добавлением слеша / перед названием тега. Для параграфа это будет </p>.

Пример: Базовая структура HTML-документа

Прежде чем углубляться в детали, давайте создадим наш первый HTML-файл. Для этого выполним определенный порядок действий:

Создайте папку курса, в которой будут храниться все файлы, связанные с ним. Имена папок и файлов лучше писать латинскими буквами и использовать нижнее подчеркивание для разделения слов, это хорошая практика в веб-разработке.
Откройте Visual Studio Code. Внутри VS Code откройте только что созданную папку.
Создайте новый файл и сохраните его как test.html. Важно: расширение файла должно быть .html.
Напишите в файле test.html следующий код:

<p>Параграф</p>

В этом примере:

<p> – это открывающий тег параграфа.
</p> – это закрывающий тег параграфа.
Параграф – это контент элемента, то есть сам текст абзаца.

Важно: Некоторые теги, как <hr>, <br> (перенос строки), <img> (изображение) являются самозакрывающимися. Исторически, они могли быть записаны как <hr> или <hr />. В современном HTML5, слэш в конце самозакрывающихся тегов не обязателен, но его добавление не является ошибкой. Главное - помнить, что им не нужен закрывающий тег типа </hr>.

Различные HTML-теги

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

Вот некоторые категории HTML-тегов и их общее назначение, чтобы дать вам представление о разнообразии возможностей HTML:

Теги для работы с текстом: Предназначены для оформления и структурирования текстового контента. Сюда входят теги для создания заголовков разных уровней, параграфов, списков (нумерованных и маркированных), цитат, предварительно форматированного текста и многого другого. Эти теги помогают организовать текст на странице, сделать его читабельным и выделить важные моменты.
Теги для добавления изображений и мультимедиа: HTML позволяет встраивать на веб-страницу изображения, аудио и видео. Соответствующие теги позволяют указать путь к файлу изображения или мультимедиа, добавить подписи, управлять параметрами воспроизведения и т.д. Это делает страницы визуально богатыми и интерактивными.
Теги для создания ссылок и навигации: Ссылки – основа веба. HTML предоставляет теги для создания гиперссылок на другие веб-страницы, файлы или разделы текущей страницы. Эти теги позволяют пользователям перемещаться по сайту и в интернете.
Теги для создания таблиц: HTML таблицы используются для представления табличных данных на веб-странице. Теги для таблиц позволяют создавать строки, столбцы, ячейки, заголовки таблиц и управлять их структурой.
Теги для создания форм: Формы необходимы для сбора данных от пользователей. HTML формы позволяют создавать различные поля ввода (текстовые поля, пароли, флажки, радиокнопки и т.д.), кнопки отправки, и другие элементы управления, чтобы пользователи могли взаимодействовать с сайтом, отправлять данные и получать обратную связь.
Семантические теги: HTML5 ввел новые семантические теги, которые помогают более точно описывать структуру и смысл контента на странице, делая код более понятным для браузеров, поисковых систем и программ чтения с экрана для людей с ограниченными возможностями. Примеры семантических тегов: <header>, <nav>, <article>, <aside>, <footer> и другие.

Это лишь небольшая часть HTML-тегов. Полный список HTML-тегов и их описание вы всегда можете найти в справочниках по HTML, например, на ресурсе Mozilla Developer Network (MDN): https://developer.mozilla.org/ru/docs/Web/HTML (скопируйте и вставьте эту ссылку в адресную строку браузера, чтобы перейти на страницу). Не пытайтесь запомнить все теги сразу! Мы будем изучать их постепенно, по мере необходимости, на протяжении всего курса.

Как работает HTML?

HTML-код – это просто текст. Вы можете писать его в любом текстовом редакторе. Чтобы браузер мог "понять" ваш HTML-код и отобразить веб-страницу, вам нужно сохранить файл с расширением .html.

После того, как вы сохранили test.html, найдите этот файл на вашем компьютере и откройте его в любом веб-браузере (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge и т.д.). Просто дважды кликните по файлу. Браузер прочитает HTML-код и отобразит веб-страницу.

Браузер отобразит всё содержимое вашего HTML-документа, за исключением информации, которая находится в секции <head>. Секция <head> предназначена для служебной информации, такой как заголовок страницы, метаданные для поисковых систем, подключение CSS и JavaScript файлов. Подробнее о секции <head> мы поговорим на следующем уроке.

Что такое CSS?

CSS (Cascading Style Sheets), или Каскадные Таблицы Стилей – это язык, который отвечает за визуальное оформление веб-страниц. Если HTML – это скелет, то CSS – это косметика, одежда и аксессуары. CSS позволяет вам добавить стиль и значительно улучшить внешний вид элементов HTML. С помощью CSS вы можете управлять:

Цветом текста и фона
Шрифтами
Размерами элементов
Расположением элементов на странице
И многим другим!

Как выглядит CSS?

CSS состоит из правил, которые определяют стиль для HTML-элементов. Каждое CSS-правило состоит из трех основных частей:

Селектор: Указывает, к какому HTML-элементу (или элементам) применяется стиль. Селектор "выбирает" элементы, которые нужно стилизовать.
Свойство: Определяет, какой аспект внешнего вида элемента нужно изменить (например, цвет текста, размер шрифта).
Значение: Задает новое значение для выбранного свойства (например, красный цвет, размер шрифта 16 пикселей).

Структура CSS-правила:

селектор {
    свойство: значение;
    другое-свойство: другое-значение;
    /* ... и так далее ... */
}

Пример: Стилизация параграфов

p {
    color: red;
    font-weight: bold;
}

Разберем это правило:

p – это селектор. Он выбирает все HTML-элементы <p> (параграфы) на странице.
color: red; – это объявление свойства. color – это свойство, которое задает цвет текста. red – это значение, устанавливающее красный цвет.
font-weight: bold; – еще одно объявление свойства. font-weight – это свойство, отвечающее за жирность шрифта. bold – значение, делающее текст жирным.

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

Селекторы элементов (тегов): Выбирают все элементы определенного типа, например, все параграфы <p>, все заголовки <h1>, и т.д.
Селекторы классов: Позволяют применять стиль к элементам с определенным классом. Класс – это атрибут HTML, который позволяет группировать элементы и применять к ним общие стили.
Селекторы идентификаторов (ID): Позволяют применять стиль к уникальному элементу на странице, у которого есть определенный идентификатор (ID). ID также является атрибутом HTML, но в отличие от классов, ID должен быть уникальным в пределах одной HTML-страницы.
Селекторы атрибутов: Выбирают элементы на основе наличия или значения атрибутов HTML-тегов.
Псевдоклассы и псевдоэлементы: Позволяют стилизовать элементы в зависимости от их состояния (например, при наведении курсора мыши, при фокусе) или части элемента (например, первая буква параграфа, маркер списка).
Комбинаторы селекторов: Позволяют создавать более сложные и специфичные селекторы, комбинируя простые селекторы для выбора элементов в зависимости от их вложенности и взаимосвязи в HTML-структуре.

Мы начнем с самых простых селекторов – селекторов элементов, а затем постепенно будем изучать более сложные типы селекторов, чтобы вы могли максимально гибко управлять стилем ваших веб-страниц.

Как работает CSS?

CSS-код пишется в отдельных файлах с расширением .css. Эти CSS-файлы затем подключаются к вашим HTML-документам. Подключение CSS к HTML позволяет применять стили, описанные в CSS-файле, ко всему содержимому HTML-страницы.

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

Итоги урока

Давайте подведем итоги нашего первого урока:

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

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

На следующем уроке мы углубимся в изучение структуры HTML-документа, подробнее рассмотрим секцию <head> и узнаем, как правильно подключать CSS к HTML-страницам.

До встречи на следующем уроке!