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
HTML versus XHTML

• HTML (Hypertext Markup Language) is the markup
  language used to create web pages. An HTML
  document is read by a web browser, which displays
  the web page. The most recent version of HTML is
  4.01.
• XHTML (Extensible Hypertext Markup Language) is a
  stricter, cleaner version of HTML intended for
  use with automated document processing systems.
  XHTML is combination of HTML and XML (Extensible
  Markup Language), which is a more general markup
  language than HTML.

6
Browser Versions

• Many different browser versions
• all support different combinations of HTML
  features
• Current leaders
• Firefox
• IE 7 and IE 8
• Netscape
• way behind
• Opera
• Safari

7
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

8
Tools

• Text editor
• editing HTML files
• (no WYSIWYG editors, please)
• Web client / browser
• viewing files
• IE, Firefox, Safari, etc.
• Web server
• deliver the files to users
• students.depaul.edu

9
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

10
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

11
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

12
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

13
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

14
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.

15
The bare minimum
lthtmlgt ltheadgt lttitlegt IT 130 The bare
minimum lt/titlegt lt/headgt ltbodygt Welcome to the
Bare Minimum Page for IT 130! lt/bodygt lt/htmlgt
16
HTML Comments

• The comment feature provides you with a way to
  document your HTML files and make notes to
  yourself or anyone who reads your file. However,
  these do not show up in the displayed web page.
• Basic comment examples
• lt!-- This is a comment --gt
• lt!---------
• You can write as much as you like in a comment
  and they can span multiple lines
• --------------gt

17
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

18
The Heading tag

• An example of a structure tag
• Headings lth1gt lt/h1gt ? boldest and largest
• lth2gt lt/h2gt
• lth3gt lt/h3gt
• lth4gt lt/h4gt
• lth5gt lt/h5gt
• lth6gt . lt/h6gt ? lightest and smallest

19
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
20
Character Entities
Code name Code Symbol
lt 60 lt
gt 62 gt
amp 38
copy 169
reg 174
nbsp 160 Non-breaking space
64 _at_
183 ?
21
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
22
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

23
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)

24
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

1. First item
2. Second item

25
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

26
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

27
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
28
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

29
Logical style tags

• Logical style tags describe the text content and
  let the browser choose the rendering. These are
  good tags.
• Emphasis
• ltemgt lt/emgt
• usually rendered as italic
• Strong
• ltstronggt lt/stronggt
• usually rendered as bold
• Code
• ltcodegt lt/codegt
• monospaced font
• Others

30
Display style tags

• Display style tags that specify the rendering
  directly. These are bad (deprecated) tags.
• Italic
• ltigt lt/igt
• Bold
• ltbgt lt/bgt
• Font
• ltfontgt lt/fontgt
• Center
• ltcentergt lt/centergt
• Underlined
• ltugt lt/ugt
• Just because tags work, doesnt mean that its
  okay to use them. Certain tags have been
  deprecated which means that they are being phased
  out of the HTML standard. Later on in the course
  when we learn about CSS, we will stop using
  deprecated tags.

31
Which tags to use

• An HTML tag or attribute is said to be deprecated
  if it is the current version of HTML but will be
  eliminated from future versions of HTML.
• There are numerous deprecated out there. So
  though they are still technically part of HTML,
  their use is discouraged when writing new web
  pages. In this course we are going to avoid
  using depracated tags whenever possible.
• The BEST way to find out which tag to use is via
  a reliable reference. A great way to start is at
  http//www.w3schools.com (Bookmark this web
  page on your computer).

32
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
33
Horizontal line

• The tag for creating a horizontal line is lthr /gt.
• You can use horizontal lines to improve the
  appearance of your web page and to delineate
  sections.
• There are several available attributes most of
  which are deprecated. However, well make use of
  them until we learn to get around them using CSS.
• W3 Schools on the lthrgt tag

34
Horizontal line

• Older (deprecated) attributes include
• align specifies the lines horizontal alignment
  on the page (center, left, or right)
• size specifies the lines height in pixels or
  percentage of the screen width
• width indicates the lines width in either pixels
  or percentage of the screen width
• color indicates the lines color
• noshade specifies that the browser display a
  solid line

35
Horizontal line styles - DEPRECATED
lthr aligncenter size12 width100 /gt
size12 width100
lthr aligncenter size6 width50 /gt
size6 width50
lthr aligncenter size3 width25 /gt
size3 width25
lthr aligncenter size1 width10 /gt
size1 width10
Because these attributes are deprected, you
should not use them. I am showing you this slide
only to give you a sense of the kinds of visual
effects that can be achieved. You will see that
the same effects can be achieved using CSS.
36
Quick review of end tags

• In old HTML, lthrgt was the tag for horizontal
  lines. No closing tag was needed.
• In XHTML, lthrgt must be written with its closing
  tag lt/hrgt. But no one wants to write two tags
  instead of one tag.
• In XHTML, lthr /gt is the shorthand version of
  lthrgtlt/hrgt.
• Similarly, ltbr /gt is the shorthand version of
  ltbrgtlt/brgt.

37
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

38
Link to external Web pages

• lta href"http//www.cdm.depaul.edu"gtCDM Web
  Sitelt/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 CDM Web Site lt/agt

link-example.html
39
Relative URLs

• Full URL
• http//maya.cs.depaul.edu/classes/it130/assign2.h
  tml
• 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

40
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

41
Relative paths
it130 Directory
images directory
lta hrefit130/hw2.htmlgt
Link main.html to hw2.html
lta href../main.htmlgt
lta href../images/hw/hw2.jpggt
Link hw2.html to hw2.jpg
42
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

43
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
44
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)

45
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

46
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

47
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

48
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

49
Alignment of images DEPRECATED in favor of CSS

• To insert an image
• ltimg src"myImage.gif" /gt
• To right-align an image
• ltimg src"myImage.gif" align"right" /gt
• Note The align attribute is deprecated.
• To left-align an image
• ltimg src"myImage.gif" align"left" /gt
• Again, we will NOT be using the align attribute
  as this has been deprecated in favor of CSS.

50
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

51

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

53
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.
• Use thumbnails reduced versions of your image

54
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.

55
Image borders sneak peak of CSS

• By default, clickable images have blue borders.
  The most common but now deprecated way to remove
  the border, is to set the border attribute inside
  the img tag to 0.
• ltimg srcphoto.jpg alt"Pic" border "0"/gt
  ? Deprecated.
• Here is the proper way to do it, using CSS
• ltimg src"photo.jpg" alt"Pic"
  style"border-stylehidden" /gt
• ? this is an example of an inline CSS style