HTML and CSS Reference
In-Depth Information
Q:
So HTML is just a bunch of tags
that I put around my text?
A:
For starters. Remember that HTML
stands for HyperText Markup Language, so
HTML gives you a way to “mark up” your text
with tags that tell the browser how your text
is structured. But there is also the HyperText
aspect of HTML, which we'll talk about a little
later in the topic.
Q:
How does the browser decide how
to display the HTML?
A:
HTML tells your browser about the
structure of your document: where the
headings are, where the paragraphs are,
what text needs emphasis, and so on. Given
this information, browsers have built-in
default rules for how to display each of these
elements.
HTML documents become more complicated,
you'll find a few spaces, returns, and tabs
here and there really help to improve the
readability of the HTML.
Q:
So there are two levels of headings,
<h1> and a subheading <h2>?
A:
Actually there are six, <h1> through
<h6>, which the browser typically displays in
successively smaller font sizes. Unless you
are creating a complex and large document,
you typically won't use headings beyond
<h3>.
Q:
Why do I need the <html> tag? Isn't
it obvious this is an HTML document?
A:
The <html> tag tells the browser your
document is actually HTML. While some
browsers will forgive you if you omit it, some
won't, and as we move toward “industrial-
strength HTML” later in the topic, you'll see it
is quite important to include this tag.
Q:
What makes a file an HTML file?
A:
An HTML file is a simple text file.
Unlike a word processing file, there is
no special formatting embedded in it. By
convention, we add an “.html” to the end of
the filename to give the operating system a
better idea of what the file is. But, as you've
seen, what really matters is what we put
inside the file.
Q:
Everyone is talking about HTML5.
Are we using it? If so, why aren't we
saying “HTML-FIVE” instead of “HTML”?
A:
You're learning about HTML, and
HTML5 just happens to be the latest version
of HTML. HTML5 has had a lot of attention
recently, and that's because it simplifies
many of the ways we write HTML and
enables some new functionality, which
we're going to cover in this topic. It also
provides some advanced features through
its JavaScript application programming
interfaces (APIs), and those are covered in
Head First HTML5 Programming.
Q:
Markup seems silly. What-you-see-
is-what-you-get applications have been
around since, what, the '70s? Why isn't
the Web based on a format like Microsoft
Word or a similar application?
A:
The Web is created out of text files
without any special formatting characters.
This enables any browser in any part of the
world to retrieve a web page and understand
its contents. There are WYSIWYG
applications out there like Dreamweaver,
and they work great. But in this topic we're
going to take it down to the bare metal, and
start with text. Then you're in good shape
to understand what your Dreamweaver
application is doing behind the scenes.
Q:
Is there any way to put comments
to myself in HTML?
A:
Yes, if you place your comments in
between <!-- and --> the browser will totally
ignore them. Say you wanted to write a
comment “Here's the beginning of the lounge
content.” You'd do that like this:
<!-- Here's the beginning of
the lounge content -->
But you don't have to settle for the default
settings. You can add your own style and
formatting rules with CSS that determine
font, colors, size, and a lot of other
characteristics of your page. We'll get back
to CSS later in the chapter.
Q:
The HTML for the Head First
Lounge has all kinds of indentation and
spacing, and yet I don't see that when it
is displayed in the browser. How come?
A:
Correct, and good catch. Browsers
ignore tabs, returns, and most spaces in
HTML documents. Instead, they rely on
your markup to determine where line and
paragraph breaks occur.
Notice that you can put comments on
multiple lines. Keep in mind anything you put
between the “<!--” and the “-->”, even HTML,
will be ignored by the browser.
So why did we insert our own formatting if
the browser is just going to ignore it? To help
us more easily read the document when
we're editing the HTML. As your