The body and head are always wrapped in an html element. Example 1-3 shows the
snippet in the context of a proper HTML document. For now the head section contains
a title element, which tells the browser what text to display in the title bar of the
window.
Example 1-3. A proper HTML document
<html>
<head>
<title>My Awesome Page</title>
</head>
<body>
<h1>Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
<ul>
<li>Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
</body>
</html>
Normally, when you are using your web browser you are viewing pages that are hosted
on the Internet. However, browsers are perfectly good at displaying HTML documents
that are on your local machine as well. To show you what I mean, I invite you to crack
open a text editor and enter the code in Example 1-3.
Picking the Right Text Editor
Some text editors are not suited for authoring HTML. In particular, you want to avoid
editors that support rich text editing, like Microsoft WordPad (Windows) or TextEdit
(Mac OS X). These types of editors can save their files in formats other than plain text,
which will break your HTML. If you must use TextEdit, save in plain text by choosing
Format→Make Plain Text. In Windows, use Notepad instead of WordPad.
If you are in the market for a good text editor, my recommendation on the Mac is
TextMate. There is a clone version for Windows called E Text Editor.
If free is your thing, you can download Text Wrangler for Mac. For Windows, Note
pad2 and Notepad++ are highly regarded. Linux comes with an assortment of text
editors, such as vi, nano, emacs, and gedit.
When you are finished entering the code from Example 1-3, save it to your desktop as
test.html and then open it with Chrome by either dragging the file onto the Chrome
application icon or opening Chrome and selecting File→Open File. Double-clicking
test.html will work as well, but it could open in your text editor or another browser,
depending on your settings.
Even if you aren’t running Mac OS X, you should use Chrome when
testing your Android web apps on a desktop web browser, because
Chrome is the closest desktop browser to Android’s mobile browser.
Chrome is available for Mac and Windows from http://google.com/
chrome.
Introduction to CSS
As you’ve seen, browsers render certain HTML elements with distinct styles (for example,
headings are large and bold, paragraphs are followed by a blank line, and so
forth). These styles are very basic and are primarily intended to help the reader understand
the structure and meaning of the document.
To go beyond this simple structure-based rendering, you use Cascading Style Sheets
(CSS). CSS is a stylesheet language that you use to define the visual presentation of an
HTML document. You can use CSS to define simple things like the text color, size, and
style (bold, italic, etc.), or complex things like page layout, gradients, opacity, and much
more.
Example 1-4 shows a CSS rule that instructs the browser to display any text in the body
element using the color red. In this example, body is the selector (this specifies what is
affected by the rule) and the curly braces enclose the declaration (the rule itself). The
declaration includes a set of properties and their values. In this example, color is the
property, and red is the value of the color property.
Example 1-4. A simple CSS rule
body { color: red; }
Property names are predefined in the CSS specification, which means that you can’t
just make them up. Each property expects an appropriate value, and there can be lots
of appropriate values and value formats for a given property.
For example, you can specify colors with predefined keywords like red, or by using
HTML color code notation, which uses a hexadecimal notation: a hash/pound sign
(#) followed by three pairs of hexadecimal digits (0–F) representing (from left to right)
red, green, and blue values (red is represented as #FF0000). Properties that expect measurements
can accept values like 10px, 75%, and 1em. Example 1-5 shows some common
declarations. The color code shown for background-color corresponds to the CSS
“gray.”
Example 1-5. Some common CSS declarations
body {
color: red;
background-color: #808080;
font-size: 12px;
font-style: italic;
font-weight: bold;
font-family: Arial;
}
Selectors come in a variety of flavors. If you want all of your hyperlinks (the a element)
to display in italics, add the following to your stylesheet:
a { font-style: italic; }
If you want to be more specific and only italicize the hyperlinks that are contained
somewhere within an h1 tag, add the following to your stylesheet:
h1 a { font-style: italic; }
You can also define your own custom selectors by adding id and/or class attributes to
your HTML tags. Consider the following HTML snippet:
<h1 class="loud">Hi there!</h1>
<p>Thanks for visiting my web page.</p>
<p>I hope you like it.</p>
<ul>
<li class="loud">Pizza</li>
<li>Beer</li>
<li>Dogs</li>
</ul>
If we add .loud { font-style: italic; } to the CSS for this HTML, Hi there! and
Pizza will show up italicized because they both have the loud class. The dot in front of
the .loud selector is important—it’s how the CSS knows to look for HTML tags with
a class of loud. If you omit the dot, the CSS will look for a loud tag, which doesn’t exist
in this snippet (or in HTML at all, for that matter).
Applying CSS by id is similar. To add a yellow background fill to the highlight paragraph
tag, use the following rule:
#highlight { background-color: yellow; }
Here, the # symbol tells the CSS to look for an HTML tag with the ID highlight.
To recap, you can opt to select elements by tag name (e.g., body, h1, p), by class name
(e.g., .loud, .subtle, .error), or by ID (e.g., #highlight, #login, #promo). And, you can
get more specific by chaining selectors together (e.g., h1 a, body ul .loud).
There are differences between class and id. Use class attributes when
you have more than one item on the page with the same class value.
Conversely, id values have to be unique to a page.
When I first learned this, I figured I’d just always use class attributes so
I wouldn’t have to worry about whether I was duping an ID value.
However, selecting elements by ID is much faster than by class, so you
can hurt your performance by overusing class selectors.
No comments:
Post a Comment