Hyper Text Markup Language -

it’s a method that adds markup to text, no more, no less.

It can be compared to a Rich Text File or Word Document, with the difference that HTML can be coded by hand. An HTML document (like any other document) consists of “header” or “meta” information. This tells a program (the web browser) what to expect and how to deal with it.

The markup information in the actual document tells the browser to make text bold, italic, or part of a tabular range of data (inside a table).
The original HTML was nothing more than some meta information and the most important element, the *anchor*, which inserts a “hyperlink” (which allows you to click on text, and it’ll take you to an other location) – and that’s where the name “hypertext” came from.

Here are some basic programs on HTML
Heading Tag Demo

<html>
<body>
<h1> Heading one font size: mostly used for web page main heading </h1>
<hr> 
<h2> Heading two font size: used for sub heading  </h2>
<hr color=blue width="100%" size=4>
</body>
</body>

Font tag demo

<html>
<body>
<h1> Main Heading goes here </h1>
<hr> 
<p> <font face="tahoma" size="20" color="red"> Display text here </font> </p>
<hr color=blue width="100%" size=4>
</body>
</body>

Using HTML Forms

<html>
<head>
<title> Using Forms </title>
</head>
<body>
<h1> using Forms </h1>
<hr>
<form name=f1>
Enter Your Name: <input type=text name=t1 maxlength=20>
<br>
Enter Email ID: <input type=text name=t2 size=30 maxlength=10>
</form>
</body>
</html>

Using Hyperlinks

<html>
<head>
<title> Using Hyperlinks </title>
</head>
<body>
<h1 align=center> Using Hyperlinks </h1>
<a href="num.html"> Open num file </a>
<hr>
<a href="123.html"> open 123 web page </a>
</body>
</html>

Email and Image Hyperlinks

<html>
<head>
<title> Using Image Hyperlinks </title>
</head>
<h1> Using Hyperlinks </h1>
<hr>
<A HREF="123.HTML"> <img src="abt.bmp"> </a>
<hr>
<a href="num.html"> <img src="button.bmp"> </a>
<h2> Email Links </h2>
<a href="mailto: ravi.patil@yahoo.com"> Mail Me </a>
<h1> External Links </h1>
<a href="www.google.com"> open google site </a>
</body>
</html>

Using Bullets or Un-ordered list [UL]

<html>
<head>
<title>Inserting Bullets or Unordered List </title>
</head>
<body>
<h1> Inserting Bullets or Unordered List</h1>
<h3> Games </h3>
<ul type="disc"> 
<li> Cricket </li>
<li> Football </li>
<li> Billiards </li>
<li> Tennis </li> 
</ul>
<hr>
<ul type="circle">
<li> Cricket </li>
<li> Football </li>
<li> Billiards </li>
<li> Tennis </li> 
</ul>

<hr>
<ul type="square">
<li> Cricket </li>
<li> Football </li>
<li> Billiards </li>
<li> Tennis </li> 
</ul>
</body>
</html>

Using Numbering / Ordered list

<html>
<head>
<title> Using Numbers </title>
</head>
<body>
<h1> Daily News Papers </h1>
<hr>
<ol type="i" start="1">
<li> The Hindu </li>
<li> Deccan Herald </li>
<li> Indian Express </li>
</ol>
<h1> Daily News Papers </h1>
<hr>
<ol type="I" start="1">
<li> The Hindu </li>
<li> Deccan Herald </li>
<li> Indian Express </li>
</ol>
<h1> Daily News Papers </h1>
<hr>
<ol type="a" start="1">
<li> The Hindu </li>
<li> Deccan Herald </li>
<li> Indian Express </li>
</ol>
<h1> Daily News Papers </h1>
<hr>
<ol type="A" start="1">
<li> The Hindu </li>
<li> Deccan Herald </li>
<li> Indian Express </li>
</ol>
<h1> Daily News Papers </h1>
<hr>
<ol type="1" start="1">
<li> The Hindu </li>
<li> Deccan Herald </li>
<li> Indian Express </li>
</ol>
</body>
</html>

HTML Login form with java script validation

<html>
<head>
<script language="javascript">
function handle()
{
var str
str=document.f1.t1.value
if (str=="")
alert("Please enter user name")
document.f1.t1.select()
}
</script>
</head>
<body>
<h1 align=center> Login Screen </h1> <hR>
<form name=f1>
Enter User Name: <input type=text name=t1> <br>
Enter Password: <input type=password name=p1><br>
<input type=button name=b1 value="LogIn" 

onClick='handle()'> 
<input type=Reset name=b2 value="Cancel"> 
</form>
</body>
</html>

HTML Feedback form

<html>
<body bgcolor=silver>
<h1 align=center> Feedback Form  </h1>
<hr color=yellow size=5>
<center>
<form name=f1>
<table border=4 cellspacing=4 cellpadding=4 bgcolor=yellow>
<tr> 
<td> Enter Your name </td>
<td> <input type=text name=t1> </td> </tr>
<tr>
<td> Address </td>
<td> <textarea rows=3 cols=20> </textarea> </td> </tr>
<tr><td> Gender </td>
<td> <input type=radio name=gen value=Male> Male 
<input type=radio name=gen value=Femal> Female </td> 

</tr>
<tr>
<td> Select your country </td>
<td> <select name=s1> 
<option> India 
<option> America 
<option> Japan
<option> Indonesia 
<option> China
</select>
</td> </tr>
<tr> 
<td> Enter Your EmailID </td>
<td> <input type=text name=t2> </td> </tr>
<tr>
<td> Enter Phone No. </td>
<td> <input type=text name=t3> </td> </tr>
<tr> <td> Enter Your Comments </td>
<td> <textarea rows=6 cols=20> </textarea></td> </tr>
<tr>
<td> <input type=submit name=s2 value=Submit> </td>
<td> <input type=reset name=r1 value=Reset> </td> </tr>
</table>
</form>
</body>
</html>

Creating 3 columned FRAME in html [frame help us to divide the window into multiple rectangular boxes and each boxes can hold different web pages]

<html>
<head>
<frameset cols="30%, 30%, 40%">
<frame name=f1 src=tabing.html>
<frame name=f2 src=table2.html>
<frame name=f3 src=table3.html>
</frameset>
</head>
</html>

Creating 2 columned frame

<html>
<head>
<frameset cols="40%, 60%">
<frame name=f1 src=tab.html>
<frame name=f2 src=ulol.html>
</frameset>
</head>
</html>

Nested FRAME in HTML [a frame inside another frame]

<html>
<head>
<frameset rows="20%, 80%">
<frame name=f1 src=tabing.html>
<frameset cols="20%, 80%">
<frame name=f2 src=table2.html>
<frame name=f3 src=table3.html>
</frameset>
</frameset>
</head>
</html>

Style sheets : inline style sheet example [collection of formatting features like text color, size and alignment etc are called style sheets. Style sheet can be inline or embedded from externally]

<html>
<head>
<style>
h1{color:red}
h2{color:green}
h3{color:blue}
p{color:cyan}
</style>
</head>
<body>
<h1> This is Heading 1 font </h1>
<h2> This is Heading 2 font </h2>
<h3> This is Heading 3 font </h3>
<p> This is Paragraph Tag </p>
</body>
</html>

Inline style sheet with ID [#] selector

<html>
<head>
<style>
#raj{color:red}
#sam{color:green}
</style>
</head>
<body>
<h1 id="sam"> This is Heading 1 font </h1>
<h2 id="raj"> This is Heading 2 font </h2>
<h3> This is Heading 3 font </h3>
<p id="raj"> This is Paragraph Tag </p>
<h1 id="raj"> This is new heading </h1>
</body>
</html>

Contextual selector

<html>
<head>
<style>
body{background:yellow; 
font-face:tahoma; font-style:bold}
ul{color:green}
ol{color:cyan}
</style>
</head>
<body>
<h1> HTML style tags </h1>
<ul type=circle>
<li> India </li>
<li> America </li>
</ul>
<ol type="I" start="3">
<li>India </li>
<li> America </li>
</ol>
</body>
</html>

Applying style features with calling external style sheet [.css file]

<html>
<head>
<link rel="stylesheet" type="text/css" href="stc3.css">
</head>
<body>
<h1> Hello world </h1>
<ol type="a" start="1">
<li> Software </li>
<li> Hardware </li>
</ol>
<ul type="square">
<li> Software </li>
<li> Hardware </li>
</ul>
<a href="aaaa.html"> open file </a>
<h2> This also heading 2 </h2>
<table border=4 cellspacing=2 cellpadding=2>
<tr> 
<td> Software </td> </tr>
<tr><td> Visual Basic </td> </tr>
<tr> <td> .Net Programming </td> </tr>
<tr> <td> Java Programming </td> </tr>
</table>
</body>
</html>

Related Posts

1 thought on “Hyper Text Markup Language”