Summer 2010 week 5:—6/10/10: Wednesdays 6:00 - 9:00

Hi everyone.
Wednesday night's class went well for some of you. It seems to me that some of you seem to be picking up what we have covered thus far in this class, even though most of you have done little or no homework. Most of you still have questions about the basics. You would have fewer questions if you just did some work at home.

If you need additional help (and many of you certainly do), your first step is to read this blog (and other tutorial sites such as w3schools) and practice more. The next step, if you need it, is to set up a meeting with me and we can figure out what to do to help catch you up.

This week's class was a bit of a review of two things: one that we have been working with since the first day, links, lists, and basic css. Homework for this week will continue with these issues.

Below, you will find what I covered this week is in many ways similar to this past week's class, with some important differences. This particular lesson is a very important one, so please do your best to follow it. Lists are mentioned below, as are tables, and although I haven't tables much in class, you have last week's blog example and homework. That should be sufficient for you to get through what I ask of you below. All of what is below, I have already mentioned before, either in class or in my blog. The only difference is that I use a new html tag below. We will address this tag and the concept it presents to us in class next week.

This week's class was supposed to be a bit of a review and a way to solidify what was already given before we move into the mid-term phase of the class, which will begin with the homework assignment in this posting. Please do not fail to do this week's homework. If you do not do it, then you will not be able to continue working on it in class next week.
Carter-

1. HOMEWORK
1. MID-TERM:

   LINK    Download the MID-TERM study sheet which you will take in 2 weeks.



2. EXERCISE I:

   LINK    Download PART I of this week's homework here and follow the instructions in the file in Photoshop, Illustrator, or Flash:



3. EXERCISE II:

   The homework this week is simply to follow the steps below. The point of this homework is for me to assess your ability to understand the steps that I lay out here for you, as well as follow through with them accurately.

   
   

   If you do not do this week's homework, I will assume that you do not understand and cannot do it at all.

   
   

   Inevitably, you will make mistakes and errors as you create anything using HTML and CSS; so part of the object of this homework is to give you practice finding your own errors.

   
   

   Although this exercise is similar to what we did in class, it is not exactly the same. If you come to a step that you do not know how to do, then skip it and come back to it later.

1. Create a folder for your homework and then create a new notepad document named index.html.


2. In this document, create a table that has 3 rows with 3 cells in each row. Click HERE for more information on how to create a table.


3. Like you should have done for homework the week before last (LINK), set thebackground color of each cell of the entire table to a different color. Make certain that it looks nice.


4. Set the border of the table to 1px.


5. Above the table in the document, place a primary heading. It may say anything you like, but keep it brief and succinct.


6. Below the primary heading, place a secondary heading. Again, it may say anything you like, but keep it brief and succinct.


7. Next, below the secondary heading, place two paragraphs of dummy text generated at Lipsum.com. Remember you must click on the button that reads generate Lorem Ipsum when on that site.


8. Below the two paragraphs, place another secondary heading.


9. And finally, below this, place another two paragraphs. This should NOT be the same two paragraphs as the dummy text above. I suggest that you generate at least 4 paragraphs using the generator at Lipsum.com.


10. Now, make certain you save this document, and then open a new document.


11. In the new Notepad document, create a primary heading (this should be the SAME TEXT as the primary heading on the first page).


12. You should also create a subheading and two paragraphs of text. These should NOT be the same.


13. Below the subheading, create a list that has a list heading and seven list items. Click HERE for more information on how to create an ordered list.


14. Save this document as two.html.


15. Create two more notepad documents with the same text elements (NOT the same text) as the 2nd, and name them three.html and four.html respectively. In the last two files, you do NOT have to create tables or lists. All you need is the text indicated


16. At this point you have four files, index.html, two.html, three.html, and four.html, in your folder. We will next link these files together as we did in class this week. We will start with a list. So, return to the code for the index. Here, at the top of the body section, create an ordered list with 4 list items. The list items should read as in class: ONE, TWO, THREE, and FOUR.


17. Place four links to all four of the files inside each list item as we did in class this week.


18. REPEAT the previous 2 steps for EACH OF THE FOUR FILES.



19. Back once again in the index, place a pair of <div></div> tags around the list that contains the four links, with the opening <div></div> tag before the list and the closing <div></div> tag after the list. These new tags, the <div></div> tags divide the page of code into divisions, or sections.


20. When that part is complete, you should make sure that you have four little links at the top of each page that allow you to link back and forth among your 'pages'.


21. Next, use the <div></div> tags to create other divisions in each of your pages. These divisions are ONLY in the code. You will NOT see them reflected yet in the browser. They are really just sections of code for now that you will have divided up and will NOT yet be reflected in the browser until we add CSS. You should NOT type any new text or tables or any additional content, only those new tags. Place one pair of those <div></div> tags around the first heading and subheadings, another pair of <div></div> tags around the two paragraphs, a third pair of the <div></div> tags around the 2nd subheading, and then a final pair of <div></div> tags around the bottom two paragraphs.


22. Once again, the <div></div> tags will not really change the appearance of the page; for now, they simply help you to structure and identify the sections of code to you when you later have to come back and edit it for any reason.


23. Finally, you need to add a pair of <div></div> tags around the tables or lists that may be in the code.


24. You should repeat those steps with the new tags in all four files.


25. Now we are going to add the CSS: type the <style></style> tags in the head section of your document below the title. In between these two tags is where you will type the CSS.
    
26. As we did in our previous class, and as demonstrated below in this blog posting, set the background color of the page to yellow, and the margins of the page to zero, for example: body {margin-top:0px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:0px;
    background-color:#ccaa00;} .


27. Next, set the appearance of the four link states as follows: a:link
    {text-decoration:none;
    color:#ffcc00;}
    
    a:visited
    {text-decoration:none;
    color:#ffaa00;}
    
    a:hover
    {text-decoration:underline;
    color:#000000;}
    
    a:active
    {text-decoration:underline;
    color:#ff6600;}


28. Next, still working in CSS you must create a new kind of style that's called an ID. We use these sorts of styles for unique elements on the page, usually for <div></div> tags. We will use it for the division in our page that includes the navigation, the links at the top, in order to set the styles for it. Type this id below the styles for the links and name it #nav. You must include the pound sign.


29. The styles for this ID should be set to the following: {width:100%;
    height:50px;
    text-align:center;
    font-family:Impact, Arial Black, sans serif;
    font-size:16pt;
    word-spacing:20pt;
    padding-top:25px;
    border-bottom-color:#000000;
    border-bottom-style:dashed;
    border-bottom-width:10px;}


30. Now, you must apply this ID to a <div></div> tag pair below. For any ID, you may only apply it ONE time.
    We are going to apply this ID to the <div></div> tag pair below that contains the navigation, and you should type it in the opening tag as follows:
    <div id="nav">.


31. Next, we are now going to add some styles to the text in the headings, subheadings, and paragraphs:
    h1
    {font-family:Helvetica, Arial, sans serif;
    font-size:36pt;
    color:#ff9900
    letter-spacing:5pt;
    word-spacing:5pt;}
    
    h2
    {font-family:Helvetica, Arial, sans serif;
    font-size:24pt;
    color:#ff6600;
    letter-spacing:2pt;
    word-spacing:2pt;}
    
    p
    {font-family:Helvetica, Arial, sans serif;
    font-size:12pt;
    color:#993300;
    text-align:justify;
    line-height:10pt;}


32. Lastly, COPY & PASTE the CSS in this page into all of the other three pages. Once you do this, ALL of the pages should have the navigation bar at the top of the page, along with styled text in the headings and paragraphs.