Basic Web Design Lab Manual

BWD LAB (15CS22P) 2015 CURRICULLUM
BASIC WEB DESIGN LAB MANUAL

COURSE CODE: 15CS22P
FOR 2nd Sem CS & E

(2017-18)
BY
Mr. NAGABHUSHANA V L
LECTURER
COMPUTER SCIENCE & ENGINEERING
RJS POLYTECHNIC
BANGALORE-34.
RJS POLYTECHNIC, BANGALORE-34. Page 1

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.


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


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


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>

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

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>

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>


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>


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>
</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>
THIRD PAGE
<html>
<head>
</head>
<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>
</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

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


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>
<center>
<a href="#lession 1">Point 1</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>
<FONT FACE="Footlight MT" COLOR="red" SIZE=5>
<FONT FACE="Engravers MT "COLOR="orange" SIZE=5>
<FONT FACE="MONOTYPE CORSIVA" COLOR="blue" SIZE=5>

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

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>
<marquee> <font color="red">These license terms are an agreement between
Microsoft Corporation. </marquee>
</body>
</html>

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

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>

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>


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>

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


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


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

<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">
</body>
</html>
<frame>
<frameset cols="50%,50%">
<frame src="RESUME.html">
<frameset rows="50%,50%">
<frame src="audio.html">
<frame src="video.html">
</frame>


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>
</video>
</body>
</html>

Basic Web Design Lab Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic Web Design Lab Manual

Uploaded by

Copyright:

Available Formats

BWD LAB (15CS22P) 2015 CURRICULLUM

BASIC WEB DESIGN LAB MANUAL

FOR 2nd Sem CS & E

RJS POLYTECHNIC, BANGALORE-34. Page 1

RJS POLYTECHNIC, BANGALORE-34. Page 2

RJS POLYTECHNIC, BANGALORE-34. Page 3

RJS POLYTECHNIC, BANGALORE-34. Page 4

RJS POLYTECHNIC, BANGALORE-34. Page 5

RJS POLYTECHNIC, BANGALORE-34. Page 6

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

RJS POLYTECHNIC, BANGALORE-34. Page 7

RJS POLYTECHNIC, BANGALORE-34. Page 8

RJS POLYTECHNIC, BANGALORE-34. Page 9

RJS POLYTECHNIC, BANGALORE-34. Page 10

RJS POLYTECHNIC, BANGALORE-34. Page 11

RJS POLYTECHNIC, BANGALORE-34. Page 12

RJS POLYTECHNIC, BANGALORE-34. Page 14

RJS POLYTECHNIC, BANGALORE-34. Page 15

RJS POLYTECHNIC, BANGALORE-34. Page 16

<p> this is an starting</p>

RJS POLYTECHNIC, BANGALORE-34. Page 18

RJS POLYTECHNIC, BANGALORE-34. Page 19

RJS POLYTECHNIC, BANGALORE-34. Page 20

RJS POLYTECHNIC, BANGALORE-34. Page 21

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

RJS POLYTECHNIC, BANGALORE-34. Page 22

RJS POLYTECHNIC, BANGALORE-34. Page 23

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

RJS POLYTECHNIC, BANGALORE-34. Page 24

RJS POLYTECHNIC, BANGALORE-34. Page 26

RJS POLYTECHNIC, BANGALORE-34. Page 27

RJS POLYTECHNIC, BANGALORE-34. Page 28

RJS POLYTECHNIC, BANGALORE-34. Page 29

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

RJS POLYTECHNIC, BANGALORE-34. Page 30

RJS POLYTECHNIC, BANGALORE-34. Page 31

RJS POLYTECHNIC, BANGALORE-34. Page 32

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

RJS POLYTECHNIC, BANGALORE-34. Page 34

You might also like