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

All IT Courses 50% Off

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

8 Comments

  1. HTML stands for Hyper Text Markup Language
    HTML is the standard markup language for creating Web pages
    HTML describes the structure of a Web page
    HTML consists of a series of elements
    HTML elements tell the browser how to display the content
    HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc

  2. I tried running the lines of code that was given to create the website regarding saving Africa’s forests, however it did not run in Notepad++. Was it mainly because I didn’t have the correct extensions or images of the file?

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

    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:

    Click on start button on the screen.
    Click on programs-Accessories –Notepad.
    Type the program and save with an extension of .htm

  4. HTML is expanded as Hyper Text 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.
    All HTML documents should start with a type declaration:
    .
    The html document itself begins with and ends with . The visible part of HTML document is between and .

  5. 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 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.
    The steps to create a HTML program are:

    Click on start button on the screen.
    Click on programs-Accessories –Notepad.
    Type the program and save with an extension of .htm

  6. HTML : HyperText Markup Language
    HTML is used to create web pages. It is used to link web pages together and link is available on the web pages is called hypertext. 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.

    The structure of HTML :

    THIS IS HEADING

  7. 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 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.
    The steps to create a HTML program are:

    Click on start button on the screen.
    Click on programs-Accessories –Notepad.
    Type the program and save with an extension of .htm

  8. HTML is expanded as HyperText Markup Language and it is a vast and widely used language to design web pages. Hypertext refers to the way in which all web pages are linked together and the link available on the 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 the 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.

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
H2kinfosys Free Demo Online Training