Nov 2017
03

Hyper Text Markup Language (HTML)

how to use html language

<html>……</html>

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>

<title>…..</title>

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>

 

Example

<html>

<head>

<title> Welcome to MU College,/title>

</head>

<Body>

Courses offered

B.A Corporate Economics

B.Sc Mathematics

B.Sc Computer science

B.com

B.Com Corporate secretaryship

BCA

BBA

B,Sc Microbiology

B.Com Computer Application

B.A Functional English

B.Sc information system Management

M.Sc Information Technology

M.Com

</body>

</html>

 

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.

Example:

<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

Example

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

<BODY>

Your Document goes here

</BODY>

 

Attributes used with <Body>

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

Example:

<BODY BGCOLOR=”yellow”>

Your Document goes here

</BODY>

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

Example:

<BODY TEXT=”red”>

Document text changed to red color

</Body

 

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

Example:

<BODY LEFTMARGIN=”60”>

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

</BODY>

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

Example:

<BODY TOPMARGIN=”60”>

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

</BODY>

 

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

Example:

<BODY BACKGROUND=”filename.gif’>

Your document text goes here

</BODY>

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.

Example:

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

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

Example

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

Out put: Computer is an electronic device

 

Header

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

<H1>--</h1>

<H2>--</h2>

<H3>--</h3>

<H4>--</h4>

<H5>--</h5>

<H6>--</h6>

 

Example :

<Html>

<Head>

<Title> Example of Header Tags </Title>

</head>

<Body>

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

</Body>

</Html>

The output of the above program is shown here

Level1MUCollege
Level2MUCollege
Level3MUCollege
Level4MUCollege
Level5MUCollege
Level6MUCollege

 

 Linking

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

Text

</A>

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.

Examples

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

<html>

<head>

<title> Creating Links </title>

</head>

<body>

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

<p><a href==:http://www.unom.ac.in”>click here </a></p>

<p><a href==:http://www.gmail.com”>Gmail </a></p>

<p><a href==:http://www.yahoo.com”>Yahoo! </a></p>

</body>

</html?
Linking a text to a web site

Click here

Gmail

Yahoo!

 

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>

Where

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

Image.

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.

Example

 

<html>

<head>

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

</head>

<body>

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

Width=300>

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

Width=300>

</body>

</html>

 

 

 

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

 

Example

<html>

<head>

<title> Special Characters </title>

</head>

</body>

<PRE>

 

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

</PRE>

</body>

</html>

 

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.

Example

<html>

<head>

<title> Line Break </title>

</head>

<Body>

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

St.Joseph’s College Road <BR>

Coddalore – 607 001

<,/body>

</html>

 

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    ·

Square

 

The general fort of the unordered list is as follows:

<ULtype=”value”>

<L1> item1

<L1> item2

<L1> item3

</UL>

 

Example

<html>

<head>

<title> Example ordered List </title>

</head>

<body>

<ul type = “square”>

SQUARE

<li>C.</li>

<li>C++</li>

<li>DOTNET.</li>

</ul>

<ul type =”circle”>



CIRCLE

li>C.</li>

<li>C++</li>

<li>DOTNET.</li>

</ul>

<UL TYPE=”DISC”>

DISC

li>C.</li>

<li>C++</li>

<li>DOTNET.</li>

</ul>



</body>

</html>



The Output of the above programe is shown here

SQUARE
  • C
  • C++
  • DOTNET
CIRCLE
  • C
  • C++
  • DOTNET
DISC
  • C
  • C++
  • DOTNET
Simple HTML Programs

Exircise 1 Write a simple HTML Program

<html>

<body>

<h1> My first Heading</h1>

<p>My first paragraph</p>

</body>

<html>

The out put of the above program is shown here

My first Heading

My first paragraph

 

Exercise2: Write a simple code for HTml Headings

<htom>

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

 

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 : mothi@mydigitalline.com

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.

Newsletter