1. 1 HTML Hypertext Markup Language

2. 2 Objectives n To be able to create simple Web pages n To understand certain advanced HTML concepts such as tables and frames n To understand the future of HTML

3. 3 Outline Day 1 n HTML Overview n Basic HTML – Text formatting – Lists – Hyperlinks – Images

4. 4 Outline Day 2 n Advanced HTML – Tables – Frames n Design Guidelines n Future of HTML n Wrap-up n What an advanced HTML /Web course would entail

5. 5 Definition : HTML n Hypertext Markup Language n Simplified subset of Standardized Markup Language (SGML) n Defines the structure of a document n Contrary to assumption, it does NOT completely define the document look as explicit rendering depends on the browser

6. 6 Definition : Tags n Features or elements delineated inside of brackets (<>) n In these slides, the current style of tags will be shown in black and the deprecated style will be shown below in italics

7. 7 Definition : Attributes n Parameters inside of tags that define values for a given tag

8. 8 Definition : Events n Actions that occur within a Web page that can be realized by an HTML document

9. 9 Basic Structure of an HTML Page Title goes here

10. 10 BODY Attributes n BGCOLOR=“#000000” n TEXT=“#000000” n LINK=“#000000” n VLINK=“#000000” n ALINK=“#000000” n BACKGROUND=“URL of image”

11. 11 Comments

12. 12 Headers First-level heading Second-level heading Third-level heading Fourth-level heading Fifth-level heading Sixth-level heading

13. 13 Character Formatting : Fonts Tiny text Smaller text Small text Normal text Large text Big text Huge text

14. 14 Character Formatting : Base Font for Document

15. 15 Character Formatting : Base Font for Document Deprecated Style

16. 16 Character Formatting : Fonts Tiny text Smaller text Small text Large text Big text Huge text

17. 17 Character Formatting : Font Color Red Green Blue

18. 18 Character Formatting : Emphasis (Usually Italic) Emphasized text

19. 19 Character Formatting : Strong (Usually Bold) Strong text

20. 20 Character Formatting : Code (Usually Courier) Code text

21. 21 Character Formatting : Keyboard (Usually Courier) Text to be typed

22. 22 Character Formatting : Variable Variable text

23. 23 Character Formatting : Sample Sample text

24. 24 Character Formatting : Definition Definition of a term

25. 25 Character Formatting : Citation Citation text

26. 26 Character Formatting : Addresses john.doe@email.com John Doe

27. 27 Character Formatting : Deprecated “Physical” Tags Bold text Italic text Typewriter text Underlined text Strike through text Bigger text Smaller text Subscript text Superscript text

28. 28 Horizontal Rule Deprecated style n HR Attributes – SIZE=10 (thickness in pixels) – WIDTH=100 (width in pixels) – WIDTH=50% – ALIGN=LEFT, CENTER, RIGHT – NOSHADE

29. 29 Line Break Deprecated style

30. 30 Paragraphs This is a paragraph. This can include any number of sentences. Yadda yadda ya. Deprecated style This is a paragraph. This can include any number of sentences. Yadda yadda ya.

31. 31 Block Quote Four score and seven years ago…

32. 32 Preformatted Text Whatever, However this text is displayed ====================== Just as it is here

33. 33 Divisions n DIV Attributes ALIGN=LEFT, CENTER, RIGHT n Note: Whatever should be the same as: Whatever

34. 34 Lists n Ordered (Numbered) list n Unordered list n Menu list n Directory list n Definition (Glossary) list

35. 35 Ordered (Numbered) List Item 1 Item 2 Deprecated Style Item 1 Item 2

36. 36 Ordered (Numbered) List : Type Attribute Item 1 Item 2 Deprecated Style Item 1 Item 2

37. 37 Ordered (Numbered) List : Type Attribute Item a Item b Deprecated Style Item a Item b

38. 38 Ordered (Numbered) List : Type Attribute Item A Item B Deprecated Style Item A Item B

39. 39 Ordered (Numbered) List : Type Attribute Item i Item ii Deprecated Style Item i Item ii

40. 40 Ordered (Numbered) List : Type Attribute Item I Item II Deprecated Style Item I Item II

41. 41 Ordered (Numbered) List : Start Attribute Item 10 Item 11 Deprecated Style Item 10 Item 11

42. 42 Ordered (Numbered) List : Type and Start Attributes Item V Item VI Deprecated Style Item V Item VI

43. 43 Unordered List First Item Second Item Deprecated Style First Item Second Item

44. 44 Unordered List : Type Attribute First Disk Item Second Disk Item Deprecated Style First Disk Item Second Disk Item

45. 45 Unordered List : Type Attribute First Square Item Second Square Item Deprecated Style First Square Item Second Square Item

46. 46 Unordered List : Type Attribute First Circle Item Second Circle Item Deprecated Style First Circle Item Second Circle Item

47. 47 Menu List Menu Item 1 Menu Item 2 Deprecated Style Menu Item 1 Menu Item 2

48. 48 Directory List Directory Item 1 Directory Item 2 Deprecated Style Directory Item 1 Directory Item 2

49. 49 Definition (Glossary) List Term 1 Definition 1 Term 2 Definition 2 Deprecated Style Term 1 Definition 1 Term 2 Definition 2

50. 50 Links URL related text URLs can be any of the following: http://hostname:port/directory/filename.html ftp://username:password@ftp.site.com/directory/file file://directory/file.txt mailto://joe.doe@email.com gopher://hostname/directory/file news:site

51. 51 Links Note n Replace : in a pathname with a | – DO n Definition – DON’T n Definition

52. 52 Links Internal to a Document A named point in a document Linking to point in the same document name Linking to point from another document name

53. 53 Other Uses of the Link Tag n Audio files n Video files n Other multimedia files

54. 54 Images Deprecated Style

55. 55 Images : IMG Attributes n ALT=“Text if image can’t be shown” n ALIGN=TOP, MIDDLE, BOTTOM n ALIGN=LEFT, RIGHT (word wrapping margin) n CLEAR=LEFT, RIGHT, ALL (remove margin) n HEIGHT=200 (in pixels) n WIDTH=200 (in pixels) n VSPACE=20 (in pixels) n HSPACE=20 (in pixels) n BORDER=5 (in pixels)

56. 56 Applets Using the APPLET Tag <APPLET CODE=“URL.class” WIDTH=200 HEIGHT=200>

57. 57 Applets Using the APPLET Tag Deprecated Style <APPLET CODE=“URL.class” WIDTH=200 HEIGHT=200>

58. 58 Tables Title for the Table Column 1 Column 2 Data 1 Data 2

59. 59 Tables : TABLE Attributes n BORDER or BORDER=0, 1, 2, 3, … n ALIGN=LEFT, CENTER, RIGHT n WIDTH=0, 100 n CELLSPACING=0, 1, 2, 3, … n CELLPADDING=0, 1, 2, 3, …

60. 60 Tables : CAPTION Attributes n ALIGN=TOP, BOTTOM

61. 61 Tables : TR (Table Row) Attributes n ALIGN=LEFT, CENTER, RIGHT

62. 62 Tables : TH (Table Heading) Attributes n ALIGN=LEFT, CENTER, RIGHT n VALIGN=TOP, MIDDLE, BOTTOM n ROWSPAN=1 n COLSPAN=1 n NOWRAP n BGCOLOR=“#0000FF”

63. 63 Tables : TD (Table Data) Attributes n ALIGN=LEFT, CENTER, RIGHT n VALIGN=TOP, MIDDLE, BOTTOM n ROWSPAN=1 n COLSPAN=1 n NOWRAP n BGCOLOR=“#0000FF”

64. 64 Working With Multiple Windows Deprecated Style n Special values for TARGET Attribute – TARGET=“_blank”  New window – TARGET=“_self”  This window – TARGET=“_parent”  Parent of _self – TARGET=“_top”  Whole Web browser

65. 65 Working With Multiple Windows <A HREF=“URL” TARGET=“window name”> URL on a SEPARATE Web browser window called window name

66. 66 Frames Using FRAMESET Tag Title Text

67. 67 Supporting Browsers Without Frames Title Text

68. 68 FRAMESET Attributes n COLS=“100” (number in pixels) n COLS=“33%” (percentage of the screen) n COLS=“*” (division of all remaining space) n ROWS=“100” (number in pixels) n ROWS=“33%” (percentage of the screen) n ROWS=“*” (division of all remaining space)

69. 69 FRAMESET Attributes n FRAMEBORDER=YES, NO n BORDERCOLOR=“#000000” n BORDER=0, 1, 2, 3, … (width in pixels)

70. 70 FRAME Attributes n SRC=“URL” n SCROLLING=AUTO, NO, YES n NORESIZE n FRAMEBORDER=YES, NO n BORDERCOLOR=“#000000” n MARGINHEIGHT=100 (in pixels) n MARGINWIDTH=100 (in pixels)

71. 71 Frame Example 1

72. 72 Frame Example 1 Deprecated Style

73. 73 Frame Example 2

74. 74 Frame Example 2 Deprecated Style

75. 75 Design Guideline 1 n DO – Learn from existing Web pages by viewing their sources n DON’T – Repeat mistakes of most Web sites such as missing links (i.e. files), pages “under construction”, improper HTML, etc.

76. 76 Design Guideline 2 n DO – Save HTML in files ending in the extension.html (or.htm if on a DOS-based system) n Filename.html n DON’T – Place HTML in files with other extensions n Filename.txt

77. 77 Design Guideline 3 n DO – Follow the format on “Basic Structure of an HTML Page” slide n DON’T – Leave out,,,,,,, or tags

78. 78 Design Guideline 4 n DO – All “document” content belongs in the BODY section – All style sheets go in the HEAD section

79. 79 Design Guideline 5 n DO – ALWAYS close “open” tags that have corresponding “close” tags n Some text n DON’T n Some text

80. 80 Design Guideline 6 n DO – ALWAYS close tags in the opposite order in which they are opened. n Some text n DON’T n Some text

81. 81 Design Guideline 7 n DO – Keep images and other downloaded components small in size and limited in number n DO – Limit even the text length of a single Web page to avoid overwhelming users

82. 82 Design Guideline 8 n DO – Limit the number of style changes such as color, font size, centering, and data content made in the Web page

83. 83 Design Guideline 9 n DO – Make the Web site / collection of Web documents relate in a logical fashion n Hierarchical n Linear n Non-linear, but centered around a small core set of “home”, “help”, etc. pages that exist as links from every single site – Minimize “click count” between any two pages

84. 84 Design Guideline 10 n DO – Expect the Web to advance incredibly fast, but realize that most users will not support cutting edge or non-standardized technology or language versions

85. 85 Future of HTML n World Wide Web Consortium (W3C) is currently re-mapping HTML into eXtensible Markup Language (XML) which is also a subset of SGML n XML is being brought into the OMG’s efforts on CORBA and UML n CORBA is evolving in tandem with Java, especially the Enterprise Java Beans component model

86. 86 Future of HTML n HTML 2.0  n HTML 3.2  n HTML 4.0  n HTML 4.01 (current bug fix)  n XHTML 1.0 (HTML mapped into XML)  n XHTML 1.1 (Simple event handling)  n XHTML 2.0 (June 2000 expected)

87. 87 Wrap-up n HTML is a markup language to describe the content, but not precisely the look of the page n HTML will only describe the layout of a page, while most Web pages will actually require functionality not provided by a markup language n HTML requires “true” languages such as Java, Perl, or C/C++ to process data

88. 88 What would an Advanced HTML / Web Course Entail? n “Outmoded technologies” – “Pure” HTML – Forms – CGI Programming – JavaScript (Renamed ECMA Script)

89. 89 What would an Advanced HTML /Web Course Entail? n “Current technologies” – Image maps (client and server side) – Applets – Java Servlets – Embedded technologies and “plug-ins” – Style Sheets – Dynamic HTML

90. 90 What would an Advanced HTML / Web Course Entail? n “Future Technologies” – Java Server Pages (JSP) versus Microsoft Application Server Pages (ASP) – XML – True distributed computing n Java and/or CORBA

91. 91 References n World Wide Web Consortium (HTML, XML, and ECMA Script) – http://www.w3.org/ n Sunsoft (Java) – http://www.javasoft.com/ n Microsoft (XML, ASP, and SOAP) – http://www.microsoft.com/ n Object Management Group (CORBA) – http://www.omg.org/ n Sam's Teach Yourself Web Publishing with HTML 4 in 21 days