Summer 2009 week 4: 6/03, Wed 6:00 - 9:00

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 haven't yet experimented with tables, but there will be 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 did very 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 of you who are faltering or who are feeling insecure, try spending more time on this class this week than you have in past weeks. Carter-

1. TOPICS:
   • XHTML DTD (Document Type Definition),
   • More with Images—Images as Links,
   • Multiple Page Web-Sites,
   • HTML Tables.
2. HOMEWORK:
   • LINK   Download PART I of this week's homework here:
   • Do the questions below as PART II of this week's homework;
3. 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 tag pair must CONTENT be typed so that it will 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?
   • From chapter 4 in the book, what are the 5 Phrase Elements, also known as Inline Tags, that are mentioned; and, what are they used for?
   • From chapter 6 in the book, what are the 4 image types for the web?
   • If you were using PhotoShop, how would you convert an image from one format, say .tif, to another format, such as .jpg (be specific and assume that I am dumb when answering?
   • What are the two attributes that ABSOLUTELY MUST be used with the <img/> and what are they used for (see chapter 2, page 25, and chapter 6, pages 97-98)?
   • From Chapter 6, what is the diference between an absolute link and a relative link?
   • From Chapter 6, what are four attributes that go with the <a></a> tag pair?
4. 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: <strong>, <em>, <abbr>, and <cite>, <acronym>; the following are deprecated and should not be used when typing XHTML, which is what we are typing: <b>, <i>, <u>, <a>, and, <font>.
   4. Empty tags covered up to this point in class: <br/>, <hr/>, and, <img/>.
5. 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, &nbsp;.     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> &nbsp; </td>   <td> &nbsp; </td>   <td> &nbsp; </td>   <td> &nbsp; </td>  </tr>
      2. row 2
          <tr>   <td> &nbsp; </td>   <td> &nbsp; </td>   <td> &nbsp; </td>   <td> &nbsp; </td>  </tr>
      3. row 3
          <tr>   <td> &nbsp; </td>   <td> &nbsp; </td>   <td> &nbsp; </td>   <td> &nbsp; </td>  </tr>

      </table>