1. Reading Assignment - HTML 2 4 General Structure of HTML 4 headings, setting style 4 Text, paragraphs, and lists 4 Anchors, Names and Links 4 Images 4 Tables 4 frames and miscellaneous 4 NOTE: Some of slides are extracted from the course notes of USC CS571 and Deitel & Associates. These documents are copyrighted according to: either "Copyright © Ellis Horowits or PrenticeHall. All Rights Reserved.

2. Structured Text The nine planets of the solar system are mercury, venus, earth, mars, jupiter, saturn, uranus, neptune and pluto. Galileo discovered moons of jupiter and saturn. As Galileo once said, The milky way is not a gas, but a mass of stars so numerous as to be beyond belief. For more information examine [World Book Encyc 99]. To order this book, please refer to the following reference number: ISBN 0-7166-0081-1

3. Browser Output

4. Phrase Elements 4 Phrase elements let the browser determine the presentation style 4 EM: Indicates emphasis. 4 STRONG: Indicates stronger emphasis. 4 CITE: Contains a citation or a reference to other sources. 4 DFN: Indicates that this is the defining instance of the enclosed term. 4 CODE: Designates a fragment of computer code. 4 SAMP: Designates sample output from programs, scripts, etc. 4 KBD: Indicates text to be entered by the user. 4 VAR: Indicates an instance of a variable or program argument. 4 ABBR: Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).

5. Paragraphs 4 The paragraph indicator –Usually attached at the end of the paragraph –Causes a new line and whitespace to be generated 4 Pairs of paragraph indicators can also be used: This is the start of a paragraph containing a single sentence that makes use of three lines. 4 there is an alignment attribute, but setting alignment via the style attribute is preferred

6. Example - Paragraph and Alignment Example of Paragraph tag Callisto is the outermost of Jupiter’s four planet-sized moons and is dominated by impact craters. Despite this, a few more interesting features are also visible. Among the most interesting features on Callisto are impact scars from tidally disrupted comets. Callisto is nearly as large as the planet Mercury. This indicates that the interior is approximately half water ice as well.

7. Browser Output - Paragraph Alignment

8. Example of Pre-formatted Text Worstsort program Worstsort program void worstsort (element list[], int n) /* this may be the shortest sorting algorithm to write, but it is not very efficient*/ { int i; element temp; 100: for (i=0, i < n-1; i++) if (list[i] > list[i+1]) { temp=list{i}; list[i]=list[i+1]; list[i+1]=temp; go to 100; }

9. Browser Output of Preformatted Text

10. Lists 4 There are five kinds of lists: definition, directory, menu, ordered, and unordered 4 All lists follow the same pattern: – 4 directory and menu lists are deprecated

11. Definition Lists light year the distance light travels in one year asteroids are small, irregular shaped objects, mostly occurring between Mars and Jupiter

12. Example - Unordered Lists Example of Unordered Lists planets and moons Mars deimos orbit: 23,459 km from Mars diameter: 12.6 km mass: 1.8e15 kg phobos Jupiter callisto europa ganymede io

13. Browser Output of Unordered Lists

14. Ordered Lists 4 Has the general form first list item second list item 4 START attribute can initialize the sequence to a number other than 1 4 TYPE attribute can be used to select the numbering style TypeName Style 1arabic 1, 2, 3,... alower alpha a, b, c,... Aupper alpha A, B, C,... ilower roman i, ii, iii Iupper roman I, II, III, 4 Alternately one can use the tag OL.withroman {list-style-type: lower-roman}

15. Example - Ordered Lists Example of Ordered Lists Planets and Moons as Ordered Lists Mars deimos orbit: 23,459 km from Mars diameter: 12.6 km mass: 1.8e15 kg phobos Jupiter callisto europa ganymede io

16. Browser Output

17. Table Elements 4, a tag used to define a table 4, a tag to label a table –Its attributes are ALIGN = top, bottom, left, right 4 or, tags that identify a table header cell and table data cell –Headers are the same as data except they use bold font and are centered 4, a tag that identifies a container for a row of table cells –Same attributes as TH and TD

18. Facts about Tables 4 Table data can be text, lists, images, forms, figures, or even tables 4 Table headers are typically rendered in boldface, and table data is typically rendered in the regular font and point size 4 A table has an optional caption followed by rows 4 Table rows are said to contain table headers and table data 4 The browser will set the number of columns to be the greatest number of columns in all of the rows 4 Blank cells are used to fill extra columns in the rows

19. Example - 3 rows x 2 cols Table: 3 rows 2 Cols Table: 3 Rows 2 Cols MIME Content-Types application/postscript Postscript application/rtf MS Rich Text Format application/x-pdf Adobe Acrobat Format

20. Browser Output

21. Table Example Rowspan colspan Table: Rowspan and Colspan Table: RowSpan and ColSpan MIME Content-Types Items Types and Their Meaning application/postscript Postscript application/rtf MS Rich Text Format application/x-pdf Adobe Acrobat Format

22. Browser Output

23. Example - Cell Alignment Table: Aligning Cell Data Table: Aligning Cell Data MIME Content-Types Items Types and Their Meaning application/postscript Postscript application/rtf MS Rich Text Format application/x-pdf Adobe Acrobat Format

24. Browser Output - Cell Alignment

25. Example cell padding and spacing Table: Cell Padding and Spacing Table: Cell Padding and Spacing MIME Content-Types Items Types and Their Meaning application/postscript Postscript application/rtf MS Rich Text Format application/x-pdf Adobe Acrobat Format

26. Browser Output- cell padding and spacing

27. Table Example: Surprise Quiz Table: Pop Quiz Draw the table described here Datal Data2 Data3 Data4 Data5 Draw the table described here Average Cost Time Projects P1 100 7 P2 250 15

28. Frames 4 Frames permit you to divide the viewing area into a number of independent areas, each of which can contain its own HTML document 4 Frames can be resized 4 The tag describes the rows or columns; the tag describes the contents of the frame 4 A multiframe document typically does not have a layout; is not recognized if placed after a tag 4 Frame is a very useful tool to organize the contents of HTML (Similar effect of using menu)

29. Examples of Frames

30. Targets of Frames 4 To create targeted links, give frames a name using the NAME attribute of the tag 4 An anchor that displays a new page in a frame might appear as Load Second menu 4 The TARGET attribute has several special values –_SELF: loads file into current frame –_PARENT: loads file into enclosing frame of current frame –_TOP: loads file into current window –_BLANK: opens a new window and loads the file

31. Accommodating Frameless Browsers 4 tag –Goes inside the tag –Contains a frameless HTML –Its use is optional, but recommended 4 Example Welcome to my Home Page... more HTML here

32. Generic Frames Page

33. Contents of the Frames 4 Content.html Introduction The World Wide Web was originally conceived by Tim Berners-Lee while he was working at CERN. 4 Title.html Programming the World Wide Web 4 menu.html Chapter 1 Chapter 2 Chapter 3 4 copyright.html copyright 1999, All Rights Reserved

34. Appearance of Generic Frames Page

35. Attributes of Tag 4 name =... assigns a name to the current frame. This name may be used as the target of subsequent links. 4 src = uri specifies the location of the initial contents to be contained in the frame. 4 Noresize, When present, this boolean attribute tells the browser that the frame window must not be resizeable. 4 scrolling = auto|yes|no –auto: browser should provide scroll bars when necessary. This is the default value. –yes: browser should provide scroll bars for the frame window. –no: browsers should not provide scrolling for the frame window.

36. Attributes of Tag (cont’d) 4 frameborder = 1|0 –1: tells the browser to draw a separator between this frame and every adjoining frame. This is the default value. –0: tells the browser not to draw a separator between this frame and every adjoining frame. Note that separators may be drawn next to this frame nonetheless if specified by other frames. 4 marginwidth = pixels, specifies the amount of space to be left between the frame's contents in its left and right margins. The value must be greater than one pixel. The default value depends on the browser. 4 marginheight = pixels, specifies the amount of space to be left between the frame's contents in its top and bottom margins. The value must be greater than one pixel. The default value depends on the user agent.

37. Tag 4 Allows you to insert Name/Value pairs describing document properties, e.g. 4 USC CS dept home page header

38. Tag 4 Moving a Web page to a new site This site has moved This site has moved to a new location which is: http://www.usc.edu/dept/cs/ Your browser should automatically move to the correct URL in five seconds.

39. Tag 4 This element is supported by all Java-enabled browsers 4 allows designers to embed a Java applet in an HTML document 4 It has been deprecated in favor of the OBJECT element 4 There are many pre-defined Java applets that can be used, e.g. An example of Java applets

40. Tag Browser Output

41. Objects 4 The tag is a generalization of the IMG and APPLET tags 4 Inserting an image Below is a photo showing what I looked like as a baby 4 Inserting a Java applet

42. Updating Text Example: DHTML INPUT Text Updating Using DHTML Entry Box What you type in below will replace this HTML <input type=button value="Click me to change" onclick="ReplaceMe.innerHTML = T1.value"> Type anything in the box and click the button to replace the text with what you have typed. Dynamic HTML replaces text with user-defined content, without a server round trip or reloading the page.

43. Updating Text Example: Browser Output dhtml3.html