How to build a Website using HTML?

Last Updated : 28 Mar, 2024

In today’s modern world, it has become essential for businesses, organizations, and individuals to have a strong online presence. One of the fundamental components of any website is HTML (Hypertext Markup Language). HTML provides the structure and layout for websites, enabling content to be displayed in an organized and structured way. In this article, we will learn how to create an HTML website.

Set Up Your HTML document

To create a website, the first step is to create an HTML document. You can create this document in any text editor, even on Notepad. Therefore, any text editor can be used to make an HTML file. All you need to do is add the extension “.html” or “.htm”. Let’s create the first basic HTML program.

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, we need to learn about the various tags and attributes available. HTML tags are instructions that are enclosed in angle brackets. By using these tags, we can design a visually appealing webpage. Some of the important tags that we can use are:

Header tags (<h1> … </h1> to <h5> … </h5>): These tags are used to provide headings of different sizes to your website. <h1>…</h1> is the largest heading while <h5>…</h5> is the smallest.
Bold tags (<strong>…</strong> or <b>…</b>): These tags are used to make text appear bold.
Italic tags (<i>…</i> or <em>…</em>): These tags are used to make text appear in italics. The difference between <i> and <em> tags is that <em> is used to provide semantic emphasis on important text or words, while <i> is used to make text appear in italics.
Ordered List (<ol>…</ol>): The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. It starts and ends with a <ol> tag, and each list item starts with a <li> tag. We can use the type attribute to define the type of ordered list that we want to create.

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>…</ul>): It displays elements in bulletin form . An unordered list starts with <ul > tag and each item starts with <li> tag. We can use the type attribute to define the type of unordered list we need to make:

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/?ref=shm”> Click Here to Learn C++</a>

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

Example:

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

Basic HTML Website

Example: Here, we create a simple website of GeeksforGeeks.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>GeeksForGeeks</title>
   </head>
   <body style="background-color:#D5F5E3 ">
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/43/GeeksforGeeks.svg" 
         style="display: block;  margin-left: auto;margin-right: auto; width: 10%;" >
      <h1 style="color:green;text-align:center"><strong>GeeksForGeeks</strong></h1>
      <h1><strong>Table of Content</strong></h1>
      <h2><strong>C++</strong></h2>
      <div>C++ is an object-oriented programming language
         that is widely used for competitive programming, 
         Data structure, and Algorithms, developing 
         operating Systems, etc.
      </div>
      <h3><em>Some of its topic are given below:- </em></h3>
      <ul>
         <li><a href="https://www.geeksforgeeks.org/c-plus-plus/?ref=shm#Basics">Basics</a></li>
         <li><a href="https://www.geeksforgeeks.org/difference-c-structures-c-structures/">
           Difference Between C Structures and C++ Structures</a></li>
         <li><a href="https://www.geeksforgeeks.org/comparison-of-inheritance-in-c-and-java/">
           Comparison of Inheritance in C++ and Java</a></li>
         <li><a href="https://www.geeksforgeeks.org/static-keyword-in-java/">
           Comparison of static keyword in C++ and Java</a></li>
         <li><a href="https://www.geeksforgeeks.org/comparison-of-exception-handling-in-c-and-java/">
           Comparison of Exception Handling in C++ and Java</a></li>
         <li><a href="https://www.geeksforgeeks.org/basic-input-output-c/">
           Basic Input / Output in C++</a></li>
         <li><a href="https://www.geeksforgeeks.org/write-a-c-program-that-wont-compile-in-cpp/">
           Write a C program that won’t compile in C++</a></li>
         <li><a href="https://www.geeksforgeeks.org/references-in-c/">
           References in C++</a></li>
      </ul>
      <h2 style="color:red;"><em>Java</em></h2>
      <div>Java has been one amongst the foremost standard 
         programming languages for several years. When 
         compared with C++, Java codes are typically 
         additional reparable as a result of Java 
         doesn't enable several things which can 
         cause bad/inefficient programming if used 
         incorrectly.For instance, non-primitives are  
         references in Java.
      </div>
      <h3><em>Some of its Topics are given below:- </em></h3>
      <ul>
  <li><a href="https://www.geeksforgeeks.org/introduction-to-java/">
    Introduction to Java</a></li>
  <li><a href="https://www.geeksforgeeks.org/c-vs-java-vs-python/">
    C++ vs Java vs Python</a></li>
         <li>
 <a href="https://www.geeksforgeeks.org/jvm-works-jvm-architecture/">
   How JVM Works – JVM Architecture?</a>
        </li>
    <li><a href="https://www.geeksforgeeks.org/java-basic-syntax/">
      Java Basic Syntax</a></li>
    <li><a href="https://www.geeksforgeeks.org/java-identifiers/">
      Java Identifiers</a></li>
   <li><a href="https://www.geeksforgeeks.org/variable-scope-in-java/">
     Scope of Variables In Java</a></li>
   <li><a 
     href="https://www.geeksforgeeks.org/decision-making-javaif-else-switch-break-continue-jump/">
           Decision Making in Java (if, if-else, switch, break, continue, jump)
     </a></li>
         <li><a href="https://www.geeksforgeeks.org/java-arithmetic-operators-with-examples/">
           Java Arithmetic Operators with Examples</a></li>
      </ul>
      <h2 style="color: blue;">
      Python</h3>
      <div> Python language is being employed in website 
         development, Machine Learning applications,
         at the side of all innovative technology in 
         Software World. Python  language is extremely
         compatible for Beginners, additionally for
         knowledgeable programmers with alternative
         programming languages like C++ and Java.
      </div>
      <h3><em>Some of its topics given below are:- </em></h3>
      <ul>
     <li><a href="https://www.geeksforgeeks.org/python-language-introduction/">
       Python Language Intro</a></li>
      <li><a href="https://www.geeksforgeeks.org/structuring-python-programs/">
        Structures</a></li>
     <li><a href="https://www.geeksforgeeks.org/python-keywords/">
       Keywords</a></li>
    <li><a href="https://www.geeksforgeeks.org/python-if-else/">
      Decision Making</a></li>
   <li><a href="https://www.geeksforgeeks.org/python-3-basics/">
     Python 3 basics</a></li>
      </ul>
      <h1 style="text-align: center">Thank You</h1>
   </body>
</html>

Output:

Build Website using HTML

Conclusion

Building a website in HTML is a foundational skill for anyone interested in web development and By following these steps and experimenting with different HTML elements and CSS styles, you can create visually appealing and functional website tailored to your specific needs. Remember to continuously refine your skills and stay updated with the latest web design trends to create compelling and user-friendly websites.

Suggest improvement

Bootcamp Website Template using HTML and CSS

Share your thoughts in the comments

How to build a Website using HTML?

Set Up Your HTML document

Building HTML Website

Basic HTML Website

Conclusion

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?