Fundamentals of Internet Applications: align

Showing posts with label align. Show all posts

Saturday, February 24, 2007

Spring 2007

week 5: 02/21

Hi everybody, I tried to get this done by yesterday, but I just couldn't seem to find the time to complete it. But here it is now for you. Below, you will see I go into even greater detail on creating tables than I did in class. Please make sure you understand how colspan and rowspan function in a table. Please, also take notice that I have assigned the Mid-Term Exam this week. It is a take-home test, so please download the test and follow instructions. I will not accept late exams.

TOPICS:
- LINK More with Tables—manipulating tables with COLSPAN,
- LINK More with Tables—manipulating tables with ROWSPAN,
- LINK More with Tables—manipulating tables with COLSPAN and ROWSPAN,
- LINK More with Tables—managing a complex usage of COLSPAN and ROWSPAN in a table.
HOMEWORK: LINK Mid-Term Exam, Part 1 // DUE Wednesday, February 28, 6:30pm (no later);
REVIEW:We have worked with HTML Tables now for a couple weeks (almost three weeks now if you count since our last class), and we have dealt primarily how to create and manipulate our tables: what are the tags that go into making them, how to begin to set them up by row and then by cell, how to change the way they look with the border and background, and how to create larger cells both horizontally and vertically. In our last class, we continued with this exploration of tables by pushing further the complexity of the tables: we increased our investigation of two attributes for the <td> tag, rowspan and colspan. These attributes extend the ability of the <td> tag to become larger both horizontally and vertically, to take up the space of more than one cell, and perhaps to occupy the space of an entire row. This week, therefore, we learn no new HTML tags, but instead simply deepen our knowledge and understanding of what has already been covered. Next week we will look even further into the capabilities of HTML Tables. This way, hopefully, by spending four (4) entire classes on the subject of tables, you will begin to understand their importance in creating sophisticated designs for your web-pages. But first, let us review what we went over in previous classes on tables:
- Basic tags used in the creation of HTML tables: <html>, <table>, <title>, <tr> >, and <td>.
1. Tables are created by the <table> tag, another example of a block level tag; however, as mentioned above, they are a special case, not only for what they can create in a web-page, but primarily for the many other varied tasks they may perform. First and foremost, tables refer exactly to what the term suggests: they create tables for data, such as in accounting ledgers. By appearance, the table tag creates a grid of rectangular ‘cells’ where some kind of data or information is placed. These tables are organized by column (vertical divisions up and down the height of the page) and by row (horizontal divisions across the width of the page). They are built in HTML, however, one row at a time. Here are a series of attributes that may be used with the <table> tag:
  1. width—changes the width of the table with units in pixels or as a percentage of the browser window.
  2. border—adds a border around the table and between the various rows and cells with a thickness of the designer’s choice with units in pixels. To be used sparingly as it tends to be over-used and used badly.
  3. bgcolor—the same attribute used in the <body> tag. In this case, it adds a background color only the area of the table itself. The particular color must be indicated in the hexadecimal color code.
  4. bordercolor—much like the bgcolor attribute in that it uses the hexadecimal color code, but in this case it only colors the borders.
  5. cellspacing—regulates the spacing between the various cells in the table.
  6. cellpadding—regulates the spacing around the edge against the border within each cell of the table.
2. Table rows are created row-by-row using the <tr> tag, the table row tag. Each of these tags marks the beginning and ending of a single row in a table. For each row, one pair of these tags is necessary, one marking the start of the row, and one the end of it. Each row is composed of one or more cells.
3. Table cells are the individual rectangles that make up the grid of the table. Each horizontal row consists of at least one rectangular cell where text or some kind of image may be placed. Typed between a pair of <tr> tags, each pair of <td> (for table data) tags creates one cell. For each additional cell, there must be another pair of <td> tags, and for each of these cells there must be some kind of content between the tags, or the cell will not register and therefore not appear in the browser window. This content may be in the form of an image, a link, some text, or even a blank space created by the series of characters,  . Here are a series of attributes, which may be used with the <td> tag:
  1. width—changes the width of the cell and all of the cells below it in the same column with units in pixels or as a percentage of the table width.
  2. bgcolor—the same attribute used in the <body> tag. In this case, it adds a background color only the area of the table itself. The particular color must be indicated in the hexadecimal color code.
  3. align—sets the horizontal alignment for the content within the particular cell. There are three (3) possible values for this attribute: right, left, and center.
  4. valign—sets the vertical alignment for the content within the particular cell. Here, also, there are three (3) possible values: top, bottom, and middle.
  5. colspan—allows the particular cell to extend, or span, horizontally across more than one column of cells.
  6. rowspan—allows the particular cell to extend, or span, vertically downward across more than one row of cells.
INTRODUCE: In our last class we continued working with Tables in HTML, but focused on two attributes (rowspan and colspan) which go with the <td>
tag to extend a cell downward or upward. Here is how it works: horizontal (side to side) arrays of table cells are considered rows, and vertical (up and down) arrays of cells are considered columns. And just as columns in buildings are also vertical, they support a horizontal beam which spans across several columns. Just look at the front of the NYC Post Office across the street. It has columns also.
1. Colspan: In the picture above and to the right you can see that there are 3 columns which support the beam above them, where the word span is written. The table below this image is similar: there are two rows, one above the other, but the one on the top spans across the two columns in the row below. In HTML we would say that the big cell of the top row has a colspan of 2 because it spans the 2 columns below it. In the table below, there are three (4) rows (horizontal divisions) and four (4) columns (vertical divisions):
  
  Notice that the center row extends all the way across all four of the columns. This is because it has a greater colspan than the other cells of the table, <td colspan="4">   </td>. That one row, the one in the middle, only has one cell in the entire row. The other two rows, the one above and the one below, each have four (4) cells, and the code for this table looks like so: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td colspan="4">   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> </table> If for whatever reason, you forgot that the second row gets only one cell, and instead put four (4) cells like all the other rows, your code would be like what follows--notice that row 2 has four cells like all the others, even though the first cell in that row has a rowspan of 4: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td colspan="4">   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> </table> The previous code produces a table like the one below. Look how the second row has some extra cells hanging off the end:
  
  All you need to do to solve that problem is simply delete those extra cells. In this case we have three extra cells hanging off the end, so we just need to delete those three in the second row and then it will look as it should. In the next example, we have a similar problem, but in the opposite direction: instead of extending a cell horizontally as we have in the previous example, we can also extend a cell vertically as we will see next.
2. Rowspan: In the following example, you will see another table; however, instead of a cell getting larger across the table, it gets larger down the table. This cell also has an increased span, but we call it rowspan instead of colspan. That is because the cell grows larger downward from one row to another. Remember, rows are like horizontal layers. In the following example, the first cell extends downward to the bottom of the table, so it spans more than one row. It therefore has an increased rowspan, a rowspan of 4:
  
  The code for this table is as follows, you should take note that in this case, only the first row has four (4) cells. All of the other rows have only three cells. <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td rowspan="4">   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> </tr> </table> And that makes sense if we examine the table. The first cell of the table, the big one, starts in the upper-righthand corner. This is the first cell of the first row. All we did to make it bigger, to make it go from top to bottom of the table, was use the rowspan attribute. If we took that out, then we see that we're missing a cell in each of the other rows. What happens, then, when we increase the rowspan is that the cell pushes downward, moving all the cells below it to the right. If we had forgotten to remove one of the cells in rows 2, 3, and 4, then we would have the table as follows:
  
  The code for this mistake is below: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td rowspan="4">   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> </table> Like the colspan example, this can be remedied simply by removing one cell from rows 2, 3, and 4.
3. Colspan & Rowspan:These two attributes may also be used together instead of just one or the other. This way, a table cell can be expanded both horizontally and vertically, both across the table and down the table. The table below is an example of this:
  
  and below is the code for such a table: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td colspan="2" rowspan="2">   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> </table> Notice above, that there are only three (3) cells in row 2, and only two (2) cells in row 3. Row 2 is the row that contains the cell with the rowspan and colspan attributes. If it, and the row below it, row 3, had the same number of cells as the other two rows, rows 1 and 4, here is what the table would look like:
  
  Notice here that this time there are three extra cells, one in the second row, and two in the third row. As for the other examples, the solution to this mistake is simply to delete the extra cells. Here is the code for the previous table with the unnecessary cells shown in red: <table width="100%" border="1px" cellspacing="0px;" cellpadding="0px"> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td colspan="2" rowspan="2">   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> </table>
4. Complex usage of Colspan & Rowspan:As mentioned previously, tables in web-pages and web-sites are ubiquitous, they are everywhere. In most cases these tables are used invisibly, with the borders set to zero, as layout devices. Many times, therefore, it can be quite difficult to discern exactly what is the structure of the tables at work in a particular design or layout. This skill, however, deciphering the code of already existing sites, understanding the tables of sites already publish, is a valuable one especially given the reality that much work in web-design is work with templates and work on maintenance. It is important to learn how to figure out a table so that it may be revised, or edited, or so that it may be improved or adapted to new uses. Below here, then, is an example from class of a complex use of colspan and rowspan in a table:
  
  <table width="100%" 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 colspan="2">   </td> </tr> <tr> <td>   </td> <td rowspan="5">   </td> <td>   </td> <td colspan="4">   </td> </tr> <tr> <td>   </td> <td rowspan="4">   </td> <td>   </td> <td colspan="3">   </td> </tr> <tr> <td>   </td> <td rowspan="3">   </td> <td>   </td> <td colspan="2">   </td> </tr> <tr> <td>   </td> <td rowspan="2">   </td> <td rowspan="2" colspan="2">   </td> </tr> <tr> <td>   </td> </tr> </table>
  A pattern in the code for such a table is less evident perhaps than the other previous examples given; however, note that there the first row has seven cells, and that the last row only has one cell. Because of this, I will break down the table and just do a little at a time. We will begin with rowspan, investigating how it has been achieved, and then move on to colspan afterwards. Prior to that and just as a point of comparison, below I show the original table of 7 rows with 7 cells per row to show how the increased rowspan and colspan affects it, the unnecessary cells in red:
  1. The next table shows the first step, the original table with just the rowspan added:
    
    <table width="100%" 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 rowspan="5">   </td> <td>   </td> <td colspan="4">   </td> </tr> <tr> <td>   </td> <td>   </td> <td rowspan="4">   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td rowspan="3">   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td rowspan="2">   </td> <td rowspan="2">   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> </table>
  2. Above here, it is interesting that the unnecessary cells are not hanging off the end of the rows, but are nestled in between the enlarged cells, which makes the selection of which cells to eliminate particularly difficult. In fact, unlike previous examples, the last cells of each row are to be retained and not eliminated. See below the table with the unecessary cells removed:
  3. The next step is to add in the colspan to the cells we wish to expand across the cells. We will do this first, however, before we remove any unnecessary cells:
    
    <table width="100%" 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 colspan="5">   </td> <td>   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td rowspan="5">   </td> <td>   </td> <td colspan="4">   </td> <td>   </td> <td>   </td> <td>   </td> </tr> <tr> <td>   </td> <td rowspan="4">   </td> <td>   </td> <td>   </td> <td colspan="3">   </td> <td>   </td> </tr> <tr> <td>   </td> <td rowspan="3">   </td> <td>   </td> <td>   </td> <td colspan="2">   </td> </tr> <tr> <td>   </td> <td rowspan="2">   </td> <td rowspan="2" colspan="2">   </td> <td>   </td> </tr> <tr> <td>   </td> <td>   </td> </tr> </table>
  4. As you can see, things are coming along quite well. We simply have to remove the unnecessary cells in red. Once done, we get the table and code below, the same as what we saw in the beginning of this exercise: <table width="100%" 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 colspan="5">   </td> </tr> <tr> <td>   </td> <td rowspan="5">   </td> <td>   </td> <td colspan="4">   </td> </tr> <tr> <td>   </td> <td rowspan="4">   </td> <td>   </td> <td colspan="3">   </td> </tr> <tr> <td>   </td> <td rowspan="3">   </td> <td>   </td> <td colspan="2">   </td> </tr> <tr> <td>   </td> <td rowspan="2">   </td> <td rowspan="2" colspan="2">   </td> </tr> <tr> <td>   </td> </tr> </table>

Thursday, February 15, 2007

Spring 2007

week 4: 02/14

Well hello everybody. I'm sorry I missed you last night, but I'm sure we were all better off not being out in the terrible weather. Nonetheless, for those of you intelligent enough to check this blog, you will find that the show (aka the class and blog) must go on. Below, you will find what I would have covered this week. You will see that much of what is below, I've already mentioned in class before. Therefore, most shouldn't be entirely new. We've already experimented a little with tables and we have already created a web-site with more than one page. 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. Because of this, you who have visited the blog this week will know that I am going to give you a quiz during the next class. You will find a link here later on today, or tomorrow that will outline exactly what the quiz will cover. In addition, the homework that I would have looked at last night will be due next week along with the homework that you will find below. At the beginning of our next class, then, you will show me homework for week 3 and week 4. Please remember that Monday there are no classes held at TCI as a result of President's Day. Instead, Thursday of next week will have a Monday's schedule. Do not go to your Thursday classes next week. Obviously, this has nothing to do with our class, but I just wanted to remind you.

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

Thursday, January 18, 2007

Spring 2007

week 1: 01/24

Welcome everyone, So here we are at the beginning of another term. I hope all of you had a nice break, that the holidays were enjoyable, and that now you are all well-fed and well-rested. I hope the next few months go well for all of us. This is the blog for this class, DMA110, Introduction to Internet Applications, and I hope all of you will visit it often, and use it each week. It is meant as a kind of review of the material covered in class. Most of the time it will be a simple re-iteration of what I introduced and discussed during our Wednesday evening class; however, sometimes I will go into greater depth here, and in some instances I will cover things here that I do not have time to cover in class. For this reason, I think it would benefit you to go through each posting as thoroughly as possible. Last term was the first time I blogged this class, and those students who used it found it a very useful companion to the class notes. Hopefully, sometime during this term if all goes well, I will transfer the content of this blog to my own site which I am working on as we speak, but that will still be a while. I will be sure to let you know when it is up and running. At the bottom of the blog is a place for anyone who wishes to post comments to the site, or to ask questions. I think this is a very good idea because, chances are, you are not the only one with questions about what is covered, or what is meant by something or other, or simply why something is done instead of another thing. If you post your question, then, the entire class can see it also, and learn. Also, if you see a question that someone else has asked, feel free to respond to it yourself if you think you know the answer. I hope to foster a discussion here among us all, and please don't feel you have to limit comments or questions only to the topics of this class. Any design or technical issue is relevant to us, as well as stuff that may come up in class. As long as we're respectful of each other, this can be a good forum for anything you wish to discuss. In this week's posting, I simply put up some terms that I wish all of you to know and become familiar with. There will be a quiz over them at the beginning of class during WEEK 3 of the term, so please do not neglect studying. I do remember what it was like being a student (as a matter of fact, I am still a student studying for another master's), and believe me I know how tough it can be. For me, the toughest thing is simply getting past my own laziness, and trying to work through my own natural tendency to procrastinate. I still do it, but luckily I don't do it as much. So, please try to keep in mind that when I suggest that you do something, it is always with your interests in mind. My goal is to help each of you become a success, and I am serious about that. I really want all of you to do well. First and foremost, I think that means to do well in this class, but it may in fact mean different things for each of you, something entirely different. I am here to help however I can. Carter-

TOPICS: You will be quizzed over this material in week 3.
1. LINK General Information;
2. LINK Basic Structure;
3. LINK Block Tags;
4. LINK Attributes;
5. LINK Inline Tags;
6. LINK Hyperlinks;
HOMEWORK: LINK Download this week's homework here:
QUESTIONS: Here are some questions to help guide you through this weeks' material:
- What type of computer application (program) is necessary to view a web-page?
- What type of basic computer application (program) is necessary to TYPE or CREATE a web-page?
- What does the abbreviation HTML stand for?
- What does the abbreviation HTTP stand for? Where do you usually find it?
- What are the individual pieces of code called in HTML?
- What are the first and last tags typed in a web-page?
- What are the two (2) parts of most web-pages?
- What are the two (2) types of HTML tag discussed in today's class? What is the main difference between them?
- What are attributes used for?
- What are some examples of block tags? What are some examples of inline tags?
- Which tag is the anchor tag? What is the attribute that goes with it to create a hyperlink?
INTRODUCE:
1. General Information:
  1. The internet is a network or ‘web’ of interconnected devices, such as home computers, that store and exchange information via the phone lines, other types of cables—DSL or Cable, or wireless communications (radio waves).
  2. The world wide web is one feature of the internet in which information is shared and exchanged between home computers and more powerful devices used primarily for storage known as servers. Its primary mode of exchange is via HTML, Web Browsers, and their related technologies.
  3. A web browser is a computer application (a ‘program’), such as Netscape Navigator and Internet Explorer, that permits the exchange and transfer of the information displayed on a web-site from one machine (the server where it is stored) to another machine (the home computer of the individual interacting with the website). When a person opens up a particular web-site, the information on it is automatically downloaded into his/her computer, where it is temporarily saved in a folder known as the cache. In this way, the information on an external website is transferred directly into his/her home computer’s hard drive.
  4. The information that we view on a web-site with our web browser is known as hyptertext, and it is created with a language known as HTML (HyperText Mark-up Language) . HTML is a special coded language that is combined with regular language (regular text such as that which you are reading here on this page). When you view this mixture of languages with a web-browser such as Internet Explorer, the regular text is visible, but the code is rendered invisible. In this way, the web-browser application translates or decodes the information for us and presents it in such a way that we may easily comprehend and enjoy.
  5. Web-browsers utilize a special method of information transfer when they display web-pages and web-sites. Since hypertext is the combination of ordinary text and HTML that makes up all web-pages, this type of information transfer is called HyperText Transfer Protocol otherwise known as http. There are other types of information transfer (protocols), and one other type you may have seen is known as ftp, or File Transfer Protocol. This one is used primarily for the download of large files such as whole applications like when you go to the Macromedia site to download a trial version of Flash or Dreamweaver.
  6. Together, the protocol and the web address are known as the url (Uniform Resource Locator). The particular protocol always precedes the web address of a particular web-site or web-page, for example:
    http://www.yahoo.com
    The http tells us what sort of transfer will occur and what kind of information will be transferred (hypertext—a mixture of ordinary text and HTML). The particular web address tells us which document we will transfer, or download, into our computers to view and read.
  7. A text editor is a computer application, such as Notepad for PC’s or TextEdit for Macs. Such applications’ only use is to create and edit plain text, text without any kind of formatting information (styling such as bold, underline, color, tables, tabs and indents, etc). Plain text, or code, is all that is necessary to create a hypertext; therefore, a text editor will be used to create HTML documents, and a web-browser will be used to view them.
  8. HTML is a computer code composed of a finite series of individual terms known as tags. These tags may be a single letter, a whole word, or an abbrieviation, but they are always surrounded by angle brackets as such: <html>. They give formatting or organizational instructions for the web-browser to decode and carry out on the presentation of the web-site. The overwelming majority of tags come in pairs, each with an opening tag— <html>, and a closing tag— </html>.
2. Basic Structure:
  1. The <html> tag indicates to the browser the extents of a web document: it is its beginning and ending limits. When the web-browser ‘reads’ a page of hypertext, it should encounter this as the first tag before any others so that it may decode the page properly. In this way, it ‘marks’ the beginning of the document. Likewise, it should also ‘mark’ the end of the document (this is why it is called a markup language); therefore, the last thing that the browser should read is the second tag of the pair, marking the end of the document. As all HTML tag pairs, the second tag is identical to the first, aside from one difference, a backslash that precedes the term: </html>.
  2. All HTML documents consist of two discreet parts. The first part, indicated by the <head> tag, is always known as the head section. Like the <html> tag, the <head> tag comes in pairs, and so the pair follows the same pattern as the <html></html> tag pair. Therefore, the </head> marks the end of the head section. The information that comes in between this tag pair is primarily information about the document, information such as who wrote it, when it was written, what sort of codes and languages are used, what are some of the main topics and main subject matters of the document, etc. It may also contain additional information that aids in the presentation and interactivity of the document such as stylesheet information, and interactive script information.
  3. The <title> tag, is the single most important element of the head section. The title of the document itself follows the first title tag, which, in turn, is followed by the second of the tag pair, such as:
    <title>My First HTML Document</title>
    As mentioned, the first tag of the pair marks the beginning of the title, and the second of the tag pair marks its ending.
  4. As mentioned, there are two parts to all HTML documents, and in most of them the second part is known as the body section. As the head section contains information about the document and aiding the document, the body section contains the information of the document itself—all of the primary content of the document, the text, the images, the animations, the links, etc. All content belongs between the <body> tag pair. If nothing is typed between the two body tags, then when the document is displayed in the web-browser, it will be entirely blank.
3. Block Tags:
  1. The content of the body is organized by a series of html tags known as block tags. Block tags are a distinct set of tags used to organize information into discreet blocks. Although they do change the size and appearance of text in the page, their primary purpose is NOT to do this. They are NOT intended to format the appearance of the page. As such, they are NOT about presentation (the look of the page) but instead about organization (the structure of the information). This means they are meant to organize and indicate a heirarchy of the information: what is most important, what is secondary in importance, what is tertiary in importance, and so on. There are seven main levels in the HTML heirarchy of organization of textual information: six levels of headings and subheadings, and one level of ordinary paragraph text. Block tags separate blocks of information by blank spaces above and below. Other block tags will be discussed in the future.
  2. Headings Tags mark out the document's headings and sub-headings. The primary heading of your document will always be marked by the <h1> tag pair, secondary headings by the <h2> tag pair, tertiary headings by the <h3> tag pair, and so on down the hierarchy to the <h6> tag pair, which marks any sub-heading of the least significance. All headings’ tags separate the heading text by a blank space below. It further distinguishes the text by making it bold and changing its size depending on its importance, the more important is larger, the lesser is smaller. It is not necessary to utilize all six headings. They are to be used only when required.
  3. The <p> tag pair marks an ordinary block of paragraph text. One tag marks the beginning of a paragraph, and the second marks the end of the paragraph. Paragraph text is never bold and never more than 10 or 12pt in size, but each paragraph is separated by a blank space above and below.
4. Attributes: Sometimes additional terms, known as attributes, must be used together with tags. In fact, all HTML tags may be modified and extended with such additional terms, extending their capabilities in order to encompass additional tasks. These terms are placed between the angle brackets after the initial tag term in the first tag of a tag pair. Also, at times there may be more than one attribute per tag, but the order that they are typed is irrelevant. A common attribute of the block tags is align which sets the alignment of the content of the particular block. A common attribute of the <body> tag is bgcolor which sets the background color of the entire page. Tags and attributes always adhere to the following format: format: <tag term attribute = "value"> example: <h1 align = "center">
5. Inline Tags:
  1. Apart from block tags, inline tags are a second distinct set of tags. With them, the look of the textual content of the body may be modified to a rather limited basis. Unlike the block tags, this group of tags is NOT concerned with organization of information. Rather, they only concern the presentation of the information, the way it appears to us. These tags may italicize the text, underline it, make it bold, change its size, the typeface or the color of the text. Most importantly, the key feature of HTML, what actually makes it hypertext (the links), is achieved with a particular pair of in-line tags. The most significant characteristic common among all in-line tags, however, is that they do not mark out blocks of text. In other words, they do NOT add space above and below the text when you open and close the tag pair.
  2. The <u> tag pair is an in-line tag that when used underlines text. A single letter, a series of letters, a whole word or groups of words, or even entire sections of text may be set off with this tag to underline it when viewed in the browser.
  3. The <i> tag pair is an in-line tag that when used italicizes text. A single letter, a series of letters, a whole word or groups of words, or even entire sections of text may be set off with this tag to italicize it when viewed in the browser.
  4. The <b> tag pair is an in-line tag that when used bolds text. A single letter, a series of letters, a whole word or groups of words, or even entire sections of text may be set off with this tag to bold it when viewed in the browser.
  5. The <font> tag pair is an in-line tag that when used alone doesn’t do much of anything. A single letter, a series of letters, a whole word or groups of words, or even entire blocks of text, however, may be set off with this tag to alter its appearance it when viewed in the browser. One or more of three attributes must also be used with this tag in order for any modifications of the text to take place: the color attribute changes the color of the text; the size attribute changes the size of the text, and the face attribute changes the typeface.
6. Hyperlinks: The <a> tag pair is a very special in-line tag known as the anchor tag, but when it is used alone without any attributes, it does little or nothing. As a result, an attribute must accompany this tag, and the most common attribute used with it is href which means hypertext reference. This tag and attribute is what distinguishes HTML. It is what defines HTML and allows a user to connect to a seemingly endless array of documents, to go from one site to another with a click of the mouse. A single letter, a series of letters, a whole word or groups of words, whole sections of text, or even images may be set off with this tag and attribute to turn it into a clickable link to another document. It follows the same format as other tags and attributes: format: <tag term attribute = "value"> example: <a href = "put a URL here">

Saturday, February 24, 2007

Spring 2007 week 5: 02/21

Thursday, February 15, 2007

Spring 2007 week 4: 02/14

Thursday, January 18, 2007

Spring 2007 week 1: 01/24

Google Analytics

Spring 2007

week 5: 02/21

Spring 2007

week 4: 02/14

Spring 2007

week 1: 01/24