As in the text editor, you can create a series of effects in the text with HTML by changing the form and type of font. All the commands that change the text style are of the container, or on-off, type, meaning they must be specified in pairs that mark the start and end of the text to be modified.
The main text style commands are:
| Command | Syntax | Function |
|---|---|---|
| Bold | <B>text</B> | Applies the bold style. |
| Italic | <I>text</I> | Applies the italic style. |
| Underlined | <U>text</U> | Underlines text (does not work in some browsers). |
| Strong | <Strong>text</Strong> | Similar to bold. |
| Typewriter | <TT>text</TT> | Puts text in a typewriter-style font with fixed spacing. |
| Big | <BIG>text</BIG> | Increases the font and applies bold. |
| Small | <SMALL>text</SMALL> | Reduces the font. |
| Superscript | <SUP>text</SUP> | Raises and reduces the text. |
| Subscript | <SUB>text</SUB> | Lowers and reduces the text. |
| Blinking | <BLINK>text</BLINK> | Makes the text intermittent. |
Load the Examp04.htm file in the browser. The source code is shown below:-
<HTML>
<HEAD>
</HEAD>
<BODY>
This text is in <B>Bold.</B><BR>
This text is in <I>Italic.</I><BR>
This text is in <B><I>Bold and italics.<P>
</B></I><P>This text is <U>underlined</U> but it may not appear so in your browser.<BR>
This text received the style <STRONG>called strong which is similar</STRONG> to bold.<BR>
This text received the <TT>Typewriter style</TT>.<P>
This text received the <BIG>big font format</BIG> which creates big letters.<BR>
This text received the <SMALL>small font format</SMALL> which creates small letters.<BR>
This is an example of <SUP>superscript</SUP> text by the SUP command.<BR>
This is an example of text where the <SUB>subscript</SUB> effect of the SUB command was used.<P>
To call <blink>ATTENTION</blink> use the BLINK command.<P>
</BODY>
</HTML>
See the effect caused by these commands, first in Netscape 4 and then in explorer 3.
Preformatted text display
With the <PRE> commands, you can include text which was edited by a text editor and preserve the original text formatting, such as tabulation mark, end of line generated by the enter key, and other formats. The command Syntax is:
<PRE>text
text
text
</PRE>
Look at the example shown next, which is found in the Examp04b.htm file. All the lines were ended by pressing the Enter key.
<html>
<head>
<title>Pre-formatted texts examp04b</title>
</head>
<body>
<pre>
Here I place whatever I want.
I write however I wish, and what is best, the ENTER<p> at the end of the line works.
To generate blank lines just press the ENTER key several times
/======\
I *. * I
I -----I
========
I
--------->however don't place language commands for tanks in this area as they will <b>work</b> normally.
End of the pre-formatting text area.
</pre>
Now that the section has ended I must use the<br> paragraph command to advance to the next line<p>
</body>
</html>
See the result:
Changing the font size
One of the most interesting text treatment features of the HTML language is the ability to change the size, colour, and type of text font used. The command responsible for this is the <FONT> command, which is of the container type. See the syntax of the command:
<FONT
SIZE=n
FACE=name
COLOR=color></FONT>
SIZE=n
This parameter specifies the font size used. The values allowed range from 1, the smallest size, to 7, the largest. The standard value is 3. If a number preceded by the plus or minus sign is specified, the current font size will be increased or decreased by that value. For example, if the current font is 3 and <FONT SIZE=+2> is specified, the text will be displayed in size 5. If the value is specified without a sign, the font is displayed in the size specified.
FACE=name [,name2[,name3]]
This command allows choosing a different font for the text. Several font may be specified so that if the system does not have the first font, the second is loaded and so forth.
COLOR=color
This command specifies the text colour. Its value can be specified in hexadecimal or RGB format or by a predefined colour name.
The Font01.htm document shows the application of the <FONT> command in three different situations.
<html>
<head>
<title>Font01.htm</title>
</head>
<body>
<font color="ff00ff">
<h1>Attention !</h1>
</font>
The heading above had only the colour of the text changed<br>
The next <font size=1>word</font> had only the size changed.<br>
Let's now see and example where colour and size<br>are applied --> <font size=7 colour=blue> colour words</font>
</body>
</html>
With a little work and creativity, interesting effects can be obtained, as the Font02.htm program shows:
<html>
<head>
<title>Fonts and colours</title>
</head>
<body bgcolor="#FFFFFF">
<font size=7 color="#000000">D</font>
<font size=6 color="#800000">I</font>
<font size=5 color="#008000">M</font>
<font size=4 color="#808000">E</font>
<font size=3 color="#008080">N</font>
<font size=2 color="#00FF00">S</font>
<font size=1 color="#00FFFF">I</font>
<font size=2 color="#0FFF55">O</font>
<font size=3 color="#FF00FF">N</font>
<font size=4 color="#FF0000">I</font>
<font size=5 color="#800080">N</font>
<font size=6 color="#0000FF">G</font>
<hr>
<font size=1 color="#000000">D</font>
<font size=2 color="#800000">I</font>
<font size=3 color="#008000">M</font>
<font size=4 color="#808000">E</font>
<font size=5 color="#008080">N</font>
<font size=6 color="#00FF00">S</font>
<font size=7 color="#00FFFF">I</font>
<font size=6 color="#0FFF55">O</font>
<font size=5 color="#FF00FF">N</font>
<font size=4 color="#FF0000">I</font>
<font size=3 color="#800080">N</font>
<font size=1 color="#000080">G</font>
<hr>
<font size=7 color="#FF0000">O</font>nce upon a time in the land of Nod...
</body>
</html>
See the result:
Don't overdo variation in colour and size of the text or your page will look cluttered and sloppy.
Share This Post
No comments:
Post a Comment
If you have any doubts. Please let me know.