Scribd
Upload
66 views30 pages

WPD Experiment All - New

The documents describe experiments involving using different HTML tags and attributes to create webpages. The experiments cover topics like adding text formatting using tags, creating lists, linking between pages, embedding images and setting image properties. Code snippets are provided as examples for creating basic HTML pages with various tags.

Uploaded by

Hemant Ingawale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
66 views30 pages

WPD Experiment All - New

The documents describe experiments involving using different HTML tags and attributes to create webpages. The experiments cover topics like adding text formatting using tags, creating lists, linking between pages, embedding images and setting image properties. Code snippets are provided as examples for creating basic HTML pages with various tags.

Uploaded by

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

Experiment 1 :

Exp 1 : Q1. Create a webpage to display name of your college and save the
page with your name.
Program :

<!DOCTYPE html>

<html>

<head>

<title> Diploma College </title>

</head>

<body>

Saraswati Institute Of Technology

</body>

</html>

Exp 1 : Q2. Create a webpage to display the name of any IT Company you know
and save the page with your roll. No.
Program :

<!DOCTYPE html>

<html>

<head>

<title> IT Company </title>

</head>

<body> Microsoft </body>

</html>
Experiment 2 :
Exp2 : Q1. Write HTML code to show the following output.
Program :

<html>

<head>

<title> Block level tags</title>

<h1 align="center">This is in center align</h1>

<h2 align="left"> This is in left align</h2>

<h3 align="right"> This is in right align </h3>

<h4> This is h4 </h4>

<h5> This is h5</h5>

<h6> This is h6</h6>

<body><p>This is example of paragraph</p>

<br><br><br><br>

This is new sentence without break

</body>

</html>
Experiment 3 :
Exp 3 : Q1. Create a webpage using block-level tags. (Part 2)

Program :

<html>

<head>

<title>Practical No. 3</title>

</head>

<body>

<center><h1>IF Department</h1></center>

<pre>

This is Saraswati Institute Of Technology

</pre>

<blockquote>

F.Y

S.Y

T.Y

</blockquote>

For more info go on

<address>

siot.org.in

</address>

</body>

</html>
Experiment 4 :
Exp 4 : Q1. Create a webpage using text level tags and special characters in
HTML.

Program :

<html>

<head>

<title> Practical No. 4 </title>

</head>

<body>

One <sub>particular </sub>book which is recommended reading is <u> "The street<br> Lawyer"</u> by <u>
John Grisham</u>. This book is about a lawyer who

<br>begins re-evaluating his priorities in life when a bad

<br>incident occurs within his firm law.

<p>

<strike>Consequently, he becomes acquainted with the inner city streets, and

<br> realizes the harsh existence of homeless</strike>.<u> The street lawyer</u> is a <br><b> great </b>
book. It is <i></b> well written</b></i> and <i><b> interesting</i></b>. Other books by <sup> John<br>
Grisham</sup> include <u> The firm </u> &amp; <u> The Pelicam Brief </u>, and Client</u>.

</body>

</html>
<html>
<body>
<h2>Welcome To GeeksforGeeks</h2>
<!--Text in Strong-->
<strong>Hello Geeks</strong>
<br>
<!--Text in small-->
<small>Hello Geeks</small>
<br>
<!--Text in Highlight-->
<mark>Hello Geeks</mark>
<br>
<!--Text in Bold-->
<p>
<b>Hello GeeksforGeeks</b>
</p>
<br>
<!--Text in Emphasize-->
<p>
<em>Hello GeeksforGeeks</em>
</p>
<br>
<!--Text in Highlight-->
<p>
<mark>Hello GeeksforGeeks</mark>
</p>
<br>
<!--Text in Superscript-->
<p>Hello
<sup>GeeksforGeeks</sup>
</p>
<!--Text in Subscript-->
<p>Hello
<sub>GeeksforGeeks</sub>
</p>
<br>
<!--Text in small-->
<p>
<small>Hello GeeksforGeeks</small>
</p>
<br>
<p>Hello GeeksforGeeks</p>
<!--Text in strike-->
<p> <strike>Hello GeeksforGeeks</strike> </p>
<br>
<p>Hello GeeksforGeeks</p>
<!--Text in Delete-->
<p> <del>Hello GeeksforGeeks</del> </p>
</body>
</html>
Experiment 5 :
Exp 5 : Q1. Create a webpage using different types of lists in HTML – part 1.
Program :

<html>

<head> <title> Experiment 5 </title> </head>

<body>

<h1> An Unordered List </h1>

<ul> <li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Raddish</li>

</ul>

<h1> An Ordered List </h1>

<ol>

<li>Coffee</li>

<li>Tea</li>

<ol type = "a">

<li>Black Tea</li>

<li>Green Tea</li>

<ol type = "i">

<li>China</li>

<li>Africa</li>

</ol>

</ol>

<li>Milk</li>

</ol>

<h1>HTML Definition List</h1>

<dd>HTML</dd>

<dl>This stands for Hypertext Markup Language</dl>

<dd>HTTP</dd>

<dl>This stands for Hypertext Transfer Protocol</dl> </body>

</html>
Experiment 6 :
Exp 6 : Q1. : Create a webpage to apply anchor tag for linking web page.
Procedure 1 : Linking one webpage with another webpage.
Program :

<html>

<head>

<title> Experiment 6</title>

<body>

<h1>My First Webpage</h1>

<p>Example of linking webpages with HTML</p>

<a href = "secondpage.html"> Second Page </a>

</body>

</html>

Second Webpage :
Program :

<html>

<title>Experiment 6</title>

<body>

<h1>My Second Page</h1>

<p>Welcome to world of hyperlinking with HTML</p>

</body>

</html>
Procedure 2 : Procedure for linking within document.
Create a bookmark with the id attribute :
Step 1 : Create a webpage as follows :
Program :

<!DOCTYPE html>

<html> <title>Linking within document</title>

<body>

<p><a href = "#link">Links in HTML</a></p>

<h2>Introduction of HTML</h2>

<p>This point explains Introduction of HTML</p>

<h2>Concept of Website</h2>

<p>This point explains concept of Website</p>

<h2>Concept of URL</h2>

<p>This point explains Concept of URL</p>

<h2>Images in HTML</h2>

<p>This point explains Images in HTML</p>

<h2id = "link">Links in HTML</h2>

<p>This point explains Links in HTML</p>

<h2>Tables in HTML</h2>

<p>This point explains Tables in HTML</p>

<h2>Hyperlink in HTML</h2>

<p>This point explains Hyperlinks in HTML</p>

<h2>HTML list</h2>

<p>This point explains HTML list</p>

<h2>HTML headings</h2>

<p>This point explains HTML headings</p>

<h2>HTML paragraphs</h2>

<p>This point explains HTML paragraphs</p>

<h2>HTML frame</h2>

<p>This point explains HTML frame</p>

</body> </html>
<!DOCTYPE html>

<html> <title>Linking within document</title>

<body>

<p><a href = "#link">COMPUTER ENGINEERING</a></p>

<p><a href = "mech.html">MECHANICAL ENGINEERING</a></p>

<p><a href = "if.html">INFORMATION TECHNOLOGY</a></p>

<h2>id = "link">welcome to computer engineering department</h2>

<p>

The Department of Computer technology was established in the year 2006 .This is an exciting period for the
Computer Engineering profession as the rapidly changing technology creates many opportunities and
challenges.

Department of Computer Technology is prepared to meet the challenges and is playing a leadership role in
shaping the education of the 21st Century by providing unique educational and research opportunities in the
forefront of Computer Engineering, Information Technology and their applications.

<p>

</body>

</html>

<!DOCTYPE html>

<html> <title>Linking within document</title>


<body>

<h2>welcome to Information Technology department</h2>

<p>

department of Information Technology is established in 2020-21 with an intake of 60 to impart quality


education in IT with stated vision and mission.

Information Technology plays a vital role in helping organizations to achieve profitable results and keep
competitive forces in check. Keeping this objective in mind, young mindsets are educated here with full
academic rigor to convert them into effective IT professionals. With the help of best of the infrastructure and
the proper action plan, we train and educate engineers of outstanding ability who can become leaders in their
profession. We also associate closely with industrial leaders to help students in undertaking programs needed
in their respective domains. This sort of focused efforts definitely helped all our students from overall
development of the students.

<p>

</body>

</html>

<!DOCTYPE html>

<html> <title>Linking within document</title>

<body>

<h2>welcome to Mechanical engineering department</h2>

<p>

Mechanical Engineering will be the most generously compensated career alternative. Mechanical Engineers
can work in the warm force industry, gas turbines industry, cooling and refrigeration industry, oil and gas
investigation and refining businesses, horticultural area, instructive division, flight organizations, transporting
businesses, airplane business, military, pharmaceutical, car industry, and numerous others. We Provide the
best education for Mechanical Engineering. That’s why We are amongst Recognized Diploma Colleges in
Mumbai for Mechanical Engineering.

<p>

</body>

</html>

Experiment 7 :
Exp 7 : Q1. : Create a webpage to link an external page of different web sites
like yahoo.com or google.com using URL and also link webpage to your E-Mail
ID. Apply tags to change the color of links.
Program :

<html>

<head>

<style>

a:link {color: green;}

a:visited {color: pink;}

a:hover {color: red;}

a:active {color: yellow;}


</style>

</head>

<body>

<p> You can change the default colors of links </p>

<a href = " https://yahoo.com " target = " _blank "> HTML Images </a>

</body>

</html>
Experiment 8 :
Exp 8 : Q1. : Design a webpage using images and apply image formatting
attributes to it.
Program :

<html>

<head>

<title>Image Linking</title>

</head>

<body>

<img src = " C:\Users\Downloads\Flower.jpg " style="width: 600px; height : 436px" >

</body>

</html>
Experiment 9 :
Exp 9 : Q1. : Implement the image as a button or link and set an image as the
background.

Aim 1 : Implementing image as a button.


Exp 9 : Program : Webpage – 1
<html>

<head>

<title>Practical 9 </title>

</head>

<body> Image as a link/hyperlink:

<a href = "D:\Html Files\PR9pg1.html">

<img src = " C:\Users\Downloads\Flower.jpg " width="32" height="32" align="bottom"" ></a>

</body>

</html>
Exp 9 : Program : Webpage – 2
<html>

<head>

<title>Page1.html</title>

</head>

<body>

<h1 align = "center"> Hello!!! This is a new chapter</h1>

</body>

</html>
Exp 9 : Aim 2 : Implementing image as a background.
Exp 9 :Program :

<html>

<head>

<title>Practical 9 imgbg</title>

</head>

<body background="C:\Users\Downloads\Whiteflower.jpg">

</body>

</html>
Experiment 10 :
Exp 10 : Q1. : Create a webpage to implement frame tags.

Exp 10 : Aim 1 : Create a webpage to implement frame tags vertically.

Program : Webpage – 1 : Frame 1 :


<html>

<body>

<h1>Frame 1</h1>

<p>Contents of Frame 1</p>

</body>

</html>

Program : Webpage – 2 : Frame 2 :


<html>

<body>

<h1>Frame 2</h1>

<p>Contents of Frame 2</p>

</body>

</html>

Program : Webpage – 3 : Frame 3 :


<html>

<body>

<h1>Frame 3</h1>

<p>Contents of Frame 3</p>

</body>

</html>
Program : Webpage – 4 : Frame 4 :
<html>

<body>

<h1>Frame 4</h1>

<p>Contents of Frame 4</p>

</body>

</html>

Program : Webpage – 5 : Main Frame :


<html>

<frameset cols="*,*,*,*">

<frame src="D:\Html Files\Frames Vertical\VFrame1.html">

<frame src="D:\Html Files\Frames Vertical\VFrame2.html">

<frame src="D:\Html Files\Frames Vertical\VFrame3.html">

<frame src="D:\Html Files\Frames Vertical\VFrame4.html">

</frameset>

</html>
Exp 10 : Aim 2 : Create a webpage to implement frame tags horizontally.
Program : Webpage – 1 : Frame 1 :
<html>

<body>

<h1>Frame 1</h1>

<p>Contents of Frame 1</p>

</body>

</html>

Program : Webpage – 2 : Frame 2 :


<html>

<body>

<h1>Frame 2</h1>

<p>Contents of Frame 2</p>

</body>

</html>

Program : Webpage – 3 : Frame 3 :


<html>

<body>

<h1>Frame 3</h1>

<p>Contents of Frame 3</p>

</body>

</html>

Program : Webpage – 4 : Frame 4 :


<html>

<body>

<h1>Frame 4</h1>

<p>Contents of Frame 4</p>

</body>

</html>
Program : Webpage – 5 : Main Frame
<html>

<frameset rows="*,*,*,*">

<frame src="D:\Html Files\Frames Horizontal\HFrame1.html">

<frame src="D:\Html Files\Frames Horizontal\HFrame2.html">

<frame src="D:\Html Files\Frames Horizontal\HFrame3.html">

<frame src="D:\Html Files\Frames Horizontal\HFrame4.html">

</frameset>

</html>
Exp 10 : Aim 3 : Create a webpage to implement frame tags horizontally.
Program : Webpage – 1 : Frame 1 :
<html>

<body>

<h1>Frame 1</h1>

<p>Contents of Frame 1</p>

</body>

</html>

Program : Webpage – 2 : Frame 2 :


<html>

<body>

<h1>Frame 2</h1>

<p>Contents of Frame 2</p>

</body>

</html>

Program : Webpage – 3 : Frame 3 :


<html>

<body>

<h1>Frame 3</h1>

<p>Contents of Frame 3</p>

</body>

</html>

Program : Webpage – 4 : Frame 4 :


<html>

<body>

<h1>Frame 4</h1>

<p>Contents of Frame 4</p>

</body>

</html>
Program : Webpage – 5 : Main Frame
<html>

<frameset cols="*,*">

<frame src="D:\Html Files\Frames Horizontal\HFrame1.html">

<frameset rows="*,*">

<frame src="D:\Html Files\Frames Horizontal\HFrame2.html">

<frameset cols="*,*">

<frame src="D:\Html Files\Frames Horizontal\HFrame3.html">

<frame src="D:\Html Files\Frames Horizontal\HFrame4.html">

</frameset>

</frameset>

</frameset>

</html>
Exp 10 : Exercise : Write HTML code to divide a webpage into 2 rows, and the second row
into 3 columns using frameset and its attributes and showing text links in the first column,
ordered list in the second column, and image in the third column.
Program : Webpage – 1 : Frame 1
<html>

<body>

<h1>Frame 1</h1>

<p>Contents of Frame 1</p>

</body>

</html>

Program : Webpage – 2 : Frame 2


<html>

<body>

<h1>Frame 2</h1>

<p>Contents of Frame 2</p>

</body>

</html>

Program : Webpage – 3 : Frame 3


<html>

<body>

<h1>Frame 3</h1>

<p>Contents of Frame 3</p>

</body>

</html>

Program : Webpage – 4 : Frame 4


<html>

<head>

<title> Frame 2 </title>

</head>

<body>

<img src = "C:\Users\manas\Downloads\

Whiteflower.jpg" width = "400" height = "200">

</body>
</html>

Program : Webpage – 5 : Main Frame


<html>

<frameset cols="*,*">

<frame src="D:\Html Files\Frames Horizontal\HFrame1.html">

<frameset rows="*,*">

<frame src="D:\Html Files\Frames Horizontal\HFrame2.html">

<frameset cols="*,*">

<frame src="D:\Html Files\Frames Horizontal\HFrame3.html">

<frame src="D:\Html Files\Frames Horizontal\HFrame4.html">

</frameset>

</frameset>

</frameset>

</html>
Experiment 11 :
Exp 11 : Q1. : Write a program to create an HTML table having a border as
below or a similar table is given by the teacher implementing the above table
tags.

Program :
<html>

<head>

<title> Table 5 </title>

</head>

<h5 align = "center">Tables with border, vertical border, cell padding, cell spacing.</h5>

<table border = "5" align = "center" cellspacing = "10" cellpadding = "10">

<tr>

<th align = "center"> Day / time</th>

<th align = "center"> 10:00 - 12:00</th>

<th align = "center"> 12:00 - 01:00</th>

<th align = "center"> 01:00 - 03:00</th>

<th align = "center"> 02:00 - 04:00</th>

</tr>

<tr>

<td align = "center"> Monday </td>

<td align = "center"> Maths </td>


<td align = "center"> PCI </td>

<td rowspan = "5" align = "center"> Recess </td>

<td align = "center"> CHEM </td>

</tr>

<tr>

<td align = "center"> Tuesday </td>

<td align = "center"> PHY </td>

<td align = "center"> ENG </td>

<td align = "center"> WPD </td>

</tr>

<tr>

<td align = "center"> Wednesday </td>

<td align = "center"> PCI </td>

<td align = "center"> CHEM </td>

<td align = "center"> MATHS </td>

</tr>

<tr>

<td align = "center"> Thursday </td>

<td align = "center"> PHY </td>

<td align = "center"> ENG </td>

<td align = "center"> WPD </td>

</tr>

<tr>

<td align = "center"> Friday </td>

<td align = "center"> WPD </td>

<td align = "center"> Maths </td>

<td align = "center"> CHEM </td>

</tr>

</table>

</html>
Experiment 12 :
Exp 12 : Q1. : Write a program to create an HTML table having a border as
below or a similar table is given by the teacher implementing the above table
tags.
Program :
1. Inline CSS :
<html>

<head>

<title>Inline CSS</title>

</head>

<body>

<h1 style="color:red; padding:10px;

text-decoration:underline;">Example Heading</h1>

</body>

</html>

2. Internal CSS :
<html>

<head>

<title> Internal CSS </title>

<style>

h1 {

color : red;

padding : 10px;

text-decoration : underline; }

</style>

</head>

<body>

<h1>Example Heading</h1>

</body>

</html>
3. External CSS :
i. HTML File : Program :
<html>

<head> <title> External CSS </title>

<link rel="stylesheet" type="text/css" href="ExternalCSS.css">

</head>

<body>

<h1>Example Heading</h1>

</body>

ii. CSS File : Program :


h1 {

color: red;

padding: 10px;

text-decoration: underline;

You might also like