INFO 10034 - Review Exercise

Click Here for a "zipped" file containing the graphics files required for the review exericse


In this review exercise, you will create several HTML files:   INDEX.HTML, ACME.HTML, GRAPHICS.HTML, HEADER.HTML, FOOTER.HTML, MENU.HTML, ORDER2.HTML and ORDER.HTML.   In the "Review" folder of your student disk, you will find the graphics files.   Does this look familiar?   You did similar work in both the INFO BIN30 and INFO BIN31 in those review exercises.   You will create an external Cascading Style Sheet file ACME.CSS which you will link into all of the HTML files. (If you still have the ACME.CSS file (and other HTML files) from your INFO BIN31 review, you might want to use it as the basis for this review exercise.

Style Sheet Settings:   Save these settings in a file named "ACME.CSS".   Link this file to ACME.HTML, GRAPHICS.HTML, MENU.HTML, ORDER2.HTML and ORDER.HTML.

INDEX.HTML:     

The file should look like this (after you have applied the embedded style sheet settings):

MENU.HTML: 

HEADER.HTML and FOOTER.HTML: 

GRAPHICS.HTML: 

Create the table (as pictured below) and size it to about 90% of the screen width.   Inside the table, use HTML comment tags to notate the table.   Include one before each row indicating the content of the table row.   The first row of the table should be a table header.   Align the cells in the table as in the picture (below).

The image files you will include in this file are:  bear.gif , macaroni.gif, earth.gif, devildan.gif, devilblink.gif, and earth2.gif

The file should look like this (after you have applied the embedded style sheet settings):

 

ACME.HTML: 

To speed up the creation of this file, open GRAPHICS.HTML and use the "File", "Save As" and save the file as ACME.HTML.   You will use the same table layout as the first file ... but in this file, you will make the table "scrollable". Size the table so that it is centered and only about 60% of the table (horizontally) is visible at one time. The finished product should look something like the first image above when you load this file in its appropriate frame.

ORDER2.HTML:  (made from the file GRAPHICS.HTML)

To speed up the creation of this file, open GRAPHICS.HTML and use the "File", "Save As" and save the file as ORDER2.HTML.   You will use the same table layout as the previous file ...for the middle table in your order form.

Inside each table, use HTML comment tags to notate the table.   Include one before each row indicating the content of the table row.   Align the cells in the table as in the picture (below).   Keep the "graphics" table and use the code for the second table on the screen.

When you have completed this file, remove the table borders.  The file should look something like this:

ORDER.HTML:  The file "order2.html" is too wide to appear in your right frame. The file "order.html" will have:

When you have completed all of the files, remove the frame borders.  The frames should look something like this:

 Using FTP:

When you have completed the HTML files, upload the HTML files and all image files into a folder named "review" in your account on the "nexus" server.    Open them from the server and test to be sure that everything works smoothly.

Return to main page