It's still not very exciting, is it? Trust me, we'll get there! The important thing to focus on at this stage is what the content of your site should comprise, and how it might be structured. We haven't gone into great detail about document structure yet, other than to discuss the use of different levels of headings, but we'll be looking at this in more detail later in this chapter. In the next chapter, we'll see how you can begin to style your document -- that is, change the font, color, letter spacing and more'but for now, let's concentrate on the content and structure.
The page so far seems a little boring, doesn't it? Let's sharpen it up a little. We can only keep looking at a page of black and white for so long -- let's insert an image into the document. Here's how the img element is applied within the context of the page's markup:
Example 2.10. index.html (excerpt)
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src="divers-circle.jpg [22]" width="200" height="162"
alt="A circle of divers practice their skills" /></p>
<p>Glad you could drop in and share some air with us! You've
passed your underwater navigation skills and successfully
found your way to the start point - or in this case, our home
page.</p>
Whoa, hold up there. Let's talk about all this img stuff (don't worry, it's pretty simple). The img element is used to insert an image into our web page, and the attributes src, alt, width, and height describe the image that we're inserting. src is just the name of the image file. In this case, it's divers-circle.jpg, which you can grab from the code archive. alt is some alternative text that can be displayed in place of the image if, for some reason, it can't be displayed. This is useful for visitors to your site who may be blind (they have web browsers, too!), search engines, and users of slow Internet connections. width and height should be pretty obvious: they give the width and height of the image, measured in pixels. Don't worry if you don't know what a pixel is; we'll look into images in more detail a bit later.
Figure 2.16. Divers pausing in a circle
Go and grab divers-circle.jpg from the code archive, and put it into your web site's folder. The image is shown in Figure 2.16.
Open index.html in your text editor and add the following markup just after the level two heading (h2):
Example 2.11. index.html (excerpt)
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills" /></p>
Save the changes, then view the homepage in your browser. It should look like the display shown in Figure 2.17.
Figure 2.17. Displaying an image on the homepage
Adding Structure
Paragraphs? No problem. Headings? You've got them under your belt. In fact, you're now familiar with the basic structure of a web page. The small selection of tags that we've discussed so far are fairly easy to remember, as their purposes are obvious (remember: p = paragraph). But what the heck is a div?
A div is used to divide up a web page and, in doing so, to provide a definite structure that can be used to great effect when combined with CSS.
The strange thing about a div is that, normally, it has no effect on the styling of the text it contains, except for the fact that it adds a break before and after the contained text. Consider the following markup:
<p>This is a paragraph.</p>
<p>So is this.</p>
If you were to change those paragraph tags to divs, there would be very little obvious change in the page's appearance when you viewed it in a browser (as Figure 2.18 shows).
<p>This is a paragraph.</p>
<div>This looks like a paragraph, but it's actually a div.</div>
<p>This is another paragraph.</p>
<div>This is another div.</div>
Figure 2.18. Paragraphs displaying similarly to divs
"But they look exactly the same! What's the difference between using a div and a p?" you may protest. Well, the purpose of a div is to divide up a web page into distinct sections, adding structural meaning, whereas p should be used to create a paragraph of text.
Note: Use Elements as Intended
Never use an XHTML element for a purpose for which it was not intended. This really is a golden rule!
Rather than leaving the paragraph tags as they are, you might decide to have something like this:
<div>
<p>This is a paragraph inside a div.</p>
<p>So is this.</p>
</div>
You can have as many paragraphs as you like inside that div element, but note that you cannot place div elements inside paragraphs. Think of a div as a container that's used to group related items together, and you can't go wrong.
If we look at our homepage in the browser, it's possible to identify areas that have certain purposes. These are listed below, and depicted in Figure 2.19. We have:
- a header area that contains:
- an area of body content
Figure 2.19 shows how the different segments of content can be carved up into distinct areas based on the purposes of those segments.
Take the homepage we've been working on (index.html) and, in your text editor of choice, add <div> and </div> tags around the sections suggested in Figure 2.19. While you're adding those divs, add an id attribute to each, appropriately allocating the names header, sitebranding, tagline, and bodycontent. Remember that attribute names should be written in lowercase, and their values should be contained within quotation marks.
Figure 2.19. Noting distinct sections in the basic web page
Note: No Sharing ids!
id attributes are used in XHTML to identify elements, so no two elements should share the same id value. You can use these ids later, when you're dealing with elements via CSS or JavaScript.
Note: h1, header, and head
An id attribute set to header should not be confused with headings on the page (h1, h2, and so on); nor is it the same as the head of your HTML page. The id= attribute could just as easily have been named topstuff or pageheader. It doesn't matter, so long as the attribute name describes the purpose of that page section to a fellow human being (or to yourself 12 months after you devised it, and have forgotten what you were thinking at the time!).
Share and Enjoy:
