Nov 2017

Hyper Text Markup Language (HTML)

how to use html language


All HTML documents must begin with opening tag <html> and ending with </html>

Head section :

This section is sued to display the title of the HTML document.  This section begins with opening tag <head> and ending with </head>


The title of the HTML document is defined wit the tags.  This wll be displayed din the title bar of the window.

Body section :

This section is used to display information in the Web page.  This section begins with <body> and ending with </body>





<title> Welcome to MU College,/title>



Courses offered

B.A Corporate Economics

B.Sc Mathematics

B.Sc Computer science

B.Com Corporate secretaryship



B,Sc Microbiology

B.Com Computer Application

B.A Functional English

B.Sc information system Management

M.Sc Information Technology





Basic tags in HTML :

Some of the important tags in HTML are as follow: 

Bold: <b>–</b>

This tag is used to display the given text in bold leters.


<b> Welcome to MU College</b>

Output: Welcome to MU college


Italic: <i>….</i>

This tag is used to display the given text as italics


<i> Welcome to MU college….</i>

Output: Welcome to MU college


Body tag <BODY> :

The BODY tag contains all the text and graphics of the document with all the HTML tags that are used for control and formatting of the page.

The Format is:


Your Document goes here



Attributes used with <Body>

ΦBGCOLOR: used to set the background color for the document


<BODY BGCOLOR=”yellow”>

Your Document goes here


Φ TEXT: Used to set the color of the text of the document


<BODY TEXT=”red”>

Document text changed to red color



Φ MARGINS: Set the left hand/right hand margin of the document.
ΦLEFT MARGIN : Set the left had margin of the document



This document is indented 60 pixels from the left hand side of the page


Φ TOP MARGIN : Set the left had margin of the document



This document is indented 60 pixels from the Top of the page



Φ Background: It is used to point to an image file (The files with an extension .gif, jpeg) that will be used as the background of the document.  The image file will be tiled across the document.


<BODY BACKGROUND=”filename.gif’>

Your document text goes here


Center: <center>–</center>

This tag is used to center the given text

Example <center> Welcome to MUCollege</center>

Output: Welcome to MUCollege


Paragraph: <p>–V/p>

This tag is used to begin a new paragraphs.

<p. tag attributives

The general format is <p align=”Value”>

If Value = left, it aligns the left paragraph

If Value = right, it aligns the Right paragraph

If Value = Center, it aligns the Center paragraph

If Value = Justify, it aligns the Justify paragraph

Example: <p align=”right”>

In the above tag, align the paragraph as right

Horizontal: <hr> tag

This tag is used to draw a horizontal line from left to right.


Introduction to Information Technology

<hr> By Rizwan Ahmed

Output: Internet and its application

By Rizwan ahmed


Font: <Font>–</Font>

This tag is used to specify the size of the font and color of the text to be displayed.  The general format is

<font attribute=”Value”>




Font Attribute

Face – This attribute is used to see the type of font

Color – This attribute is used to set the specific color to the font.

Size – This attribute is used to set the size of the font


<font face=”Arial” color=”red”size=”11” computer is an electronic device </font>

Out put: Computer is an electronic device



Header tags are used to give heading in HTML document.  HTML has six header tags <H1>, <H2> ……<H6> used to specify section heading. Text with header tags is displayed in larger and bolder fonts than the normal boxy text by a web browser.  Every header leaves a blank line above and below it when displayed in browser.

There are six levels of heading tags in HTML, Namely








Example :



<Title> Example of Header Tags </Title>



<h1> Level 1 MUCollege</h1>

<h2> Level 2 MUCollege --</h2>

<h3> Level 3 MUCollege --</h3>

<h4> Level 4 MUCollege --</h4>

<h5> Level 5 MUCollege --</h5>

<h6> Level 6 MUCollege --</h6>



The output of the above program is shown here




Web pages are linked to one another through Hypertext link a link is a part of document.  If it is clicked another page (document) will be displayed.

HTML Provides <A> Anchor Tag to create links.  The format of using anchor tag is as follows:

<A href=”URL”>



HREF (Hyper link Reference) is a mandatory attribute used to refer the URL of the rescue. URL (Uniform Resource Locator) is an address tells the browser about the file to link to.  It identifies file location (Addresses) on the web or on the local had drive.  It is always enclosed in quotes.


Write a HTML code to Linking a text to a web site.



<title> Creating Links </title>



<h1> Linking a text to a web site <h1>

<p><a href==:”>click here </a></p>

<p><a href==:”>Gmail </a></p>

<p><a href==:”>Yahoo! </a></p>


Linking a text to a web site

Click here




In the above example the link text “click Here”, “Gmail” and “Yahoo” would appear underlined and in a color different from any other text in the document to distinguish a link from normal text.  Also you would find that the mouse pointer changes into a had like symbol when taken over the hyperlink


Images :

Images can be placed in a web page by using <IMG> tag.  There are many image formats available today, but the most widely used among them are gif (Graphics interchange Format) and jpeg (joint photographic expert Group) the general format of the image tag is as follows:

<IMG SRC = image_URL>


SRC – Source of the image file

Image_URL –represents the image file with its location

Note: The SRC attribute is mandatory for the <Image> tag.


Other attributes used with <IMG> are follows:

ALIGN                        –           Used to set the Alignment of the text adjacent to the image,

It takes the following values:

ALIGN=LEFT           –           Displays image on left side and the subsequent

Text flows around the right hand side of that


ALIGN=RIGHT         –           Displays image on right side and the

subsequent   text flows around the left hand

side of that  image.

ALIGN=TOP             –           Aligns the text with the top of the image.

ALIGN=BOTTOM    –           Aligns the text with the bottom of the image.

HEIGHT and WIDTH         Height and width of an image can be controlled by using the

HEIGHT and WIDTH  attributes in the <IMG> tag as follows

HSpace and VSPACE      White space around as image can be provided by using

HSPACE (Horizontal space) and VSPace (Vertical Space)

attributes of the <IMG> tag. These attributes provide the


space  in pixels.





<Title> Inserting Images in HTML document </title>



<img src=”C:\Documents and Settings Home\My document\ Mypicures\ Bus2.jpg”align =left height=500


<img src=”C:\Documents  and Settings Home \My document\ My picutes\ Bus2.jpg”align =left height=500







Special character and line breaks

When marking up text, certain characters or symbols (eg., <) may be difficult to embed directly into an HTML document.  There are certain special characters that can be used while creating document.  All the special character must be ended with a semicolon; following are some Special characters.


Symbols Entity
©, ® &copy, &reg
¼,½,¾ &frac14, &frac12, &frac34
+, <, >, <, > &divide, &lt, &gt, &le, &ge
& &samp
§ª© &spades, &Clubs, &hearts





<title> Special Characters </title>





The copyright symbol is : &copy;

The registered rank is &REG;

The fraction parts are: &frac14, &frac12, &frac34

The special symbols are &Divide, &lt, &gt, &le, &ge

The spad, Club and hearts are: &spades, &clubs &hearts





Line Break :

The line break tag <BR> is used, where the text needs to start from a new line and not continue on the same line.  The get evry sentence on a new line, it is necessary to sue a line break.




<title> Line Break </title>



St.Joseph’s College of Arts and Science (Autonomus) <BR>

St.Joseph’s College Road <BR>

Coddalore – 607 001




The output of the aboe program is shown here:

St.Joseph’s College of Arts and Science (Autonomous)

St.Joseph’s College Road

Cuddalore – 607 001.


Unordered Lists

Unordered list also called as bulleted list is used to present list of items marted with bullets.  An unordered list starts with in <UL> followed by <L1> (list item) tag.

In an unordered list the information are preceded by any one of the following bullets.

Circle   o

Disc    ·



The general fort of the unordered list is as follows:


<L1> item1

<L1> item2

<L1> item3






<title> Example ordered List </title>



<ul type = “square”>






<ul type =”circle”>














The Output of the above programe is shown here

  • C
  • C++
  • C
  • C++
  • C
  • C++
Simple HTML Programs

Exircise 1 Write a simple HTML Program



<h1> My first Heading</h1>

<p>My first paragraph</p>



The out put of the above program is shown here

My first Heading

My first paragraph


Exercise2: Write a simple code for HTml Headings



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


This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6



If You Want To Respond,Please Send Me An Mail

My Email ID :

Facebook Feed

Unable to display Facebook posts.
Show error

Error: Error validating application. Application has been deleted.
Type: OAuthException
Code: 190
Please refer to our Error Message Reference.