Introduction to Computer Science – CSC101 Summer II 2011
advertisement
Introduction to Computer Science – CSC101 Lab #2 – HTML II: Intermediate HTML Due: July, 15 2011 @ 5:00pm (Friday) Points will be deducted for labs that are turned in late! Your Name: __________________ Summer II 2011 WFU E-mail Address:_________________ Pre-Lab Reading Assignment: If you have not completed the Pre-Lab instructions then stop now and complete them. They can be located by going to http://www.wfu.edu/~pryoree/ and then to Course Calendar. Lab Objectives: 1. 2. 3. 4. To improve your page by using more HTML features. Learn to use HTML tags to add images and links to a page. Learn to use different types of paths to identify files in links. Learn the basics of creating tables in HTML. Grading: You will be editing the webpage that you created last week that contains your CSC101 journal. This week we will be adding a few more pages, as well as adding hyperlinks and images. I will visit your web site and look at the page. In addition there are questions on the final page of this report that you will answer. Your score for the lab will be based on the web page that you create and post on your web site and your answers to the questions. - Lab Questions: 10pts Web Page that displays properly on your site: 10pts o Proper use of <img> tag to display an image o Working links throughout document o Proper use of <tr> and <td> tags to display a table I will check the following website for your page: http://www.wfu.edu/~yourusername/csc101/index.html If this link does not open up the proper webpage, you will receive no points for the completion of the page, even if it is located somewhere else. It is your responsibility to ensure this link works before handing in you lab. If you have any problems, please ask me during lab! Lab Instructions: Reminder: Although HTML tags are not case sensitive, filenames used for links ARE case sensitive. Please use care in typing filenames for links and images. I. Adding a Personal Information Page 1. In the folder C:\Userdata\csc101, create a new file called info.html i. If you are unsure how to do this, consult lab1 2. Type the following HTML code, substituting your page title for the one in the example: <html> <head> <title>The CSC101 Journal of Edward Pryor</title> </head> <body> <H2>Personal Information Page</H2> </body> </html> 3. Copy the HTML code for your personal information from index.html and paste that code into info.html. i. You can delete your personal information from index.html 4. Open info.html in a web browser. Your information should be formatted the same way it was in index.html II. Adding a link to your page We are now going to add a link to your newly created info.html from your main page (index.html). 1. Working in index.html, in the space where your personal information was located, before your blog entries (should be before the <hr> tag), add the following HTML tag. i. <a href=”info.html”> About the Author </a> ii. The form of this tag, called a link anchor, is a little different from the simple tags you used last week. Note how the <a href= … > and </a> tags surround the text that will appear on the screen as the link. 2. View this page in a browser and try clicking on the link, does it work? 3. Let’s add a link to the course webpage under the link to your personal information. i. The address for the course webpage is: http://www.wfu.edu/~pryoree/ ii. How would you create text that states “Link to CSC101 Course Webpage”, that links to the above address? iii. Make sure each link appears on a separate line 4. View this page in a browser and ensure the new link works III. Adding an image to your information page 1. Working in info.html add the HTML code to include an image in your page immediately after the line "Personal Information". The basic form for an image tag is <img src=”path to image file goes here”>. In this case we will also add an alignment specification to place the image at the right of the page. The image you selected for today's lab is in the folder csc101/images. What would be the correct relative path to get to this file? For example, the complete tag to insert the image into my webpage is: <IMG src="../images/me.jpg" align="right">. i. Insert the correct tag to put your image into your webpage. ii. There is no ending tag for an IMG tag. Include an IMG tag in your page then view the page in your browser to see how it looks. iii. If the image is way too big, you can add other attributes to the img tag (height / width) to make the image the right size 1. You can also edit the picture with a photo editing software (ie Microsoft Office Picture Manager) to make the picture smaller iv. Ask if you need help with this! 2. Open the info.html in a browser and see how it looks. Make sure your image displays correctly! IV. An Introduction to Tables in HTML Tables are very common elements in web pages. In this exercise we will lead you through the steps of constructing a simple table with two columns. Your table will have a column of your favorite websites such as “Digg” and a column containing links to the website associated with each page. Your table, when viewed in a browser, looks like this: Favorite Websites Webpage Digg Digg Google Google XKCD XKCD Mock Orange Bikes MOB WFU Cycling WFU Cycling Note that a table is similar to an unordered list except that we have to deal with multiple columns, hence the syntax is slightly more complex. Tables also have options for identifying column headings and for controlling the alignment of text within cells. The general outline of the tags for this table is: <table> <tr> <th> … </th> <th> … </th> </tr> <tr> <td> … </td> <td> … </td> </tr> ... </table> Where: <tr> is for Table Row -- <th> is for Table Heading -- <td> is for table data There must be one <tr> tag for each table row and one <th> or <td> for each column within the row. V. Adding a table of links to info.html 1. In the <BODY> section of info.html, create the tags for your table. The following is the exact code used to create the first two lines of the table seen above. You should copy this code, then modify and extend it for your own list of five links. <table width="500" border="2" align="center"> <tr> <th width=50%>Favorite Link</th> <th width="50%">Webpage</th> </tr> <tr> <td align="center">Digg</td> <td align="center"><a href="http://www.digg.com">Digg</a></td> </tr> </table> 2. When you have your table complete with five rows of links, view it in your browser. If you don’t like what you see you may need to modify the width of the table or the relative sizes of the columns, etc. VI. A Challenge 1. Add a link to the bottom of info.html so that the viewer of your pages can jump back to index.html without having to use the browser’s Back button. 2. Would you use an absolute or relative path for this? VII. Check it Out Before copying your files to the WFU web server go back and make sure that everything works like you want it to. Load index.html into your browser. Does your image appear where you want it? Do your links to goals, products, and links pages work? Do the links on your “links” page work correctly? Can you navigate back and forth without using the browser’s back button? Great. Let’s finish this lab! VIII. Publish your webpage to the WFU server Once again, up to this point you have been viewing your web page as a file on your ThinkPad. Now we’re going to copy your file to the WFU web server for the whole world to see! 1) Find the Network Places icon. Click on “www-home on Academic File Server (Acfiles)”. Continue to open up the csc101 folder. Be sure to copy the two files (info.html, index.html) and the “images” folder containing your image from the C:\Userdata\csc101\ folder to the www-home/csc101 folder on the web server. 2) To preview your web pages in your browser, try the following URL: http://www.wfu.edu/~yourusername/csc101/index.html This is the URL that I will visit, be absolutely sure that it opens your web page. Short Answer Questions: 1) Type in the following two addresses into a web browser. 1. http://www.wfu.edu/~yourusername/csc101 2. http://www.wfu.edu/~yourusername/csc101/index.html What do these two pages open? What is special about index.html? (2 pts) _________________________________________________________________ _________________________________________________________________ 2) The link to info.html that you put in index.html is a(n): 1. absolute path 2. relative path 3) The link to the course webpage that you put in index.html is a(n): 1. absolute path 2. relative path 4) The path you used to your image is a(n): 1. absolute path 2. relative path 5) The links that you used in the table are: 1. absolute paths 2. relative paths 6) If some text is typed within <TABLE> … </TABLE> tags but not within either <td> </td> tags or <th> </th> tags, the text will ________. (Try experimenting if you don’t know) 1. Show up in the table cell next to the cell of the previous <td> </td> 2. Show up in the same table cell as the previous <td> </td> 3. Show up outside of the table, on top of the whole table 4. Show up outside of the table, below the whole table 5. Not show up anywhere on the page 7) Give the reason why a web developer should not write the path to a linked file in a web page as: "C:\userdata\HTML\csc101\images\mypic.gif" (3 pts) ______________________________________________________________________________ ______________________________________________________________________________ ______________________________________________________________________________
