HTML

1
HTML
2
Web pages are HTML

• HTML stands for HyperText Markup Language
• Web pages are plain text files, written in HTML
• Browsers display web pages by interpreting the
  HTML language
• HTML pages may have other languages embedded in
  them
• CSS -- Cascading Style Sheets
• JavaScript -- a programming language vaguely like
  Java

3
Example of HTML

• lt!DOCTYPE HTML PUBLIC "-//IETF//DTD W3 HTML
  2.0//EN"gtlthtmlgt ltheadgt
  lttitlegtfactoriallt/titlegt lt/headgt ltbody
  bgcolor"FFFFFF"gt lth1gtfactoriallt/h1gt
  ltstronggtDefinitionlt/stronggt The
  factorial of an integer n 8805 0, written n!,
  is n times n-1 times ... times 2
  times 1. In particular, 0! 1.
  lt/bodygtlt/htmlgt

4
Why do we care?

• Javadoc comments are written in HTML
• If you know a little HTML, you can write much
  better-looking comments
• Applets are normally embedded in a web page
• You need to know enough HTML to construct a web
  page with an applet in it
• You do not need to know HTML to run an applet
  from an IDE
• HTML is the language of the World Wide Web
• Java is an excellent language for web programming

5
HTML Files

• An HTML file is a plain text file containing
  small markup tags
• The markup tags tell the Web browser how to
  display the page
• An HTML file must have an htm or html file
  extension
• .html is preferred
• .htm extensions are used by servers on very old
  operating systems that can only handle 83
  names (eight characters, dot, three characters)
• An HTML file can be created using a simple text
  editor
• Formatted text, such as Microsoft Words .doc
  files, cannot be used in HTML files

6
HTML Tags

• HTML tags are used to mark up HTML elements
• HTML tags are surrounded by angle brackets, lt
  and gt
• Most HTML tags come in pairs, like ltbgt and lt/bgt
• The tags in a pair are the start tag and the end
  tag
• The text between the start and end tags is the
  element content
• The tags act as containers (they contain the
  element content), and should be properly nested
• A few tags, such as ltbrgt (line break) are not
  nested and have no end tag
• HTML tags are not case sensitive ltbgt means the
  same as ltBgt
• Lowercase tags are preferable

7
Structure of an HTML document

• An HTML document is contained within lthtmlgt tags
• It consists of a ltheadgt and a ltbodygt, in that
  order
• The ltheadgt typically contains a lttitlegt, which is
  used as the title of the browser window
• Almost all other content goes in the ltbodygt

• Hence, a fairly minimal HTMLdocument looks like
  this
• lthtmlgt ltheadgt lttitlegtMy Titlelt/titlegt
  lt/headgt ltbodygt Hello, World!
  lt/bodygtlt/htmlgt

8
Text in HTML

• Anything in the body of an HTML document, unless
  marked otherwise, is text
• To make text italic, surround it with ltigt and
  lt/igt tags
• To make text boldface, surround it with ltbgt and
  lt/bgt tags
• You can put headers in your document with lth1gt,
  lth2gt, lth3gt, lth4gt, lth5gt, or lth6gt tags (and the
  corresponding end tag, lt/h1gt through lt/h6gt)
• lth1gt is quite large lth6gt is very small
• Each header goes on a line by itself

9
Whitespace

• Whitespace is any non-printing characters (space,
  tab, newline, and a few others)
• HTML treats all whitespace as word separators,
  and automatically flows text from one line to the
  next, depending on the width of the page
• To group text into paragraphs, with a blank line
  between paragraphs, enclose each paragraph in ltpgt
  and lt/pgt tags
• To force HTML to use whitespace exactly as you
  wrote it, enclose your text in ltpregt and lt/pregt
  tags (pre stands for preformatted)
• ltpregt also uses a monospace font
• ltpregt is handy for displaying programs

10
Lists

• Two of the kinds of lists in HTML are ordered,
  ltolgt to lt/olgt, and unordered, ltulgt to lt/ulgt
• Ordered lists typically use numbers 1, 2, 3, ...
• Unordered lists typically use bullets ()
• The elements of a list (either kind) are
  surrounded by ltligt and lt/ligt

• Example
• The four main food groups areltulgt
  ltligtSugarlt/ligt ltligtChipslt/ligt
  ltligtCaffeinelt/ligt ltligtChocolatelt/ligtlt/ulgt

11
Attributes

• Some markup tags may contain attributes of the
  form name"value" to provide additional
  information
• Example To have an ordered list with letters A,
  B, C, ... instead of numbers, use ltol type"A"gt
  to lt/olgt
• For lowercase letters, use type"a"
• For Roman numerals, use type"I"
• For lowercase Roman numerals, use type"i"
• In this example, type is an attribute
• If a tag has more than one attribute, they can be
  in any order

12
Tables

• Tables are used to organize information in two
  dimensions (rows and columns)
• A lttablegt contains one or more table rows, lttrgt
• Each table row contains one or more table data
  cells, lttdgt, or table header cells, ltthgt
• The difference between lttdgt and ltthgt cells is
  just formatting--text in ltthgt cells is boldface
  and centered
• Each table row should contain the same number of
  table cells
• To put borders around every cell, add the
  attribute border"1" to the lttablegt start tag

13
Example table

• lttable border"1"gt lttrgt ltthgtNamelt/thgt
  ltthgtPhonelt/thgt lt/trgt lttrgt lttdgtDicklt/tdgt
  lttdgt555-1234lt/tdgt lt/trgt lttrgt
  lttdgtJanelt/tdgt lttdgt555-2345lt/tdgt lt/trgt lttrgt
  lttdgtSallylt/tdgt lttdgt555-3456lt/tdgt
  lt/trgtlt/tablegt

14
Entities

• Certain characters, such as lt, have special
  meaning in HTML
• To put these characters into HTML without any
  special meaning, we have to use entities
• Here are some of the most common entities
• lt represents lt
• gt represents gt
• amp represents
• apos represents '
• quot represents "
• nbsp represents a nonbreaking space--one
  that HTML does not treat as whitespace
• Hence, to display if (x lt 0) return
  "negative"you need to write if (x lt 0)
  return quotnegativequot

15
Applets in HTML

• To put an applet into an HTML page, you use the
  ltappletgt tag, which has three required
  attributes, code (the class file) and width and
  height (in pixels)
• Example
• ltapplet code"MyApplet.class" width150
  height100gt lt/appletgt
• If your applet contains several classes, you
  should jar them up in this case you also need
  the archive attribute
• ltapplet code"MyApplet.class"
  archive"MyApplet.jar" width150
  height100gtlt/appletgt

16
Applets with parameters

• You can pass parameters to your applet from your
  HTML page
• ltapplet code"MyApplet.class" width150
  height100gt ltparam name"message"
  value"Hello World"gt ltparam name"arraySize"
  value"10"gtlt/appletgt
• The applet can retrieve the parameters like this
• String message getParameter("message")String
  sizeAsString getParameter("arraySize")
• All parameters are passed as Strings, so you may
  need to do some conversions
• try size Integer.parseInt (sizeAsString)
  catch (NumberFormatException e)

17
The rest of HTML

• HTML is a large markup language, with a lot of
  options
• None of it is really complicated
• Ive covered only enough to get you started
• You should study one or more of the tutorials
• Your browsers View gt Source command (or similar)
  is a great way to see how things are done in HTML
• HTML sometimes has other things mixed in (such as
  forms, DHTML, and JavaScript), so if it doesnt
  look like HTML, it probably isnt

18
The End