Начало работы, щелкнув правой кнопкой мыши HTML-файл
Используйте это руководство, чтобы узнать, как открыть и закрыть Средства разработки, щелкнув правой .html кнопкой мыши файл demo To Do в Обозреватель Visual Studio Code, не запуская веб-сервер.
Шаг 1. Установка средств разработки и необходимых компонентов
- Если вы еще этого не сделали, выполните действия, описанные в разделе Установка расширения DevTools для Visual Studio Code, а затем выполните следующие действия. Для этого руководства не требуется устанавливать и запускать веб-сервер, но рекомендуется.
Шаг 2. Запустите средства разработки, щелкнув правой кнопкой мыши HTML-файл
Щелкнуть файл правой кнопкой .html мыши в Обозреватель Visual Studio Code — это main способ открыть средства разработки, если веб-страница не требует запуска на веб-сервере.
- В отличие от кнопки Запустить экземпляр , этот подход открывает средства разработки в режиме отладки.
- В отличие от кнопки Запустить проект , которую мы будем использовать позже, этот подход не требует создания launch.json файла.
Мы продемонстрируем, открыв демонстрационное веб-приложение :
- В Visual Studio Code выберите Файл>Открыть папку.
- Перейдите в каталог, в который вы клонировали репозиторий Demos, откройте конкретный каталог для приложения demo-to-do , например C:\Users\username\Documents\GitHub\Demos\demo-to-do\ , и нажмите кнопку Выбрать папку :
- Выберите Панель> действий Обозреватель (
) > правой кнопкой мыши index.html , а затем выберите Открыть в браузере Edge>Открыть с помощью средств разработки: 
Шаг 3. Упорядочивание вкладок
Чтобы сэкономить место, используйте кнопку Закрыть средства разработки или Открыть средства разработки и кнопку Переключить экранную трансляцию , чтобы переключить (открыть или закрыть) вкладки DevTools.
- В левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию :
Вкладка Edge DevTools: Browser (Инструменты разработки для Edge: браузер ) закрывается. - На вкладке Edge DevTools снова нажмите кнопку Переключить экранную трансляцию . Откроется вкладка Edge DevTools: Browser ( Браузер ).
- В правом верхнем углу вкладки Edge DevTools: Браузер нажмите кнопку Закрыть средства разработки :
- В правом верхнем углу вкладки Edge DevTools: Browser нажмите кнопку Открыть средства разработки .
- Перетащите вкладку Edge DevTools: Browser, чтобы закрепить ее в любом месте Visual Studio Code, например группировать с помощью редактора исходного кода.
Шаг 4. Изменение CSS в средствах разработки, автоматическое обновление CSS-файла
На вкладке Edge DevTools на вкладке Стили инструмента >Элементы можно изменять селекторы CSS, правила и значения. Флажок css зеркало редактирования установлен по умолчанию, поэтому .css файл автоматически редактируется, но изменения не сохраняются, поэтому вы можете решить, следует ли сохранять изменения.
- В инструменте Элементы на вкладке Стили щелкните значение CSS, например размер шрифта текста.
- Измените значение CSS, например с помощью колесика мыши или нажатия клавиш СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ. Откроется связанный .css файл, например to-do-styles.css и прокручивается до строки, определяющей значение CSS, и автоматически изменяет .css файл, но не сохраняет изменения:
- .css Закройте файл. Visual Studio Code выводится запрос на сохранение изменений.
- Нажмите кнопку Не сохранять .
Шаг 5. Пошаговое выполнение кода JavaScript в отладчике
- Выберите панель > действий Обозреватель ().
- В каталоге demo-to-do щелкните to-do.js , чтобы открыть его. Прокрутите changeTask вниз до функции и щелкните влево от номера строки, чтобы задать точку останова:
- Если боковая панель Выполнения и отладки не отображается, выберите Просмотреть>выполнение. Боковая панель запуска и отладки содержит панель контрольных значений и другие панели отладчика.
- В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , введите задачу, например тест. Отладчик Visual Studio Code приостанавливает работу в точке останова to-do.js в файле:
- На панели инструментов Отладка или с помощью меню Выполнить или нажатием клавиш выполните несколько строк кода в to-do.js .
- В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , щелкните кружок «Готово» рядом с тестовой задачей. Отладчик Visual Studio Code приостанавливается в точке останова to-do.js в файле.
Шаг 6. Закрытие средств разработки
Чтобы завершить отладку и закрыть вкладки Edge DevTools :
- На панели инструментов Отладка нажмите кнопку Остановить (SHIFT+F5). Или в меню Выполнить выберите Остановить отладку: Вкладка Edge DevTools закрывается, а вкладка Edge DevTools: Browser (Средства разработки для Edge: браузер ) закроется.
- Закрытие средств разработки в открывании средств разработки и в браузере DevTools.
Вы завершили работу с руководством «Начало работы, щелкнув правой кнопкой мыши HTML-файл». Рекомендуется также выполнить другие руководства. См. статью Начало работы с расширением DevTools для Visual Studio Code.
См. также
- Открытие средств разработки и браузера DevTools
- Расширение Средств разработки Microsoft Edge для Visual Studio Code
Github:
- demo-to-do — демонстрационного веб-приложения, работающего на сервере github.io .
- Исходный код для демонстрации
- Репозиторий MicrosoftEdge/Demos
Редактор для HTML: пишем код, чтобы было удобно
Для того, чтобы написать код, сгодится вообще любой текстовый редактор. Подойдёт даже «Блокнот» на вашем компьютере (но в нём очень неудобно всё делать). Мы скачаем и установим хороший редактор, заточенный под веб-разработку. Покажем всё на примере Visual Studio Code.
Зайдите на сайт и скачайте редактор. Если у вас Windows, то нажмите на любую из синих кнопок. Если Mac OS или Linux — нажмите Other platforms.
Установка пройдёт как обычно — нужно запустить файл VSCodeUserSetup, много раз нажать «Далее» и поставить пару галочек.
Шаг 2. Запускаем редактор и осматриваемся
Свежеустановленный VS Code встречает нас экраном с большим количеством ссылок. С ними можно познакомиться позже, а сейчас нужно настроить всё для работы.
Хорошо бы, чтобы во время работы все нужные файлы лежали в одной папке (пока проект маленький, так можно делать). Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.
По шагам на скриншоте:
- Add workspace folder — открывает меню выбора папки.
- Создадим новую папку personal_page в любом удобном месте и зайдём в неё.
- Нажмём Add.
После этого слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace). Мы создали папку, давайте её наполним.
Шаг 3. Добавляем файлы
После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавим три файла, которые понадобятся в работе — index.html, style.css и script.js. Для начала этого хватит.
Шаг 4. Делаем работу удобнее
Сейчас все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Чтобы было удобнее, код со стилями можно перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down, чтобы увидеть результат.
Шаг 5. Добавляем код
Пока отредактируем только index.html (файл с разметкой) и style.css (файл со стилями), а script.js оставим на будущее. Если у вас уже есть какой-нибудь код, напишите его, или используйте готовый — мы, например, возьмём код из интерактивных курсов.
Сайт начинающего верстальщика Взгляд упал на кота. Скопируем код со стилями из файла — откройте его в браузере, скопируйте все строки и вставьте в файл style.css в редакторе.
Шаг 6. Запускаем код и смотрим на результат
Самый простой способ — открыть папку с файлами через проводник и запустить файл index.html . Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу.
Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях.
Для этого нам понадобится расширение Live Server. Найти его можно прямо в VS Code (пятая иконка в меню слева) — введите название и нажмите Install. Другой способ — скачать Live Server из магазина расширений, но это менее удобно.
После установки расширения Windows может попросить разрешение на доступ к сети. Это нужно, чтобы запускать локальный сервер, Разрешайте, это безопасно.
Чтобы запустить код, нажмите кнопку Go Live на нижней панели.
Результат выглядит так. Слева — редактор, справа — браузер. Теперь измените код в редакторе и сохраните его, а он автоматически изменится и в окне браузера.
Что мы сделали
- Установили и настроили редактор кода.
- Создали рабочую папку и добавили туда файлы нашего проекта.
- Научились редактировать и сохранять файлы с кодом.
- Установили расширение, чтобы сразу видеть результат вёрстки.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Создание HTML документа
HTML документ — это обычный текстовой файл c расширением .html , который содержит HTML-код. HTML документ иначе ещё называют HTML файлом .
Чтобы из обычного текстового файла (с расширением .txt ) сделать HTML документ, нужно сменить расширение с .txt на .html .
Открыть файл, сохраненный с расширением .html , для просмотра в браузере можно двумя способами:
- Кликнуть по нему два раза левой кнопкой мыши, в этом случае HTML документ откроется в том браузере, который выбран по умолчанию.
- Кликнуть по нему ПКМ → навести курсор на открыть с помощью. → выбрать нужный браузер.
При получении HTML документа браузер будет отображать его в виде веб-страницы ( веб-страница — это то, что отображается в окне браузера). Рассмотрим это на примере. Создадим HTML-документ и расположим в нём следующий HTML-код:
Заголовок Мой первый заголовок
Мой первый абзац
Теперь откроем HTML файл браузером. В окне браузера мы не увидим отображения самого HTML-кода, потому что он будут интерпретирован для отображения содержимого страницы в нужном виде. Результат данного кода в окне браузера:
Чтобы отредактировать код HTML документа, нажимаем на него ПКМ → наводим курсор на открыть с помощью. → и выбираем нужный редактор, если в списке нет нужного редактора, жмём Выбрать программу. и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++ (редактировать с помощью notepad++).
Смена расширения файла
- В открытом редакторе (или в обычном текстовом документе) нажимаем файл → выбираем сохранить как → внизу в текстовом поле имя файла: напишем к примеру так: mypage.html → жмём сохранить . Всё, HTML документ создан.
- Кликаем правой кнопкой мыши (ПКМ) на текстовом файле → выбираем переименовать и меняем расширение с .txt на .html . Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: открываем Панель управления → выбираем Параметры папок (в Windows 10 данный пункт называется Параметры проводника ) → вкладка Вид → прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов .
С этой темой смотрят:
- Как браузер получает веб-страницы?
- Введение в html
- Структура html-документа
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2023 © puzzleweb.ru | razumnikum.ruКак добавить свой HTML-код?
Возможность размещения своего HTML-кода присутствует только на тарифе «Про». Этот функционал предназначен для тех, кто профессионально разбирается в вебе, нуждается в расширенных возможностях и точно знает, что с ними будет делать.
Внимание!
Работа с этим виджетом требует знаний HTML, CSS и JavaScript. Написание кода с ошибками может привести к некорректной работе и отображению сайта.
Разместить свой HTML-код можно:
-
В конструкторе — перетащите виджет «Html-код» на сайт и кликните по нему для редактирования содержимого:
Примечание:
Этот блок нужно использовать в том случае, если вы размещаете какой-то внешний виджет на сайт или любые другие HTML-элементы, например таблицу или любой другой блок с содержимым.
В head или в конец body — используйте виджет «Свой код» в панели управления uKit:
В настройках можно выбрать место расположения кода и страницы, на которых он будет размещен: 
Примечание:
Важно:
Чтобы изменения вступили в силу, необходимо опубликовать сайт.
Работа с jQuery-скриптами
В случае, если вы хотите использовать jQuery-скрипты на вашем сайте, то это необходимо делать особым образом, поскольку библиотека jQuery подключается в uKit нестандартным способом. Все jQuery-скрипты должны размещаться в панели управления вашего сайта в разделе «Свой код». При этом код обязательно должен размещаться «В конец ». Все ваши скрипты должны оборачиваться библиотекой require.js следующим образом:
Попробуйте прямо сейчас!
- В левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию :