HTML

1
HTML

• HyperText Markup Language
• HyperText
• text containing navigable links to other texts
• Markup Language
• a method of adding information to the text
  indicating the logical components of a document,
  or instructions for layout of the text on the
  page which can be interpreted by some automatic
  system

2
HTML Principles

• Platform, device, modality independence
• hard to achieve in reality
• different browser, different rendering
• Human-readable text format
• independence from an editing application
• Standard conformance and evolution

3
HTML Standard

• What tags exist?
• How are the tags to be interpreted?
• How are the tags related to each other?
• How should the client respond to user interaction
  with the page?
• Standard body is the World Wide Web Consortium
• www.w3c.org

4
Versions of the standard

• HTML 1.0
• 1993
• never fully standardized
• HTML 2.0
• 1994
• HTML 3.2
• 1996
• 3.0 never released
• added tables, applets, text flow
• HTML 4.0
• 1998
• XHTML 1.0
• current recommendation
• makes HTML conformant with XML

5
Browser Versions

• 27 available browser versions
• all support different combinations of HTML
  features
• Current leaders
• IE 6
• IE 5
• Netscape 6
• way behind
• Opera
• In this class
• We will concentrate on IE features
• Talk some about compatibility issues

6
Other rendering issues

• Users monitor
• size
• resolution
• color depth
• color temperature
• User preferences
• window size
• browser preference settings
• images off
• Browser capabilities
• format-specific plug-ins
• Java version

7
Tools

• Text/HTML editors
• editing HTML files
• WYSIWYG editors e.g., MS FrontPage
• Web client / browser
• viewing files
• IE 5 or 6
• Web server
• deliver the files to users
• students.depaul.edu

8
Process

• Write HTML file
• ASCII / text format
• extension .html or .htm
• Upload to server
• public_html directory
• Set permissions
• Similar with images
• .gif and .jpg formats

9
Terminology

• Document content
• the parts of the file that the user sees
• Tag
• HTML codes that control document appearance
• Attributes
• properties associated with a tag
• Entities
• specially-coded characters

10
Tag syntax

• Tags are case-insensitive
• but all lower case is recommended
• XHTML will require it
• Tags are enclosed in angle brackets
• lthtmlgt
• Tags typically come in pairs
• lttitlegt
• lt/titlegt
• Tags typically enclose document content
• ltpgtsome text... lt/pgt
• Tags can only be nested
• ltbgt ltigt some text... lt/igt lt/bgt legal
• ltbgt ltigt some text... lt/bgt lt/igt illegal

11
Attribute syntax

• Attributes are name / value pairs included in
  tags
• ltbody bgcolorblackgt
• Attributes never include document content
• may include formatting information
• color, size, etc.
• HTML attributes do not need to be quoted
• But XHTML will require it

12
Tag types

• Document tags
• identify the various parts of the document (Head,
  Body)
• Text structure tags
• determine the layout of the text (lists,
  paragraphs)
• Style tags
• tell the browser how to display the text
• Image tags
• to incorporate images
• Anchor tags
• to create hyperlinks

13
Document tags

• lthtmlgt lt/htmlgt Mark the beginning and end of
  the html file
• ltheadgt lt/headgt Text in this part of the
  document is not displayed in the browsers
  window. It includes other tags like lttitlegt and
  ltmetagt
• lttitlegt lt/titlegt Displayed in the browsers
  title bar. It is used as the default bookmark
  description.
• ltbodygt lt/bodygt The contents displayed in the
  browsers window.

14
The bare minimum
lthtmlgt ltheadgt lttitlegt HCI 201 The bare
minimum lt/titlegt lt/headgt ltbodygt Welcome to the
Bare Minimum Page for HCI 201! lt/bodygt lt/htmlgt

15
HTML Comments

• The comment feature provides you with a way to
  document your HTML files and make notes to
  yourself
• Basic form
• lt!-- This is a comment --gt
• Do not include any embedded HTML code in
  commented text because the results are
  unpredictable

16
Text structure tags

• Headings lthxgt lt/hxgt for 1 ? x ? 6The smaller
  x the larger the text
• Paragraph ltpgt lt/pgtA blank line is inserted
  before the paragraph.
• Line Break ltbrgt
• Ordered lists ltolgt lt/olgt
• Unordered lists ltulgt lt/ulgt

17
Spacing example
lthtmlgt ltheadgt lttitlegtSpacing examplelt/titlegt lt/he
adgt ltbodygt lth1gtImportant! (This is an
H1)lt/h1gt ltpgtNotice that we have some text in
this paragraph.lt/pgt lth3gtSpacing test (this is
an H3)lt/h3gt ltpgtHere I am spacing
things widely. It does not make a difference.
I just left two lines blank, but I am still
here! lt/pgt One lineltbrgt Second
lineltbrgt ltpgtAnother paragraph!lt/pgt lt/bodygt
lt/htmlgt
spacing-example.html
18
Character Entities
19
Unordered lists

• An unordered (or bullet) list uses the tag pair
  ltulgt lt/ulgt
• Each item in the list is preceded by a single
  list item tag ltligt
• It produces an indented list with a
  browser-supplied character in front of it (a
  small circle or a square)
• You can specify the type of symbol used by using
  the TYPE attribute

ltul typediscgt ltligtitem 1 lt/ligt ltligtitem 2
lt/ligt lt/ulgt
Other possible types aresquare or circle
20
Example
lthtmlgt ltheadgt lttitlegtlt/titlegt lt/headgt ltbodygt lth1
gtHere is an example of a listlt/h1gt ltulgt ltligtF
irst item lt/ligt ltligtSecond item
lt/ligt lt/ulgt ltul typesquaregt ltligtThird item
lt/ligt ltligtFourth item lt/ligt lt/ulgt lt/bodygt lt/ht
mlgt

• First item
• Second item

• Third item
• Fourth item

21
Ordered lists

• An ordered list uses the tag pair ltolgt lt/olgt
• Each item in the list is preceded by a single
  list item tag ltligt
• This also produces an indented list but the items
  are ordered.
• The default is to order by numbers (like this)

22
Example
lthtmlgt ltheadgt lttitlegt . lt/titlegt lt/headgt ltbodygt
lth1gtHere is an example of a ordered list
lt/h1gt ltolgt ltligtFirst item lt/ligt ltligtSecond
item lt/ligt lt/olgt lt/bodygt lt/htmlgt

• First item
• Second item

23
Nested lists

• Both ordered and unordered lists can be nested
• This is done by starting a new list before the
  current list has ended
• There is no limit to the number of levels of
  nesting
• Use indenting in the source code to distinguish
  between each level of nesting

24
Attributes for ordered lists

• TYPE can change the type of numbering used in
• a list.
• TYPE I Uppercase Roman numerals
• TYPE i Lowercase Roman numerals
• TYPE A Uppercase Latin letters
• TYPE a Lowercase Latin letters
• START can change where the lists begins the
• numbering.
• START 3 Starts from 3 instead of 1
• START b Starts from b instead of a

25
List example
lthtmlgt ltheadgtlttitlegtHTML List Examplelt/titlegtlt/hea
dgt ltbodygtlth1gtTo do listlt/h1gt ltol type A
gt ltligtPick up dry cleaning ltligtClean the
house ltulgt ltligtSweep the floors
lt/ligt ltligtTake out garbage lt/ligt
ltligtClean kitchen lt/ligt lt/ulgt ltligtStop by
post office ltulgt ltligtGet
stamps ltulgt ltligtOverseas airmail
lt/ligt ltligtDomestic lt/ligt lt/ulgt
ltligtMail package lt/ligt lt/ulgt lt/olgt
lt/bodygt lt/htmlgt
list-example.html
26
Other structure tags

• definition lists
• ltdlgt
• never really caught on
• blockquote
• ltblockquotegt
• Indents with using a list
• supposedly for extended quotations
• often used for spacing
• preformatted text
• ltpregtlt/pregt
• no HTML formatting performed

27
Style tags

• Tags that determine how text is to be rendered
• undermine the separation between content /
  display
• deprecated but widely used
• solution cascading style sheets

28
Display style tags

• specify text properties directly
• italic
• ltigt
• bold
• ltbgt
• font
• ltfontgt
• underlined
• ltugt
• bad idea
• center
• ltcentergt

29
Logical style tags

• describe text content
• browser chooses rendering
• Emphasis
• ltemgt
• usually italic
• Strong
• ltstronggt
• usually bold
• Code
• ltcodegt
• monospaced font
• Others

30
Style example

• lthtmlgt
• ltheadgtlttitlegtStyle examplelt/titlegtlt/headgt
• ltbodygt
• ltpgtltcentergt
• ltfont color"red"gtRed text, centeredlt/fontgt
• lt/centergtlt/pgt
• ltp align"center"gtltbgtBold text, centered
  alsolt/bgtlt/pgt
• ltpgtltfont color"blue" size"1"
  face"Arial,Helvetica,sans-serif"gt
• Blue text, larger, in a sans-serif font
• lt/fontgtlt/pgt
• ltpgtPreformatted Textlt/pgt
• ltpregtI can use space however I want
• X O X
• O X O
• X O O
• ltbgtltigtX Wins!lt/igtlt/bgt

style-example.html
31
Anchor tag (Hyperlinks)

• ltagt lt/agt Used to create hyperlinks to
• other documents in the same Web site
• to different locations in the same document.
• to external Web sites
• The attribute HREF indicates the destination of
  the link.
• lta href url" gt Clickable text lt/agt

32
Link to external Web pages

• lta href"http//www.cs.depaul.edu"gtCTI Web
  pagelt/agt
• To force a document to appear in a new window,
  use the target attribute
• lta href" http//www.cs.depaul.edu"
  target"new_window"gt CTI Web pagelt/agt

link-example.html
33
Relative URLs

• Full URL
• http//maya.cs.depaul.edu/classes/hci201/assign2.
  html
• Can be abbreviated in a link
• lta hrefassign2.html"gt
• The rest of the URL is filled in
• from the URL of the current page

34
Relative paths

• What if the destination is not in the same
  directory as the source
• We can use Unix path syntax for navigation
• Elements
• /
• go back up to the very top
• foo/
• go down to a child directory named "foo"
• ..
• go up to the parent directory

35
Relative paths
hci201 Directory
images directory
lta hrefhci201/hw2.htmlgt
Link main.html to hw2.html
lta href../main.htmlgt
lta href../images/hw/hw2.jpggt
Link hw2.html to hw2.jpg
36
Structure

• Your local directory structure
• where you are writing your web pages
• Must match the structure on the server
• contents of public_html directory
• Otherwise
• links will work when you test locally
• but not after being uploaded

37
Mailto hyperlinks
The anchor tag and the HREF attribute can be
used to reference the e-mail protocol. In
general this looks like lta href
mailtoe-mail address gtnamelt/agt Example To
make an appointment contact lta href
mailtomobasher_at_cs.depaul.edugtBamshad
Mobasherlt/Agt.
link-example2.html
38
Inserting a Graphic

• Images can be displayed in two ways as inline
  images or as external images.
• an inline image displays directly on the Web page
  and is displayed when the page is accessed by a
  user
• an inline image can be placed on a separate line
  in your HTML code, or it can be placed directly
  within a line of text
• inline images should be in one of several file
  formats.
• Most common
• GIF (Graphics Interchange Format)
• JPEG (Joint Photographic Experts Group)
• PNG (Portable Net Graphics)

39
Inserting a Graphic Continued

• an external image is not displayed with the Web
  page, the browser must have a file viewer, which
  is a separate program that the browser launches
  when it encounters an external image file
• external images are represented by an icon that a
  user clicks to view the image
• external images are only limited by applications
  available at the client

40
Image file formats

• GIF (Graphic Interchange Format)
• To display clip art containing lt 256 colors
• To create animated graphics
• To use transparent colors
• JPG (Joint Photographic Expert Group)
• To display photographs
• To use images containing gt256 colors
• To reduce the size of the image through file
  compression
• PNG (Portable Net Graphics)
• A replacement for GIF
• Compressed
• More color depth
• transparency

41
Image tag

• Inline image a picture file that is referenced
  in the HTML code and is loaded with the HTML
  file.
• ltimg src "photo.jpg"gt
• src attribute
• URL
• is usually relative
• If you want to retrieve an image from a different
  directory, you can add path information to the
  file name
• ltimg srcimages/photo.jpggt

42
More image tag attributes

• HEIGHT specifies the height of the image in
  pixels
• WIDTH specifies the width of the image in pixels
• BORDER determines the size of the border
• ALT specifies the text displayed on-screen when
  the image cannot be loaded
• ALIGN enables text to flow around the image at
  the TOP, MIDDLE, or BOTTOM of the image. Also
  used to flush the image to the RIGHT or LEFT of
  the screen

43
Flowing Text

• Use the align attribute to make text flow
  alongside an image
• ltimg srccat.jpg alignleftgt
• positions the image on the left side of the page
  and allows text to run down its right side
• To center an image, use
• ltp aligncentergtltimg srcgtlt/pgt

44

• Image example
• lthtmlgt
• ltheadgtlt/headgt
• ltbodygt
• lth1 align"center"gt Martin Luther King, Jr.
  lt/h1gt
• ltpgt ltimg src"mlk.gif" align"right width336
  height400gt
• I have a dream that one day this nation will rise
  up and live out the true meaning of its creed
  "We hold these truths to be self-evident that
  all men are created equal." I have a dream
  today. lt/pgt
• ltpgt I have a dream that one day the state of
  Alabama, whose governor's lips are presently
  dripping with the words of interposition and
  nullification, will be transformed into a ..lt/pgt
• lt/bodygt
• lt/htmlgt

image-example.html
45
Bandwidth

• Image files are larger text files
• Use more network resources (bandwidth)
• Users who access the Internet via telephone lines
  will have to wait for image files
• estimate 7K / sec or less
• Use image files no larger than 30-40KB
• especially on heavily used pages
• Use "alt" text to describe images
• for users with image loading turned off

46
Battling Bandwidth Limitations

• Always specify height and width attributes for
  all your images so the browser can work around
  each image while it is downloading.
• TIP To find an image dimension open it using a
  Web browser, then select Properties on the File
  Menu.
• Dont put large images at the top of a Web page
• Use interlaced GIFs and progressive JPGs.
• Several graphic programs save GIF or JPG files
  in convenient formats Paint Shop Pro PhotoShop,
  etc.
• Use thumbnails reduced versions of your image

47
Image links

• Anchors can be used to hyperlink images instead
  of text.
• lta hrefURLgtltimg srcphoto.jpg altMy
  photogtlt/agt
• Whenever the mouse enters the clickable region,
  it will display the contents of the ALT
  attribute.
• By default, clickable images have blue borders
• No blue border? Set the BORDER attribute inside
  the IMG tag to 0.
• lta hrefURLgtltimg srcphoto.jpg altMy photo
  border0gtlt/agt