I'm sure you have all seen it, you're surfing around on the web and these words just start flashing at you. Well it's called blinking, and I suggest you use very little of it(In the case of blinking, less is best). This is how you blink text :
| [Index of Lessons] [Advanced Lesson 1] [Advanced Lesson 3] [Colour Page] |
A2. Blinking and Modifying Text |
| |
Blinking I'm sure you have all seen it, you're surfing around on the web and these words just start flashing at you. Well it's called blinking, and I suggest you use very little of it(In the case of blinking, less is best). This is how you blink text : |
| |
Blinking | |
| HTML | Result | |
<blink>Here we go notice how annoying this is</blink> |
||
| |
Modifying Text With the HTML introduced by NetScape and HTML 3.0, there is a lot more options for formatting your text. Specifically, you can have different sized text as well as different colored text. When used judiciously, the text formatting can enhance the layout of a web page. When used without thinking, it can produce web pages that are hard too look at and almost impossible to read, that form of page is visted only once per person. You can also now create superscript and subscripts used in mathematical expressions, chemical formulas, or as footnote markers. Lets start with colour changes of text. |
| Colouring text Well, as you have seen it is quite easy to change the colour of the background in a document, you have also changed the complete text colour of a document, but now it is time to learn how to change the occasional word's colour, this is done using the following code :
Within the quotation marks, you place a colour name (the list of colours have been linked at the top of the page, to see them click here (Top) to go to the top of the page). Also notice, and this is important that the word color is written in the americian fashion, not the standard english. Remember it is COLOR not COLOUR. Example time :
|
| |
Text Colour | |
| HTML | Result | |
This <font color=red>line</font> of <font color=blue>text</font> is being <font color=green> modified</font> with different <font color=yellow> text</font> colours. |
This line of text is being modified with different text colours. | |
| |
Well, now that you know how to modify the text colour of normal
words, you should also know that by using the same html code, you
can also modify the colour of a link. This is done using the code : This produces this effect [Start Page] instead of this [Start Page] Where as red is what the links are set to on this page. |
| Sizeing Text Text can come in many different colours, it also has the ability to be of many different sizes. A unique factor about sizeing is that it also uses the <font ...> tag, but with a difference. Instead of <font color=red> the tag for sizing is: Where n is a number between 1 (small) and 7 (Large). Size 3 is the normal size for text. An example of all sizes : |
| |
Text Size | |
| HTML | Result | |
<font size=1>Test</font> <font size=2>Test</font> <font size=3>Test</font> <font size=4>Test</font> <font size=5>Test</font> <font size=6>Test</font> <font size=7>Test</font> |
Test Test Test Test
Test |
|
| |
Relative Text If you thought that was all there was to sizeing, well you're wrong. There is a different method for sizeing text, it is using relative tags instead. The code for this is :
<basefont size=n> Where n is a number between 1 and 7. Though if that started to look scary here's an example : |
| |
Relative Text Size | |
| HTML | Result | |
<basefont size=5> This text should be <font size=-3> a lot </font> <font size=+4> different to </font> <basefont size=3> this normal sized text |
|
|
| |
The power of using relative font size tags (i.e. size=+2) over absolute size tags (i.e. size=5) is that you could easily shift the size of ALL text in that page by changing one instance of the <basefont> tag. |
| Superscripts and Subscripts Until HTML 3.0 you were out of luck if you needed to write mathematical expressions, chemical formulas, or other expressions with superscripts and/or subscripts. These new tags raise or lower the "scripted" text one half line and sizes it one unit smaller. The HTML format for these tags is:
<sup>...</sup> Superscript |
| |
Super and Sub scripts | |
| HTML | Result | |
This <sup> word </sup> is an example of super script.<p> This <sub> word </sub> is an example of sub script. Next to each other they look like <sup>This </sup><sub> and</sub> this |
This word
is an
example of super
script. This word is an example of sub script. Next to each other they look like This and this |
|
| |
Font Face The HTML 3.2 standards now include an option for the tag to specify a particular screen font for display. This may not work in all web browsers. The HTML for specifying a font face is: Notice that in between the quotation marks there are two fonts, this means, that Windows understands the first font choice and Mac's understand the second. It is not always the case that you have to declare two, but font's such as Arial have a matching font such as Helvetica on different systems, also if a users computer doesn't allow the first font, the second will be loaded in it's place. If a viewers browser supports the font FACE attribute and they have one of the listed fonts installed on their computer, then the text will be displayed with the specified font. Otherwise, it will use the same font as the rest of the web page. If you choose to use a font face, you should select a face that is standard or be sure that the intended computers have any "exotic" fonts installed. Use this HTML with discretion! There is an art of use versus the abuse of too many font styles! Below are some examples : |
|
Font Face | |
| HTML | Result | |
<font face="Courier">Courier</font> <font face="Times">Times</font> <font face="Arial,Helvetica">Arial, Helvetica</font> <font face="Monaco">Monaco</font> <font face="Symbol">Symbol</font> <font face="Palatino">Palatino</font> <font face="System,Chicago">System, Chicago</font> |
Courier Times Arial,Helvetica Monaco Symbol Palatino System,Chicago |
|
| |
The information on this page doesn't fit for the example pages
shown to you. Though if you want to test anything that you have seen
here then I suggest you do. A word of warning though, with Font Face=
do not use it for everything. It is a very useful tool when used
sparingly for emphasis on certain points or headings.
Click on Advanced Lesson 3 to continue, or click here (Top) to return to the top of document |