Head First html and css

x
 
1
The Language of the Web
getting to know html

 

 
 

Kick’n Tunes

BT - Satellite: 
nice downbeat tune. 




...

 

 
 

Kick’n Tunes

BT - Satellite: 
nice downbeat tune. 




...

 

 
 

Kick’n Tunes

BT - Satellite: 
nice downbeat tune. 




...

 

 
 

Kick’n Tunes

BT - Satellite: nice down-
beat tune. 




...
“I
 ne
ed 
the H
TML f le ‘lounge.htm
l’”
“Found it, here ya go”
Web Server
No pressure, but 
thousands of people are going 
to visit this web page when you’re 
finished. It not only needs to be 
correct, it’s gotta look great, 
too!
The only thing that is standing between you and getting 
yourself on the Web is learning to speak the lingo
:
HyperText Markup Language, or HTML for short. So, get ready for some language 
lessons. After this chapter, not only are you going to understand some basic 
elements
of HTML, but you’ll also be able to speak HTML with a little 
style. 
Heck, 
by the end of this book, you’ll be talking HTML like you grew up in Webville. 
The web killed the radio star 
2
What does the web server do? 3
What you write (the HTML)
 
 
 
4
What 
the 
browser 
creates 
5
Your big break at Starbuzz Coffee 
 
 
 
9
Creating the Starbuzz web page 
 
 
 
11
Creating an HTML file (Mac) 
 
 
 
12
Creating an HTML file (Windows) 
 
 
 
14
Meanwhile, back at Starbuzz Coffee…
 
 
17
Saving 
your 
work 
18
Opening your web page in a browser
 
 
19
Take your page for a test drive 
 
 
 
20
Are 
we 
there 
yet? 
23
Another 
test 
drive 
24
Tags 
dissected 
25
Meet 
the 
style 
element 
29
Giving 
Starbuzz 
some 
style… 
30
Cruisin’ 
with 
style… 31
Exercise 
Solutions 
38
table
 
of
 
contents

---

xi
2
Meeting the “HT” in HTML
going further with hypertext
Did someone say “hypertext?” What’s that? 
Oh, only the entire 
basis of the Web. In Chapter 1 we kicked the tires of HTML and found it to be a nice 
markup language (the “ML” in HTML) for describing the structure of web pages. Now 
we’re going to check out the “HT” in HTML, hypertext, which will let us break free of 
a single page and link to other pages. Along the way we’re going to meet a powerful 
new element, the element, and learn how being “relative” is a groovy thing. So, 
fasten your seat belts
—
you’re about to learn some hypertext.
Head First Lounge, new and improved 
44
Creating 
the 
new 
lounge 
46
What 
did 
we 
do? 
48
Understanding 
attributes 
51
Getting 
organized 
56
Organizing 
the 
lounge… 
57
Technical 
difficulties 58
Planning 
your 
paths… 
60
Fixing 
those 
broken 
images… 
66
Exercise 
Solutions 
73
table
 
of
 
contents

---

xii
 
3
Web Page Construction
building blocks
h2
img
img
p
h2
h2
h1
p
p
p
I was told I’d actually be creating web pages in this book? 
You’ve certainly learned a lot already: tags, elements, links, paths…but it’s all for 
nothing if you don’t create some killer web pages with that knowledge. In this chapter 
we’re going to ramp up construction: you’re going to take a web page from conception 
to blueprint, pour the foundation, build it, and even put on some finishing touches. All 
you need is your hard hat and your toolbelt, as we’ll be adding some new tools and 
giving you some insider knowledge that would make Tim “The Toolman” Taylor proud.
From journal to website, at 12 mph 
 
 
 
79
The 
rough 
design 
sketch 
80
From a sketch to an outline
 
 
 
81
From the outline to a web page 
 
 
 
82
Test-driving 
Tony’s 
web 
page 
84
Adding 
some 
new 
elements 
85
Meet the 

 
element 
86
Looooong 
quotes 
90
Adding a blockquote
 
 
 
 
91
The real truth behind the 

 and 

mystery
94
Meanwhile, back at Tony’s site… 
 
 
 
100
Of course, you could use the 

 element to make a list…

101
Constructing HTML lists in two easy steps 
 
 
102
Taking a test drive through the cities 
 
 
 
104
Putting one element inside another is called “nesting” 
 
107
To understand the nesting relationships, draw a picture 
 
108
Using nesting to make sure your tags match 
 
 
109
Exercise 
Solutions 
117