Senior Center of
Charlottesville

HTML class at the Senior Center(continued)

Teacher: Gus Goldsmith

June 06, 02

I - Lessons on Lists

Review

1. The path to "notepad" is Start>Programs>Accessories> Notepad
   
2. "Save as" in A:/floppy disc.
   
3. Name the page as "first.html" with "all types"- Save.

Tips

--To get to Floppy A from "my documents": Click the black arrow. From the drop down window click on 3 floppy A:/
--To change the file name: One click on the icon, wait for 2 seconds and give it another click. Type on the new name or use the insertion cursor to add or remove what you need or no longer do
--For a large amount of text or graphic to save, use Zip drive. Do not confuse it with zip program.

Start

• Create a file. Name it "first.html"
  
• Type the containers :html, head, title, and body. In between the title container, type "List project "Note: although the title text does not show in the web site for the viewers, it does show on the blue line on top of the open window for us.
  
• Under the opening "body"tag, type "Helpful items to be found on the Web". Then go ahead center it and give it the header h3. Save and refresh. It looks like this:

A-The first list we learn now is the "definition list"

Type the tag"dl". Underneath that, type "dt"meaning definition term, which is what we are going to talk about. Let's type Health Care after that tag.
Now add the tag "dd" that is the body of text that explains what Health care is. So, let's type after the "dd"tag: The medical information appearing in the pages that follow are not to be considered as an endorsement or as medical advice.
Save and refresh.
You will see something like this:

Health Care:

the Medical information appearing in the pages that follow are not to be considered as an endorsement or as medical advice.

If you have more to add to the list, you just add another "dt" to each new item.
Now go ahead and add "bold" and a new header to the line Health Care if you like.
It should look like so:

Health Care:

the Medical information appearing in the pages that follow are not to be considered as an endorsement or as medical advice.

B- the ordered list "ol" and Un-ordered list "ul"

The ordered list begin with "ol" and the un-ordered list with "ul". In both cases you will start each of the following items with "li". Remember the closing tags. We will continue under Health Care with 3 subdivisions: UVa Medical Center, Martha Jefferson Hospital and Health Net. List them with the "unordered list" tags, they will look like this after "refresh":

• UVa Medical Center
• Martha Jefferson Hospital
• Health Net

More example of "definitions list" tags: We have listed the first item as Health Care, now we want to list a second item as Computer Information and we will give it a definition as: Technical information for html enthusiasts. Then we will use the ordred list "ol" to list 3 more subdividions : Web teacher, Netscape, and Other sites. Again we should use the tags "dl" "dt' and "dd" for the definition list and "ol" and "li" for the ordered lists.

Start with:
"dl". Add "dt".
Type "Computer Information".
Add "dd".
Type "Technical information for html enthusiasts. Close the tags at their proper places. Then start the ordered list. Do not forget the closing "dl" tag at the end, and the headers also.
The whole thing will look like this:

Technical information for html enthusiasts.

1. Web teacher
2. netscape
3. other sites

End of lesson Five

Lesson Sixth

Review on :

Header size

Save as or Save in A:/ Floppy disc

File name as html

File type as "all files"

Definition list "dl"; definition term "dt"; definition definition (?) "dd".

Tips:

• Even you click save instead of save as, chances are they will open "my documents" and let you "save as" instead.
• html text go left to right, top to bottom. Always check your containers to balance them out properly.
• From a web site, click on "view", chick on "source" to open your notepad page.
• To close your source page, click outside of it anywhere.

  II--Lesson with hyperlink -Link list Project

  A basic hyperlink tag looks like this:< a href="http://www.(location of the site )">( the description of it)<( /a)> The round brackets are mine.

  To add an hyperlinks from outside source:
  

  Let's create a text with an unordered list like this:
  

  Medical links

  • Senior Center
  • Martha Jefferson Hospital
  • Health Net

  Computer links

  • Computer
  • Netscape
  • Other sites
    

  Hyperlinks

  Where the Senior Center is, insert the hyperlink Senior Center Web page Where the word Computer is, insert the hyperlink Computer for Dummies

  We did that in class. Now for the sake of practice, let's continue with the other items also, shall we? For Martha Jefferson Hospital I give you the link to the "CommunityPhonebook". For Health Net the path to UVa Hospital. For Netscape, we might just go to Gus and ask him. For other sites I am giving you the Gordon Library, my hang out. ( notes: The Senior Center web sites has nothing to do with Health Care per se, but come to think of it, it does a lot for our Mental Health.)

  So here it goes:

  The web site would look like this to the viewers:

  Medical Links

  • Senior Center Senior Center Web page
  • M.J. Hospital Community Phone Book
  • Health Net UVa Hospital

  Computer Links
  • About computer Computer for Dummies
  • Netscape Gus Goldsmith
  • Other sites Library

  Insert Color

  The body tag gets modified into "body background "color
  To put body bgcolor, use this modifier < body bgcolor="the color you pick">
  

  Try this after the body tag:
  
  body bgcolor="pink"
  body bgcolor="lightblue"
  body bgcolor="black"( I took the liberty of omitting the <-->, so they may show here). With the last one you will have to make the font color very light.
  

  You will find a chart of all colors and coded names in all Html books. i.e."#77ffff " is aqua.
  

  ---

  
  

  End of lesson sixth, June 6th 02

  Notes: Gus won't be here next week. We shall meet again on June 20 at 9:00
  Computer Club will meet next Monday June10 at 1:00 PM
  • Presentation by Gus Goldsmith: Organisation with files and folders?
    
    
  © Jenny02