- TOPICS:
- HOMEWORK
- MIDTERM EXAM: LINK Click this link to download the study sheet for the midterm exam in two weeks.
- EXERCISE: The homework this week is simply to follow the steps below. The point of this homework is for me to assess your ability to understand the steps that I lay out here for you, as well as follow through with them accurately. Inevitably, you will make mistakes and errors as you create anything using HTML and CSS; so part of the object of this homework is to give you practice finding your own errors.
Althought this exercise is similar to what we did in class, it is not exactly the same.
- Create a folder for your homework and then create a new notepad document named index.html.
- In this document, create a table that has 6 rows with 6 cells in each row.
- Like we did in class, set thebackground color of each cell of the entire table to a different color. Make certain that it looks nice.
- Set the border of the table to 1px.
- Above the table in the document, place a primary heading. It may say anything you like, but keep it brief and succinct.
- Below the primary heading, place a secondary heading. Again, it may say anything you like, but keep it brief and succinct.
- Next, below the secondary heading, place two paragraphs of dummy text generated at Lipsum.com.
- Below the two paragraphs, place another secondary heading.
- And finally, below this, place another two paragraphs. This should NOT be the same two paragraphs as the dummy text above. I suggest that you generate 4 paragraphs using the generator at Lipsum.com.
- Now, make certain you save this document, and then open a new document.
- In the new Notepad document, create a primary heading (this should be the same as the primary heading on the first page.
- You should also create a subheading and two paragraphs of text.
- Below the subheading, create a table that has 7 rows each with 7 cells. Like on the first page, do something interesting with the color in the cells and rows.
- Save this document as two.html.
- Create two more notepad documents with the same text elements (NOT the same text) as the 2nd, and name them three.html and four.html respectively.
- Above the paragraphs on each of these two pages and below the subheading, create a new table. On the third page, create a table with 3 rows and 3 cells in each; and on the fourth page, create a table with 4 rows and 3 cells in each. Again, make certain they look nice as far as color is concerned.
- At this point you have four files, index.html, two.html, three.html, and four.html, in your folder. Place four links to all four of the files above the primary heading at the top of each page.
- Place a pair of <div></div> tags around the four links as we did in class, the opening tag above the links, and the closing tag below the links.
- Remember that <div></div> tags divide the page of code into divisions, or sections. You should use comments as we did in our last class to identify this first division as the navigation. You should put these links, <div></div> tags, and comments at the top of each of the four documents that you have created so far.
- When that part is complete, you should make sure that you have four little links at the top of each page that allow you to link back and forth among your 'pages'.
- Next, use the <div></div> tags to create other divisions in each of your pages similar to what we did in class with the pages that we created. You should NOT type any new text or tables or any additional content. Instead, just type the new <div></div> tags around existing content.
- Use comments to identify each division that you create. If you recall from class, the <div></div> tags and the comments will not really change the appearance of the page; they simply help you to structure the page and identify the code to you when you later have to come back and edit it for any reason.
- Now we are going to add the CSS: type the <style></style> tags in the head section of your document below the title. In between these two tags is where you will type the CSS.
- As we did in our previous class, and as demonstrated below in this blog posting, set the background color of the page to yellow, and the margins of the page to zero.
- Next, set the appearance of the four link states as follows: a:link {text-decoration:none; color:#ffcc00;} a:visited {text-decoration:none; color:#ffaa00;} a:hover {text-decoration:underline; color:#000000;} a:active {text-decoration:underline; color:#ff6600;}
- Next, you must create an ID for the division in our page that includes the navigation and set the styles for it. Name this id #nav.
- The styles for this ID should be set to the following: width:100%; height:50px; text-align:center; font-family:Impact, Arial Black, sans serif; font-size:16pt; word-spacing:20pt; padding-top:25px; border-bottom-color:#000000; border-bottom-style:dashed; border-bottom-width:10px;}
- Now, you must apply this ID to a <div></div> tag pair below. For any ID, you may only apply it ONE time. We are going to apply this ID to the <div></div> tag pair below that contains the navigation, and you should type it in the opening tag as follows: <div> id="nav">.
- We are now going to add some styles to the text in the headings, subheadings, and paragraphs: h1 {font-family:Helvetica, Arial, sans serif; font-size:36pt; color:#ff9900 letter-spacing:5pt; word-spacing:5pt;} h2 {font-family:Helvetica, Arial, sans serif; font-size:24pt; color:#ff6600 letter-spacing:2pt; word-spacing:2pt;} p {font-family:Helvetica, Arial, sans serif; font-size:12pt; color:#993300 text-align:justify; line-height:10pt;}
- The CSS that you have just created should be typed in each of the four files. Once you do this, ALL of the pages should have the navigation bar at the top of hte page.
- 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 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:
- 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"/> —
- INTRODUCE:We started the class this past week with a sort of review of what we had done before. I asked you to create three HTML documents with the following:
- A primary heading;
- A secondary heading; and
- Two paragraphs of text on the first page, and one paragraph each on the other two pages. I also suggested that you use the utility at Lipsum.com to generate dummy text. The following is something like what you should have started week:
- After creating three pages more or less like the one above, you were to add three links at the top of each page to link to all three of the documents. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Page One</title> </head> <body> <a href="index.html">page one</a> <a href="two.html">page two</a> <a href="three.html">page three</a> <h1>Page One</h1> <h2>Working with Multiple Pages</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac augue a dolor dictum fringilla. Sed eget pede. Sed at arcu. Vivamus mattis massa ut elit. Duis vel elit vitae arcu molestie tempus. Morbi cursus, est nec scelerisque tincidunt, lacus turpis gravida nibh, vitae tempor purus nunc ut purus. Quisque at eros. Phasellus vel turpis. Proin mollis lectus mattis dui. Pellentesque consequat lectus. Vestibulum dui. Proin elit. Quisque ac mauris.</p> <p>Curabitur quam. Vestibulum at elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tortor. Vivamus ac nunc non pede tempor tincidunt. Cras blandit, justo eu pharetra consectetur, augue nibh mattis risus, at luctus nisl sapien quis justo. Vestibulum ligula nisl, faucibus non, rutrum at, scelerisque ut, elit. Proin vel felis. Suspendisse vulputate tortor sit amet sem. Donec dictum, nulla sed sodales sollicitudin, sapien mi varius metus, suscipit aliquam ipsum tellus eget urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean pellentesque. Nam ut pede pellentesque risus dapibus tempus.</p> </body> </html>
- Next, you had to divide the document into sections or divisions using the <div></div> tag pair. For the current document, we divided it up into three sections, therefore we used three pairs of the tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Page One</title>
</head>
<body>
<div>
<a href="index.html">page one</a>
<a href="two.html">page two</a>
<a href="three.html">page three</a>
</div>
<div>
<h1>Page One</h1>
<h2>Working with Multiple Pages</h2>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac augue a dolor dictum fringilla. Sed eget pede. Sed at arcu. Vivamus mattis massa ut elit. Duis vel elit vitae arcu molestie tempus. Morbi cursus, est nec scelerisque tincidunt, lacus turpis gravida nibh, vitae tempor purus nunc ut purus. Quisque at eros. Phasellus vel turpis. Proin mollis lectus mattis dui. Pellentesque consequat lectus. Vestibulum dui. Proin elit. Quisque ac mauris.</p>
<p>Curabitur quam. Vestibulum at elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tortor. Vivamus ac nunc non pede tempor tincidunt. Cras blandit, justo eu pharetra consectetur, augue nibh mattis risus, at luctus nisl sapien quis justo. Vestibulum ligula nisl, faucibus non, rutrum at, scelerisque ut, elit. Proin vel felis. Suspendisse vulputate tortor sit amet sem. Donec dictum, nulla sed sodales sollicitudin, sapien mi varius metus, suscipit aliquam ipsum tellus eget urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean pellentesque. Nam ut pede pellentesque risus dapibus tempus.</p>
</div>
</body>
</html>
- Once this part was complete, we added comments for each section as notations. This way, in the future when we look at the code, or if anyone else were to look at the code, it would be more easily understood: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Page One</title> </head> <body> <!-- Below this is the first division of the page containing the links or navigation for the site. //--> <div> <a href="index.html">page one</a> <a href="two.html">page two</a> <a href="three.html">page three</a> </div> <!-- Below this is the second division of the page containing the heading and subheading. //--> <div> <h1>Page One</h1> <h2>Working with Multiple Pages</h2> </div> <!-- Below this is the third division of the page containing the blocks of paragraph text. //--> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac augue a dolor dictum fringilla. Sed eget pede. Sed at arcu. Vivamus mattis massa ut elit. Duis vel elit vitae arcu molestie tempus. Morbi cursus, est nec scelerisque tincidunt, lacus turpis gravida nibh, vitae tempor purus nunc ut purus. Quisque at eros. Phasellus vel turpis. Proin mollis lectus mattis dui. Pellentesque consequat lectus. Vestibulum dui. Proin elit. Quisque ac mauris.</p> <p>Curabitur quam. Vestibulum at elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tortor. Vivamus ac nunc non pede tempor tincidunt. Cras blandit, justo eu pharetra consectetur, augue nibh mattis risus, at luctus nisl sapien quis justo. Vestibulum ligula nisl, faucibus non, rutrum at, scelerisque ut, elit. Proin vel felis. Suspendisse vulputate tortor sit amet sem. Donec dictum, nulla sed sodales sollicitudin, sapien mi varius metus, suscipit aliquam ipsum tellus eget urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean pellentesque. Nam ut pede pellentesque risus dapibus tempus.</p> </div> </body> </html>
- You should repeat the above steps for each of the three pages; and then Next, we need to add the CSS for the pages.
- Set the background color and margins for the body;
- Set the styles for the four link states;
- Set the styles for the text in the headings, subheadings, and paragraphs; and
- Finally, set the styles for the ID that eventually creates the menu bar at the top.
- The very last step is to apply the ID style to the correct tag below. We will apply it to the first <div></div> tag below of the pair that surround the links: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Page One</title> <style type="text/css"> body {background-color:#ff0000; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;} a:link {text-decoration:none; color:#000000;} a:visited {text-decoration:none; color:#666666;} a:hover {text-decoration:underline; color:#ffffff;} a:active {text-decoration:underline; color:#ffff00;} h1 {font-family:Helvetica, Arial, sans serif; font-size:36pt; color:#ff0000; text-align:center;} h2 {font-family:Helvetica, Arial, sans serif; font-size:24pt; color:#ff9900; text-align:center;} p {font-family:Helvetica, Arial, sans serif; font-size:12pt; color:#990000; text-align:justify; line-height:10pt;} #menu {font-family:Helvetica, Arial, sans serif; width:100%; height:50px; text-align:center; font-size:16pt; word-spacing:20pt; border-bottom-color:#000000; border-bottom-style:dashed; border-bottom-width:10px;} </style> </head> <body> <!-- Below this is the first division of the page containing the links or navigation for the site. //--> <div id="menu"> <a href="index.html">page one</a> <a href="two.html">page two</a> <a href="three.html">page three</a> </div> <!-- Below this is the second division of the page containing the heading and subheading. //--> <div> <h1>Page One</h1> <h2>Working with Multiple Pages</h2> </div> <!-- Below this is the third division of the page containing the blocks of paragraph text. //--> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac augue a dolor dictum fringilla. Sed eget pede. Sed at arcu. Vivamus mattis massa ut elit. Duis vel elit vitae arcu molestie tempus. Morbi cursus, est nec scelerisque tincidunt, lacus turpis gravida nibh, vitae tempor purus nunc ut purus. Quisque at eros. Phasellus vel turpis. Proin mollis lectus mattis dui. Pellentesque consequat lectus. Vestibulum dui. Proin elit. Quisque ac mauris.</p> <p>Curabitur quam. Vestibulum at elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tortor. Vivamus ac nunc non pede tempor tincidunt. Cras blandit, justo eu pharetra consectetur, augue nibh mattis risus, at luctus nisl sapien quis justo. Vestibulum ligula nisl, faucibus non, rutrum at, scelerisque ut, elit. Proin vel felis. Suspendisse vulputate tortor sit amet sem. Donec dictum, nulla sed sodales sollicitudin, sapien mi varius metus, suscipit aliquam ipsum tellus eget urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean pellentesque. Nam ut pede pellentesque risus dapibus tempus.</p> </div> </body> </html>
Sunday, February 22, 2009
Spring 2009
week 5: 2/18
Hi everyone.
Wednesday night's class went very well for most of you. It seems to me that almost everyone seems to be picking up what we have covered thus far in this class; however, if you need additional help, your first step is to read this blog (and other tutorial sites such as w3schools) 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 help catch you up.
Last week'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, and in class last week, tables. As I have mentioned, tables has been 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. With the advent of CSS, however, they have become less important, which is why I am going to spend much more time on CSS this term than in past terms.
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.
Carter-
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment