CSCE 102 Lab 9

FUN WITH TABLES

General information

  • The printers in 361 and 244 are for CSCE 101/102 only; if you print other materials your account may be revoked.
  • Always bring your text book and lecture notes to lab.
  • Use clean indentation so your code will be easy for you to read and also easy for your instructor to read.
  • Always maintain backup copies of your work. Always work on your H drive and copy your work to your USB memory stick at the end of lab.
  • Never share your password or memory stick with anyone. Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work.
  • Always read the entire problem and plan your solution carefully. Test and debug as you work. You may need to change your original plan. Be sure to test your final solution. There are multiple solutions.

In-class assignment - Due at the end of class

Part I Lab 9axx.html — Simple tables

  1. Table 1– Create a webpage that contains a table with exactlyfive columns and four rows.
  2. The first row will contain a heading that spans across all columns.
  3. Hint: use the colspan attribute inside the opening th tag
  4. Give the heading an onclick that will change the text of the heading when it is clicked. (Hint: use innerHTML)
  5. The second row will contain a heading for each column. (th)
  6. Fill the rest of the table with text. You will make up the text to fill each cell in the table. Your tables will not be like anyone else’s.
  1. Table 2 Copy the table that you just created and paste it below the first table.
  2. In the second table insert anothercolumnon the left that will contain a heading thatspans the firsttwo rows.
  3. You will have to insert more cells to fill the rows. (td)
  4. There will only be one heading in the first column.
  5. Leave the rest of the table as it was in table 1.
  6. Apply Style to your table

______

Part II —Creating square thumbnails - 125px × 125px

  1. Inside of your All_102Submissionsfolder create another folder called “Thumbnails.”
  2. Save 6 photosrelated to national parks in the US inside this folder.
  3. Give these files simple and intuitive names (No spaces in the filenames).
  4. Open each image in Paint individually and create a square thumbnail for the image:

◦Sizethe -thumb image to 125px × 125px:

Two ways to do this: Try both ways. You will have to play with this a little at first to get a good quality thumbnail.

The First Way: Your small image will be a portion of the original image with the main subject showing.

  • Cropeach image so only the part of the image is visible. You can reduce the size of your image some first by clickingResize, selecting percent, and entering a value in either Horizontal or Vertical, leaving Maintain aspect ratio, selected and clicking OK.
  • Click on Rectangular selectionboxand select the main subject of the image (larger than 150x150) Undo (Ctrl+Z) is your friend; you will use it often as you experiment.
  • Click Crop
  • Click on the Paint button.and select Properties.

◦Fill in the Width and Height boxes, and click OK. The image will be cropped from the right side and the bottom of the image.

The Second Way: Your whole image will be resized to a smaller image with a little distortion

  • Click Resize, enter the same value in Horizontal and Vertical, and uncheck Maintain aspect ratio, and click OK
  • Save the edited image with a new name in the thumbnails folder by appending

“-small” to the file name.

Be certain to rename the image so that you don’t write over your original image.

◦E.g., If your file is named colaSnow.png then right click on the image and select open with > Paint(or drag and drop on an open window in paint). After you have created your thumbnail in Paint select File > Save As, type colaSnow-small.png in the filename

◦After saving the modified thumbnail and repeating the above steps for each image, you will have created a total of 6 thumbnails, 1 for each of your original images.

◦Note: Each of the thumbnails and each of the original images should be in the images folder, All_102Submissions/Thumbnails

◦Note: When you are finished you will have 12 images in your All_102Submissions/Thumbnailsfolder. Six of your images will be large and the other six will be small.

Part III(lab9Bxx.html) — Create a table

Create a table with 4 rows and 3 columnsusing tbody. You will add a header and footer afterwards. (See page 304-305 in your web design text book)

  1. Add thumbnail images (image files suffixed with “-small” that you made in part two) to each td element in the table body on row one and row three. Remember, since the thumbnails are in a different folder you must include “Thumbnails” in the relative path (e.g., Thumbnails/colaSnow-small.png)
  2. Row two and row four will contain a description of the images above them. (Three images in row one with their descriptions below in row 2.)
  3. Link each thumbnail image you added in the previous step to the larger original image (you will used the anchor element):

◦E.g., the image colaSnow-thumb.png should link to colaSnow.png in the thumbnail folder.

  1. Use a target attribute in the anchor element so that the user will keep your page open.
  2. Add a header cell to the table by adding a new row above the first row in the table.(thead) Add a single header cell (th) to this row that will span the three columns beneath it. Within this th element cell give the table a relevant title/name.
  3. Add a single footer to the table by adding a new row inside of tfoot; Use colspan to span the cell across the entire table. Add content to the cell.

Part IV — Style the table

  1. Give the table element a class (you make up the class attribute value[1])
  2. Use an internal style sheet and reference the table by its class value appropriately: give the table element a border, give the td and th elements padding, and give the th element a background color (hexadecimal). Use a descendant selector for the tbody/thead/tfoot elements since they are descendants of the table element. Recall that a space in a selector creates a descendant selector meaning the selector will match descendant elements (elements nested inside elements).

i.e., A descendant selector of the form “A B” matches when an element B is a descendant of some ancestor element A (nested inside of).

E.g., the CSS rule for classes using div as an example (you will not be using div)

div.abc span {color:blue}

will apply to span elements contained by div elements with class abc:

<div class=”abc”<span>this span gets the style of text color blue</span> but the rest of the text inside div will remain unchanged</div>

Use this relationship when creating selectors for td and th since they are descendants of the table with the given class.

Part V(lab9Bxx.htmlcontinued)

a)Table set up

  1. Create a table with four columns and five rows.
  2. The first row will contain a heading that spans across all columns. This heading asks the user to click on an image to enlarge.
  3. The second row will contain four images. Use the thumbnail images of National Parks in the US that you created earlier.
  4. The third row will contain fourmore imagesfrom the thumbnail images of National Parks in the US that you created earlier.
  5. The fourth row will contain one cell that spans all columns, that contains an image of you that is 500 by 500. (Specify the size in the img element)
  6. Note: This image will be replaced when the user clicks on a thumbnail image from row twoand three as specified below.
  7. The fifth row will contain one cell that spans all columns. It contains a heading that contains your name and today’s date.
  8. Note: This field will change every time a new image is loaded so remember to include an id.
  1. Apply Style to your table. Make it appealing and professional looking.

b)Using JavaScript to open an image in the same document

  1. Write JavaScript code so that each thumbnail image in the table opens the larger original image in the cell in row four of the table when the thumbnail is clicked. Also when the picture loads, change the text in the last row to text that describes the image.
  1. Note: Write a function to replace the large image with the new image and change the existing text in the last row to a caption for the new image. Call the function when the thumbnail is clicked.
  2. Save the assignment in your All_102Submissions folder

Part c — Update All_Index.html

  1. Add links to Lab9axx.html and Lab9bxx.html to the list.

[1]When assigning a value to the class attribute remember that it cannot contain spaces and cannot begin with a number.