Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 1 Introduction Frames HTML Forms CGI Scripts Dynamic Documents HTML Tools Next-Generation HTML
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 2 Frame Usage Frame Tags Frequently Asked Questions Additional Frame Tag Attributes Targeted Hyperlinks Frameset Design Algorithm Frames
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 3 Common content Form verification Table of contents Search engines Frames Frame Usage
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 4 Use instead of Attributes COLS ROWS NAME SRC Frames Frame Tags
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 5 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? Frames Frequently Asked Questions
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 6 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? Frames Frequently Asked Questions
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 7 NORESIZE SCROLLING: yes, no, auto MARGINHEIGHT MARGINWIDTH FRAMEBORDER: no, yes, 0, 1 Frames Additional Frame Tag Attributes
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 8 TARGET attribute Of tag “Special targets” _blank _top Frames Targeted Hyperlinks
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 9 Nesting Frames <FRAME SRC = “left-third.html” NAME = “left-third”> <FRAME SRC = “right-twothirds.html” NAME = “right-twothirds”> NestedFrames
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 10
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 11 Storyboard Framing algorithm: Choose COLS or ROWS for outermost frameset Repeat for each inner frameset until no subdivisions Recursive Frames Frameset Design Algorithm
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 12 Form Tags Form Methods Mailto URLs Form Input Tags Frequently Asked Questions HTML Forms
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 13 ACTION METHOD Cgibin (Common Gateway Interface) directory HTML Forms Form Tags
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 14 Basic structure: <FORM ACTION = “ METHOD = “get” … HTML Forms Form Tags
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 15 Introduction get post Comparison: get and post Considerations: Programmer’s expertise Number of input parameters Security HTML Forms Methods
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 16 As ACTION attribute Other uses of mailto ACTION Testing forms Learn about parameter encodings To make use of forms Guest book HTML Forms Mailto URLs
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 17 Text Boxes Rectangular-shaped User enters text TYPE = “text” NAME SIZE: number of characters MAXLENGTH VALUE HTML Forms Form Input Tags
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 18 Checkboxes TYPE = “checkbox” NAME VALUE Icon user selects/deselects CHECKED Radio Buttons Only one can be selected TYPE = “radio” VALUE = “Yes” or “No” Buttons with same NAME HTML Forms Form Input Tags
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 19 Action Buttons TYPE Submit Reset VALUE “SUBMIT” or “SEND” “RESET” or “CLEAR” HTML Forms Form Input Tags
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 20 Selects MULTIPLE: number of options can be selected NAME SIZE: number of options displayed SELECTED VALUE HTML Forms Form Input Tags
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 21 Text Areas Multirow text field ROWS COLS MAXLENGTH WRAP HTML Forms Form Input Tags
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 22 Password <INPUT TYPE= “password” NAME = “nn” SIZE = “40” MAXLENGTH = “20”> - Masked field HTML Forms Form Input Tags
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 23 Form Layout Using Preformatted Tag : items within the tags are coded as their ASCII text format. Specific symbols in HTML file: &: & <: < ©: ©
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 24 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? HTML Forms Frequently Asked Questions
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 25 Scripts and Forms Security CGI Scripts
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 26 After user submits form Server receives request Server runs script Inputs to script are values from form CGI Scripts Scripts and Forms
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 27 Client Pull Server Push New-Address Notification Dynamic Documents
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 28 Browser (client) initiates document’s change Demand on Internet HTTP-EQUIV CONTENT Reloading different document Example: <META HTTP-EQUIV = “refresh” CONTENT = “10;URL= Dynamic Documents Client Pull
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 29 Server initiates the document’s change Demand on server Java or Perl Dynamic Documents Server Push Important use of client pull New-Address Notification
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 30 Editors Syntax Checkers Converters HTML Tools
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 31 Software tool Two types: WYSIWYG (“what you see is what you get”) Tag-oriented HTML Tools Editors
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 32 Editor Components Color selector Documentation HTML converter Hyperlink inserter Spell checker Tag generator Template creator Tutorial Viewer HTML Tools Editors
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 33 Editor Usage Generate draft Develop pages expected to be around for while Develop consistent set of pages HTML Tools Editors
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 34 Editor Drawbacks Featuritis Incomplete support Poor error reporting Programming style User interface HTML Tools Editors
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 35 Editor Availability Frontpage, Microsoft HotDog Pro, Sausage Software HoTMetal, SoftQuad Navigator Gold, Netscape SiteMill, Adobe Dreamweaver, Macromedia HTML Tools Editors
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 36 Code Analysis Error report Feature subsetting Image analysis Link verification Structure report Making suggestions Load timing HTML Tools Syntax Checkers
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 37 Syntax Checker Availability Doctor HTML Dr. Watson Weblint HTML Tools Syntax Checkers Converts a document into HTML format On-line resume Converters
Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 38 Extensible markup language (XML) Support user-defined tags Cascading style sheets (CSS) In-line styles: change the look of individual tag Heading 5 <Body Style = “background-image:URL(image.jpg); background-repeat:no-repeat; background-attachment:fixed;background-position:center”> Internal styles: a set of styles declared in the tags, which are in the head portion of a HTML file. External Styles: a single file with the extension.css, which is applied for all pages in a site to preserve a consistent style. To include a style file in current HTML file: Next-Generation HTML