Text and more style

Headings can be created with the h1 h2 h3 h4 h5 h6 containers. h1 is the largest heading; h6 is the smallest heading.

Usually, we will use styles to affect the appearance of our pages. There are also two sets of older tags, that can be used to change the appearance of text in our pages. They are called Logical Style Tags and Physical Style Tags.

Select a logical tag that describes what your text is used for. The browser will select an appropriate appearance for that type of text usage. These are all containers, with an opening tag and a closing tag. These tags are also in-line tags.
Logical tags include:

• cite - a citation
• code - some programming code
• em - important text to be emphasized
• kbd - text looking it was typed on an old manual typewriter
• samp - a sample
• strong - very important text to be strongly emphasized

Other logical tags are abbr and acronym; they do not seem to do anything; so, I guess they are not useful.
Another logical tag, that you may wish to avoid because it may not always be consistently supported by all browsers, is dfn.
I am not very sure about the value and support of the var tag.

Select a physical tag that describes what you want your text to look like. The browser will select an appropriate appearance that looks like what you requested. These are all containers, with an opening tag and a closing tag. All these are also in-line tags.
Physical tags include:

• b - bold face
• i - italic
• sup - a superscript such as X²
• sub - a subscript such as H₂O
• tt - text looking like it was printed by an old teletype machine
• kbd - text looking like it was typed from a keyboard into Notepad
• big - bigger
• small - smaller

The strike and u tags are officially deprecated, and are being phased out.

There are a number of style properties that affect the appearance of text. You can use these styles to change a word or two in a span container. You can also use these styles with a p or div, or other container.

I am not sure about font-stretch and text-shadow.

One of the most common things you can do to specify the appearance of text is to specify the font family. There are five generic font families. These five are supported by all standard browsers.

• serif
• sans-serif
• monospace
• fantasy
• cursive

You may wish to express a preference for some other font family, which may, or may not, be available. You can do this, because you can specify a list of possible font families. Examples:

• 'Times New Roman', serif
• Arial, Helvetica, sans-serif
• 'Courier New', monospace

Put you favorite choice first.
Always put one of the five generic font families last.
Separate the choices with commas.
If the font name contains a space, put the name in single or double quotes.
Never put the generic font family names in quotes.

These lists of font families are used as the value for the font-family property.

The standard font sizes are:
xx-small x-small small medium large x-large xx-large

There has always been a problem with the default size.
Internet Explorer uses small as its default size.
Other browsers use medium as their default size.

You can also specify the size as larger or smaller, which produces one size change from what would have been used otherwise.

You can also specify the size as a percent of what would have been used otherwise.

It is not a good idea to specify the font size in pixels. This causes problems with Internet Explorer.

The font size value is used in the font-size property.

The color of the text is set with the color property. The background color of any container is set with the background-color property. We saw these in the chapter on color.

Now you are ready to build your lab 5 web page.
Follow the link on the left to read the lab 5 requirements and build your lab 5 web page.

Upload your index.html page, your lab5.html page and your lab5.css file to our Internet server, voyager.
Be sure to upload your lab5.css file.
Do this the same way you uploaded your lab 2 page.

You have built your lab 5 files and uploaded it to voyager.
Look at the page with your Firefox browser, to make sure the page works correctly on voyager.
Then, send an e-mail to instructor. In the e-mail provide the following information:

• SUBJECT: CIS 89A Lab 5
• It should say that you have completed Lab 5.

Next week we will begin using a new lab topic. You may now send an e-mail to your instructor requesting approval for your selection. In the e-mail, select a state of the United States of America, or select a foreign country. ( You may include second and third choices, in case your first choice is not available. )

Reading assignments are in HTML, A Beginner's Guide, by Wendy Willard.

Chapter 4

Add Headings

Read.

Add Logical Emphasis to Sections of Text

Logical and physical attributes are older techniques.
I suggest you use styles.

Style Sections of Text by Changing Font Characteristics

You may specify several choices of font-family values. When you specify font-family, always list one of the standard font-family values last.
The standard font-family values are:

• serif
• sans-serif
• monospace
• fantasy
• cursive

An alternate text is Even More Excellent HTML by Timothy T. Gottleber and Timothy N. Trainor. This book gives both new and older techniques. You may read in this book, if you wish. Chapters 5, and 8 (previously assigned - read more this week).