Posted on Jul 9, 2023

How to create a web page using HTML, a step-by-step tutorial.

About

In this article we will learning that how we could create a webpage only with the help of HTML. This particular article will also give you a basic working of some of the common HTML tags.

Step1: Creating the folder

Create a new folder on your system to hold your webpage files. Name it something like "MyWebPage". This folder will be the root directory for your webpage.

Step2: Setting up the HTML file

Create a HTML file with .html extension in the editor. I’ll be using Virtual Studio Code as my editor. Give the file a meaningful name like index.html.

Step3: Add the basic HTML structure

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MyWebPage</title> </head> <body> </body> </html>

Paste the following code in the editor and our system is ready to a create webpage.

NOTE

Shortcut for Step3 which works only in VS Code is:
html:5 and you get the same basic HTML structure written.

HTML doctype declaration tells the browser that this is an HTML document. Followed by the <head> tag which will contain the title which is displayed in the browser’s title bar, and meta data of our webpage. Then comes the <body> tag, which can be divided into many sub parts like the header, main and footer which together forms a webpage.

Step4: Add content to the webpage

Inside the <body> section, you can add various elements which will make up our webpage. It may include a paragraph tag <p>, a heading tag <h1>, inline tags, etc. Let's add a heading followed by paragraph of text to our webpage.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Web Page</title> </head> <body> <h1> About Me </h1> <p> Welcome to my About Me page! Here's some information about who I am. <h3>[your name]</h3> <h3>[your favourites]</h3> </p> </body> </html>

In the code above, <h1> tag is used to give the heading, while the <h3> tag is used to give subheading. Then, we have used <p> for paragraph.

Step5: Our basic webpage is ready!

Save the changes you made to the "index.html" file. Now, you can open it in a web browser to see your webpage. Simply double-click the "index.html" file, and it should open in your default web browser.