Frames

1
Introduction

• Frames
• HTML Forms
• CGI Scripts
• Dynamic Documents
• HTML Tools
• Next-Generation HTML

2
Frames

• Frame Usage
• Frame Tags
• Frequently Asked Questions
• Additional Frame Tag Attributes
• Targeted Hyperlinks
• Frameset Design Algorithm

3
(No Transcript)
4
Frames
Frame Usage

• Common content
• Form verification
• Table of contents
• Search engines

5
Frames
Frame Tags

• ltFRAMESETgtlt/FRAMESETgt
• ltFRAMEgt
• Attributes
• COLS
• ROWS
• NAME
• SRC
• ltNOFRAMESgtlt/NOFRAMESgt

6
Frames
Frequently Asked Questions

• Can COLS and ROWS be used in conjunction with one
  another? If so, what is the result?
• How are the source files loaded into the frames?
• If each document in a frameset has a title, which
  title is displayed in the lone title bar when the
  group of frames is being displayed?
• How can the HTML source code be viewed for a
  document created using the frameset tag?
• How can the source code of individual frames be
  viewed?

7
Frames
Frequently Asked Questions

• Is it possible to load a document that is itself
  a document consisting of a frameset declaration
  into the SRC attribute of a frame tag?
• Can a hyperlink be targeted into a specific
  frame?
• Can a new browser be launched automatically, if
  you do not wish to load a large page into a small
  frame?
• Can frames be nested?
• Is there an easy way to produce any frame layout?

8
Frames
Additional Frame Tag Attributes

• NORESIZE
• SCROLLING
• MARGINHEIGHT
• MARGINWIDTH
• FRAMEBORDER

9
Frames
Targeted Hyperlinks

• TARGET attribute
• Of ltAgt tag
• Of ltBASEgt tag
• Special targets
• _blank
• _top

10
ltHTMLgt ltHEADgt ltTITLEgtNesting Frameslt/TITLEgt lt/HEA
Dgt ltFRAMESET ROWS 50,50gt ltFRAMESET COLS
33,67gt ltFRAME SRC left-third.html
NAME left-thirdgt ltFRAME SRC
right-twothirds.html NAME
right-twothirdsgt lt/FRAMESETgt ltFRAME SRC
bottom-row.html NAME bottom-rowgt lt/FRAMESETgt
lt/HTMLgt
11
(No Transcript)
12
Frames
Frameset Design Algorithm

• Storyboard
• Framing algorithm
• Choose COLS or ROWS for outermost frameset
• Repeat for each inner frameset until no
  subdivisions
• Recursive

13
HTML Forms

• Form Tags
• Form Methods
• Mailto URLs
• Form Input Tags
• Frequently Asked Questions

14
HTML Forms
Form Tags

• ltFORMgtlt/FORMgt
• ACTION
• METHOD
• Cgibin (Common Gateway Interface) directory

15
HTML Forms
Methods

• Introduction
• get
• post
• Comparison get and post
• Considerations
• Programmers expertise
• Number of input parameters
• Security

16
HTML Forms
Mailto URLs

• As ACTION attribute
• Other uses of mailto ACTION
• Testing forms
• Learn about parameter encodings
• To make use of forms
• Guest book

17
HTML Forms
Form Input Tags

• Basic structure
• ltFORM
• ACTION http//www.server.com/cgibin/program
• METHOD get
• lt/FORMgt

18
HTML Forms
Form Input Tags

• ltINPUTgt
• Text Boxes
• Rectangular-shaped
• User enters text
• TYPE text
• NAME
• SIZE
• MAXLENGTH
• VALUE

19
HTML Forms
Form Input Tags

• Checkboxes
• Icon user selects/deselects
• CHECKED
• Radio Buttons
• Only one can be selected
• Yes and No
• Buttons with same NAME

20
HTML Forms
Form Input Tags

• Action Buttons
• TYPE
• Submit
• Reset
• VALUE
• SUBMIT or SEND
• RESET or CLEAR

21
HTML Forms
Form Input Tags

• Selects
• ltSELECTgtlt/SELECTgt
• MULTIPLE
• NAME
• SIZE
• ltOPTIONgt
• SELECTED
• VALUE

22
HTML Forms
Form Input Tags

• Text Areas
• Multirow text field
• ltTEXTAREAgtlt/TEXTAREAgt
• ROWS
• COLS
• WRAP

23
(No Transcript)
24
HTML Forms
Form Input Tags

• Password
• ltINPUT TYPE password
• NAME nn
• SIZE 40
• MAXLENGTH 20gt
• - Masked field

25
HTML Forms
Frequently Asked Questions

• Can a user load a new Web page or an image by
  pressing a submit button on a form?
• There is a button that looks like a submit
  button, but it says something else. Is this
  accomplished with forms? How?
• Is there a way to use a form to create a
  navigational button such that when a user submits
  the form, I can have another page loaded into a
  specific frame?
• Can you name a form?

26
CGI Scripts

• Scripts and Forms
• Security

27
(No Transcript)
28
CGI Scripts
Scripts and Forms

• After user submits form
• Server receives request
• Server runs script
• Inputs to script are values from form

29
Dynamic Documents

• Client Pull
• Server Push
• New-Address Notification

30
Dynamic Documents
Client Pull

• Browser (client) initiates documents change
• Demand on Internet
• HTTP-EQUIV
• CONTENT
• ltMETA HTTP-EQUIV refresh CONTENT ngt
• Reloading different document
• Example
• ltMETA HTTP-EQUIV refresh
• CONTENT 10 URLhttp//www.mycomput
  er.edu/you/data.htmlgt

31
Dynamic Documents
Server Push

• Server initiates the documents change
• Demand on server
• Java or Perl

New-Address Notification
Important use of client pull
32
HTML Tools

• Editors
• Syntax Checkers
• Converters

33
HTML Tools
Editors

• Software tool
• Two types
• WYSIWYG (what you see is what you get)
• Tag-oriented

34
HTML Tools
Editors

• Editor Components
• Color selector
• Documentation
• HTML converter
• Hyperlink inserter
• Spell checker
• Tag generator
• Template creator
• Tutorial
• Viewer

35
HTML Tools
Editors

• Editor Usage
• Generate draft
• Develop pages expected to be around for while
• Develop consistent set of pages

36
HTML Tools
Editors

• Editor Drawbacks
• Featuritis
• Incomplete support
• Poor error reporting
• Programming style
• User interface

37
HTML Tools
Editors

• Editor Availability
• Frontpage, Microsoft
• HotDog Pro, Sausage Software
• HoTMetal, SoftQuad
• Navigator Gold, Netscape
• SiteMill, Adobe

38
HTML Tools
Syntax Checkers

• Code Analysis
• Error report
• Feature subsetting
• Image analysis
• Link verification
• Structure report
• Making suggestions
• Load timing

39
HTML Tools
Syntax Checkers

• Syntax Checker Availability
• Doctor HTML
• Dr. Watson
• Weblint

Converters

• Converts a document into HTML format
• On-line resume

40
Next-Generation HTML

• HTML 4.0
• Extensible markup language (XML)
• HTML 4.0 XML XHTML 1.0
• Cascading style sheets (CSS)

41
Cascading Style Sheets

• In-line Styles
  
  ltH5 STYLE backgroundgraytext-transformupp
  ercasetext-aligncenterfont-styleitalicgt
  In-Line/On-LineCascading Style Sheets, Inline
  Style lt/H5gt

42
Cascading Style Sheets

• Internal Styles
  
  lt STYLEgt
  lt!--
  
  
  H3 backgroundgray text-aligncenter
  H4,H5
  text-aligncenter text-transformuppercase
  P font-styleitalic text-alignjustify
  --gt
  
  lt /STYLEgt

43
Cascading Style Sheets

• External Styles
  lt LINK REL
  stylesheet
  
  
  
  
  TYPE text/css
  
  
  
  
  HREF headspars.cssgt
  
  
  The file headspars.css contains the
  declaration
  H3 backgroundgray
  text-aligncenter
  H4,H5 text-aligncenter text-transformuppe
  rcase P font-styleitalic
  text-alignjustify

44
Cascading Style Sheets advantages

• collect all style definitions in one place
• reduce time for maintaing a set of Web pages
• test new layouts for a collection of Web pages
  with only a few global edits
• create a master layout for a web presentation

45
Cascading Style Sheets disadvantages

• they are not supported in a consistent manner by
  all browsers
• if you make a syntax error, it can be hard to
  debug your code