Scribd
Upload
22 views29 pages

Manual

The document describes a program to design a web page using various CSS selector forms. It includes code for an HTML page with multiple paragraphs styled using class selectors for left, center, and right alignment. It also styles a bold element using an ID selector. An external CSS stylesheet is linked that defines the styles for each selector, including properties for text alignment, color, font, size, and other text decorations. The goal is to demonstrate styling elements using different CSS selector forms.

Uploaded by

Vishal Shetty
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views29 pages

Manual

The document describes a program to design a web page using various CSS selector forms. It includes code for an HTML page with multiple paragraphs styled using class selectors for left, center, and right alignment. It also styles a bold element using an ID selector. An external CSS stylesheet is linked that defines the styles for each selector, including properties for text alignment, color, font, size, and other text decorations. The goal is to demonstrate styling elements using different CSS selector forms.

Uploaded by

Vishal Shetty
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 29

WEB DESIGN TECHNOLOGIES 22CSE351

Program no:1
Title: LOGIN PAGE
Aim: To develop login page that allows users to enter their credentials to
access a secure area.

Program:
<head>
<title>login page</title>
</head>
<center>
<body bgcolor="cyan">
<p>
<form>
<strong><h1> LOGIN PAGE </h1></strong>
<br />
<table align="center">
<tr>
<th>User name</th>
<th><input type="text" ></th>
</tr>
<tr></tr>
<tr></tr>
<tr>
<th>Password</th>
<th><input type="password"></th></tr>
<tr>
<th>Email</th>
<th><input type="email"></th>
</tr></table><br />
&nbsp; &nbsp; &nbsp;
<input type="submit" value="submit" />
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
<input type="reset" value="reset" />
</form>
</body>
</center>
</html>

Page | 1
WEB DESIGN TECHNOLOGIES 22CSE351

OUTPUT SCREENSHOT:

Page | 2
WEB DESIGN TECHNOLOGIES 22CSE351
Program no:2
Title: DESIGN CLASS TIMETABLE
Aim: Design a class timetable using the colspan and rowspan attributes
in HTML

Program:
<!DOCTYPE html>
<html>
<head>
<title>Class Time Table</title>
</head>
<body>
<B><center><h3>
NEW HORIZON COLLGE OF ENGINEERING<br /></center></b></h3>
<table border="2" width="75%" cellspacing="2" cellpadding="25"
align=centerbgcolor="teal"><h3>
<caption align=left>Class: VII SEM </caption></h3>
<thead>
<tr>
<th></th>
<th>9.00-10.00</th>
<th>10.00-11.00</th>
<th>11.00-11.10</th>
<th>11.10-12.10</th>
<th>12.10-1.10</th>
<th>1.10-1.50</th>
<th>1.50-2.50</th>
<th>2.50-3.50</th>
<th>3.50-4.50</th>
</tr>
</thead>
<tbody>
<tr>
<tr><th>Mon</th>
<td>GE</td>
<td>ST</td>
<td rowspan="2" bgcolor="pink">Tea </td>
<td>MAD</td>
<td>WT</td>

Page | 3
WEB DESIGN TECHNOLOGIES 22CSE351
<td rowspan="6" bgcolor="maroon">Lunch break</td>
<td>ST</td>
<td>WT</td>
<td>mini</td>
</tr>
<tr><th>TUE</th>
<td>WT</td>
<td>GE</td>
<td>WT</td>
<td>WT</td>
<td>GE</td>
<td>PE</td>
<td>mini</td>
<tr>
<th>Wed</th>
<td COLSPAN =3 bgcolor="yellow"><center>WT/NW LAB BATCH1/2 </td>
<td>MAD</td>
<td>PE</td>
<td>SMS</td>
<td>ST</td>
<td>mini</td>
</tr>
<tr>
<tr>
<th>Thur</th>
<td>GE</td>
<td>MAD</td>
<td rowspan="2" bgcolor="pink">Break</td>
<td>ST</td>
<td>MAD</td>
<td COLSPAN =3 bgcolor="yellow"><center>WT/NW LAB BATCH1/2 </td>
</tr>
<tr>
<th>Friday</th>
<td>PE</td>
<td>MAD</td>
<td>PE</td>
<td>PE</td>
<td>GE</td>
<td>PE</td>
<td>mini</td>
</tr>

Page | 4
WEB DESIGN TECHNOLOGIES 22CSE351
</tbody>
</table>
</body>
</html>

OUTPUT SCREENSHOT:

Program no:3

Page | 5
WEB DESIGN TECHNOLOGIES 22CSE351
Title: HTML FORMS
Aim: Design a user form that includes at least six different types of
controls:

Program:
<!DOCTYPE html>
<html>
<head>
<title>User Form </title>
</head>
<body bgcolor="lightblue" text="maroon" style="font-size:15pt;font-family:Garamond">
<h1><big><big><marquee direction="right" behavior="alternate"> USER ENTRY
FORM</marquee></big></big></h1>
<form name=form1>
<table name=tab cellspacing=40pt>
<tr><tdalign="left"><h2>Enter your Name:</h2></td><td align="right">
<input type="text" name="t1" maxlength="18" size=18 />
<tr><tdalign="left"><h2>Enter your Age:</h2></td><td align="right">
<input type="text" name="t2" maxlength="10" size=18 />
<tr><tdalign="left"><h2>Enter your Password :</h2></td><td align="right">
<input type="password" name="p1" size="18">
<tr><tdalign="left"><h2>Enter your Address :</h2></td><td align="right">
<textarea name="ta" rows="5" cols="18"></textarea>
<tr><tdalign="left"><h2>Enter Pincode :</h2></td><td align="right">
<input type="number" name="n1" />
<tr><tdalign="left"><h2>Enter your Email Id :</h2></td><td align="right">
<input type="email" name="e1" />
<tr><tdalign="left"><h2>Gender :</h2></td><td align="left">
<input type="radio" name="r1" value="female" />Female<br />
<input type="radio" name="r1" value="male" />Male</td>
<tr><tdalign="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="c1" value=c++>C++<br>
<input type=checkbox name="c1" value=vb>VB<br>
<input type=checkbox name="c1" value=java>JAVA<br>
<input type=checkbox name="c1" value=asp>ASP<br>
<input type=checkbox name="c1" value=others>OTHERS<br></td>
</table><center>
<input type=submit value=" Submit " >

Page | 6
WEB DESIGN TECHNOLOGIES 22CSE351
<input type=reset value=" Reset " >
</form></body>
</html>

OUTPUT SCREENSHOT:

Program no:4

Page | 7
WEB DESIGN TECHNOLOGIES 22CSE351
Title: WEB PAGE WITH CSS TO STYLE LISTS AND TABLES
Aim: Design a web page with CSS to style lists and tables

Program:
LISTS
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Example of unordered lists:</p>


<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

Page | 8
WEB DESIGN TECHNOLOGIES 22CSE351

<p>Example of ordered lists:</p>


<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

</body>
</html>

OUTPUT SCREENSHOT:

Table

Page | 9
WEB DESIGN TECHNOLOGIES 22CSE351
<html>
<head>
<title>tables</title>
<style type="text/css">
table
{
border-width:thick; border-top-color:red; border-left-color:orange;
border-bottom-color:violet; border-right-color:green; border-top-style:dashed;
border-bottom-style:double; border-right-style:dotted; margin-left:10pt;
margin-top:10pt; }
</style>
</head>
<body>
<center>
<table border="border">
<caption >Beverages</caption>
<tr bgcolor="pink">
<th></th>
<th>Apple</th>
<th>Orange</th>
<th>Lemon</th>
</tr>
<tr><thbgcolor="orange">Breakfast</th>
<tdalign="center" bgcolor="blue">Yes</td>
<tdalign="center">No</td>
<tdalign="center">No</td>
</tr>
<tr>
<thbgcolor="green">Lunch</th>
<tdalign="center">No</td>
<tdalign="center">No</td>
<tdalign="center" bgcolor="blue">Yes</td>
</tr>
</table>
</center>
</body>
</html>

OUTPUT SCREENSHOT:

Page | 10
WEB DESIGN TECHNOLOGIES 22CSE351

Page | 11
WEB DESIGN TECHNOLOGIES 22CSE351
Program no:5
Title: WEB PAGE USING CSS TO SET BACKGROUND IMAGES

Aim: Design a web page using CSS to set background images for the
entire page and individual elements, while controlling the repetition of
the image using the background-repeat property, which can create an
engaging and visually appealing design.

Program:
<html>
<head>
<style type="text/css">
h2 { background-image:url('nhce.png'); text-align:center; color:red; }
body { background-image:url('html.gif');
background-position:center top;
background-attachment:fixed;
background-color:pink;
}
</style>
</head>
<body>
<br /><br /><br /><br /><h2><pre>
Setting Background Image For Single Element on Page
This is the heading element with
nhce logo as background</pre><br /><br /><br /><br /></h2>
</body>
</html>

Page | 12
WEB DESIGN TECHNOLOGIES 22CSE351

OUTPUT SCREENSHOT:

Page | 13
WEB DESIGN TECHNOLOGIES 22CSE351
Control the repetition of the image with the background-repeat property background-
repeat: repeat y; added to the previous program.

Page | 14
WEB DESIGN TECHNOLOGIES 22CSE351

Program no:6
Title: SELECTOR FORMS

Aim: Design a web page using various selector forms with the assistance
of CSS.

Program:
<html>
<head>
<link rel="stylesheet" type="text/css" href="fontstyle.css">
</head>
<body bgcolor="powderblue">
<p>This Paragraph is a displayed with default setting and is not having any style</p>
<p class="left">This is a left aligned para with red colored text in the large stencil font
family with 30
px from left side </p>
<b>This is normal Bold</b>
<pre>
</pre>
<p class="center">This Paragraph is aligned in center with teal colored underlined
uppercase text
which is having 20px word spacing and 4 px character spacing</p>
<p class="right">This Paragraph is aligned right with green colored overlined italic text in
the Tahoma
font with 15 pt font size</p>
<br />
<b id="headline">This Bold Text is Styled </b>
</html>

fontstyle.css
p.left {
text-align:left;
color:red;
font-family:stencil;
font-size:large;
text-indent:30px;
}
p.center {

Page | 15
WEB DESIGN TECHNOLOGIES 22CSE351
text-align:center;
color:blue;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:4px;
word-spacing:40px;
font-size:larger;
}
p.right {
text-align:right;
color:green;
font-family:Tahoma;
font-size:15pt;
text-decoration:overline;
font-style:italic; }
b#headline{ color:orange;
font-size:42px;
font-family:arial;
text-decoration:underline;
}
OUTPUT SCREENSHOT:

Page | 16
WEB DESIGN TECHNOLOGIES 22CSE351
Program no:7
TITLE: HTML PAGE WITH A DROPDOWN MENU
Aim: Create a HTML page with a dropdown menu featuring a list of five
countries and dynamically displaying their corresponding capitals
Program:
<head>
<script>
function capitals(c)
{
var selected=c.options[c.selectedIndex].value;
document.getElementById("cap").innerHTML=selected;
}
</script>
<style type="text/css">
select{
color:navy;
font-family:CASTELLAR;
font-size:30;
background-color:#ffffce;
text-align:center;
}
marquee{font-size:35;
color:tomato;
}
</style>
<title>Select here</title>
</head>
<body bgcolor="teal" background="globe.jpg"><center>
<marquee> Select the country name to know its capital</marquee>
<form action=" ">
<select name="countries" onchange="capitals(this);">
<option value="capital of India is NEWDELHI">INDIA</option>
<option value="capital of france is PARIS">FRANCE</option>
<option value="Wellington"> NEW ZEALAND </option>
<option value="OTTAWA "> CANADA </option>
<option value="ATHENS">GREECE </option>
<option value="MADRID"> SPAIN </option>
</select>
<h1 style="color:aqua;font-family:'FELIX TITLING';font-size:50;" id="cap" type="text"
/></h1>

Page | 17
WEB DESIGN TECHNOLOGIES 22CSE351
</form>
</body>
</html>

OUTPUT SCREENSHOT:

Page | 18
WEB DESIGN TECHNOLOGIES 22CSE351
Program no:8
TITLE: XHTML DOCUMENT WITH THREE STACKED PARAGRAPHS
Aim: Create a XHTML document with three stacked paragraphs that
smoothly elevate to the top for full visibility when the cursor hovers
over any part of a paragraph.
Program:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Program 3</title>
<script type="text/javascript">
var topL="p3";
function mover(id)
{
var oldtop = document.getElementById(topL);
var newtop = document.getElementById(id);
oldtop.style.zIndex=0;
newtop.style.zIndex=10;
topL=id;
}
</script>

<style type="text/css">
.para1 { background-color: red; z-index: 0 ; position: absolute ; left: 50px;
top: 50px; width: 400px; }
.para2 { background-color: blue; z-index: 0; position: absolute; left: 100px;
top: 100px; width: 400px; }
.para3 { background-color: green; z-index: 0; position: absolute; left: 150px;
top: 150px; width: 400px; }
</style>

</head>
<body>
<p class = "para1" id="p1" onmouseover="mover('p1')" > Frame One
<br/><br/><br/><br/><br/></p>
<p class = "para2" id="p2" onmouseover="mover('p2')" >Frame Two<br/>
<br/><br/><br/><br/></p>

Page | 19
WEB DESIGN TECHNOLOGIES 22CSE351
<p class = "para3" id="p3" onmouseover="mover('p3')" > Frame Three<br/>
<br/><br/><br/><br/></p>
</body>
</html>

OUTPUT SCREENSHOT:

Page | 20
WEB DESIGN TECHNOLOGIES 22CSE351
Program no:9
TITLE: XHTML DOCUMENT ENHANCED WITH JAVASCRIPT
Aim: Create a XHTML document enhanced with JavaScript to manage
three short text paragraphs that gracefully return to their original
location when moved, rather than being sent to the bottom using the z-
index property.
Program:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Program 3</title>
<script type="text/javascript">
var topL="p3";
function mover(id)
{
var oldtop = document.getElementById(topL);
var newtop = document.getElementById(id);
oldtop.style.zIndex=0;
newtop.style.zIndex=10;
topL=id;
}
function reset(id)
{
var newtop = document.getElementById(id);
newtop.style.zIndex=0;
}
</script>

<style type="text/css">
.para1 { background-color: red; z-index: 0 ; position: absolute ; left: 50px;
top: 50px; width: 400px; }
.para2 { background-color: blue; z-index: 0; position: absolute; left: 100px;
top: 100px; width: 400px; }
.para3 { background-color: green; z-index: 0; position: absolute; left: 150px;
top: 150px; width: 400px; }
</style>
</head>

Page | 21
WEB DESIGN TECHNOLOGIES 22CSE351
<body>
<p class = "para1" id="p1" onmouseover="mover('p1')"
onmouseout="reset('p1')" > Frame One <br/><br/><br/><br/><br/></p>
<p class = "para2" id="p2" onmouseover="mover('p2')"
onmouseout="reset('p2')">Frame Two<br/><br/><br/><br/><br/></p>
<p class = "para3" id="p3" onmouseover="mover('p3')"
onmouseout="reset('p3')" >Frame Three<br/><br/><br/><br/><br/></p>
</body>
</html>

OUTPUT SCREENSHOT:

Page | 22
WEB DESIGN TECHNOLOGIES 22CSE351
Program no:10
TITLE: JAVASCRIPT CODE TO ARRANGE NUMBERS
Aim: Create a JavaScript code that generates an HTML page capable of
taking a set of integer numbers and arranging them in descending order
Program:
<html>
<head>
<title>JS Sort Numbers</title>
</head>
<body bgcolor="pink">
<center>
<h2>JavaScript Array Sort</h2>
<p>Click the button to sort the array.</p>
<button style="bgcolor:"red"; onclick="Descending()">Descending Order</button>
<button onclick="Ascending()"`>Ascending Order</button>
<p id="demo"></p>
<script type = "text/javascript">
var points = [90, 80, 60, 70, 20, 40, 50, 100, 10, 30];
document.getElementById("demo").innerHTML = points.join(", ");
function Descending()
{
points.sort(function(a, b){return b - a});
document.getElementById("demo").innerHTML = points.join(", ");
}

function Ascending()
{
points.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = points.join(", ");
}
</script>
</center>
</body>
</html>

Page | 23
WEB DESIGN TECHNOLOGIES 22CSE351

OUTPUT SCREENSHOT:

Page | 24
WEB DESIGN TECHNOLOGIES 22CSE351

Program no:11
TITLE: XML DOCUMENT TO STORE AIRLINE INFORMATION
Aim: Create an XML document to store information about an airline
system and then using a CSS style sheet to style and display the data
involved.
Program:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="air.css"?>
<airlineinfo>
<h1>AIRLINE INFORMATION</h1>
<airline1>
<airlinenumber>AIRLINE NUMBER: IG12343A345</airlinenumber>
<airlinename>AIRLINE NAME : INDIGO</airlinename>
<destination>DESTINATION : GOA</destination>
<price>PRICE : 25000INR</price>
<date>DOJ : 02/11/23 </date>
<time> TOJ : 11.00 am </time>
</airline1>
<airline2>
<airlinenumber>AIRLINE NUMBER: JA12343A345</airlinenumber>
<airlinename>AIRLINE NAME : JETAIRWAYS</airlinename>
<destination>DESTINATION : GOA</destination>
<price>PRICE : 25000INR</price>
<date>DOJ : 03/11/23 </date>
<time> TOJ : 12.00 am </time>
</airline2>
<airline3>
<airlinenumber>AIRLINE NUMBER: EH12343A345</airlinenumber>
<airlinename>AIRLINE NAME : ETHIHAD</airlinename>
<destination>DESTINATION : ZURICH</destination>
<price>PRICE : 50000INR</price>
<date>DOJ : 04/11/23 </date>
<time> TOJ : 1.00 am </time>
</airline3>

</airlineinfo>
air.css

Page | 25
WEB DESIGN TECHNOLOGIES 22CSE351
h1{text-align:center;display:block;background:linear-
gradient(#3494e6,#ec6ead,#3a1c71);font-size:35pt;color:#4fff44;}
airlineinfo{background:linear-gradient(#3494e6,#ec6ead,#3a1c71);font-size:35pt;}
airline1{display:block;background-color:pink;color:navy;text-align:left;margin-
left:200pt;margin-right:200pt}
airline2{display:block;background-color:tomato;color:blue;text-align:left;margin-
left:200pt;margin-right:200pt}
airline3{display:block;background-color:#ffffdd;color:maroon;text-align:left;margin-
left:200pt;margin-right:200pt}
airlinenumber,airlinename,destination,price,date,time{display:block;font-size:20pt;font-
family:CASTELLAR}
h1{text-align:center;display:block;background:linear-
gradient(#3494e6,#ec6ead,#3a1c71);font-size:35pt;color:#4fff44;}
airlineinfo{background:linear-gradient(#3494e6,#ec6ead,#3a1c71);font-size:35pt;}
airline1{display:block;background-color:pink;color:navy;text-align:left;margin-
left:200pt;margin-right:200pt}
airline2{display:block;background-color:tomato;color:blue;text-align:left;margin-
left:200pt;margin-right:200pt}
airline3{display:block;background-color:#ffffdd;color:maroon;text-align:left;margin-
left:200pt;margin-right:200pt}
airlinenumber,airlinename,destination,price,date,time{display:block;font-size:20pt;font-
family:CASTELLAR}

OUTPUT SCREENSHOT:

Page | 26
WEB DESIGN TECHNOLOGIES 22CSE351

Program no:12
TITLE: XML DOCUMENT TO STORE STUDENT INFORMATION
Aim: Create an XML document to store information about students at
NHCE (New Horizon College of Engineering) and using a CSS stylesheet to
display the data: USN (University Serial Number), Name, Name of the
College, Branch, Year of Joining, and Email ID.
Program:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="prg4a.css"?>
<student>
<stud-info>Student Information</stud-info>
<stud1>
<usn>USN: 1NH10CSS058</usn>
<name>Name: MUKUL PRASAD</name>
<noc>College: NEW HORIZON COLLEGE OF ENGINEERING</noc>
<branch>Branch: INFORMATION SCIENCE AND ENGINEERING</branch>
<yoj>Year: 2012</yoj>
<eid>Email:[email protected]</eid>
</stud1><br/>
<stud2>
<usn>USN: 1NH10CS098</usn>
<name>Name: SUNANDINI KUMARI</name>
<noc>College: NEW HORIZON COLLEGE OF ENGINEERING</noc>
<branch>Branch: COMPUTER SCIENCE AND ENGINEERING</branch>
<yoj>Year: 2012</yoj>
<eid>Email: [email protected]</eid>
</stud2><br/>
<stud3>
<usn>USN: 1NH11IS124</usn>
<name>Name: VISHWA LALIT</name>
<noc>College: NEW HORIZON COLLEGE OF ENGINEERING</noc>
<branch>Branch: INFORMATION SCIENCE AND ENGINEERING</branch>
<yoj>Year: 2012</yoj>
<eid>Email:[email protected]</eid>
</stud3>
</student>

Page | 27
WEB DESIGN TECHNOLOGIES 22CSE351

Prg4a.css

stud-info { display:block; color:blue; font-style:italic; font-size:200%; }


student { display:block; font-size:100%; }
stud1 { display:block; color:blue;background-color:pink; }
stud2 { display:block; color:red; }
stud3 { display:block; color:green; }
usn,name,noc,branch,yoj,eid { display:block;}

OUTPUT SCREENSHOT:

Page | 28
WEB DESIGN TECHNOLOGIES 22CSE351
SAMPLE VIVA QUESTIONS
1. What is the purpose of the `<DOCTYPE>` declaration in HTML?
2. Explain the difference between `<div>` and `<span>` in HTML.
3. How do you include external stylesheets in HTML?
4. What is the CSS box model, and how does it work?
5. What is the difference between `let`, `const`, and `var` in JavaScript?
6. Explain the concept of closures in JavaScript.
7. How do you handle asynchronous operations in JavaScript?
8. What is the difference between `==` and `===` in JavaScript?

Page | 29

You might also like