Почему при открытии html файла в браузере ничего не отображается?
Создала файл html на рабочем столе под названием index.html, далее открыла его с помощью программы VS Code (правой кнопкой мыши нажала и выбрала открыть с помощью Code), написала следующий код (ввела ! и нажала Tab, далее написала между двумя body Hello World!) и когда открываю этот файл(index.html) в браузере хром, то там пусто, как если бы никакого кода не писала, хотя должна была появиться надпись Hello World! Подскажите, пожалуйста, в чем проблема, гуглила, но так и не поняла что не так.
Document Hello World! 4 ответов
Привет, в таких случаях, нужно проверить- сохранили ли вы изменения в файле, для этого ( программа VSCode) , откройте меню «Файл» и в выпадающем меню будет вкладка » Автосохранение» — нажмите на неё. Напротив «Автосохранение» , должна появится галочка. — Проблема решена ! Не хорошего , а замечательного, программирования
Привет, в таких случаях, нужно проверить- сохранили ли вы изменения в файле, для этого ( программа VSCode) , откройте меню «Файл» и в выпадающем меню будет вкладка » Автосохранение» — нажмите на неё. Напротив «Автосохранение» , должна появится галочка. — Проблема решена ! Не хорошего , а замечательного, программирования
HTML Hint – расширение VS Code для проверки HTML-кода
Сайтодел
В VS Code нет возможности проверять код по умолчанию, поэтому требуется дополнительное расширение. HTML Hint анализирует код и выявляет потенциальные ошибки, которые могут появиться во время разработки.
Из этого урока вы узнаете:
1) как установить HTML Hint
2) как работать с расширением
3) преимущества HTML Hint
1) как установить HTML Hint?
Установить расширение для VS Code очень легко. Откройте вкладку Extensions в левой части экрана и найдите HTML Hint с помощью строки поиска.
На экране появится множество расширений, где нужно будет выбрать нужное. Выберить его и нажмите кнопку «Установить». Готово! Теперь с расширением можно работать, оно уже встроено в ваш VS Code.
2) Как работать с расширением?
Представим такую ситуацию: вы написали HTML-код и искренне считаете, что все сделали правильно. Однако через некоторое время выясняется, что некоторые теги не закрыты или закрыты другими, неподходящими тегами.
Вполне возможно, что вы написали что-то лишнее в теге или добавили некорректные атрибуты, например, вместо «class=”image__card”» написали «CLASS=”image__card”». Расширение HTML Hint сразу находит неточности.
HTML Hint находит ошибки в коде и подчеркивает их, а также пишет комментарии, чтобы пользователь понял, что он сделал не так. Посмотреть список неточностей кода можно и во вкладке Problems внизу экрана, откуда вы можете переместиться именно в то место кода, где была допущена ошибка.
3) Преимущества HTML Hint
HTML Hint – это огромный плюс для веб-разработчика и для всех, кто использует в работе язык разметки HTML. Когда мы пишем код, мы можем случайно что-либо упустить, и тогда весь проект или его часть перестанет функционировать. Если код большой, на поиски ошибок могут уйти часы и даже дни.
Расширение, которое проверяет ошибки – это помощник в работе с HTML. Оно ускоряет создание сайтов и особенно полезно для новичков, которые только начинают свой профессиональный путь в разработке.
Еще одно достоинство HTML Hint – это возможность настраивать расширение под себя.
Надеемся, что статья была интересной и полезной. Применяйте знания в своей практике и не забудьте подписаться на наш канал!
Работа с редактором Visual Studio Code
2. Создание рабочей папки и добавление туда файлов проекта.
3. Научиться редактировать и сохранять файлы с кодом.
4. Установить расширения.
Установка и настройка редактора кода
Для того, чтобы написать код, подойдёт любой текстовый редактор. Например, даже «Блокнот» на компьютере.
1. Скачать редактор на https://code.visualstudio.com/ .
Если у вас Windows, то нажмите на любую из синих кнопок.
Если OS X или Linux — нажмите Other platforms.
2. Запустить файл VSCodeUserSetup и установка проходит обычны образом
3. Запускаем редактор.
При запуске редактора в первый раз открывается стартовая страница, на которой описаны все возможности редактора. Все ссылки интерактивные и открывают нужную часть интерфейса или страницу в браузере.
Редактор поддерживает множество языков программирования и легко настраивается под пользователя. Можно установить различные сочетания клавиш и цветовые схемы.
10 горячих клавиш VS Code:
· Быстро добавить комментарий
Обычно чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + /, и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.
· Перейти к строке под номером
Windows — Ctrl + G
Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G, введите номер строки и спокойно спасайте вселенную.
· Поменять строку местами с соседними
Случается такое, что ваш алгоритм — не алгоритм. Всё пошло не так, а вместо числа 42 вывелось сообщение «Данные удалены». Кому-то для этого нужно переписать весь код, но иногда бывает достаточно поменять строки местами и всё заработает.
Alt и стрелки меняют текущую строку местами с соседними.
· Дублировать строку
Windows — Shift + Alt + ↓ / ↑
Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.
· Перейти к парной скобке
Windows — Ctrl + Shift + \
Когда кода становится много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок, и вообще, что происходит. На помощь приходит Ctrl+Shift+\ — это хорошее дополнение к стандартной подсветке парных скобок в VS Code.
· Переименовать переменную
Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a, b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2.
· Отформатировать документ
Windows — Shift + Alt + F
VS Code предложить установить расширение или выбрать из существующих, а потом красиво отформатирует документ — расставит по местам блоки, скобки, и сделает строки кода читаемыми.
· Перейти к объявлению переменной
Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости, и где она объявлена. F12 перенесёт нас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.
· Включить/выключить перенос слов
Windows — Alt + Z
Вкусовщина. Если строки кода или текст не вмещается в редактор по ширине, включите перенос.
· Включить дзен-режим
Windows — Ctrl + K Z
Лучшее решение для тех, кто входит состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться обратно в реальный мир, нажмите Escape .
Рассмотрим интерфейс редактора на примере одного из проектов.
Основную часть экрана занимает окно с текстовым содержимым файла. В левой части экрана находятся вкладки активного меню, в котором находятся главные функции редактора. Вкладка проводника открывается по умолчанию при запуске программы. В неё выводятся список открытых файлов и каталог открытой папки.
Следующий пункт — поиск. В поле можно ввести искомое значение, и редактор покажет, в каких местах оно находится. При желании можно поменять значение через поле замены.
VS Code из коробки поддерживает работу с системой контроля версий Git. Можно выполнить базовые операции и посмотреть, как изменились файлы с момента последнего коммита.
Настройка Git в Visual Studio Code подробна описана в официальной документации .
VS Code отличает от конкурентов наличие встроенного отладчика. После небольшой настройки можно искать баги в коде прямо из редактора — например, поставить точку остановки и наблюдать за выполнением конкретного участка кода. Помимо этого у редактора есть встроенная консоль, в которую может выводиться результат работы или сообщение об ошибке, если что-то пошло не так. Отладчик можно настроить под разные языки и разные задачи.
Главное меню
File. В пункте File находятся команды, которые отвечают за работу с файлами рабочей папки. Через неё можно сохранять и открывать файлы, выбирать папки и выполнять другие действия.
Edit. Через этот пункт можно работать с открытым файлом — отменять последние действия, производить поиск по файлу.
Selection. В пункте Selection можно найти команды для выделения нужного участка кода.
View. Открывать различные приложения, встроенные в редактор кода, можно через пункт View. Здесь дублируются пункты активного меню, а ещё здесь можно открыть терминал, настроить элементы интерфейса и другое.
Go. Через пункт Go можно перемещаться между открытыми файлами и по документу. Также можно разделять рабочую область на части. Это удобно для работы на большом мониторе — можно держать в одном месте разметку и файлы стилей.
Debug. Здесь собраны команды для отладки скриптов.
Terminal. В редактор встроен терминал (он же командная строка). Он может выполнять как отдельные задачи, так и выводить командную строку в интерфейс редактора.
Создание рабочей папки и добавление туда файлов проекта.
Необходимо, чтобы во время работы все нужные файлы лежали в одной папке. Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.
1. Add workspace folder — открывает меню выбора папки
2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё
4. Слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace).
5. После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавить три файла, которые понадобятся в работе — index.html, style.css и script.js.
6. Все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Код со стилями перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down, чтобы увидеть результат.
Редактирование и сохранение файлов с кодом
1. Отредактировать только index.html (файл с разметкой) и style.css (файл со стилями).
Как писать код и сразу видеть результат
Когда только начинаешь программировать и делать сайты, важно понимать, что вообще происходит. Вот изменил ты параметр объекта — а правильно или нет? Заработало это или нет? Красиво вышло или ужасно?
Чтобы разработчик сразу видел результат труда, боги создали для него IDE — integrated development environment, по-русски — среду разработки. Это программа, в которой программист пишет код, ловит ошибки и наблюдает результат.
Чисто технически работать можно и без IDE: писать код в блокноте и просматривать его в специальных программах или браузере. Но это бывает медленно и требует дополнительных телодвижений. Лучше научиться пользоваться IDE и писать в сто раз быстрее.
Выбор среды разработки (IDE) — дело вкуса и привычки. Какие-то из них — универсальные, другие заточены под конкретные языки программирования. IDE часто похожи по своим возможностям и позволяют увеличивать функциональность за счёт внешних дополнений.
Visual Studio Code
Программу можно скачать с официального сайта. Несмотря на то, что VS Code делает Микрософт, это бесплатный продукт с открытым исходным кодом, доступный на всех платформах. Благодаря этому и своим возможностям VS Code стал одной из самых популярных сред для разработки в мире.
VS Code распознаёт почти все существующие языки программирования, самостоятельно или с помощью плагинов, и форматирует их соответствующим образом. Кроме этого, у него глубокая поддержка HTML, CSS, JavaScript и PHP — он проследит за парными тегами, закрытыми скобками и ошибками в командах.
Вот самые интересные возможности VS Code.
Умное автодополнение. Программа анализирует, какую команду вы хотите ввести, и предлагает закончить фразу за вас, с подсказками и объяснением. Удобно, если вы забыли порядок следования переменных или как точно звучит нужная команда:
Выполнение скриптов по шагам. Иногда нужно иметь возможность выполнить скрипт не сразу, а по шагам, например, чтобы понять, не зациклилась ли наша программа. Для этого используйте встроенный дебаггер — это программа, которая следит за кодом, ищет в нём ошибки и позволяет выполнять его поэтапно.
Множественное выделение и поиск. Чтобы поменять много одинаковых значений переменных или найти все одинаковые слова или команды, VS Code использует свой алгоритм обработки. Благодаря этому редактировать код становится проще, а замена функций или переменных происходит быстрее.
Мультикурсор помогает вводить одинаковые значения сразу на нескольких строках
Найденные одинаковые слова и команды можно тут же заменить на другие
Навигация по коду и описания функций. Когда пишешь большую программу, легко забыть то, что делал в начале — как работает функция или какого типа переменная используется в этом месте. Чтобы этого избежать, VS Code может показывать саму функцию, описание переменной или какие параметры передаются при вызове команды. Ещё это пригодится, если код достался вам по наследству от прошлого разработчика и нужно быстро понять, какие куски кода за что отвечают и как работают:
Сразу после установки VS Code не умеет показывать результаты работы кода, когда мы делаем веб-страницы. Это можно исправить с помощью расширения Live HTML Previewer. Для этого заходим в раздел «Extensions», щёлкая на последнем значке на панели слева или нажимая Ctrl+Shift+X, и начинаем писать «Live HTML Previewer» в строке поиска.
После установки и запуска расширения можно будет сразу видеть, как ваш HTML-код и CSS влияют на внешний вид и поведение страницы. Это особенно удобно, когда строишь сайт с нуля и хочешь сразу понимать, что происходит.
WebStorm
Среда разработки для JavaScript от компании jetBrains стоит денег, но есть пробный период в 30 дней. Вполне хватит, чтобы попробовать и понять, нужна эта программа или нет.
Автоподстановка. Некоторые IDE с автоподстановкой тормозят и не предлагают сразу все варианты переменных или команд — но не WebStorm. Здесь всё работает с первой буквы и понимает, когда надо предложить переменную, а когда команду или служебное слово:
Встроенная система задач. Полезно, когда в работе много проектов и нужно по каждому помнить, что ты хотел в нём сделать. Здесь это реализовано сразу и доступно для любого файла:
Проверка ошибок. WebStorm умеет сам проверять код на ошибки и пояснять каждую из них. Не всегда это работает идеально, но когда работает — экономит кучу времени:
Чтобы сразу видеть, что получается на странице, нам понадобится плагин LiveEdit. По умолчанию он выключен, но его можно включить или поставить отдельно в любое время. После активации нужно будет в настройках плагина поставить галочку «Update application in Chrome on changes in» — она как раз отвечает за обновление информации в браузере Chrome. Теперь можно писать код и сразу видеть результат:
Sublime Text 3
Бесплатный редактор, который назойливо предлагает занести денег разработчикам. Про Sublime Text у нас есть отдельная и более подробная статья — почитайте, там тоже интересно.
Sublime Text — потрясающе мощный текстовый редактор. Его сила — в скорости работы, он одинаково быстро обработает простую веб-страничку или программу на сто тысяч строк кода. Подсветка синтаксиса всех возможных языков программирования, автоподстановка, умное закрытие тегов — всё это доступно сразу после установки.
Вот что ещё умеет программа сразу после установки:
- показывать разными цветами команды и переменные в популярных языках программирования;
- автоматически завершать команды;
- выделять сразу все одинаковые слова;
- сворачивать код для удобства чтения;
- использовать любые горячие клавиши, какие только понадобятся;
- разделять рабочую область на несколько окон, в каждой из которых можно редактировать свой код.
Вторая суперспособность, которая превращает Sublime Text из простого текстового редактора в универсальное решение, — плагины. По принципу действия они такие же, как и в других программах из обзора, но они совершенно не влияют на скорость работы. Когда начинаешь плотно работать с Sublime Text, может показаться, что у него есть плагины для всего. Нужно редактировать одновременно один и тот же код, но в разных панелях — пожалуйста, написать быстро HTML-код — само собой, проверить код на ошибки и недочёты — без проблем.
Emmet сокращает время на написание кода, подставляя вместо стандартных команд целые куски готового кода
JavaScript & NodeJS Snippets упрощает написание кода на JavaScript и работает по тому же принципу, что и Emmet
SublimeCodeIntel помогает быстро разобраться в коде со множеством функций. Если щёлкнуть на название любой функции, плагин сразу покажет вам её описание.
Так как эта статья — для начинающих программистов, которым важно сразу видеть изменения в коде, то посмотрим, как это делает Sublime Text.
Сразу после установки он этого делать не умеет, но нам поможет плагин LiveReload. Он показывает все изменения в браузере, как только мы сохраняем рабочий файл с кодом. Это не так изящно, как в VS Code, но в случае с Sublime Text простительно. Дело в том, что привыкнув однажды писать в нём код, сложно пересесть на что-то другое, что работает с той же скоростью. Установка LiveReload состоит из двух компонентов — плагин для Sublime Text и расширение для браузера.
После установки давайте посмотрим, что у нас получилось. Создадим файл tested.html в Sublime Text, разметим его внутри стандартным шаблоном как HTML-документ, а рядом откроем окно браузера.
В реальном времени мы не увидим на странице те изменения, которые вносим в код, как это было в VS Code. Но если нажать Ctrl+S, чтобы сохранить все данные, то браузер моментально показывает то, что мы сделали.
Если вы серьёзно настроены программировать, присмотритесь к Visual Studio Code. Почти со всем он справляется сам или с плагинами, не нужно подключать дополнительно браузеры или сторонний софт.
Любите, чтобы после установки были доступны почти все нужные функции? Попробуйте WebStorm — платную, но мощную среду разработки.
Если вам важна скорость работы в любых ситуациях, то Sublime Text — лучший выбор. Он очень быстрый, и для него есть плагины почти на все случаи жизни.
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.