First Build-Your-Own-Homepage Class

Build Your Own Web Page Short Course--highly useful links for web weavers, compiled by University Computing Services
Notes from Kathryn Sampson, a student in this class:
These notes were taken the second time I took the same class. Some of the notes reflect insights I have developed as I have made mistakes building my web page. I have observed that the mistakes I have made have increased my comprehension, and the process of solving the problems I have created has been a pleasurable learning experience. Building a web page gives you the unique opportunity to get immediate feedback. When your published web site does not look like you expect, you have a great opportunity to engage in the scientific method of generating hypotheses to solve a real problem that you really want to solve. Then, applying the "html" knowledge you have developed from these two homepage class summaries, you should be able to trouble shoot, fix the glitches, and then get more immediate feedback when you check your web site on Netscape
CAUTION: once you engage in the fun side of solving your "problems," you will find that working with your web site becomes more compelling than other responsibilities you may have already committed to. Treat it like leisure reading that you need to work into your schedule of other commitments, and you'll enjoy the full pleasure of the process. Don't expect to know how the book ends until you have helped develop the plot and characters. Be patient, and do not expect to have a fully-developed web page the first time you sit down to build it. Also, wait to try the more advanced "html tecniques" until after you have mastered the fundamental onces that are covered in this first class.
After the first class, you should know the following: (1) how to access you comp account and activate the "pico" program for building a web page on-line; (2) how to "set permissions" for files you have built; (3) how to set up a clickable reference to your email address (a "mailto:);(4) how to set up a clickable reference to other web pages that you wish to reference on your own web site ("anchor tags" "paired tags" and "url's"); (5) how to follow University web page rules by including the University of Arkansas disclaimer on any web page that you set up on your comp account; and (6) how to create hard returns and graphic lines on your web page -- "unpaired tags." This class can give you all the information to get a web page "up and running." The fancier material, about how to change colors and size and appearance, and how to add graphics to your web page, is discussed in the notes for the second class.

The Class Instructor

Darla Kay Sanders-Weatherford
dksander@comp.uark.edu
575-2901
575-2905

HANDOUTS

1.) Intro to HTML handout;-- a photocopy of the material in this url:
http://www.uark.edu/campus/compserv/shortcrs/handouts/HTML/html12.html
2.)HTML for Info Providers handout -- (relevant to someone who will publish a web site as part of his or her University job)
3.) Copyright Fundamentals -- (this link is to a Copyright website, a portion of which was provided as a handout; the handout focused on (a) what copyright protects and (b) the duration of copyright protection.)

Hands-on Work

COMP ACCOUNT ready to go? (Can you access your comp e-mail? If so, your comp account is ready to go. If not, call 575-2905 and ask the computing services folks to get you squared away.)

First, learn what a "url" is and what is behind the screen you see when you get into someone's web page.

Open up Netscape on your computer. Move to the University's home page. It's at: http://www.uark.edu (but you can just click on the "University's home page" underlined link to get to it).
www.uark.edu is one machine where official university pages appear.
comp.uark.edu is the machine where your personal home page will be after you set it up.
Your web page will include a symbol that looks like this: ~ This symbol is called a "tilde," a symbol that makes your "url" easier to remember because you do not have to type in all sorts of details about the location of your web site in the comp.uark.edu machine.
When my comp account web site became operational, my url became: http://comp.uark.edu/~ksampson
The end of your url will look like mine, only instead of ksampson, you will have your comp password that you use everytime you access your PINE e-mail.
REVIEW:
www.uark.edu one machine
comp.uark.edu - the machine where personal page is
~ tilde
Click here on the University's home page. You can learn a lot about a web site by looking at this home page. Look at the top of the Netscape screen, press the button called "View" and a menu will drop down. Click on "page source" and you will see the "html tags" the person who built this web page used to make the images that appear on the screen.
Because the University home page is pretty complicated, you can take a look at something quite a bit simpler. So go to Web Practice
Click on VIEW and then PAGE SOURCE to see the html codes I used to build my page.

After reading these class notes, you will have been exposed to the thinking behind several of the "html tags" I use on this page. You will learn the other tags by reading the second class notes. Html tags are enclosed in these symbols: <>; these symbols <> will make the html tags "do" what they are designed to do, and you won't be able to see them on the published web page itself, but you will be able to see them in "page source" and when you work with your html file in your comp account. (You can see the <> symbols here and now, because I have used a different code to make them visible.) The html tags you should know about after reading these first class notes are:
<html> -- tells the browser that it's looking at an html file
<head> </head> -- contains information about your web site, usually only the title. It has other functions that we don't need right now.
<title> </title> -- contains the title to your web site; this is the information someone sees when they "bookmark" your site; it is also the information the search engines use when they are looking for sites that focus on the type of information that you announce you offer in your website through your title.
<body>--after this tag, you begin seeing the information on the actual web page itself.
NOTE: the <html>, <head>, <title>, and <body> tags are "nested" and need to appear in exactly this order when you place them on your web page.

</body>
</html>
Heres the first CONTENT that will appear on your web page.
<a href="mailto:ksampson@comp.uark.edu> </a> -- sets up your clickable e-mail address
<a href="http://www.uark.edu.">University of Arkansas </a> -- sets up a link to someone else's web page.
"These materials are not endorsed, approved, sponsored, or provided by or on behalf of the University of Arkansas, Fayetteville."
 (creates two hard returns between items)
  (creates one hard return between items)
<hr> (creates a horizontal rule on your page)
HERE'S HOW YOU CLOSE YOUR WEB PAGE HTML FILE: </body> -- announces that the body of the text of the web page has ended; this tag needs to appear second to last at the bottom of every web page file you create. </html> -- this is the very last tag that must appear at the end of your web page file.
Notice the tags that have a "/" in them appear after "paired" previous tags that do not have a "/" in them. Together, these tags are called "paired tags." The tag without the "/" gets the function started; the tag with the "/" ends the function. Three of the tags on the preceding list are "unpaired tags." They don't require closure with a /. These "unpaired tags" are , and <hr>, all tags that produce hard-return or line-graphic breaks on the web page.

Two Methods for Building a Web Page

You can publish a personal web page in one of two ways:
1) By using a program on your word processor or by using web page software found on your web browser (e.g., Netscape). When you use this method, you build your web page "locally" on your computer's hard drive, by using "html text editors" like "Composer," "Notepad," "Workpad," etc. Once it's built this way, no one can see it on the web until you (a) save it as "ascii" text or otherwise "publish" it as a web document, and (b) "upload" it to your web server account, using an FTP program (discussed in the second class when covering graphics).
2) By getting directly into your comp account and publishing your web page "on line." Using this method, as soon as you save your webpage to your comp account, it is published to the web and, theoretically, the world can read it. Because you are logged into your comp account the entire time you work with your web page via this method, if you have time limits for use of your comp account, you will be using them up as you work on your web page. These course notes discuss the second method for building a web page. Thus, you will be "published on-line" as soon as you save your files to your comp account!

Hands-On One (UNIX Commands for Reviewing Comp Files)
The following are UNIX commands that navigate you through the comp system. They are "case sensitive," which means that you must capitalize, lower-case, and space -- exactly as the commands appear on this page. If you deviate, the commands will not work. This section is a summary of what you would be exposed to in the build-your-own webpage class, the notes for which follow. You may be able to navigate in the system using these shorthand versions of the notes, and these notes will provide you good reminders once you learn to manage the system.

Log into your comp account, using your user id and password.
comp% pwd -- shows you your "path" in the comp.uark.edu "machine." My "path" looks like this: /export/home/LAWD/ksampson
The last section of the path is exactly the same as my user id "ksampson"
When the web page becomes operational the tilde ("~") will substitute for /export/home/LAWD. Thus, eventually, my "url" for my web site became: http://comp.uark.edu/~ksampson
comp% ls -- give you a shorthand version of the files and directories that are contained in your comp account.
comp% ls -al -- tells you what titles you have given your files and directories and what "permissions" you have set for them.
comp% exit -- exit now so you can become familiar with the steps you need to take when you add on a web page file directory.

Hands-On Two (Start-up UNIX Commands)
THE FOLLOWING COMMANDS REFLECT A ONE-TIME PROCESS; YOU WILL NOT REPEAT THIS PARTICULAR PROCESS WHEN YOU EDIT YOUR WEB PAGE

Enter your comp account with your id and password.
comp% mkdir public_html -- this command makes a directory in which you place all the files that you want to use on your web page.
comp% chmod a+rx public_html -- this command adds "read" and execute" functions to your public_html directory; stated another way, this command "sets the permissions" for your directory. Because you wish to display it on your web page, and you cannot do so unless you tell the comp system that it's "okay" to do so, you need to "set permissions" every time you create a new file or graphic for your web page. NOTE: you will repeat the particular chmod a+rx command to "set permissions" for every file you create that you wish to use on your web page.
comp% chmod a+x $HOME -- this command allows the web browsers to "get in" and "execute" all the files that you allow it to in your comp account.
comp% exit -- exit now so you can see the steps you will follow to create a file within your public_html directory.

Hands-On Three (UNIX Commands to Create Files)
COMMANDS YOU WILL USE TO CREATE FILES WITHIN YOUR PUBLIC_HTML DIRECTORY

Enter your comp account with your id and password.
comp% cd public_html
comp% pico -- this command opens the "pico" program that you use to create your webpage on-line; it's something like a word processing program, that operates a lot like the old dos systems do (with commands rather than with clickable icons).
ctrl-o -- this command happens when you press "control" and "o" and it allows you to save what you have done with your pico program. Right now, all you need to do is to save the name you provide to this file, which you will be prompted to name after you hit ctrl-o.
Name your first web page file: index.html
NOTE: all of your text files will be html files; that's why .html appears at the end of the file name for a text file.
ctrl-x -- this command happens when you press "control" and "x" and it allows you to exit the pico program.
comp% chmod a+rx index.html -- this command "sets the permissions" for the index.html file you just created.
comp% ls -al -- this command allows you to check if your "permissions" for read "r" and execute "x" are set for your index.html file.
comp% exit -- this command allows you to exit your comp account. Exiting is important now becaues it allows you to see the steps that you will take every time you want to get in to edit your web page file in the future. You will also want to exit your comp account when you are not using it, when you are in a public computer lab.

Hands-On Four (UNIX commands to enter and exit Pico System; HTML tags to use in editing your web page file)

THE COMMANDS YOU WILL USE TO EDIT YOUR WEB PAGE FILE A PROCESS YOU WILL REPEAT SEVERAL TIMES

Enter your comp account with your id and password.
comp% cd public_html -- this command will take you into your public_html directory.
comp% pico index.html -- this command will take you, simultaneously, into both the pico program and into the main web page file that you just created.
add your html tags (see details below) but to give you something to check when you pull up your web site, add your e-mail address, a clickable link to the University of Arkansas home page, and a statement of the University of Arkansas disclaimer for personal home pages by typing in the following information. When the information is contained in an html tag <>, be sure to place the tags in exactly the order they appear on this page:
<html>
<head>
<title>
Web Page Practice
</title>
</head>
<body> Web Page Practice
 <a href="mailto:ksampson@comp.uark.edu"> (only use your own e-mail address where mine shows up)
e-mail me at: ksampson@comp.uark.edu
</a> 
<a href="http://www.uark.edu"> University of Arkansas Information
</a> 
These materials are not endorsed, approved, sponsored, or provided by or on behalf of the University of Arkansas, Fayetteville.
</body>
</html>
I, and the web page course notes, will explain what you just did soon. However, now you should be able to see your web site on netscape, after you:

ctrl-o to save what you just added, and
ctrl-x to exit the pico program
comp% exit to exit your comp account
Pull up Netscape to check your progress on your web site. Your "url" will be: http://comp.uark.edu/~ksampson (instead of ksampson, you will use your own comp user after the ~ (tilde); you will be providing your own "url" to get into your web page)

If you followed the preceding steps exactly, your web page should look like this: Webpage Practice

Web Page Class Notes Discussing the Steps Outlined Above

Sign on to your comp account. [ksampson;*******] -- like you do when you sign on to your Pine e-mail account. Except, once you get in, do not type "pine"
Before you actually start building your web page, you need to understand a little bit about how to navigage in the Comp UNIX system. At the comp% prompt you can obtain information about your files by using UNIX commands that lead you to information about what is contained in your comp files.
FIRST UNIX COMMAND:
comp% pwd
Hit "enter" and you'll see your path showing you, mostly where you are. I saw: /export/home7/LAWD/ksampson this is my "path" in comp.
ksampson will be part of my "url" the address or "uniform resource locator"
www.uark.edu is a url, also.
Here's a "url" for this short course: http://www.uark.edu//campus/compserv/shortcrs
SECOND UNIX command:
comp% ls -al
press "enter" and find out a lot more about what's in your comp account. Do not delete the files that have a dot in them! You will want to use this command later, when (1) you have some aborted file transfers, to delete "garbage" files, (2) you have problems with graphics showing up on your web site and you want to check your directory to see if you have "set your permissions" for the graphic file, and (3) for some other uses that I haven't had a reason to find out about yet!
"Setting Permissions"
The "permissions" for each one of your files show up when you check ls -al at the comp% prompt.
comp% ls-al

drwxrwxrwxrwx
d=directory
rwx=read, write,
read -- you want to let others read your file
write -- you want to write to your file, but you don't want others to do so
x="execute" a permission needed for "server side includes," high tech web page creations that you will learn in the intermediate html class. "Server side includes" can: tell you what time it is on your web page, etc. To get these hi-tech items to work, you have to have the "execute permissions" or "x" set for any file in which you may want to use them in the future. Thus, as a matter of practice, the "x" permission is set, even though you won't need it for some files. The biggest thing you want to do is let people read or "r" your web pages; so you need to set permissions for them to do so.
rwx = a group
d rwx rwx rwx
 user group other (everyone except the user and the group)
When we set permissions, we use "all" to include everyone.
Permissions, setting them.
comp% mkdir public_html
SET PERMISSIONS
chmod (change mode) (set permissions for public_html)
comp% chmod a+rx public_html
a=all
r=read
x=execute
+ add (you can use a minus to take away permissions)
comp% chmod a+x $HOME helps the browsers get in and read the files
You need to set permissions for every file you make
comp% chmod a+rx file name
Some parenthetical comments about how to navigate in the comp-UNIX system:
comp% cd .. (back out) at comp%
comp% cp (copy) cp oldfile newfile
comp% mv (move) mv filename public_html/----/----/
(copy files and delete the extra to do cut and pasting)
comp% pwd get your bearings and tell where you're going.
"comp% pico" PINE uses pico, uses similar commands
ctrl-o (saves a file in Pico)
ctrl-a (takes you to the beginning of a line)
ctrl-e (takes you to the end of a line)
ctrl-w (works as a "find" function; means "where is?")

comp% cd public_html
comp% pico index.html

CLASS NOTES REGARDING THE HTML TAGS THAT PLACE INFORMATION ON YOUR WEB PAGE

HTML tags
<tag> (anything in <> will be invisible; will not show up when you load
your page.
<html>-- the very first html tag; tells the browser that it will be reading an
html file. It's a paired tag; requires closing later.
Think about editing this file later. Tabbing, etc., makes it a lot easier to
edit later.
Html tags are not case sensitive (it doesn't matter whether you capitalize or not)
UNIX commands, however, are case sensitive (you must scrupulously follow what the code is; otherwise you won't be able to navigate in the system)
Two parts to html file: head and the body.
<html>
<head><title> the information that shows up across the top of the web page; it's what shows up when you bookmark a page.
Call your page what you want to call it: e.g."Parenthetical Comments" or "My Page"
</title> the slash ends a paired tag.
</head>
<body> the material that will show up on the actual web page. Search engines read the head/title tags; works as an indexing system; so choose your head/title tage to allow people who are interested in the content of your web site to be able to find it using a search engine.

This University of Arkansas disclaimer must appear on all personal comp.uark.edu web pages:
"These materials are not endorsed, approved, sponsored, or provided by or on behalf of the University of Arkansas, Fayetteville."

mailto: place your e-mail address on your web page.
<body>
disclaimer
mailto: a link that you can click on (finger pointer gives you a link). A mailto pulls up the netscape mailing program.
ANCHOR TAGS
<a href (hypertext reference) ="mailto:ksampson@comp.uark.edu">
<a = anchor
MAILTO TAGS
<a href="mailto:ksampson@comp.uark.edu">
Watch out; a quote that doesn't have a match can cause problems with publishing your web page.
Add ANCHOR TEXT to make sure that the web reader can click on something to access your anchor tag.;
ksampson@comp.uark.edu
<a href="mailto:ksampson@comp.uark.edu">ksampson@comp.uark.edu
</a> end your anchor tag.
<a href="http://comp.uark.edu/~ksampson>Home Page</a>

THESE ARE NOT PAIRED TAGS:
=paragraph (works like two hard returns)(doublespace)
<br>=break (returns and starts on the next line; one hard return)
<hr>=horizontal rule (3-d line going across the page)
 has width and alignment options, also (list of options in computing services
 home page)
A "link" is created by a paired tag.
LINKS: a link is much like a MAILTO
(When you describe someone else's link in the anchor text you provide for the link, it's good protocol to track with the title bar that people provide to their own home pages.
<a href="http://www.uark.edu">University of Arkansas Information </a>

<html>
<head><title>Title</title></head>
<body>
HERE'S WHERE THE EDITING TAKES PLACE. Here's where you will add your "html tags" that add substance to your homepage.

</body>
</html>
When you edit your file, you work between the two body tags.
The </body> and </html> tags should show up at the very bottom of the file.

Save your files, the edits in your files, often.
Ctrl-0 (file name to write: index.html (can name the file now if you just typed in "pico," without a file name, to enter the pico program)
Press enter to save the file.
Ctrl-0 also allows you to save your file name, if you wish to do so, at the ctrl-0 command.
Ctrl-X - when you exit out of Pico, if you have not saved, you will have the opportunity to save here after entering ctrl-x.
Y = yes to save
enter to accept the file name or change it.

If you're still working in the file and you're not ready to exit, save your file anyway with Ctrl-0

CTRL-O often.
Set permissions on every new file you add to your directory of webpage files. You set the permissions after you exit out of the Pico program and get the comp% prompt.
comp% chmod a+rx public.html
Enter; and you have set your permissions.
CTRL-X - move out of pico
EXIT out of comp
check for your web site by typing your url into the address section of the netscape screen: http://comp.uark.edu/~youruserid
ow you are ready to proceed to part two of the build-your-own-web-page class. You may find a printed copy of "Hands-On Three" and "Hands-On Four" helpful as you add files and as you edit files in the future. If you're ready to proceed to learn more html tags, return to Sampson Web Page Materials for the second installment from the build-your-own-webpage class.