Scribd
Upload
19 views

Web Programming Lab Manual

Uploaded by

reshu111202
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

Web Programming Lab Manual

Uploaded by

reshu111202
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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>
Lab Manual Page 19 of 124
<h4>Lowercase letters list:</h4> <ol type="a" start="2">
https://gptcthirurangadi.in
<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>
WEB PROGRAMMING Lab Manual Page 24 of 124
<td>IT308</td> https://gptcthirurangadi.in
</tr>
<tr>
<th bgcolor="silver">Wednesday</th>
Problem Statement :-
<td COLSPAN =2 bgcolor="yellow"><center>ELETIVE - I</td>
<td>IT0306</td>
<td>IT310</td>
<td>IT304</td>
<td>IT308</td>
<td>COUN</td>
</tr>
<tr>
<th bgcolor="silver">Thursday</th>
<td>IT302</td>
<td>IT0304</td>
<td COLSPAN=2><center>PD0302</td>
<td COLSPAN=3 bgcolor="green"><center>IT0320/IT0322</td>
</tr>
<tr>
<th bgcolor="silver">Friday</th>
<td>IT0308</td>
<td>IT0306</td>
<td>IT0308</td>
<td>IT0302</td>
<td COLSPAN=2 bgcolor="red"><center>ELECTIVE - I</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

SITTTR

File Name:image.html
Exp No: 3 : Html Tags (Form)
Aim: To create a simple html file to demonstrate the use of different tags. SITTTR
The above scripts are successfully executed and obtained desired output.

Output :-

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.
2. Create an html page named as “navigationframe.html”. Divide the page into two columns of
40%, 60% size. In 40% size call the hyperlink file created in above exercise , and make the
page to be get displayed on the other column when the link is clicked.
3. Create an html page named as “floatingframes.html”. In this file include a paragraph to
explain floating frame, and in floating frame include the any html file created in the above
exercise as inline.
<frameset cols=” 40%,* > https://gptcthirurangadi.in
Har dwar e <frame
Requirname=”ements: frame1” src=” pattern.html” />
<frameIV
Pentium name=”
withframe2”
2 GB RAM,src=” banner.html”
160 GB HARD /> Disk, Monitor 1024* 768 color 60Hz
</frameset>
Softwar e Requir ements:
Windows / Linux operating system AnyLab
WEB PROGRAMMING Browser
Manual Page 34 of 124
Pr ogr am https://gptcthirurangadi.in
<frameset cols=”an
4. Create 40%,*
html>page named as “mixedframe.html” . Divide the page into two columns of 25%
Theor y: <frame name=” frame1” src=”display
pattern.html” /> and divide the 75% into two rows. (50% & 50%). In
In notepad & type
75% thesize. In 25%
necessary code &ansave
image
with the file name mentioned with .html extension.
<frame name=”
the firstframe2” src=” banner.html”
50% display the video file />
created in previous exercise and other 50% the time table
Fr ames and Fr amesets:
</frameset>
divide a webFile Name:
page created
into rowsin previous
3home_fr exercise.
ame.html
and columns
e.g. <html>
Pr ogram
<body> WEB Technology
<a href="3navigationframes.html" target="two">navigation
Author: 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>
File Name:
TOC 3home_fr ame.html
<a href="3mixedframe.html" target="two">mixed frame</a><br><hr>
<html>1.Link1
</body>
<body>
</html> 2.Link2
<a href="3navigationframes.html" target="two">navigation frame</a><br><hr>
.
<a href="3floatingframe.html" CONTENT
target="two">floating 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>
The main parts are: <frameset>, <frame> and </frameset>
</body>
The attribute of <frameset> tag is either “ rows” or “Frame
</html> cols” , which declares the divisions either in terms
of pixels or percentage size.
Attributes of <frame> tag:
name – indicates the name of the frame.
src – name of source file to be displayed in the frame.
Example:1
<frameset rows=” 100,150,* ” >
<frame name=” frame1” src=” pattern.html” />
<frame name=” frame2”
File Name: src=” banner.html” />
3fr ames.html
<frame name=”
<html>frame3” src=” buttons.html” />
</frameset><frameset cols="20%,* " scrolling="no" noresize>
Example: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>

SITTTR

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

SITTTR

You might also like