HTML and CSS Reference
In-Depth Information
2
Edit lounge.html
Open “lounge.html” in your editor. Add the new text and HTML that is highlighted below.
Go ahead and type this in; we'll come back and see how it all works on the next page.
<html>
<head>
<title>
Head First Lounge
</title>
</head>
<body>
<h1>
Welcome to the New and Improved Head First Lounge
</h1>
<img src="drinks.gif">
<p>
Join us any evening for
refreshing <a href="elixir.html">elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center of downtown Webville.
If you need help finding us, check out
our <a href="directions.html">detailed directions</a>.
Come join us!
</p>
</body>
</html>
Let'
s add
“New
and Im
prove
d” to
the h
eading
.
H
ere's where we a
dd the HTML f
or the link to th
e
e
lixirs.
To
creat
e link
s, we u
se the
<a
> elem
ent; w
e'll t
ake a
lo
ok at
how t
his ele
ment
w
orks in
just
a sec…
W
e ne
ed to
add
some
text
h
ere t
o poi
nt cu
stome
rs to
t
he n
ew di
rectio
ns.
And here's where we add the link to the dir
ections, again using an
<a> element.
Save lounge.html and give it a test drive.
3
When you're finished with the changes, save the file “lounge.html” and open it in
your browser. Here are a few things to try:
Click on the elixir link and the new elixir page will display.
1
Click on the browser's back button and “lounge.html”
should be displayed again.
2
Click on the directions link and the new directions page
will display.
3
