HTML is a markup language widely used in web development.
To run your HTML program, you need a web browser and a text editor. Since you are reading this, you have already installed a web browser, so we'll cover installing a text editor next.
However, If you don't want to install a text editor and just try out HTML, you can use our free HTML editor.
Install VS Code on MacOS
VS Code is a widely used code editor for HTML and general programming. So next, we will cover the installation of VS Code on Windows, macOS, and Linux (Ubuntu)
Go to the VS Code official website and download the Windows installer. Once the download is complete, run the installer and follow the installation process.
Now, you can write an HTML program on your device.
To install VS Code on your Mac, just follow these steps:
To install VS Code on your Mac, download the zipped file from the official VS Code on the VS Code official website. Once the download is complete, open the zipped file.
In Finder, open a new window and navigate to the Applications folder. To install the VS Code application from the zip file, drag it into the Applications folder.
You can now launch VS Code directly from the Applications folder.
Linux has various distributions, and the installation process differs slightly from each other. For now, we will focus on Ubuntu.
Open the Terminal and type,
sudo apt update
This command updates your package lists to ensure you get the latest versions of your software.
Proceed to install VS Code with
sudo snap install code --classic
After the command completes the execution, VS Code is ready to use.
Run Your First HTML Program
You must set up a few things to run your first HTML program.
- Create a new file
- Install the Live Server extension in VS Code
- Write Your HTML Program
- Run your Program
1. Create a new file.
First, open VS Code, click on the File in the top menu and then select New File.
Then, save this file with a
.html
extension by clicking on
File
again, then
Save As, and type your filename ending in
.html. (Here, we are saving it as
hello.html).
2. Install the Live Server extension in VS Code
Before coding, ensure the Live Server extension is installed in VS Code. Open VS Code and click on Extensions on the left sidebar. Search for the Live Server extension and click on Install.
This extension provides HTML language support, debugging, and more, helping you develop HTML applications efficiently.
3. Write Your HTML Program
Now, write the following code into your file:
<h1>Hello, World</h1>
4. Run your Program
Then click on the
go live
option at the bottom left of your screen. This should automatically open a new tab on your browser and see
Hello, World
written on it.
Now that you have set everything up to run an HTML program on your computer, you'll learn how the basic program works in HTML in the next tutorial.