Following these directions will put the
skeleton of a homepage up for you. Your requirement for this
assignment is to create a web site that is visually attractive, easy to
navigate, well organized, and personally and professionally
informative. Another requirement is
that you change the default settings for background, text, and link
colors. Finally, the page should not take a long time to
load. If you plan to
include pictures, place a small one on the page that the audience can
click
on to see in a large size. You can find the other criteria at Web Site
Requirements.
Type the italicized commands exactly as they appear. You will have to hold down the SHIFT and press , and . to type the left and right angle brackets < >.
Replace the generic information (ex. "place the title of your homepage here") with the specifics for your page.
1. Open Notepad (NOT Wordpad) so that you can use the mouse.
2. If you are using the workstations at UMBC, you can save files to the WWW through your S: drive and your www folder. When you don't have access to your www folder, you will have to FTP the file into that folder on the UMBC server.
3. On the top line of the document, type <html> and press ENTER.
4. Type <head> and press ENTER.
5. Type <title> MY
PAGE</title> and press ENTER. This title will appear in
the title bar at the top of the browser window. You can change
the title another time.
6. Complete the head portion of the document by typing </head> and press ENTER.
The next section of the html document is called the body and is the place for all the information you want to place on your page. You begin by choosing the background color or wallpaper and the text and link colors.
7. Type <body bgcolor = "tan" text = "#0000ff" link = "coral" vlink = "#6e6473"> and press ENTER.
8. Type <font
face = "Comic Sans MS"> and press ENTER.
9. Type <h1> My Page </h1> and press
ENTER. This title will appear at the top of your homepage. Use the header tags whenever you start a new
section. Use heading hierarchy so that tags on the same level
also have the same appearance. There are six levels of headings
with 1=largest and 6=smallest.
You may want to add an image or logo
to this title. The tags for images are <img
src="filename.gif"> Use "align=" when you want the text to
fit next to the image in a specific way: top, left, right,
center.
You can search the WWW for free images and save the files so that you can place them in your www folder. It is a good idea to create an images folder of your www folder so all your images are together and not mixed up with your text files.
10. Type <ul> to begin a bulleted list and press ENTER.
11. Type <li> <a href =
"education.html"> Education
Page </a> and
press ENTER.
12. Type <li><a href =
"job.html"> Professional Page </a> and press ENTER.
13. Type <li>
<a href = "personal.html"> Personal Page </a> and press ENTER.
14. Type </ul> and
press ENTER.
Each list item is preceded by <li>.
What follows is called an anchor tag, the command you write when you
want to link to another file from either your own account or someone
else's web site. When you link to one of your files, all you need
is the filename, sometimes called a "relative link." When you
link to someone else's site, you need the entire URL. For
instance, if you want to link to the table of contents for 393 on my
home page, you would type< a href="http://umbc7.umbc.edu/~lharris
/coursemats.htm"> Course Materials </a>.
(In the summer, the filename is "coursemats.html.")
TAG NAME
TAG DESCRIPTION
<html> </html>
the first and last tags of the
document, defines the type of document
<head> </head>
the tags that start and end the
head section of the document
<title> </title>
the name of the page. This title appears in the
title
bar at the top of the browser window.
<body bgcolor>
the start of the body portion of the document. Add the hex
code for the color you want to be the background.
<body background=
"filename.gif">use this instead of "bgcolor" when you want an image
(wallpaper) for the background of your homepage
<p>
the start of a paragraph. You do not need to use a
</p> tag to end a paragraph.
<ul> </ul>
the start and end of a list whose members are preceded by
bullets
<ol> </ol>
the start and end of a list whose members are preceded by
numbers
<li>
this tag precedes each list item
<a href = "file
name.ext">
title </a>
the anchor tag creates a link to a file in your www
folder. Ex. <a href="index.html"> The Harris Homepage
</a> is what I type to link to my homepage. This is a
relative link.
<a href= "full
URL"> title
</a>the anchor tag that creates a link to someone else's
homepage. Ex. <a href="http://www.umbc.edu"> UMBC Homepage
</a> is what you would type to link to the school's homepage.
This is an absolute link.
<h#> </h#>
heading tags. 1=largest 6=smallest size for the
heading
<img src="file
name.gif">the tag that imports a graphic. The graphic file is
stored in your WWW folder. Copy images into your folder rather
than linking to someone else's page. If the page disappears, your
image will too, and all you'll see is the broken graphic icon.
<a href ="mailto:username@gl.umbc.edu">
<cite>Username @gl.umbc.edu </cite> </a>
an e-mail tag that sends the user directly into a mail
message with your e-dress already placed in the TO field.
<table border>
</table>the start and end tags used to create a table
You may choose to continue to create your page by doing your own html coding. To learn about html, go to the site HTML Goodies where you will find tutorials on almost all facets of homepage creation.
Harris Home Page
Course Materials Page
Summer Course Materials Page