Web Publishing I Exercise 1 University of Oregon Libraries

Web Publishing I
Exercise 1

Your First Web Page

  1. Open a web browser, e.g., Internet Explorer.
  2. Open a text editor.
    • Windows users: try Notepad; from Start menu, select "Run..." then type "notepad" in the box and click "OK"
    • Mac users: SimpleText works well; use "Find" to locate it
  3. Paste the following text into your text editor:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    
    <head>
    
       <title>My First Web Page</title>
    
    </head>
    
    
    <body>
    
    My First Web Page
    
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    
    
    Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper
    
    suscipit lobortis nisl ut aliquip ex ea commodo consequat:
    
    
    * duis autem veleum iriure
    
    * dolor in hendrerit in vulputate velit
    
    * esse molestie consequat
    
    * vel willum
    
    
    Lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
    
    odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    
    te feugait nulla facilisi. 
    
    </body>
    
    </html>

    Look at the text carefully; even though most of it is nonsense, can you determine the function of each block of text (e.g., heading, paragraph, etc.)?

  4. Save your file as index.html in the My Documents folder, which is located on the desktop, or in the C:Guest folder. On your own computer at home, you could select any folder (directory) you wanted.
  5. In the web browser, open the file you just saved. (Hint: look under the File menu for an option such as "Open Page..." or "Open..." then browse your computer's hard drive to find your file.
    • Note that the address (URL) in the location bar of your browser begins with file://. This tells you that the web browser is reading the page from your local computer, rather than a web server.
    • As you look at the page, notice what has happened to the blocks of text you created in your text editor. Do you know why this happened?
  6. Add the appropriate HTML code to your text file to format each text block according to its function, using the Heading, Paragraph, and Unordered List elements (refer to the HTML Language Summary for guidance). Here's one possible markup solution. Save your text file, and click the Reload or Refresh button in your browser window to see the changes.

Congratulations – you're done! Now return to the workshop outline.

Created by not on Jun 18, 2012 Last updated Jun 28, 2012