All IT Courses 50% Off
QA Tutorials

HTML – HyperText Markup Language

HTML is expanded as HyperText Markup Language and it is vast and widely used languages to design the web pages. Hypertext refers to the way in which all web pages are linked together and the link available on webpage are called hypertext. HTML is a markup language which means it is used to “mark-up” a text document with tags that says the web browser how to structure it on web page.  HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists and also to improvise the sharing of information between pages.

HTML is being widely used to format web pages with the help of different tags that are available in HTML Language. The basic HTML document structure is:

<!DOCTYPE html>

<html>

<head>
<title>This is document title</title>
</head>

<body>
<h1>This is a heading</h1>
<p>Document content goes here….</p>
</body>

</html>

The output is

HTML - HyperText Markup Language

All HTML documents should start with a type declaration:

<! DOC TYPE html>.

The html document itself begins with <html> and ends with </html>. The visible part of HTML document is between <body> and </body>.

HTML editors:

We can learn HTML by creating it in notepad software. Webpages can also be created and modified by using professional HTML editors. For learning HTML, we recommend a simple text editor like Notepad (PC) or Text edit in Mac.

The steps to create a HTML program are:

  1. Click on start button on the screen.
  2. Click on programs-Accessories –Notepad.
  3. Type the program and save with an extension of .htm
Notepad
View in Browser
  1. Open the saved file in any browser by double click on that particular file. 
View in Browser

HTML headings:

Html headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading <h6> defines the least important heading

<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>

HTML - HyperText Markup Language

HTML paragraphs:


To create a paragraph in HTML we use <p> tags. For example

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
HTML - HyperText Markup Language

HTML links

HTML links are defined by <a>tag. For example

<a href=”https://www.iitworkforce.com”>This is a link</a>

HTML - HyperText Markup Language

HTML Images:

HTML images are defined with the <img> tag. The source file src and alternate height and width are provided are provided with attributes.

<img src=”C:\Users\Public\Pictures\Sample Pictures\Desert.jpg” width=”104″ height=”142″>

HTML - HyperText Markup Language

HOW to create first HTML webpage?

<!DOCTYPE http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!-- 
#Layer1 { 
position:absolute; 
width:1104px; 
height:169px; 
z-index:1; 
background-image: url(images/forest03.jpg); 
background-color: #84A810; 
left: 11px; 
top: 10px; 
} 
#Layer2 { 
position:absolute; 
width:176px; 
height:89px; 
z-index:2; 
top: 187px; 
left: 12px; 
background-color: #C4DDE1; 
} 
#Layer3 { 
position:absolute; 
width:924px; 
height:39px; 
z-index:3; 
left: 191px; 
top: 183px; 
background-color: #D1F172; 
} 
#Layer4 { 
position:absolute; 
width:845px; 
height:164px; 
z-index:4; 
left: 191px; 
top: 223px; 
background-color: #CCD191; 
} 
.style1 { 
color: #A65353; 
font-style: italic; 
} 
#Layer5 { 
position:absolute; 
width:178px; 
height:471px; 
z-index:5; 
top: 182px; 
background-color: #84A810; 
} 
#Layer6 { 
position:absolute; 
width:844px; 
height:260px; 
z-index:6; 
left: 191px; 
top: 394px; 
background-color: #CCD191; 
} 
.style2 { 
color: #FFFFFF; 
font-weight: bold; 
} 
.style6 {color: #FF00FF} 
.style7 {color: #512828} 
#Layer7 { 
position:absolute; 
width:1026px; 
height:45px; 
z-index:1; 
left: 0px; 
top: 469px; 
background-color: #C4DDE1; 
} 
.style8 { 
color: #990033; 
font-weight: bold; 
} 
.style10 { 
color: #EBFBFC; 
font-weight: bold; 
} 
body { 
background-image: url(images/adminmnu_top.gif); 
} 
.style11 { 
color: #330099; 
font-family: "Monotype Corsiva"; 
} 
-->
</style>
</head>
<body>
<div id="Layer1"></div>
<div id="Layer3">
<h2 align="center" class="style1"><marquee>
<span class="style11">SHIKRA RESORT 
</span>
</marquee></h2>
</div>
<div id="Layer4"><imgsrc="images/184125,xcitefun-rabbits7.jpg" width="201" height="169" /><imgsrc="images/shikra1.jpg" width="201" height="169" /><imgsrc="images/meerpagar-tree-green-forest-bird.jpeg" width="201" height="169" /><imgsrc="images/pic01.gif" width="240" height="169" /></div>
<div id="Layer5">
<div id="Layer7">
<div align="center" class="style8">Shikra</div>
</div>
<table width="177" border="1">
<tr>
<td><div align="left"><span class="style10">Home</span></div></td>
</tr>
<tr>
<td><span class="style10">Activities</span></td>
</tr>
<tr>
<td><span class="style10">Photo gallery</span></td>
</tr>
<tr>
<td><span class="style10">Tariff details </span></td>
</tr>
<tr>
<td><span class="style10">Booking</span></td>
</tr>
<tr>
<td><span class="style10">Contact us</span></td>
</tr>
<tr>
<tr>
<td><span class="style10">Login</span></td>
</tr>
</table>
</div>
<div id="Layer6">
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="style2">&nbsp;&nbsp;<span class="style6">&nbsp; <span class="style7">The main objective of African forest is to provide information regarding various forests situated in India and animals residing in the forest.In addition to that it also provides time and visiting season as well as map of the forest to tourists who wants to visit.<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This project helps people who are interested in wild animals so that they can visit in perfect season.<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This project is to make the forest information to be done online.As the animal and bird species are decreasing day by day, it is nessasary to provide awareness for future generation also.So using this project user can directly get the information regarding&nbsp; forest .<br />


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; One of the major revenue of the forest&nbsp; is Sandalwood.Forestdeparment keep track of all the information related to sandalwood and its products.his project provides details about sandalwood products.The administrator is provided with the more information&nbsp; about the project&nbsp; and can make further more changes to the project.</span></span></span></p>
</div>

</body>
</html>
HTML - HyperText Markup Language

Facebook Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Back to top button
Close
Close

Get Python Course
worth 499$ for FREE!

Offer valid for 1st 20 seats only, Hurry up!!

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

H2kinfosys Blog will use the information you provide on this form to be in touch with you and to provide updates and marketing.