Practical 1:

• An Introduction to HTML
HTML stands for Hypertext Markup Language and it is a widely used
programming language used to develop web pages.

HTML Stands for Hypertext Markup Language, were

• Hypertext stands for Link between web pages.

• Markup Language means Text between tags that define the structure.
HTML is a markup language that is used to create web pages. It defines how the
web page looks and how to display content with the help of elements. It forms
or defines the structure of our Web Page; thus, it forms or defines the structure
of our Web Page. We must remember to save your file with .html extension. In
this HTML Tutorial, we’ll understand all the basic concepts required to kick-start
your journey in HTML. Web receive HTML documents from a web server or from
local storage and render the documents into multimedia web pages. HTML
describes the structure of a web page semantically and originally included cues
for the appearance of the document.HTML elements are the building blocks of HTML
pages. With HTML constructs, images and other objects such as interactive
forms may be embedded into the rendered page. HTML provides a means to
create structured documents by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes and other items. HTML elements are
delineated by tags, written using angle brackets. Tags such
as <img /> and <input /> directly introduce content into the page. Other tags such
as <p> surround and provide information about document text and may include
other tags as sub-elements. Browsers do not display the HTML tags but use them
to interpret the content of the page.

HTML can embed programs written in a scripting language such as JavaScript,

which affects the behavior and content of web pages. Inclusion of CSS defines the
look and layout of content. The World Wide Web Consortium (W3C), former
maintainer of the HTML and current maintainer of the CSS standards, has
encouraged the use of CSS over explicit presentational HTML since 1997. A form of
HTML, known as HTML5, is used to display video and audio, primarily using
the <canvas> element, in collaboration with JavaScript.

1|Page
 • History of HTML
In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and
prototyped ENQUIRE, a system for CERN researchers to use and share documents.
In 1989, Berners-Lee wrote a memo proposing an Internet-
based hypertext system. Berners-Lee specified HTML and wrote the browser and
server software in late 1990. That year, Berners-Lee and CERN data
systems engineer Robert Caillou collaborated on a joint request for funding, but the
project was not formally adopted by CERN. In his personal notes from 1990 he listed
some of the many areas in which hypertext is used" and put an encyclopedia first.

The first publicly available description of HTML was a document called "HTML Tags",
first mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18
elements comprising the initial, relatively simple design of HTML. Except for the
hyperlink tag, these were strongly influenced by Glued, an in-house Standard
Generalized Markup Language (SGML)-based documentation format at CERN.
Eleven of these elements still exist in HTML 4.

• HTML 1.0 was released in 1993 with the intention of sharing information that
can be readable and accessible via web browsers. But not many of the
developers were involved in creating websites. So, the language was also
not growing.
• Then comes HTML 2.0, published in 1995, which contains all the features of
HTML 1.0 along with that few additional features, which remained as the
standard markup language for designing and creating websites until
January 1997 and refined various core features of HTML.
• Then comes HTML 3.0, where Dave Raggett introduced a fresh paper or draft
on HTML. It included improved new features of HTML, giving more powerful
characteristics for webmasters in designing web pages. But these powerful
features of the new HTML slowed down the browser in applying further
improvements.
• Then comes HTML 4.01, which is widely used and was a successful version of
HTML before HTML 5.0, which is currently released and used worldwide. HTML
5 can be said for an extended version of HTML 4.01, which was published in
the year 2012.

2|Page
 • Features of HTML

➢ User Friendly & Simple: You can write HTML using annotations called
tags. Tags give HTML a structure and make it easy for humans and browsers
to read the document efficiently. They also enable a browser to apply CSS
(Cascaded Stylesheets) to the digital document, making it a powerful visual
combination.
➢ Semantic Structure: HTML5 defines unique tags to annotate different
elements for their specific purposes. The <article> tag, for example, is used
to annotate content on a page. The <aside> tag represents some content
that is indirectly related to the document’s primary content. Other
noteworthy elements are <header>, <footer>, <div>, the paragraph
tag <p>, and the one most used for navigation between pages, the <a> tag.
➢ Platform Independent: HTML runs on a browser, and you can find a
browser on almost any device with a simple Operating System. If you had
used mobile phones before smartphones were a thing, you would know that
even old Nokia phones that ran Symbian OS could open HTML pages.
➢ Media Support: HTML can display images, video and audio; therefore, it
enjoys excellent media-running capabilities. HTML5 came up
with <video> and <audio> tags making this a lot easier than before. Of
course, with HTML5, you can go beyond just playing media; you can specify
controls, images for buttons and even control the playback
programmatically.
➢ Canvas for game development: You can use HTML5 to build some
simple games; however, if you’re looking to make a good video game, you
can utilize the <canvas> element along with CSS and JavaScript. Canvas
enables you to build 2D and 3D games. You can make these games as
interactive as you’d like.
➢ SEO- Search Engine Optimization: SEO is by far the biggest USP (Unique
Selling Point) of HTML5. With the advent of search engines like Google,
Yahoo!, DuckDuckGo etc., you have so much information literally at your
fingertips. These search engines accumulate information on the World Wide
Web using computer programs that crawl the internet (also called web
crawlers) and map keywords with respective documents in which they find
it. These web crawlers can assimilate this data only because HTML is well
structured, and you can optimize your web pages for searchability.

3|Page
 • Tags in HTML

➢ Unclosed HTML Tags: Some HTML tags are not closed,

for example br and hr.
➢ <br> Tag: br stands for break line, it breaks the line of the
code.
➢ <hr> Tag: hr stands for Horizontal Rule. This tag is used
to put a line across the webpage.
➢ HTML Meta Tags: DOCTYPE, title, link, meta and style.
➢ HTML Text Tags: <p>, <h1>, <h2>, <h3>, <h4>, <h5>,
<h6>, <strong>, <em>, <abbr>, <acronym>, <address>,
<bdo>, <blockquote>, <cite>, <q>, <code>, <ins>,
<del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>
➢ HTML Link Tags: <a> and <base>
➢ HTML Image and Object Tags: <img>, <area>,
<map>, <param> and <object>
➢ HTML List Tags: <ul>, <ol>, <li>, <dl>, <dt> and <dd>
➢ HTML Table Tags: table, tr, td, th, tbody, thead, tfoot,
col, colgroup and caption
➢ HTML Form Tags: form, input, textarea, select, option,
optgroup, button, label, fieldset and legend.

4|Page
 • Attributes of Tags in HTML
Body tag and attributes
<BODY>...</BODY> Contains the viewed portion of the document
<BODY bgcolor="color"> Sets the color of the background in hexadecimal code
<BODY background="filename. XX"> Sets an image as a page’s background (wallpaper)
<BODY text="color"> Specifies the color of normal text in hexadecimal code
Font tag and attributes
<FONT>...</FONT> Changes font attributes for text within the tags
<FONT size="value">...</FONT> Sets the font to a size from 1 to 7, with 1 the smallest and 7 the
largest
<FONT face="name">...</FONT> Sets the font face
<FONT color="color">...</FONT> Sets the font color using hexadecimal code

Image tag and attributes

<IMG> Embeds an image in the document at the location of the tag
<IMG src="url" alt="text"> Adds an image with a text description
<IMGsrc="url"alt="text" Aligns an image to the left, right, center, bottom, or top
align="direction">
<IMGsrc="url" alt="text" Sets the size of the border around an image
border="number">
Anchor tag and attributes
<A>...</A> Designates the origin and destination of a hyperlink
<A HREF="url">...</A> Creates a hyperlink
<A HREF="#NAME">...</A> Links to a target location in the current page
<A HREF="URL#NAME">...</A> Links to a target location in a page outside your site
Optional attributes:
<A HREF="?" target="?">...</A> Specifies where the linked-to document is to be placed
<A HREF="?" rel="?">...</A> Sets up a relationship between the linked-to document and the
current page
<A HREF="?" rev="?">...</A> Sets up a reverse relationship between the current page and the
linked-to document

Table tags and attributes

<TABLE>...</TABLE> Generates a table
<TABLE border="pixels"> Sets the size of cell borders
<TABLE cellspacing="pixels"> Sets the amount of space between cells
<TABLE cellpadding="pixels"> Sets the amount of space between a border and cell content

5|Page
 PRACTICAL 2:
Headings in HTML
➢ Create Headings in HTML

OUTPUT:

6|Page
INPUT:

<!DOCTYPE html>

<html>

<head>

<title>HTML Headings</title>

</head>

<body>

<h1>HEC GROUP OF INSTITUTIONS 1</h1>

<h2>HEC GROUP OF INSTITUTIONS 2</h2>

<h3>HEC GROUP OF INSTITUTIONS 3</h3>

<h4>HEC GROUP OF INSTITUTIONS 4</h4>

<h5>HEC GROUP OF INSTITUTIONS 5</h5>

<h6>HEC GROUP OF INSTITUTIONS 6</h6>

</body>

</html>

7|Page
 PRACTICAL 3:
Tables in HTML
➢ Create tables in HTML webpage

OUTPUT:

8|Page
INPUT:

<table border="1">

<tr>

<th></th>

<th>Column Header 1</th>

<th>Column Header 2</th>

<th>Column Header 3</th>

</tr>

<tr>

<th>Row Header 1</th>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr>

<th>Row Header 2</th>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

<tr>

<th>Row Header 3</th>

<td>Data</td>

<td>Data</td>

<td>Data</td>

</tr>

9|Page
</table>

PRACTICAL 4:
Lists in HTML
➢ 4.A Create ordered list in HTML Webpage.

OUTPUT:

10 | P a g e
INPUT:

<!DOCTYPE html>

<html>

<head>

<title>World Cup Teams</title>

</head>

<body>

<h1>List of teams for World Cup</h1>

<ol type = "1">

<li>India</li>

<li>Australia</li>

<li>South Africa</li>

<li>New Zealand</li>

<li>Pakistan</li>

<li>Sri Lanka</li>

<li>West Indies</li>

<li>Bangladesh</li>

</ol>

</body>

</html>

11 | P a g e
 ➢ 4.B Create unordered list in HTML webpage

OUTPUT:

12 | P a g e
INPUT:

<!DOCTYPE html>

<html>

<body>

<h2>An unordered HTML list</h2>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html

13 | P a g e
 PRACTICAL 5:
Images in HTML
➢ Create an Image gallery using HTML image tag

OUTPUT:

Cruising in Italy Peyto Lake

14 | P a g e
INPUT:

<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cruising in Italy</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Peyto Lake</div>
</div>

</body>
</html>

15 | P a g e
 PRACTICAL 6:
Forms in HTML
➢ Create forms in HTML webpage

OUTPUT:

16 | P a g e
INPUT:
<!Doctype Html>

<Html>

<Head>

<Title>

Create a Registration form

</Title>

</Head>

<Body>

The following tags are used in this Html code for creating the Registration form:

<br>

<form>

<label> Firstname </label>

<input type="text" name="firstname" size="15"/> <br> <br>

<label> Lastname: </label>

<input type="text" name="lastname" size="15"/> <br> <br>

<label>

Course :

</label>

<select>

<option value="Course">Course</option>

<option value="BCA">BCA</option>

<option value="BBA">BBA</option>

<option value="B.Tech">B.Tech</option>

<option value="MBA">MBA</option>

<option value="MCA">MCA</option>

<option value="M.Tech">M.Tech</option>

</select>

17 | P a g e
<br> <br><br>

<br>

<label>

Gender :

</label><br>

<input type="radio" name="gender"/> Male <br>

<input type="radio" name="gender"/> Female <br>

<input type="radio" name="gender"/> Other

<br>

<br>

<label>

Hobbies:

</label>

<br>

<input type="checkbox" name="Programming"> Programming <br>

<input type="checkbox" name="Cricket"> Cricket <br>

<input type="checkbox" name="Football"> Football <br>

<input type="checkbox" name="reading Novel"> Reading Novel <br>

<br>

<br>

<label>

Phone :

</label>

<input type="text" name="phone" size="10"> <br> <br>

Address

<br>

<textarea cols="80" rows="5" value="address">

</textarea>

18 | P a g e
Email:

<input type="email" id="email" name="email"> <br>

<br> <br>

Password:

<input type="Password" id="pass" name="pass"> <br>

<br> <br>

<input type="submit" value="Submit">

<input type="reset" value="Reset">

</form>

</Body>

</Html>

19 | P a g e
 PRACTICAL 7:
Frames in HTML

➢ Insert frames in HTML webpage

OUTPUT:

20 | P a g e
INPUT:

<!DOCTYPE html>
<html>
<frameset cols="*,*,*">
<frameset rows="*,*">
<frame src="frame_1.html">
<frame src="frame_2.html">

</frameset>
<frame src="frame_3.html">
<frame src="frame_4.html">
</frameset>

21 | P a g e
 PRACTICAL 8:
HTML Webpage

➢ Create a HTML Webpage

Output:

22 | P a g e
INPUT:

<!DOCTYPE html>

<head>

<title>HEC</title>

</head>

<body background="img.jpg">

<table border="0" width="100%" height="700px">

<!----Row1---->

<tr>

<th> <font face="Monoton"> HEC </font> </th>

<th></th>

<th></th>

<th> <a href="https://www.heccollege.edu.in/about.php"> About </a> </th>

<th> <a href="https://www.heccollege.edu.in/#"> Programmes </a></th>

<th> <a href="https://www.heccollege.edu.in/admission.php"> Admissions </a></th>

<th> <a href="https://www.heccollege.edu.in/facilities.php"> Facilities </a></th>

<th> <a href="https://www.heccollege.edu.in/faculty.php"> Faculty </a></th>

<th> <a href="https://www.heccollege.edu.in/contact.php"> Contact Us </a></th>

</tr>

<!----Row2---->

<tr>

<th colspan="10">

<font color="white" face="Helvetica" size="5">

<h1> HEC </h1> <br>

<h2> GROUP OF INSTITUTIONS </h2>

</font>

23 | P a g e
</th>

</tr>

<!----Row3---->

<tr>

<th colspan="10">

<font size="5" color="red" face="Aquire"> Apply Online 2022 </font>

</th>

</tr>

<!----Row5---->

<tr>

<th colspan="10">

<font color="black" >

HELPLINE NO:- 18001032126 / + 91 9897753533 </font>

</th>

</tr>

</table>

</body>

</html>

24 | P a g e