Scribd
Upload
12 views27 pages

WPD Lab Manual

The document outlines various exercises for creating web pages using HTML and CSS, including basic HTML tags, tables, lists, forms, and buttons. Each exercise includes an aim, procedure, program code, and result indicating successful execution. The exercises demonstrate fundamental web development concepts and practices.

Uploaded by

ataschod.bca
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
12 views27 pages

WPD Lab Manual

The document outlines various exercises for creating web pages using HTML and CSS, including basic HTML tags, tables, lists, forms, and buttons. Each exercise includes an aim, procedure, program code, and result indicating successful execution. The exercises demonstrate fundamental web development concepts and practices.

Uploaded by

ataschod.bca
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/ 27

EX NO: 1 A WEB PAGE WITH BASIC HTML TAGS

DATE:

AIM :

To create a web page using paragraph alignment , line breaks and basic HTML tags.

PROCEDURE:

Step 1 :

Create a HTML file using the Text Editor.

Step 2 :

Use the align attribute within text related tags like <p> or <h1> tags to set the alignment.

Step 3 :

Left Alignment align the text in the left side of the web page.

Right Alignment align the text in the right side of the web page.

Center Alignment align the text in the center of the web page.

Justify Alignment is used to align the text on both the left and right margins of a page.

Step 4 :

To create a break in the line of text, <br> tag is used.

Step 5 :

<b> for bold – Makes the text stand out with added weight.

<i> for italic – Gives the text a slight tilt for emphasis or style.

<u> for underline – Draws the attention by adding a line below your text.

Step 6 :

The <p> element defines a paragraph. A paragraph always starts on a new line and
browsers automatically add some new space before and after a paragraph.
Step 7 :

Save the document with the extension of .html in a required location.

Step 8 :

Open the the program in the browser and view the web page.

PROGRAM :

<html>
<head>
<title>Basic Html Example</title>
</head>
<body>
<h1 align=center><u>Welcome to my Webpage</u></h1>
<p align=left>This is a paragraph aligned to the left</p>
<p align=center>This is a paragraph aligned to the center</p>
<p align=right>This is a paragraph aligned to the right</p>
<p>This is a program with a line break<br>Here is the second line</p>
</body>
</html>

OUTPUT :

RESULT :
Thus the Web Page has been created and executed successfully.
EX NO: 2

DATE: CREATING A TABLE USING HTML

AIM:

To create a table in a web page using HTML.

PROCEDURE:

Step 1 :

An HTML table is created with an opening <table> tag and a closing </table> tag.

Step 2 :

Use the <tr> element to create table rows.

Step 3 :

The <th> element defines table headers(column labels).

Step 4 :

Use the <td> element to create table cells(data).

Step 5 :

Insert the desired data within the table cells.

Step 6 :

Save the file with .html file extension and open it in a web browser to view the table.

PROGRAM :

<html>

<head>

<title>

Organisation Details

</title>
</head>

<body bgcolor=#00ff00>

<p align=left><font color=blue><b><u>INTERNATIONAL EMBROIDERY


ORGANISATION</b></u></s></p>

<table border=5px cellpadding=20px bgcolor=yellow bordercolor=red>

<tr>

<th>COMPANY</th>

<th>CONTACT</th>

<th>COUNTRY</th>

</tr>

<tr>

<td>Vibro Embroiders</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr>

<td>Sunshine Embroiders</td>

<td>Francis chang</td>

<td>Italy</td>

</tr>

<tr>

<td>Royal Embroiders</td>

<td>Emrics</td>

<td>Poland</td>

</tr>
</body>

</html>

OUTPUT :

RESULT :

Thus the table has been created in a web page using HTML.
EX NO : 3

DATE: WEB PAGE USING LISTS

AIM :

To create a web page using HTML lists to group a set of related items in lists.

PROCEDURE :

In HTML , We can create three type of list :

Step 1 :

Ordered List – An HTML ordered list starts with the <ol> tag and ends with the </ol> tag.
Each list item starts with the <li> tag. The list items will be marked with numbers by
default.

Step 2 :

Unordered List - An HTML ordered list starts with the <ul> tag and ends with the </ul>
tag. Each list item starts with the <li> tag. The list items will be marked with bullets by
default.

Step 3 :

Description List – A Description list is a list of terms with a description of each term.

<dl> tag – defines the description list.

<dt> tag – defines the term(name)

<dd> tag – describes each term.

Step 4 :

Save the program with .html file extension and open it in a web browser to view the list of
items.
PROGRAM :

<html>

<head>

<title>HTML Example</title>

</head>

<body>

<h1>Welcome to JSP SuperMarket</h1>

<img src=d:/deptwork/img1.jpg>

<h2>Hyperlinks</h2>

<p>Check out this <a href="sample.html”></a></p>

<h2>List of items</h2>

<h3>Pulses</h3>

<ol>

<li>Moong Dhal</li>

<li>Black Gram</li>

<li>Bengal Gram</li>

</ol>

<h3>cosmetics</h3>

<ul>

<li>Soap</li>

<li>Shampoo</li>

<li>Powder</li>

</ul>
<h3>Fruits and Vegetables</h3>

<ul>

<li>Fruits

<ul>

<li>Papaya</li>

<li>Apple</li>

<li>Orange</li>

</ul>

</li>

<li>vegetables

<ul>

<li>Onion</li>

<li>Tomato</li>

</ul>

</li>

</ul>

</body>

</html>
Result :

Thus the web page has been created to view the list of ltems and executed successfully.
EX NO : 4
WEB PAGE WITH FORMS AND CONTROLS
DATE:

AIM :

To create a web page using the forms and controls in HTML.

PROCEDURE :

Step 1 :

The HTML <form> element is used to create an HTML form for user input . The <form>
element is a container for different types of input elements such as textfields , checkboxes ,
radio buttons , submit buttons etc.

Step 2 :

The HTML <input> element is the most used form element. <input type=”text”> defines a
textbox. It allows the user to enter the text.

Step 3 :

The <input type=”radio”> defines a radio button. Radio Button allows the user to select
ONE of a limited number of choices.

Step 4 :

The <input type=”checkbox”> defines checkbox. Checkboxes allows a user to select zero
or more options of a limited number of choices.

Step 5 :

The <input type=”submit”> defines a button for submitting the form data to a form
handler.

Step 6 :

Save the program in .html file extension and view the content in the web browser.
OUTPUT :

RESULT :
Thus the Student Registration form has been created successfully.

EX NO:5
TABLE CREATION USING CSS
DATE:

AIM :

To create a table using CSS and HTML and customize it by adding different styles to the
table.

PROCEDURE :

Create the table using CSS with the following steps:

Step 1:

To specify the table border in CSS, use the border property. We can specify a solid border
for<table>,<th> and<td> elements.

Step 2:

To span the content, add width :100% to the <table> element.

Step 3 :

The CSS margin properties are used to create space around elements , outside of any
borders. There are properties for setting the margin for each element(top,right,bottom and
left).

Step 4:

The background-color property can be applied to a <table>,<tr>,<td> element. The CSS


color property also sets the foreground color value of an elements text .

Step 5:

The Padding property may be specified using one,two,three or four values. When one
value is specified , it applies the same padding to all the four sides.

Step 6 :
Save the program with .html file extension and open it in the Web browser.

PROGRAM :

<html>
<head>
<title>CSS Sample Program</title>
<style>
table{
width:30%;
margin:20px;
color:#ff00ff;
}
th{color:#ff0000;
}
th,td{
background-color:#ffff00;
border:1px solid #0ff;
padding:8px;
text-align:left;
}
th{
background-color:#ff69b4;
}
body
{
color:#0000ff;
}
</style>
</head>
<body>
<h1>Employee Information</h1>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>James</td>
<td>Johnson</td>
<td>45</td>
</tr>
<tr>
<td>Lord</td>
<td>Cornwallis</td>
<td>40</td>
</tr>
<tr>
<td>Watson</td>
<td>Thomas</td>
<td>35</td>
</tr>
</table>
</body>
</html>

Result :

Thus the table has been created using CSS and executed successfully.
EX NO : 6
PHOTO ALBUM USING HTML AND CSS
DATE:

Aim :

To create a Photo Album using HTML and CSS.

Procedure :

Step 1 :

Download the images and place it in a required location.

Step 2:

The src is the file pathway of the image . Use the img tag to add each image on the web
page.

Step 3 :

Create a div container to hold the Gallery.

Step 4 :

Specify backcolor, font color, margin and padding for the <body> element using CSS.

Step 5 :

Specify the different style properties for container,photo-grid and photo grid img.

Step 6:

Save the program with .html file extension and run the program.

PROGRAM :
<html>

<head>

<title>My Photo Album</title>

<style>

body{

font-family:Arial;

background-color:#ff0000;

margin:0;

padding:20px;

.container

width:80%;

height:80%;

margin:0;

padding:20px;

background-color:#ffff00;

box-shadow:0 0 10px rgba(0,0,0,0.5);

h1{

text-align:center;

color:#0000ff;

.photo-grid{

display:flex;
flex-wrap:wrap;

gap:20px;

justify-content:center;

.photo-grid img{

width:100%;

height:auto;

max-width:200px;

border:2px solid #ff00ff;

border-radius:10px;

box-shadow:0 0 5px rgba(0,0,0,0.5);

</style>

</head>

<body>

<div class ="container">

<h1>My Photo Album</h1>

<div class="photo-grid">

<img src="photo1.jpg">

<img src="photo2.jpg">

<img src="photo3.jpg">

<img src="photo4.jpg">

<img src="photo5.jpg">

<img src="photo6.jpg">

<img src="photo7.jpg">
<img src="photo8.jpg">

</div>

</div>

</body>

</html>
Result :

Thus the Photo Album has been created successfully using HTML and CSS.

EX NO : 7
PHOTO ALBUM USING HTML AND CSS
DATE:

Aim :

To create a elegant banner using HTML and CSS.

Procedure :

Step 1 :

Define the banner size and format based on the platforms requirements where it will be
displayed.

Step 2 :

Use a text editor or specialized HTML editor to write the banner’s HTML and CSS code.

Step 3:

Use images to optimize our ideas for the web and incorporate any active elements in to the
banner.

Step 4 :

Specify the different style property such as padding,margin,width,height,color for the


element of containerand banner .

Step 5 :

Save the program with .html file extension and run the program in the web browser.
<html>

<head>

<title>Simple Banner</title>

</head>

<style>

.banner

background-color:#00ffff;

padding:50px;

text-align:center;

h1

font-family:Arial;

font-size:48px;

color:#4500ff;

h2

font-family:Arial;

font-size:30px;

color:#ffff00;

h3

{
font-family:Arial;

font-size:40px;

color:#ffff00;

h5

font-size:23px;

color:#008000;

.container

width:98%;

height:45%;

margin:1;

padding:20px;

background-color:#ff00ff;

box-shadow:0 0 10px rgba(0,0,0,0.5);

</style>

<body>

<div class="banner">

<div class="container">

<h1>ANNAI THERASA ARTS AND SCIENCE COLLEGE</h1>

<h2>DEPARTMENT OF COMPUTER APPLICATION</h2>

<h5>We cordially invite you to the </h5>


<h3><u><b>FORUM ON ROBOTICS</b></u></h3>

<img src="robot.jpg">

</div>

</div>

</body>

</html>

Result :

Thus the banner has been created successfully using HTML and CSS.
EX NO : 8
CREATING A BUTTON
DATE:

AIM :

To create a button using HTML, CSS and Javascript.

PROCEDURE :

Step 1 :

Use the button tag to create a button.

Step 2 :

Inside a button element we can add tags like <i>,<b>,<strong>,<br>,<img> etc.

Step 3 :

Specify the type attribute for a <button> element, to tell browsers what type of button it is.

Step 4 :

Call a function inside the button tag to display a alert message.

Step 5 :

Specify the CSS style property such as padding, font-size, border, cursor, transition,
margin-top for the <button> element.

Step 6 :
Save the program using .html file extension and run the program in the web browser.

PROGRAM :

<html>

<style>

body {

text-align: center;

button {

padding: 10px 20px;

font-size: 16px;

margin-top: 40px;

border: none;

cursor: pointer;

border-radius: 4px;

transition: background-color 0.3s ease;

background-color: #3daaf3;

} }

</style>

<body>

<h3>HTML button Tag</h3>

<button type="button"
onclick="alert('Welcome to ANNAI THERASA ARTS AND SCIENCE
COLLEGE')">

Click Here

</button>

</body>

</html>
Result :

Thus the button has been created successfully using HTML and CSS.

You might also like