Scribd
Upload
48 views46 pages

Sumit 000000

Shernjdind

Uploaded by

summityaadav123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
48 views46 pages

Sumit 000000

Shernjdind

Uploaded by

summityaadav123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

D.A.

V CENTENARY COLLEGE,
NH-3, N.I.T FARIDABAD

PRACTICAL ASSIGNMENT FILE


Computer Networking And Internet
BBA -3rd year
5th SEMESTER
Subject code: BBAN-503

Submitted to: Submitted by:


Shivani mam Name: Sumit Yadav
College Roll No:1221783010046
INDEX OF PRACTICAL ASSIGNMENT

S.NO. Assignment Description Page no. Remarks

1-2
1. HTML Introduction

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

7-9
3. Advantages and
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.

 Metadata Tags

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

2. <meta>: Provides metadata such as character set, author, and viewport settings.

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

3. <textarea>: Text area.

4. <button>: Button.

5. <select>: Dropdown list.

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

4
 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)

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:

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

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.

Developers often use JavaScript frameworks to develop dynamic web applications,

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.

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

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

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

12
Output

13
1. Font Color:

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

14
Output

15
Formatting Programs

 Bold and Italic:

<!DOCTYPE html>

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

16
Output

17
 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>

18
Output

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

</html>

20
Output

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

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


color.</font>

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

31
Output

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

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

</html>

37
Output

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

39
Output

40
13. HTML programs that emphasize text:

 Bold Text

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

Output

41
 Italic Text

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

Output

42
 Strong Text

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

Output

43
 Emphasized Text

<!DOCTYPE html>

<html>

<body>

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

</body>

</html>

Output

44

You might also like