Webpage Text and its properties

Formatting

Property name Code Example Description
bold/
strong		 <b></b>
<strong></strong>		 bold strong bolds the text inside the open and close tags; <strong> is ADA compliant and recognized by text readers - <bold> is not.
italics/
emphasis		 <i></i>
<em></em>		 italics emphasis italicizes the text inside the open and close tags; <em> is ADA compliant and recognized by text readers (voice puts emphasis on the word) - <i> is not.
pre <pre></pre> 
this is 
   pre-formatted text.  
All the    spaces and
    line
  returns are observed.
 pre-formatted text - renders the text in a courier font as is typed, taking line returns, spaces, tabs - good for representing code
superscript
subscript		 <sup></sup>
<sub></sub>		 superscript text
subscript text		 raises and lowers text; also decreases font size by -1
changing size <font size="+1"></font>
<font size="-1"></font>
<font size="4">		 +2 size   -2 size
size 4		 font sizes can be increased or decreased incrementally from 1-7.
Fonts can also be set to a specific size (1-7), but this can be overridden by the user's defaults, so don't rely on it. Also, with different screen resolutions, some smaller text could be unreadable on some screens. It's best not to set a specific size - just allow the user's defaults to apply, and use the + or - if needed for emphasis.
blockquote <blockquote></blockquote> regular text in document
blockquoted text
back to regular text 		blockquote is used for referencing other sources or authors. ADA states not to use this property just for the use of indenting. There is no specific html tag for indenting or "tab"ing. Most users utilize the blockquote tag when necessary, just keep in mind that it may not be recognized accurately by ADA readers.
headings <h1>text goes here</h1>

<h1 align="center">text goes here</h1>

H1

h2

h3

h4

h5
 Pre-formatted headings for outlines or document sections. The headings adjust size and boldness of text, plus insert line breaks afterwards. In accordance with ADA, these should always be used in order; don't just use an H3 tag for the formatting.

These tags can be aligned without using the <div> tags:
<h1 align="center">
aligning (applies to paragraphs) <div align="right"></div>
Right align
 The <div> tag can be used not only to align text paragraphs (left and right), but can also be used around other page elements, such as images or tables. images and table can also be aligned within their own definitions. Using <div> will cause a line break before and after the tag. Full align (where the text is lined up straight on both the left and right sides, as in a word processor) is not an option in html.
font face <font face="Arial"></font> Arial
Verdana
Courier
Charlesworth		 The font face can be set in the body tag to apply to the entire page, or for a particular word or section. If the font is not supported, the browser will guess and try to match the font closest to what you specify. You can also define 2nd and 3rd choices for more control: <font face="Arial,Helvetica"></font>
Note that different browsers and operating systems will have different font sets.

Serif fonts (Times) are best to use for body text; San serif fonts (Arial, Verdana) can be used in headings/titles to contrast the body text.
color <font color="#FF00FF"></font> #FF0000 red text Text color can be defined on any word(s) in the document until the font tag is closed - </font>. Except for in tables, the color must be defined in each cell. Color is defined by RGB (red, green, blue). Remember to use the # sign in front of the color code. (More on color below.)

Line Breaks
Style Sheets - CSS
Note: Most of these attributes when defining a page "look" can also be defined using "Cascading Style Sheets" (not discussed in this class) - particularly page titles, headings, font face, size and color.

Color - using hexidecimal values

web-safe color palette - http://the-light.com/colclick.html

Visibone - Color Codes
     Color Lab

More on colors...
Safe colors - If you stray from the 216 web-safe colors, there's a chance that the user's browser will interpret the color differently. Most often, the browser will try to replace with a similar color; sometimes not.

Subject to each user - Ultimately, the user can define his or her own color defaults (and sizes and fonts). While most people don't change these defaults, recognize that this could be the source for confusion in a color-driven site.

gifs and jpgs - The "safe" colors apply to text. However, if you use .gif or .jpg for titles or buttons on your page, the colors will be reflected (within the range the user has), regardless of his color settings.

ADA - do not rely on color for determining choices or paths (i.e. "select the green text/button to go to the nature page" A color blind person may not see the color difference in menu text and page text. Or the user may have colors set up to override the page definitions and not see your colors at all. See the "web-safe" color spectrum of a color-blind person.

How the code definition works
The colors are defined in RGB (red, green, blue) - each receives a hexidecimal value of 2 digits. Simply put, there's a scale from 1 to F:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

0 is the weakest/least represented or absent
F is the strongest

So 0000FF is pure blue - strong in blue and no other colors represented.
000000 is black (no colors)
FFFFFF is white (all colors)

You can have 00-99 in the red column and still only be accessing half of the available color strength (full would be FF).

The web-safe colors use the values 0, 3, 6, 9, C, F. So you will be able to easily recognize from the code if the color is one of the 216 web-safe colors or not.

A combination of values other than the above will render a color outside the web-safe palette, which means it may or may not be represented accurately in other browsers. For instance #23DE9A. This color may appear to you as the defined color or as as color that is close to it, supported by your browser.

Knowing how to create a color using these values is not necessary - there are many on-line references to color codes. Most graphical software packages provide the hexidecimal value.

Time to Exercise your knowledge!

Class Outline      View Example Site