You are on page 1of 6

HYPER TEXT MARK UP LANGUAGE

The language used to develop web pages is called HYPER TEXT


MARK UP LANGUAGE
(html). HTML is the language interpreted by a web browser. Web
pages are called HTML documents. HTML is a set of special codes
that can be embedded directly into the text to add formatting and
linking information. HTML is specified as tags in an HTML document.

HTML TAGS

Tags are the instructions that are embedded directly into the text of
the document. An HTML tag is a signal to a browser that it should do
something other than just throw text up on the screen. By
convention all HTML tags begin with an open angel bracket (<) and
end with an close angel bracket (>).

HTML tags can be of two types:

PAIRED TAGS: A tag is said to be a paired tag if comes with a


companion tag, flanks the text. For example <B> tag is a paired tag
with its companion tag </B> causes the text contained between
them to be rendered in bold. In paired tag the first tag (<B>) is
often called the opening tag and the second tag (</B>) is called the
closing tag.
The opening tag activates the effect on and the closing tag turns
the effect off.

SINGULAR TAGS: The second type of the tag is the singular tag or
stand-alone tag. A stand-alone tag does not have a companion
tag. For example <BR> tag will insert a line break. This tag
does not require any companion tag.

THE STRUCTURE OF HTML PROGRAM

Every HTML program has a rigid structure. The entire web page is
enclosed with <HTML> </HTML> tags. Within these tags
two distinct sections are created using the <HEAD> </HEAD>
tag and the <BODY> </BODY> tags. These sections are
described below.
DOCUMENT HEAD:
Information placed in this section is essential to the inner working
of the document and has nothing to do with the content of the
document. With the exception of the information contained
witHin the <TITLE> </TITLE> tags, all the information placed
within the <HEAD> </HEAD> tags is not displayed in the
browser. It is indicated in the title bar.
<HEAD>
<TITLE>……………… </TITLE>
</HEAD>
DOCUMENT BODY:
The tag used to indicate the start and end of the main body of the
textual information are:

<body>
----------
-----------
-------------
</body>
Page defaults like background color, text color can be specified as
attribute of the body tag. The attributes that the <BODY> tag
takes are:
1. BGCOLOR: Changes the default background color to whatever
color is specified with this tag. The user can specify the a color
by name.
2. BACKGROUND: specifies the name of the gif file that will be
used as the background of the document.
3. TEXT: changes the body text color from its default value to the
color specified with this attribute.
Example:

<BODY BACKGROUND=”STARFIED.GIF” TEXT=RED>

NOTE: ALL THE CODE IS WRITTEN INTO A NOTE PAD AND TO SAVE
IT WE USE THE FILE EXTENSION .HTML. FOR EXAMPLE:
SUKHI.HTML

TEXT FORMATTING

PARAGRAPH BREAKS:

A blank line always separates paragraph in textual material. The


tag that provides this functionality is <P>. on encountering this
tab the browser moves onto a new line, skipping one line
between the previous line and the new line.
For example:

Delta Engineering Pvt. Ltd. is a specialist manufacturer of wire and wire


products. DEPL established in Mumbai, India is ideally located for shipments
to any part of the world. The main items of manufacture, in collaboration
with Gulf Fencing Industry (GFI) include protector gabions and protector
fencing systems. <P>Protector fencing systems offer a wide range of solutions
to all security problems on any terrain and under extreme climatic
conditions. Protector fencing system has been used extensively in Europe,
America and the Far East, and this has helped formulate a package especially
suited to Middle East requirements.

Output:
Delta Engineering Pvt. Ltd. is a specialist manufacturer of wire and wire
products. DEPL established in Mumbai, India is ideally located for shipments
to any part of the world. The main items of manufacture, in collaboration
with Gulf Fencing Industry (GFI) include protector gabions and protector
fencing systems.

Protector fencing systems offer a wide range of solutions to all security


problems on any terrain and under extreme climatic conditions. Protector
fencing system has been used extensively in Europe, America and the Far East,
and this has helped formulate a package especially suited to Middle East
requirements.

LINE BREAKS:
When text needs to start from a new line and not continue on the
same line(without skipping a blank line), the <BR> tag is used.
This tag simply jumps to the start of the next line.

For example:
Hello<BR> hoe are u<BR> welcome to my site.

Output:
Hello
How are u
Welcome to my site.

EMPHASIZING MATERIAL IN A WEB PAGE

Document pages are usually divided into sections and sub sections ,
which needs to be emphasized. HTML provides certain heading
styles and horizontal rules, which helps break text into logical
sections with visual appeal.

Heading Styles: HTML supports six different levels of heading. The


highest – level header format is <H1>. And the lowest level is <H6>.
All the styles appear in boldface and the size of the heading
depends on the level chosen.
For example:
<h3> The early years</h3>
Output:
The early years
Drawing lines: The <HR> tag draws lines and horizontal rules. This
tag draws a horizontal line across the whole page, wherever
specified. The attributes to the <HR> tag are:
1. ALIGN: aligns the line on the screen, which is by default
aligned to the center of the screen. It has three different
values left, right and center.
2. SIZE: changes the size of the rule.
3. WIDTH: sets the width of the rule. We can set any no.
1,2,3,-----.

TEXT STYLES:
BOLD: displays the text in bold face.
<B>----------</B>
ITALICS: displays the text in italics.
<I>-----------</I>
UNDERLINED: displays text as underlined.
<U>-----------</U>
CONTROLLING FONT SIZE AND COLOR:

All the text specified within the tags <FONT> and </FONT> will
appear in the font, size and color as specified as attributes of the
tag <FONT>. The attributes are:

1. FACE: sets the font to the specified font name.


2. SIZE: sets the size of the text in numbers by default it is 3.
3. Color: sets the color of the text.
For example:
<FONT FACE=”TIMES NEW ROMAN” SIZE=6
COLOR=RED>-----------------------------</FONT>

LIST

TYPES OF LISTS

UNORDERED LIST(BULLETS)
An unordered list start with the tag <UL> and ends with </UL>.
Each list item starts with the tag <LI>. The attributes that can be
specified with <li> are
1. Type: specifies the type of the bullet.
Type= fillround will give a solid round black bullet.
Type=square will give a solid square black bullet.
For example:
Some of these products include:
<UL TYPE=FILLROUND>
<LI>FLOPPIES
<LI>HARD DISK
<LI>MONITER
</UL>
OUTPUT:
Some of these products include:
• FLOPPIES
• HARD DISK
• MONITER

ORDERED LIST:
An ordered list start with the tag <OL> and ends with </OL>. Each
list item starts with the tag <LI>. The attributes that can be
specified with <li> are:

1. Type: controls the numbering scheme to be used.(1, A, a, I,i)


2. Start: alters the numbering sequence. Can be set to any
numeric value.
3. Value: changes the numbering sequence in the middle of
the ordered list. It is to be specified with the <LI> tag.

For example:
Some of these products include:
<OL TYPE=”1” START=3>
<LI>FLOPPIES
<LI VALUE=7>HARD DISK
<LI>MONITER
</OL>
OUTPUT:
Some of these products include:
1. FLOPPIES
7. HARD DISK
8. MONITER

DEFINITION LIST:
Definition list values appear with in tags <DL> & </DL>.definition
lists consist of two parts.
1. Definition term: appears after the <DT>.
2. Definition description: appears after the <DD>
FOR EXAMPLE:

<DL>
<DT> KEYBOARD
<DD> AN INPUT DEVICE
<DT> PRINTER
<DD> AN OUTPUT DEVICE
</DL>
OUTPUT:
KEYBOARD
AN INPUT DEVICE
PRINTER
AN OUTPUT DEVICE

FEATURE OF MS-WORD:

Open File
Bold, Underline, and Italicize
Highlighting Text
Changing Font Color
Cut and Paste
Cutting and Pasting by Using the Standard Toolbar
Cutting by Using the Icon
Coping by Using the Icon
Pasting by Using the Icon
Using AutoText Cut and Copy
Inserting Text
To change to the Insert mode
To Overtype
MAIL MERGE
INSERTING CHARTS, IMAGES, GRAPHICS
UNDO AND REDO
SETTING LINE SPACING
FIND AND REPLACE
HEADER AND FOOTER