|
Hi. And
welcome back to lesson number two of HTML BASICS. In the last lesson you
learnt about placing tags and manipulating text in terms of bold, italic and
typewriter styles. You also learnt about the <HR>, <BR> and
<P> commands. In this article we shall explore some more basic text
tags and how you can manipulate text to a greater extent.
The
Headline Tag
The
headline tag tells the browser to display the text that follows it as a
headline. There are 6 different levels of headlines, from H1 to H6. Some are
bold, some are not. The size and attribute depend on your browser.
<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>
<H1>
is the largest and <H6> is the smallest. Try
a few for yourself.
The
Font Tag
Font
tags give you more control over the way you want your text to be presented
and can be said to be the workhorses of the tag commands.
<FONT
SIZE = +X/-X FACE = “FACENAME, FACENAME2, FACENAME3” COLOR = XXX”>
The
font tag tells the browser to display the text that follows it at the
specified size, face and color. Font tags must be both turned off and turned
on. For e.g.:
<FONT
SIZE = +1 FACE = HELVETICA” COLOR = TEAL> Hello World! </FONT>
The
font tag has 3 switches:
1.
Size
The size is measured in relative units, plus or minus from the current size.
For e.g.:
<FONT SIZE = +1> Text Here </FONT>
This tells the browser to use a size one unit larger than the current size.
Setting the size switch to minus one (SIZE = -1) tells the browser to use a
size one unit smaller than the current size.
2.
Face
Text can also be specified to appear in a particular typeface. The browser
looks at the text specified and matches it to a font on the users computer.
Specify a face by using the face switch, and putting the name of the font in
quotes like this:
<FONT FACE = “COURIER”>
Use faces carefully. Having a particular font on your system does not mean
everyone will have that font too. One should probably limit the faces
specified to those that are system standards, such as Courier, Arial,
Helvetica, or Times. You can also list a series of possible typefaces. The
browser will look for them in order and use the first one that it finds.
List each face, separated by a comma, like this:
<FONT FACE = “FUTURA, HELVETICA, ARIAL”> Write Text Here
</FONT>
3.
Colour
The colour can be specified in two ways: as a hexadecimal value or as a
defined colour name. The colour variable should be within quotation marks.
<FONT COLOUR = “RED”> Seeing RED </FONT>
The
Blockquote Tag
The
blockquote tag tells the browser to indent the text that follows it. The
blockquote tag must be both turned on and turned off. For example:
<BLOCKQUOTE>
It’s a beautiful day. The sun is shining. </BLOCKQUOTE>
The
Center Tag
<CENTER>
All
text in here will be centered
</CENTER>
Text
can be centered as seen above by making use of the center tag. It must be
turned on and turned off. For e.g.: <CENTER>
Hello World! </CENTER>
Text
To The Right
Can
you get text to the right? Sure. It's done by setting the text aside as a
paragraph unto itself. I'm going to use the <P> command you learned in
Lesson - 1, but now I'm going to alter it. I'm going to add an attribute to
it.
Here's
the format:
<P ALIGN="right">Text in
here is pushed to the right</P>
See
how I added the ALIGN="right" attribute to the <P> command?
Okay, but you also have to remember that if you add an attribute to a single
tag like the <P> flag, or the <BR> tag (yes, there are
attributes for BR), then you'll need to use an end tag. See the </P>
up there?
If
you're just using <P> to create a new paragraph, then it can sit all
by its itself. But the moment you add an attribute=, you need to use the end
tag.
(“Attribute”
is a technical HTML term. When you have that, you denote the attribute with
an equal sign and enclose it within quotation marks.)
The
Complete Colour Code
Feel
free to use these colour codes when you specify the colour in your font tags
or background colours. Express yourself and enjoy!
|
Aliceblue
F0F8FF
|
Antiquewhite
FAEBD7
|
Aqua
00FFFF
|
|
Aquamarine
7FFFD4
|
Azure
F0FFFF
|
Beige
F5F5DC
|
|
Bisque
FFE4C4
|
Black
000000
|
Blanchedalmond
FFEBCD
|
|
Blue
0000FF
|
Blueviolet
8A2BE2
|
Brown
A52A2A
|
|
Burlywood
DEB887
|
Cadetblue
5F9EA0
|
Chartreuse
7FFF00
|
|
Chocolate
D2691E
|
Coral
FF7F50
|
Cornflowerblue
6495ED
|
|
Cornsilk
FFF8DC
|
Crimson
DC143C
|
Cyan
00FFFF
|
|
Darkblue
00008B
|
Darkcyan
008B8B
|
Darkgoldenrod
B8860B
|
|
Darkgray
A9A9A9
|
Darkgreen
006400
|
Darkkhaki
BDB76B
|
|
Darkmagenta
8B008B
|
Darkolivegreen
556B2F
|
Darkorange
FF8C00
|
|
Darkorchid
9932CC
|
Darkred
8B0000
|
Darksalmon
E9967A
|
|
Darkseagreen
8FBC8F
|
Darkslateblue
483D8B
|
Darkslategray
2F4F4F
|
|
Darkturquoise
00CED1
|
Darkviolet
9400D3
|
deeppink
FF1493
|
|
Deepskyblue
00BFFF
|
Dimgray
696969
|
Dodgerblue
1E90FF
|
|
Firebrick
B22222
|
Floralwhite
FFFAF0
|
Forestgreen
228B22
|
|
Fuchsia
FF00FF
|
Gainsboro
DCDCDC
|
Ghostwhite
F8F8FF
|
|
Gold
FFD700
|
Goldenrod
DAA520
|
Gray
808080
|
|
Green
008000
|
Greenyellow
ADFF2F
|
Honeydew
F0FFF0
|
|
Hotpink
FF69B4
|
Indianred
CD5C5C
|
Indigo
4B0082
|
|
Ivory
FFFFF0
|
Khaki
F0E68C
|
Lavender
E6E6FA
|
|
Lavenderblush
FFF0F5
|
Lawngreen
7CFC00
|
Lemonchiffon
FFFACD
|
|
Lightblue
ADD8E6
|
Lightcoral
F08080
|
Lightcyan
E0FFFF
|
|
Lightgoldenrodyellow
FAFAD2
|
Lightgreen
90EE90
|
Lightgrey
D3D3D3
|
|
Lightpink
FFB6C1
|
Lightsalmon
FFA07A
|
Lightseagreen
20B2AA
|
|
Lightskyblue
87CEFA
|
Lightslategray
778899
|
Lightsteelblue
B0C4DE
|
|
Lightyellow
FFFFE0
|
Lime
00FF00
|
Limegreen
32CD32
|
|
Linen
FAF0E6
|
Magenta
FF00FF
|
Maroon
800000
|
|
Mediumauqamarine
66CDAA
|
Mediumblue
0000CD
|
Mediumorchid
BA55D3
|
|
Mediumpurple
9370D8
|
Mediumseagreen
3CB371
|
Mediumslateblue
7B68EE
|
|
Mediumspringgreen
00FA9A
|
Mediumturquoise
48D1CC
|
Mediumvioletred
C71585
|
|
Midnightblue
191970
|
Mintcream
F5FFFA
|
Mistyrose
FFE4E1
|
|
Moccasin
FFE4B5
|
Navajowhite
FFDEAD
|
Navy
000080
|
|
Oldlace
FDF5E6
|
Olive
808000
|
Olivedrab
688E23
|
|
Orange
FFA500
|
Orangered
FF4500
|
Orchid
DA70D6
|
|
Palegoldenrod
EEE8AA
|
Palegreen
98FB98
|
Paleturquoise
AFEEEE
|
|
Palevioletred
D87093
|
Papayawhip
FFEFD5
|
Peachpuff
FFDAB9
|
|
Peru
CD853F
|
Pink
FFC0CB
|
Plum
DDA0DD
|
|
Powderblue
B0E0E6
|
Purple
800080
|
Red
FF0000
|
|
Rosybrown
BC8F8F
|
Royalblue
4169E1
|
Saddlebrown
8B4513
|
|
Salmon
FA8072
|
Sandybrown
F4A460
|
Seagreen
2E8B57
|
|
Seashell
FFF5EE
|
Sienna
A0522D
|
Silver
C0C0C0
|
|
Skyblue
87CEEB
|
Slateblue
6A5ACD
|
Slategray
708090
|
|
Snow
FFFAFA
|
Springgreen
00FF7F
|
Steelblue
4682B4
|
|
Tan
D2B48C
|
Teal
008080
|
Thistle
D8BFD8
|
|
Tomato
FF6347
|
Turquoise
40E0D0
|
Violet
EE82EE
|
|
Wheat
F5DEB3
|
White
FFFFFF
|
Whitesmoke
F5F5F5
|
|
Yellow
FFFF00
|
YellowGreen
9ACD32
|
|
Now
start your text editor - Notepad - and practice. Play around with what
you have learnt. Get the feel of it. And once you feel confident enough feel
free to move on to the next lesson in the series.
Click here for
Part I of this series
Click here for
Part II of this series
Click
here for Part IV of this series
Click here for
Part V of this series
Click here for
Part VI of this series
|
