Lab Manual
Submitted By:
Muhammad Waleed Sabir
Roll No:
586403
Class:
BS (Computer Science)
Semester:
6th
Session:
2020 – 2024
Course Title:
Web Design And Development
Punjab College Jaranwala
(Affiliated with)
Government College University Faisalabad
Table of Contents
HTML Introduction: -....................................................................................................................................3
What is HTML?..........................................................................................................................................3
A Simple HTML Document:.......................................................................................................................3
CSS Introduction: -........................................................................................................................................4
What is CSS?.............................................................................................................................................4
Why Use CSS?...........................................................................................................................................4
JavaScript Introduction: -..............................................................................................................................5
JavaScript Can Change HTML Content:.....................................................................................................5
JavaScript Can Hide HTML Elements:........................................................................................................6
JavaScript Can Change HTML Styles (CSS):................................................................................................6
Write html program to create nested list: -..................................................................................................6
Write html program to create form: -...........................................................................................................9
Write a javascript program to validate USER LOGIN page: -.......................................................................10
Create resume using html and css..............................................................................................................12
Create a simple calculator using html and javascript: -...............................................................................17
Create a Login Form: -.................................................................................................................................21
HTML Introduction: -
HTML is the standard markup language for creating Web pages.
What is HTML?
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
A Simple HTML Document:
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Output:
My First Heading
My first paragraph.
Example Explained
• The <!DOCTYPE html> declaration defines that this document is an HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph.
CSS Introduction: -
CSS is the language we use to style a Web page.
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.
CSS Example
body { background-color:
lightblue;
} h1 { color:
white; text-
align: center;
} p { font-family:
verdana;font-size:
20px;
}
output:
JavaScript Introduction: -
JavaScript Can Change HTML Content:
One of many JavaScript HTML methods is getElementById().
The example below "finds" an HTML element (with id="demo"), and changes the
element content (innerHTML) to "Hello JavaScript":
Example
document.getElementById("demo").innerHTML = "Hello JavaScript";
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
Output:
JavaScript Can Hide HTML Elements:
Hiding HTML elements can be done by changing the display style:
Example
document.getElementById("demo").style.display = "none";
JavaScript Can Change HTML Styles (CSS):
Changing the style of an HTML element, is a variant of changing an HTML
attribute:
Example
document.getElementById("demo").style.fontSize = "35px";
Write html program to create nested list: -
<!doctype html>
<html>
<body>
<h2>commonly available fresh vegetable and fruits</h2>
<ul>
<li>some fruits
<ul>
<li>banana</li>
<li>apple</li>
<li>mango</li>
<li>kiwi</li>
</ul>
</li>
</ul>
<ul>
<li>some vagetables
<ul>
<li>onion</li>
<li>leak</li>
<li>carrot</li>
</ul>
</li>
</ul>
</body>
</html>
Write a html program to create frame: -
<!DOCTYPE html>
<html>
<body>
<frameset cols="*,*,*">
<frame src="frame1.html">
<frame src="frame2.html"> <frame
src="frame3.html">
</frameset>
</body>
</html>
Output:
Write html program to create form: -
<form>
<label for="name">Name:</label>
<input type="text" name="name"><br><br>
<label for="sex">Sex:</label>
<input type="radio" name="sex" id="male" value="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">Female</label> <br><br>
<label for="country">Country: </label>
<select name="country" id="country">
<option>Select an option</option>
<option value="nepal">Nepal</option>
<option value="usa">USA</option>
<option value="australia">Australia</option>
</select><br><br>
<label for="message">Message:</label><br>
<textarea name="message" id="message" cols="30" rows="4"></textarea><br><br>
<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Subscribe?</label><br><br>
<input type="submit" value="Submit"> </form>
Output:
Write a javascript program to validate USER LOGIN page: -
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Login Form </title>
</head>
<body>
<div class="login-page">
<div class="form">
<form class="login-form "
action="https://www.instagram.com/codewith_random/" target="_blank">
<h2>SIGN IN TO YOUR ACCOUNT</h2>
<input type="text" required placeholder="Username" id="user" autocomplete="off" />
<input oninput="return formvalid()" type="password" required placeholder="Password"
id="pass"
autocomplete="off" />
<img src="https://cdn2.iconfinder.com/data/icons/basic-ui-interface-v-
2/32/hide-512.png"
onclick="show()" id="showimg">
<span id="vaild-pass"></span>
<button type="submit">SIGN IN</button>
<p class="message"><a href="#">Forgot your password?</a></p>
</form>
</div>
</div>
<script src="index.js"></script>
</body>
</html> script
<link
rel="stylesheet"
href="style.css">
<script src="index.js"></script>
Create resume using html and css.
html
<div id="header"></div>
<div class="left"></div>
<div class="stuff">
<br><br>
<h1>Resume</h1>
<h2>Emily</h2>
<hr />
<br>
<p class="head">Interests</p>
<ul>
<li>Drawing</li>
<li>Photography</li>
<li>Design</li>
<li>Programming</li>
<li>Computer Science</li>
</ul>
<p class="head">Skills</p>
<ul>
<li>Web Design with HTML & CSS</li>
</ul>
<p class="head">Education</p>
<ul>
<a href="http://www.wiltonhighschool.org/pages/Wilton_High_School">
<li>Wilton High School</li>
</a>
<!--Link-->
<a href="https://www.silvermineart.org/">
<li>Silvermine School of Arts</li>
</a>
<li>Codeacademy</li>
</ul>
<p class="head">Experience</p>
<ul>
<li>Student Technology Intern for Wilton School District</li>
<li>Babysitter</li>
</ul>
<p class="head">Extracurriculars</p>
<ul>
<li>Recycling Club</li>
<li>Gardening Club</li>
<li>Book Club</li>
</ul>
</div>
<div class="right"></div>
<div id="footer"> <h2
id="name">Emily</h2></div> css
*{
max-width: 700px; margin:
auto;
/*body { min-width:
500px;
}*/
div { border-radius: 5px;
}
#header { height: 40px;
width: 100%; background-
color: #ffcccc; position: fixed;
z-index: 1;
#title { margin-left:
3%;
#footer { height: 50px; width:
100%; background-color:
#ffcccc; clear: both; position:
relative;
.left {
height: 1000px; width: 45px;
background-color: #e0eeee;
float: left; position: fixed;
.right { height: 1000px; width: 45px; background-color: #e0eeee;
float: right; position:
inherit;
}
.stuff { display: inline-
block; margin-top: 6px;
margin-left: 55px;
width: 75%; height:
1000px;
p,
li {
font-family: 'Cormorant Garamond';
.head { font-size:
20px;
#name { font-family:
Sacramento;
float: right; margin-top:
10px; margin-right: 4%;
a { color: black; text-
decoration: none;
@media only screen and (max-width: 430px) {
.left,
.right { display:
none;
.stuff { width: 100%;
margin-left: 10px;
} Ouput:
Create a simple calculator using html and javascript: -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> body { font-family:
Arial, sans-serif; margin: 20px;
#calculator { max-
width: 300px; margin: 0 auto;
#display { width:
100%; padding: 10px;
margin-bottom: 10px;
#buttons { display: grid; grid-
template-columns: repeat(4, 1fr); grid-gap:
5px;
button
{ width: 100%;
padding: 10px;
font-size: 16px;
cursor: pointer;
</style>
<title>Calculator</title>
</head>
<body>
<div id="calculator">
<input type="text" id="display" readonly>
<div id="buttons">
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('')"></button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('0')">0</button> <button
onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('+')">+</button>
</div>
</div>
<script> function appendToDisplay(value) { const display =
document.getElementById('display'); display.value += value;
}
function calculate() { const display =
document.getElementById('display');
try {
display.value = eval(display.value);
} catch (error)
{ display.value = 'Error';
</script>
</body>
</html>
Output:
Create a Login Form: -
Step 1) Add HTML:
Add an image inside a container and add inputs (with a matching label) for each field. Wrap a
<form> element around them to process the input.
Example:
<form action="action_page.php" method="post">
<div class="imgcontainer">
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div></form>
