 |
Download these IBM resources today!
e-Kit: IBM Rational Systems Development Solution
With systems teams under so much pressure to develop products faster, reduce production costs, and react to changing business needs quickly, communication and collaboration seem to get lost. Now, theres a way to improve product quality and communication.
Webcast: Asset Reuse Strategies for Success--Innovate Don't Duplicate!
Searching for, identifying, updating, using and deploying software assets can be a difficult challenge.
eKit: Rational Build Forge Express
Access valuable resources to help you increase staff productivity, compress development cycles and deliver better software, fast.
Download: IBM Data Studio v1.1
Effectively design, develop, deploy and manage your data, databases, and database applications throughout the data management life.
eKit: Rational Asset Manager
Learn how to do more with your reusable assets, learn how Rational Asset Manager tracks and audits your assets in order to utilize them for reuse.
|
|
 |
|
|
|
|
|
Introduction to HTML
One of the original design goals of HTML was to be
device independent. That is, it was to be used on a variety
of computer systems without change. Accordingly, it was designed to be
a language to describe document structure, rather than document
presentation. So the basic HTML elements specify such things as
headings, titles, and paragraphs - but not margins and fonts.
It was left up to the browser on any specific system to take care of
rendering the document in whatever way the browser author thought most
suitable.
This was appropriate for the original target audience - scientific
researchers who were far more interested in what was in a document,
than how it appeared. But the WWW concept rapidly became very popular
and other communities - especially the 'commercial' people - became
interested in it. And in the commercial world, image is very important.
If your documents are going to be seen by thousands or millions of
people, they had better look good. But the original HTML offered very
little support for layout and presentation, so the demand grew for
extensions. Various browser manufacturers have introduced new HTML
elements oriented towards presentation issues
- notably Netscape - and some of these have been adopted into
the HTML standards proposals.
Putting presentation instructions directly into documents goes against
the original device-independence goal of HTML, and makes it hard to
change the presentation later.
The correct solution, called
style sheets,
has been known from before
the beginning of the WWW project. Soon after its formation in mid '94,
the W3C published the first draft of a concrete proposal, and early
implementations were pioneered by the Arena and emacs-w3 browsers in
the beginning of '95.
IIRC, Navipress, Panorama,
and maybe a few other commercial browser/editor tools
also had some style sheet support at around the same time.
The first 'mass-market' browser to adopt the
stylesheet approach was MSIE, about a year later.
While you can most
certainly stretch the features of HTML to provide useful layout and
presentation, the trend is going to be towards moving that aspect into
style sheets.
Tags specify structural elements in a document, such as headings:
<h2> Tags and Attributes </h2>
Tags begin with a left-angle bracket < and end with a
right-angle bracket >. The first word between the angle
brackets is the tag's name. Any further words and characters are the
attributes, e.g. align=right.
A tag is therefore the basic 'item', and an attribute is some
extra detail such as how to align the content.
An element comprises three parts: a start tag, content, and an end tag.
Most tags possess 'closing tags' such as </h2>
which mark the place where the effect of the 'opening' tag should stop.
Tags are case-insensitive.
You can write them in small letters, big letters, or any mixture.
A common convention is to write them in caps so they stand out from the
rest of the document.
Tags should nest properly: if you want for example to make a
part of the header in italics:
<h2>
Tags <i>and</i> Attributes
</h2>
Also, HTML documents are free-format - you can use spaces and
tabs anyhow you like, and break lines anywhere. White space and line
breaks will not affect the document appearance in a browser except
when used inside certain special tags which we'll describe later.
Some people find HTML can be hard to read. This need not be so if it's
written tidily. My own preference is to indent the text by one tab, so
that the source has a left margin. Structural tags can then be placed
in the margin, and it's easy to read the source. Look at the source of
this page to see what I mean.
Browsers allow a great deal of flexibility about which tags you need
to put into a web page. If you are designing your pages for only one
browser that may be fine, but as soon as you want to support several
browsers then you might want to look into
validation, which is the process of
checking HTML documents against the standards.
An HTML document consists of two main parts: the
Head, and the
Body.
The basic document structure is
<HTML>
<Head> ... </Head>
<Body> ... </Body>
</HTML>
The Head contains information about the document, such as
links to pages that could be preloaded;
and the Body contains the document to be displayed.
We won't say much about the Head here; it's covered in detail
elsewhere. The main Head element you need to
know about is the
<TITLE> tag.
Every document should have a title - it appears as a 'label' on the
browser window, and when a user bookmarks it or looks in their history
list - it's the text they'll see. Take care to make the title a good
meaningful one. "Introduction" isn't much help if the user can't
remember what was being introduced.
<Title>A Basic Introduction to HTML</Title>
Another useful Head tag is the
<META> tag
if you want to optimise your pages for search engines.
See
How in the Web will They
Find Me ? for more on this.
Here's a slightly more realistic HTML document:
1:<HTML>
2:<Head>
3: <Title>A Simple Document</Title>
4: <Meta Name = "Keywords"
5: Content = "Hypertext">
6:</Head>
7:<Body>
8:... This stuff is
what the user sees ...
9:</Body>
10:</HTML>
The numbers and colons are not part of the HTML file, but serve to
associate the following comments with the lines above:
- Declares this to be an HTML document.
- The Head
contains items that are about the document.
- The title
used in the browser title bar, hotlists, listings, etc.
- Meta
tags can be used to add information not already
specified in the HTML/HTTP
system.
- Some search engines make use of these keywords, as well as those in the
Body.
- Closes the Head.
- Body
contains the document's displayable content.
- Text markup commands. View this document source for examples..
- Closes the Body.
- Closes the HTML.
HTML also supports interactive forms,
"hotspots" in pictures,
more versatile formatting choices and styles,
and formatted lists, as well as several other improvements, such as
an e-mail URL, so hyperlinks can be made to send e-mail mechanically.
For example,
choosing an e-mail address in a portion of hypertext opens a mail
application, ready to send e-mail to that address.
Now we'll move on to Body tags. This is where the action is..
The line just above was a header, i.e. a title for a new section of the
document. There are 6 headers: H1, H2, H3, H4, H5, and H6.
H1 is the "main" header, usually used once at the top of the document.
H6 is the "smallest" header and is rarely used, though it's often
abused to make small bold text (use the FONT tag or
style sheets instead).
One of the original philosophies about HTML was that it should be
designed for software tools to extract useful information from HTML
documents. The header tags were supposed to be useful for generating a
'table of contents'.
The fundamental feature of the
WWW that makes it so powerful is of
course,
hypertext
links.
The tag that creates those links is called the
anchor tag (A).
It has one commonly used attribute: HREF,
which specifies the
URL of the target
document.
Images have made a profound difference in the way the web looks.
Probably there would not have been the incredible explosion of interest
in it if inline images had not been added..
<Img src = "/Icons/graphics.gif">
The above example shows the simplest way to make an inline image.
You can wrap it inside anchor tags and then it will be a clickable
image:
<a href = "../../Graphics/">
<Img src = "/Icons/graphics.gif"></a>
But it's a good idea to specify the image dimensions (allows the
browser to lay out the page sooner) and what to do if the browser
doesn't have image support or if the user has image loading turned off.
<a href = "../../Graphics/">
<Img src = "/Icons/graphics.gif"
width = 108
height = 44
border = 0
hspace = 16
alt = "Graphics"
align = left
></a>
Let's see how to emphasise some text..
Let's see how to <em>emphasise</em> some text..
EM is called a logical style: you specify what you're trying
to do, rather than how to do it.
Another one is STRONG.
Another one is <strong>STRONG</strong>.
Emphasis is usually indicated with italics.
Emphasis is usually indicated with <i>italics</i>.
'Strong' is usually rendered as bold.
'Strong' is usually rendered as <b>bold</b>.
SAMP is rendered as teletype font.
<samp>SAMP</samp> is rendered as
<tt>teletype</tt> font.
And if you want something to appear
exactly as you typed it, use PRE.
And if you want something to appear
exactly as you typed it, use PRE.
Note that HTML tags are still obeyed inside PRE.
If you want to use angle brackets or HTML tags then either
write < for < and
write > for >;
or try the XMP tag which renders everything literally until the closing
XMP tag..
Be warned: XMP is unloved by the powers-that-be and will not survive in
the standards. In my opinion - if you care to hear it - this is sad.
But since I use a preprocessor to create my HTML files I can easily
continue to use XMP, and the resulting HTML is still legal.
And the FONT tag lets you do more..
<font size=5 color=red>
And the FONT tag lets you do more..
</font>
As mentioned above - white space and line breaks are ignored by the
browser except inside special tags. You have therefore to provide tags
to indicate them. If you want a line break use
<br>
and if you want a paragraph break (i.e. line break and then an empty
line between paragraphs) use
<p>
The paragraph tag has an optional closing tag </p>.
There are several kinds of lists. Three important ones are
- Ordered.
- Unordered.
- Definition.
An ordered list has numbered items. To make the above list:
<ol>
<li> Ordered.
<li> Unordered.
<li> Definition.
</ol>
To make it without numbered items:
- Ordered.
- Unordered.
- Definition.
A definition list looks like this:
- Ordered Lists.
- The list items are ordered, e.g. by numerals.
- Unordered Lists.
- The list items aren't ordered particularly.
- Definition Lists.
- The list items have two parts:
a title DT and a description DD.
A definition list is made like this:
<dl>
<dt> Ordered Lists.
<dd> The list items are ordered,
e.g. by numerals.
<p>
<dt> Unordered Lists.
<dd> The list items aren't ordered.
<p>
<dt> Definition Lists.
<dd> The list items have two parts:
a title DT and a description DD.
</dl>
Follow the above link for a detailled tutorial on table.
Read on for the crash course..
Tables consist of rows containing headers and
data cells:
| Name | Tag | Typical Appearance |
|---|
| Table | TABLE | A table like this |
|---|
| Row | TR | A row like this |
|---|
| Head | TH | Bold, centered |
|---|
| Data | TD | Plain, left aligned |
|---|
<table border=2 cellpadding=8 bgcolor=white>
<tr><th> Name </th><th> Tag</th>
<th> Typical Appearance </th></tr>
<tr><th> Table </th><th> TABLE</th>
<td>A table like this </td></tr>
<tr><th> Row </th><th> TR </th>
<td> A row like this </td></tr>
<tr><th> Head </th><th> TH </th>
<td> Bold, centered </td></tr>
<tr><th> Data </th><th> TD </th>
<td> Plain, left aligned</td></tr>
</table>
The table tag attributes used here are
- bgcolor
- The table's background color.
You can also use this attribute in the table cells.
- border,
- specifies the width in pixels for the border (0 for no border);
- cellpadding
- How much space between the border and the cell contents.
HTML 4.0
HTML 4.0 extends HTML with mechanisms for style sheets, scripting,
frames, embedding objects, improved support for right to left and mixed
direction text, richer tables, and enhancements to forms, offering
improved accessibility for people with disabilities.
Tables
The new table model in HTML is based on [RFC1942].
Authors now
have greater control over structure and layout (e.g., column groups).
The ability of designers to recommend column widths
allows user agents to display table data incrementally (as it arrives)
rather than waiting for the entire table before
rendering.
Style Sheets
Style sheets simplify HTML markup and largely relieve HTML of the
responsibilities of presentation. They give both authors and users
control over the presentation of documents -- font
information, alignment, colors, etc.
Style information can be specified for specific elements or
groups of elements either within an HTML document or in
separate style sheets.
Scripting
Through scripts, authors may create "smart forms" that react as users
fill them out.
Scripting allows designers to create
dynamic Web pages, and
to use HTML as a means to build networked applications.
|
