1. Markup Languages INE2720 Web Application Software Development Essential Materials

2. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.2 Outline Definitions – WWW, HTTP, HTML Definitions – WWW, HTTP, HTML The concept of Markup Language The concept of Markup Language What is SGML? What is SGML? Introduction to HTML Introduction to HTML –Creating and publishing a Web page –Validating a document –Main HTML elements –Block-level, Text-level HTML elements –Creating hypertext links, adding images to documents –Building tables, Using Frames and Forms Introduction to XML Introduction to XML –DTD, MathML, XHTML

3. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.3 The World Wide Web Definitions Definitions –The World Wide Web (WWW) The set of computers on the Internet that support HTTP The set of computers on the Internet that support HTTP Not a separate network Not a separate network –HTTP The HyperText Transfer Protocol The HyperText Transfer Protocol The language used by a WWW client (e.g. Netscape, IE) to request documents from a WWW server (i.e. the program running at Web sites like amazon.com or yahoo.com) The language used by a WWW client (e.g. Netscape, IE) to request documents from a WWW server (i.e. the program running at Web sites like amazon.com or yahoo.com) –HTML The HyperText Markup Language The HyperText Markup Language The language used to design web pages The language used to design web pages

4. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.4 HTTP HTTP (Hypertext Transfer Protocol) HTTP (Hypertext Transfer Protocol) –protocol used to access data on the WWW. –uses one TCP connection on well-known port 80. –two types of http messages: Request, Response –transfer data in the form of plain text, hypertext, audio, video, and so on.

5. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.5 HTTP DEMO!

6. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.6 The Concept of Markup Language Markup language Markup language –originates from the book publishing industry. –allows us to embed formatting instructions in the document. Two types of markup: Two types of markup: –Procedural markup –Descriptive markup or Generic markup

7. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.7 Procedural Markup formatting codes are mixed in with the text of the document. formatting codes are mixed in with the text of the document. typically unique to a specific software package such as Microsoft Word typically unique to a specific software package such as Microsoft Word Disadvantages: Disadvantages: –a single way of presenting the information, such as a printed page –provide no capability to define appearance for other media, such as CD-ROM and Internet.

8. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.8 Descriptive Markup Basic concept: content of a document should remain separate from its style. Basic concept: content of a document should remain separate from its style. describes the purpose of the text in a document, rather than its physical appearance on the page. describes the purpose of the text in a document, rather than its physical appearance on the page. based on the structure of a document and identifies elements within that structure -- such as a chapter, a section, or a table of contents -- using notations that describe what the element is, not how it appears. based on the structure of a document and identifies elements within that structure -- such as a chapter, a section, or a table of contents -- using notations that describe what the element is, not how it appears. allows multiple presentations of the same information. allows multiple presentations of the same information. –e.g. publications on paper, on CD- ROM and on the Web can come from one set of source files.

9. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.9 SGML SGML: Standard Generalized Markup Language SGML: Standard Generalized Markup Language –an international standard (ISO 8879) published in 1986. –prescribes a standard format for embedding descriptive markup within a document. –specifies a standard method for describing the structure of a document. allows you to set up hierarchical models for each type of document you produce. allows you to set up hierarchical models for each type of document you produce. supports different document structures for different information types, e.g. technical manuals, parts catalogs, design specifications, reports and memos. supports different document structures for different information types, e.g. technical manuals, parts catalogs, design specifications, reports and memos.

10. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.10 SGML SGML documents are SGML documents are –ASCII format: human and machine-readable –independent of any specific hardware or software –portable Can be broken into three components: Can be broken into three components: –structure –content –style

11. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.11 SGML Structure: Structure: –defined in a file called the Document Type Definition (DTD) –describes the structure of a document, much like a database schema describes the types of information it handles and the relationships between fields e.g. the address information should contain street, city, country fields e.g. the address information should contain street, city, country fields –specifies rules for the relationships between elements e.g. the street field must go first before the city field. e.g. the street field must go first before the city field. e.g. the country field is compulsory and can not be blanks. e.g. the country field is compulsory and can not be blanks.

12. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.12 SGML Content: Content: –content is the information itself –identify the content's position within the DTD structure by using "tagging. ” These tags mark the beginning and end of each part of the structure. These tags mark the beginning and end of each part of the structure. e.g. 276 Castle Peak Road e.g. 276 Castle Peak Road " " indicates the start of a street name, and " " indicates the end " " indicates the start of a street name, and " " indicates the end –Nesting of tags reveal the structure of a document. street name city name

13. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.13 SGML Style: Style: –Define how different fields should be displayed. e.g. The style defines that “ city field in the address should be all in upper case and in red colored font ”. e.g. The style defines that “ city field in the address should be all in upper case and in red colored font ”. Content: hong kong Content: hong kong Display: HONG KONG Display: HONG KONG –SGML itself has nothing to do with setting standards for style, so most systems still rely on proprietary methods.

14. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.14 SGML Benefits of SGML: Benefits of SGML: –Increased productivity –Reusability –Information longevity –Improved data integrity –Better data control –Shareability –Portability of information –Flexibility beyond traditional publishing

15. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.15 SGML Two implementations of SGML standard: Two implementations of SGML standard: –HTML: Hypertext Markup Language –XML: Extensible Markup Language HTML SGML XML

16. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.16 SGML HTML tags are limited, so we need to write content using available HTML tags HTML tags are limited, so we need to write content using available HTML tags e.g. writing address as e.g. writing address as 276 Castle Peak Road 276 Castle Peak Road Hong Kong Hong Kong With XML, we can define new tags for writing address fields. With XML, we can define new tags for writing address fields. e.g. it will be more descriptive to write e.g. it will be more descriptive to write 276 Castle Peak Road 276 Castle Peak Road Hong Kong Hong Kong

17. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.17 HTML History & its Future HTML 2.0 HTML 2.0 HTML 3.2 HTML 3.2 HTML 4.0 HTML 4.0 –All formatting is separated into a style sheet. HTML 4.01 HTML 4.01 –Makes the future upgrade from HTML to XHTML in a simple process. XHTML – sometimes referred to as HTML 5 XHTML – sometimes referred to as HTML 5 –The future of HTML standard –Almost identical to HTML 4.01 –1.0, 1.1 and 2.0

18. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.18 XHTML 2.0

19. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.19 Markup Languages Language Year Introduced Description SGML1986 International standard for specifying a document markup language HTML1992 An early recommendation HTML+1993 A superset of HTML HTML 2.0 1995 An HTML version created by IETF HTML 3.2 1996 W3C formal recommendation for HTML XML1998 Universal format for structured documents and data on the Web XHTML2000 Document markup language for the Web SGML HTML XML SGML XML XHTML

20. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.20 HTML Example <HTML><HEAD> Home Page for Lawrence M. Brown Home Page for Lawrence M. Brown </HEAD> Home Page for Lawrence M. Brown Home Page for Lawrence M. Brown <HR> <IMG SRC="images/nswc.gif" WIDTH=300 HEIGHT=117 HSPACE=10 VSPACE=5 ALIGN="LEFT" ALT="NSWC Logo"> HSPACE=10 VSPACE=5 ALIGN="LEFT" ALT="NSWC Logo"> Senior Network Engineer Senior Network Engineer Naval Surface Warfare Center Naval Surface Warfare Center 9500 MacArthur Boulevard 9500 MacArthur Boulevard West Bethesda, Maryland, MD 20817-5700 West Bethesda, Maryland, MD 20817-5700 email: email: brown@corewebprogramming.com</A><BR> Phone: (301) 277-4648 Phone: (301) 277-4648 <P> This is my personal home page. For more specific programming-related resources pages, please see: </BODY></HTML>

21. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.21 Creating and Publishing a Web Page 1. Create an HTML document 2. Place the document in a world-accessible directory (often public_html or www ) on a system running an HTTP server Unix> cd Unix> chmod a+x. (Note the ".") Unix> mkdir public_html Unix> chmod a+x public_html 3. Access the web page through http://hostname/~username/filename E.g. http://www.apl.jhu.edu/~lmb/test.html E.g. http://www.apl.jhu.edu/~lmb/test.html –If the filename is omitted, a system default filename is assumed (often index.html ) E.g. http://www.apl.jhu.edu/~hall/ refers to the file index.html in hall ’ s public_html directory E.g. http://www.apl.jhu.edu/~hall/ refers to the file index.html in hall ’ s public_html directory

22. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.22 Creating and Publishing a Web Page, cont. 4. Validate the Document –Check the syntax using a formal HTML validator http://validator.w3.org/ http://validator.w3.org/ http://www.htmlhelp.com/tools/validator/ http://www.htmlhelp.com/tools/validator/ –The version of HTML against which the document is validated is based on the DOCTYPE –The WWW Consortium recently added advice that Web pages include information on the character set, even though ASCII or Latin-1 is the default. The validator at http://validator.w3.org/ gives warnings if you omit this. You can ignore such warnings if you wish.

23. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.23 W3C XHTML Validation Service Fig. 4.2Validating an XHTML document. (Courtesy of World Wide Web Consortium (W3C).) Validator.w3.org

24. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.24 W3C XHTML Validation Service XHTML validation results. (Courtesy of World Wide Web Consortium (W3C).)

25. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.25.htm or.html We can save an HTML file to either the.htm or.html file extension. We can save an HTML file to either the.htm or.html file extension. It might be a problem inherited from the past. It might be a problem inherited from the past. –Some commonly used software can only allow three character extensions. –.txt,.doc, …

26. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.26 HTML Document Template

27. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.27 HTML Tag Can record document information Can record document information Forward and refresh pages Forward and refresh pages Why You Should Buy Windows 2000 <META NAME="keywords" CONTENT="Windows,Advocacy,OS,Operating Systems"> <META NAME="description" CONTENT="A summary of the advantages of Windows 2000."> Why You Should Buy Windows 2000

28. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.28 HTML Element / Tag ElementAttribute NameAttribute Value You have to understand the important terms related to HTML. You have to understand the important terms related to HTML. Not case-sensitive. Not case-sensitive.

29. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.29 Main HTML Elements 1. DOCTYPE 2. HTML 3. HEAD –TITLE element required –Optional elements: BASE BASE META META BGSOUND BGSOUND SCRIPT, NOSCRIPT SCRIPT, NOSCRIPT STYLE STYLE LINK LINK

30. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.30 Main HTML Elements (Continued) 4. BODY Element – – –HTML Attributes and Attribute Values BACKGROUND BACKGROUND BGCOLOR BGCOLOR TEXT TEXT LINK, VLINK, ALINK LINK, VLINK, ALINK OnLoad, OnUnload, OnFocus, OnBlur OnLoad, OnUnload, OnFocus, OnBlur 5. Elements inside BODY element – Remaining HTML elements – Remaining HTML elements

31. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.31 META Element Records document information, forwards and refreshes pages Records document information, forwards and refreshes pages –NAME="author" –NAME="keywords" –NAME="description" –HTTP-EQUIV="refresh"

32. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.32 META Element, Example <HTML><HEAD> News Headlines News Headlines </HEAD><BODY> News Headlines News Headlines National News National News Blah, blah, blah. International News International News Yadda, yadda, yadda. </BODY></HTML>

33. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.33 Block-Level Elements Headings Headings –H1... H6 –ALIGN Basic Text Sections Basic Text Sections –P –ALIGN –PRE –WIDTH –ADDRESS –BLOCKQUOTE Lists Lists –OL –LI –UL –LI –DL –DT –DD Frames and Forms Frames and Forms Misc. Misc. –HR –DIV –CENTER –MULTICOL (Netscape only)

34. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.34 Headings Heading Types Heading Types –... –... Attributes: ALIGN Attributes: ALIGN –Values: LEFT (default), RIGHT, CENTER Nesting tags Nesting tags –Headings and other block-level elements can contain text-level elements, but not vice versa

35. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.35 Headings, Example <HTML><HEAD> Document Headings Document Headings </HEAD><BODY> Samples of the six heading types: Level-1 (H1) Level-1 (H1) Level-2 (H2) Level-2 (H2) Level-3 (H3) Level-3 (H3) Level-4 (H4) Level-4 (H4) Level-5 (H5) Level-5 (H5) Level-6 (H6) Level-6 (H6) </BODY></HTML>

36. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.36 Headings, Result

37. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.37 P – The Basic Paragraph Attributes: ALIGN Attributes: ALIGN –LEFT (default), RIGHT, CENTER. Same as headings. –Whitespace ignored (use for line break) Consecutive ’ s do not yield multiple blank lines Consecutive ’ s do not yield multiple blank lines –End Tag is Optional: Paragraph 1 Paragraph 2 Paragraph 3 Fully-Specified Paragraph 1 Paragraph 2 Paragraph 3 Equivalent with Implied Tags

38. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.38 Preformatted Paragraphs The PRE Element The PRE Element –... –... Attributes: WIDTH Attributes: WIDTH –Expected width in characters. Not widely supported. Problem: Special Characters Problem: Special Characters<PRE> if (a<b) { doThis(); doThis(); } else { doThat(); doThat();}</PRE>

39. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.39 HTML Character Entities The “ < “ character has special meaning in HTML documents The “ < “ character has special meaning in HTML documents –We cannot use it directly in the text. –We have to use a character entity. –We must use “ < ” or “ < ” –Note, they are case sensitive. –The most common one is the non- breaking space – “ ”

40. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.40 The most common entities DisplayDescriptionName Non-breaking space < Less than < > Greater than > &Ampersand& “ Quotation mark " ‘Apostrophe'

41. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.41 HTML Lists Unordred Lists Unordred Lists Ordered Lists Ordered Lists Definition Lists Definition Lists

42. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.42 OL: Ordered (Numbered) Lists OL Element OL Element – … …... – … …... –Attributes: TYPE, START, COMPACT List entries: LI List entries: LI –... (End Tag Optional) –Attributes: (When inside OL) VALUE, TYPE A sample list: List Item One List Item Two List Item Three

43. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.43 Nested Ordered Lists Headings Headings Basic Text Sections Basic Text Sections Lists Lists Ordered Ordered The OL tag The OL tag TYPE TYPE START START COMPACT COMPACT The LI tag The LI tag Unordered Unordered The UL tag The UL tag The LI tag The LI tag Definition Definition The DL tag The DL tag The DT tag The DT tag The DD tag The DD tag Miscellaneous Miscellaneous</OL>

44. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.44 UL: Unordered (Bulleted) Lists UL Element UL Element – … …... – … …... Attributes: TYPE, COMPACT Attributes: TYPE, COMPACT –TYPE is DISC, CIRCLE, or SQUARE List entries: LI (TYPE) List entries: LI (TYPE) –TYPE is DISC, CIRCLE, or SQUARE A sample list: List Item One List Item Two List Item Three

45. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.45 UL: Custom Bullets The UL tag The UL tag TYPE TYPE DISC DISC CIRCLE CIRCLE SQUARE SQUARE COMPACT COMPACT The LI tag The LI tag TYPE TYPE DISC DISC CIRCLE CIRCLE SQUARE SQUARE VALUE VALUE </UL>

46. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.46 Text-Level Elements Physical Character Styles Physical Character Styles –B, I, TT, U, SUB, SUP, SMALL, BIG, STRIKE, S, BLINK –FONT SIZE SIZE COLOR COLOR FACE FACE –BASEFONT –SIZE Logical Character Styles Logical Character Styles –EM, STRONG, CODE, SAMP, KBD, DFN, VAR, CITE

47. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.47 Text-Level Elements (Continued) Hypertext Links Hypertext Links –A HREF, NAME, TARGET,... HREF, NAME, TARGET,... Images Images –IMG SRC (required), ALT, ALIGN, WIDTH, HEIGHT, HSPACE, VSPACE, BORDER, USEMAP, ISMAP SRC (required), ALT, ALIGN, WIDTH, HEIGHT, HSPACE, VSPACE, BORDER, USEMAP, ISMAP Misc. Text-Level Elements Misc. Text-Level Elements –BR (Explicit line break) –AREA (Client-side image maps) –APPLET (Java) –...

48. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.48 Physical Character Styles, Example... Physical Character Styles Physical Character Styles Bold Bold <I>Italic</I><BR> Teletype (Monospaced) Teletype (Monospaced) <U>Underlined</U><BR> Subscripts: f 0 + f 1 Subscripts: f 0 + f 1 Superscripts: x 2 + y 2 Superscripts: x 2 + y 2 <SMALL>Smaller</SMALL><BR><BIG>Bigger</BIG><BR> Strike Through Strike Through Bold Italic Bold Italic Big Monospaced Big Monospaced Small Italic Small Italic Gray Gray <DEL>Delete</DEL><BR><INS>Insert</INS><BR>...

49. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.49 Text Formatting <b> Bold text <big> Big text <em> Emphasized text <i> Italic text <small> Small text <strong> Strong text <sub> Subscripted text <sup> Superscripted text

50. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.50 Physical Character Styles, Result

51. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.51 Logical Character Styles, Example... Logical Character Styles Logical Character Styles <EM>Emphasized</EM><BR> Strongly Emphasized Strongly Emphasized <CODE>Code</CODE><BR> Sample Output Sample Output Keyboard Text Keyboard Text <DFN>Definition</DFN><BR><VAR>Variable</VAR><BR><CITE>Citation</CITE><BR> Emphasized Code Emphasized Code Gray Citation Gray Citation JDK Acronym JDK Acronym...

52. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.52 Logical Character Styles, Result

53. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.53 HTML Links to create a link to another document. to create a link to another document. The target attribute The target attribute – xxx – xxx –Open the document in a new browser window. The name attribute The name attribute – – – Useful text – Useful text

54. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.54 Hypertext Links Links can contain images and other text-level elements (i.e.,... ) Links can contain images and other text-level elements (i.e.,... ) Link to Absolute URL Link to Absolute URL –Use a complete URL beginning with http:// Java is discussed in Chapter 2. Link to Relative URL Link to Relative URL –Use a filename or relative path to filename Interpreted wrt location of current file Interpreted wrt location of current file Java is discussed in Chapter 2. Chapter 2.

55. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.55 Hypertext Links (Continued) Link to Section Link to Section –Use a section name (see below) preceded by # Images are discussed in Section 2. Section 2. Link to Section in URL Link to Section in URL –Use absolute or relative URL, then #, then section name Images are discussed in Sec. 2 of Chap. 1. Naming a Section Naming a Section –Use and do not include the pound sign Images Images

56. 1 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 5 6 6 7 8 8 9 9 10 Internet and WWW How to Program - Links 10 Internet and WWW How to Program - Links 11 11 12 13 13 14 15 Here are my favorite sites 15 Here are my favorite sites 16 17 Click on a name to go to that page. 17 Click on a name to go to that page. 18 19 Deitel 19 Deitel 20 21 Prentice Hall 21 Prentice Hall 22 23 Yahoo! 23 Yahoo! 24 25 USA Today 25 USA Today 26 27 27 28 28 Text between strong tags will appear bold. Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it. Linking is accomplished in XHTML with the anchor (a) element. The anchor links to the page that’s value is given by the href attribute. The text between the a tags is the anchor for the link.

57. Hypertext Links Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.

58. 1 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 5 6 6 7 8 8 9 9 10 Internet and WWW How to Program - Contact Page 11 11 12 12 13 14 14 15 16 My email address is 17 deitel@deitel.com 18. Click the address and your browser will open an 19 email message and address it to me. 19 email message and address it to me. 20 21 21 22 22 To create an email link include “mailto:” before the email address in the href attribute. When a user clicks on an email link, an email message addressed to the value of the link will open up.

59. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.59 IMG: Embedding Images Example Example <IMG SRC="SomeFile.gif" ALT="My Dog" WIDTH=400 HEIGHT=300> WIDTH=400 HEIGHT=300> Attributes: Attributes: –SRC (required) –ALT (technically required) –ALIGN (see ) –WIDTH, HEIGHT –HSPACE, VSPACE –BORDER –USEMAP, ISMAP

60. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.60 Image Alignment, Example <HTML> Image Alignment Image Alignment <BODY> Alignment Alignment Result Result LEFT LEFT <IMG SRC="rude-pc.gif" ALIGN="LEFT" ALT="Rude PC" WIDTH=54 HEIGHT=77> ALT="Rude PC" WIDTH=54 HEIGHT=77> This positions the image at the left side, This positions the image at the left side, with text flowing around it on the right. with text flowing around it on the right. RIGHT RIGHT <IMG SRC="rude-pc.gif" ALIGN="RIGHT" ALT="Rude PC" WIDTH=54 HEIGHT=77> ALT="Rude PC" WIDTH=54 HEIGHT=77> This positions the image at the right side, This positions the image at the right side, with text flowing around it on the left. with text flowing around it on the left.......</TABLE></BODY></HTML>

61. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.61 Image Alignment, Result

62. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.62 Break Time – 15 minutes

63. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.63 Tables Template Template Table Caption Table Caption Heading1 Heading2 Heading1 Heading2 Row1 Col1 Data Row1 Col2 Data Row1 Col1 Data Row1 Col2 Data Row2 Col1 Data Row2 Col2 Data Row2 Col1 Data Row2 Col2 Data Row3 Col1 Data Row3 Col2 Data Row3 Col1 Data Row3 Col2 Data </TABLE>

64. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.64 TABLE Element Attributes ALIGN ALIGN –The ALIGN attribute gives the horizontal alignment of the table as a whole –Legal values are LEFT, RIGHT, and CENTER, with LEFT being the default BORDER BORDER –This specifies the width in pixels of the border around the table –This is in addition to the border around each cell (the CELLSPACING). –The default is zero, which also results in the visible 3D divider between cells being turned off CELLSPACING CELLSPACING –This gives the space in pixels between adjacent cells. Drawn as a 3D line if BORDER is nonzero, otherwise empty space in the background color is used –The default is usually about 3

65. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.65 TABLE Element Attributes (Continued) CELLPADDING CELLPADDING –CELLPADDING determines the empty space, in pixels, between the cell ’ s border and the table element –The default is usually about 1 WIDTH WIDTH –This specifies the width of the table, either in pixels ( ) or as a percentage of the current browser window width ( ) BGCOLOR BGCOLOR –Specify the background color of the table TABLE (also legal for TR, TD, and TH) BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT –Non standard attributes supported by IE to specify the colors to user for the borders

66. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.66 TABLE Element Attributes (Continued) BACKGROUND BACKGROUND –This nonstandard attribute supported by IE gives an image file that will be tiled as the background of the table –You might want to use style sheets instead. RULES RULES –HTML 4.0 attribute that specifies which inner dividing lines are drawn –All are drawn if this attribute is omitted –Legal values are NONE, ROWS, COLS, and ALL FRAME FRAME –Specifies which outer borders are drawn –All four are drawn if this attribute is omitted –Legal values are BORDER or BOX (all), VOID (none), ABOVE (top), BELOW (bottom), HSIDES (top and bottom, despite the somewhat confusing name), VSIDES (left and right), LHS (left), and RHS (right)

67. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.67 Table CAPTION Attribute Attribute –ALIGN (Values: TOP, BOTTOM) Usage Usage –An enclosing borderless table may give more flexibility than the built-in CAPTION.

68. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.68 TR: Table Row TR is used to define each row in the table TR is used to define each row in the table Each row will then contain TH and/or TD entries Each row will then contain TH and/or TD entries ALIGN ALIGN –ALIGN (legal values LEFT, RIGHT, or CENTER) is used to set the default horizontal alignment for table cells VALIGN VALIGN –VALIGN (legal values TOP, MIDDLE, or BOTTOM) is used to set the default vertical alignment for table cells BGCOLOR BGCOLOR –Sets the color for the table row, overriding any values set for the table as a whole via the BGCOLOR attribute of TABLE BORDERCOLOR, BORDERCOLORDARK, BORDERCOLOR, BORDERCOLORDARK, BORDERCOLORLIGHT BORDERCOLORLIGHT –Supported only by Internet Explorer, these specify the colors to use for the row borders

69. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.69 Table Cells: TH and TD COLSPAN COLSPAN –COLSPAN defines a heading or cell data entry that spans multiple columns –COLSPAN defines a heading or cell data entry that spans multiple columns Col 1&2 Heading Col 1&2 Heading Col3 Heading Col3 Heading Col1 Data Col1 Data Col2 Data Col2 Data Col3 Data Col3 Data</TABLE>

70. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.70 Table Cells: TH and TD (Continued) ROWSPAN ROWSPAN –ROWSPAN defines a heading or cell data entry that spans multiple rows; similar to COLSPAN ALIGN ALIGN –LEFT, RIGHT, CENTER, JUSTIFY and CHAR. –E.g., the following aligns entries on a decimal point VALIGN VALIGN –TOP, BOTTOM, MIDDLE WIDTH, HEIGHT WIDTH, HEIGHT –Values in pixels only (no percentages officially allowed) NOWRAP NOWRAP –Use with caution BGCOLOR, BACKGROUND BGCOLOR, BACKGROUND –Same as for TABLE and TR

71. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.71 HTML Hex-Colors White#FFFFFF Red#FF0000 Green#00FF00 Blue#0000FF Cyan#00FFFF Yellow#FFFF00 Black#000000 Dim Grev #545454 Forest Green #238E23 Grey#C0C0C0 Midnight Blue #2F2F4F Orange#FF7F00 Spring Green #00FF7F Turquoise#ADEAEA

72. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.72 Basic HTML - Summary A DOCTYPE is required to validate the document A DOCTYPE is required to validate the document HTML document should have an enclosing HTML element, a HEAD (TITLE is required) and a BODY HTML document should have an enclosing HTML element, a HEAD (TITLE is required) and a BODY Hypertext links, Hypertext links, –can be absolute or relative –A link to a named section is denoted by #section Tables are composed of main table element, ; rows, ; table headers, ; and table data, Tables are composed of main table element, ; rows, ; table headers, ; and table data, –Use BGCOLOR to give background colors to tables, rows, or cells –Use ROWSPAN or COLSPAN to join cells

73. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.73 HTML Frames - Outline Advantages and disadvantages of frames Advantages and disadvantages of frames FRAME template FRAME template Defining rows and cols in a FRAMESET Defining rows and cols in a FRAMESET Common FRAME and FRAMESET attributes Common FRAME and FRAMESET attributes Nested frames Nested frames Targeting a document to a named FRAME cell Targeting a document to a named FRAME cell

74. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.74 HTML Frames Vertical frameset Vertical frameset Horizontal frameset Horizontal frameset You can display more than one HTML document in the same browser. You can display more than one HTML document in the same browser. Webmaster should keep track of more HTML documents. Webmaster should keep track of more HTML documents. Difficult to print the entire page Difficult to print the entire page –Print friendly page.

75. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.75 Frame Advantages Certain parts of the interface (e.g., a TOC) are always on the screen Certain parts of the interface (e.g., a TOC) are always on the screen Can avoid retyping common sections of multiple Web pages Can avoid retyping common sections of multiple Web pages Consistent use across a large site sometimes simplifies user navigation Consistent use across a large site sometimes simplifies user navigation A convenient way to mix text-oriented HTML with Java applets A convenient way to mix text-oriented HTML with Java applets Image maps are more convenient if the map image remains on screen and only the results section changes Image maps are more convenient if the map image remains on screen and only the results section changes

76. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.76 Frame Disadvantages The meaning of the “ Back ” and “ Forward ” buttons can be confusing The meaning of the “ Back ” and “ Forward ” buttons can be confusing Poorly designed frames can get the user lost Poorly designed frames can get the user lost Hard to find real URL of a page you want Hard to find real URL of a page you want –Printing problems! Hard to bookmark "configuration" Hard to bookmark "configuration" Some very old browsers do not support frames Some very old browsers do not support frames Security Security –Hackers can insert frame cells into your pages in some circumstances, perhaps stealing information intended for your site

77. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.77 Frame Template <HTML> Document Title Document Title </FRAMESET></HTML>

78. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.78 FRAMESET Attributes COLS, ROWS COLS, ROWS –A comma-separated list of pixel values, percentages, and weighted remainders –FRAMESET entries should always specify at least two rows or columns. Netscape problems if not! –Examples......

79. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.79 FRAMESET ROWS, Example... 50 pixels, 10%, 1/3, 2/3

80. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.80 FRAMESET Attributes (Continued) FRAMEBORDER FRAMEBORDER –Indicates whether borders will be drawn between frame cells –YES or 1 specifies borders; NO or 0 specifies no border –Can be overridden by FRAMEBORDER settings in individual FRAME entries –Often used in conjunction with BORDER=0 and FRAMESPACING=0 BORDER (Netscape), FRAMESPACING (IE) BORDER (Netscape), FRAMESPACING (IE) –Specify the thickness of the border between cells –Apply to outermost FRAMESET only BORDERCOLOR BORDERCOLOR –Sets the color of the border between cell, using either a hex RGB value or color name

81. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.81 Frame Border, Examples Frame Border

82. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.82 FRAME: Specifying Content of Frame Cells SRC SRC –URL of the document to place in the frame cell NAME NAME –Supplies destination for TARGET attribute of hypertext links FRAMEBORDER, BORDERCOLOR FRAMEBORDER, BORDERCOLOR MARGINWIDTH, MARGINHEIGHT MARGINWIDTH, MARGINHEIGHT –Specifies the left/right and top/bottom cell margins, respectively SCROLLING SCROLLING –Indicates whether cells should have scrollbars NORESIZE NORESIZE –Disables the ability to resize the frame cells

83. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.83 Frame Example 1 <HTML> Frame Example 1 Frame Example 1 Your browser does not support frames. Please see Your browser does not support frames. Please see non-frames version. non-frames version. </FRAMESET></HTML>

84. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.84 Frame Example 1, Result

85. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.85 Frame Example 2 <HTML> Frame Example 2 Frame Example 2 Your browser does not support frames. Please see Your browser does not support frames. Please see nonframes version. nonframes version. </FRAMESET></HTML>

86. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.86 Frame Example 2, Result

87. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.87 Targeting Frame Cells Specify the cell in which to place a page referenced by a hyperlink Specify the cell in which to place a page referenced by a hyperlink The NAME Attribute of FRAME The NAME Attribute of FRAME The TARGET Attribute of A HREF The TARGET Attribute of A HREF

88. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.88 Targeting Example

89. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.89 Cold-Fusion.html <HTML><HEAD> Investing in Cold Fusion Investing in Cold Fusion </HEAD> This page requires Frames. For a non-Frames version, This page requires Frames. For a non-Frames version, the introduction. the introduction. </FRAMESET></HTML>

90. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.90 TOC.html <HTML><HEAD> Table of Contents Table of Contents </HEAD><BODY> Introduction Introduction Potential Potential Investing Investing References References </TABLE></BODY></HTML>

91. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.91 Targeting Example, Results

92. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.92 Predefined Frame Names _blank _blank –Load document into a new browser window _top _top –Causes the linked document to take up the whole browser window –Document will not be contained in a frame cell _parent _parent –Places document in the immediate FRAMESET parent –Same as _top if no nested frames _self _self –Place document in current cell –Only necessary to override a BASE entry

93. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.93 Update Multiple Frames (Revisit during the JS lecture)

94. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.94 HTML Frames - Summary Frames require a Frameset DOCTYPE for validation Frames require a Frameset DOCTYPE for validation A FRAMESET can be divided either into columns or rows A FRAMESET can be divided either into columns or rows –To create both rows and columns use nested FRAMESETs By giving a FRAME a name, documents can be targeted to the named frame cell By giving a FRAME a name, documents can be targeted to the named frame cell – – There are four predefined frame names There are four predefined frame names –_blank, _top, _parent, and _self

95. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.95 Outline – HTML Forms Sending data from forms Sending data from forms The FORM element The FORM element Text controls Text controls Push buttons Push buttons Check boxes and radio buttons Check boxes and radio buttons Combo boxes and list boxes Combo boxes and list boxes File upload controls File upload controls Server-side image maps Server-side image maps Hidden fields Hidden fields Grouping controls Grouping controls Tab ordering Tab ordering

96. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.96 Sending Data with GET … A Sample Form Using GET A Sample Form Using GET First name: First name: Last name: Last name: </FORM></BODY></HTML>

97. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.97 Initial Result

98. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.98 Submission Result

99. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.99 Sending Data with POST … A Sample Form Using POST A Sample Form Using POST <FORM ACTION="http://localhost:8088/SomeProgram" METHOD="POST"> METHOD="POST"> First name: First name: Last name: Last name: </FORM></BODY></HTML>

100. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.100 Initial Result

101. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.101 Submission Result

102. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.102 URL Encoding: Original Form

103. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.103 URL Encoding: Result

104. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.104 Text Controls Textfields Textfields – – VALUE can give original value VALUE can give original value Password Fields Password Fields – – Always use POST Always use POST Text Areas Text Areas – … – … Interpretation of regular HTML tags turned off between and Interpretation of regular HTML tags turned off between and

105. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.105 Push Buttons Submit Buttons Submit Buttons – – Use NAME if you have multiple buttons Use NAME if you have multiple buttons Use VALUE to change button's label Use VALUE to change button's label Reset Buttons Reset Buttons – – Use VALUE to change button's label Use VALUE to change button's label JavaScript Buttons JavaScript Buttons – – Fancy Buttons Fancy Buttons – HTML – HTML Internet Explorer and Netscape 6 only Internet Explorer and Netscape 6 only

106. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.106 Using Multiple Submit Buttons <CENTER>Item: <INPUT TYPE="SUBMIT" NAME="Add" VALUE="Add Item to Cart"> VALUE="Add Item to Cart"> <INPUT TYPE="SUBMIT" NAME="Delete" VALUE="Delete Item from Cart"> VALUE="Delete Item from Cart"></CENTER>

107. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.107 Check Boxes Format Format – – The CHECKED attribute makes it initially checked The CHECKED attribute makes it initially checked Name/value pair sent only if checkbox is checked when form is submitted Name/value pair sent only if checkbox is checked when form is submitted Example code Example code<P> Check here if you do not want to get our email newsletter Example result Example result

108. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.108 Radio Buttons Format Format – – All radio buttons in a group should have same NAME All radio buttons in a group should have same NAME Only one button in a group can be pressed; pressing a different one causes previous one to pop out Only one button in a group can be pressed; pressing a different one causes previous one to pop out Example Example<DL> Credit Card: Credit Card: <INPUT TYPE="RADIO" NAME="creditCard" VALUE="visa"> VALUE="visa"> Visa Visa <INPUT TYPE="RADIO" NAME="creditCard" VALUE="mastercard"> VALUE="mastercard"> Master Card Master Card......</DL>

109. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.109 Combo Boxes Format Format –SELECT gives NAME –OPTION gives VALUE Example Example Favorite language: C C C++ C++ Java Java Lisp Lisp Perl Perl Smalltalk Smalltalk</SELECT>

110. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.110 List Boxes Format Format –Identical to combo boxes, but specify MULTIPLE Example Example Languages you know: Languages you know: C C C++ C++ Java Java Lisp Lisp Perl Perl Smalltalk Smalltalk</SELECT>

111. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.111 Other Controls and Options File upload controls File upload controls –Lets user select a file and send it to the server Server-side image maps Server-side image maps –User clicks on an image and form gets submitted. –Form data gets sent as name.x=x-pos&name.y=y-pos Hidden fields Hidden fields –Preset NAME and VALUE sent with form submission.. Grouping Controls Grouping Controls –FIELDSET lets you visually group forms. –Internet Explorer and Netscape 6 only. Tab order control Tab order control –TABINDEX (Internet Explorer and Netscape 6 only)

112. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.112 HTML Form - Example

113. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.113 HTML Forms - Summary General process General process –FORM uses ACTION to specify base URL –Input elements each have a NAME –User enters values –When form submitted, URL is baseURL?name1=value1&name2=value2& … –For POST requests, name/value pairs sent on separate line (not part of URL) Textfields Textfields – – Submit Buttons Submit Buttons – –

114. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.114 Break Time – 15 minutes

115. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.115 XML XML: Extensible Markup Language XML: Extensible Markup Language –was developed in 1996 by the World Wide Web Consortium (W3C) XML working group –Designed to carry data –Has all 3 components of SGML: structure (DTD) structure (DTD) content (XML) content (XML) style (XSL) style (XSL) XML Document DTD (Optional) XML Parser Application + XSL (Optional)

116. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.116 XML XML documents contain only data XML documents contain only data –Applications decide how to display the data –Files end in the.xml extension –Highly portable –Language for creating markup languages Can create new tags Can create new tags Document Type Definition (DTD) files Document Type Definition (DTD) files –Defines grammatical rules for the document –Used to check the XML document structure against Extensible Style Language (XSL) files Extensible Style Language (XSL) files –Defines additional information for rendering the document –Possible to search, sort, manipulate and render XML using Extensible Style Language (XSL)

117. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.117 XML XML parser XML parser –Checks an XML document ’ s syntax validating against DTD validating against DTD non-validating against DTD non-validating against DTD –Support either the Document Object Model (DOM) Document Object Model (DOM) –Build a tree structure containing the XML document ’ s data Simple API for XML (SAX) Simple API for XML (SAX) –Process the document and generate events –More info on XML parsers: www.xml.com/xml/pub/Guide/XML_Parsers www.xml.com/xml/pub/Guide/XML_Parsers

118. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.118 Document Type Definitions DTD: Document Type Definitions DTD: Document Type Definitions –Specify list of element types, attributes and their relationships to each other –Optional, but recommended for program conformity –!Element Element type declaration – defines the rules for an element Element type declaration – defines the rules for an element #PCDATA: The element can store parsed character data #PCDATA: The element can store parsed character data –!ATTLIST Defines attributes for an element Defines attributes for an element #IMPLIED: Can assign its own type attribute or ignore #IMPLIED: Can assign its own type attribute or ignore #REQUIRED: The specified attribute must be declared in the document #REQUIRED: The specified attribute must be declared in the document #FIXED: The Specified attribute must be declared with given value #FIXED: The Specified attribute must be declared with given value

119. Document Type Definitions Business letter DTD Declare elements and elements ’ attributes Declare elements and elements ’ attributes #IMPLIED indicates attribute is unspecified — system gives it a value CDATA states that attribute contains a string #PCDATA specifies parsed character data EMPTY specifies element does not contain content (commonly used for attributes) 1 2 3 4<!ELEMENT letter (contact+, salutation, paragraph+, 5 closing, signature )> 6 7<!ELEMENT contact (name, address1, address2, city, state, 8 zip, phone, flag)> 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

120. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.120 Basic XML Documents XML elements XML elements –Root element Must be exactly one per XML document Must be exactly one per XML document Contains all other elements in document Contains all other elements in document Lines preceding the root element are called the prolog Lines preceding the root element are called the prolog –Container element Contains sub-elements (children) Contains sub-elements (children) –Empty element No matching end tag No matching end tag In HTML, IMG In HTML, IMG Terminate with forward slash ( / ) Terminate with forward slash ( / )

121. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.121 Basic XML Documents XML declaration tells parser which version of XML XML declaration tells parser which version of XML Specify DTD file ’ s name and location Specify DTD file ’ s name and location Attribute's value in quotes Attribute's value in quotes Empty element uses / Empty element uses / Tags contain data appropriate for tag names Tags contain data appropriate for tag names - root - root - container,,,,<address1>,<zip> - sub-elements 1 2 3 4 5 6 7 8 9 10 11 John Doe 12 123 Main St. 13 14 Anytown 15 Anystate 16 12345 17 555-1234 18 19 20 21 Dear Sir:... 31

122. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.122 Basic XML Documents Parse by msxml into tree structure Parse by msxml into tree structure - or + to expand/ collapse child - or + to expand/ collapse child

123. 1 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 5 6 6 7 8 8 9 10 Simple MathML Example 10 Simple MathML Example 11 12 12 13 14 14 15 16 16 17 2 17 2 18 + 18 + 19 3 19 3 20 = 20 = 21 5 21 5 22 22 23 24 24 25 26 26 27 27 Element mrow behaves like parentheses, which allows the document author to group related elements properly. MathML

124. 1 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 4 5 5 6 7 7 8 9 Algebraic MathML Example 9 Algebraic MathML Example 10 11 11 12 13 13 14 14 15 16 16 17 3 17 3 18 &InvisibleTimes; 18 &InvisibleTimes; 19 20 20 21 x 21 x 22 2 22 2 23 23 24 25 25 26 27 + 27 + 28 x 28 x 29 - 29 - 30 31 31 32 2 32 2 33 x 33 x 34 34 35 36 = 36 = 37 0 37 0 38 39 39 40 40 41 42 42 43 43 entity reference &InvisibleTimes; to indicate a multiplication operation without a symbolic representation. The msup element represents a superscript.Element mfrac display a fraction.

125. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.125 XHTML XHTML: Extensible Hypertext Markup Language XHTML: Extensible Hypertext Markup Language –properly structured XML that corresponds with traditional HTML, i.e. HTML ’ s proposed successor –includes HTML4 for backward compatibility –allows complex documents to be created by combining HTML elements with XML ’ s extensibility Ability to create new elements Ability to create new elements Example: XHTML document might combine HTML elements with MathML and CML elements Example: XHTML document might combine HTML elements with MathML and CML elements –allows well formed documents Each XHTML document validated using DTD ’ s Each XHTML document validated using DTD ’ s –its features provide structure HTML lacks –uses XML syntax All tags lowercase and closed All tags lowercase and closed

126. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.126 HTML – OK, XHTML - !OK <HTML><HEAD> My Title My Title It is an acceptable HTML, but an unacceptable XHTML It is an acceptable HTML, but an unacceptable XHTML</BODY>…  Incorrect  Incorrect  Correct  Correct Test

127. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.127 XHTML Elements must be Properly Nested Elements must be Properly Nested Tag names must be in lowercase Tag names must be in lowercase XHTML elements must be closed XHTML elements must be closed Empty elements must be closed Empty elements must be closed –Tags without end tag e.g. –Tags without end tag e.g. Attribute name must be in lowercase Attribute name must be in lowercase Attribute value must be quoted Attribute value must be quoted

128. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.128 Properly Nested This text is bold and italic This text is bold and italic <ul><li>John</li><li>Mary<ul><li>Green</li><li>Purple</li></ul><li>Milk</li></ul> Any Error???

129. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.129 Correct XHTML This is a paragraph This is a paragraph This is another paragraph This is another paragraph This is a break This is a break Here comes a horizontal rule: Here comes a horizontal rule: Here's an image Here's an image

130. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.130 Minimum XHTML document <html><head> Title goes here Title goes here Body text goes here Body text goes here </html>

131. 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/frameset.dtd"> 3 4 5 6 7 8 9<meta name = "keywords" content = "Webpage, design, HTML, 10 tutorial, personal, help, index, form, contact, feedback, 11 list, links, frame, deitel"/> 12 13<meta name = "description" content = "This Web site will help 14 you learn the basics of HTML and Webpage design through the 15 use of interactive examples and instruction."/> 16 17 18 19 20 21 22 23 24 25 <frame name = "picture" src = "picture.html" 26 noresize = "noresize"/> 27 28 29 Example of XHTML document which has been validated by W3C ’ s HTML validation service at validator.w3.org Example of XHTML document which has been validated by W3C ’ s HTML validation service at validator.w3.org

132. 1.1 xhtml tag 34 Microsoft 35 Web-Site 36 37 38 39 40 41 Black 42 John 43 44 45 46 Green 47 Sue 48 49 50 51 30 31 This page uses frames, but your browser does not 32 support them. 33 Get Internet Explorer 5 at the

133. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.133 3 Document Type Definitions XHTML 1.0 Strict XHTML 1.0 Strict – – –Clean markup, use with CSS XHTML 1.0 Transitional XHTML 1.0 Transitional – – –More loose markup (allow old tag), commonly use XHTML 1.0 Frameset XHTML 1.0 Frameset – – –Partition your browser into several frames

134. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.134 XHTML 1.0 Reference: W3.orgW3.org

135. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.135 Converting your web sites to XHTML Create a prolog for every applicable document Create a prolog for every applicable document –DOCTYPE declaration Change tag and attribute names to lowercase Change tag and attribute names to lowercase –XHTML is case sensitive Insert quotation marks to all attribute values Insert quotation marks to all attribute values –Very time-consuming job Repair empty element tags Repair empty element tags – – Validate the web site documents Validate the web site documents –http://validate.w3.org http://validate.w3.org

136. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.136 HTML Tidy Fixed mistakes automatically! Let ’ s see the demo now.demo

137. INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung 2003.137 References Deitel: Chapter 4, 5, 20 Deitel: Chapter 4, 5, 20 CWP: Chapter 1, 2, 3, 4, 18 CWP: Chapter 1, 2, 3, 4, 18 HTML Tutorial HTML Tutorial HTML Tutorial HTML Tutorial W3 Schools W3 Schools W3 Schools W3 Schools Buttons Buttons http://www.rewnet.com/bbb/ http://www.graphics-4free.com/ http://coolgraphics.com/gallery/ http://www.wilrose.com/downloads/HTML_Tutorial.pdf http://www.wilrose.com/downloads/HTML_Tutorial.pdf http://www.wilrose.com/downloads/HTML_Tutorial.pdf Thank you for patience! Thank you for patience!