The miscinfo page | Spookware (cg2) index
2001.11.26
So, you've decided you want a personal homepage, but don't know where to start? Well, this here page should get you started. It is not a complete reference to HTML, so if you need to do anything more complicated, you should go see the Web Design Group.
First off, you'll need to have a place to put your pages. Some free web hosting sites include Topcities, Geocities, Tripod, and Angelfire. I would reccomend using tripod, since they'll give you 50 megabytes of space, and provide support for custom CGI programs if you ever decide you want that. Geocities used to be decent, but lately they decided to not support ad banners and instead stick some super-annoying javascript on every page, causing the 'ad square'. I can't seem to log in to my Topcities account, and I don't know how long Angelfire is going to be around. (Topcities looks like they may be going out of business, or already have... I'm not sure. I always had trouble logging in anyway)
Once you have some pages and some webspace
to put them on, you can, upload your pages to the site. To do this,
you can use FTP, or File Transfer Protocol. Most machines should have
an FTP client on them. At the command prompt, go to the directory
holding your pages, and type ftp <sitename>, where
sitename is something like
ftp.tripod.com. Once you have logged in using your
username and password, you should then be able to type put
<filename>, and that file will be transferred to your
website. Usually you will need a page called index.html
or index.html if you want people to be able to access
your site without putting the page name at the end of the URL. This
way you could access the site using something like
http://foob.tripod.com/, instead of
http://foob.tripod.com/main.html. You can change
directories on the remote server by typeing cd <directory
name>, and locally using lcd. You can usually
also type ? for a listing of commands. If you are
uploading a non-text file, (like an image or a zip), you will need to
be in binary mode. To do that, just type binary. To get
back to ASCII mode, just type ascii. The difference
between ASCII mode and IMAGE (binary) mode is that if you use ASCII,
newlines will be converted to the correct sequence of characters
depending on where they are going (DOS boxen use "\r\n",
I think pre-X macs use "\r", and UNIX uses "\n"). In general,
this doesn't matter, since HTML just treats '\r's '\n's as extra whitespace, and a good program (as in not notepad or Windows's telnet) should
work regardless of whether you use "\n" or "\r\n". ("\r" is a different
story...)
Once you have an account with one of these services, you'll need some content (duh). Web pages are written in a language called HyperText Markup Language (HTML). You can create web pages with some of these services without knowing HTML, by using a special program or filling out a form that writes it for you, but you won't have nearly as much control, and your pages will often not work as well as they could if you wrote them by hand.
Each web page is represented by a single HTML file, and each HTML file may only represent one web page. If you want another page, you have to start another file.
An HTML file is really just a plain text file (like you would make
using notepad, if you're on Windows), except that text between angle
brackets (< and >) mean something special. These angle bracket
pairs and the text they contain are called tags. For
instance, <br /> means start a new line (Just
starting a new line in the file will not start a new line on the
page. Instead, any number of spaces, newline characters, and/or tabs
in a row will be treated as a single space. This way the text can wrap
to fit the size of the user's browser window, which you usually do not
know when writing the page). Many tags are used in pairs, such as
<p>, which defines a paragraph. To use these tags,
you put an opening tag (<p>), followed by the content of the tag
pair, followed by the closing tag, which is the same as the opening
tag, except with a slash before the name (in this case,
</p>. Tags that are used by themselves should end
with a slash, such as the <br /> tag (actually,
this is not a requirement of html, but rather of xhtml. see html vs xhtml).
The entire page should be surrounded by the <html>
tag pair (<html> and
</html>). The body of the page should be enclosed
between <body> tags, and the header information
(stuff which is not displayed as part of the page, but used by the
browser for other things, such as the <title>) is
enclosed between <head> tags. So,
here's the basic structure of the page:
<html>
<head>
<title>title goes here</title>
other header information goes here
</head>
<body>
Main text of page goes here.
</body>
</html>
Another thing you can do with tags is give them properties. For
instance, the body tag has a property to set the background color of a
page, called bgcolor. You can set the property by putting
the name of the property, followed by an equal sign, followed by the
value of the property in quotes. To set the background color of the
page to black, you could do like this: <body
bgcolor="black"> (see colors). Some
properties are only on or off, and so do not need a value. To turn
them on, you just include the name of the property in the tag (like
this: <table border>). Note
that you do not need to put the properties in the closing tag. Only
the opening one. Properties of a singular tag come before the slash at
the end. (like this: <img src="foop.gif"/>). Singular tags
without properties should have a space between the tag name and the
slash. Otherwise some web browsers won't recognise them.
One of the most fun parts of HTML is linking. To create a link,
surround the text you want to link from with <a>
tags, using the href property to tell it where to link
to, like this:
<a href="http://www.google.com">Google</a>.
Try not to
use text like click here, for that carries little
meaning. You can also label a piece of a page that you can link to
using a's name attribute, like this:
<a name="spiffyword">asdkasd</a>.
You can then link to it from the same page like this:
<a href="#spiffyword">a spiffy word</>
or from another page like this:
<a href="some/other/page.html#spiffyword">a spiffy
word</>.
The id attribute which can be
applied to any tag is supposed to replace a name, but a
lot of browsers don't yet support that. Remember to include the entire
URL (http://www.whatever.com/path/file) when linking to other
websites. Otherwise your link won't work.
Sometime you may want to embed other types of data in your web page,
such as images, java applets, etc. You can do this using the
object tag
pair. The object tag can include the following properties:
data - location of the objects datatitle - title of the datatype - mime type of the data
This is supposed to replace the old img, and
applet tags. Inside the object tags, you can
put <param name="paramname" value="paramvalue"/>
tags, just like for java applets. After the param tags, you can put
alternative content for browsers that cannot display that type of data
(such as another object tag, which may itself hold
alternative content). The alternative content may be any valid
html.
The tags <h1> through <h6>
denote headings. You should always use these instead of just using
large text, because they give the document structure. h1
is the most important, and h6 is the least important.
Tables are used to display tabular data :-). Here is an example of a table:
<table border>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
</tr>
<tr>
<td colspan="2">This column is wide</td>
</tr>
<tr>
<td>two<br />lines</td>
<td>one line</td>
</tr>
<tr valign="top">
<td>two<br />lines</td>
<td>one line</td></tr>
</table>This creates the following:
| Row 1, Col 1 | Row 1, Col 2 |
| Row 2, Col 1 | Row 2, Col 2 |
| This column is wide | |
| two lines | one line |
| two lines | one line |
tr creates a row, td creates a cell. The
border flag in the table tag tells it to
draw a border between the cells. The valign="top" in the
last row tells it to align the contents of the cells at the top of the
row, instead of the middle.
A table can have any number of rows and columns. You can specify the
number of columns in the table tag with the
cols property, which will often cause it to be displayed
differently.
People often use tables in order to get more control over the layout of their pages, by sticking entire pieces of the page in table cells. You should try to avoid doing this. If you do this, you should lay it out so that it looks alright even if the table cells are stacked vertically where they would normally be side-by-side, because some text browsers will display them that way if there is not enough room on the screen. Try it in different browsers to make sure it looks OK in all of them.
If you want to change the way your page looks (change colors, backgrounds, line widths, etc.), you can use CSS (Cascading Style Sheets) to do so. Here's the CSS used for this page:
body, p, tr, td, th, ul, ol, dir, pre, code
blockquote, input, form, textarea
{background: black; color: lime; font: medium verdana; }
pre, code { font: medium courier; }
strong { font-weight: bold; }
span.lead { font-weight: bold; }
h1, h2, h3, h4 {color: DarkTurquoise; }
h1 {font: bold xx-large verdana, helvetica; align: center; }
h2 {font: bold x-large verdana, helvetica; }
h3 {font: bold large verdana, helvetica; }
h4 {font: bold medium courier; }
a:link {color: orange; }
a:visited {color: #ff6611; }
a:hover {color: yellow; }
a:active {color: yellow; }
It should be pretty self explainitory. You can tell it to only set the
style properties for a certain class of object by putting the tag
name, followed by a dot, followed by the class name, or you can just
use the dot and the class name. You can tell it to only apply it to an
object with a certain id by using a pound sign
(#) followed by the id. The class and
id are simply attributes of the tag.
You can tell a page to use a style sheet by linking to it in the
head, like this: <link type="text/css"
rel="stylesheet" href="mystyle.css" media="screen"/>.
Whenever you need to specify a color in an HTML or CSS document, you
can do so by using the color's name, or by using the RGB value of the
color (since we can't have a name for every one). Names can be used
for simple colors like 'white', 'black', 'red', etc., but I always
just use the RGB value because that way I have control, instead of the
browser. You represent the color like this #rrggbb, where
rr, gg, and bb are the hexidecimal
values of the red, green, and blue of the color, respectively.
This page doesn't actually describe HTML, but rather XHTML, which is basically HTML with certain restrictions to make it compatible with XML (eXtensible Markup Language). Differences between HTML and XHTML include:
<p> or <P>), XHTML tags are
case-sensitive.style tags, or a bunch of
other stuff that HTML does.