Fundamentals of Internet Applications: Fall 2010 WEEK 3 :—9/29: Wed, 6:00pm

Hi everybody,
I liked the designs that you all created in class this week. What we did is a formal derivation.

What does that mean you ask? Well, we derived, or came up with, an abstract form, an abstract design out of lines and spaces. We started with a 9-square that you created in Illustrator, and then we changed it to end up with what you got. We will use these designs to create the design for your final project website.

Directly below, you should follow the series of steps that you see as your homework. You will be quizzed over them in 2 weeks.

Please go through the rest of the blog. The questions that you see, I will take up as part of your >week 4 homework in 2 weeks.

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>v </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

images

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>

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:
1. Please Repeat the DESIGN EXERCISE again for homework so that you will have a total of 2 Illustrator Designs when you come to class next week, one that we did in class together, and one that you did on your own for hoework.
  SEE THE STEPS AT THE BOTTOM OF THIS POSTING
2. Please type all questions BELOW and their answers in a web-page composed of proper HTML and give it to me in TWO WEEKS;

QUESTIONS: Here are some questions to help guide you through this weeks' material. These questions will be part of your homework due in class in TWO WEEKS:

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:

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, 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:

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

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:

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.

Inserting 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:

2-D Design Exercise:

Open up Illustrator and create a file that is 12in X 12in.
Turn on the rulers (cmd-R or ctrl-R) and drag guides to the 4" and 8" marks both on the top and the left-hand side ruler.

Open the layers panel (F7), and name the first layer guides.
Lock the first layer, and add a new one named vertical.
Using the line-segment tool (\), using black as the stroke color, and 5pt as the stroke thickness, draw a line like the one you see below on the first vertical guide.

Repeat this with three more lines along the other guides and on both the right and left edges of the drawing space as you see below.

Draw 4 more vertical lines for the bottom portion of the drawing space as you see below.

Lastly, draw 4 more segments for the middle portion of the drawing space. These new line-segments will appear to connect the top and the bottom, but make certain you have 3 line-segments for each.

Lock and hide the vertical layer in the layer panel.
Create a new layer named horizontal.
In this new layer, repeat the actions that you took for the vertical lines and draw line segments as illustrated in the next few images.

Show and unlock, both the vertical and horizontal layers

FOR THE FOLLOWING STEPS, YOU MUST USE MY EXAMPLE, BUT YOU MUST NOT...I REPEAT, YOU MUST NOT DUPLICATE IT. CHOOSE HORIZONTAL OR VERTICAL LINES AS I ASK, BUT DO NOT CHOOSE THE SAME ONES AS ME. IF YOU NEED ASSISTANCE, ASK ME FOR HELP.
Now select 3 aligned vertical segments (one whole vertical line), and change the thickness to 30pts.
Then, select 3 horizontal segments (one whole horizontal line), and change the thickness to 25pts.

Again, select 3 aligned vertical segments (one whole vertical line), but this time move it 1/2 the distance left or right to the next line.
Also again, select 3 aligned horizontal segments )one whole horizontal line), and move it also 1/2 the distance up or down to the next line.

Delete one of the horizontal and also one of the vertical segments

Select two horizontal line-segments (aligned or adjacent), copy them, paste them, and then move them half the distance up or down to the next line segment.

Lock both the horizontal and the vertical layers.
Create a new layer named gray and put it on the bottom of the stack of layers.
Using the rectangle tool, and using a very light gray fill color with NO STROKE color, draw a rectangle that colors in the space the two lines you've just moved.

Deselect by holding on to the command (Mac) or control (PC) and then clicking on the background somewhere.
Choose a darker gray color and draw another rectangle that colors in any ONE of the rectangles.

Lock the gray layer and unlock the vertical layer.
Change any 2 of the adjacent or aligned vertical segments so that they have a thickness of 50pts.
Then lock the vertical layer and unlock the horizontal layer.
Change any ONE of the horizontal segments so that it has a thickness of 25pts.

Lock all layers and create a new layer named color. Place this layer on the bottom.
Decide on any two of the white rectangles and draw rectangles that color them with 2 DIFFERENT COLORS.

Decide on any two OTHER of the white rectangles and draw rectangles that color them with 2 LIGHTER versions of those same colors.

Unlock all layers EXCEPT the GUIDES layer.
Select all (cmd-A or ctrl-A), and then using the selection tool (V), hold down onto the shift key and rotate the 9-square 90 degrees COUNTER-CLOCKWISE.