A brief introduction to HTML

Author and presenter: Simon Brooke.

The full text of this presentation is online at <URL: http://www.jasmine.org.uk/~simon/bookshelf/courses/html/>

Last revised 11th October 2002

Changes to the presentation since your handouts were printed are highlighted like this.

Simon Brooke, 21 Main Street, Auchencairn, DG7 1QU, Scotland.

Introduction

It's about five years since I last wrote an HTML course
HTML is still as easy as it ever was...
- But it's mostly done worse than ever
More than 95% of commercially written web pages are both technically invalid and illegal
It doesn't have to be that way.
- I'm going to show you how to do it properly
- It's very easy.

What we're going to do today

What is HTML
- About text
- About markup
- Why HTML is easy
  - Using a text editor
    - Marking up text
    - Fancy bits
  - Using Pseudo-WYSIWYG
- Why HTML is hard
Using styles

What is HTML

A very simple notation for marking up text
With special notation allowing documents to be linked together
The usual format for publishing documents on the Web.

About Text

Here is a piece of text (Taken from BBC news 10th October 2002 ©BBC)
<pre> Thursday, 10 October, 2002, 11:10 GMT 12:10 UK CIA undermines propaganda war Paul Reynolds BBC News Online World Affairs correspondent The CIA Director George Tenet has become the unlikely source of embarrassment to President George W Bush, undermining Mr Bush's warning of catastrophic threats from Saddam Hussein and exposing disagreements within the intelligence world about the nature of the danger. In a letter to Congress, Mr Tenet said: "Baghdad for now appears to be drawing a line short of conducting terrorist attacks with conventional or chemical and biological warfare against the United States." Mr Tenet says that only if attacked would Iraq use whatever weapons of mass destruction it has. George Bush said in his Cincinnati speech to the American people: "Facing clear evidence of peril, we cannot wait for the final proof - the smoking gun - that could come in the form of a mushroom cloud." Assessing intentions A central issue here is one of assessing Iraq's intentions. Numerous reports over the past few months have detailed its capabilities, though even some of those are in dispute. Think tanks have put out several summaries. The British Government added new detail with its own dossier. The CIA has this month joined in with a document of its own. In the propaganda war preceding military action, government are always prone to casting any threat in the most dramatic possible way. Mr Tenet's assessment, however, deals more with intentions than with hardware. And it raises the question whether President Bush has been exaggerating the threat to justify military action. The president has, for example, made much in his speech of the links that Saddam Hussein has had with "international terrorist groups" and that he and Osama Bin Laden "share a common enemy" (ie the United States). He suggested that it was but a short step from there to providing such terrorists with weapons of mass destruction. The three Ts This is known as the threat of the "three Ts" - tyranny, terrorists and technology. But experts say that Saddam Hussein comes from a different background to Bin Laden. Saddam is a secular revolutionary socialist dictator. Each of us has a solemn responsibility to do everything in our power to ensure that, when the history of this period is written, the books won't ask why we slept Donald Rumsfeld His links with al-Qaeda are tenuous at best and do not seem to exist at senior level. His support for Palestinian groups is well known and was probably what Mr Bush was referring to. Notorious figures like Abu Nidal (who died in Iraq recently) and Abu Abbas have been given shelter. But there is no evidence that they would be given weapons of mass destruction. Mr Bush also suggested that Iraq had developed unmanned aerial vehicles (UAV) and that the United States was "concerned that Iraq is exploring ways of using these UAV's for missions targeting the United States". It is known that Iraq is trying to turn a Czech made trainer the L29 into an UAV but it has a range of only 600 kilometres (370 miles). It could hit American bases in the Middle East but not the United States itself. Propaganda war In the propaganda war preceding military action, government are always prone to casting any threat in the most dramatic possible way. And the Bush administration's reply to claims that it is exaggerating is simple - after 11 September, it cannot take a chance. The Defence Secretary Donald Rumsfeld, who has made warnings about Saddam Hussein into a speciality, said to the House Armed Service Committee on 18 September: "We are on notice - each of us. Each of us has a solemn responsibility to do everything in our power to ensure that, when the history of this period is written, the books won't ask why we slept." Against such rhetoric, the doubts of some in the intelligence community do not make much headway. </pre>
- It's just text
- You've all seen text before.

Hand round copies of the text

About Markup

Markup is the job of specifying which bits in a text are special...
- Can you see the main headline?
- Can you see the byline?
- Can you see the subsidiary headlines?
- Can you divide it into sensible paragraphs?
- Can you see which bits are quotes?
Mark them in pencil on your copy.
Congratulations. You've just done markup.

Why HTML is easy

In HTML, we markup by putting tags into text.
There's a little bit more to it than this
But it's all very simple.

In HTML, we markup by putting tags into text.

Tags are just text!
Each tag starts with a left angle bracket < and ends with a right angle bracket >
There aren't very many tags, so they aren't that hard to remember.
At the end of the piece of text we're marking, we put a closing tag, which is the same as the opening tag but with a slash in front.
The tag to start a top level headline is <h1>
The tag to end a top level headline is </h1>

Let's do that [1] getting started

Use a text editor, like notepad
Open the file text.txt (you can download it from here) At the beginning, copy this exactly:
<html> <head> <title> News story </title> </head> <body>
At the end, copy this exactly:
</body> </html>
Yes, html, head, title and body are just tags
- The html tag marks the whole document as HTML
- The head tag marks the header of the document - information about the document which isn't actually part of what's presented to the reader
  - Such as the title
- The body tag marks the body of the document.

Let's do that [2] block level tags

Mark the beginning of the main headline with <h1>
Mark the end of the main headline with </h1>
Mark the beginning and end of each paragraph with <p> and </p> respectively
Other tags you can use are

h2

second level headline

h3

third level headline (and so on to h6)

blockquote

a block quotation (i.e. one that is in a block by itself)

address

Information about how to contact the author of a document, usually his postal or email address.
These are all 'block level' tags
- They mark blocks of text
- You mostly can't put block level tags inside each other.
- All text in a document should be in one block level tag or another
Save your document as text.html and look at it in your browser.

Lets do that [3] inline tags

Sometimes you want to mark a piece of text inside a block.
Here are some inline tags you can use

abbr

an abbreviation

acronym

an acronym

dfn

a definition

em

emphasis

q

an inline quotation - that is, one that's in a paragraph, not a block by itself

samp

sample text

strong

strong emphasis

var

a variable
You can put inline tags inside one another
- But you should nest them correctly!
  - Simon says <q>this is <em>right</em></q>
  - Simon says <q>this is <em>wrong</q></em>
The full list of all the tags you can use is here
Save your document as text.html and look at it in your browser.

There's a little bit more to it than this

Some tags need attributes - extra bits of information
- An attribute has a name and a value
- It's written name="value"
- Inside the angle brackets of the opening tag
- You don't have to repeat it in the closing tag
Some tags are 'empty'
- they don't enclose any text
- they don't need a closing tag
- in XHTML they are marked with a trailing slash before the right angle bracket
  - like this <hr/>
At the beginning of the document you need a document type declaration and a header

More about attributes: an example

Here's an image:
- We write it like this: <img src="images/scaffie-logo-sm.png" alt="[Scaffie logo]"/>
- It has an attribute called src
  - whose value is images/scaffie-logo-sm.png
  - it says where the image is to be fetched from
- It has an attribute called alt
  - whose value is [Scaffie logo]
  - it says what to show if the image can't be loaded.
An image tag is empty, so it has the trailing slash.

At the beginning, some bureaucracy

The very beginning of an HTML document needs to have some markers about the type of document it is.
- This is so the browser knows how to parse it.
There are two versions of HTML you might use now: HTML 4.01 and XHTML 1.0
- they need different markers
- (XHTML 1.0 is newer)
Don't get worried about this!
- You just have to copy these markers - they never change, so you don't really need to understand them.
- Most browsers will interpret your page correctly even if you don't put the right stuff at the beginning

HTML 4.01

If you want to use HTML 4.01, you need exactly this at the beginning of your document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
- You can just copy this: it will always be the same.
Obviously, you still need </html> at the very end...
In HTML 4.01
- attribute and tag names can be either upper or lower case
- attribute values don't always have to be quoted (but the rules about when they don't are complex so it's better to)
- empty tags don't have to have the trailing slash

XHTML 1.0

If you want to use XHTML 1.0, you need exactly this at the beginning of your document:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
Obviously, you still need </html> at the very end...
In XHTML 1.0
- attribute and tag names must always be in lower case
- attribute must always be quoted.
- empty tags do have to have the trailing slash
Apart from that, they are the same.

Right! Now you know how to markup text...

You may never do that again.
Some people who write a lot of HTML always use a text editor (I do).
Some people use a Pseudo-WYSIWYG tool
We're going to do that now.

Pseudo WYSIWYG: Amaya

We're going to use a program called Amaya
It's produced by the World Wide Web Consortium
- the people responsible for Web standards
It's free
Most important, it produces good, standard HTML

The instructions in the slides that follow have been tested using Amaya 5.1 on Linux and Amaya 6.1 on MS Windows. It's worth telling people that not all the features of Amaya work, but that the core ones do work well and if anything goes wrong and it crashes it's very good at not losing your work.

Marking up with Amaya

Open Amaya
Go to File->Open Document... on the menu, click Browse in the dialog, and open the file called text2.html
- You could have just typed the file in, but I'm making life easy for you...
Find the main headline, and drag over it with the mouse
Click on H1 in the toolbar...
Wasn't that easy?
Mark up some subheadings and block quotations in the same way.
- You'll find blockquote on the Types menu
Save the file and look at it in your usual browser

Linking with Amaya

Go to File->Open in new window... on the menu, and type http://www.cia.gov/ in the dialog
Position the two Amaya windows so that you can see both.
Drag over the word CIA somewhere in the news story.
Click the link icon on the toolbar
Click anywhere in the CIA window...
Wasn't that easy?
Make some more links in the same way
Save the file and look at it in your usual browser

Adding a picture with Amaya

Click somewhere in your story where you'd like to put a picture
Click the picture icon on the toolbar
Browse to the file tenetbush300ap.jpg
Add a caption in the Alternate Text field
Click Confirm
Wasn't that easy?
Add another picture in the same way
Save the file and look at it in your usual browser

Organising content [1] Lists

Often you want to organise content in ways that aren't just simple text
Lists are one way
HTML has tags for four kinds of lists

<dl>

A definition list (this is one) - contains 'definition titles' (<dt>) and 'definitions' (<dt>)

<menu>

A list of links, for example for navigating a site

<ol>

An ordered list, with automatically numbered items

<ul>

An unordered list, with bulleted items
Menus, ordered lists and unordered lists all contain only 'list items' (<li>)
List items can contain anything (more or less)

Organising content [2] Tables

Tables are the most abused things in HTML. They are intended for laying out tabular data, not forcing your pages into shape!
The formal definition of the table tag is quite complex, but briefly:
- The table tag contains tr (table row) tags
- The tr tags contain a number of either th (table header) or td (table data) tags, and nothing else.
- The th and td tags can contain anything (more or less)
- Obviously, you need one 'cell' (either th or td) in each row for each column you want in the table.
- If you want to make one cell span more than one row or more than one column, you can use the rowspan and colspan attributes.

Organising content [3] Rolling your own

HTML has tags for lots of things...
- ... but it doesn't have tags for everything.
How do you markup things that HTML doesn't have tags for
Two generic tags

<div>

A block level generic tag (and you can nest block-level tags in divs) Useful for dividing a document into sections or applying special formatting to a section

<span>

An inline generic tag Useful for indicating particular things in the content.

'But it looks so boring...'

OK, not you've produced your own HTML pages
But they look boring, not like the ones on the Web
How do we change that?

Adding stylesheets with Amaya

In your 'spare' Amaya window (the one you had the CIA page in) select File->Open Document... from the menu
In the dialog click Browse
In the File Browser dialog, choose the styles directory
If you can't see anything in it, change the Filter to *.css and click the Filter button
Select any of the files and click Confirm
The stylesheet file should open in your window.
In your original Amaya window, select Style->Style sheets->Link
Click in the window with the stylesheet in it
Your page should change
We're going to talk more about stylesheets this afternoon

Why HTML is hard

We've talked about why HTML is easy
And you've seen yourself it is
- really, really easy
But most of the pages out there on the Web don't work well
Why is that?

Paper doesn't stretch

Take a piece of paper
Try to make it bigger
- What happens?
- Can you still read the text?
Try to make it smaller
- What happens?
- Can you still read the text?
Try to make the text on yout paper bigger
- and smaller
- What happens?

The Web does stretch...

Look at the page that you have written in your Amaya window
Try to make the window smaller
- What happens?
- Can you still read the text?
Try to make the window bigger
- What happens?
- Can you still read the text?
Try this with your usual browser as well.
Now try making the text bigger and smaller.
- On Amaya use Views->Zoom in and Views->Zoom out
- On Internet Explorer 5 and 6 use View->Text Size
- On Netscape Navigator 6 and 7 use View->Text Zoom
- On Opera 6 use View->Zoom

... but most commercial Web pages don't

Look at BT.com
This picture shows how the BT.com front page looks on my desktop screen, which is big...
- Look at all the space that's wasted!
And my palmtop screen, which is small.
- How do I know whether the bit I want is off the bottom or off the side?
Good web design works just as well on any screen size.

It's unfair to pick on BT. The only reason for doing so is that this course was originally written for BT people. Almost all commercial Web sites are at least this bad - many are worse. The images of the BT.com site were captured on the 11th October 2002.

More about scaling

What happens to the BT.com front page when you make the text bigger?
What happens when you make the text smaller?
If you are partially sighted you need text bigger
Good web design works just as well whatever size the user likes their fonts
It's the law!
- disabled people (that includes partially sighted people) have a right not to be discriminated against.

More on disabled access

This is what BT.com looks like in plain text
Blind people use programs which speak the text of Web pages to them
- The 'alt' attribute of an image tag is supposed to hold text to substitute if the image can't be shown - for example to a blind person
- But most of the images on the BT front page are just formatting gimmicks
  - their alt text should be blank
  - or, better still, they shouldn't be there at all
Blind people, like other disabled people, have a legal right not to be discriminated against.

About Standards...

The Web (and the Internet) are Open Systems defined by public standards
If things are standard, any company can make a component which will work
Any browser should be able to render a standards compliant Web page

...and Monopolies

Microsoft FrontPage actually cannot generate a standards compliant Web page... at all.
- It generates pages which Internet Explorer can read easily...
  - but other browsers may not be able to
  - so forcing you to use Microsoft's browser
- this is part of what the illegal monopoloy cases in the US and Europe have been about
Microsoft aren't the only ones who are guilty, of course
- When Netscape was the dominant browser on the Web it used non-standard constructs which were difficult for other browsers to emulate

What happens when you try to open BT.com in Amaya?

Open Amaya
Select File->Open Document from the menu, and type in http://www.bt.com/
What happens?
- Why do you think this is?

At the time this course was written, BT.com was using a meta refresh header and a javascript based redirect on the front page with no explanation and no noscript clause. God knows why they aren't using a proper HTTP 302 response, but they aren't. See section 10.3.3 of RFC 2616.

Why do professional Web designers make such a mess of scaling?

Most 'professional' web designers started life as (or were trained by) graphic designers
- They still think on paper
- Flexibility frightens them
Things which make flexibility work well don't work the same across all browsers
- Older browsers (including both Internet Explorer 4 and Netscape 4) handle stylesheets very badly
  - As late as version 5, Internet Explorer still gets some things wrong
- A graphic will always look the same
- Styled text won't always look the same especially on older browsers
Some people think making a thing always look the same is more important than making it usable.
A lot of people think that if it works all right with their favourite browser that's good enough.

Simon Brooke

Last modified: Mon Oct 14 10:04:23 BST 2002