Знакомство с макетом
Теперь есть всё, чтобы уже начать вёрстку. Откройте файл в фигме. Давайте присмотримся, что в первую очередь бросается в глаза. Видите большую надпись «ADC Community» вверху страницы? Это главный заголовок, заголовок страницы. Крупный, чёрный, невозможно не заметить.
Главный заголовок на странице должен быть один. Как название статьи в газете. То же самое с <h1>. Один на страницу. Он говорит поисковым роботам и читателям: «Вот о чём эта страница».
Давайте посмотрим ниже. Видите текст помельче? «Добро пожаловать в ADC — уникальное пространство Школы дизайна НИУ ВШЭ…» Это обычный параграф, тег <p>. Он идёт после заголовка и объясняет суть. Как первый абзац в статье, который вводит читателя в тему.
Создание проекта
Создадим на рабочем столе новую папку и назовём её «ADC». Переместим её в VS Code. Наше рабочее пространство готово к работе.
Теперь создадим в этой папке новый файл. Назовите его about.html. Напишите базовую структуру, пишем ! и нажимаем Enter — у нас создастся HTML разметка. Внутри тега <body> поместим:
<h1>ADC Community</h1>
<p>
Добро пожаловать в ADC — уникальное пространство Школы дизайна
НИУ ВШЭ, расположенное в историческом здании на Пантелеевской, 53.
Это место, где встречаются разработчики с бизнесом, авторы со зрителями,
профессионалы креативной экономики с широкой аудиторией.
</p>Сохраните файл. Откройте в браузере. Видите? Заголовок автоматически стал большим. Параграф поменьше, с отступом снизу. Браузер сам применил стили по умолчанию.
Вся информация, написанная внутри тега <body>, будет видна на странице браузера.
Добавление параграфов
Теперь также давайте поступим со следующими текстами. Когда пишете несколько параграфов подряд, каждый оборачиваете в свой <p>.
Вот так должен у вас выглядеть итоговый файл:
<h1>ADC Community</h1>
<p>
Добро пожаловать в ADC — уникальное пространство Школы дизайна НИУ ВШЭ,
расположенное в историческом здании на Пантелеевской, 53. Это место, где
встречаются разработчики с бизнесом, авторы со зрителями, профессионалы
креативной экономики с широкой аудиторией.
</p>
<p>
Все началось с создания Лаборатории дизайна — подразделения Школы дизайна,
которое сочетало функции дизайн-бюро и исследовательской лаборатории.
Лаборатория предлагала решения в области коммуникационного и цифрового
дизайна, но ей не хватало специализированной платформы для объединения
студентов и профессионалов в области веб-разработки.
</p>
<p>
История создания и развития ADC — как идея объединения дизайна
и программирования переросла в активное комьюнити. От первых митапов до здания
на Пантелеевской
</p>
<p>HTML, CSS, JavaScript, создание многостраничных сайтов</p>
<p>Figma, FigJam, интерактивные прототипы</p>
<p>Статичные и динамические веб-плакаты</p>
<p>Системный подход, методологии, паттерны дизайн-проектирования</p>
<p>
По общим вопросам и вопросам поступления, а также ссылки на официальные сайты
</p>
<p>По вопросам поступления</p>
<p>+7 499 444-02-84</p>
<p>design@hse.ru</p>
<p>По общим вопросам</p>
<p>+7 495 621-87-11</p>
<p>Дополнительное образование</p>
<p>dop-design@hse.ru</p>
<p>Адрес</p>
<p>129110, г. Москва, ул. Пантелеевская, д. 53.</p>Обновите браузер. Видите? Появились остальные абзацы. Между ними есть воздух, отступ. Браузер автоматически добавляет его, чтобы текст не слипался в одну кашу.
Добавление заголовков второго уровня
Также у нас есть другие заголовки: «Наш ADC», «Что изучают студенты ADC», «Контакты». Помните, что заголовок первого уровня может быть на странице только один, поэтому все последующие будут второго уровня и ниже. Давайте добавим их:
<h1>ADC Community</h1>
<p>
Добро пожаловать в ADC — уникальное пространство Школы дизайна НИУ ВШЭ,
расположенное в историческом здании на Пантелеевской, 53. Это место, где
встречаются разработчики с бизнесом, авторы со зрителями, профессионалы
креативной экономики с широкой аудиторией.
</p>
<p>
Все началось с создания Лаборатории дизайна — подразделения Школы дизайна,
которое сочетало функции дизайн-бюро и исследовательской лаборатории.
Лаборатория предлагала решения в области коммуникационного и цифрового
дизайна, но ей не хватало специализированной платформы для объединения
студентов и профессионалов в области веб-разработки.
</p>
<h2>Наш ADC</h2>
<p>
История создания и развития ADC — как идея объединения дизайна
и программирования переросла в активное комьюнити. От первых митапов до здания
на Пантелеевской
</p>
<h2>Что изучают студенты ADC</h2>
<p>HTML, CSS, JavaScript, создание многостраничных сайтов</p>
<p>Figma, FigJam, интерактивные прототипы</p>
<p>Статичные и динамические веб-плакаты</p>
<p>Системный подход, методологии, паттерны дизайн-проектирования</p>
<h2>Записаться на мероприятие</h2>
<h2>Контакты</h2>
<p>
По общим вопросам и вопросам поступления, а также ссылки на официальные сайты
</p>
<p>По вопросам поступления</p>
<p>+7 499 444-02-84</p>
<p>design@hse.ru</p>
<p>По общим вопросам</p>
<p>+7 495 621-87-11</p>
<p>Дополнительное образование</p>
<p>dop-design@hse.ru</p>
<p>Адрес</p>
<p>129110, г. Москва, ул. Пантелеевская, д. 53.</p>Добавление заголовков третьего уровня
А также есть и третьего уровня заголовки: «Наша история», «Веб-вёрстка и веб-программирование», «UX/UI дизайн и прототипирование», «Креативное программирование, генеративная графика», «Системный дизайн и дизайн-системы». Добавим и их:
<h1>ADC Community</h1>
<p>
Добро пожаловать в ADC — уникальное пространство Школы дизайна НИУ ВШЭ,
расположенное в историческом здании на Пантелеевской, 53. Это место, где
встречаются разработчики с бизнесом, авторы со зрителями, профессионалы
креативной экономики с широкой аудиторией.
</p>
<p>
Все началось с создания Лаборатории дизайна — подразделения Школы дизайна,
которое сочетало функции дизайн-бюро и исследовательской лаборатории.
Лаборатория предлагала решения в области коммуникационного и цифрового
дизайна, но ей не хватало специализированной платформы для объединения
студентов и профессионалов в области веб-разработки.
</p>
<h2>Наш ADC</h2>
<h3>Наша история</h3>
<p>
История создания и развития ADC — как идея объединения дизайна
и программирования переросла в активное комьюнити. От первых митапов до здания
на Пантелеевской
</p>
<h2>Что изучают студенты ADC</h2>
<h3>Веб-вёрстка и веб-программирование</h3>
<p>HTML, CSS, JavaScript, создание многостраничных сайтов</p>
<h3>UX/UI дизайн и прототипирование</h3>
<p>Figma, FigJam, интерактивные прототипы</p>
<h3>Креативное программирование, генеративная графика</h3>
<p>Статичные и динамические веб-плакаты</p>
<h3>Системный дизайн и дизайн-системы</h3>
<p>Системный подход, методологии, паттерны дизайн-проектирования</p>
<h2>Записаться на мероприятие</h2>
<h2>Контакты</h2>
<p>
По общим вопросам и вопросам поступления, а также ссылки на официальные сайты
</p>
<p>По вопросам поступления</p>
<p>+7 499 444-02-84</p>
<p>design@hse.ru</p>
<p>По общим вопросам</p>
<p>+7 495 621-87-11</p>
<p>Дополнительное образование</p>
<p>dop-design@hse.ru</p>
<p>Адрес</p>
<p>129110, г. Москва, ул. Пантелеевская, д. 53.</p>Семантическая структура страницы
Давайте приглядимся внимательнее. Нашу страницу можно разделить на три смысловые части: хедер (верхняя часть с логотипом и ссылкой на раздел со статьёй об истории ADC), основная часть с текстами и картинками и футер (нижний блок с логотипом, ссылкой на раздел со статьёй и социальные сети). Создадим такую структуру в нашем проекте:
<header></header>
<main>
<h1>ADC Community</h1>
<!-- Весь наш последующий код -->
<p>Адрес</p>
<p>129110, г. Москва, ул. Пантелеевская, д. 53.</p>
</main>
<footer></footer>Наши тексты помещаем между открывающим и закрывающим тегом <main>, так как тексты — это основная информация на странице.
Заключение
Теперь наша базовая структура полностью готова. В следующем уроке рассмотрим, как добавить к нашему проекту картинки и ссылки. В качестве домашнего задания вам нужно добавить все заголовки и тексты на страницу статьи («Наша история»).
Сколько тегов <h1> должно быть на одной странице?
Какой тег используется для заголовка второго уровня?
Какие из этих тегов используются для структуры страницы?
Заголовки h1-h6 — справочник на MDN