Scribd
Upload
1K views16 pages

WEB PROGRAMMING Lab Manual

This document provides instructions for completing several HTML lab exercises. Students are asked to: 1) Create an HTML page with basic tags like headings, paragraphs, lists, and tables. 2) Make another page demonstrating frames, including navigation frames with links, floating frames with inline content, and mixed frames dividing the page into sections. 3) Hints are provided on HTML structures like framesets and frames to divide pages into rows and columns for multi-column layouts.

Uploaded by

Yash Singhal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
1K views16 pages

WEB PROGRAMMING Lab Manual

This document provides instructions for completing several HTML lab exercises. Students are asked to: 1) Create an HTML page with basic tags like headings, paragraphs, lists, and tables. 2) Make another page demonstrating frames, including navigation frames with links, floating frames with inline content, and mixed frames dividing the page into sections. 3) Hints are provided on HTML structures like framesets and frames to divide pages into rows and columns for multi-column layouts.

Uploaded by

Yash Singhal
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 16

WEB PROGRAMMING Lab Manual

Exp No: 1 : Basic Html Tags


Aim: To create a simple html file to demonstrate the use of different tags.

Problem Statement :-

Create an html page named as “: Basic_Html_Tags.html” Add the following tags detail.
1. Set the title of the page as “Basic Html Tags”
2. Within the body perform the following

a) Moving text = “Basic HTML Tags”

b) Different heading tags ( h1 to h6)

c) Paragraph
d) Horizontal line

e) Line Break
f) Block Quote
g) Pre tag
h) Different Logical Style ( <b>, <u>, <sub>, <sup>....)
i) Different Physical style ( <code>, <del>, <kbd>...)
j) Listing tags ( 2 types with, & each type provide different “type” attribute)

HTML Document Structure:

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Formatting and Fonts:
<br> - break tag – makes output on the next line.
<p> - paragraph tag – places a blank line before the line it is on. <hr> - horizontal tag – creates a line or horizontal rule.

<pre> - preformatted tag - enables one to embed text that is already formatted . <i> - Italic font
<b> - Bold font
<em> - Emphasis

<sup> - Superscript
<sub> - Subscript
Font Size:
<font> tag and <h....> tag
<h1> - 24 pt <font size=7> - 36 pt
<h2> - 18 pt <font size=6> - 24 pt
<h3> - 12 pt <font size=5> - 18 pt
<h4> - 12 pt bold <font size=4> - 12 pt bold <h5> - 10 pt <font size=3> - 12 pt plain <h6> - 7 pt <font size=2> - 9 pt

Text alignment:

<p align=”center”> - align the text in center.


<h1 align=”left”> - align the text in left.
<h2 align=”right”> - align the text in right.
The “align” tag can be used with <p> tag and <h....> tag Color:

1. Set background color and text color - <body bgcolor=”blue” text=”red”> <body bgcolor=”#800000”>
2. Set text color only - <font color=”brown”>

Output
Exp No: 2 : Html Tags (List, Table)
Aim: To create a simple html file to demonstrate the use of different tags.

<center><FONT COLOR="#0000FF"> Listing Tags</FONT></center> <h4>Numbered list:</h4>

<ol> <li>java</li>

<li>perl</li>

<li>c++</li>
</ol>
<h4>Letters list:</h4> <ol type="A">

<li>smtp</li> <li>http</li> <li>ftp</li>

</ol>
<h4>Lowercase letters list:</h4> <ol type="a" start="2">

<li>php</li> <li>javascript</li> <li>ajax</li>

</ol>

<h4>Roman numbers list:</h4> <ol type="I">


<li>DTE</li>
<li>JCTE</li>

<li>SITTTR</li>
</ol>
<h4>Lowercase Roman numbers list:</h4> <ol type="i" start="4" >
<li>Computer Engg.</li>
<li>Mechanical Engg.</li>
<li>Electronics Engg.</li>
</ol>
Problem Statement :-
T308</td>

gcolor="silver">Wednesday</th>
OLSPAN =2 bgcolor="yellow"><center>ELETIVE - I</td>
T0306</td>
T310</td>
T304</td>
T308</td>
OUN</td>

gcolor="silver">Thursday</th>
T302</td>
T0304</td>
OLSPAN=2><center>PD0302</td>
OLSPAN=3 bgcolor="green"><center>IT0320/IT0322</td>

gcolor="silver">Friday</th>
T0308</td>
T0306</td>
T0308</td>
T0302</td>
OLSPAN=2 bgcolor="red"><center>ELECTIVE - I</td>
td>

y>
e>
y>
>

SITTTR

ame:image.html

SITTTR
</form>
</body>
</html>

Result :-

The above scripts are successfully executed and obtained desired output.

Output
Exp No: :-
3 : Html Tags (Form)
Aim: To create a simple html file to demonstrate the use of different tags.

Exp No: 4 : Frames & iFrames


Aim: To create an html page with different types of frames such as floating frame, navigation frame & mixed frame.
SITTTR
Problem Statement :

1. Create an html page named as “frames.html”. Divide the page into two columns of 20%, 80% size. In 20% size call
the hyperlinks for “navigationframes.html”, “floatingframes.html”, “mixedframe.html”, “noframe” and make the
page to be get displayed on the other column when these links are clicked.
ating frame, and in floating frame include the any html file created in the above exercise as
ine.
eate an html page named as “ mixedframe.html” . Divide the page into two columns of 25% &
% size. In 25% display an image and divide the 75% into two rows. (50% & 50%). In the first
% display the video file created in previous exercise and other 50% the time table created in
WEB PROGRAMMING Lab Manual Page 34 of 124
evious exercise.
<frameset cols=” 40%,* > https://gptcthirurangadi.in
<frame name=” frame1” src=” pattern.html” />
war e Requir ements:
2. Create
Pentium IV with<framean html RAM,
name=”
2 GB page named
frame2” asGB
160src=” “navigationframe.html”.
banner.html”
HARD Disk, /> Monitor Divide1024*
the page intocolor
768 two columns
60Hz of 40%, 60% size. In 40%
size call the
</frameset>
war e Requir ements: hyperlink file created in above exercise , and make the page to be get displayed on the other column
Windows / whenWEBthe
Linux link is clicked.
operating
PROGRAMMING system Any BrowserLab Manual Page 34 of 124
3. Create anam
Pr ogr html page named as “floatingframes.html”. In this file include a paragraph to explain floating frame, and
https://gptcthirurangadi.in
in<frameset
floating cols=”
frame 40%,*the
include > any html file created in the above exercise as inline.
y: <frame
4. Create an name=”
In notepadhtmltype frame1”
pagethenamed
src=” pattern.html” /> . Divide the page into two columns of 25% & 75% size. In 25%
as “mixedframe.html”
necessary code & save with the file name mentioned with .html extension.
<frame name=” frame2” src=”
display an image and divide the 75% banner.html”
into two />
rows. (50% & 50%). In the first 50% display the video file created in
es and Fr amesets:
</frameset>
previous
a web page into File exercise
Name:
rows and and
3home_fr
columnsother 50%
ame.html the time table created in previous exercise.
<html>
Pr ogram
<body> WEB Technology
<a href="3navigationframes.html"Author: target="two">navigation frame</a><br><hr>
In notepad type the necessary code & save with the file name mentioned with .html extension.
<a href="3floatingframe.html" target="two">floating
Date: frame</a><br><hr>
<a href="3frames.html" target="two">no frame</a><br><hr>
TOC File Name: 3home_fr ame.html
<a href="3mixedframe.html" target="two">mixed frame</a><br><hr>
<html>
1.Link1
</body>
<body>
2.Link2
</html>
<a href="3navigationframes.html" target="two">navigation frame</a><br><hr>
. <a href="3floatingframe.html" target="two">floating CONTENT
frame</a><br><hr>
. <a href="3frames.html" target="two">no frame</a><br><hr>
<a href="3mixedframe.html" target="two">mixed frame</a><br><hr>
ain parts are: <frameset>,
</body> <frame> and </frameset>
</html> tag is either “ rows” or “ cols” , which
tribute of <frameset> Frame declares the divisions either in terms
els or percentage size.
utes of <frame> tag:
– indicates the name of the frame.
name of source file to be displayed in the frame.
ple:1
eset rows=” 100,150,* ” >
e name=” frame1” src=” pattern.html” />
e name=” frame2” File src=”
Name:banner.html”
3fr ames.html />
e name=” frame3” src=”
<html> buttons.html” />
meset> <frameset cols="20%,* " scrolling="no" noresize>
ple:2 <frame name="one" src="3home_frame.html" />
<frame name="two" /> SITTTR
</frameset>
File Name: 3fr ames.html
</html>
<html> Navigation Frame
<frameset cols="20%,* " scrolling="no" noresize>
<frame name="one" src="3home_frame.html" />
<frame name="two" />
</frameset>
</html>
WEB PROGRAMMING Lab Manual Page 35 of 124
File Name: 3navigationfr ames.html https://gptcthirurangadi.in

<html>
<frameset cols="40%,* " scrolling="no" noresize>
<frame name="one" src="pagelink.html"></frame>
<frame name="two" ></frame> Floating Frame
</frameset> </html>

File Name: 3floatingfr ame.html

<html>
<body> iframe
<p>Frames divide a browser window into two or more separate pieces or panes, with each pane
containing a separate web page. One of the key advantages that frames offer is that we can load and
reload single panes without having to reload the entire contents of the browser window. A collection
of frames in the browser window is known as a frameset . A frameset divides the window into rows
and columns (rather like a table). The simplest of framesets might just divide the screen into two
rows, whereas a complex frameset could use several rows and columns.
<p>There is also a special kind of frame called an iframe which is a single window that can sit
anywhere inside a page.
<p>If a user ’ s browser does not support frames, the contents of the noframes element should be
displayed to the user.A body element should be placed inside the noframes element because if a
browser does not understand the frameset element, it should ignore the frameset element and the
noframes element, then display what is inside the body element contained in the noframes
element.<p>

<iframe src="2Table.html" height="50%" width="80%">


</iframe>

</body>
</html>
Exp No: 5 : Map
Aim: To create an html page with different types of image map such as circle, rect , poly & mixed map.

Problem Statement :

1. To display an image on the website and construct a map for all circle buttons, develop the "dialler.html" HTML
page. When you click on a circle, a message with a button number, such as "you push button 1," will appear.
Exp No: 6 : : Inline, Internal and External Style sheets
Aim: To create an html file by applying the different styles using inline, external & internal style sheets.

Problem Statement :-

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 “4Style_sheet.html”
1. Include the external style sheet with necessary tag.
2. Include the internal style sheet for body tags & also use class name, so that the style can be applied for all
tags.
3. Include a <p> tags with inline style sheet.

Theory:

Basic syntax:
selector {property:value; property:value; .....}
selector => identifier of the element
e.g.
body {background : yellow; color : yellow}
p {font-family: “Times New Roman”; font-size: 14px}
h1,h3 {color : red}

CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.

Use our CSS Selector Tester to demonstrate the different selectors.

Selector Example Example description


.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects all <p> elements that are placed immediately after
<div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word
"flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with
"en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins
with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with
".pdf"
[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains
the substring "w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children (including text
nodes)
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its
parent
:focus input:focus Selects the input element which has focus
Selector Example Example description
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to "it"
(Italian)
:last-child p:last-child Selects every <p> element that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its
parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent,
counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its
parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its
parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its
parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
:read-only input:read-only Selects input elements with the "readonly" attribute specified
:read-write input:read-write Selects input elements with the "readonly" attribute NOT
specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL
containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links
Q6a. Output

Q6b. Output
Q6C. Output

You might also like