Scribd
Upload
6 views36 pages

10

The document contains multiple HTML programming experiments focusing on different concepts such as lists, hyperlinks, images, tables, and forms. Each experiment includes a specific task, example code, and outputs demonstrating the use of various HTML elements and attributes. The document serves as a practical guide for understanding HTML structure and functionality.

Uploaded by

rptclown143
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
6 views36 pages

10

The document contains multiple HTML programming experiments focusing on different concepts such as lists, hyperlinks, images, tables, and forms. Each experiment includes a specific task, example code, and outputs demonstrating the use of various HTML elements and attributes. The document serves as a practical guide for understanding HTML structure and functionality.

Uploaded by

rptclown143
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/ 36

EXPERIMENT-1

1a)OUTPUT:

1
DATE: ROLL NUMBER:23A81A6110

EXPERIMENT-1
a)Develop a HTML program, to explain the working of lists.
Note: It should have an ordered list, unordered list, nested lists and ordered list in an
unordered list and definition lists.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Example on lists</title>
</head>
<body>
<h2>1.Unordered list example</h2>

2
<ul type="1">
<li>JAVA</li>
<li>C</li>
<li>cpp</li>
</ul>
<h2>2.Ordered list example</h2>
<ol>
<li>HTML</li>
<li>C</li>
<li>CPP</li>
</ol>
<h2>3.Definition list example</h2>
<dl>
<dt>Programming languages
<dd>python</dd>
<dd>C</dd>
<dd>CPP</dd>
</dt>
<dt>Web languages
<dd>HTML</dd>
<dd>CSS</dd>
<dd>PHP</dd>
</dt>
</dl>
<h2>4.Nested List example</h2>
<ul>

3
<li>Fruits
<ul>
<li>Apples</li>
<li>Banana</li>
<li>cherry</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrot</li>
<li>Onion</li>
<li>Potato</li>
</ul>
</li>
</ul>
<h2>5.Ordered list in an unordered list</h2>
<ul>
<li>Plan for the day
<ol type="A">
<li>Morning Exercise</li>
<li>Office work</li>
<li>Evening walk</li>
</ol>
</li>
<li>Shopping list
<ol type="a">

4
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ol>
</li>
</ul>
</body>
</html>

1b) OUTPUT:

5
6
DATE: ROLLNUMBER:23A81A6102

b) Develop a HTML program, to explain the working of hyperlinks using <a> tag and href,
target Attributes.
PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title> Hyperlinks example</title>
</head>
<body>
<h1>Html hyperlinks</h1>
<h2>1.Basic hyperlink</h2>
<p>Click <a href="https://www.w3Schools.com" target="_blank">here</a>to open in new
tab</p>
<h2>2.open a link in new tab</h2>
<p>Click<a href="https://www.google.com" target="_blank">here</a>to go to new tab</p>
<h2>3.link to a section in same page</h2>
<p>click<a href="#section">here</a> to jump to a specific section on this page</p>
<h2>4.Email linl</h2>
<p>Click<a href="mailto:[email protected]">here</a>to serend an email</p>
<h2>5.Telephone link</h2>
<p>Click <a href="tel: +9959255329">here</a>to call to a moblie</p>
<h2>6.Link to download a file</h2>
<p>Click <a href="example.file.pdf" download>here</a> to download the pdf file</p>

7
</body>
</html>

1c) OUTPUT:

c) Develop a HTML document that has your image and your friend’s image with a specific height
and width. Also when clicked on the images it should navigate to their respective profiles.

PROGRAM:
<!DOCTYPE html>
<html>

8
DATE: ROLLNUMBER:23A81A6102

<head>
<title>IMAGE GALLERY</title>
</head>
<body>
<h1>Image Gallery</h1>
<p>click on the thumbnail's below to view the full sized images:</p>
<!--Image thumbnails-->
<a href="https://wallpaperswide.com/sails_boat-wallpapers.html" targer="_blank">
<img src="C:\Users\anjal\OneDrive\Desktop\html project\chingam.jpg" alt="sail Boat"
>
</a>
<br> <br>
<a href="https://commons.wikimedia.org/wiki/file:JPEG_compression_Example"
target="_blank">
<img src="C:\Users\anjal\OneDrive\Desktop\html\fsd\image2.jpg.jfif" alt="JPEG
EXAMPLE">
</a>
</body>
</html>

1d) OUTPUT:

9
d) Develop a HTML program, in such a way that, rather than placing large images on a page,
the preferred technique is to use thumbnails by setting the height and width parameters to
something like to 100*100 pixels. Each thumbnail image is also a link to a full sized version of
the image. Create an image gallery using this technique

PROGRAM:
<!DOCTYPE html>

10
DATE: ROLLNUMBER:23A81A6102

<html>
<head>
<title>IMAGE GALLERY</title>
</head>
<body>
<h1>Image Gallery</h1>
<p>click on the thumbnail's below to view the full sized images:</p>
<!--Image thumbnails-->
<a href="https://wallpaperswide.com/sails_boat-wallpapers.html" targer="_blank">
<img src="C:\Users\anjal\OneDrive\Desktop\html project\chingam.jpg" alt="sail
Boat"style="width: 100px;height: 100px;" >
</a>
<br>
<a href="https://commons.wikimedia.org/wiki/file:JPEG_compression_Example"
target="_blank">
<img src="C:\Users\anjal\OneDrive\Desktop\html\fsd\image2.jpg.jfif" alt="JPEG
EXAMPLE" style="width: 100px;height: 100px;">
</a>
</body>
</html>

11
EXPERIMENT-2

12
2a) OUTPUT:

13
DATE: ROLL NUMBER:23A81A6110

EXPERIMENT-2
a)Develop a HTML program, to explain the working of tables.
(use tags: <table>, <tr>, <th>, <td> and attributes: border,
rowspan, colspan)

PROGRAM:
<!DOCTYPE html> <html> <head> <title>Student
information table</title> </head> <body> <h1> Student
information table</h1> <p>This table dispalys details of
students including their name,ROLL NO,college name and
branch</p> <table border="3"> <tr>
<th>S.NO</th> <th>student name</th>
<th>ROLL.NO</th> <th>COLLEGE NAME</th>

14
<th>BRANCH NAME</th> </tr> <tr>
<td>1</td> <td>kishore</td> <td>101</td>
<td>sves</td> <td>aiml</td> </tr> <tr>
<td>2</td> <td>sneha</td> <td>102</td>
<td>sves</td> <td>cse</td> </tr> <tr>
<td>3</td> <td>rohan</td> <td>1103</td>
<td>svec</td> <td>ece</td> </tr> <tr>
<td>4</td> <td>anjali</td> <td>104</td>
<td>svec</td> <td>cai</td> </tr> </table>
</body> </html>

2b) OUTPUT:

15
DATE: ROLLNUMBER:23A81A6110

b) Develop a HTML program, to explain the working of tables by preparing a timetable.


PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Weekly time table</title>
</head>
<body>
<h1> Weekly time table</h1>
<p>This timetable demonstrate the following things</p>

16
<table border="1" cellspacing="5" cellpadding = "10">
<caption ><strong> Class time table</strong></caption>
<tr>
<th>Day</th>
<th>9:00 AM - 10:00 AM</th>
<th>10:00 AM - 11:00 AM</th>
<th>11:00 AM - 12:00 PM</th>
<th>12:00 PM - 1:00 PM</th>
<th colspan="2">2:00pm - 4:00pm</th>
</tr>
<tr>
<td> Monday</td>
<td>P&S</td>
<td>Machine learning</td>
<td>Database Management System</td>
<td rowspan ="4">Break</td>
<td colspan = "2">Lab(P&S)</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">WorkShop</td>
<td>P&S</td>
<td>dbms</td>
<td colspan="2"> Full stack development lab</td>

17
</tr>
<tr>
<td>Wednesday</td>
<td>data base mangement system</td>
<td>Machine learning</td>
<td>Apptitude</td>

<td>free</td>
<td>seminar</td>
</tr>
<tr>
<td>Thrusday</td>
<td>P&S</td>
<td>Machine learning</td>
<td>Full stack development</td>

<td colspan="2">Meachine learning lab</td>


</tr></table>
</body></html>

2c) OUTPUT:

18
DATE: ROLL NUMBER:23A81A6110

c) Develop a HTML program, to explain the working of forms by designing Registration form.

PROGRAM:
<DOCTYPE html>
<html>
<head>

19
<title>Registration Form</title>
</head>
<body>
<h1>Registration Form</h1>
<p>please fill in the form below to register.</p>
<form action="#" method="post">
<table border="1" cellspacing="5" cellpadding="10">
<tr>
<td><label for="firstname">First Name:</label></td>
<td><input type="text" id="firstname" name="firstname" placeholder="Enter
your first name" required></td>
</tr>
<tr>
<td><label for="lastname">Last Name:</label></td>
<td><input type="text" id="lastname" name="lastname" placeholder="Enter
your last name" required></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password"
placeholder="Enter a password:" required></td>
</tr>
<tr>
<td><label for="age">AGE:</label></td>
<td><input type="number" id="age" name="age" placeholder="age"
required></td>

20
</tr>
<tr>
<td><label for="dob">Date of birth:</label></td>
<td><input type="date" id="dob" name="dob" placeholder="Enter your dob"
required></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female" required>
<label for="female">female</label>
<input type="radio" id="other" name="gender" value="Other" required>
<label for="other">Other</label>
</td>
</tr>
<tr>
<td>Hobbies:</td>
<td>
<input type="checkbox" id="reading" name="hobbies" value="Reading"
required>
<label for="reading">Reading</label>
<input type="checkbox" id="travelling" name="hobbies" value="Travelling"
required>

21
<label for="travelling">Travelling</label>
<input type="checkbox" id="sports" name="hobbies" value="Sports"
required>
<label for="sports">Sports</label>
</td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>
<select id="country" name="country" required>
<option value="">Select your country</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Australia">Australia</option>
</select>
</td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" rows="4" cols="30"
placeholder="Enter your address"></textarea></td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">

22
<button type="Submit">Submit</button>
<button type="reset">Reset</button>
</td>
</tr>
</table>
</form>
</body>
</html>

23
EXPERIMENT-3
3a) OUTPUT:

DATE: ROLLNUMBER:23A81A6110

24
EXPERIMENT-3

a)Develop a HTML program, that makes use of <article>, <aside>,


<figure>, <figcaption>,<footer>, <header>, <main>, <nav>,
<section>, <div>, <span> tags.

PROGRAM:
<!DOCTYPE html> <html> <head> <title>Independent
tags</title> </head> <body> <header>
<h1>Welcome to my website</h1> <nav> <a
href="#home">Home</a> <a href="#about">About</a>
<a href="#contact">Contact</a> </nav> </header>
<main> <section id="home"> <h2>Home
section</h2> <article>
<h3>Intoduction</h3> <p>This is an example of an
html program using various <span>html tags</span></p>

</article> </section> <aside>


<h2>Quick Links</h2> <ul> <li><a
href="#section1">section1</a></li> <li><a
href="section2">section2</a></li> </ul>
</aside> <section id="#about"> <h2>About

25
section</h2> <figure> <img
src="image1.jpg.jpg" height="150px" width="150px">
<figcaption>This ia an image example</figcaption>
</figure> </section> <section id="contact">
<h2>Contact section</h2> <div> <p>For
more information reach out to
us<span>[email protected]</span></p> </div>
</section> </main> <footer> <p
align="center">&expectation;2025 my websites,All rights
reserved</p> </footer> </body> </html>

3b) OUTPUT:

26
DATE: ROLLNUMBER:23A81A6110

b) Develop a HTML program, to embed audio and video into HTML web page.

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>Audio</title>
</head>
<body align="center">
<h2>Audio</h2>

27
<audio controls>
<source src="My Heart Is Beating-SenSongsMp3.Co-AUDIO.mp3">Audio file
</audio>
<br><br><br>
<h2>video</h2>
<video controls width="400">
<source src="video-2.mp4">Video file
</video>
</body>
</html>

3c) OUTPUT:

28
DATE: ROLLNUMBER:23A81A6110
c) Develop a program to apply different types (or levels of styles or style specification
formats)- inline, internal, external styles to HTML elements. (identify selector, property and
value).

PROGRAM:
HTML CODE:
<!DOCTYPE html>
<html>
<head>

29
<title>CSS style example</title>
<style>
/* Selector:h1,property:color,value:blue*/
h1{
color:aquamarine;
}
/* Selector:internal-style,property:font-size,value:20px*/
internal-style{ font-size: 1000px; font-weight:
bold;
}
</style>
<link rel="stylesheet" href="style3c.css">
</head>
<body>
<h1 style="text-align: center;font-family: Arial;">Inline,Internal,and external css</h1>
<p style=" border: aquamarine; color: blue;">hi hello</p>
<p class="internal-style">This paragraph is styled using internal css</p>
<p class="external-style">This paragraph is styled using external css</p>
</body>
</html> CSS
CODE: p{
margin:10px 0;
color:rgb(255, 0, 51);

30
font-size: 42px;
}

EXPERIMENT-4

31
4) OUTPUT:

32
DATE: ROLLNUMBER:23A81A6110

EXPERIMENT-4
Selector forms
a) Develop a program to apply different types of selector forms
i. Simple selector (element, id, class, group, universal)
ii. Combinator selector (descendant, child, adjacent sibling, general sibling) iii.
Pseudo-class selector iv. Pseudo-element selector v. Attribute selector

PROGRAM:
<!DOCTYPE html>
<html>
<head>
<title>CSS SELECTORS</title>
<style type="text/css">
/*Simple Selector*/
h1{
color:rgba(245, 36, 217, 0.367); /*element selector*/
}
#special{
color:rgb(153, 246, 61); /*id selector*/
}
.highlight{
background-color: rgb(245, 178, 187);
}
/*combinator Selector*/
div p{

33
font_style:italic; /*Descendent selector*/
}
div > p{
font-weight: bold; /*Child selector*/
}
/*pseudo class selector*/
a:hover{
color:rgb(153, 98, 11);
}
/*pseudo eleement selector*/
p::first_line{
font_size:18px; /*style fisrt line of the paragraph*/
}
/*Attribute selector*/
input[type="text"]{
border:2px solid rgb(246, 246, 64); /*style the text inputs*/
}

</style>
</head>
<body>
<!--simple selector-->
<h1> CSS simple selector example(element)</h1>
<p id="special">This paragraph is styled with ID selector</p>

34
<p class="highlight">This paragraph is styled with generic class selector</p>
<!--Combinator selector-->
<div>
<p>This is descendant of a div</p>
<p><a href="https://www.goggle.com"></a></p>
</div>
<!--pseudo_class selector-->
<a href="#">Hover over this link</a>
<!--pseudo_element selctor-->
<p>This paragraph demostrated a apseudo_element selector</p>
<!--Attribute selector-->
<input type="text" placeholder="Enter text here">
</body>
</html>

35
36

You might also like