Advanced HTML

1
Advanced HTML

• Joshua S. SimonCollective Technologies

2
Overview

• Working with frames
• Using server-side includes
• Extensions to HTML
• Netscape Navigator
• Microsoft Internet Explorer

3
Working with frames

• Be careful
• easy to confuse the user
• easy to confuse yourself

4
Using frames

• Use the FRAMESET container in lieu of BODY
• FRAMESET options
• COLS splits the pane into columns
• ROWS splits the pane into rows
• BORDER defines the thickness in pixels of the
  border around the frame
• BORDERCOLOR defines the color of the border
  around the frame

5
Examples of frames

• ltFRAMESET COLS10,90gtdefines two columns, at
  10 and 90 of the screen width
• ltFRAMESET ROWS40,20, BORDER0gtdefines
  three rows, at 40 pixels, 20 of the screen
  length, and the rest of the screen length

6
What about non-FRAME users?

• NOFRAMES container provides means to
• notify users that the page requires frames
• give users option of downloading newer browser
• ltNOFRAMESgtltPgt ltA HREFhttp//home.netscape.com
  gt Download Navigatorlt/Agt to use
  frames.lt/Pgtlt/NOFRAMESgt

7
Complex frames example

• ltFRAMESET COLS10,90gt ltFRAMESET
  ROWS50,50gt lt!-- frame for column 1 row 1
  --gt lt!-- frame for column 1 row 2 --gt
  lt/FRAMESETgt lt!-- frame for column 2
  --gtlt/FRAMESETgtltNOFRAMESgtltPgt ltA
  HREFhttp//home.netscape.comgt Download
  Navigatorlt/Agt to use frames.lt/Pgtlt/NOFRAMESgt

8
FRAME tag

• The HTML source for the contents of a specific
  frame (or pane) is in the FRAME tagltFRAME
  SRCframe.htmlgt

9
FRAME tag options

• SRC -- The HTML source to load
• MARGINHEIGHT -- Space in pixels between the top
  and bottom of a frame and its contents
• MARGINWIDTH -- Space in pixels between the left
  and right of a frame and its contents
• NORESIZE -- Disable the resize handle

10
FRAME tag options, continued

• NAME -- The name of the frame (pane), so you can
  refer to it by name from other frames
• SCROLLING -- Whether or not to provide a scroll
  bar one of
• YES -- Provide a scroll bar
• NO -- Dont provide a scroll bar
• AUTO -- Provide a scroll bar only if its needed

11
Targeting specific frames

• You can target a frame thats been
  namedltFRAMESET COLS20,gt ltFRAME
  SRCleft.htmlgt ltFRAME SRCright.html
  NAMErightgtlt/FRAMESETgt
• From inside left.html you can sayltA
  HREFright-new.html TARGETrightgtPlace a
  new frame on the rightlt/Agt.

12
Reserved frame names

• _blank loads the source document into a new
  browser window
• _self loads the source document into the same
  window
• _parent loads the source document over the parent
  document
• _top loads the source document at the top, over
  all the frames in this window

13
Using server-side includes

• Server parses HTML first, like C preprocessor
  (cpp)
• Two major types
• exec
• include
• Must be explicitly enabled on the server

14
exec directive

• lt!--exec cgiprogram--gt
• lt!--exec pgmprogram--gt
• No spaces in comment tags
• program should be in /cgi-bin or another
  CGI-allowed directory

15
include directive

• lt!--include filefilename--gt
• No spaces in comment tags
• File must be in same directory as HTML file that
  includes it (no subdirectories or absolute paths)

16
Extensions to HTML

• Netscape Navigator
• Microsoft Internet Explorer

17
Navigator extensions

• BLINK
• Client pull
• FONT FACE
• MULTICOL
• SPACER

18
BLINK

• Causes text to blink on and off
• ltBLINKgtClick herelt/BLINKgt if youre annoyed
  with blinking text
• Users hate it
• Never use it

19
Client pull

• Uses the META tag in the header to force a reload
• ltMETA HTTP-EQUIV"Refresh" CONTENT"time
  URLurl"gt
• url is URL to load when time seconds have elapsed

20
FONT FACE

• Allows developer to specify font face
• User must have font installed
• Name must match (HELVETICA and Helvetica are
  different)
• Recommendation Use Portable Display Format (PDF)
  instead

21
MULTICOL

• Provides multiple-column text
• ltMULTICOL COLSc GUTTERggt
• COLS -- Number of columns
• GUTTER -- Number of pixels between columns
• Recommendation Use PDF or TABLEs instead

22
SPACER

• Specify pixels of white space
• ltSPACER TYPEBLOCK WIDTHw HEIGHThgt
• ltSPACER TYPEHORIZONTALVERTICAL SIZEsgt

23
Internet Explorer extensions

• MARQUEE
• BGSOUND
• IFRAME
• In-line video
• Style sheets

24
MARQUEE

• Use the destination display field for other
  purposes
• BEHAVIOR -- How the marquee should behave one
  of
• SCROLL -- Slide across and off the screen
• SLIDE -- Slide onto the screen and stay there
• ALTERNATE -- Bounce back and forth in the window

25
MARQUEE continued

• DIRECTION -- The direction to scroll or slide
  one of
• LEFT -- Scroll from left to right
• RIGHT -- Scroll from right to left
• LOOP -- How many times to repeat the marquee

26
MARQUEE continued

• SCROLLAMOUNT -- Number of pixels between each
  successive draw of marquee text
• SCROLLDELAY -- Number of milliseconds between
  redraws

27
BGSOUND

• Play a background sound
• ltBGSOUND SRCsoundfilegt

28
IFRAME

• Create a free-floating frame
• ltIFRAME SRCurl HEIGHTh WIDTHwgt
• url -- contents of the frame
• h -- height in pixels
• w -- width in pixels

29
In-line video

• ltIMG DYNSRCvideofile optionsgt
• Options include
• CONTROLS -- Include graphical controls under the
  movie
• LOOP -- The number of times the movie replays
• START -- Either FILEOPEN, for when the file has
  downloaded, or MOUSEOVER, for when the user
  clicks on it

30
Style sheets

• DO NOT USE.
• Violates proposed HTML specifications
• Specially-formatted comment tag that only MSIE
  understands
• STYLE container between HEAD and BODY
• DIV container to use defined styles in BODY text

31
Questions