How to Build a Website using HTML?

Last Updated : 11 Oct, 2024

Building a website using HTML (Hypertext Markup Language) is the foundation of web development. HTML allows you to structure content, define headings, paragraphs, lists, and links, and create visually appealing web pages.

In this article, we'll learn the fundamentals of How to build a Website using HTML with all the key components like elements, tags, file structure, etc.

Table of Content

Set Up Your HTML document
Building HTML Website
Basic HTML Website
Conclusion

Set Up Your HTML document

To create a basic HTML website, the first step is to set up an HTML document. This can be done using any text editor, such as Notepad, Sublime Text, or Visual Studio Code. Here's how to get started:

To create an HTML document follow the following steps:

Step 1: Open your text editor such as Notepad Sublime Text, etc.

Step 2: Write the code given below in the text editor.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>First HTML file</title>
</head>

<body>
    <p>Hello Everyone!!</p>
</body>

</html>

Step 3: Save this file with the .html/.htm extension.

Step 4: Open that file with any browser. The output will be displayed.

So this is how we create a simple HTML document.

Building HTML Website

To create a website using HTML, you need to understand the various tags and attributes. HTML tags are used to structure the content, while attributes provide additional information.

Essential HTML Tags:

Header Tags (<h1> to <h5>):
- Use these tags to create headings of different sizes.
- <h1> is the largest heading, while <h5> is the smallest.
Bold Tags (<strong> or <b>):
- Make text appear bold using these tags.
Italic Tags (<i> or <em>):
- Use <i> for italics.
- <em> provides semantic emphasis on important text.
Ordered List (<ol>):
- Define an ordered list (numerical or alphabetical).
- Each list item starts with <li>.

Type	Description
type="1"	Numbered with numbers(default)
type="A"	Numbered with Uppercase Alphabets
type="a"	Numbered with Lowercase Alphabets
type="I"	Numbered with Uppercase Roman Numbers
type="i"	Numbered with Lowercase Roman Numbers

5. Unordered List (<ul>):

Display elements in bullet form.
Use <li> for each list item.

Type	Description
type="disc"	Items are marked in Bulletin. (default)
type="circle"	Items are marked with hollow circles.
type="square"	Items are marked with squares.
type="none"	Items are not marked.

6. Image Tag: If we need to add an image to our website we need to use the following syntax.

Syntax:

<img src="filename" alt="name / bit about image">

Here,

img: Tells browser that we want to add an image.
src: Tells source of image for eg image from desktop or a website.
alt: This attribute is used to describe an image. If the image is not able to download in a web browser due to some reason then alt is shown.

7. Anchor Tag: This tag is mainly used to connect one website to another.

Syntax:

<a href="https://www.geeksforgeeks.org/c-plus-plus/"> Click Here to Learn C++</a>

Note: Nesting is possible in HTML, which means that we can write one tag between another tag.

Example: In this example we providing steps to make spread cookies, including preheating, mixing ingredients, shaping dough, baking, and serving. Ordered list structured with steps. Page title "Steps To Form Spread Cookies."

HTML

<!DOCTYPE html>
<html>

<head>
    <title> Steps To Form Spread Cookies </title>
</head>

<body>
    <h1> Spread Cookies</h1>
    <br>
    <h2> Steps:- </h2>
    <ol type="I">
        <li>Preheat kitchen appliance to 350ºF (180ºC).</li>
        <li> In a massive bowl, combine along the spread, sugar, and egg. </li>
        <li>Scoop out a spoon of dough and roll it into a ball.
            Place the cookie balls onto a slippy baking sheet.
        </li>
        <li>For further decoration and to form them cook additional
            equally, flatten the cookie balls by pressing a fork down
            on prime of them, then press it down once more at a 90º
            angle to form a criss-cross pattern.
        </li>
        <li>Bake for 8-10 minutes or till rock bottom of
            the cookies square measure golden brown.
        </li>
        <li>Remove from baking sheet and freeze it.</li>
        <li><b>ENJOY!!</b></li>
    </ol>
</body>

</html>

Output

Example: Building a Basic HTML Website

Let's create a simple webpage for a "Steps to Bake Cookies" guide, using an ordered list to outline the steps.