1 Advanced HTML Joshua S. Simon Collective 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  defines two columns, at 10% and 90% of the screen width  defines 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  Download Navigator to use frames.

7 Complex frames example  Download Navigator to use frames.

8 FRAME tag  The HTML source for the contents of a specific frame (or pane) is in the FRAME tag:

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 -- Don’t provide a scroll bar  AUTO -- Provide a scroll bar only if it’s needed

11 Targeting specific frames  You can target a frame that’s been named:  From inside left.html you can say Place a new frame on the right.

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   No spaces in “comment” tags  program should be in /cgi-bin or another CGI-allowed directory

15 include directive   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  Click here if you’re annoyed with blinking text  Users hate it  Never use it

19 Client pull  Uses the META tag in the header to force a reload   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   COLS -- Number of columns  GUTTER -- Number of pixels between columns  Recommendation: Use PDF or TABLE s instead

22 SPACER  Specify pixels of white space 

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 

28 IFRAME  Create a free-floating frame   url -- contents of the frame  h -- height in pixels  w -- width in pixels

29 In-line video   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