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 the related material. Purpose: The purpose of this lab is to familiarize you with the basics of HTML and to allow you to develop two web pages using HTML and the Notepad text editor. Your web pages will be published and verified on the WFU webserver using the techniques you learned last week. Be Careful: Remember that we need to be concerned with case-sensitivity and not introducing spaces or other weird characters in the filenames. Also, when I use italics in this lab, it is mean to make a word stick out, not as a requirement to italicize something in the HTML documents you will be creating. Any requests to italicize something will be explicit in the directions. Step 1: Create a new folder (directory) under your CSC101Lab folder that was created last week on your laptop. Call it lab1 and navigate into that folder. Step 2: Open Notepad (Start, All Programs, Accessories, Notepad). Save the blank file created in your newly created lab1 folder as page1.html. This file will be a local copy, stored on your laptop,that you will work on during lab. Step 3: Type the following code into Notepad. <html> <head> <title>csc 101 Lab Assignment 1 <body> This is my first CSC 101 Lab. This text is strong. This text is emphasized. Step 4: Note that the above HTML is incomplete, as it is missing end tags. After reviewing the General document tags portion of the pre-lab document, make use of the following end tags, placing them in the appropriate places: </body>, </head>, </html>, </title> and save the updated file. Now we want to view the page1.html file in a Web browser. Since we haven t transferred it to the wfu.edu web server yet, we will look at it locally on your computer. To do this, open your web-browser, choose Open File from the File menu, and then navigate to your CSC101Lab/lab1 directory and choose page1.html to view. Your page should appear the same as
the image below. If it doesn t, review where you may have made a mistake and attempt to fix any problems. If you are having trouble, ask a TA or the instructor. Step 5: Review the pre-lab sections on Paragraphs and separators and Text formatting. Use <p>, </p>, and <br /> tags, as well as the appropriate text formatting tags, in order to change the appearance of the page you are developing such that it appears as follows (note I would like you to use italics here): As you are making and saving changes, you should re-load your file in your webbrowser, with the circular-arrow button, to see the results of your changes. Once your page matches the image shown above, have the instructor or TA check off that you have completed this step of the lab. Also make sure you have answered the three questions in the lab report related to Steps 1 through 5.
Step 6: Using Notepad s File menu, save your current file under the name main.html. This will be our second web-page developed in the lab. Make the following changes to the file (only after you have saved it as main.html): Update the title to be CSC 101 Lab Assignment 1 Main Page Remove everything between the <body> and </body> tags. Add a first level heading (h1) with the following text content: Fred s CSC 101 Lab Assignment Page (replacing Fred with your name). Now we want to view the main.html file in a Web browser. Since we haven t transferred it to the wfu.edu webserver yet, we will look at it locally on your computer. To do this, open your web-browser, choose Open File from the File menu, and then navigate to your CSC101Lab/lab1 directory and choose main.html to view. At this point your document should look like the following image (except with your name instead of mine): If it doesn t, review where you may have made a mistake and attempt to fix any problems. If you are having trouble, ask a TA or the instructor. Step 7: Review the pre-lab sections on Paragraphs and separators (horizontal rule), Lists, and Links. Using appropriate tags: add a horizontal rule after your heading add a three item unordered (bulleted) list of three links as follows under the horizontal rule: the first list item being a link to page1.html with text content Page 1 the second list item being a link to http://www.wfu.edu with text content Wake Forest Homepage the third list item being a link to a website of your choice with text content My Favorite Website After you make changes, your page should appear the same as the image on the next page. All three of your links should correctly open the linked document as well. If the page doesn t match or the links don t open correctly, review where
you may have made a mistake and attempt to fix any problems. If you are having trouble, ask a TA or the instructor. Once your page matches the image shown below and your links work, have the instructor or TA check off that you have completed this step of the lab. Also make sure you have answered the three questions in the lab report related to Steps 6 and 7. Step 8: Using the FTP (file transfer) application from last week, connect to the wfu.edu computer and copy your lab1 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. Step 9: Go back to the following address: http://users.wfu.edu/update.html 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 10: 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. First try: http://www.wfu.edu/~yourusername/csc101lab/lab1/ (the ~ is a tilde, located above the tab key; also replace yourusername with your actual username). Record what you see as the answer to Question #8 in the lab report under the section for Questions for Steps 8 through 11. Now try http://www.wfu.edu/~yourusername/csc101lab/lab1/main.html This should work differently, showing one of the pages created in this lab. Step 11: Using the FTP application, navigate into the CSC101Lab/lab1 directory (folder) on the right-hand side of the application (on the wfu.edu computer) and change the filename main.html to index.html. Now, retry this address in your web browser: http://www.wfu.edu/~yourusername/csc101lab/lab1/ (without main.html included). You should see something different happen from what happened before (in Step 10). Record what you see as your answer to Question #9 in the lab report under the section Questions for Steps 8 through 11. At this point, make sure you have answered all four questions about Steps 8 through 11 in the Lab Report document. Have the instructor or TA check off 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.
Grading: Your lab will be graded according to the following rubric: Submitted pre-lab questions 20 points total (2.5 points 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 50 points total (2.5 points each) o <html> o <head> o <title> o <body> o <strong> or <b> to make strong (bold) text in "This text is strong." o <em> or <i> to make emphasized (italic) text in "This text is emphasized." o <p> and <br /> to separate lines o <h1>, <h2> or <h3> (headings) o <hr /> (horizontal rule) o <ol> or <ul> (lists) o <li> (list items) o <a> to make a link to page1.html with link text "Page 1" o <a> to make a link to the WFU home page with link text "Wake Forest Homepage" o <a> to make a link to a valid Web site with link text "My Favorite Website" o http://www.wfu.edu/~yourusername/csc101/lab1/ opens the correct page o The link to "Page 1" works properly o The link to "Wake Forest home page" works properly o The link to "My favorite Web page" works properly Submitted lab report questions 30 points total (3 points each)