[Back to the Launch Pad ] [to page 2 of template ]

Mike's HTML template

This page provides examples of some of HTML's tags. I assembled it so that I can copy/paste HTML code without having to remember the details of HTML. I find I have less typos with this method. If you are new to HTML, you might find this page useful. To get the most use out of this page, save it as source code and examine it off line. Open it in your text editor (or Word) and simultaneously open the file with your browser, switch between the text editor and the browser and you will see how the HTML code (shown in the text editor) is tranformed into a HTML document (shown in the Browser). Some of the HTML tags need Netscape to work properly.

When you examine the HTML source code you will occasionally see some strange combinations of characters. These are the result of using special characters that are reserved for use in HTML scripting. The < and > characters are frequently used in HTML scripting, so if you want to write some text that uses those characters (that is, you want those characters to be displayed in a Web page, i.e. this page), you must use special alternate versions of those characters so that the Browser won't try to interpret a < or > character (and the other adjacient characters) as being part of some HTML code.

The special character equivalents are shown below:

Some browser can interpret normal quotation marks without needing the alternate version. I have used the alternate version frequently on this page. When you view the HTML source code and encounter these combination of characters, notice how they are interpreted in the Web page. Examining this section will provide an interesting example of the use of this type of HTML scripting.

To Page Index

Basic HTML tags


Creating Anchors


Each section of the page is identified with an "anchor", using the the following tag:
<A>...</A>

These are referred to as the opening and closing tags. Usually embedded in the opening tag is some additional code.

To define sections of the page with a unique name you can use

<A NAME="name_of_your_choice">

as the opening tag. This will allow you to link to this location later by referring to the name you have just defined (which contains no spaces, notice the underline character in between the words).

A generic form of the anchor definition is shown below.

<A NAME="Section_Name">Section Header</A>

Section_Name and Section Header are any names you might want to chose, most logically you would choose the name of the topic discussed at that section. Everything else should be typed in exactly as written, including the quotation marks. The only thing that shows up on the page is the Section Header (Section_Name is the anchor name that is pointed to by the HREF command discussed below. It is important in the process but not displayed on the screen)

You can then link to these anchors using the following tag:

<A HREF=#Section_Name>Go to Section</A>

The phrase "Go to Section" (or whatever descriptive phrase you decide to use) will be underlined and when you click the mouse on that phrase you will jump to the appropriate section. You must however, use the exact same name in the Section_Name location that you previously defined in the corresponding anchor. Also, be sure to preceed the Section_Name with the # character but no quotation marks are used in this tag.


Look at the source code of this page to see how the following links are set up to jump to different locations within the document.

Page Index

The links of this list take you to different sections of this page.


Headers

HTML provides 6 different size Headers.
Look at the source code of this page to see how the following header tags work.

Header H1


Header H2


Header H3


Header H4


Header H5

Header H6
Back to Page Index
The horizontal lines directly above and below are the result of a simple HTML tag used to create a Horizontal rule (line) The tag is <HR>. One line will drawn for each use of the tag.

There are several type of lists

Look at the source code of this page to see how the following list tags work.

Unordered List

Below is an Unordered List

Back to Page Index

Ordered List

Below is an Ordered List

  1. Wake up in the morning (numbers are provided by the tag)
  2. Get dressed
  3. Take a shower
  4. Change wet clothes

Back to Page Index

Definition List

Below is a Definition List

Definition list item 1
this is the definition of item 1, it could possibly go on and on for as long as needed to get a complete and precise definition of the whatever word you use, actually you don't need to use this format for definitions, use this type of list any time you like this type of layout.
Definition list item 2
this is the definition of item 2
Definition list item 3
this is the definition of item 3

Back to Page Index

Menu List

Below is a Menu List

  • Bread and Water
  • Whopper
  • Chinese Chicken Salad

    • Back to Page Index

    Directory list

    Below is a Directory List

  • Directory list item 1
  • Directory list item 2
  • Directory list item 3
    •

    Back to Page Index

    Outline Presentation

    By nesting one list within another you can create an Outline Style Presentation

    Below are two lists nested within an another list

    1. Life
    2. Liberty
    3. Pursuit of Happiness

    Back to Page Index

    Links

    This list contains links to another page


    Look at the source code of this page to see how the following links work.
    The links of this list could take you to pages that provides additional information (Don't click yet, this is actually a link to a dummy page for example purposes. Nothing additional or interesting is there and the link back takes you to the top of this page, i.e. NOT BACK TO THIS PART OF THE PAGE. The links below also jump to same dummy page. I just thought you should know).

    Back to Page Index

    Character Formatting

    The follow paragraphs illustrates some of the Character Tags

    In this first paragraph we thought it would be an exceptionally Bold to use physical styles to come right out and italicize some text or maybe even use a monospaced typewriter font. There are several physical style tags1. Sometime you want to underline something or show some deletion from a previous version.

    1. <B>Bold</B>
    2. <I>Italics</I>
    3. <TT> typewriter font (monospaced)</TT>
    4. <U> underline </U>
    5. <STRIKE>strikout</STRIKE>
    6. <BIG> BIGGER TEXT </BIG>
    7. <SMALL> SMALLER TEXT </SMALL>
    8. superscript<SUP>2</SUP>
    9. subscript<SUB>3</SUB>

    This second paragraph we are going to use the logical style so that we will emphasize some text or even strongly emphasize some text. We also highlight a word by using the definition tag. We can cite at short quote if it tickles our fancy. "In the beginning there was the blues" (GOD 1865) or we could include a short <sample of text> . If we want we could show a <sample of code> or even show the user that some <text needs to be entered> . There is even a style for <a variable>. There are eight different logical style tags:

    <EM>Emphasize</EM>
    use this tag to emphasize a word, it will usually be printed in italics, however a more sophicated system may interpret the tag differently. For example, a color system might display the word in a different color instead of italics.
    <STRONG>Strongly Emphasize</STRONG>
    use this tag for even more emphasis, it will usually be displayed in bold.
    <DFN>Definition</DFN>
    this tag is proposed for HTML 3.0
    <CITE>Citation</CITE>
    use this tag for short citations, usually diplayed in italics.
    <SAMP>sample of text</SAMP>
    use this tag to display text which you want to look distinct from your text. i.e. you are displaying a text passage and adding you own comments and you want your text comments to be discernable from the displayed text. The text will be displayed in a monospaced font such a courier.
    <CODE>sample of code</CODE>
    use this tag to display code within an HTML document. The text will be displayed in a monospaced font such a courier.
    <KBD>text needs to be entered</KBD>
    use this to indicate text that the user should enter. The text will be displayed in a monospaced font such a courier.
    <VAR>a variable</VAR>
    variable name. It will usually be displayed in italics. These logical style tags usually assign the same attributes as the three physical style tags discussed earlier, however the logical style tags provide a more flexible implementation for the future.

    <BLOCKQUOTE>
    The Blockquote tag is used for extended quotes (or any other use you see fit). It will indent the passage, setting it apart from the formating of the surrounding text. The example shown below uses two nested blockquote tags, i.e. <blockquote><blockquote> creating two different levels of indentation. At the end of the quoted material the </blockquote> closing tag is used.

    The double blockquote tags are right before this sentence. This is the innermost blockquote and it is indented the most. Using nested blockquotes allows you to essentially change the margins of the text anywhere on the page. You don't have complete control of the margin settings with this technique, however it can still be very effective. After this sentence comes the first closing </blockquote> tag.
    This is the next level of blockquote, the outer nest if you will. Notice the change in the left and right margins. It is a technique that comes in handy for creating certain layouts. Of course you can change font size and/or use any of the above mentioned character formatting tags in conjunction with the blockquote tag (I don't use them here). After this sentence comes the second closing </blockquote> tag;. Check out the source code.

    Back to Page Index

    More advanced HTML tags

    The ALIGN=CENTER tag.

    This is Centered using the ALIGN=CENTER tag.

    Use ALIGN=CENTER inside a header or paragraph tag


    The <HR> tag.

    You have control over the SIZE (in thickness)and WIDTH (distance across the page) of the horizontal rule tag. You can also select a ALIGN=RIGHT or ALIGN=LEFT tag. Finally you can use a NOSHADE tag to display a black line. The horizontal rules shown here illustated some of the possiblities. Check out the source code.

    The default setting for the <HR> tag is centered.



    You can align them to the left margin
    (these also use the NOSHADE attribute)



    Or you can align them to the right margin.



    Font Sizes

    Using the <FONT SIZE=(1-7)>This Text will be display at the selected font size</FONT>

    This is an example of a bigger font size and a smaller font size

    The following table demonstating font sizes comes from Web Publishing with HTML by Laura Lemay, a fabulous book in my opinion. I've never met her yet she has taugh me most of what I know about HTML. She also has a great web site supporting her books at:

  • http://www.lne.com/Web/ (beware, this is a real link)

    Font Sizes
    1 2 3 4 5 6 7
    Font Font Font Font Font Font Font

    List enhancements

    You can use different types of bullets with unordered lists. Check out the source code.

    • Jimi Hendrix
    • Eric Clapton
      • The Yardbirds
      • John Mayall
      • Cream
    • Jimmy Page
      • The Yardbirds
      • Led Zepelin
    • Jeff Beck
      • The Yardbirds

    1. Dark Ages
    2. Renaissance
      1. Palestrina
      2. de Lassus
      3. Gabrielli
    3. Baroque
      1. Vivaldi
      2. Handel
      3. BACH
    4. Classical
      1. Mozart
      2. Haydn
      3. ...

      4. Curly
      5. Moe

    Back to Page Index

    You can use the ADDRESS tag to let people know how to get in touch.

    The form is as follows: <ADDRESS> Your E-mail, Fax, etc. goes here </ADDRESS>

    The ADDRESS TAG looks like this, it displays in italics.

    Personally, I think it can make one's address more difficult to read,. That's why I use it for copyright notices, no one reads those anyway.



    [to page 2 of template ] [Back to the Launch Pad ]
    © 1997 Mike Sult / OpenMind Publishing
    Send comments to:
    mikesult@guitarland.com