Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Если до этого урока вы пробовали верстать только с помощью онлайн-сервисов, то настало время установить редактор кода, который позволит сохранять результаты вашей работы на компьютере или сервере.

2 На самом деле, в отличие от многих языков программирования для верстки возможно использовать лишь один "Блокнот" или другой стандартный текстовый редактор в вашей системе. Именно так и верстали сайты в 90-х - начале 2000-х. Ведь HTML и CSS отрабатывают в браузере, а это значит, что наша задача - верно дать ему данные.

3 И сейчас вы можете сделать именно так, но развитие редакторов принесло множество полезных функций, которые недоступны в стандартных текстовых редакторах:

4 <ul><li>Подсветка HTML и CSS. С помощью подсветки можно просто отделять одни части от других. Например, в CSS подсветка разграничивает селекторы, названия свойств и их значения.</li>

5 <li>Автодополнение кода. Начав вводить нужное свойство или значение редактор предложит вам возможные варианты. Это похоже на то, как было во вкладкеStylesвChrome DevTools.</li>

6 <li>Валидация кода. То есть его проверка на корректность. Используя HTML, очень просто забыть закрыть блочный элемент. Браузеры стараются сглаживать такие ошибки и автоматически закрывать блоки, но они не всегда могут угадать ваш замысел.</li>

7 </ul><h2>Visual Studio Code</h2>

8 В настоящее время есть множество разных редакторов. В этом уроке мы остановимся на одном из самых популярных решений от компанииMicrosoft-Visual Studio Code. Это мощный инструмент, который можно использовать не только для верстки, но и для программирования на любом языке. После его настройки вы получите инструмент, с помощью которого сможете как верстать, так и программировать.

9 Скачать редактор вы можете с<a>официального сайта</a>. С самого начала он хорошо настроен для работы с HTML и CSS, поэтому приступать к экспериментам можно уже сейчас.

10 Просто создайте новый файл с помощью комбинации Ctrl + N и сохраните его с расширением.html. Например,index.html. Скопируйте следующий HTML-код и посмотрите, как редактор подсветит всеHTML-теги

11 Попробуйте добавить любой HTML-элемент в эту разметку и вы увидите, что редактор начнет предлагать вам различные варианты тегов, которые подходят под введенную комбинацию символов.

12 Обратите также внимание на то, что закрывающий тег <section> стал красного цвета. Так редактор нам подсказывает, что в разметке есть ошибка. Она связана с тем, что пока мы не дописали тег и не закрыли его.

13 В качестве интересного примера попробуйте в пустом HTML-файле ввести символ ! и нажать клавишу Enter. Вы получите базовую разметку HTML-документа со всеми основными тегами и мета-тегами, которые используются в реальных проектах.

14 Это возможно благодаря встроенному вVisual Studio CodeплагинуEmmet. С работой этого плагина мы познакомимся в одном из следующих уроков.

15 Теперь создайте любой файл с расширением.css. Например,style.css. Редактор кода так же автоматически определит, что в этом файле идет работа с CSS, и подключит специальную подсветку для данного языка.

16 Вы можете увидеть, что селектор, название свойства и его значение выделены тремя разными цветами. Это отлично помогает ориентироваться в больших CSS-файлах.

17 Это основные моменты при работе с HTML и CSS в редактореVisual Studio Code, которые пригодятся вам в самом начале. При работе с этим редактором вы также познакомитесь с прекрасной системой установки плагинов. Так вы сможете настроить редактор под свои нужды и задачи.

18 <h2>Другие редакторы</h2>

19 Конечно же, выбор редактора для работы не ограничен только одним решением. В настоящее время на рынке достаточно много различных редакторов кода, которые вы можете использовать. Среди них есть как платные, так и бесплатные. Среди отличных бесплатных решений также есть:

20 <ul><li>Sublime Text- частично бесплатный редактор. Может быть достаточно сложен в первоначальной настройке, но все равно он заслуженно любим многими программистами за небольшой вес и стабильную работу.</li>

21 <li>Brackets- редактор, рассчитанный на работу с HTML, CSS иJavascript. Не настолько расширяемый, как другие, но свою работу выполняющий хорошо.</li>

22 </ul>Вы можете попробовать различные редакторы и остаться на том, который вам больше всего нравится. Запомните, что редактор - не более чем инструмент. Он не сделает за вас всю работу, поэтому достаточно один раз привыкнуть к любому редактору и менять его нет смысла.