CSci 1001 Lab 1

Creating a simple web page

In this lab you will write a simple web page. Mor specifically, you need to do the following:

  1. Start jEdit (go to Start -> All Programs -> jEdit4.2, and choose jEdit)
  2. Open a new file. Save it on the Desktop (go to Save As) as mypage.html
  3. Copy the following header code into your page:
    
    <!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <!--
    Put author information here
    -->
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>
    
    Your title goes here
    </title>
    </head>
    <body>
    
    Add the closing body and html tags. Save the file.
  4. Open this page in another browser tab (right-click on the link and then choose "Open Link in New Tab") and use it as an example. Go to View -> Page Source to see the html source.
  5. In the browser window open another tab, go to File -> Open File, navigate to Desktop, and open mypage.html. It doesn't have anything in it yet, but it should show the title.
  6. In yet another tab open the XHTML validator. Go to "validate by File uploading" and browse to your file. If there are any errors, please correct them, save the file and revalidate.
  7. One by one add the features listed below to your page. Save the file after each change, reload it in the browser (click the cicrle arrow in the browser toolbar) and check it using the validator. When you are adding HTML elements, make sure to add the opening and closing tags first, and then put the text in between them.
    The contents of your page doesn't matter - add any random text.
    Here is the list of features that you need to add to your page:
    1. A header
    2. A paragraph with at least one other element (such as cite, dfn, etc.) included in it.
    3. A list with at least two items.
    4. A link to any other web site (UMM web site or weather.com is fine). Click on the link to make sure that it works.
    5. A horizontal rule <hr /> (note that it is a self-closing tag)
    6. An image. You can add an image in one of two ways:
      • Copy an image from any web page: right-click on it, choose "Save Image as", and save it on Desktop. Then include it into the page using <img> tag. Use the example web page as a sample (however, you don't have the images folder, so include just the file name, not the folder name).
      • Use a link to an image on another web site. To do this, right-click on the image and choose "Copy Image Location". Paste the location as the value of the src attribute in the img tag
      Make sure to add the alt attribute.

Adding CSS features

For this part of the lab you need to add a CSS file to set simple properties of some elements in your web page. Use this page and this CSS file as an example.

Your task is as follows:

At the end of the lab


This page is a part of CSci 1001 course web site.

The views and opinions expressed in this page are strictly those of the page author. The contents of this page have not been reviewed or approved by the University of Minnesota.