.

Skill Development Lab in Computer Science

Lab Manual
For
HTML & CSS

Course Code: CS – 606

 Contents
Sr. No. Experiment

1 Introduction of Internet and Web Designing

2 Importance

3 Objective of Lab Manual

4 Lab 1: develop a program to illustrate body and pre tags

5 Lab 2: Develop a Program to illustrate text Font tag

6 Lab 3: Develop a Program to illustrate comment,h1….h6, and div tag

7 Lab 4: Develop a Program to illustrate text formatting tags

8 Lab 5: Develop a Program to illustrate Order List tag

9 Lab 6: Develop a Program to illustrate Unordered List tag

10 Lab 7: Develop a program to illustrate Nested and Definition tag

11 Lab 8: Develop a program to illustrate Hyper Link tag (Anchor tag)

12 Lab 9: Develop a Program to illustrate Table tag

13 Lab 10: Develop a Program to illustrate Frame tag

14 Lab 11: Write HTML code for develop a form.

15 Lab 12: Develop a Program to illustrate CSS (cascading style sheet)

16 Lab 13: Create an html file by applying the different styles using
inline, external & internal style sheets.
17 Lab 14: To create external style sheet and using the style sheet in xml file.
Introduction of Internet and Web designing

Internet is a collection of computers where many computers grouped together share their
information.

HTML is known as Hyper Text Markup Language. It is the main markup language that is
used for web pages. A markup language is a set of markup tags and HTML uses markup tags
to describe web pages.HTML is a layout of a document and the hyperlink specification
language. It is a language for describing web pages.

• HTML stands for Hyper Text Markup Language

• HTML is not a programming language, it is a markup language

• A markup language is a set of markup tags

• HTML uses markup tags to describe web pages

HTML tells the browser, how to display the contents of a hypertext document, which
comprises of text, images and supported media. An HTML file can be created using a
simple text editor. Tags are written within <> brackets. Tags can be categorized into Empty
and Container. Empty tags are those, which do not have their closing tag. E.g. <br>.
Container tags are those, which have their closing tag.
Websites, as you know are a media for passing information. There are times when you
apart from giving information also require information or need to interact or know the
views of the person browsing your website. Therefore, you need to make your websites
dynamic.

Web designing involves various factors. These factors decide the overall appeal of your
website. When you are making websites, you have to keep in mind various factors in terms
of look and feel, size, layout, color theme, graphics, compositions, typography,
downloading size, resolution, functionality and page layout. In this unit, you will learn all
the aspects that you have to keep in mind before you start designing your web pages and
start building your websites.
Importance

❖ HTML is important as the base language that CSS, JavaScript plug in to. It
provides the content that CSS styles, JavaScript enhances links to a database (to
simplify their functions).
❖ 99.9% of the time or so, web applications are outputting HTML/CSS/JavaScript to
the browser, so you need to understand them if you're going to output them, just
like you need to understand English if you are going to output text in English.
❖ If you want to possess a credible online presence that reflects your company and
provides a platform to contend with competent rivals HTML is the best language
for website creation. It's several benefits a number of them are:
▪ A significant benefit of HTML it is free of charge and no need to
install any software.
▪ HTML is simple to use and understand. and high-speed loading time.
▪ All browsers support HTML.
▪ Most development tools whatever they are paid or free all support
HTML.
▪ HTML and XML syntax is extremely similar.
Objective of Lab Manual

After completion of this lab, learners will be able to:

• Create web pages and apply basic HTML tags.
• Develop web pages with the use of JavaScript functions, operators etc.
• Create web pages to store various information.
• Develop dynamic programs.
Practical’s
&
Solutions
Lab 1: Develop a Program to illustrate body and pre tags

Solution:

<html>
<head><title> body and pre tag </title></head>
<body text="red" bgcolor="yellow" background="image.jpg"> This is an Illustration of body tag
with its properties
<pre>
This text uses pre tag and
preserves nextline and spaces
</pre>
This text doesnt uses pre tag so doesnt preserves nextline and spaces.. everything will be
printed in the same line
</body></html>

Output
Lab 2: Develop a Program to illustrate text Font tag
<html>
<title> Font tag Example </title>
<body><font face="arial" size="1" color="blue"> WELCOME </font><br><font size="2"
color="cyan"> WELCOME </font><br><font size="3" color="red"> WELCOME
</font><br><font size="4" color="yellow"> WELCOME </font><br><font size="5"
color="green"> WELCOME </font><br><font size="6" color="brown"> WELCOME
</font><br><font size="7" color="pink"> WELCOME </font><br><font size="20"
color="gray"> WELCOME </font><br>
</body></html>

Output
Lab 3: Develop a Program to illustrate comment,h1….h6, and div tag
<html>
<head><title> Illustrating comment, h1...h6 and div tags </title></head>
<body>
<!--THIS IS A COMMENT LINE -->
<div style="color:#00ff00"><h1 align="center"> This is h1 tag text with center aligned </h1><h2
align="left"> This is h2 tag text with left aligned </h2><h3 align="right">This is h3 tag text with
right aligned </h3></div>
<h4> This is h4 tag text without alignment</h4><h5> This is h5 tag Text without
alignment </h5><h6> This is h6 tag text without alignment </h6>
</body></html>
Output
Lab 4: Develop a Program to illustrate text formatting tags
<html>
<head><title> Text Tags </title></head><body><center><h1 align="center">To illustrate text
formatting tags </h1><hr color="red">
<P><marquee behavior="alternate"> This is an alternate Marquee text </marquee>
This is <i> italized </i></p>
This is <u> underlined </u></p>
This is <b> bold </b></p>
This is <em> emphasized </em></p><p>This is <Strong> Strong Text </strong></p>
This is <s> striked text </s></p>
This is <code> computer code </code></p>
This is ^superscript code </p>
This is _subscript code </p>
This is <big> big text </big></p>
This is <small> small text </small></p></center>
</body></html>
Output
Lab 5: Develop a Program to illustrate Order List tag
<html>
<head>
<title> Order List tag </title>
</head>
<body>
<h3 align="center" style="color:red">To illustrate ORDER list tags</h3>
<hr COLOR="RED">
<h4>Numbered list:</h4>
<ol><li>Apples</li><li>Banana
s</li><li>Lemons</li><li>Oran
ges</li>
</ol>
<h4>Uppercase Letters list:</h4>
<ol
type="A"><li>Apples</li><li>
Bananas</li><li>Lemons</li><l
i>Oranges</li>
</ol>
<h4>Lowercase letters list:</h4>
<ol
type="a"><li>Apples</li><li>B
ananas</li><li>Lemons</li><li
>Oranges</li>
</ol>
<h4>Roman numbers list:</h4>
<ol
type="I"><li>Apples</li><li>B
ananas</li><li>Lemons</li><li
>Oranges</li></ol>
<h4>Lowercase Roman numbers list:</h4>
<ol
type="i"><li>Apples</li><li>Bananas</li><li>Lemons</li
><li>Oranges</li>
</ol>
</body></html>

Output
Lab 6: Develop a Program to illustrate Unordered List tag
Solution:
<html>
<title>Unordered List </title></head><body><h3 align="center">
To illustrate unordered list tags </h3><hr color="red">
<h4>Disc bullets list:</h4>
<ultype="disc"><li>Apples</li><li>Bananas</li>
<li>Lemons</li><li>Oranges</li>
</ul>
<h4>Circle bullets list:</h4>
<ul
type="circle"><li>Apples</li><li>Bananas</li><li
>Lemons</li><li>Oranges</li>
</ul>
<h4>Square bullets list:</h4>
<ul
type="square"><li>Apples</li><li>Bananas</li><li>
Lemons</li><li>Oranges</li>
</ul>
</body></html>

Output
Lab 7: Develop a program to illustrate Nested and Definition tag
Solution:

<html> <head> <title> Nested and Definition List </title> </head>

<body>
<h3 align="center"> To illustrate Nested and Definition List Tags </h3>
<hr color="red">
<h4> An ordered nested List: </h4>
<ol>
<li> Coffee </li>
<li> Tea <ol type= "a">
<li> Black tea </li>
<li> Green tea </li>
<ol type= "i" >
<li> China </li>
<li> Africa </li>
</ol>
</ol>
<li> Milk </li>
</ol>
<h4> A Definition List: </h4>
<dl><dt> Bangalore </dt><dd> -Capital City of Karnataka </dd>
<dt> Mumbai</dt><dd> -Capital city of Maharashtra </dd></dl></body></html>
Lab 8: Develop a program to illustrate Hyper Link tag (Anchor tag)
Solution:
Home.html
<html> <head>
<title> Link Tag </title>
</head> </title>
<body>
<h3 align="center" style="color:red">To illustrate link Tags</h3><hr>
Text as a link/hyperlink to another page : <a href="page1.html "> Click here!!!</a><hr>
Image as a link/hyperlink :<a href="page1.html">
<img src="flower.bmp" width="32" height="32" align="bottom"/></a>
<hr> <p><a href="#C8">See also Chapter 8 ( link within a page )</a></p>
<h2>Chapter 1</h2> <p>This chapter explains Pointers</p>
<h2>Chapter 2</h2> <p>This chapter explains variables</p>
<h2>Chapter 3</h2> <p>This chapter explains operator</p>
<h2>Chapter 4</h2><p>This chapter explains structure</p>
<h2>Chapter 5</h2><p>This chapter explains arrays</p>
<h2>Chapter 6</h2><p>This chapter explains linked list</p>
<h2>Chapter 7</h2><p>This chapter explains expressions</p>
<h2><a name="C8">Chapter 8</h2><p>This chapter explains Binary Trees</p>
<h2>Chapter 9</h2><p>This chapter explains Unordered trees</p>
<h2>Chapter 10</h2><p>This chapter explains Statements</p>
<h2>Chapter 11</h2><p>This chapter explains searching</p>
<h2>Chapter 12</h2> <p>This chapter explains sorting</p>
<h2> Chapter 13</h2> <p>This chapter explains Binary sort</p>
<h2>Chapter 14</h2><p>This chapter explains merge sort</p>
<h2> Chapter 15</h2><p>This chapter explains heap sort</p>
</body></html>
 Page1.html
<html><head><title> Page1.html </title></head><body><h1 align="center"> Hello!!! This is a
new chapter </h1><a href="home.html"> Go to home </a></body></html>

After Clicking On Click Me or the Flower image the output is After Clicking on the See also

Chapter 8(link within a page) the output is

Lab 9: Develop a Program to illustrate Table tag
Solution:

<html>
<head><title> Table tag </title></head>
<body><center><h4>Table with border, vertical headers, cellpadding and cellspacing</h4>

<table border="10" cellpadding="10" cellspacing="10">

<tr>
<td></td><th>Name</th><th>Age</th><th>Telephone</th>
</tr>

<tr><th>Student 1</th><td>Radha Desai</td><td>20</td><td>123 456 789</td>

</tr>

<tr><th>Student 2</th><td>Geetha Bharadwaj</td><td>21</td><td>267 891 281</td>

</tr>
</table>

<hr><h4>Cell that spans two columns:</h4>

<table border="1">
<tr> <th>Name</th> <th colspan="2">Telephone</th> </tr>
<tr> <td>Radha</td> <td>555 77 854</td> <td>555 77 855</td> </tr>
</table>

<hr><h4>Cell that spans two rows:</h4>

<table border="1">
<tr>
<th>First Name:</th>
<td>Radha</td></tr><tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td></tr><tr>
<td>555 77 855</td>
</tr>
</table>
</center></body></html>
Output
Lab 10: Develop a Program to illustrate Frame tag
Solution:

mainframe.html
<html><head><title> Frame tag </title></head><head><frameset cols="20,60"><frame
src="f1.html"><frame src="f2.html" name="main"></frameset></frameset></head></html>
f1.html
<html><head><title> f1.html </title></head><body><h3> States of Gujarat </h3><a
href="ahmedabad.html" target="main"> Ahmedabad<br></a><a href="vadodara.html"
target="main"> Vadodara<br></a></body></html>
f2.html
<html><head><title> f2.html </title></head><body><h1> Click on any state to get a welcome
message </h2></body></html>
ahmedabad.html
<html><head><title> ahmedabad.html </title></head><body bgcolor="green"><h1> Welcome
to Ahmedabad </h1></body></html>
vadodara.html
<html><head><title> vadodara.html </title></head><body bgcolor="red"><h1> Welcome to
Vadodara </h1></body></html>
Output

After Clicking On Ahmedabad the output is :

After Clicking On Vadodara the output is :

Lab 11: Write HTML code for develop a form.
Solution:
<html>
<head>
<title>Registration Form Sample</title>
</head>
<body bgcolor="lightblue" text="red" style="font-size:15pt;font-family:Garamond" ><center>
<h2>ENTRY FORM</h2></center>
<form name=form1 >
<table name=tab cellspacing=30pt>
<tr><td align=left><h2>Enter your Name :</h2></td><td align=right><input type=text name=t1
size=18>
<tr><td align=left><h2>Enter your Age :</h2></td><td align=right><input type=text name=t2
maxlength=3 size=18>
<tr><td align=left><h2>Enter your Address :</h2></td><td align=right><textarea name=ta
rows=5 cols=15></textarea>
<tr><td align=left><h2>Sex :</h2></td><td align=left><input type=radio name=r1
value="female">Female<br>
<input type=radio name=r1 value=male>Male</td>
<tr><td align=left><h2>Languages Known :</h2></td><td align=left><center>(select more than
one)</center>
<input type=checkbox name=c1 value=c>C<br>
<input type=checkbox name=c2 value=c++>C++<br>
<input type=checkbox name=c3 value=vb>VB<br>
<input type=checkbox name=c4 value=java>JAVA<br>
<input type=checkbox name=c5 value=asp>ASP<br>
<input type=checkbox name=c6 value=others>OTHERS<br></td>
<tr><td align=left><h2>Enter your Password :</h2></td><td align=right><input type=password
name=t3 size=18>
</table> <center>
<input type=reset value=" Reset " >
<input type=submit value=" Submit " >
</form> </body> </html>
Output:
Lab 12: Develop a Program to illustrate CSS (cascading style sheet)
Solution:

<html>
<head><title> css demo </title><style type="text/css">
body { background-color:red;}
h1 { color:orange; text-align:center;}
p { font-family: "Times new roman "; font-size: 20px;}
</style></head>
<body><h1> CSS EXAMPLE </h1>
<p> This is a paragraph </p>
</body></html>
OUTPUT
Lab 13: Create an html file by applying the different styles using inline, external & internal
style sheets.

Procedure :-
1. Create a external style sheet named as “external_css.css” and provide some styles for h2, hr, p
& a tags.
2. Create an html file named as “Style_sheet.html”
a) Include the external style sheet with necessary tag.
b) Include the internal style sheet for body tags & also use class name, so that the style can
be applied for all tags.
c) include a <p> tags with inline style sheet.

Solution :-
1. Create a css file in a notepad & save it with the .css extension.
2. In notepad type the necessary code & save with the file name mentioned with .html extension.

File Name: Style_Sheet.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="external_style.css" />
<style type="text/css">
body
{
margin-left:200px;
background:#5d9ab2 url('img_tree.png') no-repeat top left;
}
.container
{
text-align:center;
}
.center_div
{
border:1px solid gray;
margin-left:auto;
margin-right:auto;
width:90%;
background-color:#d0f0f6;
text-align:left;
padding:8px;
}
</style>
</head>
<body>
<div class="container">
<div class="center_div">
<h1>Hello World!</h1>
</div>
</div>
<p style="border-style:dotted solid dashed double">This is some text in a paragraph.</p>
<p style="border-style:dotted solid dashed">This is some text in a paragraph.</p>
<p style="border-style:dotted solid">This is some text in a paragraph.</p>
<p style="border-style:dotted">This is some text in a paragraph.</p>
<h2>This is a header 1</h2>
<hr />
<p>You can see that the style
sheet formats the text</p>
<p><a href="cd_catalog.xml" target="_blank">This is a link</a></p>
</body>
</html>
File Name: external_style.css

<style>
h2 {color:maroon; font-size:20pt}
hr {color:navy}
p {font-size:11pt; margin-left: 15px}
a:link {color:green}
a:visited {color:yellow}
a:hover {color:black}
a:active {color:blue}
</style>

Output:
Lab 14: To create external style sheet and using the style sheet in xml file. Procedure:
Create a style sheet named as cd_catalog.css and provide necessary style for the tags used in
cd_catalog.xml file
Create an xml file named as cd_catalog_css.xml and include the .css file created above.

Solution :-
In notepad type the necessary code & save with the file name mentioned with .xml extension.

File Name: cd_catalog.css

CATALOG
{
background-color: #ffffff;
width: 100%;
}
CD
{
display: block;
margin-bottom: 30pt;
margin-left: 0;
}
TITLE
{
color: #FF0000;
font-size: 20pt;
}
ARTIST
{
color: #0000FF;
font-size: 20pt;
}
COUNTRY,PRICE,YEAR,COMPANY
{
display: block;
color: #000000;
margin-left: 20pt;
}

File Name: cd_ctalog.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
</CATALOG>

Output: