Fundamentals of Internet Applications: Fall 2009 week 9: 11/12, Wed 6:00

First, type the basic structure of all web pages and save into your primary folder. Since this is the 9th week fo class, I'd suggest naming your folder wk9 and your file, as always, index.html:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>... </title>
5. </head>
6. <body> ... </body>
7. </html>

Let's begin with the section of the document that is going to contain the main heading and the menu navigation:
1. <body>
2. 
3. <div id="wrapper">
4. 
5. <div id="header">
6. 
7. <div id="title">
8. <h1>Carter Johnson</h1>
9. </div>
10. 
11. <div id="menu">
12. <ol>
13. <li>
14. <a href="#">one</a>
15. </li>
16. <li>
17. <a href="#">two</a>
18. </li>
19. <li>
20. <a href="#">three</a>
21. </li>
22. <li>
23. <a href="#">four</a>
24. </li>
25. <li>
26. <a href="#">five</a>
27. </li>
28. </ol>
29. </div>
30. </div>
31. </div>
32. </body>

The structure that this sort of nested arrangement of <div> tags will provide us with three main sections: the header, the content, and the footer. These three sections may be structured as columns (vertically) or, more commonly, as rows (horizontally).

Inside the header section are two further divisions: the title and the menu. These two IDs are probably self-explanatory, but the title section will contain the main heading of the page, and the menu will contain the primary menu navigation of the page.

Within the content section are also two further divisions: the primary content section, and the secondary content section. They are normally arranged as columns which will be the way this design will approach the structure. Therefore, there will be two columns; exactly the way we've created our designs in class in which the primary column contains the primary content of the page, and the secondary, narrower column acts as a sidebar.

The last main section is the footer and it will be the smallest section of the design at the very bottom of the page. Graphically, the structure will take up space on the page as follows:

header

title

menu

content

primary

secondary

footer

Now, we can add our first CSS. What we have typed so far is just the header section with its two sub-sections, the title and the menu. Later on, the CSS code should be typed in a separate .css document; however, for now you can type it in the head section as you will see below. We will begin by setting the main styles for the document and the IDs that we have created so far. Below you will see an image of what your HTML and the first CSS will produce in the browser, and below that the CSS that will help produce that:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>. . . </title>
5. <style type="text/css">
6. body {background-color:#ffffff;
7. margin:0px 0px 0px 0px;}
8. #wrapper {background-color:#ffffff;
9. width:950px;
10. padding:0px 0px 0px 0px};
11. &header {border-style:solid;
12. border-width:1px;
13. color:#aa6633;
14. border-color:#000000;
15. background-color:#ffffff;
16. title {border-style:solid;
17. border-width:1px;
18. color:#aa6633;
19. border-color:#000000;
20. background-color:#ffffff;
21. </style>
22. </head>

Next, we will make a couple of small changes to the CSS that we have, adding a bit of a margin on the left, and then eliminating the border. We can always turn the border back on if we need to be able to see the boundaries of the division.
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <title>. . . </title>
5. <style type="text/css">
6. body {background-color:#ffffff;
7. margin:0px 0px 0px 50px;}
8. #wrapper {background-color:#ffffff;
9. width:950px;
10. padding:0px 0px 0px 0px};
11. #header {border-style:solid;
12. border-width:0px;
13. color:#aa6633;
14. border-color:#000000;
15. background-color:#ffffff;
16. title {border-style:solid;
17. border-width:0px;
18. color:#aa6633;
19. border-color:#000000;
20. background-color:#ffffff;
21. </style>
22. </head>

After this, we can simply style the main heading of the page, the <h1> tag within the header section.
1. #title h1 {font-family:Impact;
2. font-size:36pt;
3. color:#000000;
4. letter-spacing:-1;}

Immediately below, you will see the styles for the menu ID that you should add to the bottom of the CSS, and then an image showing how these styles affect the page. Pay particular attention to the margins attributed.
1. #menu h1 {border-style:solid;
2. border-width:1px;
3. border-color:#000000;
4. background-color:#ffffff;
5. margin-top:-80px;
6. margin-left:32px;}

After the main heading, we need to add styles to the list as a whole (the <ol> tag), and to each list item (the <li> tags).
1. #menu ol {list-style:none;
2. display:inline;}

1. #menu ol {list-style:none;
2. display:inline;}
3. #menu li {float:right;}

1. #menu ol {list-style:none;
2. display:inline;}
3. #menu li {float:right;
4. margin-left:5px;
5. width:120px;}

Next, we remove the styles for the border for the header, the title , and the menu; and then we add the styles for the links within the list.
1. body {background-color:#ffffff;
2. margin:0px 0px 0px 50px;}
3. #wrapper {background-color:#ffffff;
4. width:950px;
5. padding:0px 0px 0px 0px};
6. #header {border-style:solid;
7. border-width:0px;
8. border-color:#000000;
9. color:#aa6633;
10. background-color:#ffffff;
11. title {border-style:solid;
12. border-width:0px;
13. border-color:#000000;
14. color:#aa6633;
15. border-color:#000000;
16. background-color:#ffffff;
17. #title h1 {font-family:Impact;
18. font-size:36pt;
19. color:#000000;
20. letter-spacing:-1;}
21. #menu h1 {border-style:solid;
22. border-width:1px;
23. border-color:#000000;
24. background-color:#ffffff;
25. margin-top:-80px;
26. margin-left:32px;}
27. #menu ol {list-style:none;
28. display:inline;}
29. #menu li {float:right;
30. margin-left:5px;
31. width:120px;}
32. #menu a {border-style:solid;
33. border-width:1px;
34. border-color:#000000;
35. display:block;}
36. </style>
37. </head>

Nearly finishing up, we need to add a few more styles to the horizontal list at this point to make the items look more like blocks that the user can click on.
1. #menu a {border-style:solid;
2. border-width:1px;
3. border-color:#000000;
4. display:block;
5. padding:5px;
6. font-family:Arial, Helvetica, sans-serif;
7. font-weight:bold
8. font-size:14pt;
9. text-decoration:none;
10. align-center}

And finally, to finish up the first part of this exercise, creating the header section, including a navigation menu, we'll add some styling to a couple of the link states:
1. a:link a {color:#ffffff
2. background-color:#333333;}
3. a:hover a {color:#000000;
4. background-color:#cc0000;}

Now that we have completed the top section, the header, we can move on to the other parts of the page. We'll proceed to the content ID, the section that is going to contain all the content, primary and secondary, of the page.
1. #content {border-top-style:solid;
2. border-top:width:5px;
3. border-top-color:#000000;
4. margin-top:0px;
5. background-color:#ffffff;}

In order to see the effects of these styles, we have to add some content I am just going to use the content from last week's lesson, but with some minor changes
1. <body>
2. 
3. <div id="wrapper">
4. 
5. <div id="header">
6. 
7. <div id="title">
8. <h1>Carter Johnson</h1>
9. </div>
10. 
11. <div id="menu">
12. <ol>
13. <li>
14. <a href="#">one</a>
15. </li>
16. <li>
17. <a href="#">two</a>
18. </li>
19. <li>
20. <a href="#">three</a>
21. </li>
22. <li>
23. <a href="#">four</a>
24. </li>
25. <li>
26. <a href="#">five</a>
27. </li>
28. </ol>
29. </div>
30. </div>
31. 
32. <div id="content">
33. <div id="primary">
34. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas faucibus velit a justo blandit vehicula. Nullam fermentum risus non libero euismod condimentum. Suspendisse dui tellus, tincidunt non pellentesque at, porttitor sed felis. Duis dui enim, molestie non fringilla non, viverra vitae urna. Morbi imperdiet volutpat euismod. Sed sem lorem, suscipit non pellentesque in, sagittis at felis. Aenean erat turpis, porta eu ullamcorper eget, consectetur ut urna. Nunc hendrerit, ante a gravida vestibulum, dui mauris volutpat arcu, et dictum nulla orci non mauris. Sed a est mi, at feugiat tortor. Proin aliquam nibh at odio vestibulum commodo. Nulla adipiscing fermentum vestibulum. Suspendisse potenti. Aenean suscipit erat dapibus eros tempor eget tincidunt tortor aliquam. </p>
35. <p>Nulla facilisi. Donec bibendum, neque sit amet gravida pharetra, nunc arcu euismod nisl, id porttitor nulla tellus ac arcu. Phasellus sapien odio, eleifend non hendrerit non, consequat sit amet risus. Phasellus aliquam laoreet mauris, eget accumsan turpis commodo et. Donec mattis tortor lacus. Etiam aliquet ullamcorper mauris, sit amet viverra sem semper nec. Nullam arcu nunc, dictum sit amet sollicitudin id, fermentum quis nisl. Vivamus elementum ornare dolor eu rutrum. Vestibulum non venenatis odio. Ut tellus risus, pretium ut porta a, pharetra tempus velit. Aenean nec adipiscing arcu. Integer mi nunc, gravida eu porta quis, accumsan ac sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam dictum lacus quis magna dignissim vehicula. Maecenas elementum luctus suscipit. Aliquam facilisis lobortis odio, eget tempus nulla rhoncus eu. Morbi tellus nulla, cursus nec viverra id, venenatis sit amet ipsum. Phasellus mattis aliquet tincidunt. </p>
36. <p>Vestibulum et neque et elit rhoncus lobortis. Fusce auctor neque a purus imperdiet mattis. Donec ac felis a arcu tempus malesuada. Integer ultrices congue nisl, eget rhoncus dui accumsan eget. Aliquam quis ligula sit amet eros malesuada facilisis. Praesent at auctor sapien. Sed fermentum dolor quis nibh mattis tincidunt. Curabitur eu urna vel turpis pulvinar molestie. Etiam egestas, lacus non tincidunt egestas, odio mauris suscipit libero, vitae pharetra lectus nisl eu lorem. Suspendisse potenti. Vivamus consequat, arcu nec elementum condimentum, dui diam ornare orci, sit amet bibendum sapien mi quis leo. Integer id gravida massa. Aliquam non urna ut orci viverra imperdiet quis vel arcu. Donec sagittis molestie neque. Sed fringilla felis sed lorem laoreet ultricies condimentum mauris consequat. Sed fermentum fringilla enim ut blandit. Aenean quam dui, consectetur et adipiscing ut, congue et dui. Etiam porta tempus tellus, nec consequat libero pretium a. Vivamus condimentum magna ut tellus porttitor feugiat. Aliquam sed purus massa. </p>
37. <p>Proin commodo mollis viverra. Pellentesque aliquet lorem egestas justo scelerisque sit amet auctor quam aliquam. Donec interdum ligula a mauris sagittis lacinia. Sed bibendum tempus faucibus. Curabitur eu lectus sed mauris cursus dapibus vitae sit amet est. Morbi massa eros, accumsan a gravida in, feugiat sit amet libero. Integer rhoncus, tortor eget vestibulum vestibulum, diam nisl auctor augue, a dignissim velit turpis sed sapien. Vivamus rhoncus massa suscipit tellus consectetur consectetur. Donec id augue ac nisl pretium pretium non et ligula. Donec sed odio aliquet libero vehicula sollicitudin quis eget mauris. Nullam nec tortor vestibulum enim condimentum scelerisque. Aliquam in aliquet risus. Nulla ornare tempor dapibus. </p>
38. </div>
39. <div id="secondary">
40. <h2>Sidebar</h2>
41. h3>section 1</h3>
42. <p>Nullam nec mauris nec mi vulputate rhoncus id sed nulla. Donec tempus imperdiet dui in gravida. Nulla vulputate gravida sem at condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse id massa erat, quis interdum elit. Donec fermentum sollicitudin dui id condimentum. Vestibulum consequat ullamcorper ornare. Suspendisse potenti. Phasellus egestas leo vel justo aliquam eu eleifend neque egestas. Nam ut tellus at risus interdum fringilla mollis eget justo. Vivamus egestas interdum ipsum sit amet blandit. Nunc viverra turpis ut turpis cursus congue rutrum dui fringilla. Phasellus venenatis rhoncus purus vitae interdum. Pellentesque et ultrices orci. Morbi placerat, felis porta sollicitudin rhoncus, urna massa hendrerit nulla, a imperdiet sem lectus id tellus. Quisque accumsan neque id felis mollis nec viverra urna faucibus. Cras sit amet ante massa, et viverra lectus. Aenean neque arcu, tempor in eleifend ut, luctus sed nibh. Maecenas felis risus, molestie quis tempor ut, ornare eu urna.</p>
43. <h3>section two</h3>
44. <p>Proin commodo mollis viverra. Pellentesque aliquet lorem egestas justo scelerisque sit amet auctor quam aliquam. Donec interdum ligula a mauris sagittis lacinia. Sed bibendum tempus faucibus. Curabitur eu lectus sed mauris cursus dapibus vitae sit amet est. Morbi massa eros, accumsan a gravida in, feugiat sit amet libero. Integer rhoncus, tortor eget vestibulum vestibulum, diam nisl auctor augue, a dignissim velit turpis sed sapien. Vivamus rhoncus massa suscipit tellus consectetur consectetur. Donec id augue ac nisl pretium pretium non et ligula. Donec sed odio aliquet libero vehicula sollicitudin quis eget mauris. Nullam nec tortor vestibulum enim condimentum scelerisque. Aliquam in aliquet risus. Nulla ornare tempor dapibus. </p>
45. <;/div>
46. </div>
47. <div id="footer">
48. <h4>This is the footer: Designed by Carter Johnson, Fall 2009</h4>
49. </div>
50. </div>
51. </body>

To improve things, we'll add a bit of a margin at the top to push things down.
1. #content {border-top-style:solid;
2. border-top:width:5px;
3. border-top-color:#000000;
4. margin-top:70px;
5. background-color:#ffffff;}

Now, we'll add the styles for the footer to the bottom of the growing list of CSS rules:
1. #footer {border-top-color:#000000;
2. border-top-width:10px;
3. border-top-style:solid;
4. background-color:#aa0000;
5. padding:10px;
6. font-family:Arial, Helvetica, sans-serif;
7. font-size:9pt;
8. line-height:8pt;
9. color:#000000;}

In the next series of additions to the CSS, we are going to start working on the text in the content section. Recall, this section will contain two sub-sections itself: the primary division and the secondary (sidebar) division. We start by adding the basic styles to the primary ID. I'll place this rule just below the content and just above the footer
1. #content {border-top-style:solid;
2. border-top-width:5px;
3. border-top-color:#000000;
4. margin-top:70px;
5. background-color:#ffffff;}
6. #primary {margin-top:10px;
7. width:600px;
8. background-color:none;}
9. #footer {border-top-color:#000000;
10. border-top-width:10px;
11. border-top-style:solid;
12. background-color:#aa0000;
13. padding:10px;
14. font-family:Arial, Helvetica, sans-serif;
15. font-size:9pt;
16. line-height:8pt;
17. color:#000000;}

1. #primary {margin-top:10px;
2. width:600px;
3. background-color:none;
4. float:left;
5. padding:0px 5px 10px 10px}

1. #primary h2 {font-family:Arial, Helvetica, sans-serif;
2. font-size:24pt;
3. line-height:18pt;
4. color:#aa0000;}
5. #primary p {font-family:Arial, Helvetica, sans-serif;
6. font-size:10pt;
7. line-height:10pt;
8. text-align:justify;
9. color:#aa0000;}

1. #primary h2 {font-family:Arial, Helvetica, sans-serif;
2. font-size:24pt;
3. line-height:18pt;
4. color:#aa0000;}
5. #primary p {font-family:Arial, Helvetica, sans-serif;
6. font-size:10pt;
7. line-height:10pt;
8. text-align:justify;
9. color:#aa0000;
10. padding:0px 10px 5px 10px;}

1. #secondary p {float:left;
2. width:300px;
3. background-color:#000000;}

In the next series of additions to the CSS, we are going to start working on the text in the content section. Recall, this section will contain two sub-sections itself: the primary division and the secondary (sidebar) division. We start by adding the basic styles to the primary ID. I'll place this rule just below the content and just above the footer
1. #content {border-top-style:solid;
2. border-top-width:5px;
3. border-top-color:#000000;
4. margin-top:70px;
5. background-color:#ffffff;}
6. #primary {margin-top:10px;
7. width:600px;
8. background-color:none;}
9. #primary {margin-top:10px;
10. width:600px;
11. background-color:none;
12. float:left;
13. padding:0px 5px 10px 10px}
14. #primary h2 {font-family:Arial, Helvetica, sans-serif;
15. font-size:24pt;
16. line-height:18pt;
17. color:#aa0000;}
18. #primary p {font-family:Arial, Helvetica, sans-serif;
19. font-size:10pt;
20. line-height:10pt;
21. text-align:justify;
22. color:#aa0000;
23. padding:0px 10px 5px 10px;}
24. #secondary {float:left;
25. width:300px;
26. background-color:#000000;}
27. #footer {clear:both;
28. border-top-color:#000000;
29. border-top-width:10px;
30. border-top-style:solid;
31. background-color:#aa0000;
32. padding:10px;
33. font-family:Arial, Helvetica, sans-serif;
34. font-size:9pt;
35. line-height:8pt;
36. color:#000000;}

1. #secondary {float:left;
2. width:300px;
3. background-color:#000000;
4. margin:0px 0px 0px 15px;}
5. #secondary h2 {font-family:Arial, Helvetica, sans-serif;
6. font-size:16pt;
7. line-height:12pt;
8. color:#aa0000;}
9. #secondary h3 {font-family:Arial, Helvetica, sans-serif;
10. font-size:12pt;
11. line-height:10pt;
12. color:#999999;}
13. #secondary p {font-family:Arial, Helvetica, sans-serif;
14. font-size:9pt;
15. font-style:italic;
16. line-height:9pt;
17. color:#cccccc;}

1. #secondary p {font-family:Arial, Helvetica, sans-serif;
2. font-size:9pt;
3. font-style:italic;
4. line-height:9pt;
5. color:#cccccc;
6. padding-left:10px;}