Академический Документы
Профессиональный Документы
Культура Документы
1 Button
Save to LEVEL
Drive
HTML
Tim Berners-Lee
n
u
r
o
h
w
e
l
p
o
e
p
N
e
R
m
a
s
CE
e
e
h
l
t
c
i
,
t
w
r
o
a
n
p
k
n
u
o
r
o
d
Y
a
H
e
g
r
a
L
the
.
r
o
t
a
r
e
l
e
c
c
a
ENQUIRE
So in 1984, he built something called ENQUIRE for CERN, which was
made up of Cards (Documents) and Hyperlinks (which connected the
Documents).
Hyperlink
Card
yp
Card
er
lin
k
Hyp
erli
nk
Card
Card
index.html
File extension
(tells the browser the file contains HTML)
index.html
HTML
CSS
HTML code
CSS code
What it looks like displayed in the browser
Page Title:
Recipe World
Recipe Name:
Magic Cake
Section Name:
Ingredients
Section Name:
Directions
Writing HTML
Most of the time, youll put your content in between HTML tags, which
have corresponding opening and closing versions.
HTML
<h1> Recipe World </h1>
opening
tag
the
closing
version
has
a
slash
before
the
tag
name
closing
tag
HTML
<h1>Recipe World</h1>
<h2>Magic Cake</h2>
<h3>Ingredients</h3>
<h3>Directions</h3>
More
important
Less
important
Generally speaking:
The page title/company name goes in the <h1>
The page main subject goes in the <h2>
<h3> through <h6> are used to organize other divisions of page content
HTML
<h1>Recipe World</h1>
<h2>Magic Cake</h2>
<p>Magic Cake is one of the tastiest...</p>
<h3>Ingredients</h3>
...
Add paragraph content (where
necessary) in between heading tags.
This
paragraph
describes
Magic
Cake
HTML
unordered
list
list
items
<h3>Ingredients</h3>
<ul>
<li>2 eggs</li>
<li>1 pound of sugar</li>
<li>3 sticks of butter</li>
</ul>
This
list
of
ingredients
doesn't
need
to
be
in
a
specific
order
Nesting tags
HTML tags dont have to always just contain text, they can contain other
HTML tags.
parent
children
HTML
<p>Magic Cake is one of...
<h3>Ingredients</h3>
<ul>
<li>2 eggs</li>
<li>1 pound of sugar</li>
<li>3 sticks of butter</li>
</ul>
<h3>Directions</h3>!
...
when
you
indent,
it's
easy
to
see
that
3
<li>