HTML and CSS Reference
In-Depth Information
<input type = "text"
id = "email"
onChange="checkEmail()" />
JavaScript Behavior
body { background-color:silver; }
p.first { font-family:"sans serif"; }
h1, h2, h3 { color: darkblue; }
CSS Styles
<html>
<head>
<title>HTML Page</title>
</head>
<body>
<h3>Hello, world!</h3>
</body>
</html>
HTML Content
Figure 1.5
Three layers that make up a Web page.
Content or Structure.
In Web development, HTML/XML markup makes up the
content layer, and it also structures the Web document. The content layer is what a
viewer sees when he or she comes to your Web page. Content can consist of text or
images and include the links and anchors a viewer uses to navigate around your Web
site. Because HTML/XML elements are used to create the structural content of your
page, misusing those elements might not seem relevant for a quick visual fix, but might
be very relevant when applying CSS and JavaScript. For example, using headings out of
order to force a change in font size, such H1, H3, and then H2 tags, in that order is
invalid HTML. These tags are intended to define the structure of the document on the
display. The browser views the Web page as a tree-like structure, a model consisting of
objects, where each HTML element (e.g., HEAD, BODY, H1) is an object in the model.
This document tree, the DOM, defines the hierarchical logic of your document, which
becomes an important tool for creating dynamic content. Because the structure is so
important, valid markup should be a priority before going to the next layer: the CSS pre-
sentation layer. See Section 1.12 for markup validation tools.
Style or Presentation.
The style or presentation layer is how the document will
appear and on what media types. This layer is defined by CSS. Prior to CSS, nearly all of
the presentation was contained within the HTML markup; all font colors, background
styles, element positions and alignments, borders, and so on, had to be explicitly, often
repeatedly, included in the HTML markup for the page. If, for example, you decided you
wanted your page to have a blue font for all headings, then you would have to change
each heading in the document. CSS changed all that. It gave designers the ability to
move the presentational content into separate style sheets, resulting in much simpler
HTML markup. Now you could change the font color in one place to affect all of the
pages in your site. Although styles can be embedded within a document and give you
