«§      §»

Unit 1: Introduction - What is a Web Page?
with Author's Notes zintro

The following will provide definitions of common computer terms and a brief discussion of their use with your computer.

Overview of an HTML File___ (Use underscore to check off presentation)

   "Personally, the taste a scratch built chocolate cake is usually better than one from a Better Crocker box. If you don't think you can scratch bake a cake, then what would your guests think when you serve your cake for dessert.

   HTML is not that complicated. There are elements of HTML to understand, like what goes into a cake. There is a set of rules to follow, like how to put together the elements for a good chocolate cake. Like, in baking cake, you can make a lousy cake if you don't know what goes into a cake, and don't follow the basic sequence of the baking process.

   So, if you want to be a good HTML designer, wouldn't it be better to know what goes into making an HTML file, and the order that must be used. When you do, then you will become a better "cook", and HTML coding will be a "piece of cake".
   In addition, you will be proud of what you serve for your "dessert"." -- The Author

File Content___

100. ___Text
     • ___Numbers  ___Characters
     • ___Our First Exercise. What is a number? Are numbers real?
     
     
101. ___HTML tags
     • ___blocks  ___non-block Tags
     • ___Beginning block tag, "<command element=......>"
       
     • ___Ending block tag, "</command>"
     • ___Elements  ___Arguments
     
     
102. ___Required Text and Tags
     • ___Minimum content for an HTML file.
     • ___Is HTML a Programming Language?
     • ___What is a browser! (a course in itself)
     • ___Can browsers process all files?
     • ___Why are browsers called browsers?
     • ___Are all browser alike?
     • ___How "smart" is a browser?
     • ___What determines what you see?
       • ___What you, the designer, can control!
       • ___What you, the designer, can not control!
       • ___Where is the interpretation done?

         ___Disclaimer Reference

         ___ http://www.passco.com/vhsdisclaimer.htm

103. ___Internet access required at this point
     
     
104. ___File Generation
     • ___Generators (Front Page)  ___Browser Composers
     • ___HTML Editors
     • ___Word Processors ( MS-Word) - http://www.passco.com/septmbr.doc
     • ___Scratch  ___Text Editors  
     • ___Select Editor  ___http://www.passco.com/b3three.htm
     • ___Basic Skills Course  http://www.passco.com/basic3.htm
     • ___Notepad  ___ Notepad+ (download)
       http://www.passco.com/notepad+.exe
       
     
     
105. ___File Location
     • ___Local to your PC  ___Resource Location
     • ___Internet location and access
     • ___ISP access accounts  ___Domains and Hosting
     • ___Page Availability
     • ___Page Unavailability  ___404 Error
     • ___Resource Access Errors
     • ___ Exercise: Making a "HomePage" on my PC at Home
     
     
106. ___Viewing HTML File Source Code  ___Why?  ___How?
     
     
107. ___Viewing HTML File Resources  ___Why?  ___How?
     
     
108. ___Some Simple HTML File Examples - View their Source and Info
     

     1. ___ Example Link: http://www.passco.com/sample.htm
        
        
     2. ___ Example Link: http://www.passco.com/basic3.htm
        
        
     3. ___ Example Link: http://www.passco.com/tuit.htm
        
        
     4. ___ Example Link: http://www.passco.com/banners.htm
        
        
     5. ___ Example Link: http://www.passco.com/docu00001.jpg
        
        
     6. ___ Example Link: http://www.passco.com/e-calendar.htm
        

     
     The "sample.htm" file has an HTML error.
     The "basic3.htm" file has a spelling error.
     The "tuit.htm" file has a tuit graphic. What is its file name?
     The "banners.htm" file definitely needs validation. The "e-calendar.htm" file needs an annual moldification.

     
109. ___Some Related Files Associated with Web pages
     
     
     ___ Daily Stock Graphs - Watch your portfolio throughout day.
     Example Link - BEAS DELL KLAC PETM HCA WLP TOL THC YUM WEN WM KFT ATH
     
     
     
     ___ Free HTML Validator - Check your site for errors.
     Example Link - http://www.htmlvalidator.com/lite/?google=free+HTML+Validator
     
     
     
     ___ Dr. Watson, Version 5.02 -Double check.
     Example Link - http://watson.addy.com/nph-watson5.cgi
     
     
     
     ___ Free Online HTML File Spell Checker -
     "What, you never misspeel anythig!"
     Example Link - http://www.bcentral.com/products/spell_checker.asp
     
     
     
110. ___Possible Workshop or Project Web Sites
     
     ___An "@HomePC" Personal Web Page
     ___An "@AnyPC"  Personal Web Page
     ___An Independent Email Address Book
     ___Make a Graphic Directional Map for your location
     ___Example Link: - Have a weather site at your finger tips.
     
     

Unit 2: Structure - The Basic HTML File
with Author's Notes zstructure

Hypertext Markup Language___

200. ___HTML code types and syntax
     • ___blocks  ___statements
     • ___spaces  ___HTML case sensitivity
     
     Basic Blocks___
201. ___HTML block  ___HEAD block ___BODY block
202. ___"My First Page" (select an editor and edit a new file)
     
     Exercise: Code a file containing the HTML, HEAD and BODY blocks.
     
     
203. ___Saving Our Page (to the desktop)
204. ___Access to Our Page (from the desktop)
205. ___Presentation of Our Page (repeating presentations)
206. ___Viewing Source of "My First Page"
207. ___Viewing Resources of "My First Page"
     
     HEAD block purpose and content___
208. ___DOCTYPE statement
209. ___TITLE block
210. ___"My First Page" with file TITLE and a heading
     
     Exercise: Code your file containing a TITLE block and a heading.
     
     
211. ___META Statements
     • ___Name element  ___Keywords  ___Description
     • ___Content element
     • ___Element types
       • ___Literals  ___Literal constants
       • ___Hexidecimals Literals
       • ___Constants  ___Literal  ___Numeric
     • ___Meta Manager Site - http://www.siteowner.com/system/meta.cfm
212. ___BASE Statement
213. FRAMESET blocks (Not discussed in this course)
214. ___Comment Statement  ___Break Statement
215. ___SCRIPT blocks
216. ___STYLE blocks
     
     BODY block purpose and content___
217. The First Rule of HTML Coding!
218. The Second Rule!
219. ___CENTER block
220. ___"My First Page" centered
     
     
221. ___Exercise: Code your file containing CENTER block.
     Can you enlarge and darkend the FONT?
     
     
222. DIV (division) block (Not discussed in this course)
223. ___P (paragraph) block
224. ___BLOCKQUOTE block
225. ___"My First Page" with margins
     
226. ___Our First HTML tag in depth___
     • ___The BODY block tag
       • BGCOLOR= element  ___Default
       • BACKGROUND= element  ___Overrideing element
       • TEXT= element
       
       

  Study Author's HTML Structure Notes___ Top-of-Page/Menu

Unit 3: Text - A Simple Page
with Author's Notes
zsimple
Textual Size, Appearance and Presentation___

300. ___What is "text", and what isn't "text"?
301. ___What about spaces and spacing?
302. ___Comments
303. ___Horizontal Ruler statement
304. ___Header blocks
305. ___FONT block and its elements
     • ___SIZE= element
     • ___Browser's library of fonts
     • ___Example Link - Netscape vs. Internet Explorer Font Availability
       http://www.passco.com/sn_nsiebrowsers.htm
       
     • ___"My First Page" with SIZE= fonts
       
     
     
306. ___COLOR= element
     
     
     • ___Hex Colors
       
       ___Example Link - RGB Hex Triplet Color Chart>
       http://www.hypersolutions.org/images/rgbhex.gif)
       
       ___Example Link - http://www.passco.com/colours.htm
       
       
     • ___"Literal Color Constants"
       
       ___Example Link - http://www.passco.com/colortab.htm)
       
       
     • ___"textual colors"
       
       
     • ___Reference: white, tomato, Estela, Blanche
       "Reed", "Mickey", Ewing, Hamilton, Clear, Patty
       
       ___Example Link - http://www.passco.com/namecolor.htm
       
       
     • ___"My First Page" with colored font
     
     
307. ___FACE= element
     • ___Fonts
     • ___Default Font  ___Browser Font Dependency
     • ___Multiple arguments for FACE= element
     • ___"My First Page" with different fonts
     
     
308. ___Exercise: Code your file using FONT blocks with
     COLOR= , FACE= and SIZE= elements.
     Add some Break statements.
     
     
309. ___Embedded FONT block tags
     • ___Bold block  ___STRONG block
     • ___Italic block ___Underscore block
     • ___BIG block  ___SMALL block
     
     
310. ___P (paragraph) block
     • ___Default Alignment
     • ___Justification Alignment
     • ___"My First Page" with justification
     
     
311. ___Break, "BR" statement  ___BR statement vs. P Block
     
     
312. ___BLOCKQUOTE block
     
     
313. ___Using Invalid Elements
     • ___"My First Page" with margins
     
     
314. ___PRE block
     • ___Example Link: - http://www.passco.com/viewers.htm
       
       
     • ___Exercise: - Copy entire file into new file.
       Delete <PRE>.....</PRE> tags, then Save and View file.
       
       

  Study Author's Simple Text Notes___ Top-of-Page/Menu

Unit 4: Images - A Simple Page with Images
with Author's Notes
zimage
Icons and Images are the topices of this unit.

40. ___Icon Graphics
    • ___File types (formats)  ___extensions  ___animation
    • ___Size  ___dimensions  ___resizing images
    • ___Source of Icons  ___Viewing Images
    • ___Exercise: Securing some Icons
      
      ___Source Link: http://www.trash.net/~ffischer/admin/icons/
      
      
    • ___Saving Images  ___/Image Folders
    
    
41. ___Image Graphics
    • ___File types and Pluggin Modules
      
      ___Example Link: *.GIF vs *.JPG Graphic Comparison
      
      
    • ___File Size  ___Securing Graphic Demensions
    • ___Source of Images
    • ___Securing some Images
    • ___Get a map for your site
      
      
42. ___ Example link: http://www.superpages.com/
    Click "People Pages". Enter data for your address.
    
    
43. ___Exercise: Get map and save to desktop
    
    
44. ___IMG statement tag
    • ___SRC= element
    • ___ALIGN= element
    • ___ALT= element
    • ___BORDER= element
    • ___WIDTH= element  HEIGHT= element
    • ___HSPACE= element  VSPACE= element
    • ___"My First Page" with an Image
      
      ___Exercise: Make a map for your location.
      
    
    
45. ___Presenting Icons and Images on a Page
    
    • ___Using totally accessible graphics
      • ___Advantages
      • ___Disadvantage
    • ___Using remotely accessible graphics
      • ___Advantages
      • ___Disadvantage
    
    
46. ___ "My Wallpaper Page"  ___Purpose
    
    ___ Example link: My Window's Wallpaper
    
    
    
47. ___ Exercise: Cut and Paste the code below into a new file, and view.
    
    

    <HTML>   <HEAD><TITLE>My Wallpaper</TITLE></HEAD>   <BODY>     <IMG SRC="http://www.passco.com/images/walpaper.gif">   </BODY></HTML>

    
    
48. ___ Exercise: Make this your Window Wallpaper.
    
    
49. ___A Graphic Web Page - Current Daily Stock Curves
    Example Link:
    http://ichart.yahoo.com/z?s=dell&c=^gspc,^ixic,^dji&a=v&p=s&t=1d&l=on&z=m&q=l
    
    
    Example Link:
    http://ichart.yahoo.com/b?s=dell
    
    
    
50. ___A "Real Time" Web Image
    
    Examples: Three Webcams
    
    1. Example link: http://www.tiffin.k12.oh.us/LiveImageUpload/TMSlive_00001.jpg
       
       
    2. Example link: http://www.exit98.com/LIVE.JPG
       
       
    3. Example link: http://camera.touchngo.com/recent0.jpg
       
       
    Examples: Daily Stock Status Pafe
    
    1. Example link: http://www.passco.com/sn_klac.htm
       
       
      Study Author's Image Notes___ Top-of-Page/Menu

Unit 5: Web Page File Management
zmanagement

50. ___Logic of Page development
51. ___"Plan Ahead"? Why?
52. ___Starting Our Web Page
53. ___Naming Our Web Pages  ___Naming Project Files
54. ___Saving Our Web Pages  ___Saving Project Files
55. ___Transmitting Our Web Page
56. ___Detecting Spelling Errors

  Study Author's Management Notes___ Top-of-Page/Menu

Unit 6: A Simple Page with "Choices"
with Author's Notes
zchoices
Hypertext "Choices"___ (a discussion session)

60. ___Anchor block tag syntax
    • ___The "command" and "elements"
    • ___The command, "<A  "  ___The space
    • Anchor types
      • ___HREF= element
        1. ___URL literal argument
           11. Internet Linkage  ___"http://...."
           12. Internal Linkage  ___file:///E|/path/filename.htm
        
      • ___"mailto:" element
      • ___NAME= element
        1. ___Purpose
           1. ___Internal File Linkage
           2. ___External URL File Position Links
    • ___ONMOUSEOVER= element
    • ___ONMOUSEOUT= element
    • ___TARGET= element
    
    
61. ___Anchor "Link" Indicators
    • ___Textual Links
    • ___Graphic Links
    
    
62. ___Anchor Recogintion
    • ___Defaults  ___Colors  ___Textual underscore
    • ___Status Bar documentation
    • ___BODY tag elements  ___LINK=  ___VLINK=  ___ALINK=
    • ___Underscore  ___ Browser Setting
    • ___Underscore control (STYLE Block underscore elimination)
    • ___Image Linkage "Bubbles"
      Study Author's Choices Notes___ Top-of-Page/Menu

Unit 7: Links - Making a Page with "Choices"
with Author's Notes
zlinks
Our First Internet Web Page___ (a group workshop session) <OL TYPE="I">

1. ___ Define Function of Page <DD>
   ___ Current TV Schedule </DD>
   
   
   
2. ___ Seek Resources (provided below) <DD>
   ___ Site - assume accessible
   http://aoltvlistings.netscape.com/gridfs.adp?hid=NJ29490| |2|1 </DD><DD>
   ___ Icon Image - assume accessible
   http://aoltvlistings.netscape.com/images/g_header_aoltvlistings.gif </DD>
   
   

   ___ Code Limited Basic Structure <OL TYPE="A">

   1. ___Select name for file (Use "tv.htm")
   2. ___Define local save folder (Use Desktop) </OL>
      
      

   ___ Code Linkage <OL TYPE="1" start="11">

   11. ___Code Image Statement
   12. ___Anchor Tag </OL>
       
       

   ___ Save File Frequently
   
   

   ___ Test Basic File Frequently

   ___Internet Access Required
   
   

   ___ Code Return If Necessary (Use Cut and Paste from below)

   <FORM>

   <INPUT type="button" value=" Back " onClick="history.go(-1)">

   </FORM>
   
   

   ___ Polish HTML Code

   ___Add all appropriate HTML blocks
   
   

   ___ Polish Presentation <UL>

   • ___Add presentation HTML coding
   • ___CENTER  ___BLOCKQUOTE  ___COLOR
   • ___BGCOLOR
   • ___BACKGROUND
     (use http://www.passco.com/images/passcobg.gif) </UL>
     
     

   ___ Standardize Multiple Page Site </OL>

Making "Choices" in My Page___ (an open workshop session) <OL TYPE="i">

1. (Align)
   
   Code an textual Internet Link

   <A href="http://aoltvlistings.netscape.com/gridfs.adp?hid=NJ29490| |2|1"

      onmouseover="window.status='TV'; return true"

      onmouseout="window.status=' '; return true">TV</A>

2. (Align)
   
   Code an graphical Internet Link

   <A href="http://www.passco.com">

      <IMG SRC="./images/passco.gif"></a>

3. (Align)
   
   Code an E-mail Link

   <A href="mailto:fmt@passco.com">

   <IMG SRC="./images/agator.gif"

      width=50 border=0></a>

4. Code an "Align Here" Link

   <A NAME="alignhere" href="./sn_html.htm#alignhere">

      Code an "Align Here" Link</A>

5. (Align) Code a "top-of-page" Link

   <A name="top"></A>   <!-- Place at beginning of page -->

   
   

      .

      .

      .

      .

   <A href="./sn_html.htm#top">
      Top-of-Page/Menu</A>

   </OL>

  Study Author's Making Choices Notes___ Top-of-Page/Menu

Unit 8: Lists - A Page Full of Lists - An Outline Page
zlists
Placing Lists on Your Page___ (a discussion/illustration session)

Question? Where could one use the List tags? <OL TYPE=numeric START=81>

81. ___Unordered List  ___<UL> block tag
82. ___Ordered List  ___<OL> block tag <OL TYPE=numeric START=821>
    821. ___Alphabetical Order
    822. ___Italic Order
    823. ___Numerical Order
    824. ___Type= elements (A,a,I,i,1)  ___START= element
    825. ___View this code for examples </OL>
83. ___List Item block, <LI>
84. ___Definition Term statements  ___<DT>  ___<DD>
85. ___Definition List block, <DL>
86. ___Reference: http://www.geocities.com/tentaclesa/ltags.html
87. Time does not permit an exercise on lists. </OL>

  Study Author's Lists Notes___ Top-of-Page/Menu

Unit 9: Tables - Some Simple Tables
with Author's Notes
ztables
Tables are the solution to difficult presentation.

900. ___ TABLE block  ___TD elements
     
     

     ___WIDTH= elements

     ___HEIGHT= elements

     ___CELLSPACING= numeric element (inter cell separation)

     ___CELLPADDING= numeric element (intra cell margins)

     ___BACKGROUND= href element

     ___BGCOLOR= elements

     ___BORDER= numeric element  ___default value

     
     
901. ___ CAPTION block  ___HTML and textual content
     
     
902. ___TH, Table Heading block  ___HTML and textual content
     
     
903. ___TR, Table Row blocks
     
     
904. ___ TR elements
     
     

     ___WIDTH= elements

     ___HEIGHT= elements

     ___BGCOLOR= elements

     
     
905. ___ TD, Table Data (column) blocks
     
     
906. ___TD elements
     
     

     ___WIDTH= elements

     ___HEIGHT= elements

     ___ALIGN= elements

     ___VALIGN= elements

     ___BACKGROUND= href element

     ___BGCOLOR= elements

     ___COLSPAN= numeric element

     ___ROWSPAN= numeric element

     
     
907. ___TD contents

     ___Permits necessary HTML blocks and statements

     ___Permits embedded TABLES

     
     
908. ___Exercise:Code a bordered table the two rows, where:
     
     
     9080. Where the first row has one table-wise column.
           Center in the column a heading, "My First Table"
     9081. The second row has three columns.
           
     9082. The left and right columns of second row are to be 100 pixels wide. The left and right columns are to have a "gold" background color.
     9083. The center column of second row is 400 pixels wide.
     9084. The left column is a list of email addresses labelled "Email".
     9085. The right column contains textual links and labelled "Links".
     9086. Left column label is centered, but adddress are left justified.
           Enter an email address to "fmt@passco.com" for Author.
           Right column label is centered, but links are right justified.

           Enter a "Weather" link to "http://www.passco.com/quiklook.htm"

           The center column contains graphic links and are centered.

           Enter a graph link to AOL's TV listing.

           
     
     

Tables by Example (elements are width=600 height=800 border=1 bgcolor=ivory)

Table 1. The "default table" with default font, font size, cellspacing, cellpadding. Additional defaults are the CAPTION's and heading's fonts, highlighting, and their color and alignment. Caption remarks heading 1 heading 2 heading 3 align= default (left justified) valign= default (mid column) align="center" valign="top" align="right" valign="bottom" The above table uses the browser's default non-bold FONT and SIZE=3. Note that none of the blocks have a FONT declaration, thus the default. </FONT> <TABLE WIDTH="510" HEIGHT=100 BORDER=1 BGCOLOR=white>    <CAPTION>Caption remarks</CAPTION>    <TH>heading 1</TH>    <TH>heading 2</TH>    <TH>heading 3</TH>    <TR>       <TD>align= default (left justified)<BR>valign= default (mid column)</TD>       <TD align=center valign=top>align="center"<BR>valign="top"</TD>       <TD align=right valign=bottom>align="right"<BR>valign="bottom"</TD>    </TR> </TABLE> Indentation of blocks-within-blocks is a visual documentation method. Coding in this manner can require 10 to 15% of a designer's time. Why do they do it? Table 2. The font size defined, cellspacing set to zero. The CAPTION's and heading's fonts re-size, colored and align differently. BACKGROUND reference is http://www.passco.com/images/passcobg.gif Caption remarks resized and colored. Heading colors: blue, green, khaki. TABLE background is still white. CELLPADDING set equal to 5 (note marginal spacing within each cell). heading 1 resized and colored heading 2 resized heading 3 First Row TD elements: BACKGROUND element defined ALIGN= default (left justified) VALIGN= default (mid column) TD elements: ALIGN="center" VALIGN="top" Table 3. ---       ---       ---       ---       ---       ---       ---       ---       ---       ---       ---       ---       ---       ---       ---       ---       ---       TD elements: ALIGN="right" VALIGN="bottom" Second TR, TD element COLSPAN=3 Third TR Third TR , TD element COLSPAN=2 Fourth Row, Column 1 Fourth Row, Column 2 Fourth Row, Column 3 TD element ROWSPAN=3 Fifth Row, Column 1 TD element ROWSPAN=2 Fifth Row, Column 2 Sixth Row, Column 2 . . . . . . ___What is the Row:Column dimension of the above TABLE? ___What defines the width of each column?

  Study Author's Tables Notes___ Top-of-Page/Menu

Unit 10: Forms - A Few Sample Uses
zforms
Forms are the coding used to collect data, and transfer the data to another page.

• ___FORM block  ____elements
  
  

  ___METHOD= elements

  ___ACTION= elements

  
  
  
  • ___INPUT statement
    
    

    ___TYPE= element

    • ___TEXT argument
    • ___SUBMIT argument
    • ___IMAGE argument
    • ___HIDDEN argument

    ___NAME= element

    ___SIZE= element

    ___SRC= href element

    ___ALIGN= element

    ___ALT= element

    ___WIDTH= element

    ___HEIGHT= element

    ___BORDER= element

    
    

To secure the one year graphic charts from Yahoo Finance click this link: http://finance.yahoo.com/q?s=DELL&d=1ym The link above has a specific textual reference to the DELL stock. Would it not be interesting if the stock textual element of the link could be altered. The form below will permit data entry in a web page presentation, construct the required URL format, then submit that URL to your browser as a link to display to a new stock's one year graphic.

from Yahoo! Fanance Cut and paste this code to your page. Then comment out the current "image" INPUT statement and utiltize the "Submit" type INPUT statement. In the HIDDEN INPUT tag, try these "value" arguments: "1d", "5d", "3mm", "6m", "2ym" and "5ym".

<FORM METHOD=GET ACTION="http://quote.yahoo.com/q">    <FONT size=1 face="ms sans serif"><B>    <INPUT TYPE=TEXT NAME="s" SIZE=6>    <!-- INPUT TYPE=SUBMIT VALUE="Quote" -->    <INPUT TYPE=image      SRC="./images/quote35x21.gif"      ALIGN=absmiddle alt="get quote"      WIDTH="35" HEIGHT="21" BORDER="0">    <INPUT TYPE=HIDDEN NAME="d" VALUE="1ym"><BR>    from Yahoo! Fanance </FORM>

---

What is the x:y coordinate for a particular location?

Having found and saved the image to the right, it would be desirable to determine a way to click each dot and link to a related set of pages.    Here we shall use a FORM block. But this set of code, shown below the graphic, has a functional error, but we will take advantage of the error.    Place your mouse point on a seleted dot. Then, click it!    An error page will be displayed. In the "Location" window of the browser is a URL with two element, "map.x=" and "map.y=" values. These are horizontal and vertical pixel measurements from the upper left corner of the image.    Place your mouse point on a location other that a dot, like you "hometown". Then, click it!

<FORM    ACTION="./cgi-bin/gather_aimage.txt">    <INPUT TYPE="image" NAME="map"    SRC="./usnexrad.gif">    <FORM>

---

Coding Multiple Links within an Image?

Your First Web Project Lets assume you are a college journalism student. You are interested in becoming current news reporter. You wish to read articles written by other reporters about current and local events in their cities. In addition, you wish to be aware of activities in your hometown newspaper. After searching the web you have found the Web address of newspapers for most of the "dots" of the image to the left. Using the Anchor block, its USEMAP element, the map coordinate FORM above, and the MAP block, you wrote the code below.

<A HREF="dummy.htm"></a> <IMG SRC="./usnexrad.gif" WIDTH=375 HEIGHT=280    ALT="" BORDER=0 USEMAP="#NEXRADImageMap"></A> <MAP NAME="NEXRADImageMap"> <AREA SHAPE="RECT" COORDS="230,82,240,88"    HREF="http://www.chicagotribune.com/" TARGET="_top" ALT="Chiago, IL"    OnMouseOver="on('Chicago, IL'); window.status='Chicago, IL'; return true"    OnMouseOut="off(); window.status=''; return true"> <AREA SHAPE="RECT" COORDS="260,81,268,87"    HREF="http://www.advertiser-tribune.com/" TARGET="_top" ALT="Tiffin, OH"    OnMouseOver="on('Tiffin, OH'); window.status='Tiffin, OH'; return true"    OnMouseOut="off(); window.status=''; return true">    </MAP>

  Author's Forms Notes___ Top-of-Page/Menu

Unit 11: Pages - Widths and Presentation Controls
zpages
Study of these active Web sites, and the effects on them due to altering the page width.

1100. ___Example Link: Author's Biolograghy
      
      Vary the width of this screen and note the varied widths of the entire presentation. How narrow a page can you present. Why can't the SeniorNet Image be narrowed? What limit the width of the page? This page has not constraints designed to control of the page width.
      
      
1101. ___Example Link: The Louisville Channel.COM
      
      Vary the width of this screen, and note the varied widths of the header presentation. He the author has either made assumptions about page width, or has no knowledge of how to control page width presentation, or worse, he/she doesn't care.
      
      
1102. ___Example Link: Page 1 of TCAA Alumni Assoc Site
      
      Vary the width of this screen and note the varied widths of the presentation. It appears that this page has a control width. The author has allowed varied width for the page beyond a minimum width. But you will not that there is a width that has a minimum. How is this done? First, you should know that you cannot narrow graphic images, and second, a TABLE cell width (a TD width) can not be narrowed anything less that the narrowest image. This is illustrated below.