lOMoARcPSD|61749565

WD Lab Manual

web designing (GL Bajaj Institute of Technology and Management)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Vishal Gupta (vishal_gupta@[Link])
 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Lab File

Web Designing
Workshop (BCS-353)
Submitted By:
Student Name: XYZ
University Roll NO.: 112233
Branch: AIML/AI-DS/CSE-AI/CSE-AIML
Section:
Group:

Submitted To:
Mr. Sunny Gupta

G. L. BAJAJ INSTITUTE OF TECHNOLOGY AND MANAGEMENT

Greater Noida

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

List of Experiments
Sr. No. Experiments
1. Design the following static web pages required for an online book store web
site.
HOME PAGE: The static home page must contain three frames.
2. LOGINPAGE:
3. CATOLOGUE PAGE: The catalogue page should contain the details of all
the books available in the website in a table. The details should contain the
following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.
4. CARTPAGE: The cart page contains the details about the books which are
added to the cart.
5. REGISTRATION PAGE : Create a“ registration form“ with the following
fields
1)Name (Text field)
2)Password (password field)
3) E-mailid(text field)
4) Phone Number(text field)
5) Sex(radio button)
6) Date of birth(3 select boxes)
7) Languages known(checkboxes–English, Telugu, Hindi, Tamil)
8) Address(text area)
6. Js VALIDATION: Write JavaScript to validate the following fields of the
above registration page.
1. Name (Name should contains alphabets and the length should not be less
than 6 characters).
2. Password (Password should not be less than 6 characters length).
7. Js VALIDATION:
3. E-mailid (should not contain any invalid and must follow the standard
pattern(name@[Link])
4. Phone Number(Phone number should contain 10 digits only).
8. CSS: Design a web page using CSS(Cascading Style Sheets) which includes
the following:
1) Use different font, styles:
In the style definition you define how each selector should work(font, color
etc.). Then, in the body of your pages, you refer to these selectors to activate
the styles.
2) Set a background image for both the page and single elements on the page.
9. CSS:
1) Control the repetition of the image with the background-repeat property.
2) Define styles for links as

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

A:link
A:visited
A:active
A:hover
10. Consider a small topic of your choice on which you can develop static
Webpages and try to implement all topics of html, CSS and Js within the
topic.
Choose any one topic.
1. Your Own Portfolio
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Introduction
Web design is the creation of websites and pages to reflect a company’s brand and
information and ensure a user-friendly experience. Appearance and design are incorporated
as vital elements whether you’re designing a website, mobile app or maintaining content on a
web page. Gaining web design skills can help you in applying for roles where your creativity
could help a business improve their brand, their message and their bottom line.
Web design identifies the goals of a website or webpage and promotes accessibility for all
potential users. This process involves organizing content and images across a series of pages
and integrating applications and other interactive elements.
The professionals who perform this process are called web designers, and their job includes
the following duties:
● Selecting easy-to-read fonts
● Choosing attractive color schemes that also enable easy-to-read fonts
● Implementing a brand's identity into the colors, fonts and layout
● Creating a map of the website's structure to ensure intuitive navigation
● Placing images, logos, text, videos, applications and other elements
● Using coding languages, such as HTML and CSS, to create layouts and to style pages
● Making optimized versions of websites and pages both for desktop and mobile
viewing
There are two common web design methods: adaptive and responsive design. In adaptive
design, the website content is created using standard screen sizes as the frame for the layout.
In responsive design, content moves dynamically according to the screen size. Web designers
use the various steps of the general web design process to employ these design methods
depending on their client or employer's preferences and goals for the site.

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Experiment-1
Aim: Design the following static web pages required for online book store.
Home page:- the static home page must contains three pages
Top frame:- logo and college name and links to homepage, login page, registration page and
catalogue page
Left frame:- at least four links for navigation which will display the catalogue of Respective
links
Right frame:- the pages to links in the left frame must be loaded here initially it Contains the
description of the website.
PROGRAM:
[Link]:
<frameset rows="40%,*">
<frame src="[Link]" noresize scrolling="NO" name="topframe">
<frameset cols="15%,*">
<frame src="[Link]" noresize scrolling="NO" name="leftframe">
<frame src="[Link]" noresize name="rightframe" scrolling="auto">
</frameset>
</frameset>
[Link]:
<html>
<head>
<title>Top Frame</title>
</head>
<body bgcolor="Brown ">
<img src="images/[Link]" width="125" height="115" align="left">
<img src="images/[Link]" width="125" height="115" align="right">
<center>
<marquee bgcolor="yellow" width="650" behavior="alternate">
<font face="Brush Script MT" size="8" color="green"><b><i>Online Book Store</i></b>
</font>
</marquee> <br>
<font face="Brush Script" size="6" color="white"><b>Created & Maintained By
MRCET</b></font>
</center>
<br>
<table width="100%" height="50%" cellspacing=10>
<tr align="center">
<td> <a href="[Link]" target="_parent"><font face="Brush Script" size="6"
color="navy">HOME </a> </td>
<td> <a href="[Link]" target="rightframe"><font face="Brush Script" size="6"
color="navy">LOGIN</a> </td>
<td> <a href="[Link]" target="rightframe"> <font face="Brush Script"

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

size="6" color="navy">REGISTER </a> </td>

<td> <a href="[Link]" target="rightframe"> <font face="Brush Script"
size="6" color="navy">CATALOGUE</a> </td>
</tr>
</table>
</body>
</html>
[Link]:
<html>
<body align="center" bgcolor="White"> <br>
<a href="[Link]" target="rightframe"><font size="6">CSE</font></a><br><br>
<a href="[Link]" target="rightframe"><font size="6">ECE</font></a><br><br>
<a href="[Link]" target="rightframe"><font size="6">EEE</font></a><br><br>
<a href="[Link]" target="rightframe"><font size="6">MECH</font></a><br>
</body>
</html>
[Link]:
<html>
<body bgcolor="orange">
<center>
<img src="images/[Link]" height="170"><br>
<font face="Brush Script MT" size="5" color="blue">
<h1><b>Welcome to the Online Book Store!!!</b></font><br />
<font face="Brush Script MT" size="5" color="red">
<h2><b> "A Huge Collection Of Engineering E-Books"</b></h2></font>
</center>
</body>
</html>

[Link]:
<html>
<head><title>CSE</title></head>
<body bgcolor="cyan">
<center><font color="blue"><h1>Computer Science and Engineering</h1></font></center>
<br>
<table align="center">
<tr>
<td>Text Books</td>
<td>
<select >
<option value="select the book" selected>Select the book
<option value="C&Ds">C&Ds
<option value="Ads">Ads
<option value="Java">Java
<option value="Oracle">Oracle
<option value="Ms SQL Server">Ms SQL Server
<option value="MySql">MySql

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

</select>
</td></tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="q"></td>
</tr>
<tr>
<td></td>
<td>
<form method=post action="[Link]">
<input type="submit" value=ok />
</form>
</td>
</tr>
</table>
<center>
<pre> Cost of one book is"500" + shipping "100" </pre>
</center>
</body>
</html>
[Link]:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication Engineering</font></h1>
<h2>
<ul>
<li>Digital Circuits</li> <li>Signals and Systems</li> <li>Digital Communication</li>
</ul>
</h2>
</body>
</html>

[Link]:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Electrical and Electronics Engineering</font></h1>
<h2>
<ul type="square">
<li>Concepts in Electric Circuits</li>
<li>Introduction to Electronic Engineering</li>
<li>Electrical Power</li>
</ul>
</h2>
</body>
</html>
[Link]:
<html>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

<body bgcolor="Plum">
<h1><font color="blue">Electronics and Communication Engineering</font></h1>
<h2>
<ol type="I">
<li>Theory of Machines</li>
<li>Automation and Robotics</li>
<li>Engineering Fluid Mechanics</li>
</ol>
</h2>
</body>
</html>
Output:-

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Experiment-2
Aim: Design Login Page

Program:
[Link]:
<html>
<body bg color="pink">
<basefont face="Cambria" size="4"> <br>
<center>
<img src="images/[Link]" width="385" height="135" /><br />
<font face="Brush Script MT" size="7" color="purple">
<b>Enter Login Details:</b>
</font>
</center>
<form name="f1" method="post" action="[Link]">
<table align="center" width="100" height="150" cellspacing=”15”>
<tr><td><b>Login ID:</b></td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td><input type="password" name="t2"></td>
</tr>
<tr align="center">
<td><input type="submit" name="b1" value="Submit"></td>
<td><input type="reset" name="b2" value="Reset"></td>
</tr>
</table> </form> </basefont> </body> </html>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Output:-

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Experiment-3
Aim: CATOLOGUE PAGE: The catalogue page should contain the details of all the books
available in the website in a table. The details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.

Program:
[Link]:
<html>
<head>
<title> Catalogue </title>
</head>
<body bgcolor="pink">
<form action="[Link]">
<table border="1" width="100%">
<tr>
<td>
<img src="images/[Link]" width=100 height=100/>
</td>
<td> Book: Web Technologies <br> Author: Uttam K. Roy <br> Publication:Oxford
University Press</td> <td>531 &nbsp;&nbsp;&nbsp;</td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
<tr>
<td> <img src="images/[Link]" width=100 height=100/></td>
<td> Book: PHP & MySQL Web Development <br> Author:Luke Welling & Laura
Thompson <br> Publication:PEARSON</td> <td> 898 &nbsp;&nbsp;&nbsp; </td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
</table> </form>
</body> </html>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Output:-

WebSit
Logo
e Name
Home Login Registration Catalogue Cart
Book:XMLBible
CS Author : Winston
Publication:Wiel $40.5
E y

EC
Book :AI $63
E Author:[Link]
l
EEE Publication:Princetonhall

CIVIL
$35.5
Book : Java 2 Author:Watson
Publication:BPBpublications

$50
Book : HTML in 24 hours
Author : Sam Peter
Publication:Sampublication

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Experiment-5
Aim: REGISTRATION PAGE : Create a“ registration form“ with the following fields
1)Name (Text field)
2) Password (password field)
3) E-mailid(text field)
4) Phone Number(text field)
5) Sex(radio button)
6) Date of birth(3 select boxes)
7) Languages known(checkboxes–English, Telugu, Hindi, Tamil)
8) Address(text area)

Program:
[Link]:
<html>
<head><title>Registration Form</title></head>
<body bgcolor="#E4F0F8">
<center><font color="blue" size="6" face="arial">Registration Form</font></center><br />
<form action="[Link]">
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' id='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='lastname' /><br /><br />
EmailAddress<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='email' /><br />
<font color="red">(one e-mail id only):</font> &nbsp;&nbsp;&nbsp;
<font color="redblue">e.g. smith@[Link]</font><br /><br/>
Password(minimum 6 characters)<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='password' id='pass'><br /><br/>
Address<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='mobileno' /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit' />
<input type='Reset' value='reset' />
</form> </body> </html>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Output:-

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Experiment-6
Aim: Js VALIDATION: Write JavaScript to validate the following fields of the above
registration page.
1. Name (Name should contains alphabets and the length should not be less than 6
characters).
2. Password (Password should not be less than 6 characters length).
Program:After clicking OK button the page is redirected to [Link]

<html>
<head><title>Registration Form Validation</title></head>
<body bgcolor="#E4F0F8">
<script type='text/javascript'>
function validateform()
{
var fname=[Link];
var lname=[Link];
var mail=[Link];
var password=[Link];

if (fname==null || fname=="")
{
alert("Name can't be blank");
return false;
}
else if([Link]<6)
{
alert("firstname must be at least 6 characters long.");
return false;
}
else if([Link]<6)
{
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
<center><font color="blue" size="6" face="arial">Registration Form</font></center><br />
<form name="myform" method="post" action="[Link]" onsubmit='return validateform()'>
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' name='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font> &nbsp;&nbsp;&nbsp;
<input type='text' name='lastname' /><br /><br />
Email Address<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' name='email' /><br />
<font color="red">(one e-mail id only):</font> &nbsp;&nbsp;&nbsp;
<font color="redblue">e.g. smith@[Link]</font><br /><br/>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Password(minimum 6 characters)<font color="red">* </font> &nbsp;&nbsp;&nbsp;

<input type='password' name='pass'><br /><br/>
Address<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='mobileno' /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit'/>
<input type='Reset' value='reset' />
</form>
</body>
</html>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Output:-

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Experiment-7
Aim: Js VALIDATION:
3. E-mailid (should not contain any invalid and must follow the standard
pattern(name@[Link])
4. Phone Number(Phone number should contain 10 digits only).

Program: After clicking OK button the page is redirected to [Link]

<html>
<head><title>Registration Form Validation</title></head>
<body bgcolor="#E4F0F8">
<script type='text/javascript'>
function validateform()
{
var fname=[Link];
var lname=[Link];
var mail=[Link];
var password=[Link];
var atposition=[Link]("@");
var dotposition=[Link](".");
if (fname==null || fname=="")
{
alert("Name can't be blank");
return false;
}
else if([Link]<6)
{
alert("firstname must be at least 6 characters long.");
return false;
}
else if([Link]<6)
{
alert("Password must be at least 6 characters long.");

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

return false;
}
var num=[Link];
if (isNaN(num)){
[Link]("numloc").innerHTML="Enter Numeric value only";
return false;
} else if (num==null || num=="")
{
alert("Number must be of 10 digits");
return false;
} else if ([Link] !=10)
{
alert("Number must be of 10 digits");
return false;
}
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=[Link]){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}

}
</script>
<center><font color="blue" size="6" face="arial">Registration Form</font></center><br />
<form name="myform" method="post" action="[Link]" onsubmit='return validateform()'>
First Name(Minimum 6 characters)<font color="red">* </font>
<input type='text' name='firstname' /><br /><br />
Last Name<font color="red"><font color="red">* </font> </font> &nbsp;&nbsp;&nbsp;
<input type='text' name='lastname' /><br /><br />

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Email Address<font color="red">* </font> &nbsp;&nbsp;&nbsp;

<input type='text' name='email' /><br />
<font color="red">(one e-mail id only):</font> &nbsp;&nbsp;&nbsp;
<font color="redblue">e.g. smith@[Link]</font><br /><br/>
Password(minimum 6 characters)<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='password' name='pass'><br /><br/>
Address<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<textarea rows="2" cols="20" id='addr' /></textarea> <br /> <br/>
Mobile No<font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' name='num' /><br />
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female<br/><br />
<input type='Submit' value='submit'/>
<input type='Reset' value='reset' />
</form>
</body>
</html>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Output:-

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Experiment-8
Aim: CSS: Design a web page using CSS(Cascading Style Sheets) which includes the
following:
1) Use different font, styles: In the style definition you define how each selector should
work(font, color etc.). Then, in the body of your pages, you refer to these selectors to activate
the styles.
2) Set a background image for both the page and single elements on the page.

Program:
[Link]
[Link]
{
text-align:left;
color:blue;
font-family:Cambria;
font-size:large;
text-indent:20px;
}
[Link]
{
text-align:center;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:-3px;
word-spacing:20px;
font-size:larger;
}
[Link]
{
text-align:right;
color:red;
font-family:Tahoma;
font-size:15pt;
text-decoration:overline;
font-style:italic;
}
b#headline
{
color:orange;
font-size:22px;
font-family:arial;
text-decoration:underline;
}
[Link]
<html>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

<head>
<style type="text/css">
body
{
background-image:url('images/[Link]');
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
background-color:pink;
}
</style>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body bgcolor="cyan">
<h1 style="color:blue;text-align:center;"> CSS (Inline, Internal and External) </h1>
<p>This Paragraph is a Not Styled</p>
<p class="left">This Paragraph is Styled by class "Left"</p>
<p class="center">This Paragraph is Styled by class "Center"</p>
<p class="right">This Paragraph is Styled by class "Right"</p>
<b>This is normal Bold</b> <br>
<b id="headline">This Bold Text is Styled </b>
<h2><b><a href=" ">This is a link</a></b></h2>
<h3 class="c1">The cursor over this element is plus sign</h3>
<h3 class="c2">The cursor over this element is a pointing hand</h3>
<h3 class="c3">The cursor over this element is a grasping hand</h3>
<h3 class="c4">The cursor over this element is a I bar</h3>
<h3 class="c5">The cursor over this element is a wait</h3>
<h3 class="c6">The cursor over this element is a question mark</h3>
</html>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Output:-

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Experiment-9
Aim: CSS:1) Control the repetition of the image with the background-repeat property.
2) Define styles for links as:- A:link, A:visited, A:active, A:hover
Program:
[Link]
[Link]
{
text-align:left;
color:blue;
font-family:Cambria;
font-size:large;
text-indent:20px;
}
[Link]
{
text-align:center;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:-3px;
word-spacing:20px;
font-size:larger;
}
[Link]
{
text-align:right;
color:red;
font-family:Tahoma;
font-size:15pt;
text-decoration:overline;
font-style:italic;
}
b#headline
{
color:orange;
font-size:22px;
font-family:arial;
text-decoration:underline;
}
[Link]
<html>
<head>
<style type="text/css">
body
{
background-image:url('images/[Link]');

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

background-repeat:repeat;
background-position:center center;
background-attachment:fixed;
background-color:pink;
}
a:link { text-decoration:none;color:orange; }
a:visited { text-decoration:none;color:red; }
a:hover { text-decoration:underline;color:blue; }
a:active { text-decoration:underline;color:purple; }
h3 { color:green; }
.c1{cursor:crosshair}
.c2{cursor:pointer}
.c3{cursor:move}
.c4{cursor:text}
.c5{cursor:wait}
.c6{cursor:help}
</style>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<body bgcolor="cyan">
<h1 style="color:blue;text-align:center;"> CSS (Inline, Internal and External) </h1>
<p>This Paragraph is a Not Styled</p>
<p class="left">This Paragraph is Styled by class "Left"</p>
<p class="center">This Paragraph is Styled by class "Center"</p>
<p class="right">This Paragraph is Styled by class "Right"</p>
<b>This is normal Bold</b> <br>
<b id="headline">This Bold Text is Styled </b>
<h2><b><a href=" ">This is a link</a></b></h2>
<h3 class="c1">The cursor over this element is plus sign</h3>
<h3 class="c2">The cursor over this element is a pointing hand</h3>
<h3 class="c3">The cursor over this element is a grasping hand</h3>
<h3 class="c4">The cursor over this element is a I bar</h3>
<h3 class="c5">The cursor over this element is a wait</h3>
<h3 class="c6">The cursor over this element is a question mark</h3>
</html>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Output:

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

Experiment-10
Aim: Consider a small topic of your choice on which you can develop static Webpages and try to
implementall topics of html, CSS and Js within the topic.
Choose any one topic.
1. Your Own Portfolio
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire

Program: Survey Form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>
Build a Survey Form using HTML and CSS
</title>

<style>

/* Styling the Body element i.e. Color,

Font, Alignment */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}

/* Styling the Form (Color, Padding, Shadow) */

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}

/* Styling form-control Class */

.form-control {
text-align: left;
margin-bottom: 25px;
}

/* Styling form-control Label */

.form-control label {
display: block;
margin-bottom: 10px;
}

/* Styling form-control input,

select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
padding: 10px;
display: block;

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

width: 95%;
}

/* Styling form-control Radio

button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}

/* Styling Button */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>

<body>
<h1>GLBITM Survey Form</h1>

<!-- Create Form -->

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

<form id="form">

<!-- Details -->

<div class="form-control">
<label for="name" id="label-name">
Name
</label>

<!-- Input Type Text -->

<input type="text"
id="name"
placeholder="Enter your name" />
</div>

<div class="form-control">
<label for="email" id="label-email">
Email
</label>

<!-- Input Type Email-->

<input type="email"
id="email"
placeholder="Enter your email" />
</div>

<div class="form-control">
<label for="age" id="label-age">
Age
</label>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

<!-- Input Type Text -->

<input type="text"
id="age"
placeholder="Enter your age" />
</div>

<div class="form-control">
<label for="role" id="label-role">
Which option best describes you?
</label>

<!-- Dropdown options -->

<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">
Professional
</option>
<option value="other">Other</option>
</select>
</div>

<div class="form-control">
<label>
Would you recommend GeeksforGeeks
to a friend?
</label>

<!-- Input Type Radio Button -->

<label for="recommed-1">

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

<input type="radio"
id="recommed-1"
name="recommed">Yes</input>
</label>
<label for="recommed-2">
<input type="radio"
id="recommed-2"
name="recommed">No</input>
</label>
<label for="recommed-3">
<input type="radio"
id="recommed-3"
name="recommed">Maybe</input>
</label>
</div>

<div class="form-control">
<label>Languages and Frameworks known
<small>(Check all that apply)</small>
</label>
<!-- Input Type Checkbox -->
<label for="inp-1">
<input type="checkbox"
name="inp">C</input></label>
<label for="inp-2">
<input type="checkbox"
name="inp">C++</input></label>
<label for="inp-3">
<input type="checkbox"
name="inp">C#</input></label>

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

<label for="inp-4">
<input type="checkbox"
name="inp">Java</input></label>
<label for="inp-5">
<input type="checkbox"
name="inp">Python</input></label>
<label for="inp-6">
<input type="checkbox"
name="inp">JavaScript</input></label>
<label for="inp-7">
<input type="checkbox"
name="inp">React</input></label>
<label for="inp-7">
<input type="checkbox"
name="inp">Angular</input></label>
<label for="inp-7">
<input type="checkbox"
name="inp">Django</input></label>
<label for="inp-7">
<input type="checkbox"
name="inp">Spring</input></label>
</div>

<div class="form-control">
<label for="comment">
Any comments or suggestions
</label>

<!-- multi-line text input control -->

<textarea name="comment" id="comment"

Downloaded by Vishal Gupta (vishal_gupta@[Link])

 lOMoARcPSD|61749565

[Approved by AICTE, Govt. of India & Affiliated to Dr. APJ

GL BAJAJ
Institute of Technology & Management
Abdul Kalam Technical University, Lucknow, U.P., India]
Department of Applied Computational Science & Engineering
Greater Noida

placeholder="Enter your comment here">

</textarea>
</div>

<!-- Multi-line Text Input Control -->

<button type="submit" value="submit">
Submit
</button>
</form>
</body>
</html>
Output:-

Downloaded by Vishal Gupta (vishal_gupta@[Link])