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)
- 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
- 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
- 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
- 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