1 HTML Hypertext Markup Language

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 Outline Day 1 n HTML Overview n Basic HTML – Text formatting – Lists – Hyperlinks – Images

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 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 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 Definition : Attributes n Parameters inside of tags that define values for a given tag

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

9 Basic Structure of an HTML Page Title goes here

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

11 Comments

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

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

14 Character Formatting : Base Font for Document

15 Character Formatting : Base Font for Document Deprecated Style

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

17 Character Formatting : Font Color Red Green Blue

18 Character Formatting : Emphasis (Usually Italic) Emphasized text

19 Character Formatting : Strong (Usually Bold) Strong text

20 Character Formatting : Code (Usually Courier) Code text

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

22 Character Formatting : Variable Variable text

23 Character Formatting : Sample Sample text

24 Character Formatting : Definition Definition of a term

25 Character Formatting : Citation Citation text

26 Character Formatting : Addresses John Doe

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 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 Line Break Deprecated style

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 Block Quote Four score and seven years ago…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

50 Links URL related text URLs can be any of the following: file://directory/file.txt gopher://hostname/directory/file news:site

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

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 Other Uses of the Link Tag n Audio files n Video files n Other multimedia files

54 Images Deprecated Style

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 Applets Using the APPLET Tag <APPLET CODE=“URL.class” WIDTH=200 HEIGHT=200>

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

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

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 Tables : CAPTION Attributes n ALIGN=TOP, BOTTOM

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

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 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 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 Working With Multiple Windows <A HREF=“URL” TARGET=“window name”> URL on a SEPARATE Web browser window called window name

66 Frames Using FRAMESET Tag Title Text

67 Supporting Browsers Without Frames Title Text

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 FRAMESET Attributes n FRAMEBORDER=YES, NO n BORDERCOLOR=“#000000” n BORDER=0, 1, 2, 3, … (width in pixels)

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 Frame Example 1

72 Frame Example 1 Deprecated Style

73 Frame Example 2

74 Frame Example 2 Deprecated Style

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 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 Design Guideline 3 n DO – Follow the format on “Basic Structure of an HTML Page” slide n DON’T – Leave out,,,,,,, or tags

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

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 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 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 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 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 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 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 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 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 What would an Advanced HTML / Web Course Entail? n “Outmoded technologies” – “Pure” HTML – Forms – CGI Programming – JavaScript (Renamed ECMA Script)

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 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 References n World Wide Web Consortium (HTML, XML, and ECMA Script) – n Sunsoft (Java) – n Microsoft (XML, ASP, and SOAP) – n Object Management Group (CORBA) – n Sam's Teach Yourself Web Publishing with HTML 4 in 21 days