Skip to content
EN

HTML-01. Основы HTML CSS

VS Code, первая страница и два самостоятельных блока.

also in web design and web development basics

On this page

Материалы

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

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

  1. Установить среду разработки VS Code, а также установить и настроить все необходимые расширения.
  2. Создать рабочее пространство.
  3. Выполнить самостоятельные задания.

Этап 1: Установка среды разработки

  1. Зайдите на сайт Visual Studio Code и скачайте установщик для вашей операционной системы. Скачать VS Code

Сайт Visual Studio Code, кнопка загрузки

  1. Установите VS Code. Во время установки выставьте галочки как на скриншоте ниже.

Окно установщика VS Code с отмеченными пунктами

  1. Слева на боковой панели найдите вкладку расширений (Extensions).

Иконка Extensions на боковой панели

  1. Установите следующие расширения:

Список расширений для установки

  1. Настроим некоторые расширения. Откройте настройки VS Code: шестерёнка слева внизу, «Настройки». В поиске пишите параметр и меняйте его как на скриншотах.

5.1. Этот параметр визуально переносит строки:

Настройка word wrap

5.2. По умолчанию в VS Code таб 4 пробела, у Prettier часто 2. Поставьте 4.

Настройка размера таба 4

5.3. Вид маркера цвета можно выбрать любой удобный.

Настройка декоратора цвета

Этап 2: Создание рабочего пространства

  1. Создайте папку с проектом, ПКМ в проводнике Windows, «Открыть с помощью Code» (Open with Code). Так папка станет рабочим каталогом VS Code.

Пункт Open with Code в контекстном меню

  1. Создайте файл index.html.

  2. Основа HTML-документа: сниппет Emmet, восклицательный знак, Enter. Если подсказка молчит: Ctrl+Space.

Сниппет (от англ. snippet, «фрагмент») - кусок кода, который можно вставлять повторно, не набирая конструкцию с нуля.

Подсказка Emmet после восклицательного знака

Должна получиться следующая структура:

Каркас HTML после сниппета

  1. Внутри title укажите группу, имя и фамилию. Добавьте заголовок h1 в теле страницы.

Должно получиться следующее:

title и h1 в редакторе

  1. Добавьте параграф тегом p и сниппет Emmet для рыбы: lorem плюс число слов, Enter.

Ввод lorem в редакторе

Результат вставки рыбы

  1. Создайте файл стилей style.css и подключите его сниппетом Emmet.

Подключение style.css, кадр 1

Подключение style.css, кадр 2

  1. В файле стилей пропишите базовые стили. Код импорта шрифта со скриншота:
style.css
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

Базовые стили и импорт Inter

  1. Сохраните файлы на Ctrl+S и в правом нижнем углу запустите Live Server кнопкой Go Live.

Кнопка Go Live

  1. Откроется окно браузера с первой страницей.

Первая страница в браузере

Дополнительно на будущее: когда кода много, появляются кривые отступы. Это форматирование. Правильное форматирование нужно для чтения и сопровождения, не «для красоты IDE».

Форматирование документа: Alt+Shift+F. Только что поставили Prettier, IDE не знает, какой форматтер выбрать.

11.1. Нажмите Configuration.

Кнопка Configuration у форматтера

11.2. Стрелками (или мышью) выберите Prettier и Enter.

Выбор Prettier в списке форматтеров

11.3. Снова Alt+Shift+F.

11.4. Код отформатирован.

Этап 3: Самостоятельные задания

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

Создайте блок уведомления с текстом. Итоговый вариант на скриншоте.

Готовый блок уведомления

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

Фрагменты разметки и класса alert-info

В классе alert-info свойства пишете сами. Текст в /* */ это комментарий, он не выполняется.

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

Добавьте заголовки от h1 до h6, жирный, курсив, подчёркнутый и зачёркнутый текст. Обратите внимание на отступы.

Пример форматирования текста

Загрузка результатов

Полученные файлы загрузите на Google Drive или Yandex Disk в папку HTML-01.