Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
jon duckett
Structure
XX
XX
XX
Understanding structure
Learning about markup
Tags and elements
13
STRUCTURE
STRUCTURE
14
15
STRUCTURE
STRUCTURE
16
Structuring Word
Documents
17
STRUCTURE
STRUCTURE
18
HTML Describes
the Structure
of Pages
In the browser window you can see a web page that features exactly
the same content as the Word document you met on the page 18. To
describe the structure of a web page, we add code to the words we want
to appear on the page.
You can see the HTML code for this page below. Don't worry about what
the code means yet. We start to look at it in more detail on the next
page. Note that the HTML code is in blue, and the text you see on screen
is in black.
<html>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of
the page. And if the page is a long one it might
be split up into several sub-headings.</p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings to help you
follow the structure of what is being written.
There may even be sub-sub-headings (or lower-level
headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p>
</body>
</html>
The HTML code (in blue) is made up of characters that live inside angled
brackets these are called HTML elements. Elements are usually
made up of two tags: an opening tag and a closing tag. (The closing tag
has an extra forward slash in it.) Each HTML element tells the browser
something about the information that sits between its opening and
closing tags.
19
STRUCTURE
STRUCTURE
20
k
Code
Description
<html>
<body>
<h2>This is a Sub-Heading</h2>
Here is another paragraph between opening <p> and closing </p> tags.
<h2>Another Sub-Heading</h2>
</html>
STRUCTURE
The <body> tag indicates that anything between it and the closing
</body> tag should be shown inside the main browser window.
</body>
21
The opening <html> tag indicates that anything between it and a closing </html> tag is HTML code.
The closing </body> tag indicates the end of what should appear in the main browser window.
The closing </html> tag indicates that it is the end of the HTML code.
STRUCTURE
22
Character
Character
<p> </p>
left-angle bracket
(less-than sign)
RIGHT-angle bracket
(MORE-than sign)
RIGHT-angle bracket
(MORE-than sign)
left-angle bracket
(less-than sign)
Forward Slash
Closing Tag
Opening Tag
23
STRUCTURE
STRUCTURE
24
Attributes Tell Us
More About Elements
Attributes provide additional information
about the contents of an element. They appear
on the opening tag of the element and are
made up of two parts: a name and a value,
separated by an equals sign.
Attribute
Name
Attribute
Name
25
STRUCTURE
STRUCTURE
26
<head>
Before the <body> element you
will often see a <head> element.
This contains information
about the page (rather than
information that is shown within
the main part of the browser
window that is highlighted in
blue on the opposite page).
You will usually find a <title>
element inside the <head>
element.
/chapter-01/body-head-title.html
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is the Body of the Page</h1>
<p>Anything within the body of a web page is
displayed in the main browser window.</p>
</body>
</html>
R e s u lt
<title>
The contents of the <title>
element are either shown in the
top of the browser, above where
you usually type in the URL of
the page you want to visit, or
on the tab for that page (if your
browser uses tabs to allow you
to view multiple pages at the
same time).
27
r
STRUCTURE
28
s
Article
Start
All Programs (or Programs)
Accessories
Notepad
29
t
STRUCTURE
STRUCTURE
30
u
Article
31
v
STRUCTURE
STRUCTURE
32
w
Code in a Content
Management System
STRUCTURE
34
y
35
STRUCTURE
STRUCTURE
36
Summary
STRUCTURE
XX
XX
XX
XX
XX
XX
XX
YOU'LL LEARN TO
ONLINE SUPPORT
Web designers and programmers
Online editors and content authors
Marketing and e-commerce teams
Bloggers and hobbyists
an
.
CSS m
L & ro
s f t his
TM ite
,
b
t H bs site we ,
ou we
ly i n g
g
t
a b ld
e
nd
tin
a
i
e
s
d
n
i
i
i
.
a r d b u ex r - f r imid g u
le
ks
n
s
t
to n an er a , use e in thi boo ual
g
s
v
ay
e
g
d
n b ow
vi
w e s i o l o t iv
c a e h m i n l e , a n ie a l
c
r
er o d
p
ic
de se
nt tra
p
m
t
ic
a n ant e co e at t co will gra sim com act our
a u
o
r
o
a ac
w
o r e at
f y ng
th
n
pr
et
dp
m you e m cr and d yo al
c i ons fin es o nni d!
k
u
n
r
pi
i
co
t
o
u
n
g
a
o
t
o
o
t
s
s
a
t
i
de
t
el
y
he
t
i
e
er
n a ll a l e p a o k s e e
W h e t h o r e lp
i
n
ew la
ad
h
n d si d
o
W ratc ill h e u k in y tr a n exp ou w gn t at l nce
o
t h r ie
es
si
rd . Y
an
k w .W
sc
o
nt a lo m duc rwa les
de ites pe
bo te
p
e
o
m
n d bs
ex
n
k
o
t r ht f o a m
ta
fr
co
e a we ous
in
s
t
g
z
i
s
i
bu fer age tra ode an ate revi
f
g
e
s dc
di c h p t h
cr o p
or
e
i
n
o
t
w -siz
Ea
ca e . N
w
u
ay
s
w bite n ho t yo o u
t
by lp o tha sy
ea
so
he
te are
d
si
ISBN 978-1-118-00818-8
JON DUCKETT has been designing and building websites for fourteen years.
He has worked with both small startups and global brands and has written more
than a dozen books on web design, programming, usability and accessibility.