Exploring the Internet Tutorials
 

Microsoft FrontPage Tutorials - January 24, 2008

January 7, 2008

Complete the following tutorials in NotePad++.

-------------------------------------------------------------------------------------------------------------------------------------------------------------

To access a list of color codes, access the following website: http://webmonkey.com/webmonkey/reference/color_codes

To change the background color, use the following tag:

 

 

You have already learned the basic HTML tags that are common in most HTML documents. In addition to headings and paragraphs, probably the most common HTML element you’ll use is the list. HTML defines five kinds of lists:

  •    Numbered, or ordered lists, usually labeled with numbers
  •   Bulleted, or unordered lists, typically labeled with bullets or other type of symbol
  •  Glossary lists, in which each item in the list has a term and a definition for that term, arranged so that the term is somehow highlighted or drawn out from the text
  •    Menu list, for lists of short paragraphs (typically one line)
  •   Directory lists, for lists of short items that can be arranged vertically or horizontally

 List Tags

All list tags have common elements:

    ˙       The entire list is surrounded by the appropriate opening and closing tag for the kind of list (for example,

    and
, or and ).

    ˙       Each list item within the list has its own tag:

and
for the glossary lists, and
  • for all other lists.

    Numbered Lists

    Numbered lists are surrounded by the

      …
    tags (OL stands for Ordered List), and each item with the list begins with the
  • (List Item) tag.

    The

  • tag is one-sided; you do not have to use the closing tag. When the browser displays an ordered list, it numbers (and often indents) each of the elements sequentially. You do not have to do the numbering yourself, and if you add or delete items, the browser will renumber them the next time the page is loaded.

    Try the following example:

    This is an ordered list of steps for a nachos recipe with each list item a step in the set of procedures:

    Ms. Wiley’s Awesome Nachos

    1. Warm up Refried beans with chili powder and cumin.

    2. Glop refried beans on tortilla chips.

    3. Grate equal parts Jack and Cheddar cheese, spread on chips.

    4. Chop one small onion finely, spread on chips.

    5. Heat under broiler 2 minutes.

    6. Add guacamole, sour cream, fresh chopped tomatoes, and cilantro.

    7. Drizzle with hot green salsa.

    8. Broil another  1 minute.

    9. Nosh.

    ____________________________________________________________________________________________________________________________________________________________________________________________

    Attributes are extra parts of HTML tags that contain options or other information about the tag itself. You can customize ordered lists in two main ways: by how they are numbered and what number the list starts at. The TYPE attribute can take one of five values to define what type of numbering to use on the list:

     

    ˙       ˙       “1”: Specifies that standard Arabic numerals should be used to number the list (i.e., 1, 2, 3, 4, 5, and so on)

    ˙       ˙       “a”: Specifies that lowercase letters should be used to number the list (i.e., a, b, c, d, e, and so on)

    ˙       ˙       “A”: Specifies that uppercase letters should be used to number the list (i.e., A, B, C, D, E, and so on)

    ˙       ˙       “i”:  Specifies that lowercase Roman numerals should be used to number the list (i.e., i, ii, iii, iv, v, and so on)

    ˙       ˙       “I”: Specifies that uppercase Roman numerals should be used to number the list (i.e., I, II, III, IV, V, and so on)

     

    Try the following example:

     

    Cheesecake ingredients:

    1. Quark Cheese

    2. Honey

    3. Cocoa

    4. Vanilla Extract

    5. Flour

    6. Eggs

    7. Walnuts

    8. Margerine

     

    Using another attribute, START, you can specify what number or letter to start your list. The default starting point is 1, of course. Using START, you can change this number. For example,

      would start the list at number 4, whereas
        would start the numbering with c and move through the alphabet from there. Using the example above, you can start it numbering with the Roman numeral V as follows:

         

        Cheesecake ingredients:

            START=5>

        1. Quark Cheese

        2. Honey

        3. Cocoa

        4. Vanilla Extract

        5. Flour

        6. Eggs

        7. Walnuts

        8. Margerine

        Unordered Lists

        In unordered lists, the elements can appear in any order. An unordered list looks just like an ordered list in HTML except that the list is indicated using

          …
        tags instead of OL. The elements of the list are separated by
      1. , just as with ordered lists. Try this example:

        Lists in HTML

        • Ordered Lists

        • Unordered Lists

        • Menus

        • Directories

        • Glossary Lists

         

        In unordered lists, the items are bulleted or marked with some other symbol. They can also be customized. If you use the TYPE attribute in the

          tag can take three possible values:

          ˙       ˙       “disc”: A disc or bullet; this style is generally the default.

          ˙       ˙       “square”: Obviously produces a square instead of a disc.

          ˙       ˙       “circle”: As compared with the disc, this value should generate an unfilled circle on certain browsers.

           

          Try the following example:

          • DAT  -  Digital Audio Tapes

          • CD  -  Compact Discs

          • Cassettes

            • DAT  -  Digital Audio Tapes

            • CD  -  Compact Discs

            • Cassettes

              • DAT  -  Digital Audio Tapes

              • CD  -  Compact Discs

              • Cassettes

               

              Just as you can change the numbering pattern is the middle of an ordered list, you can change the type of bullet mid-stream in a list by using the TYPE attribute is the

            • tag.

              ___________________________________________________________________________________________________________________________________________________________________________________________________________________

              Glossary Lists

              Glossary list are slightly different from other lists. Each list item in the glossary list has two parts:

              ˙       ˙       A term

              ˙       ˙       The term’s definition

              Each part of the glossary list has its own tag:

              for the term (“definition term”), and
              for its definition (“definition definition”). 
              and
              are both one-sided tags, and they usually occur in pairs, although most browsers can handle single terms or definitions.  The entire glossary list is indicated by the tags
              . . .
              (“definition list”).

              Following is a glossary list example with a set of herbs and descriptions of how they grow:

              Basil
              Annual. Can grow four feet high; the scent of its tiny white flowers is heavenly

              Oregano
              Perennial. Sends out underground runners and is difficult to get rid of once established.

              Coriander
              Annual. Also called cilantro, coriander likes cooler weather of spring and fall.

               

              Glossary lists are usually formatted in browsers with the terms and definitions on separate lines, and the left margins of the definitions are indented.

               

              You don’t have to use the glossary lists for terms and definitions of course. You can use them anywhere that the same sort of list is needed. Here’s an example to try:

               

              Macbeth
              I’ll go no more. I am afraid to think of what I have done; look on’t again I dare not.

              Lady Macbeth
              Infirm of purpose! Give me the daggers. The sleeping and the dead are as but pictures. ‘Tis the eye if childhood that fears a painted devil. If he do bleed, I’ll guild the faces if the grooms withal, for it must seem their guilt. (Exit. Knocking within)

              Macbeth
              Whence is that knocking? How is’t wit me when every noise appalls me? What hands are here? Ha! They pluck out mine eyes! Will all Neptune’s ocean wash this blood clean from my hand? No. This my hand will rather the multitudinous seas incarnadine, making the green one red. (Enter Lady Macbeth)

              Lady Macbeth
              My hands are of your color, but I shame to wear a heart so white.

              Nesting Lists

              What happens if you put a list inside another list? Nesting lists is fine as far as HTML is concerned; just put the entire list structure inside another list as one of its elements. The nested list just becomes another element of the first list, and it is indented from the rest of the list. Lists like this work especially well for menu-like items, such as in table of contents or as outlines. Indenting nested lists in HTML code itself helps show their relationship to the final layout:

              Try this example:

              HTML ELEMENTS

                    

                      

                • WWW

                      

                • Organization

                      

                • Beginning HTML

                      

                               

                  • What HTML is

                               

                  • How to Write HTML

                               

                  • Doc structure

                               

                  • Headings

                               

                  • Paragraphs

                               

                  • Comments

                        

                • Links

                • More HTML

               

              The following exercise shows you how to create an HTML file that uses the tags that you’ve learned about in this lesson. It will give you a feel for what the tags look like when they’re displayed onscreen and for the sorts of typical mistakes you’re going to make. Following is an example that includes structure tage, a title, a couple of headings, and a paragraph or two. Let’s try it:

               

              Camembert Incorporated

              ”Many’s the long night I dreamed of cheese - - toasted, mostly.” - - Robert Louis Stevenson

              What We Do

              We make cheese. Lots of cheese; more than eight tons of cheese a year.

              Why We Do It

              We are paid an awful lot of money by people who like cheese. So we make more.

              Our Favorite Cheese

              • Brie

              • Havarti

              • Camembert

              • Mozzarella

               

    		•