Установка необходимого ПО
Для настройки рабочего места понадобится несколько простых шагов:
- Нужно скачать VSCode: https://code.visualstudio.com/
- Установить его на компьютер
- Запустить VSCode
- Зайти в расширения
(меню слева)
- Ввести в поиске “html”
- Установить 2 расширения: HTML CSS Support и HTML Format
Начало работы
Чтобы начать создание странички или выполнение домашнего задания, нужно:
- Создать папку на компьютере (вы должны хорошо запомнить где её сделали)
- В VSCode открыть папку через главное меню: File->Open Folder… (или Файл->Открыть папку)
- Зайти в свою папку в открывшемся диалоговом окне и нажать кнопку «Открыть»
- Слева будет колонка со структурой вашего проекта. Там нужно создать следующую структуру:
- Файл типа html, например index.html, или page2.html, или contacts.html в зависимости от того, какую страницу сайта вы делаете.
- Файл типа css. main.css или style.css, в котором вы будете создавать свои стили
- Папка Images, в которой вы будете хранить картинки
Структура проекта может выглядеть вот так:
Как выглядит базовая структура html файла:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- ТУТ БУДЕТ КОД ВАШЕГО САЙТА! -->
</body>
</html></html>
Строка <link rel=»stylesheet» href=»styles.css» /> как раз привязывает ваш CSS файл к вашему html файлу и позволяеть использовать описанные внутри себя стили.
Как открыть файл в браузере
Чтобы открыть html-файл в браузере нужно найти его в Проводнике. Для этого в структуре проекта слева щёлкаем правой кнопкой мыши на вашем index.html и выбираем пункт Reveal in File Explorer
Затем дважды щёлкаем на файл мышью и если система спросит как его открыть указываем ваш браузер (Chrome, Yandex Браузер, Firefox и т.д.)
Чтобы вновь сделанные изменения появились в браузере, нужно чтобы он перечитал файл html с диска. Для этого нужно воспользоваться одним из вариантов:
- Кнопка F5 в верхнем ряду клавиатуры
- Сочетание кнопок Ctrl+R
- Сочетание кнопок Ctrl+F5
- Для самы маленьких: нажать мышкой кнопочку обновления страницы в браузере:
Как отправить ДЗ на проверку
Чтобы отправить ДЗ из нескольких файлов (html, css, папка с картинками) как один файл их нужно добавить в архив.
Например, в проводнике выбираешь все нужные файлы и папки (если они есть), нажимаешь ПРАВУЮ кнопку и в появившемся меню выбираешь «Сжать в zip-файл
Полученный файл с расширением ZIP отправляете как ответ на задание.