Back Home

First Lab Exercise:
Creating a Web Page with HTML

First, download the Barebones Guide to HTML at http://werbach.com/barebones/. Use this as a handy reference to HTML coding for later exercises and your final project. Then:

  • Create a folder for all your Web exercises and the final Web project.
    • Create subfolders, one for your exercises and one for the documents you will include on your final Web site.
    • Save your lab exercises, including this one, as you will use them more than once.

Create a Web page

  • In Windows,
    • Open Microsoft Note Pad (Programs: Accessories) and write the text below, saving it as a text-only or plain text document with an .htm extension in the title ( such as yourname.htm).
  • In Macs,
    • Save this text as text only with an .html extension in the title (yourname.html), or compose it in Simple Text.
      • This Webpage is saved as labexercise1.htm
  • Type this (substituting your name where appropriate):

    <html>
    <!--Resume for (Your Name)'s home page. Composed by (Your Name). -->
    <head>
    <title> Resume for (Your Name)</title>
    </head>
    <body bgcolor="#FFFFFF">
    <h2 align="center">Your Name</h2>
    <p>The rest of the document goes here. Notice that you have changed the background color from default gray to white. See the back of your Non-Designer's Web Design book for codes for browser-safe colors.</p>

    <p>Paragraph codes create a double space between paragraphs</p>

    But maybe you don't want a double space.<br>
    Then use the break code at the end of a line when you want the text to start on the next line.<br>
    <p>You can <b>bold</b> and <i>italicize</i> words and much more.</p>

    <p>Congratulations! You have created your (first?) web page.</p>
    </body>
    </html>

  • When you create an HTML document, test it with your browser.
    • Start Netscape or Explorer and use "open file" under the "file" menu.
      • On a Mac, you can drag the icon of the document to the browser icon and both documents open at once.
    • Keep both programs -- Notepad and the browser -- open side by side.
    • When you save your work on the HTML file, use reload on Netscape, refresh on Explorer to update as you go and see the results of your coding.
    • Compare your results with this.

  • Now recreate the document in Dreamweaver. Do this with all the Web exercises so that you will be comfortable with the program when it comes time to do your final project.

Back to top.

Back to Projects Index

Back to Schedule