To find the instructions on how to set up your own home page on the Web: go to UVM's home page and type in the URL for "Developing your own Webpages at UVM": http://www.uvm.edu/~hag/webpub/
A simple, non-geek, HTML Tag Reference Guide resource: http://www.devx.com/projectcool/Article/19816
Also, here is a good summary of HTML you may want to check out: http://www.werbach.com/barebones/
Another popular web design resource site is Web Monkey: http://www.webmonkey.com/ (check out navigation on right)
Here's the link to the organization that
standardizes web protocols: http://www.w3.org/
Cascading Style Sheet (CSS) tutorials:
http://www.w3schools.com/css/ ,
http://www.webmonkey.com/webmonkey/reference/stylesheet_guide/
CSS quick reference guide:
http://www.w3schools.com/css/css_reference.asp
CSS Level 2 Revision 1 (CSS 2.1) Specification:
http://www.w3.org/TR/CSS21/
It is also a good idea to read about copyright issues in:
http://www.clari.net/brad/copymyths.html
BRIEF SUMMARY OF HTML STRUCTURE OF THE HTML FILE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> {this appears on the very top title bar in the browser,
not in the page itself} </title>
<style type="text/css"> </style>
</head> <body>
. . {This is the main section of the web page where you put in text, pictures, sound, video, etc.} .
</body >
</html>
QUICK LIST OF HTML TAGS: HEADINGS, BREAKS, LISTS, etc.:
Include at the top of your html file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
so the browser processes the file correctly.
Include inside the <head> section of your code
</head>:
For BACKGROUND COLOR, add this style tag to the head section:
<style type="text/css">
body {
background-color: #FFFFCC;
}
</style>
See the following page that lists the color names, RGB number values and their
hexidecimal numbers
(such as #FFFCC):
http://www.w3.org/TR/css3-color/#svg-color
For BACKGROUND FILE add this style tag to the
head section:
<style type="text/css">
body {
background-image: url("file.jpg");
}
</style>
You could combine the above two style together
into one with:
<style type="text/css">
body {
background-color: #FFFFCC;
background-image: url("file.jpg");
}
</style>
See this page for some background files you may use:
http://www.uvm.edu/~jleonard/cdae85/backs.html
(right-click on the image and Save-As)
Inside the <body> of your code you may use the following </body>:
<h1> Largest header </h1> <h6> Smallest header </h6>
<p> paragraph with surrounding space</p> <br> line break with no surrounding space
<hr> horizontal rule
<b>bold text</b> or
<strong>strongly emphasized text</strong>
<i>italic text</i> or <em>emphasized text</em>
For text color of some of your text:
<span style="color: red;">red text</span> or
<span style="color: #FF0000;">red text </span>
Try other colors
To Center some of your text or images:
<div style="text-align: center;"> Text or images
</div>
For Text Sizing:
<span style="font-size: xx-large;"> Text </span>
values are xx-small, x-small, small, medium, large, x-large, xx-large
You may also use font sizes such as 14pt, 32mm, or 2em
<ul>
<ol>
<li> This is an unordered list</li>
<li> This is an ordered list </li>
<li>
This is another list item </li>
<li> This is another list item </li>
</ul>
</ol>
<img src="file.gif" alt="short description of the image"> This is an image tag. Make sure the file.gif is in the same directory as the html file, and that permissions have been changed.
<pre> Here is some text in a text file format that you would like to be displayed as text in your web page. Preformatted text is usually rendered with whitespace intact and in a fixed-width font.</pre>
Once you have saved your .html file, upload it to your public_html directory on zoo (use SSH-FTP).
A validator that will check your html file is found here: http://validator.w3.org/
The "chmod" means "Change Mode". The next three numbers refer to the Owner, that's you (6); the group (4); and everyone else (4). The Permission numbers as follows:
Permission
Number Permission
0 No Permission at
all
1 Execute Only
2 Write Only
3 Write and execute
4 Read only
5 Read and execute
6 Read and write
7 Read, write, and
execute
By typing 644 *.* when you are in your public_html directory, you are giving yourself Read and write permission, your group and everyone else read only. This way only you can change the files in your public_html directory. If, for example you wanted to make the file MINE.HTML so that only you can see or edit a file, then:
chmod 600 MINE.HTML