The Web and HTML, Part III

1
The Web and HTML, Part III

• Last time (June 23rd)
• Three ways to create Web pages
• Creating a Web site
• Uploading Web files
• This time
• HTML Links, Tables, Lists, and Fonts
• User-friendly Web page design

2
Coming Attractions

• Later today
• E-mail Netscape Messenger vs. Microsoft Outlook
  Express (Stewart vs. Pomeroy)
• Desktop publishing PageMaker (Chipman)
• Next week (July 7th)
• Dynamic HTML (Hu)
• Search engines I (Kreuz)
• Special guest -- Charlie Long

3
Hypertext Links

• Its the links that make the Web the Web
• Three kinds of links
• (1) Between pages
• (2) Within pages
• (3) E-mail links
• Created by using an anchor tag
• ltAgt . . . lt/Agt

4
(1) Links Between Pages

• Use the HREF attribute
• Specifies a target URL
• Heres a ltA HREFhttp//www.
• memphis.com/spotty.jpggtpicturelt/Agt of my best
  friend!
• Heres a picture of my best friend!
• Dont forget the quote marks!

5
(2) Links Within Pages

• Useful navigation aids on long pages
• Two steps
• Name a fragment
• ltA NAME pubsgtPublicationslt/Agt
• Link to a fragment
• ltA HREFpubsgt Publicationslt/Agt
• Dont forget the quotes and number sign!

6
Links Within Pages II

• So you might see the following
• Education Publications Presentations
• Clicking on Publications would take you
  immediately to the relevant section . . .
• Publications
• Rawlins, V. L. (1996). The story of Spotty, my
  best friend. Journal of Good Dog Studies, 37,
  194-317.

7
(3) E-mail Links

• The users browser must be configured for this to
  work
• What did you think of my story about Spotty? ltA
  HREFMAILTO
• VLRawlins_at_memphis.edugt Tell me!lt/Agt
• What did you think of my story about Spotty? Tell
  me!
• Clicking the link launches e-mail program

8
Tables

• Useful way to organize information on a Web page
• Works well for schedules, syllabi, data
• But one of the more complex HTML tags to code by
  hand
• Not hard, but tedious

9
Basic Table Syntax

• ltTABLEgt lt-begins a . . . table!
• ltTRgt lt-begins a row of cells
• ltTDgt lt-begins the first data cell
• First cell
• lt/TDgt lt-closes the first data cell
• ltTDgt lt-begins the second cell
• Second cell
• lt/TDgt lt-closes the second cell
• lt/TRgt lt-closes the first row
• lt/TABLEgt lt-closes the table

10
The End Result

• First cell Second cell
• You can have as many rows and columns as you
  want
• Good dogs Bad dogs Ugly dogs
• Spotty Rex Fluffy
• Sugar Fido Rover
• Abby Blackie Charles

11
The Real Value of Tables

• The most important formatting device . . .
• . . . because you cant place things next to each
  other on a Web page
• A picture
• of Spotty,
• my best friend!
• Cant be done!

12
So Heres How you Fake it

• A picture
• of Spotty,
• my best friend!
• Make a one row by two column table, and turn the
  border attribute off

13
The Invisible TABLE Code

• ltTABLE BORDER0gt (default1)
• ltTRgt
• ltTDgt
• ltIMG SRCSpotty.jpggt lt-an image in the
• lt/TDgt same directory
• ltTDgt
• A picture of Spotty, my best friend!
• lt/TDgt
• lt/TRgt
• lt/TABLEgt

14
Making Tables Look Spiffy

• Many, many TABLE attributes
• CELLPADDINGnumber (default1)
• Sets the amount of space, in pixels, between the
  cell border and its contents
• CELLSPACINGnumber (default2)
• Sets the amount of space, in pixels, between
  table cells
• These allow you to control table size

15
Some Useful TD Attributes

• ltTD ALIGNLEFT RIGHT CENTERgt
• (defaultLEFT)
• Aligns the text (or picture) within the cell
• BGCOLORrrggbb or color name
• Specifies a color to be used in the cell (in 6
  hexadecimal values or by name)

16
Web safe Colors

• 216 possible combinations of hex values
• But an 8-bit monitor will shift many of these to
  the nearest system color
• Can lead to drastic changes
• To play it safe - use these 16 named colors
• Aqua Gray Navy Silver
• Black Green Olive Teal
• Blue Lime Purple White
• Fuschia Maroon Red Yellow

17
Lists

• Another alternative for organizing information on
  a Web page
• Very useful for creating lists of hypertext links
• Two types
• Ordered lists
• Unordered lists

18
Ordered List Syntax

• Bad dogs
• ltOLgt lt-begins list
• ltLIgtRex lt-list element
• ltLIgtFido .
• ltLIgtBlackie .
• lt/OLgt lt-ends list
• Would look like this . . .

19
Ordered Lists II

• Bad Dogs
• 1. Rex
• 2. Fido
• 3. Blackie (default is 1, 2, 3)
• Attributes ltOL START x TYPEigt
• Start with a particular number
• Roman numerals (i, ii, iii I, II, III)
• Letters of the alphabet (a, b, c A, B, C)

20
Unordered List Syntax

• Bad dogs
• ltULgt lt-begins list
• ltLIgtRex lt-list element
• ltLIgtFido .
• ltLIgtBlackie .
• lt/ULgt lt-ends list
• Would look like this . . .

21
Unordered Lists II

• Bad Dogs
• Rex
• Fido
• Blackie (default is DISC)
• Attributes ltUL TYPE CIRCLE SQUAREgt
• Rex
• Fido

22
Fonts

• Browsers display two types
• Variable width and fixed width
• Also called proportional and monospaced
• Defaults in most browsers
• Times New Roman (variable)
• Courier, Monaco (fixed)

23
Fonts II

• Can be adjusted by the user
• Navigator
• Edit-gtPreferences-gtAppearance-gtFonts
• Internet Explorer
• Edit-gtPreferences-gtWeb Browser-gt Languages/Fonts

24
Fonts III

• A good choice for variable width Georgia
• Designed as an easy-to-read screen font (Times
  New Roman is not!)
• Can be obtained free from Microsoft (along with
  other Web fonts)
• http//www.microsoft.com/typography/
• fontpack/default.htm

25
Fonts IV

• Fonts can be selected by the page author via the
  FACE attribute of the FONT tag
• ltFONT FACEGeorgia, Bookman, PalatinogtSpotty is
  a good dog! lt/FONTgt
• The browser will display the text in Georgia if
  installed, or in Bookman, or in Palatino, and
  will use the default font if none are found

26
Online HTML Guides

• Many, but here are two good ones
• Ronin Enterprises
• Good basic information
• www.roninenterprises.com/
• The Bare Bones Guide to HTML
• The entire HTML spec for your pleasure
• http//werbach.com/barebones/

27
HTML Validation Services

• Only an issue if youre coding by hand
• Built into some editors, like BBEdit
• Built into some browsers, like iCab
• Can adjust which version of HTML to use
• Once again, many online choices, such as
• http//validator.w3.org/
• http//cq-pan.cqu.edu.au/validate/
• www.elsop.com/linkscan/quickcheck.html

28
User-friendly Web Page Design

• Capitalize the HTML code to make it easier to
  edit
• Don't make assumptions about monitor size or
  resolution
• Avoid the ltBLINKgt tag (annoying, and messes up
  Braille and speech displays)
• Provide alternative text for images (via the
  ltIMGgt tag's ALT attribute)
• ltIMG SRCSpotty.jpg ALTGood dog!gt

29
User-friendly Page Design II

• If you include PDF files, provide a link to
  download Acrobat Reader
• www.adobe.com/prodindex/acrobat/readstep.html
• Test your pages with different browsers and
  versions, monitors, and computers
• (e.g., graphics look darker on Mac than on PCs)
• Realize that you dont have complete control (or
  use PDF files)

30
How to Make Pages Load Faster

• (Or, avoiding the World Wide Wait)
• Keep pages short (lt10 screenfuls)
• Keep graphics small (lt50k)
• Predetermine the size of graphics
• ltIMG SRC HEIGHT178 WIDTH134 Spotty.jpg
  ALTGood dog!gt
• Avoid Java unless absolutely necessary