Scribd
Upload
9 views

HTML Programs

my programs

Uploaded by

varshiniyetukuri
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

HTML Programs

my programs

Uploaded by

varshiniyetukuri
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML Programs

1. Create an HTML Document with the following formatting options Bold, Italic, underline
headings form h1 to h6 different font types, sizes and columns, color, images, paragraph, line
break,horizontal rule, pretag

Program :
<html>
<head>
<title>3rd MECS-A</title>
</head>
<body><hr>
<img src="https://www.masaischool.com/blog/content/images/2023/01/Introduction-to-
HTML.png"Height=100 Width=150>
<h1><B><Font Style="Times new Roman">
Introduction to HTML</Font></B></h1><br>
<h2><i>we are creating a web page </i></h2><br>
<h3><u><font size="30">Aditya Degree College</font></u></h3></br>
<h4><p>In this HTML we are going to learn how to create webpage and our own websites.
HTML stands for Hyper Text Markup Language. Hyper text refers only any form of texts
where as markup indicates it is not a programming language.</p></h4><br>
<h5><pre><font color="Blue">
Some of the features of HTML includes :
It is a designing language
We can create static webpages with Html
Here result is seen in webpages
We have to save as HTML
It is not case sensitive </font></pre></h5></hr></body></html>

2. Create an HTML document which consists the following :


• Ordered list
• Unordered list
• Nested list
• Images

Program :

<!doctype=html>

<html>

<head>

<title>lists</title>

</head>

<body>

<ul type='disc'>

<li>"Computer science"</li>
<ul type="Square">

<li>Subject 1</li>

<li>Subject 2</li>

<li>Subject 3</li>

</ul>

<li>"Mathematics"</li>

<ul type="Square">

<li>Subject 1</li>

<li>Subject 2</li>

<li>Subject 3</li>

</ul>

<li>"Physics"</li>

<img src =
"https://www.freecodecamp.org/news/content/images/2021/07/freeCodeCamp-Cover-
1.png"Height=100 Width=150>

</ul>

</ul>

<ol type='A'>

<li>"Computer science"</li>

<ol type="1">

<li>Chapter 1</li>

<li>Chapter 2</li>

<li>Chapter 3</li>

</ol>

<li>"Mathematics"</li>

<ol type="1">

<li>Chapter 1</li>

<li>Chapter 2</li>

<li>Chapter 3</li>

</ol>

<li>"Physics"</li>

<ol type="1">
<li>Chapter 1</li>

<li>Chapter 2</li>

<li>Chapter 3</li>

<img src="https://i.ytimg.com/vi/-vUEd_Zib4I/mqdefault.jpg"Height =100


Width=150>

</ol>

</ol>

<ul type="disc">

<li>web interface programming</li>

<ul type="circle">

<li>lists</li>

</ul>

<ol type="a">

<li>unit 1</li>

<ol type="1">

<li>topic 1</li>

</ol>

<ul type="i">

<li>paragraph</li>

</ul>

3. Create a table with 4 rows and 5 columns and insert a image in the middle column

Program :
<!DOCTYPE html>
<html>
<head>
<title>3rd MECS</title>
</head>
<body>
<p>Time Table</p>
<table border="2" align="center">
<tr>
<th>Day</th>
<th>8:45-9:45</th>
<th>9:45-10:45</th>
<th>10:45-11:00</th>
<th>11:00-12:00</th>
</tr>
<tr>
<td>Day 1</td>
<td>Maths</td>
<td>Physics</td>
<td>Computer Science</td>
<td design "Center">Break</td>
</tr>
<tr>
<td>Day 2</td>
<td>Maths</td>
<td><image src="https://developer.mozilla.org/en-
US/docs/Learn/HTML/Tables/Basics/numbers-table.png"height=100 width=150>
</td>
<td>Computer</td>
<td align="Center">Break</td>
</tr>
<tr>
<td>Day 3</td>
<td>Maths</td>
<td>Physics</td>
<td>Computer</td>
<td align="Center">Break</td>
</tr>
<tr>
<td>Day 4</td>
<td>Maths</td>
<td>Physics</td>
<td>Computer</td>
</tr>
</table>
</body>
</html>
4. Using table tag create the following structure

image image image image Image


image image image image image

Program :
<!DOCTYPE html>
<html>
<head>
<title>images</title>
</head>
<body align="Center">
<table align="Center">
<p><u><B>cartoon</u></P></b>
<tr>
<td><img
src="https://upload.wikimedia.org/wikipedia/en/b/bd/Doraemon_character.png"
Height=100 width=100></td>
<td><img
src="https://i.pinimg.com/736x/dc/5f/d3/dc5fd3da72a00327a184d66f03609ddd.j
pg" Height=100 width=100></td>
<td><img src="https://w7.pngwing.com/pngs/912/392/png-transparent-jerry-
mouse-tom-cat-tom-and-jerry-poster-tom-and-jerry-mammal-heroes-cat-like-
mammal.png"Height=100 width=100></td>
<td><img
src="https://upload.wikimedia.org/wikipedia/en/2/2f/Jerry_Mouse.png"Height=1
00 width=100></td>
<td><img
src="https://i.pinimg.com/736x/ea/4c/7e/ea4c7e71fbcdc7d776e7163f337ec4fe.jp
g"Height=100 width=100></td>
</tr>
<tr>
<td><img src="https://m.media-
amazon.com/images/M/MV5BZjg2ZjViMTktNWQ1Yy00ODZiLWE1OTgtNDY3MjI0O
GUyNjNhXkEyXkFqcGdeQXVyNTk4NDI4NTE@._V1_.jpg"Height=100
width=100></td>
<td><img src="https://www.animaker.com/hub/wp-
content/uploads/2023/03/Mickey_Mouse_Disney_1.webp"Height=100
width=100></td>
<td><img src="https://www.animaker.com/hub/wp-
content/uploads/2023/03/Tweety_SVG.png"Height=100 width=100></td>
<td><img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSDN82tmiWF7EIJUJ1YsxoqpDsBj70gCk0Se
g&usqp=CAU"Height=100 width=100></td>
<td><img src="https://variety.com/wp-
content/uploads/2016/05/pooh.jpg?w=700"Height=100 width=100></td>
</tr>
</table>
</html>
5. Create a web file page as shown below

APPLICATION WEB SITE


Google Google
Microsoft Microsoft
Wikipedia Wikipedia

Program :
<!DOCTYPE html>
<html>
<body>
<h1>WEBSITES</h1>
<table border ="3">
<tr>
<th>Application</th>
<th>Website</th>
</tr>
<tr>
<td>Google</td>
<td><u><a href = "http://www.google.com"target="main
page">Google</a></u></td>
</tr>
<tr>
<td>Microsoft</td>
<td><u><a href = "http://www.Microsoft.com"target="main
page">Microsoft</a></u></td>
</tr>
<tr>
<td>Wikipedia</td>
<td><u><a href = "http://www.Wikipedia.com"target="main
page">Wikipedia</a></u></td>
</tr>
</table>
</body>
</html>
6. Create a form using HTML which has the following types of controls
• Text box
• Radio Buttons
• Check boxes
• Submit & Reset buttons

Program :

<!DOCTYPE.html>

<html>

<head>

<title>controls</title>

</head>

<body align="center">

<b><center><u>Student Details</b></u>

</center>

<form align="center">

<label for="sname">Student name :

</label>

<input type="text"name="sname" id="sname"><br>


Gender :

<input type="radio"name="g1" id="g1" value ="f">Female<br>

<input type="radio"name="g2" id="g2" value ="f">Male<br>

Technical Language

<input type="radio" name="c1" id="c1" value =" ">HTML<br>

<input type="radio" name="c2" id="c2" value =" ">PHP<br>

<input type="radio" name="c3" id="c3" value =" ">JAVA<br>

<input type="Button"name="b1" id="b1" value ="Submit">

<input type="Button"name="b2" id="b2" value ="Reset">

</form>

</body>

</html>

You might also like