Задание

Материалы

1. Полная шпаргалка по HTML 
2. Документация по HTML-тегам 

Что необходимо сделать

1. Подготовить редактор по инструкции настройки VS Code, если ещё не сделали этого.
2. Подготовить первую страницу по шагам ниже.
3. На этой же странице выполнить оба самостоятельных задания.

Подготовьте первую страницу

1. Создайте на компьютере папку HTML-01. Если проходите Основы веб-разработки, создайте её внутри своего учебного Git-репозитория по инструкции дисциплины. Откройте папку HTML-01 в VS Code через File → Open Folder…. В Windows также можно нажать на неё правой кнопкой мыши и выбрать «Открыть с помощью Code» (Open with Code).

Если при открытии созданной Вами папки появится вопрос Do you trust the authors of the files in this folder?, нажмите Yes, I trust the authors. Это запрос безопасности VS Code. Если папка открылась в Restricted Mode, нажмите на эту надпись и выберите Trust. Подробнее – в инструкции подготовки редактора.

2. В папке проекта создайте новый файл и назовите его index.html.

3. В пустом файле index.html введите !, выберите подсказку Emmet Abbreviation и нажмите Enter. Подробнее: сниппеты кода и Emmet в VS Code.

Emmet вставит каркас страницы. При стандартных настройках он выглядит примерно так: язык пока en, заголовок вкладки – Document, а внутри <body> ещё ничего нет.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Document</title>
    </head>
    <body></body>
</html>

4. В открывающем теге <html> замените lang="en" на lang="ru". Между <title> и </title> вместо Document укажите свою группу, имя и фамилию: этот текст будет виден на вкладке браузера. Между <body> и </body> добавьте заголовок <h1>Hello World!</h1> – он появится на самой странице.

<title> находится внутри <head> и задаёт название вкладки. Заголовок <h1> находится внутри <body> и относится к содержимому страницы. Это разные элементы с разными задачами.

5. Под заголовком <h1> добавьте абзац <p></p>. Поставьте курсор между <p> и </p>, введите lorem15, выберите подсказку Emmet и нажмите Enter. Редактор вставит текст-заполнитель из 15 слов.

Внутри <body> теперь будут заголовок и абзац, например:

<h1>Hello World!</h1>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse consectetur
  temporibus provident libero veritatis. Perferendis.
</p>

Текст, который вставит Emmet, может отличаться. Пока он нужен только для проверки оформления.

6. Рядом с index.html создайте файл style.css. Вернитесь в index.html и перед закрывающим тегом </head> введите link:css, затем разверните сокращение Emmet.

Внутри <head> появится строка:

<link rel="stylesheet" href="style.css" />

Проверьте значение href: оно должно совпадать с именем файла style.css. Оба файла находятся в одной папке.

7. Откройте style.css и добавьте базовые стили:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
body {
  font-family: "Inter", sans-serif;
}

@import загружает описание шрифта; пишите его до обычных CSS-правил. font-family выбирает загруженный Inter, а sans-serif – запасной шрифт без засечек на случай, если загрузка не удалась. Одного импорта недостаточно: шрифт нужно применить к элементам.

8. Сохраните оба файла: Ctrl+S в Windows и Linux или Cmd+S на macOS в каждой вкладке. Откройте index.html и запустите Live Server кнопкой Go Live справа внизу.

9. В браузере откроется первая страница. Проверьте, что на вкладке видны Ваша группа, имя и фамилия, а на странице – заголовок Hello World! и абзац. После изменения HTML или CSS сохраняйте файл: Live Server обновит страницу.

Самостоятельные задания

Самостоятельное задание №1: Верстка блока уведомления

Создайте блок уведомления с текстом. Текст уведомления – «Изменения сохранены. Можно продолжать работу». Блоку уведомления добавьте атрибут data-state со значением saved. Итоговый вариант на скриншоте.

Какие фрагменты добавить:

Внутри <body>, перед заголовком <h1>, добавьте блок:

<div class="alert-info">Lorem ipsum dolor sit amet consectetur.</div>

В style.css подготовьте правило. Цвета из комментария перенесите в настоящие CSS-объявления самостоятельно:

.alert-info {
  /* Фон: #f7fee7. Граница: #84cc16. */
}

В CSS-правиле .alert-info свойства напишите самостоятельно: задайте фон и границу указанных цветов, подберите внутренние отступы, скругление углов и ширину по образцу. Текст между /* и */ – комментарий, он не выполняется.

Самостоятельное задание №2: Базовое форматирование текста

Ниже уже созданного абзаца добавьте примеры заголовков <h2>–<h6>. Заголовок <h1> у Вас уже есть. В отдельных абзацах покажите смысловое выделение через <strong> и <em>, а также подчёркивание и зачёркивание через CSS-свойство text-decoration. Один из заголовков – «Первая страница: от текста к оформлению». Для смыслового выделения используйте фразу «Практика начинается с малого». Обратите внимание на отступы.

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

Как сдать результат

Подготовьте папку HTML-01 с файлами index.html и style.css. В ней должна быть страница с обоими самостоятельными заданиями: блоком уведомления и оформленным текстом. Если использовали свои изображения или другие локальные ресурсы, включите их в папку.

Перед загрузкой откройте страницу через Live Server, проверьте подключение стилей и отформатируйте код. Убедитесь, что в <title> указаны Ваши данные, на странице есть оба задания, а локальные файлы включены в папку HTML-01.

• Веб-дизайн: загрузите папку в свою общую папку на Google Диске и зарегистрируйте ссылку на корневую папку по инструкции сдачи HTML.
• Основы веб-разработки: сохраните изменения в учебном репозитории и отправьте их на GitHub по инструкции дисциплины.