running example - cs.ucc.iedgb/courses/wd1/lectures/03_elements_1.pdf · nothing else is suitable 8...
TRANSCRIPT
CS
1115
/CS
5002
Web
Dev
elop
men
t 1D
r Der
ek B
ridge
Sch
oo
l of C
om
pu
ter
Sci
ence
& In
form
atio
n T
ech
no
log
y
Un
iver
sity
Co
lleg
e C
ork
1 o
f 9
Run
ning
exa
mpl
e<!DOCTYPE html>
<htmllang="en">
<head><metacharset="utf-8"/>
<title>Party Party Party - Cocktails - Mojitos</title>
<linkrel="stylesheet"href="styles.css"/>
</head>
<body>
<header>
<h1>Party-Party-Party</h1>
<p>The site for all your party needs</p>
</header>
<nav> <ul><li>Cocktails
<ul><li><ahref="cubalibre.html"lang="es">Cuba Libre</a></li>
<li><ahref=""lang="es">Mojitos</a></li>
<li><ahref="screwdriver.html">Screwdriver</a></li>
<li><ahref="zombie.html">Zombie</a></li>
</ul>
</li>
<li>Finger Food
<ul><li><ahref="guacamole.html"lang="es">Guacamole</a></li>
<li><ahref="pizzafritata.html"lang="it">Pizza Fritata</a></li>
<li><ahref="samosas.html"lang="pa">Samosas</a></li>
</ul>
</li>
<li>Party Games
<ul><li><ahref="spinthebottle.html">Spin-the-Bottle</a></li>
<li><ahref="twister.html">Twister</a></li>
</ul>
</li>
</ul>
</nav>
<main>
<h1>Mojitos</h1>
<p>
To bring the spirit of the Caribbean to your party, why not serve
<iclass="cocktail"lang="es">Mojitos</i>? Sweet but cool, they're
sure to get you in touch with your Latin side.
</p>
<figure>
<imgsrc="mojito.jpg"title="A mojito"
alt="A mojito is packed with mint leaves and served in a long glass."/>
<figcaption>
<ahref="https://www.flickr.com/photos/preppybyday/5084101811/">Mojito</a>
<spanclass="attribution">
by <ahref="https://www.flickr.com/photos/preppybyday/">The Culinary Geek</a>
(licenced under <ahref="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0
</span>
</figcaption>
</figure>
<sectionid="ingredients">
<h1>Ingredients</h1>
<ul><li>2 oz. <em>white</em> rum</li>
<li>8 <em>fresh</em> mint leaves</li>
2 o
f 9
<li>4 tsp. sugar</li>
<li>ice</li>
<li>½ lime</li>
<li>7 oz. club soda</li>
</ul>
</section>
<sectionid="instructions">
<h1>Instructions</h1>
<p>
For the best <iclass="cocktail"lang="es">Mojitos</i> this side
of Waterford,
</p>
<ol><li>Gently <b>crush</b> the mint leaves in a cool tall glass;</li>
<li><b>squeeze</b> the lime over the leaves;</li>
<li><b>sprinkle</b> the sugar into the mix;</li>
<li><b>fill</b>withice;</li>
<li><b>toss in</b> the rum;</li>
<li><b>trickle in</b> in the club soda; and finally</li>
<li><b>stir</b> lightly.</li>
</ol>
</section>
<pid="warning">
<strong>Enjoy alcohol sensibly.</strong>
</p>
</main>
<aside>
<h1>Did you know…?</h1>
<p><iclass="cocktail"lang="es">Mojito</i> is pronounced
<i>Moh-HEE-toh</i>.
</p>
<p><iclass="cocktail"lang="es">Mojitos</i> should be served in a
Collins glass.
</p>
<p><iclass="cocktail"lang="es">Mojitos</i> were a favourite with author
<ahref="http://en.wikipedia.org/wiki/Ernest_Hemingway">Ernest Hemingway</a>.
It is said that he enjoyed them at their birthplace,
<ilang="es">La Bodeguita del Medio</i> in Havana, Cuba.
</p>
</aside>
<footer>
<p><small>
© Derek Bridge. All rights reserved.
</small>
</p>
</footer>
</body>
</html>
3 o
f 9
HTM
L5 e
lem
ents
The
re a
bout
110
ele
men
ts in
HT
ML5
For
Web
Dev
elop
men
t 1, y
ou s
houl
d le
arn:
html,head, meta, title, link, body
h1—h6, p, ul, ol, li
section, article, header, footer, nav, aside, div
em, strong, i, b, small, span
a img, picture, figure, figcaption, video, audio
table, caption, tr, th, td
For
Web
Dev
elop
men
t 2, y
ou s
houl
d ad
ditio
nally
lear
n:form, input, label, select, option, fieldset, legend, canvas,script
Be
war
ned:
Man
y el
emen
ts in
HT
ML4
and
ear
lier
are
not i
n H
TM
L5, e
.g.
font,center, big
Sev
eral
ele
men
ts in
HT
ML4
and
ear
lier
have
new
mea
ning
s in
HT
ML5
, e.g
.i, b,small
Ele
men
ts fo
r pag
e st
ruct
ure
header
A g
roup
of i
ntro
duct
ory
elem
ents
nav
A g
roup
of p
age
or s
ite n
avig
atio
n lin
ks (
a na
viga
tion
men
u)main T
he m
ain
cont
ent o
f the
pag
e (o
nly
one
per
page
; nev
er n
este
d w
ithin
the
othe
rel
emen
ts o
n th
is s
lide)
aside A g
roup
of c
onte
nt th
at is
tang
entia
lly r
elat
ed to
the
page
or
surr
ound
ing
cont
ext (
e.g.
an a
dver
tisin
g si
deba
r)footer
Info
rmat
ion
abou
t the
pag
e or
sec
tion
or a
rtic
le (
auth
or, c
opyr
ight
, etc
.)
4 o
f 9
Sec
tions
and
art
icle
sA
n H
TM
L5 section
is a
them
atic
gro
upin
g—us
ually
par
t of a
larg
er w
hole
An
HT
ML5
article
is a
lso
a th
emat
ic g
roup
ing—
but t
his
time
one
that
is s
elf-
cont
aine
d
Rul
e-of
-thu
mb:
if y
ou c
an im
agin
e co
pyin
g th
e co
nten
t and
reu
sing
it e
lsew
here
—on
anot
her
page
—or
dis
trib
utin
g it
for
othe
rs to
use
on
thei
r si
tes,
then
use
article
section
s &
article
s of
ten
cont
ain h1
s or
eve
n header
s &
footer
s
You
can
nes
t section
s &
article
s w
ithin
oth
er section
s &
article
s
Cla
ss e
xerc
ise:
section
or article
?T
he c
hapt
ers
of a
sto
ry
A s
choo
l new
s le
tter
cont
ains
a w
rite-
up o
f a r
ecen
t sch
ool t
heat
rical
pro
duct
ion,
an
anno
unce
men
t of a
stu
dent
ach
ieve
men
t aw
ard,
and
pub
licity
for
a fu
nd-r
aisi
ng fê
te
A c
orpo
rate
web
site
con
tain
s a
page
of p
ress
rel
ease
s—st
orie
s th
at th
e co
mpa
ny h
asw
ritte
n ab
out i
tsel
f
A s
cien
tist w
rites
a w
eb p
age
that
des
crib
es a
n ex
perim
ent:
intr
oduc
tion,
met
hod,
resu
lts, c
oncl
usio
ns
A tu
toria
l on
a w
eb p
age
com
pris
es a
seq
uenc
e of
less
ons
Blo
g po
sts
on a
blo
g
Eac
h ad
vert
isem
ent o
n a
page
of c
lass
ified
ads
Eac
h po
st in
an
Inte
rnet
foru
m
A h
ome
page
con
tain
s a
wel
com
e bl
urb,
a s
et o
f lin
ks to
oth
er p
ages
, and
som
eco
ntac
t inf
orm
atio
n
An
esta
te a
gent
has
a w
eb p
age
that
des
crib
es a
hou
se. T
he p
age
cont
ains
ade
scrip
tion
of e
ach
room
in th
e ho
use
Que
stio
n: W
hat h
appe
ns if
you
mak
e th
e w
rong
cho
ice?
5 o
f 9
The div
elem
ent
In e
arlie
r ver
sion
s of
HT
ML,
we
grou
ped
the
elem
ents
of a
docu
men
t usi
ng div
It ot
herw
ise
has
no m
eani
ng
In H
TM
L5 w
eb s
ites,
div
is a
last
reso
rt—w
hen
noth
ing
else
is s
uita
ble—
and
shou
ld b
e m
uch
rare
r!
Hea
ding
s, a
gain
We
saw
that
<h1>
was
for m
ajor
hea
ding
s
But
it's
not
just
for t
he m
ain
head
ing
on y
our p
age,
e.g
.in
the <header>
It's
also
for t
he m
ain
head
ing
with
in e
ach <section>,
<article>,
etc
.
<h2>
, <h3>,
<h4>,
<h5>
and <h6>
:
Can
be
used
for l
ower
-ran
k he
adin
gs
But
I pr
efer
to a
void
usi
ng th
em a
ltoge
ther
6 o
f 9
HTM
L5: T
ext-l
evel
ele
men
tsU
se em
to e
mph
asiz
e a
span
of t
ext f
or c
ontra
st
Use
strong
to d
raw
spe
cial
atte
ntio
n to
an
impo
rtant
spa
nof
text
Use
i w
hen
you
need
to d
istin
guis
h a
title
, a n
ame,
ate
chni
cal t
erm
or a
phr
ase
in a
fore
ign
lang
uage
from
surr
ound
ing
text
Use
b to
dis
tingu
ish
keyw
ords
or k
ey p
hras
es fr
omsu
rrou
ndin
g te
xt
Cla
ss e
xerc
ise:
em,
strong,
i o
r b?
Tha
t's n
ot a
bad
ger!
It's
a s
havi
ng b
rush
.
Sav
e yo
ur w
ork
to d
isk
frequ
ently
.
If it'
s no
t you
r ow
n w
ork,
you
will
sco
re z
ero.
Wel
l, In
trodu
ctio
n to
Pro
gram
min
g is
my
favo
urite
mod
ule.
CS
1117
teac
hes
you
how
to w
rite
prog
ram
s an
d ho
w to
test
them
.
Lito
st is
a C
zech
wor
d th
at is
virt
ually
unt
rans
late
able
but
mea
ns s
omet
hing
like
a s
tate
of a
gony
and
torm
ent c
reat
edby
the
sudd
en s
ight
of o
ne's
ow
n m
iser
y.
7 o
f 9
HTM
L5: big
and
small
The
big
tag
has
gone
The
small
tag
has
been
red
efin
ed
it is
now
mar
ks u
p sm
all p
rin
t: s
hort
spa
ns o
f tex
t tha
t pre
sent
dis
clai
mer
s,ca
veat
s, le
gal r
estr
ictio
ns, c
opyr
ight
s or
attr
ibut
ion,
e.g
.<footer>
<p><small>
© Derek Bridge.All rights reserved.
</small>
</p>
</footer>
The span
ele
men
tLi
ke <div>
, the
<span>
elem
ent h
as n
o m
eani
ng
It is
use
d as
a la
st re
sort—
to m
ark
up a
run
of te
xt w
hen
noth
ing
else
is s
uita
ble
8 o
f 9
Doe
s it
mat
ter?
Cho
osin
g th
e 'w
rong
' tag
s of
ten
has
no v
isib
leco
nseq
uenc
es
But
cho
osin
g th
e 'ri
ght'
tags
has
adv
anta
ges:
can
mak
e it
easi
er to
writ
e go
od C
SS
can
mak
e it
easi
er to
writ
e go
od J
avaS
crip
t
can
mak
e it
easi
er fo
r scr
een
read
ers
and
othe
ras
sist
ive
tech
nolo
gies
to p
rese
nt th
e pa
ges
to u
sers
who
hav
e di
sabi
litie
s
can
mak
e it
easi
er fo
r sea
rch
engi
nes
to in
dex
your
page
s co
rrec
tly
9 o
f 9