If you have followed my first four XHTML lessons you are now familiar with the basic syntax of XHTML. While there are HTML elements that you haven’t learned yet, it is safe to say that you know the basics and are ready to try something new and exciting.
Where’s All The Style?
You may have noticed that all of the code we’ve written so far looks incredibly boring when viewed in a web browser. We haven’t created any elegant layouts with columns, and all of our text is boring and black and rendered in an ugly default font. This is because XHTML is meant to simply markup and describe content elements; it is not intended to add style to a page.
Another Language: CSS
There is a different computer language named CSS (short for cascading style sheet) that is used to add style to pages. We are not going to learn CSS in today’s lesson (but when you are ready, visit the CSS Lessons page), instead we are going to learn how to setup our XHTML pages so adding style via CSS will be smooth and painless.
Our Task For Today
For today’s project, let’s imagine we need to create a webpage that has a heading, 3 columns of content, and a footer.
Meet Your Best Friend; The <div> Element
While there is not a XHTML element for creating a column, the <div> element is used to divide pages into meaningful sections which can then be converted to columns through the use of CSS.
Let’s begin coding! I urge you to follow along by typing, or copying and pasting today’s code as we go (learn how to create an XHTML file). We’ll start with our typical XHTML starter file that we learned about in Lesson 2:
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
3 |
4 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en"> |
5 |
6 | <head> |
7 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
8 | <title>My First Layout</title> |
9 | </head> |
10 |
11 | <body> |
12 |
13 | </body> |
14 | </html> |
Time To Add Content – Our First Column
Now let’s begin adding our content; we’ll start with our first section (or column) of content. Let’s place a list of links in this column; add the following code directly below our <body>start tag:
1 | <div> |
2 | <ul> |
3 | <li><a href="#">Sample Link One</a></li> |
4 | <li><a href="#">Sample Link Two</a></li> |
5 | <li><a href="#">Sample Link Three</a></li> |
6 | <li><a href="#">Sample Link Four</a></li> |
7 | </ul> |
8 | </div> |
Nothing in this code should come as much of a surprise. You should recognize the format for creating a list from Lesson 2, and the format for creating a link from Lesson 3, and as we learned just minutes ago, the <div> element is used to divide the page into meaningful sections which we can later turn into columns.
Our Second Column
Now, let’s create our second (middle) column. This column will contain our primary content, which in this case will be a few headlines and sample paragraphs of text:
1 | <div> |
2 | <h2>Sample Heading</h2> |
3 |
4 | <p>This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p> |
5 |
6 | <h3>A Slightly Less Important Heading</h3> |
7 |
8 | <p> This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p> |
9 | </div> |
Our Third Column
Next, our third column will be nearly identical to our first; a simple list of links:
1 | <div> |
2 | <ul> |
3 | <li><a href="#">Sample Link Five</a></li> |
4 | <li><a href="#">Sample Link Six</a></li> |
5 | <li><a href="#">Sample Link Seven</a></li> |
6 | <li><a href="#">Sample Link Eight</a></li> |
7 | </ul> |
8 | </div> |
Our Footer
Finally, we’ll add a footer.
1 | <div> |
2 | <p>Copyright 2011 Learn Web Code</p> |
3 | </div> |
Labeling Our <div> Elements
Now we are now going to label our <div> elements by assigning them specific classes andidentifiers so adding style to our page with CSS will be quick and easy. We will utilize HTML attributes and values (Lesson 3: Attributes and Values) to accomplish this.
Label The Side Column
We’ll start with our first column; our <div> start tag for the first column will now look like this:
1 | <div id="side-column"> |
We are using the “id” attribute and assigning it a value of “side-column”. This will allow us to add style to this column via CSS in our next lesson.
Label The Main Column
We will also edit the start tag for our second <div>:
1 | <div id="main-column"> |
Label The Other Side Column
As you might have guessed, we’ll now edit the start tag for our third column:
1 | <div id="side-column-two"> |
Don’t Forget The Footer
Finally, we’ll label our footer section:
1 | <div id="footer"> |
2 | <p>Copyright 2011 Learn Web Code</p> |
3 | </div> |
That’s all for today. In our next lesson we will learn the basics of CSS so we can add style to our pages. For your reference, here is the code we put together today, in its entirety:
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
3 |
4 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en"> |
5 | <head> |
6 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
7 | <title>My First Layout</title> |
8 | </head> |
9 |
10 | <body> |
11 | <div id="side-column"> |
12 | <ul> |
13 | <li><a href="#">Sample Link One</a></li> |
14 | <li><a href="#">Sample Link Two</a></li> |
15 | <li><a href="#">Sample Link Three</a></li> |
16 | <li><a href="#">Sample Link Four</a></li> |
17 | </ul> |
18 | </div> |
19 |
20 | <div id="main-column"> |
21 | <h2>Sample Heading</h2> |
22 | <p>This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p> |
23 | <h3>A Slightly Less Important Heading</h3> |
24 | <p> This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p> |
25 | </div> |
26 |
27 | <div id="side-column-two"> |
28 | <ul> |
29 | <li><a href="#">Sample Link Five</a></li> |
30 | <li><a href="#">Sample Link Six</a></li> |
31 | <li><a href="#">Sample Link Seven</a></li> |
32 | <li><a href="#">Sample Link Eight</a></li> |
33 | </ul> |
34 | </div> |
35 |
36 | <div id="footer"> |
37 | <p>Copyright 2009 Learn Web Code</p> |
38 | </div> |
39 |
40 | </body> |
41 | </html> |
No comments:
Post a Comment