Fundamentals of Internet Applications: October 2008

Friday, October 24, 2008

Autumn 2008

week 6: 10/22

Hi again everyone, I know that even those of you who have the BEST grasp of this coding stuff had a few problems this week. 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- P.S. Please make sure you study hard for the exam as you will only have 30minutes to complete and correct what you have already done this week. Now that you all know what is on the test (the exact same stuff as the study-sheet, right?), you should all make an A!!!

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 you must place all the code into the head section of the document below the closing title tag . 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>

Friday, October 10, 2008

Autumn 2008

week 5: 10/08

Hi everyone. Wednesday night's class went very well for many of you. Most everyone seems to be picking up what we have covered thus far in this class, but some of you are having trouble. Please, if you need additional help, your first step is to read this blog (and other tutorial sites) 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 catch you up. Last night's class was a bit of a review of two things: one that we have been working with since the first day, links; and the other that I introduced a couple of weeks ago in my blog and in the homework, tables. As I have mentioned, tables is a very important aspect of HTML to understand and get a good handle on, which is why I have spent already 2 full classes on the subject and intend to spend several more. Therefore, below, you will find what I covered this week is nearly identical to this week's class. All of what is below, I have already mentioned in class before. The only difference is that we have linked our documents to other documents instead of to external websites. 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, as it is part one of the midterm project. Carter-

TOPICS:
- LINK HTML Tag Types,
- LINK XHTML DTD (Document Type Definition),
- LINK More with Images—Images as Links,
- LINK HTML Tables.
- LINK HTML Table: Example.
- LINK Multiple Page Web-Sites,
HOMEWORK
1. MIDTERM EXAM: LINK Click this link to download the study sheet for the midterm exam next week.
2. MIDTERM PROJECT: The homework this week is simply to follow the steps below. This homework is Part I of the Mid-Term Project.
  1. Create a folder for your mid-term and then create a new notepad document named index.html.
  2. In this document, create a table that has 5 rows with 5 cells in each row.
  3. Set the width of the 2nd and the 4th cells in the first row to 10px.
  4. Set the width of the 3rd cell of the first row to 500px.
  5. Set the width of the entire table to 100%.
  6. Open PhotoShop, and BEFORE you you create a new image, set the background color to black and choose any foreground color you wish.
  7. create a new image with the following properties:
    1. name: midterm
    2. width: 500px
    3. height: 260px
    4. resolution: 72ppi
    5. background color: black
    6. color mode: RGB
  8. Next, choose a foreground color and using the type tool, select Impact as the font, and type DMA110. Make the size of this text 164pt.
  9. Now, using the same fill color, but either slightly darker or slightly lighter and in a new layer, select Impact as the font, and type the word Midterm. Make the size of this text 142pt.
  10. Before you save, in your midterm folder, create a new folder named images.
  11. Flatten your layers. To do this, in your layers panel at the top, there is a tiny arrowhead pointing to the right. Click on this and choose flatten.
  12. Then, back in PhotoShop, choose File >> Save for Web.
  13. On the right hand side of the window that appears, choose 32 where it says colors.
  14. Next, select save and make certain that you save it into your images folder.
  15. Using the <img/> , place this image into the 3rd cell of the first row.
  16. Now, in the 1st cell of the 3rd row type the word questions.
  17. Second, in the 3rd cell of the 3rd row type the word home.
  18. Third, in the 5th cell of the 3rd row type the word answers.
  19. Now, just like we did in class save this document.
  20. Once you save it, save it again, but this time choose the name questions.html and make sure you save it into the midterm folder.
  21. Repeat this action, but this time save it as answers.html. When you have completed this, make certain that you have three files in your midterm folder: index.html, questions.html, and answers.html.
  22. Finally, just like we did in class on Wednesday, and just like you will see down below, link these three documents together using those words in the 3rd row: questions, home, and answers.
REVIEW: up to now, during these first three (3) weeks of class, you have been introduced to the three basic types of HTML Tags (Block tags, In-line tags, and Empty tags) and their primary purposes and basic functions in creating a web-page. Therefore, the first three weeks are intended as a kind of introduction to the structure and mechanics of HTML. However, from this point on, we will increasingly explore the use of these tags, and others, in more sophisticated, nuanced, and complex situations. As a result, design, and not merely function, will play a larger role and become increasingly important to help solve problems.
1. Basic tags used in the creation of web-pages: <html>, <head>, <title>, and, in most types of HTML and XHTML documents, <body>.
2. Block tags covered up to this point in class: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <ol>, and, <ul>.
3. In-Line tags covered up to this point in class: <b>, <i>, <u>, <a>, and, <font>.
4. Empty tags covered up to this point in class: <br/>, <hr/>, and, <img/>. Over the last three classes we have seen the introduction of the issue of Tables in HTML. Tables are an especially important and, at times, complex issue with regard to web-design. We will, therefore, spend several classes exploring the various roles tables can fulfill. In addition, during the second half of the semester, we will explore two (2) case-studies, two examples of two different types of web-pages that will serve as practical demonstrations of how tables may be employed to solve page-layout issues. But before we resume with tables, Let's consider a couple of other things: what's known as DTD and a bit more about images.
5. DTD—Document Type Definition: <!DOCTYPE> Is Mandatory An XHTML document consists of three main parts: * the DOCTYPE * the Head * the Body The basic document structure is: <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html> 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: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6. Images: As has already been covered in previous classes, to insert an image into a web-page, the <img/> tag must be present together with the src attribute indicating the particular file source for the image as follows: — <img src="lily.jpg"/> — It is an empty tag, so the slash is found just before the closing bracket. In addition, we have also learned how to create links, using the anchor <a> tag, along with the href attribute to indicate the web address to another web-page or web-site: <a href="http://dma101.blogspot.com"> DMA101 Blog </a> the previous code leads to this link which is just to another blog-site: DMA101 Blog. These two things, the image and the link, may be put together, however, in which an image is used as a link instead of text. To do this, the text DMA101 Blog may be replaced with the image, with the first anchor tag before, and the closing anchor tag after, such as: <a href="http://dma101.blogspot.com"> <img src="lily.jpg"/> </a> This creates the above image as a link to the blog site for another class. In the examples above, the text link and the image made into a link, both link to an external site, that is, a web-site unrelated to the current page. If it is not part of the current site, then you must type the entire url, protocol (http://) and all; however, if the link is to another page in the same web-site, and if the page is located in the same folder, then all you need do is type the name of the file as the reference. These are known as relative references and are used for internal links within a single site. And finally, we come to HTML tables:
7. HTML Tables:
  1. Table rows are created row-by-row using the <tr> tag, the table row tag. Each of these tags marks the beginning and ending of a single row in a table. For each row, one pair of these tags is necessary, one marking the start of the row, and one the end of it. Each row is composed of one or more cells.
  2. Table cells are the individual rectangles that make up the grid of the table. Each horizontal row consists of at least one rectangular cell where text or some kind of image may be placed. Typed between a pair of <tr> tags, each pair of <td> (for table data) tags creates one cell. For each additional cell, there must be another pair of <td> tags, and for each of these cells there must be some kind of content between the tags, or the cell will not register and therefore not appear in the browser window. This content may be in the form of an image, a link, some text, or even a blank space created by the series of characters,  . Here are a series of attributes, which may be used with the <td> tag:
    1. width—changes the width of the cell and all of the cells below it in the same column with units in pixels or as a percentage of the table width.
    2. bgcolor—the same attribute used in the <body> tag. In this case, it adds a background color only the area of the table itself. The particular color must be indicated in the hexadecimal color code.
    3. align—sets the horizontal alignment for the content within the particular cell. There are three (3) possible values for this attribute: right, left, and center.
    4. valign—sets the vertical alignment for the content within the particular cell. Here, also, there are three (3) possible values: top, bottom, and middle.
    5. colspan—allows the particular cell to extend, or span, horizontally across more than one column of cells.
    6. rowspan—allows the particular cell to extend, or span, vertically downward across more than one row of cells.
  3. Table Example: In the table below, there are three (4) rows (horizontal divisions) and four (4) columns (vertical divisions):
    
    Notice that each row has five cells. Recall, that a cell is an individual rectangular division. Also recall that a row extends across. We create tables row by row, and so the code for this table looks like so:
    <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px">
    1. row 1
      <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr>
    2. row 2
      <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr>
    3. row 3
      <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr>
    </table>
8. INTRODUCE:Next, we are going to modify the table above by applying various widths and background colors with a number of attributes placed in the <table>, the <tr>, and the <td> tags.
  1. Widths: First let's modify some of the widths of the cells. You will notice that when I change the width of a cell, all of the cells in the same column, both above it and below it, will inherit the same width. So, to the second and the fourth cells of the first row, I will change the width to 10 pixels. This will make all of the cells in both of those columns the same width. <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td>   </td> <td width="10px">   </td> <td>   </td> <td width="10px">   </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. Text: Now, we will add some text. Into the third cell of the first row will will type the word TABLES; and then, into the first, third, and fifth cells of the third row we will type the words Table I, home, and Table II. <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td>   </td> <td width="10px">   </td> <td> TABLES </td> <td width="10px">   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td> Table I </td> <td>   </td> <td> home </td> <td>   </td> <td> Table II </td> </tr> </table>
    TABLES
    
    Table I home Table II
  3. Alignment: Next, we will change the alignment of the text we have added by using the align attribute. Into the third cell of the first row we will align the word TABLES to the center; and then, first, the first cell of the third row we will set the alignment to right. Second, the third cell of the third row we will set the alignment to center. And third, the fifth cell of the third row we will set the alignment to left. <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td>   </td> <td width="10px">   </td> <td align="right"> TABLES </td> <td width="10px">   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td align="right"> Table I </td> <td>   </td> <td align="center"> home </td> <td>   </td> <tdalign="left"> Table II </td> </tr> </table>
    TABLES
    
    Table I home Table II
  4. Background Color: To what we have done so far, I would like to add some background color. We are going to employ a monochromatic color scheme. This literally means one color, and we will be using only one hue (another word for color). You may choose any hue you like, and then change the shade or tint slightly for each row. That way, if I choose green as my hue, each row can be a slightly different green which will add some variety but maintain the elegance and simplicity of monochromism. To set the background color for an entire row, we will use the bgcolor attribute in the <tr> tag and then employ the hexadecimal code to set the actual colors we want. <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr bgcolor="#002266"> <td>   </td> <td width="10px">   </td> <td align="right"> TABLES </td> <td width="10px">   </td> <td>   </td> </tr> <tr bgcolor="#001155"> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr bgcolor="#001133"> <td align="right"> Table I </td> <td>   </td> <td align="center"> home </td> <td>   </td> <td align="left"> Table II </td> </tr> </table>
    TABLES
    
    Table I home Table II
  5. Text Style: Lastly, we will change the size of the text in the first row, the word TABLES using the <font> tag. In addition to this, we will also set the borders of the tables to 0 pixels. <table width="100%" border="0px" cellspacing="0px;" cellpadding="0px"> <tr bgcolor="#002266"> <td>   </td> <td width="10px">   </td> <td align="right"> <font face="Tahoma" size="7" color="99aaff"> TABLES </font> </td> <td width="10px">   </td> <td>   </td> </tr> <tr bgcolor="#001155"> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr bgcolor="#01133"> <td align="right"> Table I </td> <td>   </td> <td align="center"> home </td> <td>   </td> <td align="left"> Table II </td> </tr> </table>
    TABLES
    
    Table I home Table II
9. Multiple Page Sites:
  In the next part we are going to change the three words at the bottom of that table, Table I, home and Table II, into links. Before we do that, however, we have to have something to link to. Next week in the next class we are going to do some experimentation with tables, and whatever we do we will link to these links, but in this past Wednesday's class we set everything up so that we could do that by creating three documents that look exactly the same. In each of the three documents we have this table that we created, and in each of the three documents we are going to create links so that the three documents can be linked together.
  1. Document 1: Rename the current document index.html.
  2. Document 2: Now, choose save as from the File menu. Then, name it table_1.html, and make sure you're saving into the same folder.
  3. Document 3: Finally, repeat the previous action, but this time save it as table_2.html, again in the same place. When you are done with this, you will have 3 documents: index.html, table_1.html, and table_2.html.
  As a result of this, now you have three identical documents. So, the next step is to make the links, and we'll start with the first document, index.html. Open that document, then, and look at the code.
  1. Links: Document 1—Here is the code including the links for the first document. Notice, that there is no link for home. This because we are already in the home document, index.html, which makes it unnecessary to link to it: <table width="100%" border="0px" cellspacing="0px;" cellpadding="0px"> <tr bgcolor="#002266"> <td>   </td> <td width="10px">   </td> <td align="right"> <font face="Tahoma" size="7" color="99aaff"> TABLES </font> </td> <td width="10px">   </td> <td>   </td> </tr> <tr bgcolor="#001155"> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr bgcolor="#01133"> <td align="right"> <a href="table_1.html"> Table I </a> </td> <td>   </td> <td align="center"> home </td> <td>   </td> <td align="left"> <a href="table_2.html"> Table 2 </a> </td> </tr> </table>
  2. Links: Document 2—Here is the code including the links for the second document. Notice, that there is no link for table_1.html document this time. This because we are working on the table 1 document, table_1.html, which makes it unnecessary to link to it: <table width="100%" border="0px" cellspacing="0px;" cellpadding="0px"> <tr bgcolor="#002266"> <td>   </td> <td width="10px">   </td> <td align="right"> <font face="Tahoma" size="7" color="99aaff"> TABLES </font> </td> <td width="10px">   </td> <td>   </td> </tr> <tr bgcolor="#001155"> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr bgcolor="#01133"> <td align="right"> Table I </td> <td>   </td> <td align="center"> <a href="index.html"> home </a> </td> <td>   </td> <td align="left"> <a href="table_2.html"> Table 2 </a> </td> </tr> </table>
  3. Links: Document 3—Here is the code including the links for the third document. Notice, that there is no link for table_2.html document this time. This because we are working on the last of the three documents, the table 2 document, table_2.html, which makes it unnecessary to link to it: <table width="100%" border="0px" cellspacing="0px;" cellpadding="0px"> <tr bgcolor="#002266"> <td>   </td> <td width="10px">   </td> <td align="right"> <font face="Tahoma" size="7" color="99aaff"> TABLES </font> </td> <td width="10px">   </td> <td>   </td> </tr> <tr bgcolor="#001155"> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr bgcolor="#01133"> <td align="right"> <a href="table_1.html"> Table I </a> </td> </td> <td>   </td> <td align="center"> <a href="index.html"> home </a> </td> <td>   </td> <td align="left"> Table 2 </td> </tr> </table>

Friday, October 03, 2008

Autumn 2008

week 4: 10/03

Hi everyone. Below, you will find what I covered this week. You will see that much of what is below, I've already mentioned in class before. Therefore, most shouldn't be entirely new. We've already experimented a little with tables, and there's plenty more in forthcoming classes. There are a couple of new things here and there, however, but don't worry, full explanation is forthcoming in class. Of course, you may always seek out information elsewhere. A good web resource is: w3schools. 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. That is why we had the quiz. Many of you poorly on it, but a few of you got most of the important points. I want to reiterate that I am NOT giving you homework and quizzes for my own sadistic pleasure at torturing you all (well, at least not only for that reason ;-) ). No, I simply want you to be prepared for the next steps we take when creating more complex pages for the Internet that will include a lot of code in multiple documents. Because of this, the stuff that we did in class you should commit to memory as it is really basic and you should not have to think too much about any of it. Also, please, those of you who haven't given me much (or any) homework thus far, show me something next class if you want to salvage your grade. I have noticed in general that those who find themselves having the most problems, making the most mistakes, and feeling the most troubled about this class are the same ones who spend the least amount of time on it outside of class, and who do the least amount of homework. There is a direct correlation between understanding the material in this class and the amount of time you spend on it. For those who are faltering or feeling insecure, try and spend more time than you have been on this class. Carter-

TOPICS:
- XHTML DTD (Document Type Definition),
- More with Images—Images as Links,
- Multiple Page Web-Sites,
- HTML Tables.
HOMEWORK:
- LINK Download PART I of this week's homework here:
- Do the questions below as PART II of this week's homework;
QUESTIONS: Here are some questions to help guide you through this weeks' material:
- Define: block tags, in-line tags and empty tags? How are they similar or different from each other?
- What are some examples of each type?
- What must be done in order to make an image into a hyperlink?
- What are the three tag pairs necessary to create a table?
- Between which one of the above three tag pairs must content be typed for it to show up inside of a table cell?
- What are ALL the sorts of content which may be placed within a table?
- Can an image in a table be made into a link? If not, then why not? If so, then how?
REVIEW: up to now, during these first three (3) weeks of class, you have been introduced to the three basic types of HTML Tags (Block tags, In-line tags, and Empty tags) and their primary purposes and basic functions in creating a web-page. Therefore, the first three weeks are intended as a kind of introduction to the structure and mechanics of HTML. However, from this point on, we will increasingly explore the use of these tags, and others, in more sophisticated, nuanced, and complex situations. As a result, design, and not merely function, will play a larger role and become increasingly important to help solve problems.
1. Basic tags used in the creation of web-pages: <html>, <head>, <title>, and, in most types of HTML and XHTML documents, <body>.
2. Block tags covered up to this point in class: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <ol>, and, <ul>.
3. In-Line tags covered up to this point in class: <b>, <i>, <u>, <a>, and, <font>.
4. Empty tags covered up to this point in class: <br/>, <hr/>, and, <img/>.
INTRODUCE:Over the last two classes we have seen the introduction of the issue of Tables in HTML. Tables are an especially important and, at times, complex issue with regard to web-design. We will, therefore, spend several classes exploring the various roles tables can fulfill. In addition, during the second half of the semester, we will explore two (2) case-studies, two examples of two different types of web-pages that will serve as practical demonstrations of how tables may be employed to solve page-layout issues. But before we resume with tables, Let's consider a couple of other things: what's known as DTD and a bit more about images. DTD—Document Type Definition: <!DOCTYPE> Is Mandatory An XHTML document consists of three main parts: * the DOCTYPE * the Head * the Body The basic document structure is: <!DOCTYPE ...> <html> <head> <title>... </title> </head> <body> ... </body> </html> 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: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Images: As has already been covered in previous classes, to insert an image into a web-page, the <img/> tag must be present together with the src attribute indicating the particular file source for the image as follows: — <img src="lily.jpg"/> — It is an empty tag, so the slash is found just before the closing bracket. In addition, we have also learned how to create links, using the anchor <a> tag, along with the href attribute to indicate the web address to another web-page or web-site: <a href="http://dma101.blogspot.com"> DMA101 Blog </a> the previous code leads to this link which is just to another blog-site: DMA101 Blog. These two things, the image and the link, may be put together, however, in which an image is used as a link instead of text. To do this, the text DMA101 Blog may be replaced with the image, with the first anchor tag before, and the closing anchor tag after, such as: <a href="http://dma101.blogspot.com"> <img src="lily.jpg"/> </a> This creates the above image as a link to the blog site for another class. In the examples above, the text link and the image made into a link, both link to an external site, that is, a web-site unrelated to the current page. If it is not part of the current site, then you must type the entire url, protocol (http://) and all; however, if the link is to another page in the same web-site, and if the page is located in the same folder, then all you need do is type the name of the file as the reference. These are known as relative references and are used for internal links within a single site. And finally, we come to HTML tables:
1. Tables are created by the <table> tag, another example of a block level tag; however, as mentioned above, they are a special case, not only for what they can create in a web-page, but primarily for the many other varied tasks they may perform. First and foremost, tables refer exactly to what the term suggests: they create tables for data, such as in accounting ledgers. By appearance, the table tag creates a grid of rectangular ‘cells’ where some kind of data or information is placed. These tables are organized by column (vertical divisions up and down the height of the page) and by row (horizontal divisions across the width of the page). They are built in HTML, however, one row at a time. Here are a series of attributes that may be used with the <table> tag:
  1. width—changes the width of the table with units in pixels or as a percentage of the browser window.
  2. border—adds a border around the table and between the various rows and cells with a thickness of the designer’s choice with units in pixels. To be used sparingly as it tends to be over-used and used badly.
  3. bgcolor—the same attribute used in the <body> tag. In this case, it adds a background color only the area of the table itself. The particular color must be indicated in the hexadecimal color code.
  4. bordercolor—much like the bgcolor attribute in that it uses the hexadecimal color code, but in this case it only colors the borders.
  5. cellspacing—regulates the spacing between the various cells in the table.
  6. cellpadding—regulates the spacing around the edge against the border within each cell of the table.
2. Table rows are created row-by-row using the <tr> tag, the table row tag. Each of these tags marks the beginning and ending of a single row in a table. For each row, one pair of these tags is necessary, one marking the start of the row, and one the end of it. Each row is composed of one or more cells.
3. Table cells are the individual rectangles that make up the grid of the table. Each horizontal row consists of at least one rectangular cell where text or some kind of image may be placed. Typed between a pair of <tr> tags, each pair of <td> (for table data) tags creates one cell. For each additional cell, there must be another pair of <td> tags, and for each of these cells there must be some kind of content between the tags, or the cell will not register and therefore not appear in the browser window. This content may be in the form of an image, a link, some text, or even a blank space created by the series of characters,  . Here are a series of attributes, which may be used with the <td> tag:
  1. width—changes the width of the cell and all of the cells below it in the same column with units in pixels or as a percentage of the table width.
  2. bgcolor—the same attribute used in the <body> tag. In this case, it adds a background color only the area of the table itself. The particular color must be indicated in the hexadecimal color code.
  3. align—sets the horizontal alignment for the content within the particular cell. There are three (3) possible values for this attribute: right, left, and center.
  4. valign—sets the vertical alignment for the content within the particular cell. Here, also, there are three (3) possible values: top, bottom, and middle.
  5. colspan—allows the particular cell to extend, or span, horizontally across more than one column of cells.
  6. rowspan—allows the particular cell to extend, or span, vertically downward across more than one row of cells.
4. Table Example: In the table below, there are three (4) rows (horizontal divisions) and four (4) columns (vertical divisions):
  
  Notice that each row has four cells. Recall, that a cell is an individual rectangular division. Also recall that a row extends across. We create tables row by row, and so the code for this table looks like so:
  <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px">
  1. row 1
    <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr>
  2. row 2
    <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr>
  3. row 3
    <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr>
  </table>



questions	home	answers

	TABLES

Table I	home	Table II

	TABLES

Table I	home	Table II

	TABLES

Table I	home	Table II

Friday, October 24, 2008

Autumn 2008 week 6: 10/22

Friday, October 10, 2008

Autumn 2008 week 5: 10/08

Friday, October 03, 2008

Autumn 2008 week 4: 10/03

Google Analytics

Autumn 2008

week 6: 10/22

Autumn 2008

week 5: 10/08

Autumn 2008

week 4: 10/03