The Structure of Web Pages
Overview
The essential nature of a Web page is that it is a rectangular box. That outermost box may be the same size as the browser window through which you are viewing the page, but it may not—that’s when the scrollbars appear. The visual layout of a Web page consists of a collection of rectangular boxes. An effective way to design a page is to think in terms of filling a grid with boxes that may or may not overlap. Everything is a rectangular box, from the browser window to the smallest HTML element inside the browser window.
- Boxes may contain other boxes may contain other boxes may contain.... You get the idea. This is an important concept: elements have a parent/child relationship when they contain other elements. You can take advantage of these relationships to target styling to specific elements.
- Boxes can be positioned on the screen in different ways:
- static positioning, the default where blocks line up one after another down the page
- fixed in place, even when you scroll
- positioned relative to another box
- positioned in an absolute location, which may be a percentage: left:15%;
- floating to the left or right side of other elements.
- Boxes may overlap other boxes partially or completely. You can even specify a stacking order (z-index) if you plan on overlapping your page elements. You can also reduce the opacity of boxes to make things show through from underneath.
- Boxes can be any size, and the size can be fixed or fluid.
- Things may not look like boxes. Clever designers can use all sorts of techniques (usually image backgrounds with transparency) to reduce the apparent blockiness.
- You can read a lot more about this on the Layouts with CSS page.
ME!
FIXED
Position
What Does a Web Page Look Like?
Since an HTML page is just a text file, you can look at it in any program that opens up simple text files. As soon as you open up such a file, you will immediately see things that don’t look like regular text. These are HTML tags, which are surrounded by angle brackets, as in <h1> or <ul class="biglist">. You might also find style declarations and Javascript code, but we’ll leave that for later.
What are the Basic Components of Web Pages?
An HTML page is structured like an outline (or a tree diagram). There are only a few top-level elements in the outline, but every element is a container for more elements, each of which may contain yet more elements. A well-formed page has these top-level elements:
- <DOCTYPE>: a single declaration that is always the first line of an HTML file. There are 4 valid doctypes, depending on how stringently valid your HTML code is expected to be. By default, we’ll be using the XHTML 1.0 Strict doctype. If omitted, however, most browsers will assume the file uses the oldest, weakest form of HTML, which gives the most room for errors. There are additional doctypes for pages that use frames, but their use is discouraged by most Web cognoscenti.
- <HTML>: this declaration wraps around everything else in the file after DOCTYPE.
- <HEAD> and </HEAD>: the HEAD section contains information about the page, as well as external files that are required (Javascript, CSS).
- <BODY> and </BODY>: the BODY section wraps around the content of the Web page that is actually available to viewers.
- </HTML>: this declaration at the end wraps around everything else in the HTML file.
I have created sample HTML, CSS, and Javascript files that you can use as a starting point for your own pages. I also created a simpler version that does not load any CSS or Javascript files.
Outline of Basic Web Page
<html>
. . . the HEAD content describes the page and its components, but says nothing about the content. . .
</head>
. . . the BODY section contains the actual visible content of the page . . .
</body>
Simple Web page with Common Elements (in XHTML)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- this is an HTML COMMENT, which is completely ignored -->
<title>Canonical Page v1</title>
<meta name="description" content="This is the class Web site for CIS86 in Spring 2009." />
<meta name="keywords" content="College of the Redwoods,CIS86,HTML,Web Page Design" />
<script type="text/JavaScript" language="javascript" src="CSS/CIS86.js"></script>
<link href="CSS/CIS86.css" rel="stylesheet" type="text/css" />
<link href="CSS/CIS86-Print.css" rel="stylesheet" type="text/css" media="print" />
<style type="text/css">
h2 { color:#0033ff; }
/* this is a comment inside CSS (either <style> or an external CSS file) */
.highlight { background-color:#ffff66; }
</style>
<body>
<h2>This is a header for a simple page.</h2>
<div class="highlight" >
<img src="images/example.jpg" alt="This is an example image." />
<p style="font-weight:bold;" >This is a very Simple Page.</p>
</div>
</body>
</html>
Another View of the Same Thing
This tree-oriented view of an HTML page is a representation of the example page’s underlying structure, which uses the Document Object Model (DOM). When the browser reads an HTML page, it creates this tree structure that corresponds to the elements in your HTML page. One key property of a tree is that you can tell which element is inside another element—pivotal to being able to properly apply CSS to the elements.