In this episode of Conquer HTML series, we will be making a very basic HTML website and opening it in the browser.
How to open a HTML file in the browser?
Firstly, print the starter HTML template using emmet extension or type it by yourself.
<!DOCTYPE html> <html> <title> </title> <body> </body> </html>
Now, within title tags, type the name of the website, “My first website”. Within the body tags type out an element of your choice, for this tutorial, we will be putting a “Hello World” text inside h1 tags.
<!DOCTYPE html> <html> <title>My first website</title> <body> <h1>Hello World</h1> </body> </html>
Now save this file with a .html extension. (My website.html)
Go to the file explorer and search for this file, right click on it, select “Open with…” and click on the browser of your choice. A browser window will pop up with Hello World written on it. The text within title tags will appear on the top of the browser window. This is how you open a html file in your browser and check out how your website looks.
How to open a HTML file using VS Code live server?
While you are coding a website using HTML, you will frequently feel the need to open the html file in browser and take a look at website preview, opening it manually everytime can soon become a tedious task, this is where VSCode “Live Server” extension comes to the rescue.
Live Server extension allows you to open the browser window right from VS Code window in just one click, it refreshes the browser every time you make a change in your code, thus you don’t have to manually refresh it every time you need to see the preview.
Note: You need to enable the auto-save feature of VSCode so that the file is saved automatically whenever a change is made in the code, this save triggers the live server which in turn refreshes the browser window and you always have the live view of your website.