1

Advanced HTMLAdvanced HTML

Joshua S. SimonCollective Technologies

2

OverviewOverview

Working with frames Using server-side includes Extensions to HTML

Netscape Navigator Microsoft Internet Explorer

3

Working with framesWorking with frames

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

4

Using framesUsing 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 framesExamples 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 What about non-FRAME users?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 exampleComplex 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

FRAMEFRAME tag tag

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

9

FRAMEFRAME tag options 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

FRAMEFRAME tag options, continued 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 framesTargeting 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 namesReserved 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 includesUsing server-side includes

Server parses HTML first, like C preprocessor (cpp)

Two major types: exec include

Must be explicitly enabled on the server

14

execexec directive directive

<!--#exec cgi=“program”--> <!--#exec pgm=“program”--> No spaces in “comment” tags program should be in /cgi-bin or another

CGI-allowed directory

15

includeinclude directive 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 HTMLExtensions to HTML

Netscape Navigator Microsoft Internet Explorer

17

Navigator extensionsNavigator extensions

BLINK Client pull FONT FACE MULTICOL SPACER

18

BLINKBLINK

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 pullClient 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 FACEFONT 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

MULTICOLMULTICOL

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

SPACERSPACER

Specify pixels of white space <SPACER TYPE=BLOCK WIDTH=w HEIGHT=h>

<SPACER TYPE={HORIZONTAL|VERTICAL} SIZE=s>

23

Internet Explorer extensionsInternet Explorer extensions

MARQUEE BGSOUND IFRAME In-line video Style sheets

24

MARQUEEMARQUEE

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

MARQUEEMARQUEE continued 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

MARQUEEMARQUEE continued continued

SCROLLAMOUNT -- Number of pixels between each successive draw of marquee text

SCROLLDELAY -- Number of milliseconds between redraws

27

BGSOUNDBGSOUND

Play a background sound <BGSOUND SRC=“soundfile”>

28

IFRAMEIFRAME

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 videoIn-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 sheetsStyle 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

QuestionsQuestions