Chris Limb

1
Introduction to HTML

• Chris Limb

2
Tools youll be using

• INTERNET EXPLORER to view HTML
• PFE ) Programmer's File Editor ) to construct
  HTML
• ÿStart gtPrograms gt Utilities gtText Editor (PFE)

3
On the surface...
4
Inside a web page
lt!doctype html public "-//W3C//DTD HTML 4.01
Transitional//EN"gt lthtmlgt ltheadgt
lttitlegtAn Imaginary Homepagelt/titlegt lt/headgt
ltbody bgcolor"FFFFFF" text"000000"
background"texture1.jpg"gt lta
name"top"gtlt/agt ltdiv align"center"gt
lttable cellspacing"2" cellpadding"2"
border"0" width"597"gt lttrgt
lttd bgcolor"CCCCCC"gt
lth1gtImaginary Homepagelt/h1gt lt/tdgt
lt/trgt lttrgt lttdgt
ltimg src"image1.jpg" width163
height240 border0 alt"pic" align"left"gt
ltpgtSome general text which doesn't
actually say anything at all, but which has
in fact merely been inserted to prove
a point about paragraphs within webpages or
something. You know the kind of thing I mean.
Some people would insert lorum ipse etc but
I'm not sure about that at the moment. How
about something in French?lt/pgt
ltpgtUn certain texte général qui n'indique
réellement rien du tout, mais qui en fait a
été simplement inséré pour prouver un point au
sujet des paragraphes dans des webpages ou
quelque chose. Vous savez le genre de chose que
je veux dire. Certains inséreraient l'ipse
etc.. de lorum mais je ne suis pas sûr à ce
sujet à l'heure actuelle. Que diriez-vous de de
quelque chose en français?lt/pgt
ltbr clear"left"gt lthr size"1"gt
lth3gtSo what's on this page?lt/h3gt
ltul type"square" compactgt
ltligtlta href"info"gtltstronggtSome
Informationlt/stronggtlt/agtlt/ligt
ltligtlta href"useful"gtltstronggtSome Useless
Factslt/stronggtlt/agtlt/ligt ltligtlta
href"links"gtltstronggtSome Links to
Elsewherelt/stronggtlt/agtlt/ligt
ltligtlta href"thatsit"gtltstronggtThat's
itlt/stronggtlt/agtlt/ligt
lt/ulgt lthr size"1"gt lt/tdgt
lt/trgt lt/tablegt lt/divgt
lt/bodygt lt/htmlgt
5
What is HTML?
lttaggt
Some text enclosed by two tags
lt/taggt
6
A very basic HTML document
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"gt
lthtmlgt
ltheadgt
lt/headgt
ltbodygt
lt/bodygt
lt/htmlgt
7
Whats the HEAD for?
ltheadgt
lttitlegt
lt/titlegt
My First HTML Page
lt/headgt
8
Whats the BODY for?
ltbody gt
WELCOME TO MY FIRST WEBPAGE Who am I? Chris
Limb email C.Limb_at_susx.ac.uk
lt/bodygt
9
So remember, your web page will contain
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"gt
lthtmlgt
ltheadgt
lttitlegt
lt/titlegt
The Title
lt/headgt
ltbodygt
... all of the page content goes here ...
lt/bodygt
lt/htmlgt
10
Think of it as an HTML tree...
head
title
html
body
...
...
...
11
Practical 1 creating your first web page
Using PFE you will create your first simple
webpage, and will view it in Internet
Explorer (see handout for details)
12
Part Two Formatting the Text
13

Paragraphs and Line Breaks
This text has no formatting so any typed
line-breaks you put in are totally ignored by the
browser
ltpgt
However this is a paragraph
lt/pgt
Whilst this is a paragraph
ltbrgt
ltpgt
with a line-break in it
lt/pgt
14

Headings
lth1gt
This is a large heading
lt/h1gt
lth2gt
And this a slightly smaller one
lt/h2gt
lth3gt
This a smaller one still
lt/h3gt
15
Simple Text Formatting
ltstronggt
Strong text
lt/stronggt
ltemgt
Emphasised text
lt/emgt
ltstronggt
Strong emphasised
lt/stronggt
ltemgt
lt/emgt
ltemgt
Emphasised strong
lt/emgt
ltstronggt
lt/stronggt
ltstronggt
Dont do this!
lt/emgt
ltemgt
lt/stronggt
ltemgt
Dont do this!
lt/stronggt
ltstronggt
lt/emgt
16

Unordered Lists (bullet points)
ltulgt
Cat
ltligt
lt/ligt
ltligt
Dog
lt/ligt
Goldfish
ltligt
lt/ligt
ltligt
Rhinoceros
lt/ligt
lt/ulgt
17
Ordered Lists (numbering)
ltolgt
Cassette
ltligt
lt/ligt
ltligt
CD
lt/ligt
Vinyl
ltligt
lt/ligt
ltligt
Minidisc
lt/ligt
lt/olgt
18

Special Characters (" lt gt etc)
quot
Hello,
quot
lt/pgt
ltpgt
she said.
pound
1.99 only
lt/pgt
ltpgt
eacute
r
sum
eacute
lt/pgt
ltpgt
gt
lt
,
and
amp
are special in HTML
ltpgt
lt/pgt
19
Back to the HTML tree...
html
body
h1,h2,h3...
p
br
ol
ul
strong
em
li
li
20
Practical 2 adding text to your web page
Using PFE you will add text and tags to the page
you created in Practical 1 (see handout for
details)
21
Part Three Adding Images
22

Attribute and Value
lttag
attribute"value"
gt
23

The Image Tag
ltimg
src
gt
"picture.jpg"
ltimg
src
gt
"picture.jpg"
alt
"The Campus"
The Campus
24

Aligning the Image Tag (LEFT)
ltimg
src
gt
"picture.jpg"
align
"left"
Some meaningless text, just inserted to
illustrate how the image alignment works. That's
all it is.
ltpgt
lt/pgt
25

Aligning the Image Tag (RIGHT)
ltimg
src
gt
"picture.jpg"
align
"right"
Some meaningless text, just inserted to
illustrate how the image alignment works. That's
all it is.
ltpgt
lt/pgt
26

Stopping Text Wrapping
ltimg
src
gt
"image1.jpg"
align
"left"
Some meaningless text, just inserted to
illustrate how image alignment works.
ltpgt
ltbr clear"left"gt
That's all it is.
lt/pgt
That's all it is.
27

Using an Image as a Background
ltbody
background
gt
"texture1.jpg"
lth1gt
My First HTML Page
lt/h1gt
28
Back to the HTML tree...
html
body background
h1,h2,h3...
p
br
img src
ol
ul
strong
em
li
li
29
Practical 3 adding images
Using PFE you will add image tags to the page you
saved in Practical 2 (see handout for details)
30
Part Four Adding Links
31

The Anchor Tag as a Link
lta
A link to another
href
gt
"file2.html"
lt/agt
HTML File
- a local link to a local file
32

The Anchor Tag as a Link
lta
href
gt
"http//www.sussex.ac.uk"
A link
lt/agt
to the University of Sussex Web Site
- an absolute link that would work from
absolutely anywhere
33

The Anchor Tag as an Anchor
lta
lt/agt
name
gt
"top"
Top of the page
lta
lt/agt
href
gt
"top"
A link to the top
lta
href
gt
"mydoc.htmltop"
A link to
lt/agt
the top of My First HTML Page
A link to the top
34

The Anchor Tag as an Email Link
Send me an email by clicking here
"mailtoC.Limb_at_sussex.ac.uk"
lta
href
gt
lt/agt
C.Limb_at_sussex.ac.uk
35
A final look at the HTML tree...
html
body background
a href name
h1,h2,h3...
p
br
img src
ol
ul
strong
em
li
li
36
Practical 4 adding links
Using PFE you will add links to the page you
saved in Practical 3 (see handout for details)
37
What does FTP do?
38
What does FTP do?