HTML Style Tags

Style Tags and Basic HTML

HTML: a Structured Graphics Markup Language

HTML is a subset of a larger markup language called SGML

HTML (HyperText Markup Language) is the language of the World Wide Web. It is a descriptive language that utilizes a limited number of predefined markup tags to describe how a web browser should display a web page. Written in pure ASCII, HTML can be easily understood. A subset of SGML (Structured Graphics Markup Language) HTML gives us the tools we need to publish information on the World Wide Web.

At the heart of HTML is the markup tag. These tags (and their associated attributes) are placed at the beginning and (usually) at the end of a section of text. They are interpreted by the browser to form the visual richness that characterizes the Web. Learning to use HTML will give you the opportunity to add your voice to many around the globe already communicating with this new, exciting medium.

HTML Markup Tags

At the heart of HTML is the markup tag. The markup tag provides the instructions the browser needs to format the page.

HTML markup tags are always enclosed between a left angle bracket (<), (a ``less than'' symbol to mathematicians) and a right angle bracket (>). Tags are usually paired with an opening tag <H1> and a closing tag </H1>. The ending tag looks just like the starting tag except that a forward slash (/) precedes the text within the brackets. The text between the brackets declares both the tag and it's attributes (if any). In the example, <H1> tells the Web browser that the text that follows should be displayed as a level-one heading. The browser will continue to display text in this fashion until the next </H1> tag is encountered.

HTML markup tags fall into one of several categories: page formatting tags, paragraph and character formatting tags, image tags, hyperlink tags, and tags for extended features such as tables and forms. In this page we will display several samples of the most common HTML paragraph and character formatting tags.

Headers

Headers are used to display the relative importance of information.

Headers are used in a HTML document to indicate the relative importance of an item, usually a one line section title. At present there are six levels of headers available. The actually font and point size used to display each level of header is determined by the user or by the default settings of their browser. Therefore, you cannot be sure of exactly how each header will display.

Level One Header <H1>

Level Two Header <H2>

Level Three Header <H3>

Level Four Header <H4>

Level Five Header <H5>

Level Six Header <H6>

Character Formatting

ABC

Physical Styles versus Logical Styles.

HTML documents offer two ways to format characters. Physical formatting tags indicate a fixed style, such as italics. Logical style tags, on the other hand, work in the much the same way as Header style tags, in that they allow the user's computer to determine the actual formatting for a particular style. The spirit of HTML dictates that Logical style tags be used whenever possible.

Logical styles define the relative appearance of text. They allow the browser to define precisely how to display the information.

Logical Styles

`<DFN>`	for a word being defined. Typically displayed in italics. (Internet Explorer is a World Wide Web browser.)
`<EM>`	for emphasis. Typically displayed in italics. (Watch out for pickpockets.)
`<CITE>`	for titles of books, films, etc. Typically displayed in italics. (A Beginner's Guide to HTML)
`<CODE>`	for snippets of computer code. Displayed in a fixed-width font. (`This is a sample of code.`)
`<KBD>`	for user keyboard entry. Should be displayed in a bold fixed-width font, but many browsers render it in the plain fixed-width font. (`Enter password for Windows networking.`)
`<SAMP>`	for computer status messages. Displayed in a fixed-width font. (`Segmentation fault: Core Meltdown!.`)
`<STRONG>`	for strong emphasis. Typically displayed in bold. (Important)
`<VAR>`	for a ``metasyntactic'' variable, where the user is to replace the variable with a specific instance. Typically displayed in italics. (del `filename` deletes the file.)

Time
Without music to decorate it, time is just a bunch of boring production deadlines or dates by which bills must be paid.

Frank Zappa

Physical Styles

`<B>`	`This is a sample of bold text`
`<I>`	`This is a sample of italic text`
`<TT>`	`This is a sample of typewriter text, e.g. fixed-width font.`

Paragraphs and Line Breaks

Paragraph and line break tags offer a way to space text out on the page.

Unless we tell the browser otherwise the text we enter on a web page will stream along in one long line wrapping to fit the space available. To provide space between lines and new paragraphs HTML offers us the new paragraph tag <P> and the line break tag <BR>. The difference between the two is that a paragraph tag will insert a extra area of space before the next line while a line break will not. For example:

This line is separated from the line above with a paragraph tag<P>
This line is separated from the one above by a line break<BR>

Preformatted Text

Preformatted text allows us a way to precisely position characters on the screen by permitting the use of spaces in the text.

HTML also allows for the display of preformatted text; text that includes both line breaks and spacing. This is accomplished through use of the <PRE> style tag. For example;


		(will you teach a
		wretch to live
		straighter than a needle)

		ask
		    her
			ask
			    when
				(ask and
				ask
				and ask
		again and) ask a
		brittle little
		person fiddling
		in
		the
		rain

				e.e.cummings

The FONT Tag

The FONT tag gives us a more precise way to specify the size (and color) of our text.

Extended HTML (HTML+) also allows the use of the <FONT> Tag. This tag allows us to specify the relative size of the fonts used throughout the document. Font sizes are changed by prefixing the text in question with the <FONT SIZE=n> Tag where n represents a number from 1-7. The default font size is 3. n can also represent a relative change in font size by including a "+" or "-" sign as in <FONT SIZE=+1> or <FONT SIZE=-1>. The end of the affected text is indicated with the </FONT> tag.

This is a sample of differing font sizes.