Fundamentals of Internet Applications: 2006

Friday, December 15, 2006

Fall 2006

week 13: 12/13

Okay everybody, here is the link to the final exam study-sheet LINK
email me if you have any questions. Carter-

Thursday, November 23, 2006

Hello everyone, I hope everyone had a nice holiday, that you're all well-fed and well-rested. And so here we are with less than a month to go before the end of the term. It's good to take a break for a day or two to gear up for the end of the semester. The last few weeks are never very easy, so I hope everyone is prepared to work hard. Afterwards, when everything is over in December, you'll have nearly a full month to relax, but right now, there's lots of work to be done. Last week's class was cut a little short, as those few of you who were there know, but we did get to the main part of the lesson: learning the various form elements, and then designing a small form with the use of a table. The only thing we did not do was to add the CSS, but we will do that at the beginning of class this coming Wednesday, 11/29. This posting, therefore, will be rather short. I had hoped that people would've gotten the table easily and quickly, and that I could focus on the CSS, but just creating a simple table is still giving many people in class a great deal of trouble, so I'll go through the whole thing here, step-by-step. Also, I assigned homework for the 2nd part of the final project which you will find a little below. Try not to get behind on your final project. The more work you do, and the more often I see it, the better your grade will be. See you Wednesday, Carter-

TOPICS:
1. Final Project;
  - LINK Content Requirements;
  - LINK Technical Requirements;
  - LINK Design Requirements;
2. Classwork:
  1. Review:
    - LINK Creating a simple table;
    - LINK Modifying the table;
    - LINK Adding colspan;
  2. Introduce:
    1. Inserting HTML Form Elements:
      - LINK Text Boxes;
      - LINK Check Boxes;
      - LINK Radio Buttons;
      - LINK Drop-Down Menus;
      - LINK Text Areas;
      - LINK Buttons;
    2. LINK Designing an HTML Form;
HOMEWORK—Final Project, Part II: This week's homework is the second part of the final project. It is not extraneous to what you will be required to do and what will be due the last day of class. If you continue to produce your homework each week, you will be largely finished with the project well before it is due. Part II, due the next class (11/29/06⁙week 11), consists of two (2) things:
- A Frameset Document—Create a frameset document. This simply consists of one HTML document, such as the one that we learned about two weeks ago in class. By doing this document, you will primarily be deciding the orientation of your frames, whether they will be horizontal (rows) or vertical (cols);
- An Intro Page—Create an introductory page, also known as a splash page. Please see the description below of what this consists. LINK
Also, please recall LAST WEEK'S homework below. If you haven't completed this yet, please do so by the next class.
- A Logo—Create a new logo for the site described below. This will be used on the intro page as well as at the top of every other page in the site. It must follow the same complimentary color scheme described just below.
- A Color Scheme—You must decide upon your color scheme for your site by Friday. This does not mean it cannot change somewhat over the course of your work during the next 5 weeks; but rather, it is meant as a initial design decision as a way for you to begin to determine the direction it will take. LINK View the CSS code of the following document at the above link. The code has directions within the CSS at the top instructing you what to do. The link takes you to the document you will use to demonstrate your color scheme to me. Once you have clicked on the link, choose view << source to see the code. All you need to look at is the top of the document in the CSS section. Please send me an email, or ask me before Friday's class if you are unclear what I want.
FINAL PROJECT: Democracy Now! website Re-Design The current Democracy Now! website is found here (LINK), and you should look through the site and familiarize yourself with its topic and mission. Knowing what the site is about is imperative to making design decisions for color and layout. Your project is to re-design the parts of the site detailed below.
1. CONTENT REQUIREMENTS:
  1. Page 1: INTRO PAGE—This page has no requirements other than to follow the general technical and design requirements for the entire site (see below: LINK). All it consists of is some sort of graphic introduction, an image, or flash animation, or whatever you prefer to introduce us to the site, and a link to the primary frameset (index) of the site. It contains NO OTHER CONTENT. But please make sure you follow your complimentary color scheme.
  2. Page 2: HEADLINES PAGE—This page includes all the headlines, summaries, images and captions which I will provide to you. If you wish to add any additional headlines and images to this page, please do so. The images and text required for this page will be given to you near the end of the term. We will save this page for last so that the headlines are as current as possible.
  3. Page 3: MAIN PAGE—This page must have the introductory text, About Democracy Now! that I will provide you, as well as a couple of images that I will also provide to you. Any other text or images that you find and wish to include is welcomed and encouraged; however, it must remain on the topic of the site. You must use all the information on the following two (2) pages in your main page found here: LINK (about) and here: LINK (history) The images required for this page are here: LINK
  4. Page 4: IMAGE GALLERY PAGE—This page must have ALL the images and caption text that I will provide you. There will be at least ten (10) images. Once again, please use additional images and captions for them if you wish. The images required for these pages are here: LINK and the captions for the images are here (you should note that the name of the image precedes the caption): LINK
  5. Page 5: FORM I PAGE—This page will consist of the first form of two that will be required for the site, the submit idea form. It must utilize all of the same form fields as the form found in the current site: LINK
  6. Page 6: FORM II PAGE—This page will consist of the second form of two that will be required for the site, the volunteer form. It must utilize ALL of the same form fields as the form found here: LINK
2. DESIGN REQUIREMENTS:
  1. Color Scheme—you must use what is known as a Complimentary Color Scheme. A complimentary color scheme is a two-color scheme, but it is basically a scheme in which the large majority of the site is done monochromatically. Monochromatic means one color. This means that you start off with a site that follows a monochromatic scheme, which means that everything is to be some tint or shade of the same color. If you choose blue as your color, then that means absolutely everything in the site must be some variation of blue, including images. If you wish to show color images, then make the images clickable to link to larger, full-color versions of them. Once you establish this primary color, then you select its compliment to use as an accent color, for times when you need to focus attention or when you require greater contrast. Therefore, if blue is the main color for most of your site, then you would use some version of its compliment, orange, as your accent color (blue & orange, red & green, and yellow & purple).
  2. Page Layout—you must use CSS and/or tables to lay out all pages in a pleasing way. If you are not certain how to do this, consult our past classes and me for assistance.
3. TECHNICAL REQUIREMENTS:
  1. XHTML
    —ALL CODE for this site (other than for the frameset document must be typed using STRICT XHTML standards. This means the following:
    - that all tags and their attributes must be typed in lower case;
    - that all attribute values must be typed in quotes and with units;
    - that the DTD for strict XHTML must be typed at the top of the document;
    - that all empty tags must be typed with the slash at the end, such as with the <br/> tag;
    - that none of the deprecated inline tags are to be used, such as the <font>, <b>, <u>, or <i> tags;
    - and, in addition, that the <tbody> and the <thead> tags, as well as the height attribute for the <table> and <td> tags, are not permitted.
    If you are uncertain about something, you can consult the requirements at the w3schools site (LINK), or you may ask me.
  2. CSS—ALL STYLING must be done using CSS. We have used it extensively in this class, and further, as it is the standard in web-design, it is a requirement that this site use CSS for the styling of the page. All three levels of styles may be, and are encouraged to be used. Please consult me if you need additional assistance with this. You will be learning more and more about CSS as the term progresses.
CLASSWORK—Once again, we started Wednesday's class with a review of a by now very familiar topic. This time (again) it was HTML tables. Like last time, I will demonstrate with examples of code and the resulting tables that we came up with in class. LINK Click here LINK and here for a more thorough introduction, discussion and demonstration on the topic of tables.
1. REVIEW:
  1. A Simple Table—We began the class be creating a simple table of four (4) rows with eleven (11) cells in each row:
    
    And here is the code for this table: <table border="1px" width="100%"> // below here is row 1 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 2 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 3 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 4 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
  2. Modifying the Table—Next, I add a few attributes and some text to the table: <table border="1px" width="100%" cellspacing="0px;" cellpadding="3px"> // below here is row 1 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 2 <tr> <td width="10px;"> </td> <td align="right" valign="top">first name</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">midde initial</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">last name</td> <td width="10px;"> </td> <td> </td> <td width="10px;"> </td> </tr> // below here is row 3 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 4 <tr> <td width="10px;"> </td> <td align="right" valign="top">city</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">state</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">zip code</td> <td width="10px;"> </td> <td> </td> <td width="10px;"> </td> </tr> </table>
    
    first name middle initial last name
    
    city state zip code
  3. Adding colspan—To complete the table modifications, I add the colspan attribute to rows 1, and I delete all but one cell from that row. This will allow the single remaining cell to extend across the entire table:
    
    first name middle initial last name
    
    city state zip code
    <table border="1px" width="100%" cellspacing="0px;" cellpadding="3px"> // below here is row 1 <tr> <td colspan="11" align="center" valign="top"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 2 <tr> <td width="10px;"> </td> <td align="right" valign="top">first name</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">midde initial</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">last name</td> <td width="10px;"> </td> <td> </td> <td width="10px;"> </td> </tr> // below here is row 3 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 4 <tr> <td width="10px;"> </td> <td align="right" valign="top">city</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">state</td> <td width="10px;"> </td> <td> </td> <td align="right" valign="top">zip code</td> <td width="10px;"> </td> <td> </td> <td width="10px;"> </td> </tr> </table>
2. INTRODUCE:
  1. Inserting HTML Form Elements—
  2. Designing an HTML Form—

Thursday, November 16, 2006

Fall 2006

week 9: 11/15

Hi everybody, After several weeks of not being able to keep up with this blog, here is the entry I promised last night. I was happy the way last night's class turned out, even though I didn't get to everything I had planned. It was good to discover that many of you are fairly comfortable creating a simple table, even though it is true that a good portion of the class is still having a great deal of trouble with this. Therefore, I think the beginning of class was good practice, even though it took up more time than I had expected. Everything we do in class from here on out, all the classwork and all the homework, will be geared to producing your final project. There will be no mere exercises, or busy work, that you show to me each week, and then close and stash away in some hidden folder never to look at again. Frome here on out, everything I assign as homework, you will be able to use directly in the project you turn into me the last day of class. This week's homework is PART I of your final project. Therefore, if you do not do your homework, you're actually hurting the chance that your final project will receive an A or B. This final project consists of a small web-site of six (6) pages of content. This does not mean six html files, no, but six pages OF CONTENT. There may be other files that you will produce that do not contain any content (or very little), such as the frameset files I introduced last night, or the navigation file. The .html file that contains the menu navigation does not officially count as a page of your site even if the links are technically content.

TOPICS:
1. Final Project;
  - LINK Content Requirements;
  - LINK Technical Requirements;
  - LINK Design Requirements;
2. Classwork:
  1. Review:
    - LINK Creating a simple table;
    - LINK Modifying the table;
    - LINK Adding colspan;
    - LINK Adding CSS styles—using an embedded stylesheet for the background color, margins, and links.
  2. Introduce:
    - LINK Using CSS Class Selectors;
    - LINK Creating HTML Framesets;
    - LINK Using the Frame Tag;
HOMEWORK—Final Project, Part I: Starting this week, the homework for each class is part of the final project. It is not extraneous to what you will be required to do and what will be due the last day of class. If you produce your homework each week, you will be largely finished with the project well before it is due. Part I, due the next class (11/22/06⁙week 10), consists of two things:
- A Logo—Create a new logo for the site described below. This will be used on the intro page as well as at the top of every other page in the site. It must follow the same complimentary color scheme described just below.
- A Color Scheme—You must decide upon your color scheme for your site by Friday. This does not mean it cannot change somewhat over the course of your work during the next 5 weeks; but rather, it is meant as a initial design decision as a way for you to begin to determine the direction it will take. LINK View the CSS code of the following document at the above link. The code has directions within the CSS at the top instructing you what to do. The link takes you to the document you will use to demonstrate your color scheme to me. Once you have clicked on the link, choose view << source to see the code. All you need to look at is the top of the document in the CSS section. Please send me an email, or ask me before Friday's class if you are unclear what I want.
FINAL PROJECT: Democracy Now! website Re-Design The current Democracy Now! website is found here (LINK), and you should look through the site and familiarize yourself with its topic and mission. Knowing what the site is about is imperative to making design decisions for color and layout. Your project is to re-design the parts of the site detailed below.
1. CONTENT REQUIREMENTS:
  1. Page 1: INTRO PAGE—This page has no requirements other than to follow the general technical and design requirements for the entire site (see below: LINK). All it consists of is some sort of graphic introduction, an image, or flash animation, or whatever you prefer to introduce us to the site, and a link to the primary frameset (index) of the site. It contains NO OTHER CONTENT. But please make sure you follow your complimentary color scheme.
  2. Page 2: HEADLINES PAGE—This page includes all the headlines, summaries, images and captions which I will provide to you. If you wish to add any additional headlines and images to this page, please do so. The images and text required for this page will be given to you near the end of the term. We will save this page for last so that the headlines are as current as possible.
  3. Page 3: MAIN PAGE—This page must have the introductory text, About Democracy Now! that I will provide you, as well as a couple of images that I will also provide to you. Any other text or images that you find and wish to include is welcomed and encouraged; however, it must remain on the topic of the site. You must use all the information on the following two (2) pages in your main page found here: LINK (about) and here: LINK (history) The images required for this page are here: LINK
  4. Page 4: IMAGE GALLERY PAGE—This page must have ALL the images and caption text that I will provide you. There will be at least ten (10) images. Once again, please use additional images and captions for them if you wish. The images required for these pages are here: LINK and the captions for the images are here (you should note that the name of the image precedes the caption): LINK
  5. Page 5: FORM I PAGE—This page will consist of the first form of two that will be required for the site, the submit idea form. It must utilize all of the same form fields as the form found in the current site: LINK
  6. Page 6: FORM II PAGE—This page will consist of the second form of two that will be required for the site, the volunteer form. It must utilize ALL of the same form fields as the form found here: LINK
2. DESIGN REQUIREMENTS:
  1. Color Scheme—you must use what is known as a Complimentary Color Scheme. A complimentary color scheme is a two-color scheme, but it is basically a scheme in which the large majority of the site is done monochromatically. Monochromatic means one color. This means that you start off with a site that follows a monochromatic scheme, which means that everything is to be some tint or shade of the same color. If you choose blue as your color, then that means absolutely everything in the site must be some variation of blue, including images. If you wish to show color images, then make the images clickable to link to larger, full-color versions of them. Once you establish this primary color, then you select its compliment to use as an accent color, for times when you need to focus attention or when you require greater contrast. Therefore, if blue is the main color for most of your site, then you would use some version of its compliment, orange, as your accent color (blue & orange, red & green, and yellow & purple).
  2. Page Layout—you must use CSS and/or tables to lay out all pages in a pleasing way. If you are not certain how to do this, consult our past classes and me for assistance.
3. TECHNICAL REQUIREMENTS:
  1. XHTML
    —ALL CODE for this site (other than for the frameset document must be typed using STRICT XHTML standards. This means the following:
    - that all tags and their attributes must be typed in lower case;
    - that all attribute values must be typed in quotes and with units;
    - that the DTD for strict XHTML must be typed at the top of the document;
    - that all empty tags must be typed with the slash at the end, such as with the <br/> tag;
    - that none of the deprecated inline tags are to be used, such as the <font>, <b>, <u>, or <i> tags;
    - and, in addition, that the <tbody> and the <thead> tags, as well as the height attribute for the <table> and <td> tags, are not permitted.
    If you are uncertain about something, you can consult the requirements at the w3schools site (LINK), or you may ask me.
  2. CSS—ALL STYLING must be done using CSS. We have used it extensively in this class, and further, as it is the standard in web-design, it is a requirement that this site use CSS for the styling of the page. All three levels of styles may be, and are encouraged to be used. Please consult me if you need additional assistance with this. You will be learning more and more about CSS as the term progresses.
Classwork—As usual, we started Wednesday's class with a review of a familiar topic. This time (again) it was HTML tables. This was the fifth week in a row that we have been working on tables, and I hope that fact alone indicates their importance to creating effective, and well-designed web-pages. I will not discuss the topic at much length this time, however, and instead will demonstrate with examples of code and the resulting tables. LINK Click here LINK and here for a more thorough introduction, discussion and demonstration on the topic of tables.
1. A Simple Table—We began the class be creating a simple table of three (3) rows with six (6) cells in each row:
  
  And here is the code for this table: <table border="1px" width="100%"> // below here is row 1 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 2 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 3 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
2. Modifying the Table—Next, I add a few attributes and some text to the table: <table border="1px" width="100%" cellspacing="0px;" cellpadding="3px"> // below here is row 1 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 2 <tr> <td> </td> <td align="center" valign="middle">one</td> <td align="center" valign="middle">two</td> <td align="center" valign="middle">three</td> <td align="center" valign="middle">four</td> <td> </td> </tr> // below here is row 3 <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
  
  one two three four
3. Adding colspan—To complete the table modifications, I add the colspan attribute to rows 1 and 3, and I delete some cells as well from the same rows:
  
  one two three four
  
  <table border="1px" width="100%" cellspacing="0px;" cellpadding="3px"> // below here is row 1 <tr> <td colspan="6"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> // below here is row 2 <tr> <td> </td> <td align="center" valign="middle">one</td> <td align="center" valign="middle">two</td> <td align="center" valign="middle">three</td> <td align="center" valign="middle">four</td> <td> </td> </tr> // below here is row 3 <tr> <td colspan="6"> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table>
4. Adding CSS Styles—To begin to design the page, I will add some styling to the page using an embedded stylesheet. Recall, that an embedded stylesheet are CSS styles that are defined within the HEAD SECTION of the document, between a pair of <style> tags. To see further discussion on the topic of CSS, please see last week's posting: <style type="text/css">  </style> Since we have styles for links, we are going to turn the text in the table, the words one, two, three, four into links. You can make them link to anything you want for now: <table border="1px" width="100%" cellspacing="0px;" cellpadding="3px"> // below here is row 1 <tr> <td colspan="6"> </td> </tr> // below here is row 2 <tr> <td> </td> <td align="center" valign="middle"> <a href="http://www.yahoo.com" target="_blank">one</a> </td> <td align="center" valign="middle"> <a href="http://www.google.com" target="_blank">two</a> </td> <td align="center" valign="middle"> <a href="http://www.msn.com" target="_blank">three</a> </td> <td align="center" valign="middle"> <a href="http://www.w3schools.com" target="_blank">four</a> </td> <td> </td> </tr> // below here is row 3 <tr> <td colspan="6"> </td> </tr> </table>
5. CSS Class Selectors—Using a CSS Class is a special way to attach styles to an element in a page of HTML. Let's review, a CSS style definition consists of three (3) basic terms: ¹selector {²property: ³value;} The selector determines to which HTML element the style will be applied, as in the following example: h1 {font-size:28pt;} In the above example, the selector is the h1. It selects, or indicates that the following styles are to be applied to all<h1> tags. The following two terms after the selector should be self-explanatory, they are the property of the tag being styled, font-size, and then the particular value or setting for that property, 28pt. Up to now, this is the only sort of style definition we have considered, those that match a particular HTML tag; however, there are selectors which may be used for any tag. This makes the style definition very flexible, as it can be applied as often or seldom as necessary. They are known as classes. and the selector, since it is not given a particular tag name such as body or h1, must have unique names. These names are preceded by a dot (.). .red {color:#ff0000; font-weight:bold;} Once created, the class is applied like all attributes are, and to any tag that is necessary, such as the two examples that follow: <p class="red">hello!</p> <td class="red">cell 1</td> With this understanding, we will create three (3) classes to be applied immediately to our table, one for each row. Later, we may use these classes again if we need to. <style type="text/css">  </style> These styles can then be applied to the table rows: <table border="0px" width="100%" cellspacing="0px;" cellpadding="3px"> // below here is row 1 <tr class="color1"> <td colspan="6"> </td> </tr> // below here is row 2 <tr class="menu"> <td> </td> <td align="center" valign="middle"> <a href="http://www.yahoo.com" target="_blank">one</a> </td> <td align="center" valign="middle"> <a href="http://www.google.com" target="_blank">two</a> </td> <td align="center" valign="middle"> <a href="http://www.msn.com" target="_blank">three</a> </td> <td align="center" valign="middle"> <a href="http://www.w3schools.com" target="_blank">four</a> </td> <td> </td> </tr> // below here is row 3 <tr class="color2"> <td colspan="6"> </td> </tr> </table> This code produces the following results:
  
  one two three four
6. Framesets—In this week's class we saw the introduction of the issue of one of the final and more advanced issues of HTML, frames and framesets. Essentially, a frameset is a series of documents, held together by a frame , that work together to break apart the browser window into multiple browser window. In each window, or frame, a different web-document or web-site may be viewed. There is virtually no limit to the number of frames that may be contained within a frameset, as it depends on how many are programmed into the frameset document; however, design and function are first and foremost the constraints that should guide you when attempting to determine how many frames are necessary and practical. As mentioned, the guiding document is the frameset document: this document works much as a window frame. I do not mean the panes of glass, but rather the frame that binds the panes together. As it is merely a frame, this document, the frameset document, has no content. Furthermore, as it has no content, it has no body section. Instead, replacing the body section, it has a frameset section that sets up parameters of the frameset, exactly how many frames and what their orientation will be. Therefore, a frameset document starts out pretty much the same as an ordinary HTML document, but diverges with the second section: <html> <head> <title>frameset document</title> </head> <frameset> </frameset> </html> Above, you can see that the frameset section, instead of the body section, follows the head section instead in the document. This is where the browser window is carved up into frames. For horizontal frames, the attribute rows is used; and for vertical frames, the attribute cols is used. <frameset cols="150px, *"> In the above frameset tag, a two-frame frameset is created, where the first frame (the first column) is 150 pixels wide, and the second one, indicated by the asterisk, is whatever remains of the open browser window. To complete the frameset, however, there must be a <frame/> tag for each frame. Since there are two measurements (150, *) in the above setup there must also be two frame tags. <html> <head> <title>frameset document</title> </head> <frameset cols="150px, *"> <frame/> <frame/> </frameset> </html> The <frame/> tags are empty tags, but there are nonetheless still two tags, one for each frame in the frameset. Furthermore, each must be accompanied with the src attribute in order to place another document within the frameset: <frame src="nav.html"/> <frame src="content.html"/> In this example, another document named nav.html will appear in the first frame of the frameset, and another named content.html will appear in the second frame. To remove the borders between frames, the <frameset> tag require two additional attributes and values: frameborder="no" border="0px". If we change the orientation of our frames to rows (horizontal), and rename our original document above nav.html (the one with the table background colors above of red and orange), we can start to create our first frameset document. <html> <head> <title>frameset document</title> </head> <frameset rows="150px, *" frameborder="no" border="0px"> <frame src="nav.html" name="nav"/> <frame src="content.html" name="content"/> </frameset> </html> You should notice above, that in addition to the attributes regulating the border, and indicating the source files for the frames, that there is a name attribute for each frame. There is an important reason for giving names to frames, particularly the frame where the primary content of the website will go. Primary content here refers to those documents that contain most of the content of the site, the images and text, as opposed to the document that contains the navigation, or the frameset document itself. This is so that the frame can be targeted. This can be done with links, for example, so that linked documents can be targeted to open up into a particular frame. LINK In our first document, we created a menu of links. These links targeted a value, "_blank", which targets a new browser window, opens up the document in a new blank window. If, however, the value we choose is the name of one of our frames in the frameset document, content for example, instead of opening up in a separate new browser window, the documents will open up in another window of our frameset. Our link would then look like so: <a href="one.html" target="content">one</a>

Wednesday, November 08, 2006

Fall 2006

week 8: 11/08

Wednesday, November 01, 2006

Fall 2006

week 7: 11/01

Thursday, October 26, 2006

Fall 2006

week 6: 10/25

Hi again everyone, Once again, I'd like to say that I am very happy with the number of mid-term exams I received last night. Although I haven't looked through the papers thoroughly or by any means systematically, and I have not yet begun to grade them, I did glance at several of the tests and I have to say that I am very impressed so far. Furthermore, I am impressed with how you all have done in the class overall up to now each week. I know mid-terms are tough (as are finals), that 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. Okay, there's just one more week until the mid-term is due. So work hard this week, and please don't miss class next week. 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: LINK Download this week's homework here:
QUESTIONS: Here are some questions to help guide you through this weeks' material:
- What does the abbreviation XHTML stand for?
- What is XML?
- What is the difference between XHTML and conventional HTML?
- What are some of the standards that should guide the typing of strict XHTML?
- What does CSS stand for? What is it used for?
- What is the difference between XHTML and CSS?
- What is an empty tag? What are some examples of empty tags?
- What attribute must be used with the <img/> in order to place an image into a web page?
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
    b) The first row had two cells. i. In the smaller first cell, we typed the number of the question, starting with number one (1).

Fundamentals of Internet Applications

Friday, December 15, 2006

Fall 2006

week 13: 12/13

Thursday, November 23, 2006

Fall 2006

week 10: 11/22

Thursday, November 16, 2006

Fall 2006

week 9: 11/15

Wednesday, November 08, 2006

Fall 2006

week 8: 11/08

Wednesday, November 01, 2006

Fall 2006

week 7: 11/01

Thursday, October 26, 2006

Fall 2006

week 6: 10/25

Google Analytics


first name	middle initial	last name

city	state	zip code


first name	middle initial	last name

city	state	zip code


one	two	three	four


one	two	three	four

Friday, December 15, 2006

Fall 2006 week 13: 12/13

Thursday, November 23, 2006

Fall 2006 week 10: 11/22

Thursday, November 16, 2006

Fall 2006 week 9: 11/15

Wednesday, November 08, 2006

Fall 2006 week 8: 11/08

Wednesday, November 01, 2006

Fall 2006 week 7: 11/01

Thursday, October 26, 2006

Fall 2006 week 6: 10/25

Google Analytics

Fall 2006

week 13: 12/13

Fall 2006

week 10: 11/22

Fall 2006

week 9: 11/15

Fall 2006

week 8: 11/08

Fall 2006

week 7: 11/01

Fall 2006

week 6: 10/25