Ms. Wiley TeacherWeb Update Exploring the Internet Tutorials

Password: Forgot your password?

<A href="http://babich.info/internet/FrontPage/">Microsoft FrontPage Tutorials</A> - January 24, 2008
January 7, 2008
Complete the following tutorials in NotePad++.
<UL>
<LI>
<DIV class=MsoNormal style="MARGIN: 0in 0in 10pt; LINE-HEIGHT: 115%"><A href="http://babich.info/internet/links.html">Links and Anchors Tutorial</A></DIV></LI>
<LI>
<DIV class=MsoNormal style="MARGIN: 0in 0in 10pt; LINE-HEIGHT: 115%"><A href="http://babich.info/internet/frames.html">Frames Tutorial</A></DIV></LI>
<LI>
<DIV class=MsoNormal style="MARGIN: 0in 0in 10pt; LINE-HEIGHT: 115%"><A href="http://babich.info/internet/tables.html">Tables Tutorial</A></DIV></LI></UL>
-------------------------------------------------------------------------------------------------------------------------------------------------------------
To access a list of color codes, access the following website: <A href="http://webmonkey.com/webmonkey/reference/color_codes">http://webmonkey.com/webmonkey/reference/color_codes</A>
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:<o:p></o:p>
<UL>
<LI>
<DIV class=MsoNormal style="MARGIN: 0in 0in 0pt 0.5in; TEXT-INDENT: -0.25in; mso-list: l1 level1 lfo1">   Numbered, or ordered lists, usually labeled with numbers<o:p></o:p></DIV></LI>
<LI>
<DIV class=MsoNormal style="MARGIN: 0in 0in 0pt 0.5in; TEXT-INDENT: -0.25in; mso-list: l1 level1 lfo1">  Bulleted, or unordered lists, typically labeled with bullets or other type of symbol<o:p></o:p></DIV></LI>
<LI>
<DIV class=MsoNormal style="MARGIN: 0in 0in 0pt 0.5in; TEXT-INDENT: -0.25in; mso-list: l1 level1 lfo1"> 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<o:p></o:p></DIV></LI>
<LI>
<DIV class=MsoNormal style="MARGIN: 0in 0in 0pt 0.5in; TEXT-INDENT: -0.25in; mso-list: l1 level1 lfo1">   Menu list, for lists of short paragraphs (typically one line)<o:p></o:p></DIV></LI>
<LI>
<DIV class=MsoNormal style="MARGIN: 0in 0in 0pt 0.5in; TEXT-INDENT: -0.25in; mso-list: l1 level1 lfo1">  Directory lists, for lists of short items that can be arranged vertically or horizontally<o:p></o:p></DIV></LI></UL>
 List Tags<o:p></o:p>
All list tags have common elements:<o:p></o:p>
    ÿ       The entire list is surrounded by the appropriate opening and closing tag for the kind of list (for example, 
<UL>and </UL>, or 
<MENU>and </MENU>).<o:p></o:p> 

    ÿ       Each list item within the list has its own tag: 
<DT>and 
<DD>for the glossary lists, and 
<LI>for all other lists.<o:p></o:p> 

Numbered Lists<o:p></o:p>
Numbered lists are surrounded by the 
<OL>…</OL>tags (OL stands for Ordered List), and each item with the list begins with the 
<LI>(List Item) tag.<o:p></o:p> 

The 
<LI>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.<o:p></o:p> 

Try the following example:<o:p></o:p>
This is an ordered list of steps for a nachos recipe with each list item a step in the set of procedures:<o:p></o:p>

Ms. Wiley’s Awesome Nachos<o:p></o:p>


<OL><o:p></o:p>


<LI>Warm up Refried beans with chili powder and cumin.<o:p></o:p> 


<LI>Glop refried beans on tortilla chips.<o:p></o:p> 


<LI>Grate equal parts Jack and Cheddar cheese, spread on chips.<o:p></o:p> 


<LI>Chop one small onion finely, spread on chips.<o:p></o:p> 


<LI>Heat under broiler 2 minutes.<o:p></o:p> 


<LI>Add guacamole, sour cream, fresh chopped tomatoes, and cilantro.<o:p></o:p> 


<LI>Drizzle with hot green salsa.<o:p></o:p> 


<LI>Broil another  1 minute.<o:p></o:p> 


<LI>Nosh.<o:p></o:p> 

</LI></OL><o:p></o:p>

____________________________________________________________________________________________________________________________________________________________________________________________<o:p></o:p>
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:<o:p></o:p>
 <o:p></o:p>
ÿ       ÿ       “1”: Specifies that standard Arabic numerals should be used to number the list (i.e., 1, 2, 3, 4, 5, and so on)<o:p></o:p>
ÿ       ÿ       “a”: Specifies that lowercase letters should be used to number the list (i.e., a, b, c, d, e, and so on)<o:p></o:p>
ÿ       ÿ       “A”: Specifies that uppercase letters should be used to number the list (i.e., A, B, C, D, E, and so on)<o:p></o:p>
ÿ       ÿ       “i”:  Specifies that lowercase Roman numerals should be used to number the list (i.e., i, ii, iii, iv, v, and so on)<o:p></o:p>
ÿ       ÿ       “I”: Specifies that uppercase Roman numerals should be used to number the list (i.e., I, II, III, IV, V, and so on)<o:p></o:p>
 <o:p></o:p>
Try the following example:<o:p></o:p>
 <o:p></o:p>

Cheesecake ingredients:<o:p></o:p>


<OL type=”I” <o:p>


<LI>Quark Cheese<o:p></o:p> 


<LI>Honey<o:p></o:p> 


<LI>Cocoa<o:p></o:p> 


<LI>Vanilla Extract<o:p></o:p> 


<LI>Flour<o:p></o:p> 


<LI>Eggs<o:p></o:p> 


<LI>Walnuts<o:p></o:p> 


<LI>Margerine<o:p></o:p> 

</LI></OL><o:p></o:p>

 <o:p></o:p>
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, 
<OL start=4>would start the list at number 4, whereas 
<OL type=”a” start=3>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:<o:p></o:p> 

 <o:p></o:p>

Cheesecake ingredients:<o:p></o:p>


<OL style="mso-spacerun: yes" type="”I”<SPAN">  START=5><o:p></o:p> 


<LI>Quark Cheese<o:p></o:p> 


<LI>Honey<o:p></o:p> 


<LI>Cocoa<o:p></o:p> 


<LI>Vanilla Extract<o:p></o:p> 


<LI>Flour<o:p></o:p> 


<LI>Eggs<o:p></o:p> 


<LI>Walnuts<o:p></o:p> 


<LI>Margerine<o:p></o:p> 

</LI></OL><o:p></o:p>

<H1 style="MARGIN: 24pt 0in 0pt">Unordered Lists</H1>
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 
<UL>…</UL>tags instead of OL. The elements of the list are separated by 
<LI>, just as with ordered lists. Try this example:<o:p></o:p> 


Lists in HTML<o:p></o:p>


<UL><o:p></o:p>


<LI>Ordered Lists<o:p></o:p> 


<LI>Unordered Lists<o:p></o:p> 


<LI>Menus<o:p></o:p> 


<LI>Directories<o:p></o:p> 


<LI>Glossary Lists<o:p></o:p> 

</LI></UL><o:p></o:p>

 <o:p></o:p>
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 
<UL>tag can take three possible values:<o:p></o:p> 

ÿ       ÿ       “disc”: A disc or bullet; this style is generally the default.<o:p></o:p>
ÿ       ÿ       “square”: Obviously produces a square instead of a disc.<o:p></o:p>
ÿ       ÿ       “circle”: As compared with the disc, this value should generate an unfilled circle on certain browsers.<o:p></o:p>
 <o:p></o:p>
Try the following example:<o:p></o:p>

<UL type=”disc”><o:p></o:p>


<LI>DAT  -  Digital Audio Tapes<o:p></o:p> 


<LI>CD  -  Compact Discs<o:p></o:p> 


<LI>Cassettes<o:p></o:p> 

</LI></UL><o:p></o:p>


<UL type=square”><o:p></o:p>


<UL type=”disc”><o:p></o:p>


<LI>DAT  -  Digital Audio Tapes<o:p></o:p> 


<LI>CD  -  Compact Discs<o:p></o:p> 


<LI>Cassettes<o:p></o:p> 

</LI></UL><o:p></o:p>


<UL type=”circle”><o:p></o:p>


<UL type=”disc”><o:p></o:p>


<LI>DAT  -  Digital Audio Tapes<o:p></o:p> 


<LI>CD  -  Compact Discs<o:p></o:p> 


<LI>Cassettes<o:p></o:p> 

</LI></UL><o:p></o:p>

 <o:p></o:p>
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 
<LI>tag.<o:p></o:p> 

___________________________________________________________________________________________________________________________________________________________________________________________________________________<o:p></o:p>
<H1 style="MARGIN: 24pt 0in 0pt">Glossary Lists</H1>
Glossary list are slightly different from other lists. Each list item in the glossary list has two parts:<o:p></o:p>
ÿ       ÿ       A term<o:p></o:p>
ÿ       ÿ       The term’s definition<o:p></o:p>
Each part of the glossary list has its own tag: 
<DT>for the term (“definition term”), and 
<DD>for its definition (“definition definition”).  
<DT>and 
<DD>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 
<DL>. . .</DL>(“definition list”).<o:p></o:p> 

Following is a glossary list example with a set of herbs and descriptions of how they grow:<o:p></o:p>

<DL><o:p></o:p>


<DT>Basil 
<DD>Annual. Can grow four feet high; the scent of its tiny white flowers is heavenly<o:p></o:p> 


<DT>Oregano 
<DD>Perennial. Sends out underground runners and is difficult to get rid of once established.<o:p></o:p> 


<DT>Coriander 
<DD>Annual. Also called cilantro, coriander likes cooler weather of spring and fall.<o:p></o:p> 

</DD></DL><o:p></o:p>

 <o:p></o:p>
Glossary lists are usually formatted in browsers with the terms and definitions on separate lines, and the left margins of the definitions are indented.<o:p></o:p>
 <o:p></o:p>
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:<o:p></o:p>
 <o:p></o:p>

<DL><o:p></o:p>


<DT>Macbeth 
<DD>I’ll go no more. I am afraid to think of what I have done; look on’t again I dare not.<o:p></o:p> 


<DT>Lady Macbeth 
<DD>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)<o:p></o:p> 


<DT>Macbeth 
<DD>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)<o:p></o:p> 


<DT>Lady Macbeth 
<DD>My hands are of your color, but I shame to wear a heart so white.<o:p></o:p> 

</DD></DL><o:p></o:p>

<H1 style="MARGIN: 24pt 0in 0pt">Nesting Lists</H1>
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:<o:p></o:p>
Try this example:<o:p></o:p>

<H1>HTML ELEMENTS</H1><o:p></o:p>


<OL><o:p></o:p>

     
<UL><o:p></o:p>

     
<LI>WWW<o:p></o:p> 

     
<LI>Organization<o:p></o:p> 

     
<LI>Beginning HTML<o:p></o:p> 

     
<UL><o:p></o:p>

            
<LI>What HTML is<o:p></o:p> 

            
<LI>How to Write HTML<o:p></o:p> 

            
<LI>Doc structure<o:p></o:p> 

            
<LI>Headings<o:p></o:p> 

            
<LI>Paragraphs<o:p></o:p> 

            
<LI>Comments<o:p></o:p> 

     </LI></UL><o:p></o:p>


<LI>Links<o:p></o:p> 


<LI>More HTML<o:p></o:p> 

</LI></UL></OL><o:p></o:p>

 <o:p></o:p>
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:<o:p></o:p>
 <o:p></o:p>
<o:p></o:p>
<o:p></o:p>
<o:p></o:p>
<o:p></o:p>
<o:p></o:p>

<H1>Camembert Incorporated</H1><o:p></o:p>


”Many’s the long night I dreamed of cheese - - toasted, mostly.” - - Robert Louis Stevenson<o:p></o:p>

<H2>What We Do</H2><o:p></o:p>


We make cheese. Lots of cheese; more than eight tons of cheese a year.<o:p></o:p>


<H2>Why We Do It</H2><o:p></o:p>


We are paid an awful lot of money by people who like cheese. So we make more.<o:p></o:p>


<H2>Our Favorite Cheese</H2><o:p></o:p>


<UL><o:p></o:p>


<LI>Brie<o:p></o:p> 


<LI>Havarti<o:p></o:p> 


<LI>Camembert<o:p></o:p> 


<LI>Mozzarella<o:p></o:p> 

</LI></UL><o:p></o:p>

<o:p></o:p>
<o:p></o:p>
<o:p> </o:p></DD></LI></UL></UL></UL></LI></OL></OL></LI></DD>

Update Exploring the Internet Tutorials

Exploring the Internet Tutorials (Instructions)

© 2001-2008 TeacherWeb.com