CSci 1001 Lab 1
In this lab you will write a simple web page. Mor specifically, you
need to do the following:
- Start jEdit (go to
Start -> All Programs -> jEdit4.2
, and choose jEdit)
or NotePad (Start -> All Programs -> Accessories -> NotePad
)
- Open a new file. Save it on
Desktop (go to Save As) as
mypage.html
- 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.
- 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.
- 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 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.
- 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:
- A header
- A paragraph with at least one element (such as
cite
,
dfn
, etc.) included in it.
- A list with at least two items.
- A link to any other web site (UMM web site or weather.com is
fine). Make sure that the link works.
- A horizontal rule
<hr>
- 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.
- Correction, Sept 23: You don't have to do this part: A table 2-by-2 elements. Again, use the sample web page as a
guide. Put some text in the table cells, otherwise the table may not
show up. Do not include images in the table. you don't have to set the
border.
At the end of the lab
- Send your html file by e-mail to me elenam at
morris.umn.edu and to yourself. Please attach images if you downloaded
them to the Desktop.
- If you are not finished with all tasks, you may continue working
on the lab at home. In this case please submit it with the problem
set.
This page is a part of CSci 1001
course web site.