Fundamentals of Internet Applications: Summer 2008 week 6: 06/18

Hi again everyone, I know that even those of you who have the BEST grasp of this coding stuff had a few problems last night. That is because it is the first time that we've actually done something realistic. What I mean be realistic, is that what we continued working on last night was a pretty good example of how ACTUAL webpages might be created. That means that even though I didn't teach you anything new at all last night, what I did teach you is how to use what you have learned to create something actually interesting and nice. We just added in a dash of complexity. Most of you get the concepts of what we have been doing, which is good; and obviously, this stuff can become complicated and tedious, so please stick with it. I know that it is probably not your favorite thing to spend time doing but please do not come to the next class unprepared. You must finish what we did in class and what is in blog below so as to move on to the last few steps that I will lead everyone through next week. For those of you who want to or have time to get ahead, I will mention in this posting what we are going to do in class before we turn the project in. So, work hard, and please don't miss the next class. I don't advocate missing sleep, or not eating, or not taking care of your life's necessities (family, work, etc.), but if there's ever a time to sacrifice a little bit while in school, mid-term time is certainly one of them. Therefore, if necessary, it is worth suffering a little by doing without an hour or two of sleep this week so you can get the stuff done and turned in to me on time. Good luck, Carter-

TOPICS:
1. Review:
  - LINK Creating a Simple Table;
  - LINK Modifying a Simple Table;
  - LINK Transfoming a Simple Table with Colspan and Rowspan;
2. Introduce:
  - LINK Insterting an Image Banner into a Table;
  - LINK Adding Basic CSS to a Table;
  - LINK Creating a Complex Table: A (2nd) Table within a Table;
  - LINK Modifying and Transfoming the 2nd Table;
HOMEWORK:
Review this week's posting to go over what was covered in class this week. Make sure you have do the following by next week's class:
- You need 3 pages in the mid-term project: home, questions, and answers. Make sure you follow the steps that we went through in class, or what you see down below to produce your three pages. If you have any questions about the steps, please email me or try to chat with me in the chat window to the right --->
- LINK Make sure that you download the questions at this link. Type all the questions in the cells of the table that you produced at the end of last night's class (or by the end of this posting) in the QUESTIONS document. You should type the questions exactly as you see them in my handout. That means that wherever I use bold, italics, bold AND italics, or underlining, then you should do the same using the code I have taught you.
- Then, type all the answers in the cells of the table in the ANSWERS document. You should add any bold, italics or other styling that you see necessary in your answers. Whenever you must type a TAG as part of your answer, you cannot type it as you normally do. If you do so, this will make an ACTUAL tag and so it will not appear in your page. Instead, it will ACTUALLY work in your code and do the job it is supposed to. This is because of the angle brackets. So, instead of typing those angle brackets you have to type the following characters: < produces < > produces > & produces & " produces " Therefore, as an example, to type the <html> tag so that it appears within a webpage, you would type it in the code like so: <html> We will do one more thing to add to this site in class next week, so do not come to class unprepared or with incomplete questions and answers. *****Remember, this project is the SECOND MOST IMPORTANT GRADE OF THE TERM.*****
REVIEW:
1. Tables: The most obvious, but least common use for HTML tables is for organizing columns and rows of data, much like an accountant’s ledger in which she enters credits and debits. When tables are used, these data are presented in the web-page as a grid of rectangular cells. In such a case, the visibility of the table is required, in that the borders of the columns and rows play a necessary role in the organization of the data. Everything must line up with the grid and be very clear and organized. You already know how to create a table, so here below here you will find a simple table like the one we created in class:
  
  And here is the code to create such a table: <table border="1px" width=@quot;100%" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
2. Page Layout: The second, perhaps less obvious but most common, use for HTML tables is for page layout and design purposes. For this, they are used in order to place content (text and images) around the page where you wish them to be. Using tables then fixes the content in place and does not allow it to shift as the browser window is resized. Without this device, sophisticated page-layout would be impossible.
  - without tables, you have only three (3) options for placing content on the page, alignment to the left, right, or center.
  - with tables, you may not only align to the left, right, and center, but also to the top, middle, and bottom. Moreover, this is for each and every individual cell of the table: tables allow you to divide up the larger space of the browser window into the smaller rectangles of the table cell, and you may further position your content with the align and valign attributes.
  However, in order for us even to begin to think about laying out an entire page of content, we must first start molding the table we have created to fit our purposes:
  1. Modifying a table entails here making simple modifications to the size and colors of a table, as well as its alignment strategies. In the following code, I add text, and then I change the alignment and width of the cells. <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td width="10px"> </td> <td width="500px"> </td> <td width="10px"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td align="right">questions</td> <td> </td> <td align="center">home</td> <td> </td> <td align="left">answers</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> Although I do not have the space required in my blog (I would need at least 700px in width) to demonstrate the actual table that I have outlined with my new code above, below you will find a close approximation: Next, let's turn those words, questions/home/answers, into links. You should recall that we do this by adding the <a> </a> anchor tag pair with its href="" attribute. You should notice below, that I do not make the word home into a link. This is because we are already in the home document, index.html, and so there is no reason to link to it. <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td width="10px"> </td> <td width="500px"> </td> <td width="10px"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td align="right"><a href="questions.html">questions</a></td> <td> </td> <td align="center">home</td> <td> </td> <td align="left"><a href="answers.html">answers</a></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
    
    questions home answers
  2. Adding Graphics: Inserting an Image Banner is exactly the same process as inserting any image into a table: instead of putting text (such as LINK 1) above, or a blank space ( ), you simply place the <img/> tag between the <td> tags , as demonstrated below. Before you create the code, however, you should use PhotoShop to create a banner with only color for the text. The background color should be black. See my banner below and use as a model for your own (Mine is not only smaller but I've eliminated the word MIDTERM because of the limited amount of space here). See last week's post for the detailed properties of your image: <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td width="10px"> </td> <td width="500px"><img src="images/midterm.gif" alt="DMA110 MidTerm"></td> <td width="10px"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td align="right"><a href="questions.html">questions</a></td> <td> </td> <td align="center">home</td> <td> </td> <td align="left"><a href="answers.html">answers</a></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
    
    questions home answers
    
    Before we proceed with the next step, let us add some color to the rows of the main table. We do this by using the bgcolor attribute as the example below: <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td width="10px"> </td> <td width="500px"><img src="images/midterm.gif" alt="DMA110 MidTerm"></td> <td width="10px"> </td> <td> </td> </tr> <tr bgcolor="#6666cc"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr bgcolor="#220066"> <td align="right"><a href="questions.html">questions</a></td> <td> </td> <td align="center">home</td> <td> </td> <td align="left"><a href="answers.html">answers</a></td> </tr> <tr bgcolor="#330099"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr bgcolor="#4433aa"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
    
    questions home answers
3. Introduce:
  1. Transforming a table in my design process here refers to more complex and rigorous modifications of the table. In these transformations, as demonstrated in this weeks' class, we may add another table as the content of a cell. This means we have nested tables, otherwise known as a table within a table. Now, although we didn't follow this step in class, for those of you who would like to make your table look nicer, I would suggest it. We are going to place another table within the 3rd cell of the 3rd row where it currently says home. The reason I want to do this is because I want to move all the links here into this table within a table. As you know already from last week's posting, and from this week's class, we are going to make an image in PhotoShop and that that image will be placed in the third cell of the first row. Because I would like the links to line up with the image, I want them all to be in this cell. As a result, this is just an aesthetic decision, not a functional one. The new table will have only one row and five cells in that row. At the same time I do this I will delete the word home. Let's see how it looks: <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td width="10px"> </td> <td width="500px"><img src="images/midterm.gif" alt="DMA110 MidTerm"></td> <td width="10px"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td align="right"><a href="questions.html">questions</a></td> <td> </td> <td align="center"> <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </td> <td> </td> <td align="left"><a href="answers.html">answers</a></td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
    
    questions
    
    answers
    
    In the next step, we will do two things: move the links into the new table within a table and we will change the widths of the 2nd and 4th cells of the 1st row in the new table to 10px. <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td width="10px"> </td> <td width="500px"> </td> <td width="10px"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td ~~align="right"~~>~~<a href="questions.html">questions</a>~~</td> <td> </td> <td align="center"> <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td align="left"><a href="questions.html">questions</a></td> <td width="10px"> </td> <td align="center">home</td> <td width="10px"> </td> <td align="right"><a href="answers.html">answers</a></td> </tr> </table> </td> <td> </td> <td ~~align="left"~~>~~<a href="answers.html">answers</a>~~</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
4. Creating a Complex Table: A Nested Table (within another Table)—In this week’s class we saw the introduction of the issue of tables in HTML as page layout devices. As you have seen the last two weeks, when used as such, they are usually invisible: that is, the borders are turned off, set to zero, and the grid is therefore hidden. As a result, only the content of the table, whatever is inside each cell, is visible, and not the table cells themselves. This week, we will see that the content of the individual cells of the table is not limited to images and text, but may also include another table. It is possible to place an entire table inside of another table for more advanced layout design. In this way, for the mid-term, you have one large table into which the banner image at the top, and the links are placed. It is the table that organizes the whole browser window, and divides it into smaller more manageable parts. Next, there is the second (inner) table. Like the other content, the image and the links, this table is placed inside the first (outer) table: all parts of this new table—the opening and closing table tags, the table row tags, and the table data tags—must be inside a single cell of the first table. This second table contains all the questions of the mid-term. This way, it makes it easier for you to add one row at a time and type one question at a time.
  1. In the first part of the class demonstration, we constructed the primary table with five rows and five cells in each row.
  2. In the second part of the class, we created the banner image in PhotoShop to place inside the top row. Since it only has a couple colors inside of it, we optimized it as a .gif image.
  3. In part three, we placed the image into the table and created the three (3) links.
  4. Finally, in part four (see below), we will create a new, second table inside of the first. This table is where the questions for the mid-term will be typed, and it is placed inside the 2nd larger cell of row five (5).
    1. We will start by creating a table with two rows, and three cells inside of each row, setting the width for the first cell narrower than the third cell, the second cell the narrowest of all, and the third wider main cell.
      
      questions home answers
    2. Then, add a number to the first cell of each row and align it to the right.
      
      questions home answers
      
      1)
      2)
    3. Lastly, copy and paste more rows, one for each question in the midterm take-home exam. The example below shows it copied several more times.
      
      questions home answers
      
      1)
      2)
      3)
      4)
      5)
      6)
5. Adding your first CSS to a web page entails first that we review how to add the most basic CSS to a web-page, such as the background color . To add CSS to a page as we have been doing in this class up to now, we place all the code into the head section of the document. Since it is an entirely different kind of code from HTML or XHTML, we must mark it off as such to indicate that we have switched gears and are typing a different code altogther. To do this, we must first type a pair of tags, the <style></style> tag pair. Next, we must add an attribute within the angle brackets of the first tag, but following the tag term, the type attribute. And finally, we must make certain to type all the CSS code in between this pair of tags, as idicated below. <style type="text/css"> the css code goes here and here and here, etc. </style> CSS code syntax follows very simple rules, and there are only three (3) basic terms to any style definition:
  1. The first term is known as the selector. It indicates which part or section of the document, or block of text will take on the new styling.
  2. The second term comes after an opening curly bracket { and is known as the property. It indicates which aspect or characteristic of an element, such as size or color, is to be modified.
  3. The third term comes after a colon : and is known as the value. It indicates the exact definition of a particular characteristic, which color, for example, or how big an element is to be.
  for example: <style type="text/css"> selector {property : value;} body {background-color : #000000;} </style> Above shows a simple example of a CSS style definition; however, setting the styles for links are a more complicated matter. There are four (4) link states , or states to which styles may be applied. Since this is the case, then attaching a single style definition to the <a> tag selector will not exploit all the possibilities for links. In such a case, you would only be able to attach a style for a single link state. Therefore, in order to create four (4) style definitions to attach to a single selector, we must modify the <a> tag selector to create what are known as sub-selectors. The sub-selectors for the <a> tag selector are:
  1. a:link — this attaches a style to the links as they sit in the page before they have been 'clicked on'.
  2. a:visited — this attaches a style to the links as they sit in the page after they have been 'clicked on'.
  3. a:active — this attaches a style to the links at the moment they are being 'clicked on'.
  4. a:hover — this attaches a style to the links at the moment the cursor 'passes over' them.
  Therefore, to add style definitions to the link sub-selectors, we do it as such: <style type="text/css"> selector {property : value;} body {background-color : #000000;} a:link {color : #ff0000;} a:visited {color : #ff9900;} a:active {color : #ffff00;} a:link {color : #ff00ff;} </style> We can add additional properties to a style definition, for example to the definition indicated by the body selector. As it is, it only has one property defined, the background-color property. We may include many other additional properties to this definition, such as to define the margins of the document (the space that separates a table or any other content from the edge of the browser window). We will set all four (4) margins to zero (0) pixels: <style type="text/css"> body {background-color : #000000; margin-top : 0px; margin-bottom : 0px; margin-left : 0px; margin-right : 0px;} a:link {color : #ff0000;} a:visited {color : #ff9900;} a:active {color : #ffff00;} a:link {color : #ff00ff;} </style>

Fundamentals of Internet Applications

Thursday, June 19, 2008

Summer 2008

week 6: 06/18

No comments:

Post a Comment

Google Analytics



questions	home	answers