Просмотр HTML-файла в браузере с помощью Visual Studio Code
Часто разработчикам, особенно начинающим, приходится столкнуться с задачей просмотра HTML-файла в браузере. Например, они создали веб-страницу, написали для нее код и теперь хотят увидеть, как она выглядит в реальном времени. В некоторых текстовых редакторах, таких как Notepad++, есть функция «Запустить в браузере». Но что делать, если используется Visual Studio Code от Microsoft?
В Visual Studio Code такой функции из коробки нет, но есть возможность установить расширение, которое позволяет открывать HTML-файлы в браузере.
Одно из таких расширений называется open in browser . Чтобы установить его, нужно сделать следующее:
- Открыть Visual Studio Code.
- Перейти на вкладку «Extensions» (или нажать Ctrl+Shift+X ).
- В поисковой строке ввести open in browser и нажать Enter .
- Найти расширение open in browser в списке и нажать Install .
После установки расширения, можно будет открыть HTML-файл в браузере следующим образом:
- Открыть нужный HTML-файл в Visual Studio Code.
- Нажать правой кнопкой мыши в области редактора кода и выбрать Open in Default Browser или Open in Other Browsers если нужно выбрать браузер, отличный от браузера по умолчанию.
Таким образом, просмотр HTML-файла в браузере с помощью Visual Studio Code становится простой и быстрой задачей.
How to Run a HTML File
wikiHow is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. To create this article, 24 people, some anonymous, worked to edit and improve it over time.
The wikiHow Tech Team also followed the article’s instructions and verified that they work.
This article has been viewed 585,254 times.
HTML (Hypertext Markup Language) is a web-based scripting language. It is mainly used to structure the look and function of websites. Any file containing HTML code is saved using the extension «.HTML». All modern browsers — such as Google Chrome, Safari and Mozilla Firefox — recognize this format and can open these files, so all you need to do to run an HTML file is open it in your Web browser of choice.
Saving an HTML File
Understand HTML. HTML stands for Hypertext Markup Language. HTML files are text files which represent the content and the layout of a web page. To read an HTML file, you can use any text editor (e.g notepad, notepad++, or any specialized HTML editor). However, if you want to see what the program looks like, you need to run it on a web browser, which is designed to read and render HTML files.
Write or copy HTML into a basic text editor. As you become a more proficient coder, you can use HTML editing programs like Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup, and Visual Studio Code, but a simple program is all you need to start. Notepad (Windows) or TextEdit (Mac) should suffice.
Save the file as your-file.html. If you make an HTML file in Notepad, TextEdit, or any other text editor, be sure to save it with the proper notation. Before saving the file, make sure that you have changed your «Save as type» to «All files» (if needed) and click «Save».
Running an HTML File
Make sure that there is a browser installed on your computer. To run a HTML file on your computer you must have a browser.
- HTML files usually are in a folder with the same name as the .html file but without the .html extension. Inside of the folder may be different files such as .js .css , images and other files. Do not worry about those, they are necessary files for the layout and functionality of the page. It is necessary not to delete these files. Leave them in the same directory (folder) as your html file, otherwise the page won’t display properly. If you would like to modify an html file, you will need to learn coding in html and other scripting languages
- Most computers will associate your default browser with the .html file extension. That means that normally, you don’t need to find a browser to open the file—you can just double-click on it, and the computer will open it in your default web browser.
- If your computer doesn’t recognize the file, Windows will ask whether to open this file using an already installed application, or search for the extension on the internet. Select the «open using already installed applications» option. You will be able to choose from a list of all browsers installed on the system.
View your HTML file in your chosen browser. The browser automatically interprets your coding and displays it. The location of the file will be displayed in the address bar—this will help you confirm that the HTML file has been opened, and not any other.
Alternate method: Run your browser, then press Ctrl-O. This should pull up an «Open» menu. Find your file, double-click it, and watch your program open up in a browser tab. Different browsers may have different «Open» hotkeys, so check your browser settings.
Running an HTML File for a Website
Open your preferred FTP platform. If your host has one built in, stick with that—it will make it a lot simpler. If not, use a third-party FTP host like FileZilla.
Next, connect to your remote server (your website’s server). If you’re using the built-in platform, you don’t need to worry about this. You’ll see two boxes on the left and two boxes on the right. Don’t worry about the left or top right ones; all you need to focus on is the bottom right box.
Wait until the file is uploaded. Then, if you’ve removed the default page, go and view your website to see your HTML file! If you see a directory listing, click the .html file to view.
Community Q&A
Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
First, save the program on your desktop with an extension «.html,» then right click on the file document and click on open with Chrome.
Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow