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 • <FRAMESET COLS=“10%,90%”>defines two columns, at 10% and 90% of the screen width • <FRAMESET ROWS=“40,20%,*” BORDER=0>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 • <NOFRAMES><P> <A HREF=“http://home.netscape.com”> Download Navigator</A> to use frames.</P></NOFRAMES>

7. Complex frames example • <FRAMESET COLS=“10%,90%”> <FRAMESET ROWS=“50%,50%”> <!-- frame for column 1 row 1 --> <!-- frame for column 1 row 2 --> </FRAMESET> <!-- frame for column 2 --></FRAMESET><NOFRAMES><P> <A HREF=“http://home.netscape.com”> Download Navigator</A> to use frames.</P></NOFRAMES>

8. FRAME tag • The HTML source for the contents of a specific frame (or pane) is in the FRAME tag:<FRAME SRC=“frame.html”>

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:<FRAMESET COLS=“20%,*”> <FRAME SRC=“left.html”> <FRAME SRC=“right.html NAME=“right”></FRAMESET> • From inside left.html you can say<A HREF=“right-new.html” TARGET=“right”>Place a new frame on the right</A>.

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 • <!--#exec cgi=“program”--> • <!--#exec pgm=“program”--> • No spaces in “comment” tags • program should be in /cgi-bin or another CGI-allowed directory

15. include directive • <!--#include file=“filename”--> • 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 • <BLINK>Click here</BLINK> 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 • <META HTTP-EQUIV="Refresh" CONTENT="time; URL=url"> • 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 • <MULTICOL COLS=c GUTTER=g> • COLS -- Number of columns • GUTTER -- Number of pixels between columns • Recommendation: Use PDF or TABLEs instead

22. SPACER • Specify pixels of white space • <SPACER TYPE=BLOCK WIDTH=w HEIGHT=h> • <SPACER TYPE={HORIZONTAL|VERTICAL} SIZE=s>

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 • <BGSOUND SRC=“soundfile”>

28. IFRAME • Create a free-floating frame • <IFRAME SRC=“url” HEIGHT=h WIDTH=w> • url -- contents of the frame • h -- height in pixels • w -- width in pixels

29. In-line video • <IMG DYNSRC=“videofile” [options]> • 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