Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

1 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

2 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

3 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

4 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

5 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

6 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

7 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

8 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

9 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

10 Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 10

11 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

12 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

13 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

14 Advanced HTML From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 14 Basic structure: <FORM ACTION = “http://www.server.com/cgibin/program” METHOD = “get” … HTML Forms Form Tags

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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: &: &amp <: &lt ©: &copy

24 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

25 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

26 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

27 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

28 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=http://www.mycomputer.edu/~you/data.html”> Dynamic Documents Client Pull

29 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

30 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

31 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

32 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

33 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

34 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

35 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

36 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

37 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

38 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


Download ppt "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."

Similar presentations


Ads by Google