CSC 101: Lab #2 HTML and the WWW Manual and Report Lab Date: Tuesday, 2/2/2010 Report Due Date: Friday, 2/5/2010 3:00pm

Size: px

Start display at page:

Download "CSC 101: Lab #2 HTML and the WWW Manual and Report Lab Date: Tuesday, 2/2/2010 Report Due Date: Friday, 2/5/2010 3:00pm"

Christiana Phelps
5 years ago
Views:

1 CSC 101: Lab #2 HTML and the WWW Manual and Report Lab Date: Tuesday, 2/2/2010 Report Due Date: Friday, 2/5/2010 3:00pm Lab Report: Answer the report questions in this document as you encounter them. For the remaining labs, the report document will be integrated with the lab document. The last page of this document provides the grading rubric for this lab. Purpose: The purpose of this lab is to allow you to gain additional experience in writing HTML and to allow you to develop web pages using the advanced HTML features of: images, tables, targets, and relative/absolute paths. Your web pages will be published and verified on the WFU web server using the techniques you learned in the previous two weeks. Be Careful: Remember that we need to be concerned with case-sensitivity and not introducing spaces or other weird characters in the filenames. Also, type, instead of cutting and pasting, any quoted information (as the quotes may not copy over correctly). Basic Webpage Step 1: Navigate to your CSC101Lab/lab2 folder that was created as part of the pre-lab. Open Notepad (Start, All Programs, Accessories, Notepad). Save the blank file created in your lab2 folder as page2.html. Step 2: Use the <html>, <head>, <title>, and <body> tags appropriately (along with their closing tags) to build the basic structure of an HTML page. Give your page the title: CSC 101 Lab #2 Images and Tables Building a Table Step 3: Use the <table>,<tr>, and <td> tags (and their matching closing tags) to create a table in page2.html that matches the one shown below. Save your file and preview it in your browser by opening it from your hard drive like last week. If the format doesn't match the image below, check and update your use of the table tags until it does.

Answer the following questions by experimenting with your page2.html. Make sure when you are done experimenting that your table still matches the table shown in the above figure. 1.

2 Answer the following questions by experimenting with your page2.html. Make sure when you are done experimenting that your table still matches the table shown in the above figure. 1. True/False (circle one): If text is not enclosed by the <tr></tr> tag pair but is between the <table</table> tags, it will appear in one of the table cells. (Feel free to experiment!) 2. If text is placed outside of the <td></td> tag pair but still between the <tr></tr> tags, where will the text appear? (Again, experiment!) a. In the same table cell as the previous <td></td> tag pair. b. Outside of the table and above the first line of the table. c. In the same table cell as the next <td></td> tag pair. d. The text will not show up anywhere on the Web page. e. Outside of the table, below the last line of the table. Step 4: Modify your <table> tag in your page2.html file to the following: <table border= 1 cellspacing= 1 cellpadding= 10 > Save and view your page with this update. Experiment with different values until you feel you have created a nice looking table. Step 5: Your table implicitly has a heading row City and Thumbnail. Replace the appropriate <td></td> tags with <th></th> tags to make this row be formatted as an HTML heading row. Also add a caption to your table with the text Cities of the World using the <caption> tag appropriately. At this time, your page should look similar to the example below.

3 Once your page matches the image shown above, have the instructor or TA check off that you have completed this step of the lab. Inserting Images Step 6: Right click on the two image links provided on the lab webpage for this lab. Choose Save Link As (or Save Target As / Save Image As ) and save these files in the CSC101Lab/lab2/images/ folder you created in the pre-lab. These will be our Paris and London images. Step 7: In your page2.html file, replace the words Paris Image with the following HTML tag: <img src= images/paris.jpg >. Similarly, replace the words London Image with an appropriate tag to show the london.jpg file you downloaded. Verify you can see the images in your page in the browser. If not, attempt to determine what went wrong and fix it. 3. In the <img> tags you just inserted, how do the src attributes refer to Now we the want image to view files? the main.html file in a Web browser. Since we haven t transferred it a. to The the src wfu.edu attributes webserver use relative yet, we paths. will look at it locally on your computer. To b. do The this, src open attributes your use web-browser, absolute paths. choose Open File from the Filemenu, and c. then There navigate is not enough to your information CSC101Lab/lab1 to tell if directory the src attributes and choose are main.html to view. using At relative this point or absolute your document paths. should look like the following image (except d. with The your src attribute name instead doesn t of use mine): paths, it just uses filenames. 4. What happens if you leave the folder off of the src attributes (so your src attribute is just paris.jpg for example)?

4 Step 8: In your page2.html file, replace the words My Image with an img tag that correctly loads your image downloaded in the pre-lab. Also change the words My Favorite City to some other more descriptive text. Verify you can see your changes in your browser and fix any errors that occur. Your image will likely be uncomfortably large compared to those for London and Paris. Add the width and height attributes to your img tag to force the browser to display your image in a smaller size. You determined the original width and height of your image in the pre-lab. When you adjust the width and height attributes, you should attempt to keep the same aspect ratio for the image if you cut the width in half, do the same for the height. Continue adjusting the width and height values until you feel comfortable with your page. Image Links Step 9: A hyperlink to another document can be text (as used last week placing text within <a></a>) or an image. The only important thing is that whatever will be the linked content is what is enclosed between the <a></a> anchor tags. Add the following three links to your webpage: Make the Paris image be a link to the following URL (the href should be this URL): Make the London image be a link to the following URL(the href should be this URL): Make your city s image be a link to your full-sized image. You will need to determine what href value you will need to use here to refer to this file (as saved in your lab2/images folder). Finally, make each of these three links open in a new window/tab by using the target attribute appropriately within your three <a> anchor tags. 5. The href attributes you just set for the London and Paris pages are: a. Absolute paths b. Relative paths 6. The href attribute you set for your own city image is a: a. Absolute path b. Relative path Your final page should look similar to the following:

Have the instructor or TA checkoff that you have completed this step of the lab. Transfer to Web Server Step 10: Using the FTP (file transfer) application from last week, connect to the wfu.

5 Have the instructor or TA checkoff that you have completed this step of the lab. Transfer to Web Server Step 10: Using the FTP (file transfer) application from last week, connect to the wfu.edu computer and copy your lab2 folder you have been working in on your laptop into the www-home/csc101lab folder on wfu.edu. This may require you navigating between folders on both your laptop (the left-side of the FTP window) and on the wfu.edu computer (the right-side of the FTP window) so that you can drag and drop appropriately.

6 Step 11: Go back to the following address: and select the 2 nd option under Wake Forest Web Pages, Set permissions for personal home page. Selecting that option will take you to a page which resembles the image below: Make sure the box says Yes and click the Submit button. For now, we will need to do this after any transfer of files to the Wake Forest web server we do. Step 12: Now that you have a copy of the files on the Wake Forest web server that you originally had on your computer, you can test that you can see them through the World Wide Web. Use the address: Make sure all links work on the page2.html page. Have the instructor or TA checkoff that you have completed this step of the lab. You may want to look at the next page (Grading) to verify that you have completed the lab successfully.

7 Grading: Your lab will be graded according to the following rubric: Submitted pre-lab questions 8 questions, 28 points total (3.5 each) Your two HTML files will be examined for proper use and placement of the following HTML tags (and their closing tags when required) and for valid links 20 items, 50 points total (2.5 each) o <html> o <head> o <title> o <body> o <img> width and height attributes o <table> border, cellpadding, and cellspacing attributes o <caption> o <tr> o <th> o <td> o <a> for three images o target attribute o page2.html is present in the correct location on the Wake Forest web server o Correct and valid absolute and relative paths in links, as specified o No broken links or missing images Submitted lab report questions 6 questions, 21 points total (3.5 each) One free point

CSC 101: Lab #1 HTML and the WWW Lab Date: Tuesday, 1/26/2010 Report Due Date: Friday, 1/29/2010 3:00pm

CSC 101: Lab #1 HTML and the WWW Lab Date: Tuesday, 1/26/2010 Report Due Date: Friday, 1/29/2010 3:00pm Lab Report: Make sure to follow along in the lab report document and answer questions as you encounter