Computers: writing a web page

Session 2 - Text formatting and hyperlinks

Jargon:

"Paragraph formatting" vs. "character formatting"

Some formatting must affect an entire paragraph, such as setting the paragraph to be aligned to the right. Other tags can affect as little as one character, such as making a letter bold. These are sometimes described as paragraph formatting verus character formatting. In HTML, they are sometimes called "block" formatting tags (for ones that affect a whole paragraph) versus "inline" formatting tags (for ones that be occur within a line of text).

attribute

Many HTML tags allow you to include optional commands for how they should format your page. These go inside the tag's brackets in the form of "attribute=value". Example: to align a paragraph to the right, you would include the align attribute in the paragraph tag, and set it to "right": <p align="right">.

Hyperlink

Text which redirects the reader to another webpage when clicked with the mouse. These are usually underlined and blue in color (the browser does that automatically).

URL

Another name for a website address; short for Uniform Resource Locater.

Paragraph formatting tags

1. <p align="left/center/right">

   This is the paragraph tag; it creates a new line with spacing above it. Like most text formatting tags, the align attribute can be used with it to control paragraph alignment. It does not need a closing tag(</p>), unless you want to un-set an alignment you created (default is left).

2. <h1> ... <h6>

   This is the heading tag. It creates a new paragraph, with spacing above and below, increased text size, and bold text. The largest heading is h1, and the smallest is h6. It must have a closing tag.

3. <hr size=2 width="90%">

   This is the tag that creates a horizontal line or horizontal rule, often used to separate sections of a webpage. It's called a "horizontal rule", and can have (optionally) a size attribute (which is it's thickness in pixels) and a width attribute (which is percentage of the page).

4. <br>

   This tag forces a line break. The paragraph tag does this, too, but it creates spacing above it, while this tag does not. Think of it as a newline.

   The example below illustrates the use of the tags covered so far:
   

   raw HTML code:	formatted in browser:
   <h1>h1 Example text</h1> <h2 align="center">h2 Example text</h2> <h3 align="right">h3 Example text</h3> <h4>h4 Example text</h4> <h5>h5 Example text</h5> <h6>h6 Example text</h6> <hr size=2 width="50%" noshade> <p align="right">Paragraph right <br>break </p>close paragraph <br>break	h1 Example text h2 Example text h3 Example text h4 Example text h5 Example text h6 Example text Paragraph right break close paragraph break

5. <center>

   This tag centers everything that follows it. All paragraphs, graphics, tables, hyperlinks, etc. The centering is turned off by a closing </center> tag.

6. <ol>, <ul>, <li>

   These are the ordered list (ol), unordered list (ul), and list item (li) tags. They work like bulleted and numbered lists in a word processor. The <ul> tag creates a bulleted (unordered) list; each item in the list is identified by starting with a "list item" (<li>) tag. The <li> tag doesn't have to be closed, but the <ul> tag does.

   The ordered list (<ol>) tag works like the ul tag, but it creates a numbered list. It also uses <li> to identify each new element in the list. Examples of each type of list is below:
   

   <ul> <li>first bullet item <li>second bullet item <li>third bullet item </ul> <ol> <li>first list item <li>second list item <li>third list item </ol>

   first bullet item second bullet item third bullet item first list item second list item third list item

Character formatting tags

1. <b>, <i>, <u>

   These are the bold, italic, and underline tags. They all require a closing tag. The underline tag should be using sparingly, since it can make text appear to be hyperlinked when it isn't. Below is how these tags looks in a browser:
   

   <b>Bold sample text</b> <br><i>Italic sample text</i> <br><u>Underline sample text</u>

   Bold sample text Italic sample text Underline sample text

2. <small>, <big>

   These are the small and big tags, which make text one size smaller or larger than the standard text size. They need to be closed when you want them to stop.
   

   <small>small</small> <br>normal <br><big>big</big>

   small normal big

3. <font color="red" face="Arial" size=7>

   The previous tags are all logical tags; the name of the tag tells you something about it's purpose. This is the recommended approach. However, if you can't get the formatting you want from some combination of those tags, you can use the font tag. It changes the font face, font size, and color of text. Any combination of the color, face, or size attributes can be used. This tag doesn't do anything unless one or more attributes are used.

   color="_____" controls the color (see color names listed). face="_____" controls the font face (with names such as Arial, Tahoma, Georgia, Impact, Times New Roman, Courier, Helvetica, Lucida Handwriting, etc.). Size can range from 7 to 1, with 7 being the largest (this is the opposite of how the heading tag works).

   This tag must be turned off with a closing tag. It can be useful for using color for emphasis, or when a specific font in needed, but most formatting should be done with the other tags (above). Note that fonts on your computer may not be on the machine of the person reading the page, so it's recommended to avoid specifying exotic fonts. Below are some examples of how this tag can be used.

   <font color="red" size=3 face="Arial">red text</font> <font color="blue" size=4 face="Impact">blue text</font> <br><font color="green" size=5 face="Georgia">green text</font> <font color="teal" size=6 face="Tahoma">teal text</font> <br><font color="navy" size=7 face="Verdana">navy text</font>

   red text blue text green text teal text navy text

   Color names

   Any HTML tag which allows for a color attribute, such as <font color="___"> or <body bgcolor="___">, will accept certain standardized color names. Some of these are listed below.
   

   black	wheat	tan	tomato	maroon	red	yellow	green	navy	blue	aqua
   white	beige	silver	slategray	darkgray	gray	thistle	olive	teal	steelblue	purple

   Color numbers

   HTML tags will also accept 6-digit hexadecimal numbers, which allow for a wider range of colors. These are based on red/green/blue values from 00 to FF for each color. Color numbers begin with a pound sign(#). Examples:

   black="#000000"

   white="#ffffff"

   red="#ff0000"

   green="#00ff00"

   blue="#0000ff"

   gray="#cccccc"

   There is a table of color names and matching number codes at this page:
   http://www.htmlgoodies.com/tutors/colors.html

Hyperlinks

The href attribute controls what the hyperlink points to. The anchor tag must be closed with </a>. The text that's between the opening and closing tags gets hyperlinked, and becomes blue, underlined, and "clickable". It can be a link to another page on your website, or another website. The text that's hyperlinked should describe where the link goes, or have the actual web address the link points to.

An email link works the same, but uses a different protocol: "mailto:" instead of "http://". Example:
<a href="mailto:csgregerson@yahoo.com">csgregerson@yahoo.com</a>

Relative and absolute URLs

When linking to pages within your own website, it's recommended to use the short form of URL, called a "relative URL". This uses only the path (folder and filename). The protocol and domain name are left off. Below is an example of an absolute URL and relative URL:
<a href="http://www.geocities.com/csgregerson/images/chris.jpg">my picture</a>
<a href="/csgregerson/images/chris.jpg">my picture</a>

Exercise: use these tags in your web page

1. Go to any computer in the classroom and open the web browser (Internet Explorer). Go to www.geocities.com.
2. Login with the geocities username and password you created. If you haven't created an account yet, do so now. There are step-by-step instructions in the last handout, which is online here: http://www.phototour.minneapolis.mn.us/classes/html1.html
3. Once you've logged in, click the link named "File Manager" (in a box on the right side of the page, see graphic).
4. This will take you to a transition page, where you have to click the link "open file manager".
5. The next page is the file manager, and has a table listing one file...the one you saved in the first exercise with the name "index.html". It should have a tiny pencil icon on the left.
6. Click dirctly on top of this pencil. This will open the file for editing.
7. Add the text and tags below. (see the source).
   

   Page Title This page was created on 2004-02-04 by (name). It was last updated on 2004-04-04. Absolute hyperlinks Below are some news websites. http://www.cnn.com http://www.startribune.com http://www.swjournal.com http://www.pioneerplanet.com Disclaimer I take no responsibility for the accuracy of the information on this page. Contact: csgregerson@yahoo.com

   Appendix: Special Characters

   Special codes are used to render characters that cannot be entered on a standard keyboard, and the less-than and greater-than characters (<,>), since they would be interpreted as tags otherwise. These character codes go inside an ampersand "&" and a semi-colon ";". A forced space is &nbsp;, for Non-Breaking SPace. Some others are below.

   ¢

   ¢

   ©

   ©

   ™

   ™

   °

   °

   &

   &

   <

   <

   &gt;

   >

   &quot;

   "

   &eacute;

   é

   &times;

   ×

   &bull;

   •

   &nbsp;

   &frac14;

   ¼

   &frac12;

   ½

   HTML Reference Websites
   Index DOT HTML - Advanced HTML Reference
   This is an online, browsable reference of HTML tags.
   http://home.webmonster.net/mirrors/bloo-html/html/tagindex/all.htm