Настройка редактора кода. Урок 2

Обучение html

Редактор кода, котором мы будем пользоваться и настраивать называется Brackets. Он бесплатен, можно скачать на официальном сайте. Почему мы будем использовать Brackets? Он отлично подходит новичкам, работает на windows и macOs, в нем очень легко установить нужные для работы расширения, полностью русифицирован, понятен. Все эти бонусы доставят минимальное количество проблем в ходе обучения. Как скачать и установить рассказывать не будем, там все более чем стандартно. Вы справитесь!

Давайте разбираться, что нужно для создания html страницы.

Высоких ресурсов и определённой операционной системы нам не потребуется, если у вас установлен windows замечательно, если работаете на макинтоше прекрасно, ну а про linux мне и добавить нечего. Вообще для создания веб документа можно использовать обыкновенный системный блокнот. Проинформируем сразу, так делать не нужно. Все современные редакторы поддерживают расширение Emmet которое позволяет писать сайты намного быстрее и в целом упрощают жизнь FrontEnd разработчика, об этом мы поговорим чуть позже.

Сейчас на рабочем столе создайте папку с произвольным именем. Мы ее назовем webm.tech Откройте заранее установленный редактор Brackets. Должно появится окно интерфейса и выглядеть так:

Настройка редактора кода. Урок 2

Теперь необходимо открыть созданную ранее папку. Делается это путем открытия директории. Все просто: смотрим наверх интерфейса, ищем пункт с названием «Файл», он распологается слева, щелкаем по нему. Выпадает список, ищем надпись «Открыть директорию». Готово!

Настройка редактора кода. Урок 2

Для общего понимания «директория» это папка где хранятся интернет ресурсы которые вы сделали. В данном случае это рабочий стол, папка webm.tech

Создание web документа

Теперь давайте создадим web документ и назовем его как называют все главные файлы в сети “index.html”. Название файла может быть произвольным, например, blabla.html, но первый файл или главная страница сайта должна называться index.html. Это не прихоть, делается это для индексации. Помните об этом.

Чтобы создать “index.html” в редакторе кода нужно проделать следующие действия: Открыть вкладку “Файл”, нажать пункт “Новый”. В боковой панели у вас появится надпись «Без названия». Нажмите на вкладку «Сохранить как» и присвойте имя index.html

Настройка редактора кода. Урок 2

Любой интернет документ начинается со структуры. Выглядит она вот так:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Подробно мы ее разберем на следующем уроке. Показываем сейчас чтобы вы увидели как полезны бывают плагины современных редакторов кода. Шаблонная структура web документа состоит из 9 строчек кода и каждый раз их строить утомительно. Чтобы этого не делать, давайте установим в brackets плагин под названием Emmet. Он нам позволит создать структуру в два движения.

Установка плагина Emmet

В окне интерфейса справой стороны кнопка напоминающая деталь конструктора, нужно ее нажать.

Настройка редактора кода. Урок 2

В открывшемся окне, нас интересует вкладка доступные.

Настройка редактора кода. Урок 2

Справой стороны поле поиска. Оно ищет доступные (имеющиеся в интернете) плагины, вводим текст Emmet.

В списке может быть несколько вариаций, вам нужен именно этот:

Настройка редактора кода. Урок 2

После установки программа может попросить перезапустить ее, чтобы плагин начал действовать. Может и не попросить. Плагин Emmet установлен, что он нам теперь дает? Откройте файл “index.html” и создайте свой первый сайт.

Используем emmet

В редакторе кода введите воцклицательный знак, нажимаете кнопку tab на клавиатуре, без каких либо пробелов, энтеров.

Сочетание клавиш: !+Tab

Результат должен быть как на этом изображении:

Настройка редактора кода. Урок 2

Поздравляем вы создали свою первую интернет страничку. Правда она полностью пустая, но в дальнейшем мы ее преобразим.

Рекомендуем ознакомится с полезной статьей про редактор кода Brackets. Там расскажут про ее дополнительные плагины, более подробно про интерфейс.

webm.tech