Senior Center of
Charlottesville

A- Sample of Front Pages :

Notes: To display links I took the liberty of changing all <-> in to (-).

1- Gil's Home Page Sample.

(Gil is a student from Group One html. The path to his home page is: (users. adelphia.net/~ryeg/sig/index.html). From there we could go to different interesting links of his, like the Computer Club link or the Senior Center staff picture chart . That is what we will learn to do next week and may be in the future weeks, when we get to use FTP. I like to see us make those drop down windows.
I suggest we bookmark his "color chart link". That might come in handy. (Thanks, Gil!)

Notice that we can get a web space from every Internet Service Provider, we may have to pay extra though, as Jenny stated in her case.
Notice also that if you have Windows 98, chances are that you can use Front Page Express free of charge.

• Our goal is that everyone of us have a web page we call our home page.
  
• The home page will always has " index.html" at the end of the path.
  
• The home page,( mother page) will be linked to different sub-division pages (baby pages?) by links either internal or external, pictures or text documents, images or charts etc...
  
• Internal link path looks like this : (a href="local path"name of the file)(/a)
  
• Outer link path looks like this: (a href="http://www.outside path"name of the file)(/a)
  
• Picture link looks like this: (img src="path"name or description)(/a)
  
• An email address link looks like this (a href="mail to:addres"name)(/a)
  
• After we finish writing our pages, we have to bring them to the web server so every one else can see them. We will learn to do it by means of the FTP. It's a simple process although it might be long to explain: it can be said that it's the way to copy files from our computer to the server following a path i.e. C:/ drive/folder/file/ etc...
• Finally we should have a Web side address. Your ISP will help you with this.

2- Gus's Home Page Sample.

(users.nexet.net/gusgo/group2/group2start.html)This is Gus's start up page. He has spent many hours working on it for us (Thanks, Gus)

• Review on different tags, containers like html, head, title, heading etc...check the blue line on top of the page to see the title.
• Notice the complicated Meta tags at the beginning of the View>Source page . These tags are called attributes and are put in automatically there. We should not worry about it.
• Use the keybox to search for the word location you like to find in a text document. It is much easier that they highlight the words for you than you have to scroll up and down to look for them. Just click Search at the menu bar, type the word in the keybox and click Find.
• Put color in your body page background, and in text fonts : add attributes to your link. Following are samples of those attributes:
  (body bgcolor="color"text="color"link="color?"vlink="color?) The italics are mine to show where you should insert the color of your preference
  Vlink stands for visitor link. Once you state the color attributes of your pages, other people who see your page cannot change it. We can also use font color (font color="color)(/font). You can also design horizontal lines like this:

  ---

  
  And to add "size" to them: just use (hr size="5") like I did here:

  ---

• Visit Gus's (users.nexet.net/gusgo/group2/group2start.html) links to group2 member web sites. The idea is to go to all other yummy pages from the home page. There is a nice color chart also that you might like to bookmark too. Suit your taste.
• Visit the outstanding tutorials web site as one of those sites and learn to create links from there

3-Bruce's Home Page Sample.

Bruce gave us a demonstration of his colorful HomePage with pictures and links to his vacations and family photos. There are animated props that I wish I know how to do it. (Thanks a millions Bruce, keep the good work)
The path to his home page is: www.bigfoot.com~b4saunders
Do not miss the links. If you want to know how he did it, go to View>Source.

B- We learn to make a "table" :

• First insert the table container (table)(/table)

• Then type (tr) before the title by which you like to call your row. The t r stands for table row.

• Right below the (tr) you put (td) which stands for table data or table detail. You can repeat the (tr) and (td) as many times as you like. It will set your data in different columns.

  This is a sample of a table of 2 rows and 3 columns :

  	Monday		Tuesday		Wednesday
  	Thursday		Friday		Saturday

  Which I wrote as:

  (table)(table border="25") (table cellpadding="15"cellspacing="14"
  (td)(td bgcolor="yellow")Monday(/td)
  (td)(td bgcolor="pink")Tuesday(/td)
  (td)(td bgcolor="aqua")Wednesday(/td)
  (tr)
  (td)(td bgcolor="aqua")Thursday(/td>
  (td)(td bgcolor="violet")Friday(/td)
  (td)(td bgcolor="yellow")Saturday(/td)
  (/table)

  
  

  • Visit Gus's link where he built a more complicated table.

  • Learn a few more attributes that go with "table" like:

  • (table align="left, right, top, or bottom")

  • (table border="cellspacing="#"cellpadding="#") # is the digit you want for the spacing or the padding. Play around with the number to see what you like.

  • The caption tag goes like this on top or bottom of the table: (caption)text(/caption)

  • For a table with border, cell padding and cellspacing, go to Gus's home page for group 2 (users.nexet.net/gusgo/group2/Group2Start.html)

  • Go to the links:

    1- A page displaying 2 tables done only with NotePad
    2-A plain table without row or column deliniation
    3-A fancy table.

  • Go to View and Source and look at the way it is made.

    It looks like this: (note that I have changed all angular brackets to round ones)

    (TABLE BORDER) (CAPTION)Aligning Text Within Cells:(/CAPTION)

    This is Gus's table #1

    (TR)
    (TD)(/TD)
    (TD) (ALIGN=LEFT)Left(/TD)
    (TD)(ALIGN=CENTER)Center(/TD)
    (TD) (ALIGN=RIGHT)Right(/TD)
    (/TR)
    (TR)
    (TD)(IMG SRC="logo2.gif")(/TD)
    (TD) (ALIGN=TOP)Top o' the cell(/TD)
    (TD) (ALIGN=MIDDLE)Middle o' the cell(/TD)
    (TD) (ALIGN=BOTTOM)Bottom o' the cell(/TD)
    (/TR)
    (/TABLE)

    This is Gus's table #2

    (TABLE BORDER="10" CELLSPACING="25" CELLPADDING="23")
    (CAPTION)This is a table with lots of cell-spacing and cell-padding (/CAPTION)
    (TR)
    (TD)(ALIGN =right)cell R1C1(/TD)
    (TD)cell R1C2(/TD)
    (TD)cell R1C3 is a real wide cell(/TD)
    (/TR)
    (TR)
    (TD)cell R2C1(/TD)
    (TD)cell R2C2(/TD)
    (TD)cell R2C3(/TD)
    (/TR)
    (TR)
    (TD) (ALIGN =left)cell R3C1(/TD)
    (TD) (ALIGN = "CENTER")cell R3C2(/TD)
    (TD) (ALIGN = "CENTER")cell R3C3(/TD)
    (/TR)
    (/TABLE>

    End of Lesson Nine

    

    ---

    ©Jenny2002