Sumit 000000
Sumit 000000
V CENTENARY COLLEGE,
NH-3, N.I.T FARIDABAD
1-2
1. HTML Introduction
3-6
2. History of HTML,
The HTML Tags
7-9
3. Advantages and
Disadvantages of HTML,
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for
creating Web pages. HTML describes the structure of a Web page. HTML consists of a series
of elements. HTML elements tell the browser how to display the content.
What is HTML?
HTML (Hyper Text Mark up Language) was created by Tim Berners-Lee in 1991 as a
standard for creating web pages. It's a markup language used to structure content on the web,
defining elements like headings, paragraphs, links, and images. HTML forms the backbone of
web content. In layman's terms, HTML is like the skeleton of a website. It's a set of
instructions that tells a web browser how to display text, images, videos, and other elements
on a webpage. Think of it as the building blocks that create the structure and look of a
website, similar to how bricks and mortar are used to build a house.
HTML defines the barebone structure or layout of web pages that we see on the
Internet.
HTML consists of a set of tags contained within an HTML document, and the
associated files typically have either a ".html" or ".htm" extension.
There are several versions of HTML, with HTML5 being the most recent version.
Features of HTML
Images, videos, and audio can be added to a web page (For example - YouTube shows
videos on their website)
1
It can be integrated with other languages like CSS, JavaScript, etc. to show interactive
(or dynamic) web pages
The term 'Hypertext Markup Language' is composed of two main words: 'hypertext' and
'markup language.' 'Hypertext' refers to the linking of text with other documents, while
'markup language' denotes a language that utilizes a specific set of tags.
Thus, HTML is the practice of displaying text, graphics, audio, video etc. in a certain way
using special tags.
Note: Tags are meaningful texts enclosed in angle braces, like '<...>'. For example, the
'<head>' tag. Each tag has a unique meaning and significance in building an HTML page, and
it can influence the web page in various ways.
2
History of HTML:
In 1989, Tim Berners-Lee established the World Wide Web (www), and in 1991, he
created the first version of HTML.
From 1995 to 1997, further work was done to develop and refine different versions of
HTML.
In 1999, a committee was organized that standardized HTML 4.0, a version still used
by many today.
The latest and most stable version of HTML is 5, also known as HTML5.
HTML Tags
If you want to build a beautiful website, tags are essential elements that help you achieve that.
An HTML tag acts as a container for content or other HTML tags. Tags are words enclosed
within < and > angle brackets.
They serve as keywords that instruct the web browser on how to format and display the
content.
Here are some commonly used tags in HTML. These are the only tags used 70% of the time
Metadata Tags
2. <meta>: Provides metadata such as character set, author, and viewport settings.
3
3. <link>: Links external resources like stylesheets.
1. <p>: Paragraph.
List Tags
2. <img>: Image.
Form Tags
1. <form>: Form.
4. <button>: Button.
4
Table Tags
1. <table>: Table.
Semantic Tags
3. <article>: Article.
4. <section>: Section.
5. <nav>: Navigation.
Well, that was a really long list. Don't worry we will study these in detail. In HTML, tags can
be broadly categorized into two types:
These are tags that come in pairs, consisting of an opening tag and a corresponding closing
tag. The content goes between these two tags.
Opening Tag: The opening tag starts with < and ends with >. For example, <p>.
Closing Tag: The closing tag also starts with < but includes a forward slash / before
the tag name, and ends with >. For example, </p>.
5
Examples:
These are tags that don't require a closing tag. They are self-contained, encapsulating all the
information within a single tag.
Self-Closing Tag: A self-closing tag starts with < and ends with /> (though the / is
optional in HTML5). For example, <img /> or <br>.
Note: Later if you happen to use react or a framework like Next.js, you will have to close the
tag like this <br/> <hr/>. So it is better to cultivate the habit!
The image below offers a visual representation of how tags are structured in HTML. As you
can see, an element can contain other elements, which may also contain additional elements,
forming a tree-like structure. This hierarchy can include self-closing tags as well as nested
tags, as illustrated in the picture
6
ADVANTAGES AND DISADVANTAGES OF HTML
Advantages of HTML
1. Browser Compatibility
HTML enjoys widespread browser support, making it a universal language for web content.
Web browsers like Chrome, Firefox, Safari, and Internet Explorer obey HTML standards so
that their web pages look the same on all different platforms.
As Tim Berners-Lee, the inventor of the World Wide Web, said, “HTML is the lingua
franca for publishing on the Web.“
Lingua Franca: A language that is adopted as a common language between speakers whose
native languages are different.
2. Cost-Efficient
This cost-effectiveness has led to HTML being the foundation of the web, as observed by
Marc Andreessen, co-founder of Netscape: “HTML is precisely what we were trying to
prevent—a rich programming environment for developing custom applications on top of a
general-purpose computer.”
3. Easy to Learn
HTML is simple and easy to learn. It is so easy to learn that school students can use HTML to
create their own basic website with images and colors.
Vincent Tan, a web developer, aptly puts it, “HTML is like building with Lego bricks; it’s
easy to grasp and lets you create beautiful structures quickly.”
4. Flexibility
HTML’s loose syntax grants developers flexibility. It allows for creative experimentation and
adapts to various content types. This versatility is crucial for crafting diverse web
experiences.
Jeff Atwood, co-founder of Stack Overflow, noted, “HTML is the canvas of the web. It’s the
foundation for the entire web experience.”
7
5. Speed and Efficiency
HTML’s lightweight nature ensures fast loading times for web pages By reducing the loading
time, HTML saves time for users.
5. Data Storage
HTML extends its capabilities to data storage with technologies like XML. It enables the
structured storage of data within web documents, making it retrievable and usable by
applications. This data accessibility is vital in modern web development.
As Tim Bray, co-editor of the XML specification, said, “XML is a widely-used standard for
representing structured data.”
Disadvantages of HTML
It’s essential to understand these drawbacks to make informed decisions and explore
alternative solutions where necessary.
1. Static Nature
HTML is a static language. It defines the structure and presentation of web content but cannot
produce dynamic interactions by itself. As a result, creating interactive web applications, like
online games or real-time chat systems, can be challenging with HTML alone. For dynamic
functionalities, Web developers often turn to JavaScript, a scripting language that
complements HTML’s static nature.
2. Complexity in Structure
Creating and maintaining the structure of HTML documents is complex, mainly for large-
scale projects. As webpages grow in complexity, managing nested HTML elements is
challenging. This complexity may lead to errors.
Some web developers opt for more structured approaches using template engines like
Handlebars or libraries like JSX (for React). These tools offer a cleaner way to organize
HTML-like code within JavaScript.
8
3. Limited Security
HTML alone does not provide strong security features. It can’t protect against various web
weaknesses, like cross-site scripting (XSS) or SQL injection. These security weaknesses can
lead to data hacking. Additional measures have to be taken, such as server-side scripting, to
protect websites.
Server-side scripting languages like PHP, Python, or Ruby offer better security features.
These languages enable developers to control data processing and apply security measures
effectively.
4. Code Length
Creating a simple webpage using pure HTML can result in many lines of code. Especially if
you’re coding for complex structures. This can lead to code repetition, maintenance
challenges, and increased load times for web pages.
Cascading Style Sheets (CSS) can be an alternative to streamlined code by separating the
presentation from the structure. Additionally, website developers and content management
systems (CMS) like WordPress simplify web development and require less manual coding.
9
HTML PROGRAMS
<html>
<head>
</head>
<body>
<b>Boldtext
<br>
<i>Italic text</i>
<br>
</body>
</html>
10
Output
11
2. HTML Programs for font and formatting
Font Programs
1. Font Family:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
12
Output
13
1. Font Color:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
14
Output
15
Formatting Programs
<!DOCTYPE html>
<html>
<body>
<p><b>Bold Text</b></p>
<p><i>Italic Text</i></p>
</body>
</html>
16
Output
17
Left, Center, and Right Alignment:
<!DOCTYPE html>
<html>
<body>
</body>
</html>
18
Output
19
3. HTML programs for Background Color
<!DOCTYPE html>
<html>
</body>
</html>
20
Output
21
4. HTML programs for manipulating Font Type, Size, and Color using <font>
tag
<!DOCTYPE html>
<html>
<body>
</body>
</html>
22
Output
23
5. HTML programs demonstrating unordered lists:
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
24
Output
25
6. Nested List (Ordered and Unordered)
<!DOCTYPE html>
<html>
<body>
<h2>Mixed Nested List</h2>
<ol>
<li>Step 1
<ul>
<li>Option 1</li>
<li>Option 2</li>
</ul>
</li>
<li>Step 2
<ol>
<li>Sub-step 2.1</li>
<li>Sub-step 2.2</li>
</ol>
</li>
<li>Step 3
<ul>
<li>Choice 1</li>
<li>Choice 2</li>
</ul>
</li>
</ol>
</body>
</html>
26
Output
27
7. HTML program for creating a table:
<!DOCTYPE html>
<html>
<body>
<h2>Table Example</h2>
<table border="1" width="50%" cellpadding="5" cellspacing="0">
<caption>Student Information</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>20</td>
<td>A+</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>22</td>
<td>A</td>
</tr>
<tr>
<td>Bob Smith</td>
<td>21</td>
<td>B+</td>
</tr>
</tbody>
<tfoot>
28
<tr>
<td colspan="3">Total Students: 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
29
Output
30
8. HTML program for inserting an image with height and width adjustment:
<!DOCTYPE html>
<html>
<body>
<h2>Image Example</h2>
<!-- Image with default size -->
<img src="image.jpg" alt="Default Image">
<!-- Image with CSS styling for width and height -->
<img src="image.jpg" alt="Styled Image" style="width: 250px; height: 150px;">
</body>
</html>
31
Output
32
9. Programs for Abbreviation
<!DOCTYPE html>
<html>
<body>
development.</p>
</body>
</html>
33
Output
34
10. HTML programs for creating a marquee:
<!DOCTYPE html>
<html>
<body>
<marquee>Scrolling Text</marquee>
</body>
</html>
35
Output
36
11. Programs for creating Registration Form
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h3>Registration Form,/h3>
</form>
</body>
</html>
37
Output
38
12. HTML program for creating frames:
<!DOCTYPE html>
<html>
<head>
<title>Framed Page</title>
</head>
</frameset>
</frameset>
</html>
39
Output
40
13. HTML programs that emphasize text:
Bold Text
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Output
41
Italic Text
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Output
42
Strong Text
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Output
43
Emphasized Text
<!DOCTYPE html>
<html>
<body>
</body>
</html>
Output
44