HTML Programs 1 To 12
HTML Programs 1 To 12
Hallo World
<!--1. Hallo World-->
<!DOCTYPE html>
<html>
<head>
<title>Hallo World</title>
</head>
<body>
<p>Hallo World</p>
</body>
</html>
=============================================
<!DOCTYPE html>
<html>
<head>
<title>Page Title & Heading Types</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
======================================================
3.Example of Paragraphs
<!--3.Example of Paragraphs-->
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
=====================================================
4.Example of Line Break
<!--4.Example of Line Break-->
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
====================================================
5.Example of Centring Content
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
========================================================
6.Example of Horizontal Line
<!--6.Example of Horizontal Line-->
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
=======================================================
7.Example of Preserve Formatting
<!--7.Example of Preserve Formatting-->
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
=========================================================
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>
================================================================
9.Example of Style Attribute
<!--9.Example of Style Attribute-->
<!DOCTYPE html>
<html>
<title>Style Attribute</title>
<body>
<body style="background-color:powderblue;">
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>
</body>
</html>
===============================================================
10.Example of Text Formatting
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
=====================================================================
11.Example of Insert Image File
<!--11.Example of Insert Image File-->
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>
==============================================================
12.Example of Set Image Width/Height
<!--12.Example of Set Image Width/Height-->
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>
====================================================================