Introduction to HTML

1
Introduction to HTML Servlet
2
Introduction and History

• File transfers were made possible with the
  earliest versions of internet software the
  program that handles file transfers still
  survives more or less intact - ftp. As internet
  users started to place files for public access,
  advertising their wares on bulletin boards, some
  people started distributing "lists" of hot ftp
  material on bulletin boards.
• Along came archie, a program to locate ftp sites
  using a keyword search. This program worked by
  collecting data at archie servers (located at
  some sites) and allowing archie clients to
  connect to the servers to search.
• The next development was gopher (created at the
  University of Minnesota), a utility which
  combined several tools (a file viewer, ftp and
  telnet) in a single easy-to-use menu-driven
  interface.
• At the same time, the publishing industry had
  been experimenting with so-called hypertext
  documents (electronic documents with nonlinear
  organization of data) -- on single machines. A
  standard called SGML (Standard Generalized Markup
  Language) was developed to write hypertext
  documents in free ascii-text (similar to Latex,
  troff etc).
• Ideally, SGML should be integrated with TCP/IP to
  provide links across the network. But SGML is
  large and complex. Thus came HTML (HyperText
  Markup Language), a much simpler formatting
  language developed by CERN in Switzerland that
  uses TCP/IP.
• The whole idea in using HTML is to display more
  than text, that is, formatted text and images.
  For this, a "browser" is needed - most often, a
  browser written for a windowing package such as
  xmosaic (the first browser) written for
  X-windows.

3
HTML Tag Basics

• HTML documents are written in ascii text, with
  commands specified by particular sequences of
  characters. Commands in HTML usually consist of 3
  components
• a start tag,
• a middle,
• and a stop tag.
• For example, to specify the title of a document,
  such as, Red Riding Hood, you would use the
  lttitlegt command
• lttitlegt Red Riding Hood lt/titlegt
• Note that
• the start tag is the keyword lttitlegt (with
  triangular brackets, the signature of HTML
  commands),
• the stop tag is the keyword lt/titlegt
• and the middle is the textual data.
• Some characters, such as lt, gt and are
  used exclusively for HTML command. There are
  special ways to display them.

4
HTML Basic Structure

• lthtmlgt
• lt!-- This is an internal comment it won't be
  displayed --gt
• lt!-- Note the exclamation mark and the two
  dashes on either side --gt
• ltheadgt
• lttitlegt Red Riding Hood lt/titlegt
• lt/headgt
• ltbodygt Once upon a time, in a land far far away,
  there lived...
• lt/bodygt
• lt/htmlgt

5
Write HTML in Free Text

• Now, HTML is written in free text, so the
  previous document could just as well be written
  into a text file as
• lthtmlgt lt!-- This is an internal comment it
  won't be displayed --gt lt!-- Note the exclamation
  mark and the two dashes on either side --gt
• ltheadgt lttitlegt Red Riding Hood lt/titlegt lt/headgt
  ltbodygt Once
• upon a time, in a land far far away,
  there lived... lt/bodygt lt/htmlgt

• NOTE
• Obviously, some indentation will make the text
  file more readable.
• The ltheadgt blah-blah lt\headgt part of the
  document is used to specify a title (so that it
  can be displayed in the title window of a
  browser).
• Thus, the bulk of the document will be in the
  ltbodygt blah-blah-blah lt/bodygt part. Typically, a
  file that starts with lthtmlgt and ends with
  lt/htmlgt corresponds to one page during browsing
  that is, following a link leads to a new HTML
  document.

6
HTML Formatting Commands

• Command Description
• Start tag Stop tag
• --------------------------------------------------
  --------------------------------------------------
  --------------------------------------------------
  --------------------------------------------------
  --------------------------------------------------
  -----
• lthtmlgt lt/htmlgt HTML document
  indicator
• ltheadgt lt/headgt Document head
• lttitlegt lt/titlegt Title (usually in
  ltheadgt section)
• ltbodygt lt/bodygt Document body
• ltaddressgt lt/addressgt
  Document author info
• lt!-- --gt Comment
• lth1gt lt/h1gt Level-1 heading
• lth2gt lt/h2gt Level-2 heading
• . . .
• lth6gt lt/h6gt Level-6 heading
• ltigt lt/igt Italics
• ltemgt lt/emgt Emphasized text - similar
  to italics
• ltbgt lt/bgt Bold face
• ltstronggt lt/stronggt Strong -
  similar to bold
• ltttgt lt/ttgt
  Teletype
• ltstrikegt lt/strikegt Strike-through

7
Itemized List

• An unordered list list is defined by ltulgt list
  of things lt/ulgt
• An ordered list by ltolgt list of ordered items
  lt/olgt .
• Each item is specified by a ltligt. .
• Unordered lists are bulleted and ordered lists
  are numbered.
• There are also ltmenugt and ltdirgt types of lists,
  both being similar to unordered lists.
• Lists can be nested within other lists, as the
  example shows.

• ltbodygt
• lth2gt Red Riding Hood's shopping list lt/h2gt
• ltulgt
• ltligt Picnic basket
• ltligt Red items
• ltulgt
• ltligt Red delicious apples
• ltligt Red sneakers
• lt/ulgt
• ltligt Safety items
• ltolgt
• ltligt Magnesium flare ltligt Cellular
  phone lt/olgt
• lt/ulgt
• lt/bodygt

8
Special Characters

• Character code Description
• ------------------------------------------------
  ------
• l t the less-than
  symbol
• g t the greater-than
  symbol
• a m p the ampersand symbol

9
Adding Links an Example

• ltbodygt
• lth1gt Red's Early Years lt/h1gt
• lta href"early/birth.html"gt Birth lt/agt
• lta href"early/preschool.html"gt Pre-School lt/agt
• lth1gt Red Goes to High-School lt/h1gt
• lta href"home.html"gt Red Sets up a Homepage lt/agt
  
• lt/bodygt

10
What is a URL?

• A URL (Universal Resource Locator) is a document
  name that contains complete access information
  such as whether the document is HTML, where it is
  (internet address), the path name (sequence of
  directories) and other information. For example,
  consider this URL
• http//www.cs.wm.edu80/tales/fairy/modern/ma
  sterlist.html
• It specifies the following
• http - the document is in HTML
• www.cs.wm.edu - the internet address or system
  name
• 80 - the port at which the httpd daemon is
  listening (most often the port is 80, the default
  port, and is left out of the URL)
• tales/fairy/modern - a path name leading to a
  file masterlist.html - a file name
• Port number 80 is the standard port number. It is
  not needed in the URL. It is also possible to
  pass parameters in a URL.

11
Another Type of Anchor

• Let's assume that stories.html contains the tales
  (each with hyperlinks to other files. Now, by
  clicking on any stories in masterlist.html, the
  browser will take you to the top of the
  stories.html file. You then have to scroll down
  to the story you want. To avoid this problem, we
  simply mark each story beginning in the file
  stories.html and use the mark in the href
  specification. For example, in stories.html, let
  us mark Red Riding Hood as follows
• lth1gt lta NAME"red"gt Red Riding Hood ltagt lt/h1gt
• Now, in the appropriate href part in
  masterlist.html, we specify this mark
• ltligt lta href"stories.htmlred"gt Red Riding
  Hood ltagt
• Observe the hash symbol being used to specify a
  named anchor. You can use named anchors for rapid
  movement within a single HTML document.

12
Relative Addressing

• Suppose the address of the current document is
• http//www.cs.wm.edu/tales/fairy/modern/maste
  rlist.html
• Then, we have seen that links in the file
  masterlist.html are created by giving an address
  in the href part of an anchor. We can either
  provide a full address or a partial or relative
  address. Above, we saw an example of a relative
  address
• lta href"stories.html"gt Red Riding Hood ltagt
• We could have also given the complete address
• lta href"http//www.cs.wm.edu/tales/fairy/mode
  rn/stories.html"gt Red Riding Hood ltagt

13
Image and Other Things

• What is MIME?
• MIME (Multipurpose Internet Mail Extensions) is
  a standard that incorporates many well-known file
  formats. The idea is that the browser doesn't
  handle these formats and instead calls a
  "plug-in", a program that knows what to do with
  the data. Thus, for "postscript" files, a
  postscript viewer is called by the browser. You
  can, by setting options in the browser, decide
  which application programs (plug-ins) handle
  which file extensions. Here are some common
  extensions (some of which, like .gif, are
  directly handled by the browser).
• gif - .gif files are graphics or bitmap files in
  the GIF (Graphics Interchange Format) format.
• jpeg - a bitmap format for still images.
• mpeg - format for motion pictures.
• ps - postscript
• pdf - the format used by Adobe Acrobat documents
• How to display in-lined images In-lined images
  are images are images within the HTML document
  (as opposed to spawning a viewer). Consider the
  following example, which displays an image in the
  file mypicture.gif
• ltbodygt
• lth1gt The Next President of the United
  Brewpub Tasters of America lt/h1gt
• ltimg alt"my mugshot" alignbottom
  src"mypicture.gif"gt
• lt/bodygt
• With the ltimg ... gt command, we specify the
  source file (mypicture.gif), an alignment for the
  first following line of text, and an alternate
  ascii string (my mugshot) for browsers that don't
  support images.
• Adding links to images (simulating buttons)
  This is easy simply enclose the entire image
  command inside an anchor command. For example
• ltbodygt
• lth1gt The Next President of the United
  Brewpub Tasters of America lt/h1gt
• lta href"bio.html"gt
• ltimg alt"my mugshot" alignbottom
  src"mypicture.gif"gt
• lt/agt

14
Homepages

• You now want to know where to place files that
  others can view your homepages.
• In Unix, you need to create a subdirectory off of
  your main directory and call it public_html.
  Note webservers differ in what they want you to
  use as "home" directories.
• In the subdirectory public_html, create a file
  called index.html. When someone accesses your
  homepage by just giving your username, it is this
  file that is brought up. Thus, the URL
• http//www.cs.wm.edu/simha
• is really the file public_html/index.html, which
  the webserver knows to get. (You don't have to
  understand this last point). Make sure that you
  grant public access to this directory and to the
  files you place in the directory.
• You can now place all other files you want others
  to access in the directory public_html. For
  example, if I create my CV in an HTML file called
  cv.html, put the file in the directory
  public_html, and refer to it by the URL
• http//www.cs.wm.edu/simha/cv.html
• then others can open' this URL and get the
  file.