Creating an HTML (Hypertext Markup Language) page is the first step in web development. HTML is the standard markup language used to structure content on the web. Whether you’re a beginner or looking for a refresher, this step-by-step guide will help you create your first HTML page.
Setting Up Your Development Environment:
To create an HTML page, you’ll need a basic text editor like Notepad (Windows), TextEdit (macOS), or Visual Studio Code (cross-platform). Make sure you have one of these editors installed on your computer.
1. Create an HTML Page using Notepad
- Creating the Basic HTML Structure:
Open your Notepad and Write the HTML Code written in the following image.
Read this – Explanation of basic html code structure to understand the html code written in the above image.
- Save the HTML Document:
Now save this HTML Document on your Desktop or anywhere.
- Choose the Appropriate File Extension:
Here I have named the HTML Document index.html. It is not mandatory to give the same name, you can choose any name. But the file extension must be .html. Like –
- Run the HTML Page on a Web Browser:
After saving the HTML File, just double-click on it to open this HTML Page on the browser, or open your browser and drag the file to it.
2. Create an HTML page using Visual Studio Code
- Create a New Folder on Your Desktop:
First, create a new folder on your desktop or anywhere and name it as you wish.
- Open the Folder in Your VS code:
Open your Visual Studio Code editor » Click on the File » Click on the Open Folder.
- Create a New HTML File:
On the left of your VS Code, you can see the Folder Explorer. Click on the create new file Icon (see the following image) to create a new HTML file (
- Write and Save the HTML Code:
Write the HTML Code written in the following image and save it.
- Run the HTML file:
To run an file, you can simply open the HTML file (
index.html) on your web browser. But, there is a wonderful VS Code extension that you can use to run HTML files. The Extension name is Live Server.
Go to the VS Code extension section and install the Live Server Extension.
- Run the index.html file using the live server:
After installing the live server extension, make sure that the
index.htmlfile tab is selected, then click on the “Go Live” button.