Я начинаю цикл статей по созданию собственного веб-сайта в ОС Убунту
Установка редактора кода Sublime Text 3, темы оформления и плагина Emmet
В этой статье покажу как установить необходимые программы и инструменты для работы. У меня стоит браузер Firefox так как он идёт по умолчанию в Убунту. Так же вам потребуется редактор кода для работы в HTML. Я буду использовать редактор кода Sublime Text 3. Так же будет установлен плагин Emmet. Этот плагин позволяет ускорить написание кода. Итак, начнём с установки Sublime Text 3.
Его можно установить как через терминал с добавлением репозитория так и через Ubuntu Software. Для добавления репозитория надо ввести в терминал:
- wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -
После чего вводим свой пароль на запрос пароля
- sudo apt-add-repository "deb https://download.sublimetext.com/ apt/stable/"
Появляется надпись: Press [ENTER] to continue or Ctrl-c to cancel.
Жмём ENTER
После чего устанавливаем Sublime Text 3 командой:
- sudo apt install sublime-text
На этом установка Sublime Text 3 через терминал окончена
Установка Sublime Text 3 через Ubuntu Software:
- Открываем Ubuntu Software и в поиске пишем Sublime Text
- Далее жмём "Установить"
Итак, после установки Sublime Text 3 запускаем программу
Теперь нужно установить Package Control. Это репозиторий в котором хранятся дополнения к этому редактору кода. Для того что бы его установить нужно перейти в меню под названием Tools. И выбрать "Install Package Control". Теперь надо установить Emmet. Для этого надо перейти в Preferences и выбрать Package Control. В открывшемся меню пишем "Install" и выбираем пункт "Install Package". И в открывшемся меню пишем "Emmet". И выбираем пункт Emmet for Sublime Text. После установки проверим как работает Emmet. Для этого создадим папку с нашим будущим проектом. Я назову папку "LinuxUSER".
Теперь в Sublime Text выбираем File и потом New File. Появляется вкладка untitled:
После чего снова открываем File и выбираем Save As..
И выбираем нужную нам папку. Я создал папку под названием LinuxUSER:
Теперь пишем в названии "index.html"
После чего жмём на "Сохранить" справа от названия. Теперь проверим работает ли плагин и создадим разметку. Ставим курсор, жмём SHIFT, ставим восклицательный знак и жмём TAB и сгенерируется HTML разметка:
Поставим курсор между тегами "body". Пишем "h1" и жмём TAB. В итоге с помощью плагина Emmet сгенерировались теги:
Теперь между открывающим и закрывающем тегом "h1" поставим курсор и напишем какое-нибудь слово. Например я напишу LinuxUSER:
И сохраним нажав комбинацию "CTRL+S" на клавиатуре. Либо через File и далее Save. Теперь если открыть ранее созданную папку LinuxUSER на рабочем столе то можно увидеть что в ней появился файл под названием "index.html":
Теперь попробуем открыть этот файл через браузер Firefox:
И вот теперь открылся файл index.html в браузере Firefox, с надписью "LinuxUSER" которую я написал между открывающим и закрывающим тегом "h1". О том как пользоваться этими и остальными тегами в следующей статье: