HTML: Hypertext Markup Language

1
HTML Hypertext Markup Language

• Sources of information
• Main textbook pp. 223, 226-23, 563-566
• Lab text pp. 377-378
• Internet
• HTML home page
• http//www.w3.org/MarkUp/
• Getting started with HTML
• http//www.w3.org/MarkUp/Guide/
• HTML 4.01 specification
• http//www.w3.org/TR/html401/
• Cascading style sheets, level 2 (CCS2)
• http//www.w3.org/TR/1998/REC-CSS2-19980512/

2
HTML

• Markup languages
• Specify document page layout, format, font, size
  etc.
• These languages need specialized interpretation
  programs
• Other markup languages nroff, SGML (standardized
  general markup language), Tex
• Internet browsers serve in part to interpret data
• HTML is a type of data
• Amongst other types of data
• HTML is further specialized to deal with Internet
  links
• enables hypertext links and interactive documents
• Tag (keyword) based
• Formatting information
• Content information

3
HTML File Contents

• HTML files are text files
• Created with text editors, or saved from word
  processors as text files (also tools, see later)
• Tags
• Start with a lt and end with a gt
• E.g., ltcentergt
• Tags often are in pairs, ending with lt/ tag-name
  gt
• ltcentergt
• This text will be centered on the screen.
• lt/centergt
• Comments
• lt!-- This is a comment --gt
• Text default
• When no tags specify otherwise, text is just
  flowed into display area

4
Main HTML Tags

• Main tag for page
• lt!-- start of file --gt
• lthtmlgt
• Your HTML is contained between these
• lt/htmlgt
• lt!-- end of file --gt
• Title tag Title for the browser window
• lttitlegtMy first HTML documentlt/titlegt

5
Example

• lt!-- start of file --gt
• ltHTMLgt
• lttitlegtwww.cprince.com/courses/cs3121fall02/lectur
  es/media/first.htmllt/titlegt
• lt!-- multiple white spaces are ignored --gt
• ltcentergt
• Gfitzpa is the common great ape/human ancestor
• lt/centergt
• Some default text to be flowed into the display
  area. More default
• text to be flowed into the display area.
  Even
• more default text to be flowed into the display
  area. Still
• more default text to be flowed into the
  display area.
• lt/htmlgt lt!-- tag names are not case sensitive --gt
• lt!-- end of file --gt

www.cprince.com/courses/cs3121fall02/lectures/medi
a/first.html
6
Nested Tags

• Tags can often be nested
• ltpgt lt!-- start a paragraph --gt
• ltugt underline this lt/ugt
• lt/pgt

Example
lt!-- start of file --gt ltHTMLgt lttitlegtwww.cprince.c
om/courses/cs3121fall02/lectures/media/second.html
lt/titlegt ltpgt lt!-- start a paragraph --gt
ltugtunderline thislt/ugt ltbgtbold thislt/bgt ltbrgt
lt!-- start or 'break' a new line --gt ltigtitalics
on thislt/igt lt/pgt lt/htmlgt lt!-- end of file --gt
7
General Structure of HTML Files

• ltHTMLgt
• ltHEADgt
• ltTITLEgtMy first HTML documentlt/TITLEgt
• lt!-- the HEAD is an optional tag and is for info
  (content) that the browser does not display, such
  as
• title and keywords (useful for a search engine).
  --gt
• lt/HEADgt
• ltBODYgt
• Hello world!
• lt!-- the BODY tag is optional,
• and gives the HTML files content,
• to be rendered by the browser. --gt
• lt/BODYgt
• lt/HTMLgt

8
Other Types of Tags

• Internet link to a web page or media source
• More text formatting e.g., headings, colors
• Including local media images, sound
• Including Javascript, or Java applets
• Using frames
• Tables
• Specifying regions

9
Linking to Resources

• Basic hypertext construct link to another
  document
• ltagt tag anchor tag
• Attribute href can be used to give a web resource
  (URI)
• lt/agt required indicates the end of the text or
  other object which serves as the link
• ltlinkgt tags document relationships
• Specified in the HEAD of the HTML document

lt!-- start of file --gt lthtmlgtltheadgt lttitlegtwww.cpr
ince.com/courses/cs3121fall02/lectures/media/ahref
.htmllt/titlegt Here is a link to the lta
href"first.html"gtfirst examplelt/agt Here is a
URI link for the lta href "http//www.cprince.com/
courses/cs3121fall02/lectures/media/second.html"gt
second lt/agt example lt/htmlgt lt!-- end of file --gt
10
Headings

• lt!-- start of file --gt
• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121fall02/lectur
  es/media/third.htmllt/titlegt
• lth1gt An important heading lt/h1gt
• lth2gt A less important heading lt/h2gt
• lth3gt A less important heading lt/h3gt
• lth4gt A less important heading lt/h4gt
• lth5gt A less important heading lt/h5gt
• lth6gt A less important heading lt/h6gt
• lth7gt Only 6 levels of headings...
• lt/h7gt
• lth8gt The tags for these lines
• are ignored lt/h8gt
• lt/htmlgt
• lt!-- end of file --gt

www.cprince.com/courses/cs3121fall02/lectures/medi
a/third.html
11
Text Colors

• lt!-- start of file --gt
• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121fall02/lectur
  es/media/fourth.htmllt/titlegt
• This is in ltfont color"00FFFF" size7gt Aqua
  lt/fontgt
• ltbrgt
• This is in ltfont color"FF0000" size5gt Red
  lt/fontgt
• ltbrgt
• This is in ltfont color"00FF00" size6gt Lime
  lt/fontgt
• lt!-- font sizes range between 1 and 7 --gt
• lt/htmlgt
• lt!-- end of file --gt

www.cprince.com/courses/cs3121fall02/lectures/medi
a/fourth.html
12
A Few Colors
13
Deprecated Tags

• In the HTML specification, some tags or
  attributes are listed as deprecated
• This means there are better ways to do this now
• But, newer browsers still support old methods
• E.g., font tag and color/size attributes are
  deprecated
• The new method to specify these text properties
  is called Style Sheets

14
Style Sheets

• lt!-- start of file --gt
• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121fall02/lectur
  es/media/fifth.htmllt/titlegt
• ltheadgt
• ltlink href"special.css" rel"stylesheet"
  type"text/css"gt
• lt/headgt
• ltbodygt
• ltp class"special"gt This paragraph should have
  special blue text. lt/pgt
• lt!-- class name specifies style sheet --gt
• lt/bodygt
• lt/htmlgt
• lt!-- end of file --gt

lt!-- style sheet special.css --gt P.special
color blue border solid red
www.cprince.com/courses/cs3121fall02/lectures/medi
a/special.css
www.cprince.com/courses/cs3121fall02/lectures/medi
a/fifth.html
15
Style Sheets

• More portable reliable rendering of text
• Enable fonts to be specified in point sizes!
• Less variation from browser to browser
• More flexible system for rendering of text
• Styles given in external files, or internally to
  the HTML document in various ways
• Class names give a method of naming style
  information
• Style sheet documentation
• Cascading style sheets, level 2 (CCS2)
• http//www.w3.org/TR/1998/REC-CSS2-19980512/

16
STYLE Attribute Specifying Style Sheet Rules
Directly in a HTML File

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/style1
  .htmllt/titlegt
• ltp style "font-size 20 pt color fuchsia"gt
  don't misspell fuchia!! lt/pgt
• ltp style "font-size 30pt color blue"gt other
  color names work as well and the
• syntax for the style has some flexiblity with
  white space lt/pgt
• ltp style "font-size 40 pt color 00FFFF"gt
• The numeric RGB specifications also work (you
  don't need the quotes around them) lt/pgt
• lt/htmlgt

Font-size is a Style Sheet property
17
STYLE header tag
A STYLE header can give a default rendering for a
particular tag in the HTML file

• lthtmlgt
• ltheadgt
• lttitlegtwww.cprince.com/courses/cs3121/media/styl
  e2.htmllt/titlegt
• ltstyle type "text/css"gt
• P font-size 20 pt color fuchsia
• lt/stylegt
• lt/headgt
• ltbodygt
• ltpgt try out our new paragraph style lt/pgt
• ltpgt See, it works on a second lt/pgt
• ltpgt and third paragraph too lt/pgt
• ltp style "color aqua"gt but we can change
  things also notice that the font size is still
  20 here lt/pgt
• ltp style "font-size 50"gt and that we can also
  change the font size from the current default
  lt/pgt
• lt/bodygt
• lt/htmlgt

braces instead of quotes
tag name
18
Class Names Associating Styles With Specific Tags

• May want a particular style associated with a
  particular tag usage
• E.g., P.special (special blue text) format from
  previous examples
• Most HTML tags can be given these dot names, and
  a particular style associated with this tag
  this name
• The names are called class names
• Can then use a particular style with that tag
  name
• Useful if this is an tag/style combination we
  want to occur frequently

19
P Tag Using Class Name

• lthtmlgt
• ltheadgt
• lttitlegtwww.cprince.com/courses/cs3121/media/styl
  e2-b.htmllt/titlegt
• ltstyle type "text/css"gt
• lt!-- class names are defined in the STYLE
  header --gt
• lt!-- f20 class for ltpgt tag will be 20 point
  fuchsia color --gt
• P.f20 font-size 20 pt color fuchsia
• lt/stylegt
• lt/headgt
• ltbodygt
• ltp class"f20"gt try out our new paragraph style
  lt/pgt
• ltpgt Only works when we explicitly give class
  name lt/pgt
• lt/bodygt
• lt/htmlgt

Class name syntax tag name, then period, then
class name (no spaces)
Class is given as an attribute value
20
Special Blue Text Example Using Class Names

• lthtmlgt
• ltheadgt
• lttitlegtwww.cprince.com/courses/cs3121/media/fift
  h-b.htmllt/titlegt
• ltstyle type "text/css"gt
• lt!-- style information previously contained in
  file special.css --gt
• P.special color blue border solid red
  
• lt/stylegt
• lt/headgt
• ltbodygt
• ltp class"special"gt This paragraph should also
  have special blue text. lt/pgt
• lt/bodygt
• lt/htmlgt

21
SPAN Tag

• The span tag lets you apply some particular style
  to a sequence of items (e.g., text) in the HTML
  document
• Used in conjunction with class names
• Similar to using a class name with the P
  (paragraph) tag, but doesnt have any default
  formatting attributes of its own
• E.g., P tag causes a paragraph break, but SPAN
  tag doesnt cause a paragraph break

22
SPAN tag class names

• lthtmlgt
• ltheadgt
• lttitlegtwww.cprince.com/courses/cs3121/media/styl
  e3.htmllt/titlegt
• ltstyle type "text/css"gt
• SPAN.sc font-variant small-caps
• SPAN.sfont font-size 10 pt lt!-- syntax
  is really sensitive don't say "pts" --gt
• lt!-- Dreamweaver IE 6 don't give you errors
  with pts instead of pt --gt
• SPAN.lfont font-size 30 pt
• lt/stylegt
• lt/headgt
• ltbodygt
• ltpgt
• ltspan class"sc"gtThe firstlt/spangt few words of
  this paragraph are in 'small-caps'.
• lt/pgt
• ltpgt
• ltspan class"sfont"gt This is in 10 point font
  lt/spangt
• this is default size and
• ltspan class"lfont"gt this is in 30 pt font
  lt/spangt
• lt/pgt

23
OBJECT Tag

• Used for accessing
• Applets (e.g., Java)
• Images
• Other HTML documents

24
Images with the OBJECT Tag

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121fall02/lectur
  es/media/object-image.htmllt/titlegt
• ltOBJECT data"meowsie.jpg" type"image/jpg"gt
• lt/OBJECTgt lt!-- ending tag is required --gt
• ltOBJECT data"tiny_pw5.gif" type"image/gif"gt
• lt/OBJECTgt
• ltOBJECT data"tiny_pw5.gif"gt lt!-- type attribute
  is optional but advised --gt
• lt/OBJECTgt
• lt/htmlgt

Rendered using Netscape 7.0
25
Browser Differences

• Different browsers may have different behavior
  with the same HTML
• E.g., different display, different user
  interaction

Previous example rendered in two browsers
Netscape 7.0
Internet Explorer 6.0

• Why?
• Developing HTML standards
• Variations in implementations
• Versions of browsers

26
IMG Tags Also Can Display Images

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/img-im
  age.htmllt/titlegt
• ltIMG src"meowsie.jpg"gt
• ltIMG src"tiny_pw5.gif"gt
• lt/htmlgt

Netscape 7.0
Internet Explorer 6.0
27
OBJECT Tag Applets

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/object
  -java-applet.htmllt/titlegt
• ltOBJECT
• codebase"clock/classes"
• classid"javaJavaClock"
• width"150" height"150"gt
• lt/OBJECTgt
• lt/htmlgt

Netscape 7 (doesnt render in IE 6)
28
APPLET Tag Deprecated

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/applet
  -java-applet.htmllt/titlegt
• ltapplet
• codebase"clock/classes
• code"JavaClock.class" width"150" height"150"gt
• lt/appletgt
• lt/htmlgt

Renders in both IE 6 and Netscape 7
29
Use of Parameters to Applets (Similar with OBJECT
tag)

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/applet
  -java-applet-param.htmllt/titlegt
• ltapplet codebase"clock/classes"
  code"JavaClock.class" width"150" height"150"gt
• ltparam name"delay" value"100"gt
• ltparam name"link" value"http//java.sun.com/
  "gt
• ltparam name"border" value"5"gt
• ltparam name"nradius" value"80"gt
• ltparam name"cfont" value"TimesRomanBOLD18"gt
  
• ltparam name"bgcolor" value"ffffff"gt
• ltparam name"shcolor" value"ff0000"gt
• ltparam name"mhcolor" value"00ff00"gt
• ltparam name"hhcolor" value"0000ff"gt
• ltparam name"ccolor" value"dddddd"gt
• ltparam name"ncolor" value"000000"gt
• lt/appletgt

30
OBJECT Tag Applets Revisited

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/clock-
  ie2.htmllt/titlegt
• ltOBJECT
• codebase"clock/classes"
• code"JavaClock.class"
• width"150" height"150"gt
• lt/OBJECTgt
• lt/htmlgt

• lthtmlgt lt!-- example from before --gt
• lttitlegtwww.cprince.com/courses/cs3121/media/object
  -java-applet.htmllt/titlegt
• ltOBJECT
• codebase"clock/classes"
• classid"javaJavaClock"
• width"150" height"150"gt
• lt/OBJECTgt
• lt/htmlgt

Netscape 7
IE 6
31
OBJECT Tag Images in IE6
typeimage/jpeg for jpeg images in IE6

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/ie_gif
  .htmllt/titlegt
• lt!-- as in Netscape 7, type attribute is optional
  for IE6 --gt
• ltobject data"tiny_pw5.gif" type"image/gif"
• width137 height64 gt lt!-- must have width AND
  height or does not display in IE6 --gt
• lt/objectgt
• lt/htmlgt

IE 6
Netscape 7 (previous example)
IE 6 apparently always gives you scroll bars with
OBJECT tag (Netscape 7does not)
32
OBJECT tag AVI movies

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/avi_ie
  _version2.htmllt/titlegt
• lt!-- example in part from http//www.microsoft.co
  m/devonly/tech/amov1doc/amsdk032.htmhtml_00010403
  05020100 --gt
• lt!-- CLASSID this identifies the AVI activeX
  control --gt
• lt!-- autoplay true starts playing movie when
  page starts
• false user clicks to start playing movie --gt
• lt!-- controller true buttons to stop/start/pause
  movie
• false no buttons to control movie --gt
• ltOBJECT
• CLASSID"CLSID05589FA1-C356-11CE-BF01-00AA00555
  95A"gt
• ltPARAM NAME"FileName" VALUE"takeoff.avi"gt
• ltparam name"autoplay" value"false"gt
• ltparam name"controller" value"false"gt
• lt/OBJECTgt
• lt/htmlgt

IE6
33
OBJECT Tag and Quicktime Movies

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/mov_ie
  .htmllt/titlegt
• lt!-- based on example from http//www.creativecow.
  net/articles/hodgetts_philip/embedinc5/C5TEmbedQT_
  IE55win.htm --gt
• lt!-- CLASSID this identifies the Quicktime
  activeX control --gt
• lt!-- CODEBASE tells the browser where to find
  the ActiveX plug-in for downloading. --gt
• ltOBJECT
• CLASSID"clsid02BF25D5-8C17-4B23-BC80-D3488ABDDC
  6B"
• width"160" height"144"
• CODEBASE"http//www.apple.com/qtactivex/qtplugin
  .cab"gt
• ltparam name"src" value"takeoff.mov"gt
• lt/OBJECTgt
• lt/htmlgt

On my system, display of movie is jumpy
34
EMBED tag Adobe Acrobat (PDF) files

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/embed-
  pdf.htmllt/titlegt
• ltEMBED SRC"example.pdf" height100 width100gt
• lt/EMBEDgt
• lt/htmlgt

35
EMBED Tag AVI Movies

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/embed-
  avi.htmllt/titlegt
• ltEMBED SRC"takeoff.avi" height100 width100gt
• lt/EMBEDgt
• lt/htmlgt

Not standard HTML, but apparently supported in
both IE Netscape
36
EMBED Tag Quicktime Movies

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/embed-
  mov.htmllt/titlegt
• ltEMBED SRC"takeoff.mov" height100 width100gt
• lt/EMBEDgt
• lt/htmlgt

37
EMBED Tag WAV Sounds

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/embed-
  wav.htmllt/titlegt
• ltEMBED SRC"sneeze1.wav" height100 width100gt
• lt/EMBEDgt
• lt/htmlgt

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/embed-
  wav-hidden.htmllt/titlegt
• ltEMBED SRC"sneeze1.wav" hiddentruegt
• lt/EMBEDgt
• lt/htmlgt

38
BGSOUND Tag Playing a Background Sound in IE

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/backg
  round-wav.htmllt/titlegt
• ltheadgt
• lt!-- this only works in IE must be in HEAD --gt
• lt!-- loop attribute lets you specify how many
  times the sound plays
• -1 play until page unloads or browser stop
  button pressed --gt
• lt!-- volume attribute is between -10000 and 0
• with -10000 specifying no sound, and 0 as
  loudest --gt
• ltbgsound src"sneeze1.wav" loop-1 volume
  -2000gt
• lt/headgt
• ltbodygt
• Notice that no media player controls are
• shown with this tag.
• lt/bodygt
• lt/htmlgt

39
Buttons
Event

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/butto
  n.htmllt/titlegt
• ltbutton type"button" onClick"doScript()"gt
  click here lt/buttongt
• ltbutton type"button"gtltimg src "tiny_pw5.gif"
  width100gt lt/buttongt
• lt/htmlgt

Script
Events onfocus, onblur, onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup
40
MENUs SELECT/OPTION tags

• lthtmlgt
• lttitlegtwww.cprince.com/courses/cs3121/media/form.h
  tmllt/titlegt
• ltSELECT multiple size"4" name"component-select"gt
  
• ltOPTIONgtComponent_1lt/OPTIONgt
• ltOPTIONgtComponent_2lt/OPTIONgt
• ltOPTIONgtComponent_3lt/OPTIONgt
• ltOPTIONgtComponent_4lt/OPTIONgt
• ltOPTIONgtComponent_5lt/OPTIONgt
• ltOPTIONgtComponent_6lt/OPTIONgt
• ltOPTIONgtComponent_7lt/OPTIONgt
• lt/SELECTgt
• lt/htmlgt

Can have scripts associated with the menu
41
Issues

• Software engineering
• Not much support from browsers for debugging HTML
  code