Fundamentals of Internet Applications: Fall 2007 week 6: 10/24

Hi again everyone, I know you all have a lot of work to get done in all of your classes. Unfortunately, that is simply the way things are in college: things build up in the middle and then again at the end; however, you can mitigate this problem by trying to keep up in class. This means not simply doing the homework each week, but to make certain that you know thoroughly what is covered each week by going beyond the weekly assignments. The homework that I assign each week in general is meant to be a minimum amount to do over the week just so you don't forget everything covered in class, so that you'll come to the next class not having to relearn everything from the previous week. It is true also, as I've mentioned before, that this stuff can be tedious, and for that it is probably not your favorite thing to spend time doing when not at work or in class. But it does pay off. If you keep putting in the time, you will see that it will become much easier to do by the end of the semester. 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. There are two be 3 pages in the mid-term project: intro, 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, please email me. We will do one more thing to add to this site in class next week, so do not come to class unprepared. *****Remember, this 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" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <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> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td width="200px" align="center" valign="top"> </td> <td width="150px">link 1;</td> <td width="25px"> </td> <td width="150px" align="center" valign="top">link 2</td> <td width="25px"> </td> <td width="150px" align="center" valign="top">link 3</td> <td> </td> </tr> <tr> <td> </td> <td> </td> <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:
    
    link 1 link 2 link 3
  2. Transforming a table in my design process here refers to more complex and rigorous modifications of the table. In these transformations, as demonstrated in last weeks' class, we will change the number of cells within various rows and columns by joining or merging them together using colspan or rowspan. In the next step, we will join cells 2-6 in rows 2 and 4. <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="5"> </td> <td> </td> </tr> <tr> <td width="200px;" align="center" valign="top"> </td> <td width="150px">link 1;</td> <td width="25px"> </td> <td width="150px" align="center" valign="top">link 2</td> <td width="25px"> </td> <td width="150px" align="center" valign="top">link 3</td> <td> </td> </tr> <tr> <td> </td> <td colspan="5"> </td> <td> </td> </tr> </table>
    
    link 1 link 2 link 3
Introduce:
1. 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: <table border="1px" cellspacing="0px" cellpadding="0px"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="5"><img src="images/banner.gif" alt="DMA110 Mid-Term Project"/></td> <td> </td> </tr> <tr> <td width="200px;" align="center" valign="top"> </td> <td width="150px">link 1;</td> <td width="25px"> </td> <td width="150px" align="center" valign="top">link 2</td> <td width="25px"> </td> <td width="150px" align="center" valign="top">link 3</td> <td> </td> </tr> <tr> <td> </td> <td colspan="5"> </td> <td> </td> </tr> </table>
  
  link 1 link 2 link 3
2. Adding more 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> The last part of this step includes creating our links, and adding background color to our table: <table border="1px" cellspacing="0px" cellpadding="0px"> <tr bgcolor="#6666cc;"> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="5"><img src="images/banner.gif" alt="DMA110 Mid-Term Project"/></td> <td> </td> </tr> <tr bgcolor="#6666cc;"> <td width="200px;" align="center" valign="top"> </td> <td width="150px"><a href="page_1.html">link 1</a></td> <td width="25px"> </td> <td width="150px" align="center" valign="top"><a href="page_2.html">link 2</a></td> <td width="25px"> </td> <td width="150px" align="center" valign="top"><a href="page_3.html">link 3</a></td> <td> </td> </tr> <tr bgcolor="#330099;"> <td> </td> <td colspan="5"> </td> <td> </td> </tr> </table>
  
  link 1 link 2 link 3
3. Creating a Complex Table: A Table within a Table—In last 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.
    - In the second row, we used the colspan attribute to join the five (5) middle cells into one cell that stretches across the middle of the table. We did this so as to make a cell that was large enough to but the title banner image in it.
    - In the fourth row, we repeated what we did in the second row.
  2. In the second part of the demonstration, 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 four (4).
    1. We will start by creating a table with two rows, and two cells inside of each row, setting the width for the first cell much narrower than the second cell, which we won't set at all.
      
      link 1 link 2 link 3
    2. Then, add rowspan = "2" to the second cell of the first row.
      
      link 1 link 2 link 3
    3. And delete the second cell of the second row.
      
      link 1 link 2 link 3
    4. Finally, copy and paste both rows for each question in the midterm take-home exam. The example below shows it copied three more times.
      
      link 1 link 2 link 3

Fundamentals of Internet Applications

Saturday, October 27, 2007

Fall 2007

week 6: 10/24

No comments:

Post a Comment

Google Analytics



link 1	link 2	link 3



link 1	link 2	link 3



link 1	link 2	link 3