Hi everyone.
The last 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 identical to last week save for what is at the end. All of what is below, I have already mentioned in class before.
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 due in two weeks.
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: The homework this week is simply to follow the steps below. This homework is Part I of the Mid-Term Project.
- STEPS: Here are the steps to produce the first part of the project. This first part is much like what we did in class last week:
- Create a folder for your mid-term and then create a new notepad document named index.html.
- In this document, create a table that has 5 rows with 5 cells in each row.
- Set the width of the 2nd and the 4th cells in the first row to 10px.
- Set the width of the 3rd cell of the first row to 500px.
- Set the width of the entire table to 100%.
- In PhotoShop, create a new image with the following properties:
- name: midterm
- width: 500px
- height: 260px
- resolution: 72ppi
- background color: black
- color mode: RGB
- Next, choose a fill color and using the type tool, select Impact as the font, and type DMA110. Make the size of this text 164pt.
- 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.
- Before you save, in your midterm folder, create a new folder named images.
- 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.
- Then, back in PhotoShop, choose File >> Save for Web.
- On the right hand side of the window that appears, choose 32 where it says colors.
- Next, select save and make certain that you save it into your images folder.
- Using the <img/> , place this image into the 3rd cell of the first row.
- Now, in the 1st cell of the 3rd row type the word questions.
- Second, in the 3rd cell of the 3rd row type the word home.
- Third, in the 5th cell of the 3rd row type the word answers.
- Now, just like we did in class save this document.
- 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.
- 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.
- 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.
- Basic tags used in the creation of web-pages:
<html>, <head>, <title>, and, in most types of HTML and XHTML documents, <body>.
- Block tags covered up to this point in class:
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <p>, <ol>, and, <ul>.
- In-Line tags covered up to this point in class:
<b>, <i>, <u>, <a>, and, <font>.
- 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.
- 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:
- HTML Tables:
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:
- width—changes the width of the table with units in pixels or as a percentage of the browser window.
- 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.
- 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.
- bordercolor—much like the bgcolor attribute in that it uses the hexadecimal color code, but in this case it only colors the borders.
- cellspacing—regulates the spacing between the various cells in the table.
- cellpadding—regulates the spacing around the edge against the border within each cell of the table.
- 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.
- 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:
- 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.
- 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.
- 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.
- valign—sets the vertical alignment for the content within the particular cell. Here, also, there are three (3) possible values: top, bottom, and middle.
- colspan—allows the particular cell to extend, or span, horizontally across more than one column of cells.
- rowspan—allows the particular cell to extend, or span, vertically downward across more than one row of cells.
- 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">
- row 1
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
- row 2
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
- row 3
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
- 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.
- 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>
- 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 |
- 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 |
- 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 |
- 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 |
- 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.
- Document 1: Rename the current document index.html.
- 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.
- 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.
- 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>
- 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>
- 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>
No comments:
Post a Comment