Подготовка проекта CSS и HTML с помощью Visual Studio Code
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
В этом мануале вы узнаете, как создать все папки и файлы, необходимые для сборки вашего тестового веб-сайта CSS.
С помощью редактора кода вы создадите каталог проекта, каталог и файл для кода CSS, файл для кода HTML и папку для изображений. В этой серии мануалов используется Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux, но вы можете использовать редактор кода, который вам нравится больше. Обратите внимание: если вы используете другой редактор, вам нужно будет откорректировать некоторые инструкции мануалов.
Создание файлов и папок HTML и CSS
Запустив текстовый редактор, откройте новую папку для нашего проекта и назовите ее css-practice. Мы будем использовать эту папку для хранения всех файлов и папок, созданных в ходе выполнения этой серии мануалов.
Чтобы создать новую папку проекта в редакторе Visual Studio Code, перейдите к пункту File в верхнем меню и выберите Add Folder to Workspace. В новом окне нажмите кнопку New Folder и создайте новую папку по имени css-practice.
Затем создайте новую папку внутри css-practice и назовите ее css. Внутри этой папки откройте новый файл и сохраните его как styles.css – это файл, который вы будете использовать для хранения правил стилей CSS. Если вы используете Visual Studio Code, вы можете создать новую папку, щелкнув правой кнопкой мыши (в Windows) или нажав CTRL+левая кнопка мыши (на Mac) в папке css-practice, затем выберите New File и создайте папку css. Затем кликните правой кнопкой мыши (в Windows) или нажмите CTRL+левая кнопка (в Mac) в папке css, выберите New File и создайте файл styles.css.
Сохраните файл и оставьте его открытым.
Вам также необходимо создать файл для добавления контента HTML – текста, изображений и HTML-элементов, которые будут отображаться в браузере. В каталоге проекта css-practice откройте еще один новый файл и сохраните его как index.html (так же, как вы создали файл styles.css ранее). Обязательно сохраните этот файл index.html в папке css-practice, а не в папке css.
Затем вам нужно добавить в файл index.html строку кода, которая скажет браузеру использовать файл styles.css в качестве таблицы стилей сайта. Для этого вам понадобится HTML-тег <link> и ссылка на файл styles.css. Добавьте следующий фрагмент кода в свой HTML-документ:
<link rel=»stylesheet» href=»css/styles.css»>
Благодаря этому фрагменту кода браузер будет интерпретировать HTML-код в соответствии с таблицей стилей, расположенной в css/styles.css. На протяжении всей этой серии мануалов будьте внимательны, чтобы случайно не удалить эту строку при изменении кода в файле index.html. Сохраните файл index.html и оставьте его открытым.
Теперь создайте дополнительную папку внутри css-practice и назовите ее images. В этой папке вы сохраните все изображения, которые будете использовать при выполнении этой серии мануалов.
Теперь у вас должна быть папка проекта css-practice, содержащая папки и файлы, необходимые для нашего сайта CSS:
- Папка по имени css содержит файл styles.css.
- Пустая папка images.
- Файл index.html
Если вы используете Visual Studio Code, ваш редактор должен теперь отображать следующее дерево файлов:
Обратите внимание, что имена файлов включают расширения (.html и .css), которые указывают на тип их содержимого. В следующих мануалах этой серии мы добавим контент в эти файлы.
Отладка и устранение неполадок CSS и HTML
При работе с HTML и CSS важна точность. Даже лишний пробел или неправильно введенный символ могут помешать вашему коду работать должным образом.
Если ваш код HTML или CSS не отображается в браузере так, как вы ожидаете, убедитесь, что вы написали код в точности так, как показано в мануале. В целом мы рекомендуем вам вводить код в файлы вручную – так он лучше запоминается, но иногда полезно скопировать и вставить его, чтобы убедиться, что в не мнет ошибки.
Ошибки HTML и CSS могут быть вызваны несколькими причинами. Для начала проверьте свои правила разметки и CSS на наличие лишних или недостающих пробелов, неправильно записанных тегов, а также лишних знаков пунктуации или символов. Вам также следует убедиться, что вы случайно не поставили фигурные или книжные кавычки (“ или “), которые часто используются текстовыми редакторами. Фигурные кавычки предназначены для чтения текста человеком и вызовут ошибку в коде, поскольку они не распознаются браузерами как кавычки. Вводя кавычки прямо в редакторе кода, вы можете быть уверены, что используете правильный тип.
Каждый раз, когда вы вносите в код изменения, обязательно сохраняйте файл перед его перезагрузкой в браузере, чтобы проверить результаты.
Краткое примечание по автоматической поддержке HTML
Некоторые редакторы кода (к ним относится и Visual Studio Code который мы используем в этой серии) предоставляют автоматическую поддержку написания HTML. В Visual Studio Code эта поддержка подразумевает умные подсказки и автозавершение кода. Эта функция бывает полезной, но будьте с ней осторожны: если вы не привыкли работать с ней, вы можете сгенерировать дополнительный код, который вызовет ошибки. Если эти подсказки вас отвлекают, вы можете отключить их в настройках редактора кода.
Заключение
Теперь вы готовы приступить к разработке вашего тестового сайта. В следующем мануале мы покажем, как использовать правила CSS для управления стилем и макетом HTML-страниц.
Начало работы с кодом VisualStudio
VisualStudioCode-один из самых популярных и мощных текстовых редакторов, используемых сегодня инженерами-программистами.
В этой статье мы рассмотрим шаги, необходимые для загрузки популярного текстового редактора под названием VisualStudioCode, также называемого “VSCode.” К концу статьи вы сможете создать папку в коде VisualStudio, содержащую HTML-документ, который можно открыть в веб-браузере.
Что такое » текстовые редакторы’?
Текстовые редакторы, также называемые редакторами кода, — это приложения, используемые разработчиками для написания кода. Они могут выделить и отформатировать ваш код, чтобы его было легче читать и понимать. Если вы использовали Codecademy, вы уже знакомы с текстовым редактором. Это область, в которой вы пишете свой код.
Использование текстового редактора является частью создания вашей “среды разработки”, набора инструментов, которые вы используете для работы над проектами кодирования. Это позволит вам взять то, что вы узнали о Codecademy, и применить это на практике, работая над проектами на вашем компьютере.
Это не только познакомит вас с инструментами, которые обычно используются профессиональными разработчиками, но и означает, что вы выросли как разработчик и готовы начать работать самостоятельно—отличная работа!
Специфичные для написания кода текстовые редакторы предоставляют ряд преимуществ:
- Подсветка синтаксиса для конкретного языка
- Автоматическое отступление кода
- Цветовые схемы в соответствии с вашими предпочтениями и облегчают чтение кода
- Плагины или дополнительные программы для обнаружения ошибок в коде
- Древовидное представление или визуальное представление папок и файлов проекта, позволяющее удобно перемещаться по проекту
- Сочетания клавиш или комбинации клавиш для более быстрой разработки
Возможно, вы также читали или слышали об IDE или “интегрированных редакторах разработки».” IDE позволяет не только редактировать, но и компилировать и отлаживать код с помощью одного приложения или интерфейса. Хотя текстовый редактор, который мы рекомендуем, не считается IDE, он имеет множество функций, подобных IDE, которые облегчают жизнь разработчика, не требуя большого количества ресурсов, которые обычно требуются для IDE. Лучшее из обоих миров!
Выбор текстового редактора
Есть несколько текстовых редакторов на выбор. Например, код VisualStudio является одним из самых популярных текстовых редакторов, используемых разработчиками. (Это код VisualStudio, а не VisualStudio, что немного отличается.Нам нужен первый, с «Кодом» в названии.) Другие популярные текстовые редакторы, о которых вы, возможно, слышали, — это Atom и SublimeText.
Любой из упомянутых текстовых редакторов отлично подходит для разработки, но чтобы упростить задачу, мы предлагаем вам начать с кода VisualStudio. Некоторые из преимуществ этого редактора заключаются в следующем:
- Бесплатное использование
- С открытым исходным кодом (это означает, что код программы можно просматривать, изменять и делиться)
- Функции, подобные IDE
- Поддерживается большим сообществом пользователей и Microsoft
Когда вы продвинетесь в своей карьере кодирования, вы можете попробовать другие редакторы кода, чтобы увидеть, какие функции лучше всего подходят для вашего личного рабочего процесса разработки.
Установка кода VisualStudio
Итак, мы выбрали наш текстовый редактор, теперь нам просто нужно установить его на наш компьютер!
Шаги по установке
- Процесс установки для компьютеров под управлением macOS, Windows и Linux (в частности, Ubuntu и Debian) будет очень похож, и использование кода VisualStudio во всех из них будет одинаковым.
- Посетите веб-сайт кода VisualStudio, чтобы загрузить последнюю версию кода Visual Studio: https://code.visualstudio.com/
- Вы должны увидеть отображаемую операционную систему вашего компьютера, но если это не так, нажмите на стрелку вниз и найдите опцию, соответствующую вашей операционной системе, в раскрывающемся меню и нажмите на значок со стрелкой вниз в разделе “Стабильная.”
- Пользователи Windows: При этом будет загружена последняя версия кода VisualStudio в виде exe-файла .
- Пользователи Mac: При этом будет загружена последняя версия кода VisualStudio для Mac в виде zip-файла .
- Пользователи Linux: .deb и .rpm-это разные типы файлов для хранения данных. Мы предлагаем вам загрузить файл .deb, чтобы автоматическое обновление работало в соответствии с документацией по коду VisualStudio.
Как только файл кода VisualStudio будет загружен, нам нужно его установить. Найдите файл кода VisualStudio в файловом менеджере, программе, которая позволяет просматривать файлы и папки на вашем компьютере.
- Пользователи Windows: Откройте файл .exe, нажав на него, и запустите установщик. Продолжайте нажимать ‘Далее’, а затем, наконец, «Готово».
- Пользователи Mac: Загруженный zip-файл должен находиться в папке » Загрузки’. Откройте файл. Если вы видите это сообщение, выберите “Открыть.”
- Пользователи Linux: Загруженный файл должен находиться в вашей папке » Загрузки’. Найдите его в своем файловом менеджере, дважды щелкните и выберите «Установить» в центре программного обеспечения GUI или выполните следующие команды, по одной за раз, в терминале:
sudodpkg -i downloaded_filename.deb
sudoapt-getinstall -f
Убедитесь, что ваше приложение VisualStudioCode сохранено в месте, которое, как вы знаете, вы легко сможете найти.
- Пользователи Windows: Он будет автоматически помещен в меню «Пуск».
- Пользователи Mac: Щелкните и перетащите значок кода VisualStudio из папки «Загрузки» в папку «Приложения».
- Пользователи Linux: Он должен появиться в панели задач программ.
Вот и все, вы успешно установили свой текстовый редактор и готовы приступить к кодированию!
Используйте код VisualStudio для запуска проекта вне платформы
По мере прохождения различных уроков и путей здесь, в Codecademy, вам может потребоваться создать проект на своем собственном компьютере, а не в учебной среде Codecademy. Это может быть сложно, но это захватывающий шаг, который сигнализирует о том, что вы готовы работать самостоятельно.
Для этого нам нужно будет использовать текстовый редактор, который мы установили выше. Давайте на минутку опробуем код VisualStudio.
Что такое «папки разработки»?
Перед использованием текстового редактора важно создать организованную файловую систему. По мере роста числа и размера ваших проектов становится все более важным знать, где сохранять новые проекты и находить старые проекты.
Большинство разработчиков хранят свои проекты в удобном для поиска каталоге (который вы, возможно, привыкли называть «папкой»). Здесь, в Codecademy, мы рекомендуем называть этот каталог проектами. В нем будут храниться все ваши проекты кодирования.
Всякий раз, когда вы создаете новый проект, независимо от того, насколько он мал, вы всегда должны создавать новую папку в каталоге проектов. Вы обнаружите, что проекты с одним файлом могут быстро превратиться в большие проекты с несколькими папками.
Давайте сделаем проект
Ниже приведены шаги, которые необходимо выполнить, чтобы создать новую папку для всех ваших программных проектов. Вы также узнаете, как загрузить новую папку проекта в код VisualStudio и создать свой самый первый HTML-проект “helloworld”.
Мы рекомендуем вам посмотреть приведенное выше видео, а затем выполнить следующие письменные действия.
Создайте папку разработки.
Перейдите в папку с помощью файлового менеджера или терминала. Убедитесь, что это папка, которую вы регулярно посещаете и будете помнить. Создайте новую папку под названием «Проекты».
- Пользователи Mac: Это может быть ваша учетная запись пользователя или папка “Home”.
- Пользователи Windows: Возможно, вы захотите сохранить это на диске C.
- Пользователи Linux: Вы можете сохранить это в папке пользователя внутри папки “Home”.
Внутри папки «Проекты» создайте новую папку с именем HelloWorld. Все, что вы добавите в эту папку, будет частью вашего проекта HelloWorld.
Откройте код VisualStudio
Откройте папку разработки
Нажмите на значок «Проводник» в меню слева, нажмите на кнопку «Открыть папку» и выберите папку разработки. Это запустит ваш файловый менеджер. Перейдите в папку HelloWorld и выберите Открыть. Папка откроется в боковой панели кода VisualStudio. На данный момент в папке не должно быть никакого содержимого. На следующем шаге мы добавим файл.
Добавьте файл.
Прежде чем вы узнаете, как добавлять файлы в папку проекта, важно понять назначение расширений файлов. Расширение файла-это суффикс имени файла (последние 3 или 4 символа в имени файла, перед которыми стоит точка) и описывает тип содержимого, содержащегося в файле. Например, расширение файла HTML-это .html, и оно указывает браузеру (и другим приложениям) интерпретировать содержимое файла как HTML-документ.
Как только код VisualStudio загрузит папку проекта, вы сможете добавить файлы. В приведенных ниже шагах описано, как добавлять файлы. Не беспокойтесь о том, чтобы сделать это на своем собственном компьютере. К этому мы еще вернемся.
В области проводника кода VisualStudio щелкните имя папки разработки. Справа от имени папки появятся четыре значка. Нажмите на значок «Новый файл». Введите имя нового файла с соответствующим расширением файла ( например, .html, .css, .csv). Очень важно, чтобы вы включили правильное расширение файла, чтобы такие программы, как linters, знали, как интерпретировать его содержимое. Когда закончите, нажмите Enter.
Начните кодирование!
Скопируйте и вставьте следующий шаблонный HTML-код:
Часто сохраняйте файл с помощью функции автоматического сохранения и отслеживайте изменения с помощью системы управления версиями, если вы знаете, как ее использовать. (Чтобы включить автоматическое сохранение, нажмите «Файл», а затем «Автоматическое сохранение». Когда он включен, вы увидите галочку рядом с надписью «Автоматическое сохранение».) Это уменьшит вероятность потери несохраненной работы.
Расширения файлов и подсветка синтаксиса
Синтаксис — это набор правил, которые говорят нам, как создавать правильно написанный код. Код VisualStudio и другие текстовые редакторы могут интерпретировать расширения файлов и выделять синтаксис, зависящий от языка. Подсветка синтаксиса — это инструмент для облегчения чтения кода. Взгляните на свой index.html файл. Текст и теги имеют разные цвета.
Вот как код VisualStudio выделяет синтаксис .html. С каждым новым языком, который вы изучаете, код VisualStudio будет выделять текст таким образом, чтобы ваш код было легко читать. Это может отличаться от других текстовых редакторов, а также от того, как ваш код выделяется в Codecademy.
Хотя код VisualStudio поставляется с подсветкой синтаксиса по умолчанию, вы можете изменить используемые цвета. Хорошие цветовые темы облегчат чтение всех этих строк кода на ваших глазах. (Попробуйте низкоконтрастные, темные темы, такие как “SolarizedDark” или «DraculaDark».”)
Для этого выберите Цветовую тему на странице приветствия при первом открытии кода VisualStudio или нажмите Код в строке меню в верхней части окна рабочего стола, затем нажмите Настройки, а затем Цветовую тему. Вы также можете искать цветовые темы для установки с помощью меню Расширений .
Просмотрите свой HTML-файл в браузере
На данный момент ваш файл готов к просмотру в веб-браузере. Следующие шаги следует предпринять вне кода VisualStudio:
- Перейдите к index.html файл в папке HelloWorld через файловый менеджер или терминал.
- Дважды щелкните или откройте index.html. Страница должна открыться в вашем веб-браузере по умолчанию. Потратьте секунду, чтобы полюбоваться своей работой—вы сделали свой первый проект с помощью кода VisualStudio.
- Идите дальше с функциями кода VisualStudio
Если вы уже чувствуете себя комфортно с предыдущими шагами, изучите следующие функции для дальнейшей настройки среды разработки. Вам не нужно использовать эти предложения для завершения проектов в Codecademy, но они могут помочь вам более эффективно писать код и сделать VisualStudioCode таким полезным редактором!
Отладка кода в редакторе: Правильно, вы можете запускать и тестировать код из редактора!
Контроль версий: Вам не нужно переключаться на терминал на вашем компьютере, чтобы отслеживать изменения с помощью Git.
Встроенный терминал: Вы можете запускать команды командной строки из редактора с помощью кода VisualStudio.
Завершение работы
Поздравляю! Вы успешно настроили свой текстовый редактор и готовы создавать веб-сайты на своем собственном компьютере.
Настройка VSCode для работы с HTML
В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++.
VSCode является универсальной IDE, благодаря наличию онлайн каталога с множеством расширений, позволяющих настроить среду как вам удобней. При этом её можно использовать для разработки на разных языках программирования.
Данная среда может использоваться и для разработки HTML-страниц.
Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!
Установка расширения Browser Preview
чтобы открыть окно Расширения.
Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg.
Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок.
Также нам понадобится расширение – Live Server от Ritwick Dey.
Установка расширения Live Server
Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку!
После установки Live Server обязательно закройте VSCode и запустите его снова.
Установка
Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.
Создание проекта
Давайте создадим тестовый проект для нашей страницы.
Допустим, все проекты у нас будут храниться в папке d:\html
Откроем консоль cmd.exe и введем команды:
Откроется новое окно VSCode, в котором уже открыта папка проекта test1:
Добавим в нее новый файл index.html
Для этого нажмите на указанную кнопку и введите имя файла:
Щелкните на файл, чтобы открыть его в редакторе.
Давайте создадим простейшую страницу:
Проверка HTML-страницы
У нас есть проект и web-страница, пришло время её проверить.
Сначала запустим Live Server, для этого просто нажмите кнопку Go Live:
Откроется новое окно браузера и сервер будет запущен на порту
Закройте вкладку браузера, мы будем использовать Browser Preview
Создание конфигурации для запуска Browser Preview
Выберите меню Run -> Add configuration…
Выберите пункт Browser Preview
Будет создан файл launch.json замените его содержимое на:
Сохраните и закройте вкладку.
Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации:
.
Нажмите на «Запустить test1…»
Откроется вкладка с нашей страницей:
Работа с Browser Preview
Данное расширение очень удобно при разработке страниц с нуля, так как позволяет видеть изменения сразу после сохранения страницы.
Давайте добавим текст на страницу:
Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview
Отладка сайта в браузере
Вы можете использовать внешний браузер для отладки сайта, запущенного в Live Server
Запустите Google Chrome и откройте в нем ссылку http://localhost:5500
Я расположил окна рядом, для большей наглядности.
Давайте добавим еще одну строку в html-файл:
Сохраним файл – содержимое обновится и в браузере, и во вкладке Browser Preview.
Заключение
Сегодня мы рассмотрели настройку среды разработки VSCode для разработки HTML-страниц.
Мы установили расширения Browser Preview и Live Server.
Создали тестовую страницу.
Настроили профиль для запуска нашей страницы в Browser Preview.
Открыли нашу страницу во вкладке Browser Preview и протестировали автоматическое обновление содержимого вкладки при обновлении содержимого HTML-страницы.
Открыли нашу страницу в Google Chrome используя ссылку от Live Server — http://localhost:5500
Протестировали обновление страницы в Google Chrome при обновлении содержимого файла.
В следующей статье мы рассмотрим настройку VSCode для разработки на языке программирования PHP.
How To Set Up Your HTML Project With VS Code
To explore HTML in practice and begin building an HTML website, we’ll need to set up a new project using a text editor. This tutorial series uses Visual Studio Code, a free code editor available for Mac, Windows, or Linux, but you may use whichever code editor you prefer.
After opening your preferred text editor, open up a new project folder and name it html-practice . We’ll use this folder to store all the files and folders we create in the course of this tutorial series.
To create a new project folder in Visual Studio Code, navigate to the “File” menu item in the top menu and select “Add Folder to Workspace.” In the new window, click the “New Folder” button and create a new folder called html-practice as illustrated in the gif below:
Next, create a new file called index.html inside the html-practice folder. We’ll use this file through the tutorial series to experiment with HTML. If you are using Visual Studio Code, you can create a new file by using Right Click (on Windows) or CTRL + Left Click (on Mac) on the html-practice folder, selecting “New File”, and creating the file index.html as illustrated in the gif below:
You now have a project folder and file for exploring HTML. We’ll return to this file in the tutorials ahead.
Debugging and Troubleshooting CSS and HTML
Before we get started with our HTML exercises, be aware that precision is important when writing HTML. Even an extra space or mistyped character can keep your code from working as expected.
If your HTML code is not rendering in the browser as intended, make sure you have written the code exactly. To troubleshoot errors, check for extra or missing spaces, missing or misspelled tags, and missing or incorrect punctuation or characters. Each time you change your code, make sure to save your file before reloading it in the browser to check your results.
A Quick Note on Automatic HTML Support Features
Some code editors—such as the Visual Studio Code editor that we’re using in this series—provide automatic support for writing HTML code. For Visual Studio Code, that support includes smart suggestions and auto completions. While this support is often useful, be aware that you might generate extra code that will create errors if you’re not used to working with these support features. If you find these features distracting, you can turn them off in the code editor’s preferences.
We are now ready to begin learning how the CSS language works. In the next tutorial, we’ll begin exploring how CSS rules are used to control the style and layout of HTML content on a webpage.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Tutorial Series: How To Build a Website with HTML
This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.
At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.