Fundamentals of Internet Applications: Fall 2010 WEEK 7:—10/27: Wed, 6:00pm

Hi everyone,
Please complete your 2 MOCKUPS and send them to my email (carterdjohnson@aim.com) along with your 2 ILLUSTRATOR DESIGNS by tomorrow afternoon sometime, I would say, no later than 5pm.

Also, what was extra credit last week, is due in our next class as HOMEWORK. See below for details.

Carter-

TOPICS:

Introduce I: Cascading Style Sheets:
1. LINK CSS: What?
2. LINK CSS: Where?
3. LINK CSS: How?
4. LINK CSS: Why?

MIDTERM EXAM:—LINK Download the midterm study sheet
11/04/10 <-- the exam will take place a next Wednesday, November 3, 2010.
HOMEWORK: Do the steps below to create a webpage;

First, type the basic structure of all web pages and save into your primary folder. Since this is the 6th week of class, I'd suggest naming your folder wk8 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>

Now let's add some content to the body, some headings, subheadings, and paragraphs to fill things out:
1. <body>
2. <h1>XHTML & CSS Layouts with 2 Primary Columns</h1>
3. <h2>division 1</h2>
4. <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>
5. <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>
6. <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>
7. <h2>division 2</h2>
8. <h3>sidebar one</h3>
9. <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>
10. <h2>sidebar heading 2</h2>
11. <h3>sidebar two</h3>
12. <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>
13. </body>

Next, we have to add <div> tag pairs to separate out the two future columns.
1. <body>
2. <h1>XHTML & CSS Layouts with 2 Primary Columns</h1>
3. <div>
4. <h2>division 1</h2>
5. <p>Lorem ipsum dolor sit amet. . . </p>
6. <p>Nulla facilisi. Donec bibendum. . . </p>
7. <p>Vestibulum et neque et elit rhoncus lobortis. . . </p>
8. </div>
9. <div>
10. <h2>division 2</h2>
11. <h3>sidebar one</h3>
12. <p>Nullam nec mauris nec mi vulputate. . . </p>
13. <h3>sidebar two</h3>
14. <p>Proin commodo mollis viverra. . . </p>
15. </div>
16. </body>

Those two pairs of new tags will establish the columns of the document once we add the CSS; however, we also need to establish the limits of the entire document's content. We do this by creating a wrapper division in which we nestthe current divisions and content within another pair of <div> tags.
1. <body>
2. <div>
3. <h1>XHTML & CSS Layouts with 2 Primary Columns</h1>
4. <div>
5. <h2>division 1</h2>
6. <p>Lorem ipsum dolor sit amet. . . </p>
7. <p>Nulla facilisi. Donec bibendum. . . </p>
8. <p>Vestibulum et neque et elit rhoncus lobortis. . . </p>
9. </div>
10. <div>
11. <h2>division 2</h2>
12. <h3>sidebar one</h3>
13. <p>Nullam nec mauris nec mi vulputate. . . </p>
14. <h3>sidebar two</h3>
15. <p>Proin commodo mollis viverra. . . </p>
16. </div>
17. </div>
18. </body>

Now that we have all the content in place, now that we have all of that content organized into it's appropriate block tags, and now that we have all of it together orgainzed into divisions, it is time for us to style the page with CSS. We can start by adding the familiar stuff: some styles for the body and the page in general:
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:#ffaabb;
7. margin:0px;}
8. h1 {font-family:Arial, Helvetica, sans-serif;
9. font-size:36pt;
10. color:#aa0000;
11. padding-left:10px;
12. line-height:32pt;}
13. h2 {font-family:Arial, Helvetica, sans-serif;
14. font-size:24pt;
15. color#aa6633;
16. line-height:22pt;}
17. </style>
18. </head>

The next step is to add the styles for the exterior set of <div> tags, otherwise known as the wrapper. This tag and these styles will allow us to shape the content within the window in anyway we want, to compress it if we want, to expand it to fill the entire window, and even to center it all.
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:#ffaabb;
7. margin:0px;}
8. h1 {font-family:Arial, Helvetica, sans-serif;
9. font-size:36pt;
10. color:#aa0000;
11. padding-left:10px;
12. line-height:32pt;}
13. h2 {font-family:Arial, Helvetica, sans-serif;
14. font-size:24pt;
15. color#aa6633;
16. line-height:22pt;}
17. #wrapper {float:left;
18. width:1100px;}
19. </style>
20. </head>

After creating the ID style using CSS like we did above, you must APPLY IT to the correct tag. You are going to apply it to the FIRST <div> tag down below like so:
1. <div id="wrapper">
Now we can add the styles for the inner <div> tags, the two columns that will make up the layout. The first division will be the wider column on the left, and the second division will be the narrower column on the right.
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:#ffaabb;
7. margin:0px;}
8. h1 {font-family:Arial, Helvetica, sans-serif;
9. font-size:36pt;
10. color:#aa0000;
11. padding-left:10px;
12. line-height:32pt;}
13. h2 {font-family:Arial, Helvetica, sans-serif;
14. font-size:24pt;
15. color#aa6633;
16. line-height:22pt;}
17. #wrapper {float:left;
18. width:1100px;}
19. #main {float:left;
20. width:700px;
21. margin-left:50px;}
22. #sidebar {float:left;
23. width:250px;
24. padding-left:10px;}
25. </style>
26. </head>
Upon doing that, we must apply those two IDs to the correct tags below.
1. <body>
2. <div>
3. <h1>XHTML & CSS Layouts with 2 Primary Columns</h1>
4. <div id="main">
5. <h2>division 1</h2>
6. <p>Lorem ipsum dolor sit amet. . . </p>
7. <p>Nulla facilisi. Donec bibendum. . . </p>
8. <p>Vestibulum et neque et elit rhoncus lobortis. . . </p>
9. </div>
10. <div id="sidebar">
11. <h2>division 2</h2>
12. <h3>sidebar one</h3>
13. <p>Nullam nec mauris nec mi vulputate. . . </p>
14. <h3>sidebar two</h3>
15. <p>Proin commodo mollis viverra. . . </p>
16. </div>
17. </div>
18. </body>

The final step in this exercise is to add the styles to the text, the <h1> tags, the <h2> tags, and the <p> tags. These tags present us with a problem, however: since we want to differentiate the styling in the two columns, we have to add different styles to the tags in one column from the same tags in the other column. We do this by specifying in our styles the particular <p> tags or the particular <h2> tags by one of IDs first as part of the selector. Recall, that the first term of a CSS style definition is always the selector; so, since we are selecting to style the <p> tag within the main ID, for instance, we must name that ID too:
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:#ffaabb;
7. margin:0px;}
8. h1 {font-family:Arial, Helvetica, sans-serif;
9. font-size:36pt;
10. color:#aa0000;
11. padding-left:10px;
12. line-height:32pt;}
13. h2 {font-family:Arial, Helvetica, sans-serif;
14. font-size:24pt;
15. color#aa6633;
16. line-height:22pt;}
17. #wrapper {float:left;
18. width:1100px;}
19. #main {float:left;
20. width:700px;
21. margin-left:50px;}
22. #main p {font-family:Arial, Helvetica, sans-serif;
23. font-size:12pt;
24. line-height:11pt;
25. color:#aa3333;
26. text-align:justify;}
27. #sidebar {float:left;
28. width:250px;
29. padding-left:10px;}
30. #sidebar h3 {font-family:Arial, Helvetica, sans-serif;
31. font-size:12pt;
32. line-height:9pt;
33. color:#ffcc99;
34. background-color:#cc9966;
35. border-color:#aa6633;
36. border-style:solid;
37. border-width:1px;
38. padding:5px}
39. #sidebar p {font-family:Arial, Helvetica, sans-serif;
40. font-size:9pt;
41. line-height:9pt;
42. color:#990000;
43. font-style:italic;}
44. </style>
45. </head>
HOMEWORK II (due in 2 weeks): Do the questions below for homework DUE IN 2 WEEKS;
QUESTIONS: Here are some questions to help guide you through this weeks' material—chapters 3, 5, and 7 in the text on CSS:
1. How many fonts can you specify for the font-family CSS property?
2. According to the book (chapter 5), what are the four most widely supported fonts on computers?
3. Of the two codes we have been covering in class up to now, which one is to be used mainly for structuring or organizing the page content and which is to be used mainly for designing or presenting the page content?
4. What would the purpose of consistent presentation of your individual web pages throughout your site be—for example: designing the text in the paragraphs the same in all the pages, designing the main headings in all the pages the same, making the links in all the pages the same?
5. What is the difference between an internal and an external style sheet with regard to where they are typed?
6. What are two ways to link style sheets to a web page?
7. What is a CSS rule?
8. What are the two main parts of any CSS rule?
9. What is a selector in CSS?
10. Other than tag names, what are two other types of CSS selectors?
11. What are two differences between IDs and Classes?
12. What character must be typed before the name of an ID? Before the name of a class?
13. How do you apply a class or an id so that the styles show up in a page?
14. Name five (5) examples of CSS properties that we have used in class.
15. Name three (3) examples of CSS selectors that we have used in class.
16. What does the <div>≶/div> tag pair do?
17. How many different types of borders can you create with CSS? What are they?
18. What is padding?
19. Name three (3) places in a web page that you can set a background color.
20. Type an example of the code for setting a background image using CSS. In this code, you must also determine if the image is to be repeated, and where it is to be positioned on the page.

INTRODUCE I:

Cascading Style Sheets (CSS)—in this week’s class we saw the introduction of the issue Cascading Style Sheets used together with HTML in order to style the text and colors of a page. CSS works often in much the same way that the in-line HTML tags (<b>, <i>, <u>, <font>, etc.) do to bring some styling onto an otherwise dull page of text. For this reason and from this point on, CSS will completely supplant those in-line tags for our uses in this class. In-line tags are not considered proper when following strict XHTML guidelines (and as a result will not pass the test when the code is validated); therefore, our job is to determine how to best configure our pages without them. In other words, from this point on, we will no longer be using many of those inline tags, and heretofore use only CSS; thereby, at last adherely completely to XHTML Strict standards.
What is CSS?

To begin with, CSS is another type of code used only to style a page of content (mostly text and images). It is used for two reasons.

First,
it is vastly more extensive and, thereby, flexible. There are many more aspects of style that you can control with CSS than without it, as you will find out in the weeks to come. You can therefore control the look of your pages much more thoroughly. As a result, you will have many more options of how to style a page, using your own design sense of how to emphasize various elements in the site.
Second,
as it considers a web-site as a living, changing object rather than 100% complete and fully-formed when it is uploaded onto a server, it is much more efficient to use and, therefore, allows you to update your pages much more quickly and completely.

Where is CSS placed?

depending on what kind of CSS you are typing (yes, there is more than one kind), you will type it in different places. Up to this point, we have been typing our code in the <head> section of our document. When typed here, it is known as an embedded stylesheet.

How is CSS used?

As we have been using it up to know, as mentioned above, we have been typing what is known as embedded stylesheets, but all types of CSS follow the same basic format.

In the past, we have styled our pages by using the in-line tags throughout our document to change the way the text looks. With an embedded stylesheet, we put all the styles into a central location embedded in the <head> section. That way, if ever we need to change something or update the page, all we must do is go to the <head> section at the very top of the document rather than go searching around all the code of the page to make the change. This is especially useful, if, like the mid-term project, we must type a long and complicated web-page filled with much text and a complex set of tables that we do not want to accidentally mess up.

As mentioned, the styles are embedded directly into the code in the <head> section of a document, and they are placed between a pair of <style> tags. This is the type of stylesheet that we looked at in last week’s class.

EXTRA CREDIT: Do the steps below to create a webpage for EXTRA CREDIT;
INTRODUCE —Creating a menu using CSS: In this week's class, what I did was lead you through steps to creating a series of buttons using only CSS & XHTML. Some of the concepts we are covering are not easy to grasp at first, but once you start working on your own, I believe they will become more and more clear. This means you have to start practicing on your own if you want things to become easier.

As we have learned up to now, we began with the basic elements of any webpage:
1. the DOCTYPE:The DOCTYPE declaration defines the document type, which means what type of code you will be typing. For the purposes of this class, we will be typing XHTML strict, and the particular DOCTYPE declaration for this kind of document is:
2. the Head section: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">This section is where information about the document might appear: the subject (title), the date, who created it, and various other data about the document that follows.
3. the Body section:This section is where all the information of the document itself appears: all the text, the images, and any other multimedia content is referenced here between the body tags.
  The basic document structure is as follows:
  
  <!DOCTYPE ...>
    <html>
      <head>
        <title>... </title>
      </head>
      <body> ... </body>
    </html>
In the following step, I typed some basic text elements into the document: a heading and a subheading, and then an ordered list.

<!DOCTYPE ...>
  <html>
    <head>
      <title>... </title>
    </head>
    <body>
      <ol>
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </ol>

      <h1>Example Heading Here</h1>

      <h2>Example Sub-Heading Here</h2>

    </body>
  </html>

Next, I wanted to convert each of the three items in the list into a link.
<!DOCTYPE ...>
  <html>
    <head>
      <title>... </title>
    </head>
    <body>

      <ol>
        <li>
      <a href="http://www.w3schools.com">one</a>
        </li>

        <li>
      <a href="http://www.w3schools.com">two</a>
        </li>

        <li>
      <a href="http://www.w3schools.com">three</a>
        </li>

      </ol>

      <h1>Example Heading Here</h1>

      <h2>Example Sub-Heading Here</h2>

    </body>
  </html>

Now, although I didn't do this in class, I want to label each part of the body of the document that I had typed. This is done for two reasons: later on, after some time has passed, I might forget what I had intended, so typing myself some notes within the code is often very useful. Also, it helps me to organize the body into different sections in my own head so that later on I might be able to treat them differently. Usually, this is a very logical and straightforward process as follows:

<!DOCTYPE ...>
  <html>
    <head>
      <title>... </title>
    </head>
    <body>
      

      <ol>
        <li>
      <a href="http://www.w3schools.com">one</a>
        </li>

        <li>
      <a href="http://www.w3schools.com">two</a>
        </li>

        <li>
      <a href="http://www.w3schools.com">three</a>
        </li>

      </ol>

      
      <h1>Example Heading Here</h1>

      <h2>Example Sub-Heading Here</h2>

    </body>
  </html>

Once again, although I did not do this in class, I want to add some new tags. I create and formalize these sections that I have mapped out in my head by placing <div></div> tag pairs around each section. By doing so, I will be able to manipulate each section or division separately later on when working with CSS. These tags do very little on their own, so until we add the CSS, the appearance of the page will change very little:

<!DOCTYPE ...>
  <html>
    <head>
      <title>... </title>
    </head>
    <body>
      
      <div>
        <ol>
          <li>
            <a href="http://www.w3schools.com">one</a>
          </li>

          <li>
            <a href="http://www.w3schools.com">two</a>
          </li>

          <li>
            <a href="http://www.w3schools.com">three</a>
          </li>

        </ol>
      </div>

      
      <div>
        <h1>Example<br/>Heading<br/>Here</h1>
        <h1>Example<br/>Sub-Heading<br/>Here</h2>
      </div>

    </body>
  </html>

Now that we have all the HTML on the page, we can begin to work on the CSS. As you recall, we have been typing our CSS in the head section of our document below the title between a pair of <style></style> tags. Although this has been the only place that we have typed CSS in class, it is possible, in fact, to put CSS in two other places: in separate CSS documents that are linked to the HTML document; and directly within a specific HTML tag within the body of a document. Nonetheless, in this class, we continued with placing the CSS code in the head section. This sort of CSS is known as an embedded stylesheet:

<!DOCTYPE ...>
  <html>
    <head>
      <title>... </title>
      <style type="text/css">
        body     {background-color:#ffffaa;
                   margin-top:0px;
                   margin-bottom:0px;
                   margin-left:0px;
                   margin-right:0px;}

        h1        {color:#ccaa00;
                   font-family:Arial;
                   font-size:36pt;
                   letter-spacing:5pt;
                   word-spacing:10pt;
                   line-height:30pt;}

        h2        {color:#ffaa00;
                   font-family:Arial;
                   font-size:24pt;
                   letter-spacing:3pt;
                   word-spacing:5pt;
                   line-height:18pt;}

        a        {border-style:solid;
                   border-width:1px;
                   border-color:#ccaa00;
                   font-family:Courier;
                   font-weight:bold;
                   font-size:14pt;
                   text-decoration:none;
                   display:block;
                   padding:5px;}

      </style>

    </head>
    <body>
      
      <div>
        <ol>
          <li>
            <a href="http://www.w3schools.com">one</a>
          </li>

          <li>
            <a href="http://www.w3schools.com">two</a>
          </li>

          <li>
            <a href="http://www.w3schools.com">three</a>
          </li>

        </ol>
      </div>

      
      <div>
        <h1>Example<br/>Heading<br/>Here</h1>
        <h1>Example<br/>Sub-Heading<br/>Here</h2>
      </div>

    </body>
  </html>

Above, we have completed the basic CSS for the page. It should style the background color for the body, its margins, the styles for the links, as well as the stlyes for the main heading and the paragraph.

All seems fairly ordinary; however, you might have noticed that I didn't put the links into the 4 different states: a:link, a:visited, a:hover, and a:active. We use those 4 states when we want things to change about the links when the user interacts with them, when the user clicks on them, or passes the mouse over them, for example. The styles that I've applied to the links here are the styles that will stay, that we want ALL the link states to have. I will apply a couple of styles to the different states (a:link & a:hover) so that the links will change, but those that are there now will not change.

Therefore, the next set of styles are for two of the link states so that the links DO change when the user interacts with them. Mainly, we just want the colors to change, the color of the type and the background color of the links.

<!DOCTYPE ...>
  <html>
    <head>
      <title>... </title>
      <style type="text/css">
        body     {background-color:#ffffaa;
                   margin-top:0px;
                   margin-bottom:0px;
                   margin-left:0px;
                   margin-right:0px;}

        h1        {color:#ccaa00;
                   font-family:Arial;
                   font-size:36pt;
                   letter-spacing:5pt;
                   word-spacing:10pt;
                   line-height:30pt;}

        h2        {color:#ffaa00;
                   font-family:Arial;
                   font-size:24pt;
                   letter-spacing:3pt;
                   word-spacing:5pt;
                   line-height:18pt;}

        a        {border-style:solid;
                   border-width:1px;
                   border-color:#ccaa00;
                   font-family:Courier;
                   font-weight:bold;
                   font-size:14pt;
                   text-decoration:none;
                   display:block;
                   padding:5px;}

        a:link    {color:#000000;
                   background-color:#ffffcc;}

        a:hover   {color:#ffffcc;
                   background-color:#000000;}

      </style>

The next set of styles are fairly simple, but first let me explain what the ultimate design goal is for this exercise: we want to make a horizontal menu in which each link is a rectangular button of the same size. When the user mouses over each button it changes colors.

Right now, we have a vertical list, so we have to do to things to modify our list, we have to make it horizontal, which in XHTML speak is known as INLINE, and we have to remove the numbers of the list. That's what the next two styles do, and we'll apply them to the whole list:

<!DOCTYPE ...>
  <html>
    <head>
      <title>... </title>
      <style type="text/css">
        body     {background-color:#ffffaa;
                   margin-top:0px;
                   margin-bottom:0px;
                   margin-left:0px;
                   margin-right:0px;}

        h1        {color:#ccaa00;
                   font-family:Arial;
                   font-size:36pt;
                   letter-spacing:5pt;
                   word-spacing:10pt;
                   line-height:30pt;}

        h2        {color:#ffaa00;
                   font-family:Arial;
                   font-size:24pt;
                   letter-spacing:3pt;
                   word-spacing:5pt;
                   line-height:18pt;}

        ol       {list-style:none;
                   display:inline;}

        a        {border-style:solid;
                   border-width:1px;
                   border-color:#ccaa00;
                   font-family:Courier;
                   font-weight:bold;
                   font-size:14pt;
                   text-decoration:none;
                   display:block;
                   padding:5px;}

        a:link    {color:#000000;
                   background-color:#ffffcc;}

        a:hover   {color:#ffffcc;
                   background-color:#000000;}

      </style>

The last few styles for the menu will place the list elements or links all on the same line, side-by-side, they will give each of the buttons the same width, and then also place 5 pixels of space between each of them:

<!DOCTYPE ...>
  <html>
    <head>
      <title>... </title>
      <style type="text/css">
        body     {background-color:#ffffaa;
                   margin-top:0px;
                   margin-bottom:0px;
                   margin-left:0px;
                   margin-right:0px;}

        h1        {color:#ccaa00;
                   font-family:Arial;
                   font-size:36pt;
                   letter-spacing:5pt;
                   word-spacing:10pt;
                   line-height:30pt;}

        h2        {color:#ffaa00;
                   font-family:Arial;
                   font-size:24pt;
                   letter-spacing:3pt;
                   word-spacing:5pt;
                   line-height:18pt;}

        ol       {list-style:none;
                   display:inline;}

        li       {float:left;
                   width:120px;
                   margin-left:5px;}

        a        {border-style:solid;
                   border-width:1px;
                   border-color:#ccaa00;
                   font-family:Courier;
                   font-weight:bold;
                   font-size:14pt;
                   text-decoration:none;
                   display:block;
                   padding:5px;}

        a:link    {color:#000000;
                   background-color:#ffffcc;}

        a:hover   {color:#ffffcc;
                   background-color:#000000;}

      </style>

The very last set of styles, I will use a new thing known as an ID. I will explain more about these in class, but here I'd like to go ahead and show you how they work, so first we create the ID styles in the CSS:

<!DOCTYPE ...>
  <html>
    <head>
      <title>... </title>
      <style type="text/css">
        body     {background-color:#ffffaa;
                   margin-top:0px;
                   margin-bottom:0px;
                   margin-left:0px;
                   margin-right:0px;}

        h1        {color:#ccaa00;
                   font-family:Arial;
                   font-size:36pt;
                   letter-spacing:5pt;
                   word-spacing:10pt;
                   line-height:30pt;}

        h2        {color:#ffaa00;
                   font-family:Arial;
                   font-size:24pt;
                   letter-spacing:3pt;
                   word-spacing:5pt;
                   line-height:18pt;}

        ol       {list-style:none;
                   display:inline;}

        li       {float:left;
                   width:120px;
                   margin-left:5px;}

        a        {border-style:solid;
                   border-width:1px;
                   border-color:#ccaa00;
                   font-family:Courier;
                   font-weight:bold;
                   font-size:14pt;
                   text-decoration:none;
                   display:block;
                   padding:5px;}

        a:link    {color:#000000;
                   background-color:#ffffcc;}

        a:hover   {color:#ffffcc;
                   background-color:#000000;}

       #menu      {padding:10px;
                   width:100%;
                   height:50px;
                   background-color:#000000;
                   border-bottom-style:dashed;
                   border-bottom-color:#ffaa00;
                   border-bottom-width:8px;}

      </style>

The final step is to apply those new ID styles to a particular tag within the body section. If we do not do this, then these styles will not show up in your page. The tag I'd like to attach these styles to, then, is the first <div> tag. This will turn it into a black section across the top of the page with a dashed underline at the bottom of it.

<!DOCTYPE ...>
  <html>
    <head>
      <title>... </title>
    </head>
    <body>
      
      <div id="menu">
        <ol>
          <li>
            <a href="http://www.w3schools.com">one</a>
          </li>

          <li>
            <a href="http://www.w3schools.com">two</a>
          </li>

          <li>
            <a href="http://www.w3schools.com">three</a>
          </li>

        </ol>
      </div>

      
      <div>
        <h1>Example<br/>Heading<br/>Here</h1>
        <h1>Example<br/>Sub-Heading<br/>Here</h2>
      </div>

    </body>
  </html>

And there you have it. It isn't beautiful, but we're getting there. Perhaps, you can at this point begin to see how a webpage might begin to go together.

Fundamentals of Internet Applications

Friday, October 29, 2010

Fall 2010

WEEK 7:
—10/27: Wed, 6:00pm—9:00pm

No comments:

Post a Comment

Google Analytics

Friday, October 29, 2010

Fall 2010 WEEK 7:—10/27: Wed, 6:00pm—9:00pm

No comments:

Post a Comment

Google Analytics

Fall 2010

WEEK 7:
—10/27: Wed, 6:00pm—9:00pm