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.
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.
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/#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</h2>
<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 a Website using HTML Example Output
Similar Reads
How to Build a Website using Wix ?
Wix is an online drag and drop tools to create extremely easy website using website builders. For learning how to code and build a website on your own, here are few cloud based web development. In this article, we will exhibit creating a website using Wix and this is chosen just for the sake of illu
6 min read
How to Create a Website Using HTML and CSS?
Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu
5 min read
Bootcamp Website Template using HTML and CSS
We will explore how to design a simple BootCamp website template using HTML and CSS. Creating an attractive template can be challenging for those who are not proficient in CSS. Without CSS, enhancing the visual appeal of a web page is difficult. Therefore, to create a compelling web page, knowledge
6 min read
How to write e-mails in HTML and send it using Gmail ?
In this article, we are going to learn that how users can write e-mails in HTML format and send them using Gmail. However, Gmail doesn't offer an HTML editor still we can send HTML templates in an e-mail using some tools and methods. Many people need to send an e-mail with HTML templates to others.
3 min read
How to add sub heading using HTML ?
In HTML, headings are used to structure the content, creating a clear hierarchy that improves readability and organization. Subheadings help break down sections of content, guiding users through the information. There are several ways to add subheadings in HTML, and we'll explore two common methods
3 min read
How to make a website using WordPress (Part – 2)
Hi guys this is our second tutorial in the series. In the first tutorial, we learned about How to set up a server and host a website locally on our computer. In this tutorial, I'll be introducing you to the basic features of WordPress. We'll walk through the basic customizations of a website and the
6 min read
How to make a website using WordPress (Part - 1)
Hi guys, most of us at some instances of time face a problem with how to start something for a minor or major project. Many of us wish to make a website-based project but do not know how to proceed. To assist all my friends, today I'll walk you through the process of installing and getting acquainte
3 min read
Simple Portfolio Website Design using HTML
Creating a portfolio website is a great way to showcase your work, skills, and personal brand to companies/recruiters. this article, we create a simple portfolio using only HTML.What You Will Expect to Create in this ProjectWe'll develop a simple portfolio website that presents your professional hig
4 min read
What Is Hostinger Website Builder ?
Hostinger Website Builder is a userkills. It can offer simple drag-and-drop to build user-friendly websites, and it can enable users to design and customize the websites with the help of Hostinger Website Builder. Key TerminologiesDrag and Drop interfaces: It can be used to build user-friendly inter
4 min read
HTML Course | Building Header of the Website
The header is the top part of the website and the important area for branding and navigation. In this chapter, you’ll learn how to build a header with the tags which we have already learnt.Course Navigation HTML Course : Building Header of the WebsiteSo far, we have created the navigation bar for th
4 min read