LIS 390W1A - Lab 3: Downloading and Uploading an HTML File

Assignment

In this lab we are going to explore the relationship between your computer and "the web". In particular, this lab is designed to give you some hands-on experience with the client-server model.

  1. Start by opening your browser and going to some web page of your choice. Please select something more interesting than the Google search page. Keep this browser window or tab open for the duration of the lab (or at least know how to re-open the page).
  2. Answer the following question:

    • Question A: What is the URL for the page (in the address bar of your browser)?
  3. In the file menu, select "Save page as" and save it to your local machine (if you doing this step in class, save it to your H: drive).

    1. If need be, click the little down arrow next to the file path so that you can see your directory structure.
    2. Click your username/NetID (e.g., ifloyd2) in the left side of the window
    3. Click the folder that you created in Lab 1 (your first name).
    4. Click the "Save" button.
  4. Now, open up the HTML file that you just downloaded in your web browser.
  5. Answer the following questions:

    • Question B: What is the URL for the page (in the address bar of your browser)?
    • Question C: Does this page look the same as the original? What is different/same?
    • Question D: Is this page 'on the web'? Why or why not?
    • Question E: Can your neighbor view the page you downloaded? Why or why not?
  6. Now, go back to the original page in your browser and right-click on it and select "view source"

    • Hint: if you're not sure which page is the original page, look at the URL in the address bar of your web browser.
  7. Copy the HTML source code and open a text editor
  8. Paste the HTML source code into the file and save it on your H: drive as "index.html"

    1. If need be, click the little down arrow next to the file path so that you can see your directory structure.
    2. Click your username/NetID (e.g., ifloyd2) in the left side of the window
    3. Click the folder that you created in Lab 1 (your first name).
    4. Click the "Save" button.
  9. Upload this file to your GSLIS I: drive via WebDAV.
  10. Now go to http://courseweb.lis.illinois.edu/~NetID/index.html and view the page you uploaded. Remember to substitute your netid for NetID in the URL.
  11. Answer the following questions:

    • Question F: What is the URL for the page (in the address bar of your browser)?
    • Question G: Does this page look the same as the original? What is different? What is the same?
    • Question H: Is this page 'on the web'? Why or why not?
    • Question I: Can your neighbor view this page? Why or why not?
  12. Create a new HTML page with both the questions and the answers. Be sure the HTML file has the following features:

    • A DOCTYPE declaration:

      <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      				
    • For your html tag, use the following syntax:

      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      				
    • A header (<head>) section
    • The following meta tag in the <head> section:

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
      				
    • A <title> in the <head> section.
    • One or more headers (e.g.: <h1>, <h2>, ... <h6>) in the <body> section.
    • An ordered or an unordered list in the <body> section.

      • Unordered List:

        <ul>
            <li>text</li>
            <li>text</li>
        </ul>
        					
      • Ordered List:

        <ol>
            <li>text</li>
            <li>text</li>
        </ol>
        					
        					

      Remember, the lists can be nested within one another:

      <ul>
          <li>text</li>
          <li>text
              <ol>
                  <li>text</li>
                  <li>text</li>
              </ol></li>
          <li>text</li>
      </ul>
      					

      It may be useful to use indentation to keep track of what level you are on. That will certainly make it easier to read the code.

    • Other features may be necessary, even though they are not mentioned here (e.g.: <body>)
    • View the source of this lab page if you want some sample code to work off of.

Submission

To submit this assignment upload to your GSLIS I: drive and then send me a URL.

Grading Criteria

Out of 30 points total.

  • Answer to each question A-I: 2 points (18 points total)
  • Used each required feature in your HTML file: 1 point each (7 points total)
  • Correct use of HTML (i.e., closed all your tags, etc.): 5 points.