Основы веб-разработки
Если HTML — это скелет страницы, то теги — это отдельные кости этого скелета. Каждая кость имеет своё назначение. Позвоночник держит спину, рёбра защищают сердце, череп защищает мозг. В HTML точно так же. Каждый тег служит своей цели.
Думайте о тегах как о командах. Вы командуете браузеру: «Это заголовок, покажи его большим шрифтом». Или: «Это ссылка, при клике переходи по адресу». Браузер слушается и выполняет команды. Как дрессированная собака, только быстрее и точнее.
Каждый тег пишется в угловых скобках. Открывающий тег выглядит как <тег>. Закрывающий как </тег>. Между ними живёт содержимое. Представьте матрёшку. Открываете верхнюю половинку, внутри лежит что-то, закрываете. Браузер видит открывающий тег и понимает: «Сейчас начнётся содержимое определённого типа». Видит закрывающий и думает: «Всё, содержимое закончилось, можно переходить дальше».
Начнём с самых важных тегов, которые встречаются на каждом втором сайте.
Тег <h1> — это главный заголовок страницы. Как название книги на обложке. Крупное, заметное, читаете первым делом. На странице должен быть только один <h1>, потому что главный заголовок один. Браузер показывает его самым большим шрифтом. Пишете: <h1>Добро пожаловать на мой сайт</h1>. Браузер выводит эту строку огромными буквами, как вывеску над магазином.
Теги <h2>, <h3>, <h4> — это подзаголовки. От <h1> к <h6> размер постепенно уменьшается. Как главы в книге. Сначала название книги, потом название главы, потом название параграфа. <h2> используйте для основных разделов, <h3> для подразделов внутри <h2>. Это помогает организовать информацию, как полки в шкафу. На верхней полке важное, на нижних менее важное.
Тег <p> — это параграф. Обычный текст, как в книге или газете. Всё, что пишете внутри <p>, браузер показывает как обычный текст с отступами сверху и снизу. <p>Это простой текст, ничего сложного</p>. Когда напишете второй параграф, браузер автоматически добавит между ними воздух, чтобы не слипались. Как абзацы в сочинении.
ДОБАВИТЬ
Тег <a> — это ссылка. Гиперссылка, которая переводит вас с одной страницы на другую. Без ссылок интернет был бы как город без дорог. Каждый дом стоит отдельно, а дойти от одного к другому невозможно. Браузер показывает ссылки синим цветом и подчёркивает. Пишете: <a href="https://example. com«> Кликните сюда</a>. Атрибут href — это адрес, куда идти. Как указатель на дороге: «Москва 100 км, направо».
Тег <img> — это изображение. Картинки, фотографии, иконки, мемы. Всё визуальное. Пишете: <img src="foto. jpg" alt="Описание фото">. Атрибут src — это адрес файла с картинкой. Атрибут alt — это текст на случай, если картинка не загрузилась. Или для людей с плохим зрением, которые используют программы чтения с экрана. Этот тег не имеет закрывающей части, потому что внутри него ничего нет. Как дорожный знак, он самодостаточен.
Теги <ul>, <ol> и <li> — это списки. <ul> — это неупорядоченный список, как список покупок. Перед каждым пунктом точка. <ol> — это упорядоченный список, как инструкция по сборке мебели. Перед каждым пунктом номер. <li> — это элемент списка. Выглядит так:
Браузер покажет три строки с точками. Если нужны номера, меняете <ul> на <ol>. Списки — это способ структурировать перечисления, чтобы не превращалось в сплошной текст.
Теги <strong> и <em> — это акценты в тексте. <strong> делает текст жирным и говорит браузеру: «Это важно, обратите внимание». <em> делает текст наклонным и говорит: «Это акцент, интонация». Используйте: <strong>Срочно!</strong> и <em>Может быть</em>. Раньше программисты использовали <b> для жирного и <i> для наклонного. Но это неправильно. <b> и <i> просто меняют вид, а <strong> и <em> несут смысл. Как разница между криком и просто громкой речью.
Теги <div> и <span> — это контейнеры. Они не имеют своего смысла, но нужны для группировки. Как коробки для вещей. <div> — это большая коробка, занимает всю ширину. <span> — это маленькая коробка, занимает только место для содержимого. Используете их, когда хотите применить стиль к группе элементов. Например, обернуть три параграфа в <div> и покрасить их все в синий.
Теги <header>, <main>, <footer> — это семантические блоки. <header> — это шапка сайта, где живут логотип и меню. <main> — это основное содержимое, то, ради чего человек пришёл. <footer> — это подвал, где прячутся контакты и копирайт. Это называется семантическая разметка. Вы не просто кидаете элементы на страницу, а говорите браузеру: «Это голова, это тело, это ноги». Как разметка анатомии в учебнике биологии.
Теперь главное правило. Когда выбираете тег, задайте себе вопрос: «Что это за содержимое?» Это заголовок? Используйте <h1> или <h2>. Это обычный текст? Используйте <p>. Это картинка? Используйте <img>. Правильный тег для нужного содержимого. Когда пишете семантически правильно, сайт становится понятен браузеру, поисковым роботам и людям с ограничениями. Как хорошая речь понятна всем.
ДОБАВИТЬ
Это называется семантическая разметка. Звучит научно, но смысл простой: используйте теги по назначению. Не пишите всё в <div>. Не форматируйте с помощью <b> и <i>. Используйте правильные теги. Как писать грамотно на русском. Можете писать всё прописными буквами, ставить восклицательные знаки везде. Люди поймут. Но с грамматикой читать приятнее и понятнее.
На практике часто встречаются ошибки. Начинающие пишут пять <h1> на одной странице. Или забывают закрывать теги. Или используют <b> вместо <strong>. Браузер обычно прощает и показывает что-то похожее на задуманное. Но это создаёт технический долг. Потом придётся переписывать. Лучше сразу делать правильно. Как в жизни: можете наспех собрать шкаф без инструкции, но лучше потратить лишние полчаса и собрать по правилам.
Создайте новый файл в VS Code. Назовите tags.html. Напишите туда:
Сохраните файл. Откройте в браузере. Видите? Браузер автоматически сделал заголовок большим, параграфы с отступами, ссылку синей. Вы просто сказали, что это такое, а браузер сам решил, как показать. Это и есть сила семантики.
С этими тегами вы уже можете создавать полноценные страницы. Остальные теги — это специальные случаи для конкретных задач. Но основа — это заголовки, параграфы, ссылки, картинки и списки. Запомните их, используйте правильно, и ваш код будет чистым и понятным. Если пока что трудно всё это запомнить, это нормально. В следующих уроках разберём все теги на практике более подробно.
Теперь есть всё, чтобы уже начать вёрстку. Откройте файл в фигме. Давайте присмотримся, что в первую очередь бросается в глаза. Видите большую надпись «ADC Community» вверху страницы? Это главный заголовок, заголовок страницы. Крупный, чёрный, невозможно не заметить.
Главный заголовок на странице должен быть один. Как название статьи в газете. То же самое с <h1>. Один на страницу. Он говорит поисковым роботам и читателям: «Вот о чём эта страница».
Давайте посмотрим ниже. Видите текст помельче? «Добро пожаловать в ADC — уникальное пространство Школы дизайна НИУ ВШЭ…» Это обычный параграф, тег <p>. Он идёт после заголовка и объясняет суть. Как первый абзац в статье, который вводит читателя в тему.
Создадим на рабоче столе новую папку и назовём её «ADC». Переместим её в VS Code. Наше рабочее пространство готово к работе.
Теперь создадим в этой папке новый файл. Назовите его about.html. Напишите базовую структуру, пишем! и нажимает Enter у нас создасться html разметка. Внутри тега <body> поместим:
Сохраните файл. Откройте в браузере. Видите? Заголовок автоматически стал большим. Параграф поменьше, с отступом снизу. Браузер сам применил стили по умолчанию.
Вся информация, написанная внутри тега <body>, будет видна на странице браузера.
Теперь также давайте поступим со следующими текстами. Когда пишете несколько параграфов подряд, каждый оборачиваете в свой <p>.
Вот так должен у вас выглядеть итоговый файл:
Обновите браузер. Видите? Появились остальные абзацы. Между ними есть воздух, отступ. Браузер автоматически добавляет его, чтобы текст не слипался в одну кашу.
Также у нас есть другие заголовки: «Наш ADC», «Что изучают студенты ADC», «Контакты». Помните, что заголовок первого уровня может быть на странице только один, поэтому все последующие будут второго уровня и ниже. Давайте добавим их:
А также есть и третьего уровня заголовки: «Наша история», «Веб-вёрстка и веб-программирование», «UX/UI дизайн и прототипирование», «Креативное программирование, генеративная графика», «Системный дизайн и дизайн-системы». Добавим и их:
Давайте приглядимся внимательнее. Нашу страницу можно разделить на три смысловые части: хедер (верхняя часть с логотипом и ссылкой на раздел со статьёй об истории ADC), основная часть с текстами и картинками и футер (нижний блок с логотипом, ссылкой на раздел со статьёй и социальные сети). Создададим такую структуру в нашем проекте:
Наши тексты помещаем между открывающим и закрывающим тегом <main>, так как тексты — это основная информация на странице.
Теперь наша базовая структура полностью готова. В следующем уроке рассмотрим, как добавить к нашему проекту картинки и ссылки. В качестве домашнего задания вам нужно добавить все заголовки и тексты на страницу статьи («Наша история»).
Посмотрите на хедер сайта ADC. Видите текст «Наша история»? Это ссылка. Без ссылок интернет был бы набором изолированных страниц. Как книги в библиотеке без каталога. Нашли одну книгу, прочитали, но не знаете, где искать следующую.
Ссылки — это тропинки между страницами. Они превращают разрозненные документы в единую сеть. Именно поэтому интернет называют Всемирной паутиной. Страницы связаны между собой ссылками, как нити в паутине.
Давайте посмотрим внимательнее на любую страницу. В хедере есть ссылка, давайте сделаем её кликабельной:
Тег <a> — это ссылка. Атрибут href указывает, куда ведёт ссылка. Это как адрес на конверте. Текст между <a> и </a> — это то, что видит пользователь. Кликабельный текст.
Сохраните файл. Откройте в браузере. Видите синий подчёркнутый текст «Наша история»? Это браузер показал ссылку. Наведите курсор. Курсор превратился в руку с указательным пальцем. Это значит, элемент кликабельный. Кликните. Браузер попытается открыть ссылку на одину из наших страниц.
Если файла нет, увидите ошибку. Это нормально. Важно понять: атрибут href указывает путь. Если файл лежит в той же папке, пишете просто имя файла, если в другой папке, указываете путь: pages/about.html. Если это внешний сайт, пишете полный адрес: https://example.com. Чтобы у нас заработала сслыку на историю, давайте создадим еще один html файл рядом с первым и назовем history.html. Сохраним, обновим страницу в браузере. Видите? Ссылка заработала.
Также у нас есть ссылки на внешние источники. Например, сайт Школы дизайна. Давайте добавим и их.
Для чего мы создали такую странную структуру? Она нам нужна чтобы чуть дальше добавить изображение стрелки. <div> нам нужен для «обёртки» текста и картинки. Так мы говорим, что они вместе являются ссылкой.
Перейдём к картинкам. Чтобы добавить их на страницу используется тег <img>. Изображение. Но здесь есть особенность. У этого тега нет закрывающей части. Пишется так:
Атрибут src — это путь к файлу с картинкой. Атрибут alt — это альтернативный текст. Он показывается, если картинка не загрузилась. Или озвучивается программами чтения с экрана для людей с плохим зрением.
Добавим все картинки к нам на страницу. Предварительно скачайте все изображения, создайте внутри основной папки еще одну и назовите images, поместите туда все картинки.
Видите чёрный круглый логотип ADC в левом углу экрана? Это тоже изображение. Давайте добавим и его, а также логотип Telegram.
Теперь самое интересное. Можете сделать изображение кликабельным. Обернуть <img> в <a>. Получится ссылка-картинка. Как баннер, на который кликаете и переходите на другую страницу.
Теперь логотип стал кликабельным. Наведите курсор, и он превратится в руку. Слеш в ссылки у логотипа обозначает главную страницу, страницу, на которой мы сейчас находимся. Это общепринятый стандарт в индустрии, когда при нажатии на логотип мы можем перейти на главную страницу.
Не забудем и про изображения стрелок. Помните, когда мы разбирали странную структуру ссылки?
В этот раз мы добавили картинку с разрешением «svg», так как наша стрелка является графикой, а её мы сохраням в формате svg, так как у него лучше прорисовка. Но, зная это, не нужно сохранять все картинки в этом формате, потому что они весят очень много, и ваш сайт будет загружаться целую вечность.
Перейдём к последней теме этого урока, кнопки. На нашем сайте есть две кнопки: «Посмотреть» и «Отправить». Последняя находится в форме, её мы будем делать в следующем уроке. Давайте добавим кнопку.
Кнопка создается при помощи тега <button> и помещения текста внутрь. Вот так просто. Функционал кнопки мы рассмотрим в будущих уроках по JavaScript.
Мы завершили этот длинный урок. В качестве домашнего задания добавьте на страницу статьи точно также все картинки.
Посмотрите на дизайн сайта ADC. Видите внизу страницы форму обратной связи? Три поля для ввода: Имя, Фамилия, Номер телефона. Под ними чёрная кнопка «Отправить». Формы это основной способ общения между пользователем и сайтом. Через них регистрируются, оставляют контакты, отправляют сообщения, оформляют заказы.
Давайте добавим форму к нам в код. Форма в HTML создаётся через тег <form>:
Тег <form> — это контейнер для всех полей. Внутри живут элементы ввода. Тег <input> — это поле для ввода текста. Атрибут type определяет тип данных: text для текста, tel для телефона, email для почты. Атрибут placeholder показывает подсказку внутри поля, пока оно пустое.
Тег <button> с атрибутом type="submit» — это кнопка отправки. Когда пользователь нажимает её, форма отправляется. Пока никуда не отправляется, потому что не указали адрес обработчика, но структура готова.
Сохраните файл. Откройте в браузере. Видите три поля и кнопку? Попробуйте ввести текст. Поля работают. Нажмите кнопку. Страница перезагрузится, потому что форма пытается отправиться, но некуда. Это нормальное поведение.
Атрибут required делает поле обязательным. Добавьте его к каждому полю:
Теперь если пользователь не заполнит поле, браузер не даст отправить форму и покажет подсказку.
Если вы выполняли все домашние задания, то у вас должна была быть почти готова страница статьи. Но на ней не хватает одного важного элемента — цитаты. Давайте её добавим. В HTML используем тег <blockquote> для цитаты и <cite> для подписи:
Тег <blockquote> говорит браузеру: «Это цитата, блочная, отдельная от основного текста». Тег <cite> указывает автора или источник. Браузер по умолчанию добавит отступы слева к <blockquote>, но внешний вид настроите позже через CSS.
Осталось добавить к нашему сайту одну изюминку, подчёркивания. Видите, например, на главной странице под польшой фотографией? Такие линии делают через тег <hr> или через CSS с помощью свойства border-bottom.
Тег <hr> создаёт горизонтальную линию. Браузер по умолчанию нарисует её серой, во всю ширину. Позже через CSS мы изменим цвет, толщину, ширину.
Также добавим такии линии и в блок «Что изучают студенты ADC»:
Мы создали «скелет» нашего сайта. Теперь перейдём к самому приятному, добавим жизни нашему макету, изучим CSS и стилизуем сайт.
До сих пор мы писали только HTML. Создавали структуру, добавляли заголовки, параграфы, картинки. Браузер показывал всё это с базовыми стилями по умолчанию. Чёрный текст на белом фоне, синие ссылки, стандартные размеры. Работает, но выглядит как черновик.
Посмотрите на дизайн сайта ADC. Видите зелёные акценты? Крупные заголовки определённым шрифтом? Серую плашку с цитатой? Всё это сделано с помощью CSS. Cascading Style Sheets, каскадные таблицы стилей.
Представьте дом. HTML это план дома. Где стены, где окна, где двери. CSS это дизайн интерьера. Какого цвета стены, какая мебель, как расставлено всё в пространстве. Без HTML нет структуры. Без CSS нет красоты.
CSS говорит браузеру, как показывать элементы. Какой цвет, какой размер, где расположить, какой шрифт. HTML описывает содержимое, CSS описывает внешний вид. Это называется разделение содержимого и оформления.
Есть три способа подключить CSS к HTML. Первый способ встроенные стили, inline. Пишете стили прямо в теге:
Атрибут style содержит CSS-правила. color: green делает текст зелёным. Но это плохой способ. Если нужно изменить цвет на всех заголовках, придётся править каждый тег вручную. Как в старые времена веба. Не используйте этот способ.
Второй способ внутренние стили, internal. Пишете CSS внутри HTML-файла, в теге <style> в секции <head>:
Теперь все <h1> на странице станут зелёными размером 48 пикселей. Изменили правило в одном месте, эффект применился везде. Это лучше, но всё ещё не идеально.
Третий способ внешние стили, external. Создаёте отдельный файл с расширением .css и подключаете его к HTML. Это правильный способ.
Создайте новый файл в VS Code. Назовите его style.css. Напишите простое CSS-правило:
Сохраните файл. Теперь в index.html подключим наш CSS:
Тег <link> подключает внешний CSS-файл. Атрибут rel="stylesheet» говорит: «Это таблица стилей». Атрибут href="style.css» указывает путь к файлу.
Сохраните и откройте index.html в браузере. Видите? Заголовок стал зелёным. Браузер прочитал HTML, увидел ссылку на CSS-файл, загрузил его и применил правила. Всё автоматически.
Теперь посмотрите на правила написания CSS. Каждое правило состоит из селектора и блока объявлений:
Селектор выбирает элемент. h1 выбирает все заголовки первого уровня. Фигурные скобки открывают блок. Внутри блока свойства и значения. color: green говорит: «Цвет текста зелёный». Точка с запятой завершает объявление.
Важно: CSS чувствителен к синтаксису. Забыли точку с запятой, правило не сработает. Написали свойство с ошибкой, браузер проигнорирует. Не закрыли фигурную скобку, всё сломается.
Когда пишете CSS, используйте осмысленные отступы. Это помогает читать код:
Каждое свойство на новой строке, с отступом. Открывающая скобка на той же строке, что селектор. Закрывающая скобка на отдельной строке. Это стандарт.
Комментарии в CSS пишутся между /* и */. Они не влияют на код, но помогают вам и другим разработчикам понять, что происходит:
Теперь важное правило. CSS работает каскадом. Если несколько правил применяются к одному элементу, побеждает последнее по порядку:
Все параграфы станут зелёными, потому что второе правило идёт позже и перезаписывает первое.
Запомните главное. CSS подключается через <link> в секции <head>. Правила пишутся в формате селектор { свойство: значение; }. Комментарии между /* и */. Отступы делают код читаемым. Каждое правило на новой строке.
Всегда держите CSS в отдельном файле. Не пишите стили внутри HTML. Это называется разделение ответственности. HTML отвечает за структуру, CSS за внешний вид. Каждый файл делает своё дело. Когда захотите изменить дизайн всего сайта, поменяете один файл CSS, и все страницы обновятся.
Чтобы у нас во всех браузерах отображались одни и те же стили, нам необходимо убрать все стандартные правила. Для этого скачайте файл по ссылке и поместите его в папку stylesheet в проекте. И подключите его в <head>
Продолжим изучение CSS на реализации стилей на нашем сайте. Посмотрите на дизайн. Видите крупные закруглённые картинки с зелёными логотипами? Видите чёрную кнопку «Отправить» с закруглёнными краями? Видите ссылку внизу страницы «Наша история», оформленные определённым образом? Всё это делается через CSS с помощью классов.
Классы — это способ присвоить имя элементу или группе элементов и применить к ним особые стили. Представьте школьный класс. Учитель говорит: «Все откройте учебники». Это как селектор по тегу, обращение ко всем. Учитель говорит: «Группа А, выходите к доске». Это как класс, обращение к конкретной группе.
В HTML добавляете атрибут class к элементу. В CSS пишете правила для этого класса с точкой перед именем. Класс можно использовать многократно: добавьте его десяти элементам, все получат одинаковые стили.
Начнём с картинок. На главной странице ADC видите фотографию студентов за компьютерами? Картинка большая, занимает пространство, с закруглёнными углами. Без стилей картинка была бы в полный размер, растянутая или сжатая.
У нас уже есть HTML с картинкой, добавим к нему класс:
Класс hero-image присвоен картинке. Теперь в CSS оформите её:
width: 100% растягивает картинку на всю ширину контейнера. max-width: 1048px ограничивает максимальную ширину. border-radius: 12px закругляет углы.
Тот же класс добавьте и картинке перед формой. У неё таже ширина и скругдение краёв. А высоту браузер автоматически расчитает с учетом соотношения сторон.
У нас есть самая большая картинка после заголовка «ADC Community», довайте стилизуем её, но сначала добавим класс:
Напишем CSS:
Осталось добавить стилей для ссылок в виде картинок, логотипа и телеграм. Обратите внимание, что в хедере размер иконок меньше, чем в футере, нельзя будет просто скопировать класс.
Пропишем CSS свойства:
Посмотрите, если у нас есть классы, у которых повторяются стили, то мы можем их указать через запятую, после поставить фигурние скобки и написать свойства, которые им всем принадлежат.
Теперь кнопки. На странице регистрации ADC видите чёрную кнопку «Отправить»? Она широкая, закруглённая, с белым текстом. Без стилей кнопка маленькая, серая, непривлекательная.
HTML с кнопкой у нас уже есть, добавим классы:
Класс submit-button присвоен кнопке. В CSS оформите её:
padding: 16px 32px делает кнопку высокой, первое значение — это отступы сверху и снизу, а второе соответственно — слева и справа. border-radius: 900px максимально закругляет края. cursor: pointer меняет курсор на руку при наведении. font-size: 16px задает тексту размер. color: white меняет цвет текста на белый, а background-color: #313131 задаёт цвет фону кнопки.
Теперь поля формы. На главной странице видите три светло-серых поля для ввода? Они широкие, с отступами внутри, без рамок. Класс form-input уже присвоен им выше.
В CSS оформите поля:
Здесь всё нам знакомо, кроме placeholder. Он стилизует текст подсказки внтури полей формы.
Теперь ссылки. Внизу страницы ADC видите навигацию «Наша история»? Ссылка чёрная без подчёркивания. По умолчанию браузер показывает ссылки синими с подчёркиванием.
Добавим ссылке класс nav-link
В CSS оформите:
text-decoration: none убирает подчёркивание.
Присвоим тот же класс и ссылке в хедере:
У нас есть ещё сслыки с иконаками, помните?
Добавим стилей картинкам
Посмотрите на страницу со списком направлений ADC. Видите заголовки «Веб-вёрстка и веб-программирование», «UX/UI дизайн и прототипирование»? Под каждым описание и тонкая серая линия. Это оформление через классы.
Чуть-чуть допишем нашу секция про программу курса:
Мы обернули блок с контентом в тег <section>, говоря тем самым, что всё, что внутри, связано между собой, а загловки с параграфами поместили внутрь <div> по той же причине. Вдальнейшем это нам очень поможет в правильном расположении элементов между собой.
В CSS оформите секцию:
border: none убирает стандартную рамку, border-top: 1px solid #313131 создаёт тонкую серую линию сверху. Каждое направление выглядит как отдельный блок с разделителем.
Позже мы добавми правильные отступы между элементами.
Запомните главное. Классы присваиваются через атрибут class в HTML. В CSS пишутся с точкой перед именем. Один класс можно использовать многократно для группы элементов. Картинки стилизуются через border-radius для закругления, max-width для ограничения размера. Кнопки через padding, border-radius, background-color. Поля формы через padding, border, background-color. Ссылки через text-decoration, color.
Стилизуйте также картинки и ссылки на странице статьи.
До сих пор использовали стандартные шрифты браузера. Arial, Times New Roman, те, что установлены на каждом компьютере. Они работают, но выглядят обыденно. Посмотрите на сайт ADC. Видите совершенно другой шрифт в заголовках и тексте? Это не Arial. Это Inter.
Шрифт формирует характер сайта. Один шрифт серьёзный, другой игривый, третий технологичный. Inter нейтральный и читаемый, подходит для образовательных проектов. Чтобы использовать его на сайте, нужно подключить через Google Fonts.
Откройте браузер. Зайдите на fonts.google.com. Найдите шрифт Inter. Выберите начертания: Regular 400, Medium 500, Bold 700. Нажмите «Get font», затем «Get embed code». Скопируйте код для вставки в <head>.
Откройте index.html. В секции <head> добавьте ссылку на шрифт:
Три строки подключают шрифт. Первая устанавливает соединение с Google Fonts. Вторая с сервером шрифтов. Третья загружает Inter с нужными начертаниями. Теперь шрифт доступен на сайте.
Откройте style.css. Примените Inter ко всему сайту:
font-family: «Inter», sans-serif устанавливает Inter основным шрифтом. Если Inter не загрузится, браузер возьмёт любой sans-serif шрифт. Сохраните. Обновите страницу. Видите? Весь текст стал Inter.
Теперь настройте разные начертания для разных элементов:
font-weight: 600 делает заголовки жирными. font-weight: 400 делает текст обычным. line-height задаёт высоту строки. Каждый элемент получает своё начертание, создаётся визуальная иерархия.
Теперь позиционирование. Посмотрите на главную страницу ADC. Видите зелёный градиент вверху и внизу страницы? Он начинается с прозрачного и переходит в яркий зелёный. Это фон, который нужно разместить в определённом месте страницы.
Без позиционирования элементы располагаются друг за другом сверху вниз. Заголовок, потом параграф, потом картинка. Как текст в документе. Но иногда нужно разместить элемент в конкретном месте, независимо от других. Для этого существует position.
Давайте добавим наш градиент в хедер:
Класс gradient-bg это пустой <div>, который станет фоном. В CSS позиционируйте его так:
position: relative на футере создаёт контекст для абсолютного позиционирования внутри. position: absolute на градиенте вырывает его из потока документа и позиуионируется он уже относительно элемента с position: relative. top: 0 прижимает к верхнему краю. left: 0 прижимает к левому краю. width: 100% растягивает на всю ширину. height: 700px задаёт высоту.
background: linear-gradient () создаёт градиент. rgba (255, 255, 255, 0.00) прозрачный зелёный сверху. #78FF3A яркий зелёный снизу. z-index: −1 отправляет градиент за контент, чтобы текст был поверх.
Обновите браузер. Видите? Вверху страницы зелёный градиент. Текст и ссылки поверх него, читаемые.
Теперь сделаем тоже самое для футера:
И стилизуем немного по-другому, так как наш градиент идёт уже от прозрачного к зелёному:
Добавили footer рядом с header, оба они имеют одинаковое свойство. А также развернули наш градиент.
Запомните главное. Сторонние шрифты подключаются через Google Fonts, ссылка в <head>, использование через font-family в CSS. font-weight управляет толщиной шрифта: 400 обычный, 500 средний, 700 жирный. Позиционирование управляет размещением элементов: relative для контекста, absolute для точного размещения, fixed для прикрепления к экрану. Градиенты создаются через linear-gradient (). z-index управляет слоями, большее число выше.
Теперь в качестве домашнего задания вам необходимо добавить такие же градиенты на страницу статьи.
Посмотрите на главную страницу сайта ADC. Видите крупный заголовок «ADC Community» по центру? Вокруг него есть пространство. Картинка ниже не прилипает к нему, есть воздух. Навигация вверху не прилипает к краю экрана.
Всё это пространство контролируется через блочную модель. Каждый элемент на странице — это коробка. У коробки есть содержимое, внутренние отступы, рамка и внешние отступы. Как матрёшка. Внутри содержимое, потом слой отступов, потом рамка, потом ещё слой отступов.
Представьте картину в рамке на стене. Само изображение — это содержимое. Паспарту вокруг изображения — это padding, внутренний отступ. Рама — это border. Расстояние от рамы до других картин на стене — это margin, внешний отступ.
Начнём с padding. Внутренний отступ — это пространство между содержимым и краем элемента. Посмотрите на отступы внутри полей формы. Это padding.
У нас уже есть HTML код формы:
В CSS добавьте padding:
padding-right: 16px означает отступ 16 пикселей справа. Текст не прилипает к краям, блок дышит. Без padding текст касался бы границ, читать было бы неудобно.
Также зададим padding кнопке:
Добавим свойство в CSS:
Здесь padding мы уже задали двумя значениями. 16px — это расстояние сверху и снизу, а 32px — слева и справа. Можно здавать и четыре занчения, но главное запомнить, что порядок важен: верх, право, низ, лево. По часовой стрелке, начиная сверху.
Теперь margin. Внешний отступ — это расстояние между элементом и другими элементами. Посмотрите на страницу ADC. Между заголовком «ADC Community» и картинкой есть расстояние. Между картинкой и текстом есть расстояние. Между секциями есть расстояние. Это margin.
Добавьте margin к заголовку:
margin-bottom: 64px создаёт отступ снизу от заголовка. Следующий элемент отодвинется на 64 пикселя.
Добавьте margin к картинке:
Посмотрите на секцию «Что изучают студенты ADC». Видите список направлений с разделителями? Каждое направление — это отдельный блок с отступами.
В CSS добавьте padding и margin:
Теперь border. На нашем сайте нет элементов с обводкой. Но есть обводка у кнопки, которая добавляется по умолчанию во всех браузерах. Давайте её уберем
Зайдите в файл reset.css и там добавьте павило:
Зайдите в браузер, обновите страницу. Теперь у всех кнопок исчезла обводка
Запомните главное. Padding внутренний отступ, между содержимым и краем элемента. Margin внешний отступ, между элементом и другими элементами. Border рамка вокруг элемента. Порядок значений: верх, право, низ, лево.
Мы завершили обучение базовым стилям в css. Конечно, это еще не все, страницы пока не выглядят так же, как и на макете. К финальному виду мы их приведём в поледующих уроках. В качестве домажнего задания добавьте margin и padding для элементов на странице статьи.
До сих пор мы создавали статичные страницы. HTML описывает структуру, CSS делает красиво, но страница не реагирует на действия. Нажимаете кнопку, ничего не происходит. Вводите текст в поле, никто не проверяет. Страница как фотография, смотреть можно, взаимодействовать нельзя.
Посмотрите на дизайн ADC. Видите иконки Telegram и VK справа внизу в футере? Кликаете на них, открываются соцсети. Видите видеоплеер с кнопкой воспроизведения? Кликаете, видео запускается. Это работа JavaScript.
JavaScript это язык программирования, который делает страницу живой. HTML скелет, CSS одежда, JavaScript мышцы и мозг. Без JavaScript страница статична. С ним страница реагирует, двигается, отвечает на действия.
Как CSS, JavaScript можно подключить тремя способами. Первый встроенные скрипты, inline. Пишете JavaScript прямо в HTML-атрибутах:
Кликаете кнопку, появляется окно с текстом «Привет!». Но это плохой способ. Код смешивается с разметкой, становится нечитаемым. Как встроенные стили, не используйте это.
Второй способ внутренние скрипты. Пишете JavaScript внутри HTML, в теге <script>:
Код организован лучше, но всё ещё внутри HTML. Это приемлемо для маленьких скриптов, но не для больших проектов.
Третий способ внешние скрипты. Создаёте отдельный файл с расширением .js и подключаете к HTML. Это правильный способ. Именно так делают профессиональные сайты.
Создайте новый файл в VS Code. Назовите его script.js. Напишите простой JavaScript:
Сохраните файл. Теперь создайте HTML-файл index.html и подключите JavaScript:
Тег <script> подключает внешний JavaScript-файл. Атрибут src указывает путь к файлу. Обычно <script> ставят в конец <body>, перед закрывающим тегом. Это позволяет странице загрузиться сначала, а скриптам выполниться потом.
Сохраните и откройте index. html в браузере. Визуально ничего не изменилось. Страница выглядит так же. Но скрипт выполнился. Как это проверить?
Для этого существует консоль разработчика. Developer Console. Это инструмент внутри браузера, где видите сообщения от JavaScript. Как экран диагностики в машине, показывает, что происходит под капотом.
Откройте консоль. В Chrome нажмите F12 или Cmd+Option+J на Mac. В Firefox F12 или Cmd+Shift+K. Появится панель инструментов разработчика. Выберите вкладку Console.
Видите сообщения? «Скрипт загружен» и «Страница готова». Это вывел ваш JavaScript через console.log ().
Консоль это ваш главный инструмент отладки. Когда JavaScript не работает, в консоли видите ошибки. Красным цветом, с указанием строки, где проблема. Когда хотите проверить, что происходит в коде, пишете console.log () и смотрите результат в консоли.
Попробуйте добавить больше сообщений в script.js:
Сохраните. Обновите страницу. Откройте консоль. Видите три сообщения? Последнее показывает элемент h1, который нашёл JavaScript. Это доказывает, что скрипт видит HTML и может с ним работать.
Консоль не только показывает сообщения. В ней можете писать JavaScript прямо во время работы страницы. Попробуйте. В консоли напишите:
Нажмите Enter. Появилось окно с сообщением. Напишите:
Нажмите Enter. Заголовок стал красным. Вы изменили страницу через консоль. Это временно, обновите страницу, и всё вернётся. Но это мощный инструмент для экспериментов.
Создайте файл с интерактивным элементом:
В script.js:
Сохраните. Обновите страницу. Откройте консоль. Видите сообщения о загрузке. Нажмите кнопку. В консоли появилось «Кнопка нажата!». На экране появилось окно с приветствием. JavaScript отреагировал на клик.
Запомните главное. JavaScript подключается через <script src="script. js"></script> в конце <body>. Консоль открывается через F12, вкладка Console. console.log () выводит сообщения в консоль. Консоль показывает ошибки и позволяет экспериментировать с кодом.
Всегда держите консоль открытой, когда пишете JavaScript. Видите ошибку красным, читайте её. Браузер подсказывает, где проблема. Не знаете, что происходит в коде, добавьте console.log () в нужном месте. Консоль ваш союзник, а не враг.
В прошлом уроке мы подключили JavaScript и вывели сообщения в консоль. Но это только начало. JavaScript это язык программирования, а программирование это работа с данными. Числа, текст, списки, объекты. Чтобы работать с данными, нужны переменные.
Представьте коробку. На коробке наклейка с названием. Внутри лежит что-то. Переменная это как коробка. Название переменной это наклейка. Содержимое переменной это то, что лежит внутри. Открываете коробку по названию, достаёте содержимое, используете.
Посмотрите на сайт ADC. Видите текст «Добро пожаловать в ADC…». Этот текст можно хранить в переменной. Видите год «2025»? Это число, тоже можно хранить в переменной.
Создайте переменную в JavaScript. Откройте script. js и напишите:
Ключевое слово let создаёт переменную. siteName это название. Знак равно присваивает значение. ’ADC’ это строка, текст в кавычках. console.log () выводит значение переменной в консоль.
Сохраните файл. Обновите страницу. Откройте консоль. Видите «ADC»? Вы создали переменную, положили туда текст, достали и показали.
Переменные можно менять. Поэтому они и называются переменными, от слова «меняться»:
Первый раз year равен 2023. Потом меняете на 2025. Переменная хранит новое значение. Как коробка, выкинули старое, положили новое.
Есть три способа создать переменную: let, const и var. let для переменных, которые меняются. const для констант, которые не меняются. var старый способ, не используйте его.
const гарантирует, что значение не изменится. Как постоянная величина. Адрес сайта не меняется каждый день, используйте const. Год может меняться, используйте let.
Теперь типы данных. В JavaScript есть несколько основных типов. Представьте, что коробки бывают разные. Одни для обуви, другие для книг, третьи для посуды. Типы данных это виды коробок для разных данных.
Первый тип строка, string. Текст в кавычках:
Можете использовать одинарные кавычки, двойные или обратные. Обратные кавычки позволяют вставлять переменные внутрь текста:
${name} вставляет значение переменной в строку. Это называется интерполяция. Удобно собирать текст из кусочков.
Второй тип число, number. Целые и дробные числа:
С числами можно проводить математические операции:
Посмотрите на дизайн сайта. Видите текст «В 2025 году состоялась встреча»? Год можно хранить как число, потом использовать в вычислениях или сравнениях.
Третий тип булев, boolean. Правда или ложь, true или false. Как переключатель, включен или выключен:
Булевы значения используются для проверок. Мероприятие активно? true. Регистрация закрыта? false. Это основа логики программы.
Четвёртый тип массив, array. Список значений:
Массив это пронумерованный список. Нумерация начинается с нуля. events[0] это первый элемент. events[1] второй. Как полка с коробками, каждая на своём месте.
Пятый тип объект, object. Набор свойств с именами:
Объект как картотека. У каждого свойства есть имя и значение. hub. name обращается к свойству name. Удобно хранить связанные данные вместе.
Запомните главное. let для переменных, const для констант. Строки в кавычках. Числа без кавычек. Булевы значения true или false. Массивы в квадратных скобках. Объекты в фигурных скобках со свойствами.
Когда пишете JavaScript, думайте о данных. Что храните? Текст используйте строку. Число используйте number. Список используйте массив. Связанные данные используйте объект. Правильный тип данных делает код понятным и предсказуемым.
В прошлом уроке мы создавали переменные и выводили их в консоль. Но каждый раз писали одно и то же: console.log (). Представьте, что нужно приветствовать пользователей. Пишете одну строку для одного имени, другую для другого. Код становится длинным и повторяющимся.
Функции решают эту проблему. Функция это готовая команда, которую пишете один раз и используете многократно. Как кнопка на пульте. Нажимаете, происходит действие. Не нужно каждый раз объяснять телевизору, что такое «увеличить громкость». Просто нажимаете кнопку.
Посмотрите на сайт ADC. В футере видите иконки соцсетей? Кликаете на Telegram, открывается ссылка. Кликаете на VK, открывается другая ссылка. Одно и то же действие «открыть ссылку», но с разными данными. Это идеальный случай для функции.
Создайте первую функцию. Откройте script.js:
Ключевое слово function создаёт функцию. greet — это имя функции. Круглые скобки () — это место для параметров, пока пустые. Фигурные скобки {} содержат код, который выполнится.
Функция создана, но не выполнилась. Функция — это как рецепт в кулинарной книге. Рецепт существует, но пока не готовите, ничего не происходит. Нужно вызвать функцию:
Сохраните. Обновите страницу. Откройте консоль. Видите «Добро пожаловать в ADC!»? Функция выполнилась. Можете вызвать её несколько раз:
Три одинаковых сообщения в консоли. Написали функцию один раз, использовали три раза. Это переиспользование кода.
Но функция приветствует всех одинаково. Что если нужно персональное приветствие? Для этого существуют параметры. Параметры — это данные, которые передаёте функции:
name — это параметр. При вызове greet («Анна») параметр name получает значение «Анна». Функция подставляет его в текст. Три вызова, три разных имени, три разных приветствия.
Можете добавить несколько параметров:
Два параметра title и year. При вызове передаёте два значения. Функция использует оба. Порядок важен: первое значение идёт в первый параметр, второе во второй.
Функции могут возвращать результат. До сих пор функции выводили в консоль, но не возвращали значение. Ключевое слово return возвращает результат:
Функция вычисляет сумму и возвращает её. Вы сохраняете результат в переменную cost и используете дальше. Как калькулятор: вводите числа, получаете результат.
Посмотрите на дизайн сайта ADC. Видите текст про образовательную инициативу? Представьте функцию, которая формирует описание мероприятия:
Одна функция, разные данные, разные описания. Это мощь функций: пишете логику один раз, применяете везде.
Функции можно создавать разными способами. Первый способ function declaration, объявление функции:
Второй способ function expression, функциональное выражение:
Функция сохраняется в переменную. Вызываете через имя переменной: sayHello (). Работает так же.
Третий способ arrow function, стрелочная функция:
Современный короткий синтаксис. Стрелка => заменяет слово function. Если функция короткая, можете писать в одну строку:
Все три способа создают функцию. Выбирайте, что удобнее. Для начала используйте обычное объявление function, оно понятнее.
Создайте набор функций для сайта ADC:
Сохраните. Обновите страницу. Откройте консоль. Видите результаты всех функций? Каждая делает своё дело. Вместе они составляют функциональность сайта.
Запомните главное. Функция создаётся через function имя () {}. Параметры в круглых скобках. Код в фигурных скобках. return возвращает результат. Вызов функции через имя и круглые скобки: имя ().
Когда видите повторяющийся код, выносите его в функцию. Нужно несколько раз поприветствовать пользователей? Функция. Нужно рассчитать что-то по формуле? Функция. Нужно отформатировать текст одинаково? Функция. Это делает код чище и короче.
До сих пор писали JavaScript, который выводит данные в консоль. Создавали переменные, вызывали функции, видели результаты в Developer Tools. Но пользователь не видит консоль. Пользователь видит страницу. Нужно, чтобы JavaScript менял саму страницу: скрывал элементы, показывал новые, менял текст, реагировал на клики.
Для этого JavaScript работает с DOM. Document Object Model, объектная модель документа. Это представление HTML-страницы в виде дерева объектов. Каждый тег — это узел дерева. JavaScript находит узлы и манипулирует ими.
Представьте кукольный театр. HTML — это декорации и куклы на сцене. CSS — это краски и свет. JavaScript — это кукловод, который двигает кукол, меняет декорации, открывает занавес. DOM — это схема сцены, по которой кукловод ориентируется.
Посмотрите на страницу ADC. В секции «Наш ADC» видите картинку студентов, текст про историю и чёрную кнопку «Посмотреть»? Кликаете кнопку, переходите на страницу history. html с полной историей сообщества. Это работа JavaScript через DOM.
Создайте HTML для секции с кнопкой:
Кнопке присвоен ID historyBtn. ID это уникальный идентификатор элемента. По нему JavaScript найдёт кнопку в DOM. Откройте script. js и напишите:
document. getElementById («historyBtn») ищет элемент с ID historyBtn. Возвращает его как объект. Сохраняете объект в переменную historyBtn. Теперь через эту переменную управляете кнопкой.
addEventListener («click», function () {…}) вешает обработчик события. Событие это действие пользователя. Клик мышью, нажатие клавиши, прокрутка страницы. «click» означает клик. Когда пользователь кликает кнопку, выполняется функция внутри.
window. location. href = «history.html» меняет адрес текущей страницы. Браузер переходит на history.html. Как будто пользователь кликнул ссылку. Это встроенный объект window, который управляет окном браузера.
Сохраните файл. Обновите страницу. Кликните кнопку «Посмотреть». Страница перешла на history.html? Значит JavaScript нашёл элемент в DOM и отреагировал на клик.
Можете добавить сообщение в консоль для отладки:
Кликните кнопку. Откройте консоль перед переходом. Видите сообщение? Это подтверждает, что обработчик сработал. Полезно для проверки логики. Тут мы закоментировали сам переход, иначе переключилась бы страница и консоль обновилась.
Теперь форма. На странице ADC видите форму «Записаться на мероприятие»? Три поля: Имя, Фамилия, Номер телефона. Кнопка «Отправить». Пользователь заполняет поля, нажимает кнопку, JavaScript проверяет данные.
Создайте HTML формы:
Форме присвоен ID eventForm. Каждому полю свой ID: nameInput, surnameInput, phoneInput. Атрибут required делает поля обязательными. Браузер покажет подсказку, если поле пустое.
Атрибут type="submit» делает кнопку кнопкой отправки. При клике форма пытается отправиться. По умолчанию страница перезагрузится. Но можете перехватить это через JavaScript.
Откройте script.js:
addEventListener ('submit', function (event) {…}) вешает обработчик на событие отправки формы. submit срабатывает, когда нажимаете кнопку с type="submit" или жмёте Enter в поле.
event.preventDefault () останавливает стандартное поведение браузера. Без этой строки страница перезагрузится. С ней остаётесь на странице, и JavaScript обрабатывает данные.
document.getElementById ('nameInput').value получает значение поля ввода. .value это свойство DOM-элемента, которое хранит текст, введённый пользователем. Сохраняете значения в переменные.
if (name === '' || surname === '' || phone === '') проверяет, пустые ли поля. === это строгое сравнение. || это логическое ИЛИ. Если хотя бы одно поле пустое, показываете alert () с предупреждением и выходите через return.
Если все поля заполнены, выводите данные в консоль. Показываете пользователю окно с благодарностью через alert (). Вызываете eventForm.reset (), который очищает все поля формы.
Сохраните. Обновите страницу. Попробуйте отправить пустую форму. Появилось предупреждение? Заполните поля, отправьте. Появилось «Спасибо за регистрацию»? Откройте консоль, видите данные? Форма очистилась? JavaScript работает с DOM.
Можете улучшить проверку. Например, проверить длину телефона:
Или проверить, что имя не содержит цифр:
/\d/ — это регулярное выражение, которое ищет цифры. .test (name) проверяет, есть ли цифры в строке. Если есть, выводите предупреждение.
Запомните главное. DOM — это дерево объектов, представляющее HTML. document.getElementById () находит элемент по ID. document.querySelectorAll () находит все элементы по селектору CSS. addEventListener () вешает обработчик события на элемент. event.preventDefault () останавливает стандартное поведение браузера. .value получает значение поля ввода. .style изменяет CSS-свойства элемента через JavaScript.
Позже мы рассмотрим более интересную механику,
