advanced - PowerPoint by liwenting

VIEWS: 10 PAGES: 31

									Advanced HTML

Joshua S. Simon
Collective Technologies


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




                                  2
   Working with frames
 Be   careful:
   easy to confuse the user
   easy to confuse yourself




                               3
   Using frames
 Usethe 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                              4
    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
                                                 5
     What about non-FRAME
     users?
 NOFRAMES       container provides means to
     notifyusers 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>


                                                  6
     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>
                                              7
   FRAME tag

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




                                            8
    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


                                                   9
    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

                                                   10
    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>.
                                                11
    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
                                            12
   Using server-side includes
 Serverparses HTML first, like C
 preprocessor (cpp)
 Two    major types:
   exec
   include

 Must   be explicitly enabled on the server


                                               13
    exec directive
 <!--#exec cgi=“program”-->
 <!--#exec pgm=“program”-->

 No spaces in “comment” tags
 program should be in /cgi-bin or another
  CGI-allowed directory



                                             14
    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)



                                                15
    Extensions to HTML
 Netscape Navigator
 Microsoft Internet Explorer




                                16
    Navigator extensions
 BLINK

      pull
 Client
 FONT FACE
 MULTICOL
 SPACER




                           17
    BLINK

       text to blink on and off
 Causes
 <BLINK>Click here</BLINK>
    if you’re annoyed with
    blinking text
 Usershate it
 Never use it



                                  18
    Client pull
 Uses the META tag in the header to force a
  reload
 <META HTTP-EQUIV="Refresh"
     CONTENT="time; URL=url">
 urlis URL to load when time seconds have
  elapsed


                                               19
   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


                                          20
   MULTICOL

 Providesmultiple-column text
 <MULTICOL COLS=c GUTTER=g>
 COLS -- Number of columns
 GUTTER -- Number of pixels between
  columns
 Recommendation: Use PDF or TABLEs
  instead
                                       21
   SPACER

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


                                 22
    Internet Explorer extensions
 MARQUEE
 BGSOUND
 IFRAME

 In-linevideo
 Style sheets




                                   23
    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
                                                       24
   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


                                                  25
   MARQUEE continued
 SCROLLAMOUNT     -- Number of pixels
  between each successive draw of marquee
  text
 SCROLLDELAY -- Number of milliseconds
  between redraws




                                        26
   BGSOUND

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




                              27
   IFRAME

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




                                   28
   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
                                                  29
    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
                                          30
Questions




            31

								
To top