Scribd
Upload
9 views

varun kumar

The document provides a comprehensive overview of HTML, including its definition, history, advantages, and disadvantages. It details the structure of HTML documents, common tags, and includes practical coding examples for various HTML elements. Additionally, it discusses the integration of HTML with other technologies and highlights the importance of HTML in web development.

Uploaded by

Mitali Mishra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

varun kumar

The document provides a comprehensive overview of HTML, including its definition, history, advantages, and disadvantages. It details the structure of HTML documents, common tags, and includes practical coding examples for various HTML elements. Additionally, it discusses the integration of HTML with other technologies and highlights the importance of HTML in web development.

Uploaded by

Mitali Mishra
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

INDEX OF PRACTICAL ASSIGNMENT

Assignment Description Page no. Remarks


S.NO.

1. HTML Introduction
1-2

2. • History of HTML,
3-6
• The HTML Tags

3. Advantages and
7-9
Disadvantages of HTML,
4. Lab work: HTML
10-44
(HTML Coding)
INTRODUCTION TO HTML
Introduction:

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 is the language of the web, used to create websites.

• 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

• It is platform-independent. For example, Chrome displays the same pages identically


across different operating systems such as Mac, Linux, and Windows.

• Images, videos, and audio can be added to a web page (For example - YouTube shows
videos on their website)

• HTML is a markup language and not a programming language.

1
• It can be integrated with other languages like CSS, JavaScript, etc. to show interactive
(or dynamic) web pages

Why the Term HyperText & Markup Language?

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.

Commonly used tags in HTML

Here are some commonly used tags in HTML. These are the only tags used 70% of the time

Document Structure Tags

1. <!DOCTYPE html>: Specifies the document type.

2. <html>: Encloses the entire HTML document.

3. <head>: Contains meta-information and links to scripts and stylesheets.

4. <body>: Contains the content of the web page.

3
Metadata Tags

1. <title>: Sets the title of the web page.

2. <meta>: Provides metadata such as character set, author, and viewport settings.
3. <link>: Links external resources like stylesheets.

Text Formatting Tags

1. <p>: Paragraph.

2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings.

3. <strong>: Strong emphasis (typically bold).

4. <em>: Emphasis (typically italic).

5. <br>: Line break.

6. <hr>: Horizontal rule.

List Tags

1. <ul>: Unordered list.

2. <ol>: Ordered list.

3. <li>: List item.

Hyperlink and Media Tags

1. <a>: Anchor (used for links).

2. <img>: Image.

3. <audio>: Audio content.

4. <video>: Video content.

Form Tags

1. <form>: Form.

2. <input>: Input field.

4
3. <textarea>: Text area.

4. <button>: Button.

5. <select>: Dropdown list.

6. <option>: Options within a <select> or <datalist>.


Table Tags

1. <table>: Table.

2. <tr>: Table row.

3. <td>: Table data cell.

4. <th>: Table header cell.

5. <thead>: Table header group.

6. <tbody>: Table body group.

7. <tfoot>: Table footer group.

Semantic Tags

1. <header>: Header section.

2. <footer>: Footer section.

3. <article>: Article.

4. <section>: Section.

5. <nav>: Navigation.

6. <aside>: Sidebar content.

Paired and Unpaired HTML Tags

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:

1. Paired Tags (Container Tags)

5
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>.
Examples:

• Paragraphs: <p>This is a paragraph.</p>

• Headings: <h1>This is a heading.</h1>

2. Unpaired Tags (Self-Closing Tags or Stand-Alone Tags)

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!

Examples of self-closing tags:

• Line Break: <br/>

• Horizontal Rule: <hr/>

• Image: <img src="image.jpg" alt="An example image"/>

Pictorial Representation of Tags

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

One of HTML’s important advantages is its cost-efficiency. Developers don’t need to


purchase licenses or additional software to create HTML content.

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.

7
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.”
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.

Developers often use JavaScript frameworks to develop dynamic web applications,

8
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.
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.

Example of basic structure of HTML

9
HTML PROGRAMS

1. Program for heading size

<html>

<head>

<title>MY sample HTML document</title>

</head>

<body>

<h1><u>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

<b>Boldtext

<br>

10
<i>Italic text</i>

<br>

</body>

</html>

11
2. HTML Programs for font and formatting

12
Output

Font Programs

1. Font Family:

<!DOCTYPE html>

<html>

<body>

<p style="font-family: Arial;">Arial Font</p>

<p style="font-family: Courier;">Courier Font</p>

<p style="font-family: Times New Roman;">Times New Roman


Font</p>

</body>

</html>

13
1. Font Color:

14
Output

<!DOCTYPE html>

<html>

<body>

<p style="color: blue;">Blue Font</p>

<p style="color: red;">Red Font</p>

<p style="color: green;">Green Font</p>

</body>

</html>

15
16
Output

Formatting Programs

Bold and Italic:

<!DOCTYPE html>

17
<html>

<body>

<p><b>Bold Text</b></p>

<p><i>Italic Text</i></p>

<p><b><i>Bold and Italic Text</i></b></p>

</body>

</html>

18
Output

19
Left, Center, and Right Alignment:

<!DOCTYPE html>

<html>

<body>

<p style="text-align: left;">Left Aligned</p>

<p style="text-align: center;">Center Aligned</p>

<p style="text-align: right;">Right Aligned</p>

</body>

</html>

20
Output

3. HTML programs for Background Color

<!DOCTYPE html>

<html>

<body style="background-color: #f2f2f2;">

<h1>Background Color Example</h1>

<p>This page has a light gray background.</p>

</body>

21
</html>

22
Output

4. HTML programs for manipulating Font Type, Size, and Color using <font>
tag

<!DOCTYPE html>

<html>

<body>

<font face="Arial" size="6" color="red">This text is in Arial font, size 6, red


color.</font><br>

<font face="Verdana" size="5" color="blue">This text is in Verdana font, size 5, blue


color.</font><br>

23
<font face="Courier" size="4" color="green">This text is in Courier font, size 4, green
color.</font>

</body>

</html>
Output

5. HTML programs demonstrating unordered lists:

<!DOCTYPE html>

<html>

<body>

<h2>Unordered List</h2>

<ul>

24
<li>Apple</li>

<li>Banana</li>

<li>Cherry</li>

</ul>

</body>

</html>

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>
Output

26
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>

27
<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>
<tr>
<td colspan="3">Total Students: 3</td>
</tr>
</tfoot>
</table>
</body>
</html>

28
Output

29
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 specified width and height -->


<img src="image.jpg" alt="Resized Image" width="300" height="200">

<!-- Image with percentage-based width and height -->


<img src="image.jpg" alt="Scaled Image" width="50%" height="50%">

<!-- Image with CSS styling for width and height -->
<img src="image.jpg" alt="Styled Image" style="width: 250px; height: 150px;">

</body>
</html>
Output

30
31
9. Programs for Abbreviation

<!DOCTYPE html>

<html>

<body>

<p>The <abbr title="HyperText Markup Language">HTML</abbr> language is used for

web development.</p>

</body>

</html>

32
Output

33
10. HTML programs for creating a marquee:

<!DOCTYPE html>

<html>

<body>

<marquee>Scrolling Text</marquee>

</body>

</html>

34
35
Output

11. Programs for creating Registration Form

<html>

<head>

<title>Registration Form</title>

</head>

<body>

<h3>Registration Form,/h3>

<form action=” “method=”get”>

Name<input type=”text” name=”unname”><br>

Sex<input type=”radio” name=”m”>M<input


type=”radio”name=”f”>F<br>

Date of Birth<input type=”text “ name =”dob”><br>

<input type=”submit” value=”Register”>

</form>

</body>

36
</html>

37
Output

12. HTML program for creating frames:

<!DOCTYPE html>

<html>

<head>

<title>Framed Page</title>

</head>

<frameset rows="20%, 80%">

<frame src="topframe.html" name="topframe" frameborder="1">

<frameset cols="30%, 70%">

<frame src="leftframe.html" name="leftframe" frameborder="1">

<frame src="mainframe.html" name="mainframe" frameborder="1">

</frameset>

</frameset>

</html>

38
39
Output

13. HTML programs that emphasize text:

Bold Text
<!DOCTYPE html>

<html>

<body>

<b>This text is bold.</b>

</body>

</html>

Output

40
41
Italic Text

<!DOCTYPE html>

<html>

<body>

<i>This text is italic.</i>

</body>

</html>

Output

Strong Text

<!DOCTYPE html>

42
<html>

<body>

<strong>This text is strong.</strong>

</body>

</html>

Output

Emphasized Text

<!DOCTYPE html>

<html>

43
<body>

<em>This text is emphasized.</em>

</body>

</html>

Output

44

You might also like