E115 Home-page Project
By: Jason Schwarz (jason@lothlorien.net)
Version 1.0
Account preparation
-------------------
Before we actually begin producing your home page, you must set
up your Unity account to allow others to access the page, and you
must determine the address of the material which you are about to
serve. In this course we are going to place the document which
you produce, and all of its parts in a subdirectory contained within
your home directory. The name of this subdirectory is going to be
"www".
First you must make sure you must create the subdirectory. To
do this use the following command while in your home directory:
mkdir www
This command makes the directory named "www". Now you must give
the outside world access to both your home directory and the www
directory. We use the subdirectory so that others can not read
the material contained within your home directory (such as maple
assignments, papers, etc). The two commands below give anybody in
the world the ability to list the names of the files in your home
directory, and the ability to read any file placed in your www
subdirectory. Type in the following commands while in your home
directory:
fs sa . system:anyuser l
fs sa www system:anyuser rl
Now your account is set up to allow you to serve material on the
World Wide Web. Next you must determine your URL. The URL is the
Uniform Resource Locator, or the address of your web pages. On
Unity the URL is as follows:
http://www4.ncsu.edu/~LOGIN
where LOGIN is replaced with your login ID. For example
my login ID is jjschwar, so the URL to my material is:
http://www4.ncsu.edu/~jjschwar
Now all that is left is to develop the material which you wish to
place on the world wide web. Remember to place all of the material
and pictures in the www subdirectory.
Introduction to HTML
--------------------
HTML files are actually just text files, created with a list of commands,
which tell the web browser what to show to the user. For this project
we will create a single page named index.html in your ~/www directory.
You will choose the content of the page yourself, but some recommendations
include a page about yourself telling about you, your hobbies, and maybe
a few links to place on the Web that interest you. Other idea include
a page about a favorite hobby or pastime. Again, this is up to you, but
now is the time to choose what to do.
First you should change into your www subdirectory. Next pick a text
editor you like (crisp, ted, nedit, vi or even ed...whichever you prefer)
and start it up. You will need to create a text file named index.html
to hold the contents of your page. With crisp or nedit you can create
this file when you choose "Save As", but typing in the name of the file
as index.html.
The Header
----------
First we will start with the header of the file, to give you an
idea of what HTML is like. Examine the following short example
of the header, and then the descriptions below. After you feel
comfortable with the description create a header in your index.html
file.
Example:
Jason's Web Page
(End of example)
The text contained in the "<" and ">" is called a TAG. These tags
are instructions to tell the web browser what to do, and do not actually
appear in the document. The tags with the "/" mean end-of-tag. For
example "" starts the title of the document and "" ends
the title. Please notice that most tags have an ending tag. The
"" tag doesn't appear here, because it is only used at the
end of the document. The tags are NOT case sensitive, so you can type
"" or "", and the browser will treat them the same.
Go ahead and change the text between the TITLE tags to what you want
to call your web page, and enter this code into your index.html file.
The Body
--------
The body is where the bulk of your document goes. This is where most
of your work will be. Again, I have included a simple example with
some text and the most commonly used tags for you to look at. Below
the example is the explanation of the tags. Please notice that the
"
" tag does not have a "" equivalent, because it stands for
horizontal rule (a horizontal line across the page).
This material will follow right below the header in the index.html file.
EXAMPLE:
Jason's Home Page
This is an example paragraph with some neat text tricks in it.
First we make our text bold with the B tag. Next we add italics
with the I tag. Please note we haven't stopped being bold until we
use the /B tag, like this. Now we just have italics. Lets use
the /I to turn that off now. We end the paragraph with /P.
Now create another paragraph. This paragraph is going to have a
link in to my web site which
is enclosed in the A and /A tags. I have included a picture below
this paragraph with the IMG SRC tag.
(End of Example)
First I used the BODY tag to start the document. You will notice I
put some options in with the body tag. The first option is BGCOLOR
and is the color of my background. The second option is the color
of the TEXT. The last two determine the color of the links and
the visited links respectively. In this case any text which is a
link to another page is blue if it has never been visited by the
person, and red if they have already visited it. Another option
not shown here is the BACKGROUND="picture.jpg" option. This creates
a wallpaper background with the image you selected.
Please notice the tag. This tag doesn't
have a associated with it. It just displays the file
named picture.jpg from your ~/www directory in the document where
the tag appears. There are two type of pictures which can be
shown with this tag; those that end with .gif and those which end
with .jpg. Please ask your lab instructor if you have a problem
determining if a picture is one of these formats. You can acquire
pictures by right clicking on them in Netscape, and selecting to
save them.
Two tags you see are the and
tags. P stands
for paragraph, and contains a body of text. H1 stands for header
size 1. This changes the text to the largest size print available.
Please notice the ALIGN=CENTER option, which centers all of the
large text contained within the H1 tag. The H1 tag is used to
create the first header. To create addition "sub-headers" you
could use the
tag. The tag and the
tag to close
it, will operate properly only if you already have a tag
preceding it...for example you can use the following group:
Header
sub-header
sub-sub-header
but you should use this
big text
small text
medium text
The final set of formatting tags are the and , which stand
for bold and italics respectively. Please notice that in the example
I made text both bold and italic. You must close each one when you
wish to return to normal text with the or ending.
Links are thing that sets HTML apart from a regular document. You
can contain and picture or text with-in the and tags to
create a link. stands for anchor in this case. In my example
is created an anchor with HREF="http://www.lothlorien.net", which is
the URL I want this link to go to. The following example will create
a link, with a picture contained as the point for the user to click on.
Please notice that everything contained within the and area
is a link. If the user clicks on the link, it will take them to
http://www.lothlorien.net.
The tag tells the browser that the document of done.
Your turn
---------
Now it is your turn to create something using the tags you have learned
above. The requirements for this project include creating a single page.
You should pick either a background color (BGCOLOR option) or a background
picture (BACKGROUND option), and a color for your text and links. You
should also create 2-4 paragraphs of text about a topic that interest
you, or about yourself. This text should be preceded by a title (H1 tag)
and should contain bold (B tag) and italics (I tag) to emphasize important
points. You should include 4 links in the paragraphs to other material
which relates to your topic. (A search engine will help you find other
material about your topic.) You should also have at least three pictures,
one of which must be a link to someplace else.
The breakdown of the grading is shown on the gradesheet for this project.
Remember: You must print out a copy of your source code and staple it to your
gradesheet. Those are the only two things you must turn in - but, in order
to get credit for this project, your homepage must be able to be accessed by
your Lab Instructor.
****************************Important Notice*********************************
The goal of this project is for you to learn elementary HTML and for you to
use a text editor to create your source code. The use of any sort of HTML
generator for ANY portion of your homepage will be considered CHEATING. If you
are unsure of what constitutes cheating - contact either your Lab Instructor
or an Administrator.
******************************************************************************
Please talk to your course instructor if you have problems with any
of the material contained within this text, or have problems choosing
a topic. If you discover any errors, inconsistencies, or problems with
this document, please e-mail jason@lothlorien.net with information about
the problem.
Good Luck!