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. In this step-by-step tutorial you will learn how to create an HTML page using Notepad and Visual Studio Code.
Create HTML Page using Notepad
Step 1: Create the Basic HTML Structure:
Open your Notepad and write the HTML Code written in the following image.
- Document Type Declaration (
<!DOCTYPE html>): Specifies the HTML version and document type. <html>Element: The root element that contains all the content on the web page.<head>Element: Contains meta-information about the document, such as the title and character encoding.<title>Element: Sets the title of the web page displayed in the browser’s title bar.<body>Element: Contains the visible content of the web page, including text, images, links, and more.<h1>Element: Used to add main heading in a web page.
Step 2: Save the HTML Document:
Now save this HTML Document on your Desktop or anywhere.
Step 3: Choose the Appropriate File Extension “.html”
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 – example.html, mywebsite.html, test.html.
Step 4: 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.
Create HTML Page using Visual Studio Code
1. Create a New Folder on Your Desktop:
First, create a new folder on your desktop or anywhere and name it as you wish.
2. Open the Folder in Your VS code:
Open your Visual Studio Code editor » Click on the File » Click on the Open Folder.
3. 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 (index.html).
4. Write and Save the HTML Code:
Write the HTML Code written in the following image and save it (Ctrl + s).
5. 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.
6. Run the index.html file using the live server:
After installing the live server extension, make sure that the index.html file tab is selected, then click on the “Go Live” button.
Done!. Creating an HTML page is the first step in web development. As you become more proficient, you can explore advanced HTML features and learn about CSS (Cascading Style Sheets) and JavaScript to enhance your web pages further. With practice and continuous learning, you’ll be on your way to becoming a skilled web developer.