Advanced HTML
description
Transcript of Advanced HTML
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