Lecture 4: HTML

1
Lecture 4 HTML

• Web Page Authoring
• The concept of markup language
• Introduction to HTML (HyperText Markup Language)
• List
• Tagging
• Table
• Frame
• image map
• Form

2
1. The Concept of Markup Language

• Markup language
• originates from the book publishing industry.
• allows us to embed formatting instructions in the
  document.
• HTML HyperText Markup Language
• A universal publishing language of the World Wide
  Web
• Additional supports in HTML 4
• more multimedia options
• scripting languages
• style sheets
• more accessible to users with disabilities.

3
1. HTML

• Structure of an HTML document
• Head contains the title of the page and other
  parameters that the browser will use.
• Body the actual contents of a page which
  includes the text and the tags.
• The text is the actual information contained in a
  page.
• The tags define the appearance of the document
• Both the text and tags use only ASCII characters.

4
2. HTML

• Basic HTML document

ltHTMLgt ltHEADgt ltTITLEgt First Sample
Document lt/TITLEgt lt/HEADgt ltBODYgt The
body of the first sample document
.. lt/BODYgt lt/HTMLgt
5
2. HTML

• HTML tag
• contained in pairs of angle brackets
• e.g. ltHTMLgtlt/HTMLgt
• usually comes in pairs
• not case sensitive
• can have a list of attributes with the format

6
2. HTML

• HTML4 defines a total of 91 possible tags, each
  with anywhere from 2 to 25 possible attributes.
• List of all HTML4 tags and its attributes
• http//wdvl.com/Authoring/HTML/4/Tags/
• Common tags
• ltBgt tag is replaced by ltSTRONGgt
• ltIgt tag is replaced by ltEMgt
• ltFONTgt formats the size and color of text.

7
2. HTML
8
2.1 HTML Unordered Lists
ltulgt ltligtLinkslt/ligt ltligtKeeping in touch
with old friendslt/ligt ltligtIt is the technology
of the future!lt/ligt lt/ulgt

• Links
• Keeping in touch with old friends
• It is the technology of the future!

9
2.1 HTML Ordered Lists
New applications ltol type "I"gt ltligtFor
businesslt/ligt ltligtFor pleasurelt/ligt lt/olgt
New applications I.For business
II.For pleasure
Programming ltol type "a"gt ltligtXMLlt/ligt
ltligtJavalt/ligt ltligtXHTMLlt/ligt
ltligtScriptslt/ligt ltligtNew languageslt/ligt
lt/olgt
Programming a.XML b.Java
c.XHTML d.Scripts
e.New languages
10
2.1 HTML Ordered Lists
lt!-- ol elements without a type attribute
--gt lt!-- have a numeric sequence type (i.e., 1,
2, ...) --gt ltolgt ltligtHarvey Deitellt/ligt
ltligtBill Gateslt/ligt ltligtMichael
Delllt/ligt lt/olgt
1.Harvey Deitel 2.Bill Gates 3.Michael Dell
11
2.1 HTML Nested Lists
ltulgt ltligtNew gameslt/ligt ltligt
New applications lt!-- ordered nested
list --gt ltol type "I"gt
ltligtFor businesslt/ligt ltligtFor
pleasurelt/ligt lt/olgt lt/ligt lt/ulgt
lt!-- ends the nested listgt
New games New applications I.For
business II.For pleasure
12
2.2 HTMLTagging

• Tagging specify more than just formatting, but
  can also be used to
• create hypertext links, e.g. ltA HREFgt tag.
• assign named anchors to subsections that other
  document can point at, e.g. ltA NAMEgt tag.
• mark specific parts of a document to be executed
  by external programs - plug-ins
• e.g. ltIMGgt tag the image files to be viewed by
  external image viewer
• e.g. ltAPPLETgt tag show that the contents are
  executable binary code or bytecode
• give information about a document
• e.g. to identify the author and version, e.g.
  ltADDRESSgt tag.
• interact with search engine, e.g. ltMETAgt tag.

13
2.2 HTMLTagging

• META tag
• Not visible to users of the site
• Should be placed inside header section
• Contain two attributes that should always be
  used
• NAME identifies type of META tag
• CONTENT provides info the search engine will
  catalog about your site
• e.g. CONTENT of a META tag with NAME keywords
• Provides search engines with a list of words that
  describe key aspects of your site
• Eg, ltMETA NAME"keywords" CONTENT"index,
  stanford,
• Stanford, stanford websites, stanford web,
  stanford
• home page, university, college"gt
• e.g. CONTENT of a META tag with NAME
  description
• Should be 3 to 4 lines
• Used by search engines to catalog and display
  your site
• ltMETA NAME"description" CONTENT"The Stanford
  University home page is a good place to start
  your search of Stanford University's web
  resources and websites."gt

14
2.3 HTML Samples Tables

• Tables
• Organize data into rows and columns
• All tags and text that apply to the table go
  inside ltTABLEgtlt/TABLEgt tags
• TABLE elements
• TABLE attributes
• BORDER lets you set the width of the tables
  border in pixels
• ALIGN left, right or center
• WIDTH pixels (absolute) or a percentage
• CAPTION element is inserted directly above the
  table in the browser window

• THEAD element
• Header info
• For example, titles of table and column headers
• TR element
• Table row element used for formatting the cells
  of individual rows
• TBODY element
• Used for formatting and grouping purposes
• Smallest area of the table to format is data
  cells
• Two types of data cells
• In the header ltTHgtlt/THgt suitable for titles and
  column headings
• In the table body ltTDgtlt/TDgt
• Aligned left by default

15
2.3 HTML Samples Tables
16
2.3 HTML Samples Tables
lttable border "1" width "40"
summary "This table provides information about
the price of fruit"gt lt!-- the
ltcaptiongt tag summarizes the table's --gt
lt!-- contents (this helps the visually
impaired) --gt ltcaptiongtltstronggtPrice of
Fruitlt/stronggtlt/captiongt lt!-- the
lttheadgt is the first section of a table --gt
lt!-- it formats the table header area
--gt lttheadgt lttrgt
lt!-- lttrgt inserts a table row --gt
ltthgtFruitlt/thgt lt!-- insert a heading cell --gt
ltthgtPricelt/thgt lt/trgt
lt/theadgt
17
2.3 HTML Samples Tables
lt!-- all table content is enclosed --gt
lt!-- within the lttbodygt --gt
lttbodygt lttrgt
lttdgtApplelt/tdgt lt!-- insert a data cell --gt
lttdgt0.25lt/tdgt lt/trgt
lttrgt lttdgtOrangelt/tdgt
lttdgt0.50lt/tdgt lt/trgt
lttrgt lttdgtBananalt/tdgt
lttdgt1.00lt/tdgt lt/trgt
lttrgt lttdgtPineapplelt/tdgt
lttdgt2.00lt/tdgt lt/trgt
lt/tbodygt
18
2.3 HTML Samples Tables
lt!-- the lttfootgt is the last section of
a table --gt lt!-- it formats the table
footer --gt lttfootgt
lttrgt ltthgtTotallt/thgt
ltthgt3.75lt/thgt lt/trgt
lt/tfootgt
19
2.4 HTML Samples Frame Set

• Frames
• Display more than one HTML file at a time
• If used properly, frames make your site more
  readable and usable
• ltFRAMESETgt tags
• Tell the browser the page contains frames
• Frame details contained inside ltFRAMESETgtlt/FRAMES
  ETgt tags
• COLS or ROWS attribute gives the width or height
  of each frame
• In pixels or a percentage

• Not all browsers support frames
• Use the NOFRAMES element inside the FRAMESET
• Direct users to a non-framed version
• Provide links for downloading a frames-enabled
  browser
• Use of frames
• Do not use frames if you can accomplish same with
  tables or other, simpler HTML formatting

20
2.4 HTML Samples Frame Set

• FRAME elements
• Specify what files will make up frameset
• FRAME attributes
• NAME - identifies specific frame, enabling
  hyperlinks to load in their intended frame
• SCROLLING attribute
• Set to no to prevent scroll bars
• NORESIZE attribute prevents user from resizing
  the frame

• SRC
• Gives the URL of the page that will be displayed
  in the specified frame
• TARGET attribute of A element
• Ex. ltA HREF links.html TARGET maingt
• TARGET _blank loads page in a new blank
  browser window
• TARGET _self loads page in the same window as
  anchor element
• TARGET _parent loads page in the parent
  FRAMESET
• TARGET _top loads page in the full browser
  window

21
2.4 HTML Samples Frame Set
22
2.4 HTML Samples Frame Set
ltframeset cols "110,"gt lt!-- frame
elements specify which pages --gt lt!-- are
loaded into a given frame --gt ltframe
name "leftframe" src "nav.html" /gt
ltframe name "main" src "main.html" /gt
ltnoframesgt ltpgtThis page uses frames, but
your browser does not support
them.lt/pgt ltpgtPlease, lta href
"nav.html"gtfollow this link to browse
our site without frameslt/agt.lt/pgt
lt/noframesgt lt/framesetgt
23
2.4 HTML Samples Main
lth1gtWelcome to Our Web Site!lt/h1gt
ltpgtWe have designed this site to teach about the
wonders of ltstronggtltemgtXHTMLlt/emgtlt/stronggt.
ltemgtXHTMLlt/emgt is better equipped than
ltemgtHTMLlt/emgt to represent complex data on
the Internet. ltemgtXHTMLlt/emgt takes advantage of
XMLs strict syntax to ensure
well-formedness. Soon you will know about
many of the great new features of
ltemgtXHTML.lt/emgtlt/pgt ltpgtHave Fun With the
Site!lt/pgt
24
2.4 HTML Samples Navigation
ltpgt lta href "links.html" target
"main"gt ltimg src "buttons/links.jpg"
width "65" height "50" alt
"Links Page" /gt lt/agtltbr /gt lta
href "list.html" target "main"gt
ltimg src "buttons/list.jpg" width "65"
height "50" alt "List Example Page"
/gt lt/agtltbr /gt lta href
"contact.html" target "main"gt ltimg
src "buttons/contact.jpg" width "65"
height "50" alt "Contact Page" /gt
lt/agtltbr /gt
25
2.4 HTML Samples Navigation
lta href "header.html" target "main"gt
ltimg src "buttons/header.jpg" width "65"
height "50" alt "Header Page"
/gt lt/agtltbr /gt lta href
"table1.html" target "main"gt ltimg
src "buttons/table.jpg" width "65"
height "50" alt "Table Page" /gt
lt/agtltbr /gt lta href "form.html" target
"main"gt ltimg src
"buttons/form.jpg" width "65"
height "50" alt "Feedback Form" /gt
lt/agtltbr /gt lt/pgt
26
2.4 HTML Samples Email
ltpgtMy email address is lta href
"mailtodeitel_at_deitel.com"gt
deitel_at_deitel.com lt/agt . Click the
address and your browser will open an
e-mail message and address it to me. lt/pgt
27
2.4 HTML Samples Links
lth1gtHere are my favorite siteslt/h1gt
ltpgtltstronggtClick a name to go to that
page.lt/stronggtlt/pgt lt!-- create four text
hyperlinks --gt ltpgtlta href "http//www.deitel.co
m"gtDeitellt/agtlt/pgt ltpgtlta href
"http//www.prenhall.com"gtPrentice Halllt/agtlt/pgt
ltpgtlta href "http//www.yahoo.com"gtYahoo!lt/agtlt/pgt
ltpgtlta href "http//www.usatoday.com"gtUSA
Todaylt/agtlt/pgt
28
2.4 HTML Samples Lists

• Created using a nested list of unordered and
  ordered lists
• (See 2.1)

29
2.4 HTML Samples Headers
lth1gtLevel 1 Headerlt/h1gt lth2gtLevel 2
headerlt/h2gt lth3gtLevel 3 headerlt/h3gt lth4gtLevel 4
headerlt/h4gt lth5gtLevel 5 headerlt/h5gt lth6gtLevel
6 headerlt/h6gt
30
2.4 HTML Samples Frame Set2
31
2.4 HTML Samples Frame Set2

• Nesting frames
• Include the correct number of FRAME elements
  inside FRAMESET
• Using nested FRAMESET elements
• Makes page clearer and easier to debug

ltFRAMESET COLS "110,"gt ltFRAME NAME "nav"
SCROLLING "no" SRC "nav.html"gt ltFRAMESET
ROWS "175,"gt ltFRAME NAME "picture" SRC
"picture.html" NORESIZEgt ltFRAME NAME "main"
SRC "main.html"gt lt/FRAMESETgt ltNOFRAMESgt ltPgtT
his page uses frames, but your browser doesn't
support them.lt/Pgt ltPgtGet Internet
Explorer 5 at the ltA HREF
"nav.html"gtfollow this link to browse our
site without frameslt/Agtlt/Pgt lt/NOFRAMESgt lt/FRAMESE
Tgt
32
2.5 HTML Samples Image Maps

• COORDS - pairs of numbers corresponding to x and
  y axes
• x axis extends horizontally from upper-left
  corner
• y axis extends vertically from upper-left corner
• Ex. ltAREA HREF form.html SHAPE rect
  COORDS 3, 122, 73, 143gt
• Rectangular hotspot with upper-left corner of
  rectangle at (3, 122) and lower-right corner at
  (73, 143)
• To use the image map with an IMG element
• Insert the USEMAP name attribute into the
  IMG element
• name - value of the NAME attribute in the MAP
  element

• Image Maps
• Designate certain sections of an image as
  hotspots
• Use hotspots as anchors for linking
• All elements of image map inside ltMAPgtlt/MAPgt
  tags
• Hotspots designated with AREA element
• AREA attributes
• HREF sets the target for the link on that spot
• SHAPE and COORDS set the characteristics of the
  AREA
• ALT provides alternate textual description

33
2.5 HTML Samples Image Maps
ltMAP NAME "picture"gt ltAREA HREF
"mailtodeitel_at_deitel.com" SHAPE "poly" COORDS
"28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86,
13 ALT "Email the Deitels"gt lt/MAPgt ltIMG SRC
"deitel.gif" WIDTH "200" HEIGHT "144" BORDER
"1 ALT "Harvey and Paul Deitel" USEMAP
"picture"gt
34
2.6 HTML Samples Forms

• Forms
• Collect information from people viewing your site
• FORM element
• METHOD attribute indicates the way the Web server
  will organize and send you form output
• METHOD post in a form that causes changes to
  server data
• METHOD get in a form that does not cause any
  changes in server data
• Form data sent to server as an environment
  variable
• Processed by scripts
• ACTION attribute
• Path to a script (a CGI script written in Perl, C
  or other languages)

35
2.6 HTML Samples Forms

• INPUT element
• Attributes
• TYPE (required)
• Hidden inputs always have TYPE hidden
• Defines the usage of the INPUT element
• TYPE text inserts a one-line text box
• NAME provides a unique identification for INPUT
  element
• VALUE indicates the value that the INPUT element
  sends to the server upon submission
• SIZE
• For TYPE text, specifies the width of the
  text input, measured in characters
• MAXLENGTH
• For TYPE text, specifies the maximum number
  of characters that the text input will accept

36
2.6 HTML Samples Forms

• INPUT element (cont.)
• Include textual identifier adjacent to INPUT
  element
• 2 types of INPUT elements that should be inserted
  into every form
• TYPE submit inserts a button that submits
  data to the server
• VALUE attribute changes the text displayed on the
  button (default is Submit)
• TYPE reset inserts a button that clears all
  entries the user entered into the form
• VALUE attribute changes the text displayed on the
  button (default is Reset)

37
2.6 HTML Samples Forms

• INPUT element (cont.)
• More advanced options
• TYPE password
• Inserts a text box where data displayed as
  asterisks
• TYPE checkbox creates a checkbox
• Used individually or in groups
• Each checkbox in a group should have same NAME
• Make sure that the checkboxes within a group have
  different VALUE attribute values
• Otherwise, browser will cannot distinguish
  between them
• CHECKED attribute checks boxes initially
• TYPE radio
• Radio buttons similar in function and usage to
  checkboxes
• Only one radio button in a group can be selected
• CHECKED attribute indicates which radio button is
  selected

38
2.6 HTML Samples Forms

• TEXTAREA element
• Inserts a scrollable text box into FORM
• ROWS and COLS attributes specify the number of
  character rows and columns
• SELECT element
• Places a selectable list of items inside FORM
• Include NAME attribute
• To add an item to the list of items
• Insert an OPTION element in the
  ltSELECTgtlt/SELECTgt tags
• Closing OPTION tag optional
• Change the number of list options visible
• Including the SIZE x attribute inside the
  ltSELECTgt tag
• x number of options visible

39
2.6 HTML Samples Forms
40
2.6 HTML Samples Forms
lthtmlgt ltheadgt lttitlegtSample form to take
user input in XHTMLlt/titlegt lth1gtFeedback Form
lt/h1gt lt/headgt ltbodygt ltBRgt Please fill
out this form to help us improve our
site. ltBRgt lt!- The codes for an example of a
form are given in --gt lt!- slides 41 through
43. However, please note that --gt lt!- in this
example, the code only generate a form
--gt lt!- that allows only allows users to enter
data. --gt lt!- Examples of CGI scripts to
process form data --gt lt!- will be taught in
a later lecture. --gt lt/htmlgt
41
2.6 HTML Samples Forms
ltFORM METHOD "POST" ACTION "/cgi-bin/formmail"
gt lt!-- Hidden inputs are typical for this kind
of CGI script --gt lt!-- An email address to
which to send the data, the subject --gt lt!--
line of the email and the URL to which the user
is --gt lt!-- redirected after submitting the
form --gt ltINPUT TYPE "hidden" NAME
"recipient VALUE deitel_at_deitel.com/gt ltINPUT
TYPE "hidden" NAME "subject VALUE
"Feedback Form"/gt ltINPUT TYPE "hidden" NAME
"redirect VALUE "main.html"/gt lt!-- NAME
provides a unique identification for INPUT
element --gt lt!-- TYPE text inserts a one-line
text box --gt ltPgtltSTRONGgtName lt/STRONGgt ltINPUT
NAME "name" TYPE "text" SIZE
"25"/gtlt/Pgt lt!-- ltTEXTAREAgt creates a textbox of
the size given --gt ltPgtltSTRONGgtCommentslt/STRONGgt
ltTEXTAREA NAME "comments" ROWS "4" COLS
"36"gtlt/TEXTAREAgtlt/Pgt lt!-- ltINPUT TYPE
"password"gt inserts a textbox whose --gt lt!--
readout will be in instead of regular
characters --gt ltPgtltSTRONGgtEmail
Addresslt/STRONGgt ltINPUT NAME "email" TYPE
"password" SIZE "25"gtlt/Pgt
42
2.6 HTML Samples Forms
lt!-- ltINPUT TYPE "checkbox"gt creates a checkbox
--gt lt!--check boxes that belongs to a group
are--gt lt!--assigned the same name, in this case
things --gt ltPgtltSTRONGgtThings you
likedlt/STRONGgtltBRgt Site design ltINPUT NAME
"things" TYPE "checkbox" VALUE
"Design"gt Links ltINPUT NAME "things" TYPE
"checkbox" VALUE Links"gt Ease of use ltINPUT
NAME "things" TYPE "checkbox" VALUE
Ease"gt lt/Pgt lt!-- ltINPUT TYPE "radio"gt creates
a radio button. The --gt lt!-- difference
between radio buttons and checkboxes is
--gt lt!-- that only one radio button in a group
can be selected --gt ltPgtltSTRONGgtHow did you get to
our site?lt/STRONGgtltBRgt Search engine ltINPUT
NAME "how get to site" TYPE "radio VALUE
"search engine" CHECKED/gt Links from another
site ltINPUT NAME "how get to site" TYPE
"radio" VALUE "link"/gt lt/Pgt
43
2.6 HTML Samples Forms
lt!-- The ltselectgt tag presents a drop down menu
with --gt lt!-- choices indicated by the ltoptiongt
tags --gt ltPgtltSTRONGgtRate our site
(1-10)lt/STRONGgt ltSELECT NAME
"rating"gt ltOPTION SELECTEDgtAmazing-) ltOPTIONgt10 lt
OPTIONgt9 ltOPTIONgt8 ltOPTIONgt7 ltOPTIONgt6 ltOPTIONgt5 lt
OPTIONgt4 ltOPTIONgt3 ltOPTIONgt2 ltOPTIONgt1 ltOPTIONgtThe
Pits-( lt/SELECTgtlt/Pgt lt!-- TYPE submit
inserts a button that submits data to the server
--gt lt!-- TYPE reset inserts a button that
clears all entries the user entered into the form
--gt ltINPUT TYPE "submit" VALUE "Submit Your
Entries"/gt ltINPUT TYPE "reset" VALUE "Clear
Your Entries"/gt lt/FORMgt
44
3. Web Authoring tools

• Graphics-based HTML editing programs
• Should only be used as aids
• None of them creates perfect HTML code.
• Often disrupt indentation
• Often insert unnecessary tags
• No substitute for in-depth knowledge of HTML
• you may need to amend the HTML yourself.
• Sometimes it is not easy to make changes to HTML
  files produced by these editing programs.

45
3. Web Authoring tools

• Free tools
• Microsoft FrontPage Express
• comes free with certain versions of Internet
  Explorer.
• Netscape Composer
• comes with Netscape v4.x or later.
• Commercial tools
• Macromedia Dreamweaver (will be introduced by the
  Tutors)
• available on both PC and Mac .

46
Further Readings

• Note This topic is designed with the objective
  of providing an introduction to HTML.
• Advanced features of HTML are beyond the scope of
  this course and will NOT be taught or discussed.
  Students who wish to invest more time on studying
  advanced features and topics of HTML are referred
  to the following resources
• Deitel Chapter 4-5.
• Textbook Chapter 23.
• http//wdvl.com/Authoring/HTML/4/Tags/