Scribd
Upload
261 views

Basic Web Design Lab Manual

This document is a manual for the Basic Web Design lab course (code 15CS22P) for the second semester of the Computer Science program in the 2017-18 academic year. It was created by Mr. G. Velumani, a system analyst at RJS Polytechnic in Bangalore, India. The manual provides examples of HTML code for basic web page elements like headings, paragraphs, fonts, images, and links. It includes 7 examples with the code to create each element and the resulting output. The examples cover topics like using font tags, alignment, headings, special characters, inserting images, and creating external links between pages using anchor tags.

Uploaded by

soumya ranjan Parida
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
261 views

Basic Web Design Lab Manual

This document is a manual for the Basic Web Design lab course (code 15CS22P) for the second semester of the Computer Science program in the 2017-18 academic year. It was created by Mr. G. Velumani, a system analyst at RJS Polytechnic in Bangalore, India. The manual provides examples of HTML code for basic web page elements like headings, paragraphs, fonts, images, and links. It includes 7 examples with the code to create each element and the resulting output. The examples cover topics like using font tags, alignment, headings, special characters, inserting images, and creating external links between pages using anchor tags.

Uploaded by

soumya ranjan Parida
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

BWD LAB (15CS22P) 2015 CURRICULLUM

BASIC WEB DESIGN LAB MANUAL


COURSE CODE: 15CS22P

FOR 2nd Sem CS & E


(2017-18)

BY
Mr. G. VELUMANI
SYSTEM ANALYST
COMPUTER SCIENCE & ENGINEERING
RJS POLYTECHNIC
BANGALORE-34.

For Any Feedback Contact


Email: [email protected]

RJS POLYTECHNIC, BANGALORE-34. Page 1


BWD LAB (15CS22P) 2015 CURRICULLUM

1.) Design a page having suitable background colour and text colour with
title “My First Web Page” using all the attributes of the Font tag.

<!-- My First Web Page.html-->


<html>
<head>
<title> <b><u><font face="times new roman" size="8"><center> My First WEB
page </center></b></u></tittle>
</head>
<body bgcolor="grey">
<h1>1st SEM Computer Science </h1>
<h2> <b><font size="6" color="green"><center>Basic WEB
Design</center></font size=6></b> </h2>
<p1> <font face="lucida calligraphy" size="5.5" color="blue">These license
terms are an agreement between Microsoft Corporation<br> <font
face="cambria" size="5" color="pink"> based on where you live, one of its
affiliates and youh includes<br><font face="century" size="4"
color="red">Please read them. They apply to the software named above, on
whichyou.<br><font face="cooper" size="3" color="orange">Printed-paper
license terms, which may come with software. <br></p1>
</body>
</html>

RJS POLYTECHNIC, BANGALORE-34. Page 2


BWD LAB (15CS22P) 2015 CURRICULLUM

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 3


BWD LAB (15CS22P) 2015 CURRICULLUM

2.) Create a HTML document giving details of your [Name, Age], [Address,
Phone] and [Register Number, Class] aligned in proper order using
alignment attributes of Paragraph tag.

<html>
<head>
<title><b><u><font face="monotype corsiva" size="9"><center>
RESUME</font size> </center></b><u/></title>
</head>
<body bgcolor="grey">
<div align="left">Name</div>
<div align="center"> : Srinivas</div>
<div align="left">Reg.No</div>
<div align="center">: 372cs170055</div>
<div align="left">Class</div>
<div align="center">: 1st SEM CS</div>
<div align="left">Age</div>
<div align="center">: 20</div>
<div align="left">Address</div>
<div align="center">: #447/6, Puttareddy building, Krishnareddy Layout,
Chandhapur. </div>
<div align="left">Ph.No</div>
<div align="center">: 9206843250,7019858377</div>
<div align="justify">
<p><center> <font color="blue">As I'm Student in RJS College, I'm studing in
1st year Cs. <br><font color="green">I'm good in the activities, I'm decent in
class.<br> <font color="red">Now I'm studing 2nd Sem.<center></p>
</div align="justify">
</body>
</html>

RJS POLYTECHNIC, BANGALORE-34. Page 4


BWD LAB (15CS22P) 2015 CURRICULLUM

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 5


BWD LAB (15CS22P) 2015 CURRICULLUM

3.) Write HTML code to design a page containing some text in a paragraph
by giving suitable heading style.

<html>
<head>
<title><center><font face="lucida calligraphy" color="blue" size=10> different
heading tags in html </font size=10></center><title>
</head>
<body bgcolor=grey>
<center><font face="monotype corsiva" color="yellow" size=6><p>about
notepad</font size=6></p></center>
<font face="lucida calligraphy">
<h1><p><font color="black">heading 1: <br>these license terms are an
agreement between microsoft corporation (or based on where you live, one of its
affiliates) and you. please read them. terms</p></h1>
<h2><p><font color="red">heading 2: <br>activation associates the use of the
software with a specific computer. the software will from time to time perform a
validation check of the software. validation, licensing or activation functions of
the software.</p></h2>
<h3><p> <font color="green">heading 3:<br>this information includes the
version, language and product key of the software, the internet protocol address
of the computer,the software will from time to time perform a validation check
of the software. the check may be initiated by the software or
microsoft.</p></h3>
<h4><p><font color="blue">heading 4:<br> for more information, see
go.microsoft.com/fwlink/?linkid=104609. by using the software, you consent to
the transmission of this information.the software will from time to time perform
a validation check of the software. the check may be initiated by the software or
microsoft. software.</p></h4>
<h5><p><font color="pink">heading 5:<br>validation verifies that the software
has been activated and is properly licensed. it also verifies that no unauthorized
changes have been made to the validation, licensing, or activation functions of
the software.</p><h5>

RJS POLYTECHNIC, BANGALORE-34. Page 6


BWD LAB (15CS22P) 2015 CURRICULLUM

<h6><p><font color="white">heading 6:<br>validation may also check for


certain malicious or unauthorized software related to such unauthorized
changesthe software will from time to time perform a validation check of the
software. updates or additional downloads..</p></h6>
</body>
</html>

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 7


BWD LAB (15CS22P) 2015 CURRICULLUM

4.) Create a page to show different character formatting (B, I, U, SUB, SUP)
tags. viz : log b m p = p logb m

<html>
<head>
<title><center><font face="lucida calligraphy" color="blue" size=7> different
charector formating tags in html </font size=7></center></title>
</head>
<body bgcolor=grey>
<center><font face="monotype corsiva" color="yellow" size=6><p> b, i, u. sub,
sup tags</font size=6></p></center>
<center><p><font size=7> log<sub>b</sub> m<sup>p</sup>=p
log<sub>b</sub> m <br>
log<sub>a</sub> log<sub>b</sub> = log<sub>ab</sub> <br>
a<sup>2</sup> + b <sup>2</sup>= (a + b)<sup>2</sup><br>
log<sub>x</sub>= 1/x <br>
(a + b )<sup>2</sup> = a<sup>2</sup> + b <sup> 2</sup> + 2ab
</font size=7><br> <font size=5> this questions are given in 29<sup>th</sup>
jan 2016.</font size=5> </center>
</body>
</html>
OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 8


BWD LAB (15CS22P) 2015 CURRICULLUM

5.) Write HTML code to create a Web Page that contains an Image at its
centre.

<html>
<head>
<title><center><font face="lucida calligraphy" color="blue" size=6> inserting
image tags in html </font size=6></center></title>
</head>
<body bgcolor=pink>
<center>
<img src="c:\users\student\pictures\avengers-infiinity-war.jpg" height="180"
width="220">
<p> john cena is best fighter in wwf . he have nice tricks to attact aganest enimies.
<br>his punch was very hard, he is very good fighter. he is my fav player. john
cena is well player.<br> the auto root update feature updates the list of trusted
certificate authorities. <br>you can switch off the auto root update feature.</p>
</center>
</body>
</html>
OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 9


BWD LAB (15CS22P) 2015 CURRICULLUM

6.) Create a web page with an appropriate image towards the left hand side
of the page, when user clicks on the image another web page should open.

<html>
<head>
<title><center><font face="lucida calligraphy" color="blue" size=6> inserting
image tags in html </font size=6></center></title>
</head>
<body bgcolor=pink>
<center>
<p> john cena is best fighter in wwf. he have nice tricks to attact aganest enimies.
<br>his punch was very hard, he is very good fighter. he is my fav player. john
cena is well player.<br> here the image if john cina >.the auto root update feature
updates the list of trusted certificate authorities. <br>you can switch off the auto
root update feature.</p>
</center>
</body>
</html>

SECOND PAGE.HTML

<html>
<head>
<title><center><font face="lucida calligraphy" color="blue" size=8>
image</font size=6></center></title>
</head>
<body bgcolor=pink>
<a href="sri link.html"><img src="c:\users\student\pictures\avengers-infiinity-
war.jpg" height="250" width="400">
</body>
</html>

RJS POLYTECHNIC, BANGALORE-34. Page 10


BWD LAB (15CS22P) 2015 CURRICULLUM

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 11


BWD LAB (15CS22P) 2015 CURRICULLUM

7.) Create web Pages using Anchor tag with its attributes for external links.

FIRST PAGE
<html>
<head>
<title><center><font face="lucida calligraphy" color="blue" size=6> link tags in html
</font size=6></center></title>
</head>
<body bgcolor="pink">
<center>
<p> john cena is best fighter in wwf. he have nice tricks to attact aganest enimies. <br>his
punch was very hard, he is very good fighter. he is my fav player. john cena is well
player.<br> <img src="c:\users\public\pictures\sample pictures\lighthouse.jpg"
height="150" width="720"><br>
the auto root update feature updates the list of trusted certificate authorities. <br>you can
switch off the auto root update feature.<a href="s2.html">next page</a >
</center>
</body>
</html>

SECOND PAGE
<html>
<head>
<title><center><font face="lucida calligraphy" color="blue" size=6> link tags in html
</font size=6></center></title>
</head>
<body bgcolor="white">
<center>
<p><img src="c:\users\public\pictures\sample pictures\chrysanthemum.jpg" height="150"
width="520"><br>
these license terms are an agreement between microsoft corporation (or based on where you
live, one of its affiliates) and you. please read them. they apply to the software named above,
which includes the media on which you received it, if any. printed-paper license terms, which
may come with the software, may replace or modify any on-screen license terms. the terms
also apply to any microsoft<a href="s3.html">next .page
</p>
</center>
</body>
</html>
RJS POLYTECHNIC, BANGALORE-34. Page 12
BWD LAB (15CS22P) 2015 CURRICULLUM

THIRD PAGE

<html>
<head>
<title><center><font face="lucida calligraphy" color="blue" size=6> link tags in html
</font size=6></center></title>
</head>
<body bgcolor="grey">
<center>
<p><img src="c:\users\public\pictures\sample pictures\desert.jpg" height="150"
width="420"><br>
the software will from time to time perform a validation check of the software. the check
may be initiated by the software or microsoft. to enable the activation function and validation
checks, the software may from time to time require updates or additional downloads of the
validation, licensing or activation functions of the software. the updates or downloads are
required for the proper functioning of the software and may be downloaded and installed
without further notice to you. this information includes, for example, the version and product
key of the software, any unauthorized changes made to the validation, licensing or activation
functions of the software, any related malicious or unauthorized software found and the
internet protocol address of the computer.<a href="s4.html">next page.
</p>
</center>
</body>
</html>

FOURTH PAGE
<html>
<head>
<title><center><font face="lucida calligraphy" color="blue" size=6> link tags in html
</font size=6></center></title>
</head>
<body bgcolor="yellow">
<center>
<p><img src="c:\users\public\pictures\sample pictures\hydrangeas.jpg" height="150"
width="520"><br>
plug and play and plug and play extensions. you may connect new hardware to your
computer, either directly or over a network. your computer may not have the drivers needed
to communicate with that hardware. if so, the update feature of the software can obtain the

RJS POLYTECHNIC, BANGALORE-34. Page 13


BWD LAB (15CS22P) 2015 CURRICULLUM

correct driver from microsoft and install it on your computer. an administrator can disable
this update feature.<a href="s5.html">next page.
</p>
</center>
</body>
</html>

FIFTH PAGE
<html>
<head>
<title><center><font face="lucida calligraphy" color="blue" size=6> link tags in html
</font size=6></center></title>
</head>
<body bgcolor="sky blue">
<center>
<p><img src="c:\users\public\pictures\sample pictures\tulips.jpg" height="150"
width="520"><br>
malicious software removal. during setup, if you select “get important updates for
installation”, the software may check and remove certain malware from your computer.
“malware” is malicious software. if the software runs, it will remove the malware listed and
updated at www.support.microsoft.com/?kbid=890830. during a malware check, a report
will be sent to microsoft with specific information about malware detected, errors, and other
information about your computer. this information is used to improve the software and other
microsoft products and services.
</p>
</center>
</body>
</html>

RJS POLYTECHNIC, BANGALORE-34. Page 14


BWD LAB (15CS22P) 2015 CURRICULLUM

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 15


BWD LAB (15CS22P) 2015 CURRICULLUM

8.) Create a web page for internal links; when the user clicks on different
links on the web page it should go to the appropriate locations/sections in
the same page.

<html>
<head>
<title>internal links</title>
</head>
<body bgcolor="pink">
<center>
<a href="#lession 1">Point 1</a><br>
<a href="#lession 2">Point 2</a><br>
<a href="#lession 3">Point 3</a><br>
<a href="#lession 4">Point 4</a><br>
<a href="#lession 5">Point 5</a><br>
</center>
<FONT FACE="MONOTYPE CORSIVA" COLOR="green "SIZE=3>
<a name="lession 1">introduction lession 1</a>
<p> this is an starting</p>
<p> begans </p><br><br>
<FONT FACE="Century Gothic" COLOR="YELLOW" SIZE=4>
<a name="lession 2">introduction lession 2</a>
<p> this is an starting</p>
<p> begans </p><br><br>
<FONT FACE="Footlight MT" COLOR="red" SIZE=5>
<a name="lession 3">introduction lession 3</a>
<p> this is an starting</p>
<p> begans </p><br><br>
<FONT FACE="Engravers MT "COLOR="orange" SIZE=5>
<a name="lession 4">introduction lession 4</a>
<p> this is an starting</p>
<p> begans </p><br><br>
<FONT FACE="MONOTYPE CORSIVA" COLOR="blue" SIZE=5>
<a name="lession 5">introduction lession 4</a>
RJS POLYTECHNIC, BANGALORE-34. Page 16
BWD LAB (15CS22P) 2015 CURRICULLUM

<p> this is an starting</p>


<p> begans </p>
</body>
</html>

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 17


BWD LAB (15CS22P) 2015 CURRICULLUM

9.) Write a HTML code to create a web page with pink color background
and display moving message in red color.

<html>
<head>
<title> <b><u><font face="times new roman" size="8"><center> My Marquee
</center></b></u></title>
</head>
<body bgcolor="pink">
<marquee> <font color="red">These license terms are an agreement between
Microsoft Corporation. </marquee>
</body>
</html>

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 18


BWD LAB (15CS22P) 2015 CURRICULLUM

10.) Create a web page, showing an ordered list of all second semester
courses (Subjects).

<html>
<head>
<title> <b><u><font face="times new roman" size="8"><center> My Ordered
List </center></b></u></title>
</head>
<body bgcolor="pink">
<ol type="1">
<li>Math 2</li>
<li>English</li>
<li>DCF</li>
<li>DE Lab</li>
<li>MM LAb</li>
<li>BWD Lab</li>
</ol>
</body>
</html>

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 19


BWD LAB (15CS22P) 2015 CURRICULLUM

11.) Create a web page, showing an unordered list of names of all the
Diploma Programmes (Branches) in your institution.

<html>
<head>
<title> <center>unordered list </center></title>
</head>
<body>
<ul> Diploma
<li>CS</li>
<li>ME</li>
<li>CE</li>
<li>MA</li>
<li>EC</li>
</ul>
</body>
</html>

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 20


BWD LAB (15CS22P) 2015 CURRICULLUM

12.) Create a HTML document containing a nested list showing a content


page of any book.
<html>
<head>
<tittle> <center>Nested list </center></tittle>
</head>
<body>
<ol>
<li>Differentiation</li>
<ul>
<li>1st principle</li>
<li>sum rule</li>
<li>Product rule</li>
<li>Quatient Rule</li>
<li>chain Rule</li>
<li>Parabolic Rule</li>
</ul>
<li>Integration</li>
<ul>
<li>Sum Rule</li>
<li>Integration by parts</li>
<li>Product Rule</li>
</ol>
</body>
</html>

RJS POLYTECHNIC, BANGALORE-34. Page 21


BWD LAB (15CS22P) 2015 CURRICULLUM

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 22


BWD LAB (15CS22P) 2015 CURRICULLUM

13.) Create the following table in HTML with Dummy Data:


Reg. Student Date of
Year/Semester
Number Name Admission

<html>
<head>
<title><center><FONT FACE="Lucida Calligraphy" COLOR="BLUE"
SIZE=7>Table Formatting</center></FONT FACE></title>
</head>
<body>
<center> <FONT FACE="monotype corsiva" COLOR="green"
SIZE=6>Student Details </center></FONT FACE></center>
<table border="4" style="width:100%" color="grey">
<tr>
<td><center> Sl No.</td>
<td> <center>Reg. No</td>
<td><center> Student Name</td>
<td><center> Year </td>
<td><center> Date of Admition</td>
</tr>
<tr>
<td> 01</td>
<td> 372cs170001</td>
<td> Srinivas</td>
<td> 1st </td>
<td> 12/05/2017</td>
</tr>
<tr>
<td> 02</td>
<td> 372cs170002</td>
<td> Santosh.R</td>

RJS POLYTECHNIC, BANGALORE-34. Page 23


BWD LAB (15CS22P) 2015 CURRICULLUM

<td> 1st</td>
<td> 14/05/2017</td>
</tr>
<tr>
<td> 03</td>
<td> 372cs170003</td>
<td> Gowtham</td>
<td> 1st</td>
<td> 12/05/2017</td>
</tr>
<tr>
<td> 04</td>
<td> 372cs170004</td>
<td> Nikhil.T.M</td>
<td> 1st</td>
<td> 10/06/2017</td>
</tr>
<tr>
<td> 05</td>
<td> 372cs170005</td>
<td> Bharath</td>
<td> 1st</td>
<td> 08/05/2017</td>
</tr>
<tr>
<td> 06</td>
<td> 372cs170006</td>
<td> Bhimal</td>
<td> 1st</td>
<td> 12/05/2017</td>
</tr>
<tr>
<td> 07</td>
<td> 372cs170007</td>
RJS POLYTECHNIC, BANGALORE-34. Page 24
BWD LAB (15CS22P) 2015 CURRICULLUM

<td> Chiranjeevi</td>
<td> 1st</td>
<td> 10/06/2017</td>
</tr>
<tr>
<td> 08</td>
<td> 372cs170008</td>
<td> Anthony</td>
<td> 1st</td>
<td> 15/06/2017</td>
</tr>
<tr>
<td> 09</td>
<td> 372cs170009</td>
<td> Vijay Kumar</td>
<td> 1st</td>
<td>10/05/2017</td>
</tr>
<tr>
<td> 10</td>
<td> 372cs170010</td>
<td> Srinivas.B.A</td>
<td> 1st</td>
<td> 17/06/2017</td>
</tr>
</body>
</html>

RJS POLYTECHNIC, BANGALORE-34. Page 25


BWD LAB (15CS22P) 2015 CURRICULLUM

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 26


BWD LAB (15CS22P) 2015 CURRICULLUM

14.) Create a web page which divides the page in two equal frames and
place the audio and video clips in frame-1 and frame-2 respectively.
FRAME-1 FRAME-2

<html>
<head>
<title><center>Audio</title>
<body>
<br><audio controls>
<source src="C:\Users\Public\Music\Sample Music\Maid with the Flaxen
Hair.mp3" >
</body>
</html>

<html>
<head>
<tittle><center>Video</tittle>
<body>
<br>
<video controls width="400" height="250">
<source src="E:\MultiSim 11.0.1 Ultiboard PowerPro + Crack
Keygen_2\MultiSim License Gen Video.mp4">
</body>
</html>

<frame>
<frameset cols="50%,50%">
<frame src="audio.html">
<frame src="video.html">

RJS POLYTECHNIC, BANGALORE-34. Page 27


BWD LAB (15CS22P) 2015 CURRICULLUM

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 28


BWD LAB (15CS22P) 2015 CURRICULLUM

15.) Create a web page which should generate following output:


FRAME-2
FRAME-1
FRAME-3
<html>
<head>
<title><b><u><font face="monotype corsiva" size="9"><center>
RESUME</font size> </center></b><u/></title>
</head>
<body bgcolor="grey">
<div align="left">Name</div>
<div align="center"> : Srinivas</div>
<div align="left">Reg.No</div>
<div align="center">: 372cs170055</div>
<div align="left">Class</div>
<div align="center">: 1st SEM CS</div>
<div align="left">Age</div>
<div align="center">: 20</div>
<div align="left">Address</div>
<div align="center">: #447/6, Puttareddy building, Krishnareddy Layout,
Chandhapur. </div>
<div align="left">Ph.No</div>
<div align="center">: 9206843250,7019858377</div>
<div align="justify">
<p><center> <font color="blue">As I'm Student in RJS College, I'm studing in
1st year Cs. <br><font color="green">I'm good in the activities, I'm decent in
class.<br> <font color="red">Now I'm studing 2nd Sem.<center></p>
</div align="justify">
</body>
</html>

RJS POLYTECHNIC, BANGALORE-34. Page 29


BWD LAB (15CS22P) 2015 CURRICULLUM

<html>
<head>
<title><center>Audio</title>
<body>
<br><audio controls>
<source src="C:\Users\Public\Music\Sample Music\Maid with the Flaxen
Hair.mp3" >
</body>
</html>

<html>
<head>
<title><center>Video</title>
<body>
<br>
<video controls width="400" height="250">
<source src="E:\MultiSim 11.0.1 Ultiboard PowerPro + Crack
Keygen_2\MultiSim License Gen Video.mp4">
</body>
</html>

<frame>
<frameset cols="50%,50%">
<frame src="RESUME.html">
<frameset rows="50%,50%">
<frame src="audio.html">
<frame src="video.html">
</frame>

RJS POLYTECHNIC, BANGALORE-34. Page 30


BWD LAB (15CS22P) 2015 CURRICULLUM

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 31


BWD LAB (15CS22P) 2015 CURRICULLUM

16.) Create a web page using Embedded CSS and multimedia.


<html>
<head>
<style>
div.img
{
margin: 40px;
padding: 10px;
border: 2px solid red;
height: auto;
width: auto;
float: left;
text aling:center;
}
video
{
width: 200;
height: 100;
}
</style>
</head>
<body bgcolor="sky blue">
<div class="img">
<img
src="C:\Users\Student\Pictures\22046481_1883358558570907_135748222531
7648339_n.jpg" width="900" height="400">
</div>
<br/>
<video controls>
<source src="E:\MultiSim 11.0.1 Ultiboard PowerPro + Crack
Keygen_2\MultiSim License Gen Video.mp4">
</video>
</body>
</html>
RJS POLYTECHNIC, BANGALORE-34. Page 32
BWD LAB (15CS22P) 2015 CURRICULLUM

OUTPUT

RJS POLYTECHNIC, BANGALORE-34. Page 33

You might also like