- Preface
- Markup Languages – A Definition and Some History
- Beginning HTML
- HTML Lists
- HTML Tables
- HTML - Color, Fonts and Special Characters
- HTML Links
- HTML Images
- HTML Frames
- Cascading Style Sheets
- MicroSoft PhotoDraw
- JavaScript
- HTML Forms and Form Handling
- VBScript
- MicroSoft FrontPage
- Active Server Pages
- Java Applets
- XML Meaning and More
- Macromedia Flash 5.0
- References
|
There are several ways to change the appearance of the background and the text on a webpage.
6.1 RGB Colors
There are two ways to specify a color in HTML. One way uses descriptive color names such as red, blue, green or darkgreen. Please note that color names are not supported by W3C and may be interpreted differently by different browsers. The other specifies a color using the RGB color scheme.
The RGB color scheme allows you to control the amount of Red, Green and Blue that will glow from a pixel on the screen. The colors in the RGB color scheme are in the order of their initial and each color is given two characters that will determine how much of that color “glows” from a pixel. Each of the two characters for each color can be a digit (0 through 9) or a character (A through F). The two characters together represent a number in the hexadecimal numbering scheme (base 16). Using base 16 numbers allows the representation of higher numbers using only two characters. 256 numbers can be represented using only two characters in base 16 (00 through FF) as opposed to only 100 numbers that can be represented using base 10 numbers (00 through 99). Caution should be employed when changing the background colors. Some computers with low-end graphics cards will not be able to display some colors correctly (and may, in fact, display a color very different than intended).
Refer to a chart such as the one located at The Center for Business - Color Codes
for a selection of HTML colors and their color names and corresponding RGB codes.
6.2 Adding a Background Color to a Page
One way to make your web page distinctive is to add a background color. The background color of a page can be altered with the BGCOLOR attribute in the beginning tag.
- Change the beginning body tag for your HTML page from to the following:
<BODY BGCOLOR = #00FFFF>
- Save your file and view it in a browser.
- Change the BGCOLOR attribute to LIGHTGREY instead of #00FFFF. Save your file and view it in a browser.
6.3 Changing the Appearance of Text in an HTML Page
There are two basic schemes for dictating the appearance of plain text in a webpage: (1) Physical tags and (2) Logical tags.
6.3.1 Physical Tags
These tags control the appearance of text in an HTML page.
These tags can be nested in order to produce a more defined style.
For example, the <I> … </I> tags will cause the text in between to appear in italics.
The <B> … </B> tags will cause the text in between to appear in bold print.
Nesting these tags <B> <I> … </I> </B> will cause the text to appear in bold italics.
Other physical tags include:
- <BIG> ... </BIG> - text will be larger than the default size.
- <BLINK> ... </BLINK> - text will blink
- <SMALL> ... </SMALL> - text will be smaller than the default size.
- <STRIKE> ... </ STRIKE > - text will have a line through it.
- <SUB> ... </SUB> - text will appear as subscript.
- <SUP> ... </SUP> - text will appear as superscript.
- <TT> ... </TT> - text will appear as teletype or typewriter print.
- <U> ... </U> - text will be underlined.
6.3.2 Logical Tags
These tags define the content of the text in between and let the browser control the appearance of text in an HTML page.
For example, the <CITE> … </CITE> tags indicate that the text in between is a citation.
Most browsers will display the tags enclosed in CITE tags in italics.
Other logical tags include:
- <CODE> … </CODE> - indicates that the text is computer programming source code. Most browsers will display this in a monospaced font (like the <TT> tag above).
- <EMP> … </EMP> - indicates emphasis. Text will appear in italics.
- <STRONG> … </ STRONG > - indicates text to be highlighted. Text will appear in bold print.
- <VAR> … </VAR> - indicates a variable in a mathematical expression. Text will appear as italics.
- Select a portion of text in your HTML file (one word, a phrase or a sentence) and put beginning and closing italics tags around it.
- Select another portion of text and use the bold tags, …
- Go to the end of your HTML file and add the following mathematical formula:
<VAR> a</VAR> <SUP>2</SUP> + <VAR> b</VAR>
<SUP>2</SUP> = <VAR> c </VAR> <SUP>2</SUP> <BR>
It should appear like this:
- As noted earlier in this document, HTML ignores whitespace in your HTML file.
If lines of text are supposed to appear on separate lines, you can use the break, <BR>, or paragraph, <P> … </P>,
tags which cause a new line and a blank line followed by a new line respectively. Another option is to use the
pre-formatted tags, <PRE> … </PRE>. These tags preserve the whitespace in text and put blank lines before
and after the text within the tags. The <PRE> … </PRE> tags also display the text enclosed in monospaced
(teletype) font, which is often not the most appealing. However, using the <TT> … </TT> (teletype) tags within the
<PRE> … </PRE> tags will cause the text to appear in the default font for the page.
- Add the following to the end of your HTML page:
<PRE>
Breakfast Raisin Bran
½ cup milk
black coffee
Lunch 1 cup mixed greens
1 TB. Salad dressing
½ cup water-packed canned tuna, drained
1 cup blueberries
Dinner ½ cup cooked pasta
3 oz. cooked chicken white meat
1 cup green beans, steamed
Snack 1 graham cracker
1 small apple
</PRE>
- Save your file and view it in a browser.
- Now, remove the <PRE> … </PRE> tags. Save your file and view it in a browser.
- Re-insert the <PRE> … </PRE>.
6.4 Changing the Style, Size and Color of Text in an HTML Page
The color of the text for an entire page can be changed from black to any color that can be represented by the RGB color scheme by using the TEXT attribute of the tag.
- Change the beginning body tag for your HTML page from <BODY> to the following:
<BODY BGCOLOR = LIGHTGREY TEXT = #00FFFF >
- Save your file and view it in a browser. Note that the combination of a lightgrey background and
AQUA text is difficult to read. DO NOT use this combination in a real webpage unless you want to
annoy and frustrate your users.
- The appearance of portions of text within a page can also be controlled using the <FONT> … </FONT> tags.
(Use this tag sparingly, since it may be discontinued in future versions of HTML.) In order to have any effect on the
enclosed text, the <FONT> tag needs to have attributes and values included.
- One of the attributes available for the <FONT> tag is the COLOR attribute.
The values for the COLOR attribute are the same as are available for the text of an entire page,
or the background color of a page.
Select a portion of the text in your HTML file and place the following FONT tags around it:
<FONT COLOR = #00FF00>...<FONT>
- Save your file and view it in a browser.
- Another attribute of the FONT tag is the SIZE attribute. The values for the SIZE attribute are numbers between 1 and 7. The default font size is 3.
Try adding SIZE = 7 to the FONT tag added above.
- The superscript and subscript tags can be used along with the FONT SIZE attribute to simulate a fraction. Add the following to the end of your HTML file:
<FONT SIZE = 1> <SUP> 3</SUP> / <SUB> 4 </SUB> </FONT> cups of milk. <BR>
- Save your file and view it in a browser. It should appear as follows:
- Another attribute of the FONT tag is the FACE attribute.
The values for this attribute include “Courier New”, “Sans Serif”, “Charter”, “Avantgarde”, “Bookman”,
“Lucida”, “Symbol”, “Utopia”, “Helvetica”, “Times”, “Serif”and “Fixed”.
Try putting the follow FONT tags inside the <PRE> tags surrounding the Breakfast, Lunch, Dinner Snack menu above:
<FONT FACE = “Times”> … </FONT>
- Save the file and view it in Internet Explorer and in Netscape. Note that the “tabs” in the
pre-formatted text may appear out of line in different viewers. Try changing the face to another value
and viewing it in different viewers again. The face tag should be used with some caution because different operating
systems (PC, MAC and UNIX) have different default font faces and a particular FACE value may not
be available on some machines or may not appear as intended.
6.5 Special Characters
Since some symbols such as “<” and “>” are used to surround beginning and
ending tags, some browsers cannot display these characters in normal text.
In addition, there are other symbols (such as copyright, registered trademark, letters with accents, etc.)
that are not routinely on keyboards that you may want to include in the text of an HTML page.
In order to include these symbols on an HTML page, you can consult a reference of HTML characters such as that at
http://www.w3schools.com/html/html_entitiesref.asp .
- Try adding the following to the bottom of your HTML page and then save and view your file.
<BR> © is the copyright symbol. <BR>
<BR> ® is the registered trademark symbol. <BR>
<BR> ° is the degree symbol. <BR>
<BR> ÷ is the division symbol. <BR>
- The above code should appear as follows in a browser:
References
- A Beginner's Guide to HTML
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerPrintable.html
- HTML: A Guide For Beginners
http://www.geocities.com/Baja/4361/index.html
- HTML: An interactive guide for beginners.
http://www.davesite.com/webstation/html/
- HTML and XHTML Information
www.w3c.org/markup
- HTML reference including browser suppport
http://www.w3schools.com/html/html_reference.asp
- W3Schools HTML Tutorials
http://www.w3schools.com/default.asp
- Willcam’s Comprehensive HTML Cross Reference
http://www.willcam.com/cmat/html/crossref.html
- Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0
- Visibone Webmaster’s ColorLab
http://www.visibone.com/colorlab/
- The Center for Business - Color Codes
http://www.tcfb.com/tutorial/colors.html
- HTML Colors
http://www.w3schools.com/html/html_colors.asp
- HTML special characters.
http://www.w3schools.com/html/html_entitiesref.asp
|