WEB 101: Using the Web in Education and Training / Styles for Web Documents

[Return to Welcome Page] || [Ask a question or make a comment]

CONTENTS:

• BUT FIRST, SOME DEFINITIONS
• BACKGROUND (Web document developers, beware!)
• SPECIFIC HTML STYLES

BUT FIRST, SOME DEFINITIONS:

• Descriptive style. A display or format that is defined by its physical appearance, such as italics or underline.
• Functional style. A display or format that is defined by its effect or function, such as emphasize or list.
• HTML. HyperText Markup Language, the international standard that Web documents use.
• Render. What a Web Browser does to a Web document; i.e. display the document. Specifically includes details of the display such as type face, font size, color, screen resolution, etc. Also incorporates corresponding details for graphics, sound and video.
• User. A person attempting to view your Web site; i.e. the reason you developed the site in the first place.
• Web Browser. The hardware and (more importantly) software that others will use to access a Web site.
• Web document. A document on a Web server, conforming to the HTML standard, that can be viewed using a Web Browser.
• Web document developer. A person, or a team of people, that originates Web documents.
• Web document editor. One of the many software tools available for developing Web document. {WSU/ISP faculty: David Bowen can furnish you with a Web document editor.}

[Return to Top] || [Ask a question or make a comment]

BACKGROUND (Web document developers, beware!):

World Wide Web documents are written (or more commonly, developed) using Hypertext Markup Language or HTML. Markup languages format documents, and HTML is an example of a markup language. The section on specific HTML styles illustrates the formatting possible with HTML.

With some exceptions, HTML styles are functional rather than descriptive. That is, the styles are designed for specific uses, rather than specific appearances. For example, the style STRONG places a strong emphasis on the text to which it is applied. Different Browsers may display or render that emphasis in different manners, such as boldface, italics or colored text. There are exceptions, such as ITALICS, which describes how the text is to appear.

In specific corporate settings which are restricted to internal use only, it may be practical to control which Web Browser employees will use, but in most other settings the Web document developer has no control over which Browser a user will employ. You may warn users that your site is designed for a specific Browser and even Browser version, but you cannot prevent someone from attempting to use a different one. In marketing applications, of course, this would be highly counterproductive.

If you are going to develop Web documents, it is important to realize that you will have a lot less control over document appearance or rendering than you would with a word processing or desktop publishing program. There are several reasons for this, as follows:

• The HTML standard is not uniform. There are at least three HTML standards in common use today. Some Browsers support only one, while others will support all of the standards. If a Browser encounters HTML code that it does not recognize, it ignores the code.
• The same document viewed with different Browsers will have different appearances, because most HTML formats are functional, not descriptive.
• Most Browsers are configurable, which means that individual users can change the rendering of each style.

One resulting rule for Web document developers is, "don't try to develop the perfect page," because it probably won't appear the way you specify anyway. One exception to this is graphics. Graphics will appear almost exactly as you developed them. Different Browsers can change the screen color and the size for your graphic, but they cannot change the proportions. This is one reason that graphics are popular with developers. Users like them because they are "cool." Graphics, however, are a double-edged sword today; graphics files are large and loading them can be slow, especially using a modem. For this reason, all Browsers offer the option of not downloading graphics files. So, heavy use of graphics can be self-defeating. Web document developers should keep graphics files small, and provide text-based alternatives for any information contained in graphics.

HTML styles are applied by codes. With some HTML editors, you work with the codes directly; in others, such as HotMetal or Internet Assistant for Microsoft Word, you work with the style names and appearances, and are usually unaware of the codes. Working with the codes directly can be daunting; this is often spoken of as "HTML programming." If you are not into computer programming, work with one of the editors such as HotMetal or Internet Assistant for Word that protects you from direct contents with the codes.

HTML codes are identified by angle brackets, with the code appearing inside the brackets, for example, <P>. There are two basic categories of HTML codes,

• Codes which appear singly, by themselves, such as the paragraph code, <P>, which starts a new paragraph whenever it appears.
• Codes with "start" and "stop" versions, such as Italics, with separate beginning and ending codes. The ending code is just the beginning code with "/" as the first character inside the brackets. For example, all text after the code <I> is italicized. This continues until the code </I> is encountered, which turns off italics. (Actually, the HTML standards include a code for ending a paragraph, </P>, but it has no effect and is not used.)

HTML does not currently support centering, right align or justified text. Also, there is no provisions for tabs.

[Return to Top] || [Ask a question or make a comment]

SPECIFIC HTML STYLES (please be aware that these styles will appear differently in different Web Browsers):

• The HTML Horizontal Rule (horizontal line) is shown just above at the start of this section. There is no corresponding Vertical Rule.

HTML code: <HR>

• Below is a sample of the HTML normal style.

This is normal text. There is word wrap, and the text is left-adjusted. Paragraphs are spaced more widely than lines within a paragraph. You can also apply a line break (here is a line break),
which starts a new line but not a new paragraph, and so has the smaller spacing of lines within a paragraph.

HTML code: <P> for paragraph, <B> for new line without new paragraph

• Below is an example of the HTML Emphasis style.

Emphasis or EM. This is often rendered as italics, not necessarily. It can be applied to just part of a paragraph.

HTML code: <EM>, </EM>

• The sections below show the HTML Heading styles H1 through H6.

Heading 1 or H1, the highest-level heading. Like all of the HTML heading codes below, HQ applies only to a single paragraph, after which it reverts to Normal. Also, HTML headings have extra space above and below the heading text. Headings can be mixed in any order.

HTML code: <H1>

Heading 2 or H2, the next highest-level heading.

HTML code: <H2>

Heading 3 or H3.

HTML code: <H3>

Heading 4 or H4.

HTML code: <H4>

Heading 5 or H5.

HTML code: <H5>

Heading 6 or H6, the lowest level of heading.

HTML code: <H6>

• This is List Bullet or Unordered List or UL
• Each item in the list starts with the List Item code, <LI>
  • The list can be indented to different levels.
• HTML code: <UL>, </UL> at beginning and end of list, <LI> at start of every list item

1. This is List Number or Ordered List or OL
2. Each item in the list starts with the List Item code, <LI>
3. The list can be indented to different levels.
   1. For indented items
   2. another level of numbering starts, as shown here.
4. Different Browsers can render this numbering in different ways.

HTML code: <OL>, </OL> at beginning and end of list, <LI> at start of every list item

• The HTML Blockquote style is illustrated below.

The Blockquote is indented from regular text, appropriate for a long quotation that is to be set off from the rest of the text.

HTML code: <BLOCKQUOTE>, </BLOCKQUOTE>

• The HTML Variable style is illustrated below.

This is the Variable or VAR style, which is just supposed to be different than the Normal paragraph. The way in which it is rendered can vary from Browser to Browser. It could be, for example, bold or italics, as long as it shows emphasis.

HTML code: <E>, </E>

• The HTML Italics style is illustrated below.

Italics or I. Text can be specified as italics.

HTML code: <I>, </I>

• The HTML Bold style is illustrated below.

Bold or B. Text can be specified as boldface.

HTML code: <B>, </B>

• The HTML Underline style is illustrated below.

Underline.

HTML code:

[Return to Top] || [Ask a question or make a comment]