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:
- Start a paintext editor (will be explained in class, or use Notepad).
- Open a new file. Save it on the
Desktop (go to Save As) as
- Copy the following header code into your page:
Add the closing
Put author information here
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
Your title goes here
html tags. Save the file.
- 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 (or Ctrl-U) to see the html source.
- 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.
- In yet another tab open the HTML 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.
- 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
The contents of your page doesn't matter - use any random text.
Here is the list of features that you need to add to your page:
- A header
- A paragraph with at least one other element (such as
dfn, etc.) included in it.
- A list (ordered or unordered) with at least two items.
- 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.
- A horizontal rule
<hr /> (note that it is a
- An image. You can add an image in one of two ways:
Make sure to add the
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
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
- A small table with text (not images).
- A <mark> tag. See
description (click on "Try it yourself" for an example).
- Experiment with
element, create your own map with at least two areas to click
on. Test it to make sure it works.
At the end of the lab
- Send your HTML files and all the images that you downloaded by
e-mail to me elenam at
morris.umn.edu and to your partner if you worked with another
Please use the subject "CSci 1001 Lab 1". If your lab is not finished,
the subject should be "CSci 1001 Lab 1 (Unfinished)".
- If you are not finished with all tasks, you may continue working
on the lab at home. In this case please submit it together with the problem
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.