HTML

1
HTML

• Hypertext Markup Language

2
Objectives

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

3
Outline Day 1

• HTML Overview
• Basic HTML
• Text formatting
• Lists
• Hyperlinks
• Images

4
Outline Day 2

• Advanced HTML
• Tables
• Frames
• Design Guidelines
• Future of HTML
• Wrap-up
• What an advanced HTML /Web course would entail

5
Definition HTML

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

6
Definition Tags

• Features or elements delineated inside of
  brackets (ltgt)
• 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

• Parameters inside of tags that define values for
  a given tag

8
Definition Events

• Actions that occur within a Web page that can be
  realized by an HTML document

9
Basic Structure of anHTML Page

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Title goes here lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

10
BODY Attributes

• BGCOLOR000000
• TEXT000000
• LINK000000
• VLINK000000
• ALINK000000
• BACKGROUNDURL of image

11
Comments

• lt!-- This is a comment --gt

12
Headers

• ltH1gt First-level heading lt/H1gt
• ltH2gt Second-level heading lt/H2gt
• ltH3gt Third-level heading lt/H3gt
• ltH4gt Fourth-level heading lt/H4gt
• ltH5gt Fifth-level heading lt/H5gt
• ltH6gt Sixth-level heading lt/H6gt

13
Character Formatting Fonts

• ltFONT SIZE1gt Tiny text lt/FONTgt
• ltFONT SIZE2gt Smaller text lt/FONTgt
• ltFONT SIZE3gt Small text lt/FONTgt
• ltFONT SIZE4gt Normal text lt/FONTgt
• ltFONT SIZE5gt Large text lt/FONTgt
• ltFONT SIZE6gt Big text lt/FONTgt
• ltFONT SIZE7gt Huge text lt/FONTgt

14
Character Formatting Base Font for Document

• ltBASEFONT SIZE1 /gt
• ltBASEFONT SIZE2 /gt
• ltBASEFONT SIZE3 /gt
• ltBASEFONT SIZE4 /gt
• ltBASEFONT SIZE5 /gt
• ltBASEFONT SIZE6 /gt
• ltBASEFONT SIZE7 /gt

15
Character Formatting Base Font for Document

• Deprecated Style
• ltBASEFONT SIZE1gt
• ltBASEFONT SIZE2gt
• ltBASEFONT SIZE3gt
• ltBASEFONT SIZE4gt
• ltBASEFONT SIZE5gt
• ltBASEFONT SIZE6gt
• ltBASEFONT SIZE7gt

16
Character Formatting Fonts

• ltFONT SIZE-3gt Tiny text lt/FONTgt
• ltFONT SIZE-2gt Smaller text lt/FONTgt
• ltFONT SIZE-1gt Small text lt/FONTgt
• ltFONT SIZE1gt Large text lt/FONTgt
• ltFONT SIZE2gt Big text lt/FONTgt
• ltFONT SIZE3gt Huge text lt/FONTgt

17
Character Formatting Font Color

• ltFONT COLORFF0000gt Red lt/FONTgt
• ltFONT COLOR00FF00gt Green lt/FONTgt
• ltFONT COLOR0000FFgt Blue lt/FONTgt

18
Character Formatting Emphasis (Usually Italic)

• ltEMgt Emphasized text lt/EMgt

19
Character Formatting Strong (Usually Bold)

• ltSTRONGgt Strong text lt/STRONGgt

20
Character Formatting Code (Usually Courier)

• ltCODEgt Code text lt/CODEgt

21
Character Formatting Keyboard (Usually Courier)

• ltKBDgt Text to be typed lt/KBDgt

22
Character Formatting Variable

• ltVARgt Variable text lt/VARgt

23
Character Formatting Sample

• ltSAMPgt Sample text lt/SAMPgt

24
Character Formatting Definition

• ltDFNgt Definition of a term lt/DFNgt

25
Character Formatting Citation

• ltCITEgt Citation text lt/CITEgt

26
Character Formatting Addresses

• ltADDRESSgt
• john.doe_at_email.com John Doe
• lt/ADDRESSgt

27
Character Formatting Deprecated Physical Tags

• ltBgt Bold text lt/Bgt
• ltIgt Italic text lt/Igt
• ltTTgt Typewriter text lt/TTgt
• ltUgt Underlined text lt/Ugt
• ltSgt Strike through text lt/Sgt
• ltBIGgt Bigger text lt/BIGgt
• ltSMALLgt Smaller text lt/SMALLgt
• ltSUBgt Subscript text lt/SUBgt
• ltSUPgt Superscript text lt/SUPgt

28
Horizontal Rule

• ltHR /gt
• Deprecated style
• ltHRgt
• HR Attributes
• SIZE10 (thickness in pixels)
• WIDTH100 (width in pixels)
• WIDTH50
• ALIGNLEFT, CENTER, RIGHT
• NOSHADE

29
Line Break

• ltBR /gt
• Deprecated style
• ltBRgt

30
Paragraphs

• ltPgt
• This is a paragraph. This can include any
  number of sentences. Yadda yadda ya.
• lt/Pgt
• Deprecated style
• ltPgt
• This is a paragraph. This can include any
  number of sentences. Yadda yadda ya.

31
Block Quote

• ltBLOCKQUOTEgt
• Four score and seven years ago
• lt/BLOCKQUOTEgt

32
Preformatted Text

• ltPREgt
• Whatever,
• However this text is displayed
• Just as it is here
• lt/PREgt

33
Divisions

• ltDIVgt
• lt/DIVgt
• DIV Attributes
• ALIGNLEFT, CENTER, RIGHT
• Note
• ltDIV ALIGNCENTERgt Whatever lt/DIVgt
• should be the same as
• ltCENTERgt Whatever lt/CENTERgt

34
Lists

• Ordered (Numbered) list
• Unordered list
• Menu list
• Directory list
• Definition (Glossary) list

35
Ordered (Numbered) List

• ltOLgt
• ltLI /gt Item 1
• ltLI /gt Item 2
• lt/OLgt
• Deprecated Style
• ltOLgt
• ltLIgt Item 1
• ltLIgt Item 2
• lt/OLgt

36
Ordered (Numbered) List Type Attribute

• ltOL TYPE1gt
• ltLI /gt Item 1
• ltLI /gt Item 2
• lt/OLgt
• Deprecated Style
• ltOL TYPE1gt
• ltLIgt Item 1
• ltLIgt Item 2
• lt/OLgt

37
Ordered (Numbered) List Type Attribute

• ltOL TYPE agt
• ltLI /gt Item a
• ltLI /gt Item b
• lt/OLgt
• Deprecated Style
• ltOL TYPEagt
• ltLIgt Item a
• ltLIgt Item b
• lt/OLgt

38
Ordered (Numbered) List Type Attribute

• ltOL TYPEAgt
• ltLI /gt Item A
• ltLI /gt Item B
• lt/OLgt
• Deprecated Style
• ltOL TYPEAgt
• ltLIgt Item A
• ltLIgt Item B
• lt/OLgt

39
Ordered (Numbered) List Type Attribute

• ltOL TYPEigt
• ltLI /gt Item i
• ltLI /gt Item ii
• lt/OLgt
• Deprecated Style
• ltOL TYPEigt
• ltLIgt Item i
• ltLIgt Item ii
• lt/OLgt

40
Ordered (Numbered) List Type Attribute

• ltOL TYPEIgt
• ltLI /gt Item I
• ltLI /gt Item II
• lt/OLgt
• Deprecated Style
• ltOL TYPEIgt
• ltLIgt Item I
• ltLIgt Item II
• lt/OLgt

41
Ordered (Numbered) List Start Attribute

• ltOL START10gt
• ltLI /gt Item 10
• ltLI /gt Item 11
• lt/OLgt
• Deprecated Style
• ltOL START10gt
• ltLIgt Item 10
• ltLIgt Item 11
• lt/OLgt

42
Ordered (Numbered) List Type and Start
Attributes

• ltOL TYPEI START5gt
• ltLI /gt Item V
• ltLI /gt Item VI
• lt/OLgt
• Deprecated Style
• ltOL TYPEI START5gt
• ltLIgt Item V
• ltLIgt Item VI
• lt/OLgt

43
Unordered List

• ltULgt
• ltLI /gt First Item
• ltLI /gt Second Item
• lt/ULgt
• Deprecated Style
• ltULgt
• ltLIgt First Item
• ltLIgt Second Item
• lt/ULgt

44
Unordered List Type Attribute

• ltUL TYPEdiskgt
• ltLI /gt First Disk Item
• ltLI /gt Second Disk Item
• lt/ULgt
• Deprecated Style
• ltUL TYPEdiskgt
• ltLIgt First Disk Item
• ltLIgt Second Disk Item
• lt/ULgt

45
Unordered List Type Attribute

• ltUL TYPEsquaregt
• ltLI /gt First Square Item
• ltLI /gt Second Square Item
• lt/ULgt
• Deprecated Style
• ltUL TYPEsquaregt
• ltLIgt First Square Item
• ltLIgt Second Square Item
• lt/ULgt

46
Unordered List Type Attribute

• ltUL TYPEcirclegt
• ltLI /gt First Circle Item
• ltLI /gt Second Circle Item
• lt/ULgt
• Deprecated Style
• ltUL TYPEcirclegt
• ltLIgt First Circle Item
• ltLIgt Second Circle Item
• lt/ULgt

47
Menu List

• ltMENUgt
• ltLI /gt Menu Item 1
• ltLI /gt Menu Item 2
• lt/MENUgt
• Deprecated Style
• ltMENUgt
• ltLIgt Menu Item 1
• ltLIgt Menu Item 2
• lt/MENUgt

48
Directory List

• ltDIRgt
• ltLI /gt Directory Item 1
• ltLI /gt Directory Item 2
• lt/DIRgt
• Deprecated Style
• ltDIRgt
• ltLIgt Directory Item 1
• ltLIgt Directory Item 2
• lt/DIRgt

49
Definition (Glossary) List

• ltDLgt
• ltDT /gt Term 1 ltDD /gt Definition 1
• ltDT /gt Term 2 ltDD /gt Definition 2
• lt/DLgt
• Deprecated Style
• ltDLgt
• ltDTgt Term 1 ltDDgt Definition 1
• ltDTgt Term 2 ltDDgt Definition 2
• lt/DLgt

50
Links

• ltA HREFURLgt URL related text lt/Agt
• ltA HREFURLgt ltIMG SRCURL2 /gt lt/Agt
• URLs can be any of the following
• http//hostnameport/directory/filename.html
• ftp//usernamepassword_at_ftp.site.com/directory/fil
  e
• file//directory/file.txt
• mailto//joe.doe_at_email.com
• gopher//hostname/directory/file
• newssite

51
Links Note

• Replace in a pathname with a
• DO
• ltA HREFc\X\Y.htmlgt Definition lt/Agt
• DONT
• ltA HREFc\X\Y.htmlgt Definition lt/Agt

52
Links Internal to a Document

• A named point in a document
• ltA NAMEnameValuegt lt/Agt
• Linking to point in the same document
• ltA HREFnameValuegt name lt/Agt
• Linking to point from another document
• ltA HREFURLnameValuegt name lt/Agt

53
Other Uses of the Link Tag

• Audio files
• Video files
• Other multimedia files

54
Images

• ltIMG SRCfilename /gt
• Deprecated Style
• ltIMG SRCfilenamegt

55
Images IMG Attributes

• ALTText if image cant be shown
• ALIGNTOP, MIDDLE, BOTTOM
• ALIGNLEFT, RIGHT (word wrapping margin)
• CLEARLEFT, RIGHT, ALL (remove margin)
• HEIGHT200 (in pixels)
• WIDTH200 (in pixels)
• VSPACE20 (in pixels)
• HSPACE20 (in pixels)
• BORDER5 (in pixels)

56
Applets Using the APPLET Tag

• ltAPPLET
• CODEURL.class
• WIDTH200
• HEIGHT200gt
• ltPARAM NAMEParam1 VALUE1 /gt
• ltPARAM NAMEParam2 VALUExyz /gt
• lt/APPLETgt

57
Applets Using the APPLET Tag

• Deprecated Style
• ltAPPLET
• CODEURL.class
• WIDTH200
• HEIGHT200gt
• ltPARAM NAMEParam1 VALUE1gt
• ltPARAM NAMEParam2 VALUExyzgt
• lt/APPLETgt

58
Tables

• ltTABLE BORDERgt
• ltCAPTIONgt Title for the Table lt/CAPTIONgt
• ltTRgt
• ltTHgt Column 1 lt/THgt ltTHgt Column 2 lt/THgt
• lt/TRgt
• ltTRgt
• ltTDgt Data 1 lt/TDgt ltTDgt Data 2 lt/TDgt
• lt/TRgt
• lt/TABLEgt

59
Tables TABLE Attributes

• BORDER or BORDER0, 1, 2, 3,
• ALIGNLEFT, CENTER, RIGHT
• WIDTH0, 100
• CELLSPACING0, 1, 2, 3,
• CELLPADDING0, 1, 2, 3,

60
Tables CAPTION Attributes

• ALIGNTOP, BOTTOM

61
Tables TR (Table Row) Attributes

• ALIGNLEFT, CENTER, RIGHT

62
Tables TH (Table Heading) Attributes

• ALIGNLEFT, CENTER, RIGHT
• VALIGNTOP, MIDDLE, BOTTOM
• ROWSPAN1
• COLSPAN1
• NOWRAP
• BGCOLOR0000FF

63
Tables TD (Table Data) Attributes

• ALIGNLEFT, CENTER, RIGHT
• VALIGNTOP, MIDDLE, BOTTOM
• ROWSPAN1
• COLSPAN1
• NOWRAP
• BGCOLOR0000FF

64
Working With Multiple Windows

• ltBASE TARGETwindow name /gt
• Deprecated Style
• ltBASE TARGETwindow namegt
• 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

• ltA HREFURL
• TARGETwindow namegt
• URL on a SEPARATE Web browser window called
  window name
• lt/Agt

66
Frames Using FRAMESET Tag

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Title Text lt/TITLEgt
• lt/HEADgt
• ltFRAMESETgt
• lt/FRAMESETgt
• lt/HTMLgt

67
Supporting Browsers Without Frames

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Title Text lt/TITLEgt
• lt/HEADgt
• ltFRAMESETgt
• lt/FRAMESETgt
• ltNOFRAMESgt
• lt/NOFRAMESgt
• lt/HTMLgt

68
FRAMESET Attributes

• COLS100 (number in pixels)
• COLS33 (percentage of the screen)
• COLS (division of all remaining space)
• ROWS100 (number in pixels)
• ROWS33 (percentage of the screen)
• ROWS (division of all remaining space)

69
FRAMESET Attributes

• FRAMEBORDERYES, NO
• BORDERCOLOR000000
• BORDER0, 1, 2, 3, (width in pixels)

70
FRAME Attributes

• SRCURL
• SCROLLINGAUTO, NO, YES
• NORESIZE
• FRAMEBORDERYES, NO
• BORDERCOLOR000000
• MARGINHEIGHT100 (in pixels)
• MARGINWIDTH100 (in pixels)

71
Frame Example 1

• ltFRAMESET ROWS100, 33, gt
• ltFRAME SRCURL1 /gt
• ltFRAME SRCURL2 /gt
• ltFRAME SRCURL3 /gt
• lt/FRAMESETgt

72
Frame Example 1

• Deprecated Style
• ltFRAMESET ROWS100, 33, gt
• ltFRAME SRCURL1gt
• ltFRAME SRCURL2gt
• ltFRAME SRCURL3gt
• lt/FRAMESETgt

73
Frame Example 2

• ltFRAMESET ROWS, 80gt
• ltFRAMESET COLS30, gt
• ltFRAME SRCURL Table of Contents /gt
• ltFRAME SRCURL Body /gt
• lt/FRAMESETgt
• ltFRAME SRCURL Footer /gt
• lt/FRAMESETgt

74
Frame Example 2

• Deprecated Style
• ltFRAMESET ROWS, 80gt
• ltFRAMESET COLS30, gt
• ltFRAME SRCURL Table of Contentsgt
• ltFRAME SRCURL Bodygt
• lt/FRAMESETgt
• ltFRAME SRCURL Footergt
• lt/FRAMESETgt

75
Design Guideline 1

• DO
• Learn from existing Web pages by viewing their
  sources
• DONT
• Repeat mistakes of most Web sites such as missing
  links (i.e. files), pages under construction,
  improper HTML, etc.

76
Design Guideline 2

• DO
• Save HTML in files ending in the extension .html
  (or .htm if on a DOS-based system)
• Filename.html
• DONT
• Place HTML in files with other extensions
• Filename.txt

77
Design Guideline 3

• DO
• Follow the format on Basic Structure of an HTML
  Page slide
• DONT
• Leave out ltHTMLgt , ltHEADgt , ltTITLEgt , lt/TITLEgt ,
  lt/HEADgt , ltBODYgt , lt/BODYgt , or lt/HTMLgt tags

78
Design Guideline 4

• DO
• All document content belongs in the BODY
  section
• All style sheets go in the HEAD section

79
Design Guideline 5

• DO
• ALWAYS close open tags that have corresponding
  close tags
• ltH1gt Some text lt/H1gt
• DONT
• ltH1gt Some text

80
Design Guideline 6

• DO
• ALWAYS close tags in the opposite order in which
  they are opened.
• ltPgt ltH1gt Some text lt/H1gt lt/Pgt
• DONT
• ltPgt ltH1gt Some text lt/Pgt lt/H1gt

81
Design Guideline 7

• DO
• Keep images and other downloaded components small
  in size and limited in number
• DO
• Limit even the text length of a single Web page
  to avoid overwhelming users

82
Design Guideline 8

• 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

• DO
• Make the Web site / collection of Web documents
  relate in a logical fashion
• Hierarchical
• Linear
• 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

• 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

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

86
Future of HTML

• HTML 2.0 ?
• HTML 3.2 ?
• HTML 4.0 ?
• HTML 4.01 (current bug fix) ?
• XHTML 1.0 (HTML mapped into XML) ?
• XHTML 1.1 (Simple event handling) ?
• XHTML 2.0 (June 2000 expected)

87
Wrap-up

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

88
What would an Advanced HTML / Web Course Entail?

• Outmoded technologies
• Pure HTML
• Forms
• CGI Programming
• JavaScript (Renamed ECMA Script)

89
What would an Advanced HTML /Web Course Entail?

• 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?

• Future Technologies
• Java Server Pages (JSP) versus Microsoft
  Application Server Pages (ASP)
• XML
• True distributed computing
• Java and/or CORBA

91
References

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