Scribd
Upload
16 views21 pages

Lab Manual (WDD)

Uploaded by

danishmobile060
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
16 views21 pages

Lab Manual (WDD)

Uploaded by

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

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>

You might also like