- TOPICS:
- XHTML DTD (Document Type Definition),
- More with Images—Images as Links,
- Multiple Page Web-Sites,
- HTML Tables.
- HOMEWORK:
- 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.
- 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/>.
- 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:
- 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 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:
- 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:
Showing posts with label path. Show all posts
Showing posts with label path. Show all posts
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.
Saturday, February 10, 2007
Spring 2007
week 3: 02/07
Hi everybody, Please forgive me for taking so long to pubish this week's blog posting. Some weeks I just have so much to do other than posting this blog that it is difficult to fit time in to write this thing up. In addition, some weeks I just have so much to say on this blog, so much to cover that I never seem to be able to complete it. This week was one of those weeks.
I have been working with the rest of the DMA faculty on proposals to create new majors and expand our curricula, seek out new directions for us and for our students. So, if any of you have ideas of topics that you wish to study, or that you think TCI should cover, majors that we should offer, then please let me know. This school tends to listen to the students. You have a much larger voice than you might realize. All you have to do is speak up. You are the ones who are actually paying the bills around here anyway, right?
Now, back to this class. In this week's blog, I wanted to cover quite a few things, everything that I went over in class of course; and, in addition, quite a lot that I did not cover. Whatever you read in this week's blog, however, that I did not cover in class, I will cover in the next class. I'm speaking mainly of course of what you will find below about lists. What I covered about images in our class last Wednesday (the 3rd week), I usually do in the 4th week, and what I normally cover on html lists in the 3rd week, this term I'll be covering next week (the 4th week). In other words, I just switched weeks 4 and 5 because it felt like it would flow a lot better since I had already introduced images the previous week. HTML lists is a relatively easy, short, and minor concept compared to images and tables, so we will not spend much time on them.
The first 3 links below are for those lists, and the last 4 have to do with what we covered in class, resizing images with PhotoShop, inserting images into the page, and then putting them into a table.
- TOPICS:
- HOMEWORK: LINK Download this week's homework here:
- QUESTIONS: Here are some questions to help guide you through this weeks' material:
- What are the three (3) types of lists?
- What is the difference between an Ordered List and Unordered List?
- What are four types of Ordered Lists?
- What are three types of Unordered Lists?
- What are the two main tags for Definition lists?
- What attribute must be used with the <img/> in order to place an image into a web page?
- 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?
- INTRODUCE:
- Lists: HTML Lists are used to organize and present categories of information to your readers one point at a time; however, because there many ways to present information, there are a few types of lists to choose from. The code for creating an HTML list, when read by the browser, the will automatically create a list formatted depending on which type is chosen.
- Ordered Lists are particular types of lists in which the elements that make up the list must be in a particular order. This order may be numbered or lettered, but whatever the case, the order that the items come is important. To create an ordered list you must use the <ol> tag. To specify a kind of list, you must use the type attribute, and give it a value of 1 for a numbered list, A for a lettered list with upper case letters, a for a lettered list with lower case letters, i for a numbered list using lower case Roman Numerals, and I for a numbered list using upper case Roman Numerals. If you wish to start the list with a different number or letter, in addition to the type attribute, you must use the start attribute, and then its value will be whatever number or letter you wish to start. The heading of the list is indicated by a pair of tags, <lh>list heading</lh>, with the heading typed in between them; and, likewise, each item in the list itself is indicated by a pair of tags, <li>list item</li>, with the text for that item in between them.
- Unordered Lists are particular types of lists in which the elements that make up the list are NOT in a particular order. This is a bulleted list organized like a shopping list in which the items listed are randomly placed, indicated by a graphic symbol known as a bullet. To create an unordered list you must use the <ul> tag. To specify the kind of bullet graphic, you must use the type attribute here as well, and give it a value of circle, disk, or square. The heading of the list, is indicated by a pair of tags, <lh>list heading</lh>, with the heading typed in between them; and, likewise, each item in the list itself is indicated by a pair of tags, <li>list item</li>, with the text for that item in between them.
- Definition Lists are particular types of lists in which the elements that make it up are terms and their definitions. To create a definition list you must use the <dl> tag. The term to be defined is indicated with a pair of tags,<dt>definition term</dt>, and the definition of that term is noted by another pair of tags, <dd> the definition of the term</dd>.
- Image Editing & Preparation—Before Images may be inserted into a web-page, they always have to be prepared. This has to do with resizing, cropping or any sort of color correction. The most widely used software application for image editing & preparation is Adobe PhotoShop. Once an image has been prepared, then it is ready for insertion into the page along with all of the other content. The most common operation performed on images is resizing them down to fit properly within a page-layout and design. The following steps outline a simple resizing process for a single image intended for a web-page.
- Open the image with PhotoShop.
- Select: Image >> Image Size Then, in the dialog box that opens up, select an appropriate width or height. For images intended for web-pages, the resolution should always be 72ppi. Click okay.
- Save the image with its new dimensions. If you aren't certain, save it with a new name so that you will still have the original if you must go back and change it again.
- Inserting Images: The subject of images is somewhat more complicated that most of the rest of HTML, and four (4) things must be kept in mind:
- To place an image inside a web-page, one must use a different kind of tag, an empty tag. As mentioned last week, an empty tag does not come in pairs that surround some text or content that it formats or modifies. Instead, they are singular tags that create the content itself.
- On its own, the <img/> tag does nothing, so it must be accompanied by a particular attribute which has the task of noting to the browser which image file will be placed in the web-page. This is the src attribute, the source attribute. Following this attribute, you must type the file/folder path of the particular image you wish to place in the web page as its value.
- In order for this image to display in the browser, the files in your folder for this web-page must be well-organized and well placed. Here I will make a note of the importance of file organization to the creation of web-pages. I will start with the example of this particular file I am typing now, this week’s class notes. I typed this document on my computer in my office and I saved it on my hard disk, the C: drive. Inside my C: drive, I have a folder named classes. Inside of that folder I have another folder named spring07 (I have a different folder for each semester). Inside that folder, I have yet another folder named dma110 (once again, I have a different folder for each of the classes I teach); and finally, inside that folder I have a series of folders named by week—week1, week2, week3, etc. up to week14. As this is the third week of class, I saved this document in the week3 folder, and I named it dma110wk3.doc . The folder hierarchy looks like this— C://classes/spring06/dma110/week2/dma110wk3.doc I go through explaining all of that because it addresses the issue of hierarchy. This is known as a folder hierarchy. The most important folder comes first as every-thing else is found inside that folder. In my case, all of my files for all of my classes for all of the terms I’ve taught here are located in my classes folder. Likewise, when you create a new webpage, it is important to create a separate folder for that web-page. You should then save your HTML document inside that folder. This will be the main folder for the new HTML project. Also inside this main folder should be a series of other folders, a folder for each type of content, for example. One folder for your images probably, another for flash files perhaps, yet another for CSS, and still another possibly for sound/music files. If you are not organized, your web-page will likely not appear properly in the browser when you view it. Some images may not show up, you might duplicate some files accidentally, or some other mistake if everything is not in its proper place.
- There are attributes which may be used with the <img/> tag:
- src—a required attribute which indicates to the browser which image file is to be displayed in the web-page. The location of the file, followed by the filename, and then the file extension must be typed;
- alt—another required attribute but one which displays a small box over the image with some text that you type for the value of the attribute. This is alternative text that will be displayed in the case the image does not show up, or whenever you mouse over the image with your cursor;
- width—changes the width of the image in the web-page without changing the actual number of pixels in the image file itself. This attribute is meant primarily to make only minute changes in the width either down or up. For large changes, an image editor, such as PhotoShop, should be used;
- height—changes the height of the image in the web-page without changing the actual number of pixels in the image file itself. This attribute is meant primarily to make only minute changes in the height either down or up. For large changes, an image editor, such as PhotoShop, should be used;
- border—adds a border around the image with a thickness of the designer’s choice. To be used sparingly as it tends to be over-used and used badly.
- Below is an example of an <img/> tag used with an src attribute: <img src="images/myPicture.jpg"/> In the above code, the first term after the src attribute is the location of the image. In this case, it is in the images folder. Following that we have the name of the file and its file extension, myPicture.jpg . The location of your images is within their own folder. This folder is ALWAYS within the main folder of the web-page. You should never place it outside the main folder of your web-page as this will cause your images to fail to load in the browser window.
- Tables—To create a table in HTML, the first tag pair required is the <table></table> tag pair. These two tags mark the beginning and the ending of the table respectively.
- Table Rows—Alone, the <table></table> tag pair does very little. Tables are constructed row by row to form horizontal bars, one at a time. To create a single row, the<tr></tr> tag pair must be placed between the <table> tags. If more than one row is desired, then more than one pair of <tr> tags must be typed.
- Table Cells—Likewise, the <tr></tr> tag pair does very little on its own. As mentioned, tables are constructed row by row to form horizontal bars, which are created by typing a <tr></tr> tag pair for each row desired. Furthermore, these rows are made up of smaller rectangular divisions, known as cells, where data is to by typed. There must be at least one cell within each row. To create a cell, the <td></td> tag pair must be placed between the<tr> tags. <td> here stands for Table Data. If more than one cell is desired, then more than one pair of <td> tags must be typed.
- Content—In order for there to be a table visible in the page at all, some content must be place between the <td></td> tag pair. This content may be in the form of text, links, images, or even other tables. If no content is desired, if the cell should appear empty, then the content must be invisible. To accomplish this, you must type a "blank space" between the <td> tags. To type a SINGLE blank space in a page of HTML, you must type the following string of characters Observe the following example:
<table>
<tr>
<td> </td>
</tr>
</table>
In the above example, there is one pair of <table> tags at the beginning and ending to mark the extents of the table. Inside of those tags, there is one pair of <tr> tags that will create one single row in this table. Then, finally, between those two tags, there is a single pair of <td> tags that will create a single cell within that row. This means that the table consists of a single row with one single cell. What we will see as a result of this table, then, is a little box. To create a table with three rows, you will have to type three pairs of <td> tags, as in the example below:
<table border="1px">
<tr>
1 <td> </td>
2 <td> </td>
3 <td> </td>
</tr>
</table>
The above code will create the table below:
Although it appears as if there is no content in the cells of the table above, the computer or the browser considers this to be false. There is content, albeit invisible content. There is a blank space inside of each cell created by the characters . There may be, however, other types of content besides characters, whether visible or invisible. Images may also be used as the content within a table. To place an image within a table, you must put the <img/> tag between the <td></td> tags. For example: <table border="1px"> <tr> <td> </td> <td><img src="images/myPicture.jpg"/></td> <td> </td> </tr> </table> This code might result in the stunning image inside the table below:
- Lists: HTML Lists are used to organize and present categories of information to your readers one point at a time; however, because there many ways to present information, there are a few types of lists to choose from. The code for creating an HTML list, when read by the browser, the will automatically create a list formatted depending on which type is chosen.
Wednesday, September 27, 2006
Fall 2006
week 3: 09/27
- TOPICS:
- HOMEWORK: LINK Download this week's homework here:
- QUESTIONS: Here are some questions to help guide you through this weeks' material:
- What does the abbreviation XHTML stand for?
- What is XML?
- What is the difference between XHTML and conventional HTML?
- What are some of the standards that should guide the typing of strict XHTML?
- What does CSS stand for? What is it used for?
- What is the difference between XHTML and CSS?
- What is an empty tag? What are some examples of empty tags?
- What attribute must be used with the <img/> in order to place an image into a web page?
- INTRODUCE:
- Lists: HTML Lists are used to organize and present categories of information to your readers one point at a time; however, because there many ways to present information, there are a few types of lists to choose from. The code for creating an HTML list, when read by the browser, the will automatically create a list formatted depending on which type is chosen.
- Ordered Lists are particular types of lists in which the elements that make up the list must be in a particular order. This order may be numbered or lettered, but whatever the case, the order that the items come is important. To create an ordered list you must use the <ol> tag. To specify a kind of list, you must use the type attribute, and give it a value of 1 for a numbered list, A for a lettered list with upper case letters, a for a lettered list with lower case letters, i for a numbered list using lower case Roman Numerals, and I for a numbered list using upper case Roman Numerals. If you wish to start the list with a different number or letter, in addition to the type attribute, you must use the start attribute, and then its value will be whatever number or letter you wish to start. The heading of the list is indicated by a pair of tags, <lh>list heading</lh>, with the heading typed in between them; and, likewise, each item in the list itself is indicated by a pair of tags, <li>list item</li>, with the text for that item in between them.
- Unordered Lists are particular types of lists in which the elements that make up the list are NOT in a particular order. This is a bulleted list organized like a shopping list in which the items listed are randomly placed, indicated by a graphic symbol known as a bullet. To create an unordered list you must use the <ul> tag. To specify the kind of bullet graphic, you must use the type attribute here as well, and give it a value of circle, disk, or square. The heading of the list, is indicated by a pair of tags, <lh>list heading</lh>, with the heading typed in between them; and, likewise, each item in the list itself is indicated by a pair of tags, <li>list item</li>, with the text for that item in between them.
- Definition Lists are particular types of lists in which the elements that make it up are terms and their definitions. To create a definition list you must use the <dl> tag. The term to be defined is indicated with a pair of tags,<dt>definition term</dt>, and the definition of that term is noted by another pair of tags, <dd> the definition of the term</dd>.
- Images are somewhat more complicated that most of the rest of HTML and four (4) things must be kept in mind:
- To place an image inside a web-page, one must use a different kind of tag, an empty tag. As mentioned last week, an empty tag does not come in pairs that surround some text or content that it formats or modifies. Instead, they are singular tags that create the content itself.
- On its own, the <img/> tag does nothing, so it must be accompanied by a particular attribute which has the task of noting to the browser which image file will be placed in the web-page. This is the src attribute, the source attribute. Following this attribute, you must type the file/folder path of the particular image you wish to place in the web page as its value.
- In order for this image to display in the browser, the files in your folder for this web-page must be well-organized and well placed. Here I will make a note of the importance of file organization to the creation of web-pages. I will start with the example of this particular file I am typing now, this week’s class notes. I typed this document on my computer in my office and I saved it on my hard disk, the C: drive. Inside my C: drive, I have a folder named classes. Inside of that folder I have another folder named spring07 (I have a different folder for each semester). Inside that folder, I have yet another folder named dma110 (once again, I have a different folder for each of the classes I teach); and finally, inside that folder I have a series of folders named by week—week1, week2, week3, etc. up to week14. As this is the third week of class, I saved this document in the week3 folder, and I named it dma110wk3.doc . The folder hierarchy looks like this— C://classes/spring06/dma110/week2/dma110wk3.doc I go through explaining all of that because it addresses the issue of hierarchy. This is known as a folder hierarchy. The most important folder comes first as every-thing else is found inside that folder. In my case, all of my files for all of my classes for all of the terms I’ve taught here are located in my classes folder. Likewise, when you create a new webpage, it is important to create a separate folder for that web-page. You should then save your HTML document inside that folder. This will be the main folder for the new HTML project. Also inside this main folder should be a series of other folders, a folder for each type of content, for example. One folder for your images probably, another for flash files perhaps, yet another for CSS, and still another possibly for sound/music files. If you are not organized, your web-page will likely not appear properly in the browser when you view it. Some images may not show up, you might duplicate some files accidentally, or some other mistake if everything is not in its proper place.
- There are attributes which may be used with the <img/> tag:
- src—a required attribute which indicates to the browser which image file is to be displayed in the web-page. The location of the file, followed by the filename, and then the file extension must be typed;
- alt—another required attribute but one which displays a small box over the image with some text that you type for the value of the attribute. This is alternative text that will be displayed in the case the image does not show up, or whenever you mouse over the image with your cursor;
- width—changes the width of the image in the web-page without changing the actual number of pixels in the image file itself. This attribute is meant primarily to make only minute changes in the width either down or up. For large changes, an image editor, such as PhotoShop, should be used;
- height—changes the height of the image in the web-page without changing the actual number of pixels in the image file itself. This attribute is meant primarily to make only minute changes in the height either down or up. For large changes, an image editor, such as PhotoShop, should be used;
- border—adds a border around the image with a thickness of the designer’s choice. To be used sparingly as it tends to be over-used and used badly.
- To place an image inside a web-page, one must use a different kind of tag, an empty tag. As mentioned last week, an empty tag does not come in pairs that surround some text or content that it formats or modifies. Instead, they are singular tags that create the content itself.
- Lists: HTML Lists are used to organize and present categories of information to your readers one point at a time; however, because there many ways to present information, there are a few types of lists to choose from. The code for creating an HTML list, when read by the browser, the will automatically create a list formatted depending on which type is chosen.
Subscribe to:
Posts (Atom)