Hi everybody,
Wednesday night's class went very well. As a result of that class, I think most of were beginning to understand what it is that HTML and XHTML are all about. We started out the class with an exercise meant to review everything you'd learned in class up to then and I can tell that many of you by the end understood the process even if you get a few of the details wrong here and there.
There are a few things in this week's posting that I did not go over in class, namely
Lists and Tables. I will cover them in class next week.
I haven't taught you much up to this point (we've only had 3 classes), so the best way to make sure you get it is to memorize it. That is why we're having a
quiz next week. The steps of the quiz are here below. I want to make certain that EVERYONE is on the same page when we really get into the complex stuff, so you simply MUST know the following:
- Make sure you have a primary folder for all of the files for the site that you are working on. This is the folder that we normally name week1, week2, or week3, for example;
- Create the basic structure of all HTML documents:
<html>
<head>
<title>Creating a Basic HTML Document</title>
</head>
<body>
</body>
</html>
- Save that document into your primary folder and give it the name of index.html;
- Add the DTD to the top of the document above the first tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- Add a primary heading to the body section and below that add a secondary heading:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Creating a Basic HTML Document</title>
</head>
<body>
<h1>This is a Primary Heading</h1>
<h2>This is a Secondary Heading</h2>
</body>
</html>
- Within your primary folder, create a secondary folder named images and place your images inside this folder;
- Add images to the page to the page following this example:
<img src="images/someImage.jpg"/>
- To resize your images, you must use PhotoShop, and the image menu. For example, to resize your image so that it has a height of 100px, you must go to the image menu in PhotoShop and type 100px in the height box. Usually, this will automatically cause the width to also be adjusted to keep the image in proportion;
- To optimize an image as a .gif file, you must choose File >> Save for Web and Devices.
- To add links to your page you must use the anchor tag and its href attribute with the URL (web address) like the following example.
<a href="http://dma110.blogspot.com"/>click here for my blog</a>
For next week's class, please go through this blog and do the homework to the best of your ability. I will cover much of this in class next week; however, given the new time constraints, I will probably skip over lists. Nonetheless, I will still expect you to know how to create them for mid-term.
As to other issues: I have been working with the rest of the DMA faculty and TCI faculty and committees on proposals to create new classes and 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, such as new 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?
The first 3 links below are for creating lists, and the last 4 have to do with other issues regarding images and tables: resizing images with PhotoShop, inserting images into the page, and then putting them into a table. Tables were once an
EXTREMELY important issue; however, as a result of the growing use of CSS, they are much less utilized. Nonetheless, make certain you understand how to create them.
- TOPICS:
- LINK Ordered Lists;
- LINK Unordered Lists;
- LINK Definition Lists;
- LINK Editing & Resizing Images;
- LINK Inserting Images;
- LINK Creating HTML Tables;
- LINK Images within Tables;
- HOMEWORK:
- LINK Download this week's homework here:
- Also, do the questions below due next week in class.
- QUIZ:
- LINK See the steps above to study for next week's quiz:
- 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:
No comments:
Post a Comment