DEV Community

Cover image for How to create a web page using HTML, a step-by-step tutorial.
Keshav Jindal
Keshav Jindal

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Output

Image description

Top comments (0)