Lesson 2 Part 1

Webdesign Study Group
"Lesson 2"

Study Tips for Webdesign Class - 01/23/98

MORE of those wonderful HTML Tags to customize your page!!

Here are summaries of more useful HTML tags followed by examples of their use.

Again, be sure to review the examples carefully. You should be able to see if a particular tag will create your desired effect or effects.

For a more complete listing of tags and more details on ways in which they can be used, please refer to the class' "Recommended Resources" page at http://www.vu.org/webdesign/desk/recom.htm.

<BLOCKQUOTE></BLOCKQUOTE> tag set

BLOCKQUOTE will set apart the text between the tags by indenting it slightly. Used stylistically much like you see in articles and research papers when another author or reference is quoted.

In this example I am "quoting" a piece of a future lesson in this class.

EXAMPLE:

The <BLOCKQUOTE></BLOCKQUOTE> tag set is used to draw the margins in on this piece of text. The effect is not quite as dramatic as it might be otherwise due to other formating on this page.

Jane Doe surfs to a web page and sees a really nice drawing of a cat in a rose garden. Since she is making a web page with rose gardening as her theme and she also loves cats, she uses her browser's copy function to save it to her computer and for use on her new webpage. If she uses it, will she be breaking the law???
Maybe, maybe not. There are a lot of factors involved here and it's a complicated issue. It seems prudent to mention this and to provide you with some resources to review regarding copyright law and how it applies to cyberspace. The best advice that anyone can offer, is that if there is doubt about the legal use of an image, DON'T.

The tag set:

This is the next tag for jazzing up the page. It is a versatile tag set and allows for the changing of the text in several ways:

COLOR=: This is Forest Green 
This colors the text between the two tags the chosen color. Use the same color values for the FONT tag as for the BODY tag. Unlike the color change within the BODY tag, changing the FONT COLOR= can be done as often as you like, even letter by letter! Prudent design would seem to indicate that it not be done excessively and used only when it would provide an enhancement to the page.
SIZE=
 LARGE text is possible 
Font sizes range from 1-7 with size 3 being default. In Netscape you can change the default size of the text through use of <BASEFONT SIZE=> tag (ha! I am sneaking another tag in here!) in between the <HEAD> </HEAD> tag set or in the beginning of the HTML document. You can then use the numerical value to change the size from 1-7 by using the You can also use the numerical values both positive( 1 thru 7) and negative(-1 thru -7) to increase or decrease text size in relation to the selected basefont size or in relation to the default of 3.
FACE=: If you have this font installed, it is called COMIC SANS MS.
This addition to the FONT tag should be considered carefully. It does do something much desired by web authors: it gives you the ability to "choose" the style of text used, with limitations. You can specify up to three alternate fonts to display if they are available on the visitor's browser system. If you are like me and collect fonts like some people collect matchbooks, changing to font styles like "Unicorn" or "Dauphin" can be attractive, but many people will not have lots of esoteric fonts installed on their computers. If none of the selected fonts are available, it will revert to the browser's default font. It is probably better to use the FACE= for fun rather than to define something of high importance, since you cannot be sure how it will appear to the viewer. If you ABSOLUTELY have to have a certain piece of text appear a certain way, use a graphics program to create a GIF image of the text and insert it into your web page.

You can combine any or all of these to create for example, smaller text of a different color in a different type style! If you do combine the different attributes, you need only to write the opening font tag ONCE and add any changes directly to this tag. There should be one tag set for each set of changes you want to make on a page.

"Safe Fonts"

Following are two lists of which fonts can be used with relative assurance for viewing on Windows and on Mac operating systems:

Mac Fonts: Chicago, Courier, Geneva, Helvetica, Monaco, New York, Palatino, Symbol, Times, Zapf Dingbats.

Windows Fonts: Arial, Comic Sans MS, Courier New, Modern, MS Sans Serif, Symbol, Times New Roman, Wingdings.

A web author can specify more than one font at a time in the font tag. For example, the Courier New and Courier fonts are fairly similar and could be BOTH listed in the tag so that both Windows and Mac users see a similar style of type in their browser.

You would specify both fonts by listing them like this:
> This sentence should display in either Courier or Courier New depending on your operating system and what fonts you have installed on your computer.

Note: If the visitor has BOTH fonts installed on their computer, the first one listed will display to them regardless of their operating system.

Verdana: A Special Font.: Not long ago, at no small cost, Microsoft undertook the task of developing a font especially designed for the web. The result of the project was the font known as Verdana. This font is one which retains legibility in sizes ranging from very small to very large and does indeed seem to accomplish the task of being an excellent font for use on the web.

If you would like to explore fonts more on your own, there are a lot of resources on the web where you can find them. A couple of places to begin exploring fonts are Microsoft's Typeography On the Webor for links to other font related sites, http://desktopPublishing.com/fonts.html.

This tag set is one of the tag sets which will eventually be made obsolete by the use of Cascading Style Sheets in HTML 4.0. The tag set is still in use but considered "deprecated". The "new" way of classifying which font to display will allow for more flexibility in the style chosen and can be applied over a whole page for example without having to re-specify the font desired in each paragraph.

<BIG></BIG> tag set

 set

Big makes the text in between larger than the rest of the text; small, the opposite. These are not as versatile as the font change, but still can be used to have a nice effect. On Netscape at least, it can be used in combination with the font tag to alter text size.

EXAMPLE:
THIS IS BIG
THIS IS NORMAL
THIS IS SMALL


This creates underlined text. It is generally used sparingly to avoid confusing readers by making them think it is a hyperlink.

EXAMPLE:
This text is underlined..

<STRIKE></STRIKE> tag set
"Strikes out" or puts a line through the center of the text.

EXAMPLE:
An example of ~~the use of the <STRIKE></STRIKE> tag set.~~

 tag set
Subscript: Places text slight lower than the rest of the text on the line.

EXAMPLE:
Uses for the _ tag set are not common.

 tag set
Superscript: Places text slightly higher than the rest of the text on the line.

EXAMPLE:
The ^ tag set is not commonly used either.

<ADDRESS></ADDRESS>
Used for setting apart information about the author of the web page. It creates an italicized section of text.

EXAMPLE:

This text is formatted with the <ADDRESS></ADDRESS> tag set

End of Study Tips for 01/23/98

This web page created by Kathleen M. Weber on February 4th, 1998.

Get a free 5MB homepage at XOOM