PRACTICAL – 1
AIM: Basics of HTML
What is 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
HTML elements label pieces of content such as "this is a heading".
HTML is the combination of Hypertext and Markup language. Hypertext defines the link
between web pages. A markup language is used to define the text document within the tag
which defines the structure of web pages. This language is used to annotate (make notes
for the computer) text so that a machine can understand it and manipulate text
accordingly. Most markup languages (e.g., HTML) are human-readable. The language
uses tags to define what manipulation has to be done on the text is a paragraph", "this is a
link", etc.
EVOLUTION OF HTML:
HTML is a markup language used by the browser to manipulate text, images, and
other content, in order to display it in the required format. HTML was created by
Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the
first standard version was HTML 2.0, published in 1995.
Elements and Tags: HTML uses predefined tags and elements which tell the browser how
to properly display the content. Remember to include closing tags. If omitted, the browser
applies the effect of the opening tag until the end of the page.
HTML page structure: The basic structure of an HTML page is laid out below. It contains
the essential building-block elements (i.e., doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.
<!DOCTYPE html>: This is the document type declaration (not technically a tag). It
declares a document as being an HTML document. The doctype declaration is not case-
sensitive.
<html>: This is called the HTML root element. All other elements are contained within it.
<head>: The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front-end of a webpage. HTML
elements used inside the <head> element include:
<style>-This html tag allows us to insert styling into our webpages and make them
appealing to look at with the help of CSS.
<title>-The title is what is displayed on the top of your browser when you visit a
website and contains title of the webpage that you are viewing.
<base>-It specifies the base URL for all relative URLs in a document.
<no script>– Defines a section of HTML that is inserted when the
scripting has been turned off in the user’s browser.
<script>-This tag is used to add functionality in the website with the help of
JavaScript.
<meta>-This tag encloses the meta data of the website that must be loaded every
time the website is visited. For e.g.: - the metadata charset allows you to use the
standard UTF-8 encoding in your website. This in turn allows the users to view your
webpage in the language of their choice. It is a self-closing tag.
<link>– The ‘link’ tag is used to tie together HTML, CSS and JavaScript. It is self-
closing.
<body>: The body tag is used to enclose all the visible content of a webpage. In other words,
the body content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file using .html
or .htm. Once saved as an HTML document, the file can be opened as a webpage in the
browser.
Features of HTML:
It is easy to learn and easy to use.
It is platform-independent.
Images, videos, and audio can be added to a web page.
Hypertext can be added to the text.
It is a markup language
Why learns HTML?
It is a simple markup language. Its implementation is easy.
It is used to create a website.
Helps in developing fundamentals about web programming.
Boost professional career.
Advantages:
HTML is used to build websites.
It is supported by all browsers.
It can be integrated with other languages like CSS, JavaScript, etc.
Disadvantages:
HTML can only create static web pages. For dynamic web pages, other languages
have to be used.
A large amount of code has to be written to create a simple web page.
The security feature is not good.
PRACTICAL- 2
AIM: How to create HTML document?
Steps to create:
Open a simple text editor, such as Notepad, and create a new file. Do not use an
HTML editor for this exercise.
On the File menu, click Save.
NOTE: The Save as type box defaults to Web Page (*.htm; *.html).
In the File name box, type the file name that you want for your document,
and then click Save.
In the Document let’s write-
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Buddy! </title>
</head>
<body>
<p>
Hello Buddy!
</p>
<p>
Hello Buddy!
</p>
</body>
</html>
PRACTICAL- 3
AIM: Steps for creating a Simple HTML Program
Steps to create:
Open a simple text editor, such as Notepad, and create a new file. Do not use an
HTML editor for this exercise.
On the File menu, click Save.
NOTE: The Save as type box defaults to Web Page (*.htm; *.html).
In the File name box, type the file name that you want for your document,
and then click Save.
In the Document let’s write-
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Buddy! </title>
</head>
<body>
<p>
Hello Buddy!
</p>
<p>
Hello Buddy!
</p>
</body>
</html>
PRACTICAL- 4
AIM: Write HTML code to develop a Web page having the background in red
and title “My First Page” in any other colour.
Steps to proceed:
First of all, open the Notepad in your computer or laptop.
Write the document as:
<html>
<body bgcolor="yellow">
<font color="blue">
MY FIRST PAGE
</font>
</body>
</html>
Save the file with the file extension .html
Now run the file in the file in the internet explorer
Now the result will happen as like:
PRACTICAL- 5
AIM: Create an HTML document giving details of your name, age, telephone number,
address, TLC code and enrolment number aligned in proper order
Steps to create:
Open Notepad, in the PC or System
A blank document will appear, start writing html codes there as;
<html>
<body>
<ol>
<li>Name : Vineet Garg</li>
<li>Age : 19</li>
<li>Telephone number : 8383012338</li>
<li>Address : Village Bhuapur, Tehsil Tigoan, Faridabad</li>
<li>TLC Code: 121101</li>
<li>Enrollment Number : 20011301054</li>
</ol>
</body>
</html>
Here, <ol> tag defines the ordered list. An ordered list can be numerical or alphabetical.
The <li> tag is used to define each list item.
Then, save the document with using the file extension “.html”.
Then, file is saved in your system in the form of link which can be run in the
browser.
And in the browser the result will appear like this:
PRACTICAL- 6
AIM: Write an HTML Code to design a page containing text, in form of
paragraphs giving suitable heading style.
Steps To Create:
Open Notepad in your System or PC
Then the blank document will open,
Start writing the HTML codes in the document as:
<html>
<title>Training</title>
<head>Method of Training</head>
<body>
<P>Training is teaching, or developing in oneself or others, any skills and knowledge
or fitness that relate to specific useful competencies.
Training has specific goals of improving one's capability, capacity, productivity and
performance. It forms the core of apprenticeships and provides the backbone of
content at institutes of technology (also known as technical colleges or
polytechnics. </p>
<H1>Types Of Training</H1>
<P>There are many types of training.................etc.</P>
<H2>Advantages Of Training</H2>
<P> It increases potential and efficency of the person </P>
<H3> Disadvantages of Training</H3>
<P> It increases cost and adds extra burden to company administration </P>
</body>
</html>
Then save the file in the PC with the file extension of “.html”.
Then load the save the file in the system
The result for the above will appear like this
PRACTICAL- 7
AIM: Create a Web Page using href attribute of anchor tag and the attribute:
alink, vlink, etc…
Steps to Create:
Open Notepad, in your system or PC
Then, the blank document will open.
Start Writing the HTML codes in the document;
<html>
<head>
<title> HTML Text Link Example </title>
</head>
<body>
<p> You can learn free html at </p>
<a href= LINK > YouTube.com </a>
</body>
</html>
Save the document with file extension “.html”.
Load the saved document in the system.
The result for which will be appeared like this:
PRACTICAL- 8
AIM: Create a Web Page, wherein when the user clicks on the link it should go to the
bottom of the page.
Steps To Create:
Open Notepad, in your system or PC.
The blank document will appear on the screen,
Clicking
Then, on
start
thiswriting
link willthe HTML
re-direct code
you aspage on the YouTube
to the
<html>
<head>
<title> HTML Text Link Example </title>
</head>
<body>
<a href= "#bottom">bottom section </a>
<div id="top">The HyperText Markup Language or HTML is the standard markup
language for documents designed to be displayed in a web browser. It can be assisted
by technologies such as Cascading Style Sheets (CSS) and scripting languages such
as JavaScript.</div>
<div id="bottom">The following table shows the Basic HTML tags that define the
basic web page: Specifies the document as a web page.
Specifies the descriptive information about the web documents. Specifies
the title of the web page. Specifies the body of a web document. </div>
<p> You can learn free html at </p>
</body>
</html>
Then save the document with the file extension “.html”.
PRACTICAL- 9
AIM: Write HTML Code to create a Web page of pink colour and display a moving
message in red colour.
Steps To Create:
Open the Notepad, in your system or PC
Then the blank document will appear on the screen.
Start writing HTML Codes, in the blank document as:
<html>
<head>
<body bgcolor="pink">
<title> HTML Text Link Example </title>
</head>
<body>
< marquee >WE ARE BEST FRIENDS </ marquee >
</body>
</html>
Here, <marquee> tag is used to animate the text.
Then save the file with file extension, “.html”.
Load the saved document in the browser.
Then the result for the above will appear like as:
PRACTICAL- 10
AIM: Create a Web Page, showing an ordered list of the names of five of your friends.
Steps to Create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html>
<head> MY FIVE FRIENDS</head>
<body>
<ol>
<li>Arhant</li>
<li>Sahil</li>
<li>Manish</li>
<li>Pooja</li>
<li>Aashina</li>
</body>
</html>
Now, save the document with the file extension, “.html”.
Load the saved document in the browser. The result
for the same will appear like that:
PRACTICAL- 11
AIM: Create an HTML Document containing a nested list showing the content page of any
book.
Steps to Create:
Open Notepad, in your system or PC
A blank document will appear on the screen of your system.
Start writing coding for the required as:
<html>
<head> Nested List Showing content of book </head>
<body>
<ul>
<li>UNIT-1
<ul>
<li>Introduction to
network</li>
<li>Advantages and disadvantages of network</li>
<li>Network Topologies</li>
</ul>
</li>
<li>UNIT-2
<ul>
<li>OSI Model</li>
<li>TCP/IP Model</li>
<li>Protocols and its classification</li>
</ul>
</li>
</body>
</html>
Now, save the document with the file extension, “.html”.
Load the save file in the browser
The result for the same will appear like this
PRACTICAL- 12
AIM: Create a Web Page showing an unordered list of five of your friends. Steps to
Create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html>
<head> My Five Friends</head>
<body>
<ul>
<li>Arhant</li>
<li>Sahil</li>
<li>Manish</li>
<li>Pooja</li>
<li>Aashina</li>
</body>
</html>
Now, save the document with the file extension, “.html”.
Load the saved document in the browser. The result
for the same will appear like that:
PRACTICAL - 13
AIM: Create a Web Page, which should contain a table having two rows and two
columns.
Steps to create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html>
<head> Table having Two rows and Two columns </head>
<body>
<table>
<tr>
<th> Vineet Garg </th>
<th> 8383012338 </th>
</tr>
<tr>
<td> Sahil </td>
<td> 9826514245 </td>
</tr>
<tr>
<td> Arhant </td>
<td> 7856254951 </td>
</table>
</body>
</html>
Now, save the document with the file extension, “.html”.
Load the saved document in the browser. The result
for the same will appear like that:
PRACTICAL- 14
AIM: Create a Web Page, which should contain a table having two rows and two
columns with some dummy data.
Steps to create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html>
<head> Table having Two rows and Two columns </head>
<body>
<table>
<tr>
<th> Ritesh </th>
<th> 8383012338 </th>
</tr>
<tr>
<td> Sachin </td>
<td> 7284564855 </td>
</tr>
<tr>
<td> Raju </td>
<td> 8542787564 </td>
</table>
</body>
</html>
Now, save the document with the file extension, “.html”.
Load the saved document in the browser.
PRACTICAL- 15
AIM: Create the following table in HTML with some Dummy Data
Name Place Destination Train Time Fair
of the No.
train arrival departure
<html>
<body>
<table border=2>
<tr>
<td rowspan=2><h1>Name of the train</h1></td>
<td rowspan=2><h1>Place</h1></td>
<td rowspan=2><h1>Destination</h1></td>
<td rowspan=2><h1>Fare</h1></td>
<td colspan=2><h1><center>Time</center></h1></td>
</tr>
<tr>
<td>Arrival</td>
<td>Departure</td>
</tr>
<tr>
<td>Rajdhani Express</td>
<td>Jodhpur</td>
<td>Karnataka</td>
<td>800</td>
<td>5.00AM</td>
<td>10.00AM</td>
</tr>
<tr>
<td>Shatabdi Express</td>
<td>Delhi</td>
<td>Ranchi</td>
<td>1200</td>
<td>8.00AM</td>
<td>14.00PM</td>
</tr>
</table>
</body>
</html>
PRACTICAL- 16
AIM: Create the Following Table in HTML:
Colour (White)
RED GREEN BLACK
Steps To Create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html>
<head>
<body>
<table border="2">
<tr>
<th colspan="3">Color(White)</th>
</tr>
<tr>
<td>RED</td>
<td>GREEN</td>
<td>BLACK</td>
</tr>
</table>
</head>
</html>
Now, save the document with the file extension, “.html”.
Load the saved document in the browser. The result
for the same will appear like that:
PRACTICAL- 17
AIM: Design an HTML Page having 3 images placed in the following format.
(Hint: Table can be used to align images)
Steps To Create:
Open Notepad, in your system or PC
A blank document will appear on the screen.
Start writing codes HTML code for the following as:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial- scale=1.0"
/>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.container { width:
1000px;
margin-left: 350px;
margin-top: 150px;
}
.box-1,
.box-2,
.box-3 {
border: 3px solid black;
height: 150px;
width: 25%;
}
.box-1 {
text-align: center;
}
.box-2 {
text-align: center;
position: relative;
left: 254px;
}
.box-3 {
text-align: center;
position: relative;
left: 508px;
}
.image1,
.image2,
.image3 {
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="box-1"><span class="image1"><img src=" TULIP.jpg" width="200px"
height="100px">></span></div>
<div class="box-2"><span class="image2"><img src="Jellyfish.jpg"
width="200px" height="100px"></span></div>
<div class="box-3"><span class="image3"><img src="Hydrangeas.jpg"
width="200px" height="100px"></span></div>
</div>
</body>
</html>
Now, save the document with the file extension, “.html”.
Load the saved document in the browser. The result for the same will appear like
that:
24 | P a g e
