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.
<!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:
<!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.
<!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/amp/">
Difference Between C Structures and C++ Structures</a></li>
<li><a href="https://www.geeksforgeeks.org/comparison-of-inheritance-in-c-and-java/amp/">
Comparison of Inheritance in C++ and Java</a></li>
<li><a href="https://www.geeksforgeeks.org/static-keyword-in-java/amp/">
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/amp/">
Comparison of Exception Handling in C++ and Java</a></li>
<li><a href="https://www.geeksforgeeks.org/basic-input-output-c/amp/">
Basic Input / Output in C++</a></li>
<li><a href="https://www.geeksforgeeks.org/write-a-c-program-that-wont-compile-in-cpp/amp/">
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/amp/">
Introduction to Java</a></li>
<li><a href="https://www.geeksforgeeks.org/c-vs-java-vs-python/amp/">
C++ vs Java vs Python</a></li>
<li>
<a href="https://www.geeksforgeeks.org/jvm-works-jvm-architecture/amp/">
How JVM Works – JVM Architecture?</a>
</li>
<li><a href="https://www.geeksforgeeks.org/java-basic-syntax/amp/">
Java Basic Syntax</a></li>
<li><a href="https://www.geeksforgeeks.org/java-identifiers/amp/">
Java Identifiers</a></li>
<li><a href="https://www.geeksforgeeks.org/variable-scope-in-java/amp/">
Scope of Variables In Java</a></li>
<li><a
href="https://www.geeksforgeeks.org/decision-making-javaif-else-switch-break-continue-jump/amp/">
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/amp/">
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/amp/">
Structures</a></li>
<li><a href="https://www.geeksforgeeks.org/python-keywords/amp/">
Keywords</a></li>
<li><a href="https://www.geeksforgeeks.org/python-if-else/amp/">
Decision Making</a></li>
<li><a href="https://www.geeksforgeeks.org/python-3-basics/amp/">
Python 3 basics</a></li>
</ul>
<h1 style="text-align: center">Thank You</h1>
</body>
</html>
Output:
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.