Scribd
Upload
31 views19 pages

HTML Programs

Uploaded by

shraddhasonar1992
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
31 views19 pages

HTML Programs

Uploaded by

shraddhasonar1992
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/ 19

1.

Display the structure of simple HTML page

<!DOCTYPE html>
<html>
<head>
<title>FirstDemo</title>
</head>
<body>
this is structure of html code
</body>

</html>

OUTPUT:

2.Display the basic tags in HTML

<!DOCTYPE html>
<html>
<head>
<title>Heading Tag</title>
</head>
<body>
<h1>this is h1 tag</h1>
<h2>this is h2 tag</h2>
<h3>this is h3 tag</h3>
<h4>this is h4 tag</h4>
<h5>this is h5 tag</h5>
<h6>this is h6 tag</h6>
<p>Lok Sabha Speaker election: It’s NDA’s Om Birla vs INDIA bloc’s
Kodikunnil Suresh
Kodikunnil Suresh of Congress files nomination as INDIA bloc
candidate; Om Birla files nomination for Speaker’s post as NDA consensus
candidate
Updated - June 25, 2024 12:43 pm IST<br><br><br><hr>

Published - June 25, 2024 12:07 pm IST - New Delhi

Lok Sabha Speaker election: It’s NDA’s Om Birla vs INDIA bloc’s


Kodikunnil Suresh
Kodikunnil Suresh of Congress files nomination as INDIA bloc
candidate; Om Birla files nomination for Speaker’s post as NDA consensus
candidate
Updated - June 25, 2024 12:43 pm IST

Published - June 25, 2024 12:07 pm IST - New Delhi

</p>
</body>
</html>
OUTPUT:

3.basic tags
<!DOCTYPE html>
<html>
<head>
<title>pav bhaji recipe</title>
</head>
<body>
<h1>Recipe of the Pav Phaji</h1>
<p>
This <b>Pav Bhaji</b> recip has a perfect blend of <i>spices and
veggies</i>and can be coocked quickly.<u>To win everyone's heart ,try this yummy
pav bhaji recipe</u> with the goodness of veggies.<del>Restaurant
Recipes</del><hr>

</p>
<h3>Ingredients</h3>
<pre>
1.Sachet
<u>MAGGI Masalaae-Magic</u>
2.2 tablespoons<b>oil</b>
3.1 teaspoon <b>Ginger -Garlic paste</b>
4. 2 tomota
5. 2 cups Hot Water
</pre>

</body>

</html>

OUTPUT:

4. Create the time table using Table tag

<!DOCTYPE>
<html>
<head>
<title>timetable</title>
</head>
<body>
<h1>TimeTable</h1>
<table frame="box" rules="all" border="10px" >
<thead>
<tr>
<th>Time</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Tues</th>
<th>fri</th>
<th>sat</th>
</tr>
</thead>
<tbody>
<tr>
<td>7:45 to 8:30</td>
<td>A.O.S.</td>
<td>A.O.S.</td>
<td>A.O.S.</td>
<td>A.java</td>
<td>A.java</td>
<td>A.java</td>
</tr>
<tr>
<td> 8:30 to 9:15</td>
<td>AP</td>
<td>AP</td>
<td>AP</td>
<td>DA</td>
<td>DA</td>
<td>DA</td>
</tr>
<tr>
<td> 9:15 to 10:00</td>
<td>ST</td>
<td>ST</td>
<td>ST</td>
<td>IP</td>
<td>IP</td>
<td>IP</td>
</tr>
<tr>
<td> 10:05 to 10:50</td>
<td>CC</td>
<td>CC</td>
<td>CC</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</body>

</html>

OUTPUT:

5.Create table student name or marks

<!DOCTYPE html>
<html>
<head>
<title>SimpleTable</title>
</head>
<body>
<h1>Student name or Marks</h1>
<table frame="box" border="1px" higjt="100"
width="300px"cellspadding="10px" cellspacing="10px">
<thead>
<tr>
<th>roll no</th>
<th>name</th>
<th>sub</th>
<th>marks</th>

</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Bhumika</td>
<td>java</td>
<td>19</td>
</tr>
<tr rowspan="2">
<td>2.</td>
<td>shivanjali</td>
<td>c lang</td>
</tr>
<tr>
<td>3.</td>
<td colspan="2">Supriya</td>
<td>18</td>
</tr>
<tr>
<td>4.</td>
<td>shiv</td>
<td>HTML</td>
<td>19</td>
</tr>
</tbody>
</table>
</body>
</html>
OUTPUT:

6.Create the calender using the table tag

<!DOCTYPE html>
<html>
<head>
<title>calender</title>
</head>
<body>
<h1>
July 2024
</h1>
<table frame="box" border="2px" height="100px" woidth="300px"
cellspadding="5px" cellspacing="5px">
<tbody>
<tr>
<td>Sunday</td>
<td></td>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
</tr>
<tr>
<td>Monday</td>
<td>1</td>
<td>8</td>
<td>15</td>
<td>22</td>
<td>29</td>
</tr>
<tr>
<td>Tuesday</td>
<td>2</td>
<td>9</td>
<td>16</td>
<td>23</td>
<td>30</td>
</tr>
<tr>
<td>Wednesday</td>
<td>3</td>
<td>10</td>
<td>17</td>
<td>24</td>
<td>31</td>
</tr>
<tr>
<td>Thursday</td>
<td>4</td>
<td>11</td>
<td>18</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>Firday</td>
<td>5</td>
<td>12</td>
<td>19</td>
<td>26</td>
<td></td>
</tr>
<tr>
<td>Saturday</td>
<td>6</td>
<td>13</td>
<td>20</td>
<td>27</td>
<td></td>
</tr>
</tbody
</table>
</body>
</html>

OUTPUT:

7. Create resume using tags

<!DOCTYPE html>
<html>
<head>
<title>resume</title>
</head>
<body>
<h1>Resume</h1>
<p>
Name: Chaudhari Bhumika Mahendra
</p><hr>
<h5>Description of objective</h5>
<p>
Passionate about [specific area of interest], I am seeking an entry-
level position that allows me to apply my [relevant skills or knowledge] to drive
innovation and deliver results. I am committed to continuous learning and
professional development to excel in my career.
</p>
<hr>
<h4>Skills</h4>
<ol type="1">
<li>C language</li>
<li>HTML</li>
<li>JAVA</li>
<li>AP</li>
</ol><hr>
<h4>Eduction</h4>
<table frame="box" cellspacing="5px" rules="all" cellpadding="5px"
brodre="1px" height="50px" width="50px" >
<thead>
<tr>
<th>Eduction</th>
<th>College</th>
<th>percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>SSC</td>
<td>JVR</td>
<td>80.81</td>
</tr>
<tr>
<td>HSC</td>
<td>JVR</td>
<td>80</td>
</tr>
<tr>
<td>BSC(C.S)</td>
<td>NACS</td>
<td>70</td>
</tr>
</tbody>
</table>
<hr>
<h4>Declaration</h4>
<ul type="circle">
<li>"I certify that the information provided in this resume is true
and accurate to the best of my knowledge."</li>
<li>"I hereby declare that the details furnished above are true and
correct."</li>
<li>"The information presented in this resume accurately reflects my
qualifications and experience."</li>
</ul>
<hr>
</body>
</html>

OUTPUT:
8.Create the webpage using the anchor tag and attach the webpage using
anchor tag

html.html

<!DOCTYPE html>
<html>
<head>
<title>HTML PAGE</title>
</head>
<body>
<h2>HTML</h2>
<img src=
"https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmar
k.svg/800px-HTML5_logo_and_wordmark.svg.png" alt="Image" height="200px"
width="200px"/>
<p>HyperText Markup Language (HTML) is the standard markup language for
documents designed to be displayed in a web browser. It defines the
content and structure
of web content. It is often assisted by technologies such as
Cascading Style Sheets (CSS) and
scripting languages such as JavaScript.
</p>
<a href="css.html">CSS</a>
<a href="js.html">JS</a>
</body>
</html>

OUTPUT:

css.html

<!DOCTYPE html>
<html>
<head>
<title>CSS PAGE</title>
</head>
<body>
<h2>CSS</h2>
<img src=
"data:image/png;base64,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
LIMq5cXQMgwAAAAASUVORK5CYII=" alt="Image" height="200px" width="200px"/>
<p>CSS (Cascading Style Sheets) is used to style and layout web pages —
for example,
to alter the font, color, size, and spacing of your content,
split it into multiple columns, or add animations and other
decorative features
</p>
<a href="html.html">HTML</a>
<a href="js.html">JS</a>
</body>
</html>

OUTPUT:
Js.html

<!DOCTYPE html>
<html>
<head>
<title>JS PAGE</title>
</head>
<body>
<h2>JS</h2>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScr
ipt_logo_2.svg/1200px-Unofficial_JavaScript_logo_2.svg.png" alt="Image"
height="200px" width="200px"/>
<p>
JavaScript is a scripting or programming language that allows you to
implement complex features on web pages — every time a web page does more than
just sit there and display static information for you to look
at — displaying timely content updates, interactive maps, animated
2D/3D graphics, scrolling video jukeboxes, ...
</p>
<a href="html.html">HTML</a>
<a href="css.html">JS</a>
</body>
</html>

OUTPUT:
10. create a web page and fit 4 image on the one webpage using iamge
tag

<!DOCTYPE html>
<html>
<head>
<title>Flowers</title>
</head>
<body>
<h1>Flowers</h1>
<img src="https://img.freepik.com/free-photo/beautiful-blooming-flowers-
spring-season_23-
2150790288.jpg?size=626&ext=jpg&ga=GA1.1.2113030492.1720051200&semt=ais_user"
alt="Image" height="200px"weidth="200px"/>
<img src="https://img.freepik.com/free-photo/natures-beauty-captured-
colorful-flower-close-up-generative-ai_188544-8593.jpg" alt="Image"
height="200px"weidth="200px"/>
<br><img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQkaPLK40ub6iMoWyTSNVPVN_GZsiHVfj61tA&s"
alt="Image" height="200px"weidth="200px"/>
<img src="https://images.pexels.com/photos/250591/pexels-photo-
250591.jpeg?auto=compress&cs=tinysrgb&w=400" alt="Image"
height="200px"weidth="200px"/>

</body>

</html>

OUTPUT:

You might also like