Pirate Monkeys Inc.

Frequently Asked Questions: how to make a web site

Introduction to HTML

Click here to see a sample of a web page Warning: for a laugh, I made the content all stupid but it still shows you how to write the code. This sample will show you how to use the information below and how to do a little web programming. It will open in a new window so you can see this tutorial at the same time.
To see the HTML for any web page: go to the View menu and select Source (for Internet Explorer) or Page Source (for Netscape). You could do this with my sample page (sampleview.htm) instead of this side-by-side thing but I thought the side-by-side thing would be easier to use. Use the View--Source method if your browser has trouble with frames.

Basic HTML

I'm not going to write the dozens of pages it would take to give a proper introduction to HTML; if you want to learn it then I recommend getting a book. I learned with the Visual Quickstart Guide "HTML for the World Wide Web" by Elizabeth Castro (it was actually the textbook for a class but classes are expensive and if you're into computers, you'll probably learn more on your own than by taking a class anyway).The Sams books are also pretty good in general, though I haven't read their HTML books. So you should definitely get a book if you're going to write the HTML youself but just to get you started, here's a brief overview of the most essential HTML tags.

HTML tags format your text and your page. The way to use HTML tags is to put an opening tag in front of the text you want to format and a closing tag at the end. Tags are enclosed in greater-than and less-than signs. The tags to make text bold and italic look like this in the HTML file:

<b>bold this</b> ...looks like... bold this
<i>italicize this</i> ...looks like... italicize this

When you type the < character in the HTML file, the browser interprets that as the beginning of a tag. Text between the < and > will not be visible to people viewing the page. To get these characters to show up on this page, I had to use special character reference codes; there's a list of some of the common codes below. You see how the opening and closing tags look the same except the closing tag has the / before the name of the tag. With a few exceptions, every tag must have a closing tag. If you leave out the closing tag for the bold tag, for example, then all the rest of the text on your page will be bold.

The other thing you need to know about tags is that most of them have "attributes." These are like properties that you set within the opening tag by typing the name of the attribute, "=" and the value you want to set. For example, the font tag has several attributes, one of which is size. To make the font bigger than the default, the code would be:

<font size="+2">here's some big text</font> ...looks like... here's some big text

Now that you know how tags work, here are the tags you need in every page:
html - At the very beginning and very end of a page, put the html opening and closing tags to tell the browser it's supposed to interpret the text between them as HTML. All the rest of your code will go between the html tags.
head - The head is where you put information such as the title that displays in the title bar of the browser viewing your page, a link to the stylesheet (which is a more detailed topic I'm not going to get into here; stylesheets make it easier to modify pages but they're not essential) and meta tags that set the default scripting language, tell search engines things about your page and other things that I'm not going to explain here because they're not necessary for a simple page. The only one I'm going to talk about here is the title.
title - The title tag goes inside the head tag. If you don't include the title tag (and the page will still work if you don't include it), then it'll just say "Untitled Document" in the title bar of the browser (or whatever the browser's default title is). So you'll probably want to pick a title. The title is also going to be the default name for the page when people bookmark it.
body - The body tag comes after the head tag and contains all the content that will appear on your page. The body tag has the following attributes that will be the default for the entire page:
text - the color of the regular text
bgcolor - background color for the entire page
link - color of text that's a link (often blue)
alink - color of active links (often magenta)
vlink - color of links the user has already visited (often magenta)
See below for an explanation of color codes.

So the HTML file will look like this:

<html>
<head>
<title>My Web Page</title>
</head>
<body>
content goes here
</body>
</html>

You don't have to put everything on separate lines like that. The browser will ignore carriage returns and tabs; it's just a good idea to write the HTML so it's easy for a human to read, in case you need to go back and edit it or copy the code to use in a new file.

Here are some more tags that you can use to start making a simple page.

Basic HTML Tags

tag name	what it does	attributes
b	makes text bold	none
i	makes text italic	none
br	inserts a line break (this tag has no closing tag)	clear="left" or "right" clear is for when you have a line break after a table or image and you want to make sure it starts on a new line (a book will explain this in more detail).
a	makes text a link	href="URL of the link"
font	formats font	color="hex color code" size="+/-number"
img	puts an image on the screen	src="URL of the image" width="width in pixels" height="height in pixels border="number (0 for no border)" alt="tool tip text"
hr	makes a horizontal line, good for dividing different sections of a page	width="pixels or percent" color="hex color code" size="number"

Hexadecimal color codes

You can put in the names of some colors, red, blue, etc., but to get other colors, you need to use the color codes, which are hexadecimal numbers. The first two digits are for red, the next two are for green and the last two are for blue. Therefore, the value for each color in the mix can be between 0 (00) and 255 (FF). You don't have to be able to convert between decimal and hexadecimal in your head; just know that 00 < 33 < 66 < 99 < AA < CC < FF. Notice that's only a small set of the possible numbers; if you only use these numbers, you'll have "web-safe colors." Monitors have a finite ability to display different colors. To display colors that aren't in the set of web-safe colors, the computer may have to display things in a way that doesn't look as good as the original. You don't have to use web-safe colors and sometimes it's not practical to use them, like with a photograph, but when you're picking text and background colors, it's a good idea to use web-safe colors. I find it useful to preview the colors in the Photoshop Color Picker window (you can enter color codes in the box with # in front of it). Here are the codes for some basic, web-safe colors, but you can get a total of 216 web-safe colors by changing the values for red, green and blue. Also remember that colored text will look different against different colored backgrounds.

#FFFFFF white
#000000 black
#FF0000 red
#FFFF00 yellow
#00FF00 green
#00FFFF cyan
#00FFFF blue
#FF00FF magenta

Making tables

There are three tags to use to make a table: table, tr (for "table row") and td (I don't know what the 'd' stands for but it's for making columns). The td tags go inside the tr tags and the content goes inside the td tags. To make a table with three rows and two columns, the code looks like:

<table border="1">
  <tr>
    <td>ONE</td>
    <td>TWO</td>
  </tr>
  <tr>
    <td>THREE</td>
    <td>FOUR</td>
  </tr>
  <tr>
    <td>FIVE</td>
    <td>SIX</td>
  </tr>
</table>

The table will look like this:

ONE	TWO
THREE	FOUR
FIVE	SIX

If you want no border, put border="0" instead of 1 in the table tag. It's not just on or off either; you can get a fatter border by putting in a bigger number. You can use tables without borders to put background pictures on a page. That's how I did the red and gold background on my pages: all the content of each page is in a table with no border, so it's invisible but it keeps everything where it's supposed to be.

The table tag has other attributes: bgcolor="hex color code", width="pixels or percent of the window's total width", cellpadding="pixels you want around the contents of each table cell" and cellspacing="pixels you want separating the table cells".

You can also have nested tables, placing one table within the cell of another, but I've heard that some browsers have trouble with too many levels of nested tables. That is, it's OK to have a table-in-a-table but avoid putting a table-in-a-table-in-a-table-in-a-table.

Forms

Forms are the way you can get input from users. The form tag is like the table tag: you put the elements making up the form between the opening and closing form tags.
The attributes of the form tag:
name - the name is important because it's what you use to refer to the form in the code that processes the form.
method - this is set to either "post" or "get." Basically, I haven't found any advantage to using "get" and "get" means the user input will display in the browser's address bar when they submit it. I always use "post."
action - the name of the page that contains the code that handles the form. It can be a different page or the same page.
The form tag can also have events, such as onSubmit. For example, you can write a function, called myfunction (or whatever) to validate the form (make sure the input is valid) and then to use it, put in the form tag onSubmit="return myfunction();"

The input tag
There are several elements of a form that you can use to get input. Most of these elements use the input tag. The input tag has an attribute, type, that specifies what kind of input element you want. Another important attribute is value; this will record the input the user gives. The name attribute, like the same attribute in the form tag, is used to refer to each element in the form handling code. Input types include:
text - a single line text box. The value will be whatever text the user enters.
radio - a round selection bubble. These are good for quizes. Radio buttons come in groups, like the answer choices for a quiz question. To make radio butttons belong to the same group, give them all the same name. Give each radio button a different value, then whichever button the user selects will determine the value of that group - referred to by the name - in the form handling code.
check - a square selection box. These are like radio buttons except it's possible to select more than one.
Input types that are buttons:
submit - this is a button that allows the user to submit their input. The onSubmit event for the form is triggered when the user clicks this button. The value attribute is the text that appears on the button. The submit button can have a name but I haven't found a use for it.
reset - this button clears the input.

Frames

I wasn't going to talk about frames because there are way too many web pages with frames that look awful. Until I wrote this tutorial, I didn't use frames but when I went to make the sample page, frames seemed like a sensible way to set it up. So here's how to make frames but use them sparingly because it's too easy for them to look OK on your browser and look like crap on other people's browsers. Also, I don't know all that much about frames myself so once again, I recommend getting a book.

The first thing to know about frames is that the actual page only contains the frames; the frames show the content of other pages. This makes it harder for people to link to specific pages, which is one drawback of frames. Here's how the HTML looks:

<html>
  <head><title>My Page With Frames</title></head>
  <frameset cols="150,*">
    <frame name="leftside" src="navigation.htm" scrolling="no" marginwidth="0" marginheight="0" />
    <frame name="pictures" src="pictures.htm" scrolling="yes" marginwidth="0" marginheight="0" />
  </frameset>
</html>

This would be the code for the entire page; you see it's pretty short.

Note: I haven't used frames much myself; in the book I have, HTML for the World Wide Web by Elizabeth Castro, there's a little more code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
  <head><title>My Page With Frames</title></head>
  <frameset cols="150,*">
    <frame name="leftside" src="navigation.htm" scrolling="no" marginwidth="0" marginheight="0" />
    <frame name="pictures" src="pictures.htm" scrolling="yes" marginwidth="0" marginheight="0" />
  </frameset>
</html>

I don't know what that bit at the beginning is for and the book doesn't really explain it. My page, written like the first example, seems to work fine. I'll update this part if I find out more.

Back to the basic coding: notice there's no body tag here. In its place is the frameset tag and in that tag, you put the frames that make up the page. The rows and cols attributes of the frameset tag set the layout of the frames on the page. You can use percentages, numbers of pixels or the * to make it take up the space depending on the other frames. The src attribute, like the src attribute of the img tag, contains the name of another file. This is usually an html file that has the content you want to display in the frame. You then have to make those html pages separately. The scrolling attribute sets whether there's a scroll bar or not. I've often encountered pages containing frames without scroll bars that have content that goes beyond the end of the page and therefore I can't see it. Unless you have something small to display, like a short list of links, it's a good idea to give the user a scroll bar. The marginheight and marginwidth attributes set the size of the margins around the frames.

Tips

Here are some things I've found useful.

- to preview your pages:
you can open HTML pages off your own computer with a browser. In IE, select Open from the File menu and browse for the HTML file. You can keep your entire site on your own computer. This is good both for testing (so you can check your internal links) and for backup.

- to make a link open the page in a new browser window:
use the target attribute in the a tag as follows: <a href="URL of the site" target="_blank">link text</a>

- to make an empty space:
make a transparent .gif image that's 1x1 pixel. You can use it if you need to have an empty space of a certain size. Just set the width and height attributes in the image tag to whatever size you want and it'll stretch the invisible image to that size.

- to make link buttons:
put the image tag inside an a tag. You can also have both text and an image in the a tag if you want. Example: <a href="the URL"><img src="image's URL"></a>. If you let the image have a border (the default value for the border attribute is 1) then the border will be the same color as your text links. It usually looks better if you set the border to 0 for images that are links.

- for faster page loading:
text doesn't take a long time to load but large image files do. Use .gifs for images with big blocks of color, like buttons and icons, and use .jpgs for things like photos with a lot of different colors. Remember that some people have slow connections and a few people set their browsers not to display images. If you have images that are your navigation buttons, include text links somewhere on the site also.

- to have a background picture or color:
in the table tag, set the background attribute to the URL of the image you want as a background. For example: <table border="0" background="image URL">. If you want a background picture for the entire site, put the entire contents of the site in a table. You can have a table that only has one row and one column, if you want. The image will be tiled by default. If you want a background color for a table, set the bgcolor attribute in the table tag to the color code you want. It works the same as the bgcolor attribute of the body tag. You can set the border color of a table with the bordercolor attribute.

- look at how other pages are written:
in Internet Explorer, select Source (or Page Source if you have Netscape) from the View menu to see the HTML file of any web page. This is good for if you see something cool on a page and you want to see how it was set up.

Characters

The last thing I have to say about HTML is about the character codes I mentioned earlier. The browser will not display certain characters if you just type them. Instead, you have to use a code to tell the browser to display the character instead of interpreting it as HTML. I've also included some characters that aren't on the keyboard.

char	code
space
"	"
&	&
<	<
>	>
£	£
©	©
é	é
ñ	ñ

Web Programming

I'm not actually going to explain how to do this because it's even more complicated than HTML but I wanted to mention it because people may be curious about how I made the more interactive features on my site. JavaScript is a scripting language that's supported by most browsers (like HTML, it's the browser, not the server, that reads the code and decides what to display to the user). JavaScript can be used to do image swapping (that's how I did the map on the Pirate main page), make messages pop up and even to write simple games and quizes. I made all the games in the Pirate section using JavaScript. There are tons of web sites that offer free scripts. I recommend learning the basics of JavaScript before using the free scripts so you can read them first and have an idea of what they're doing.

More advanced programming can be done using a language such as ASP.NET or PHP. These are compiled by the server and then the server generates an HTML page to send to the browser. If you use View-->Source to look at the code of my .php pages, you won't see my PHP code. You'll just see the HTML code that the server sent to your browser, as a result of what my PHP code told the server. These languages are good for more advanced things that scripting can't do, such as sending e-mail and form handling on multiple pages, like in my postcARRds and for interacting with databases, like in my guestbook (actually, the postcARRds also use a database but it's less obvious to the user).

If you don't already have experience with programming, I'd recommend starting with a Teach Yourself JavaScript book; I used the Sams book.

Back to top Back to FAQ

GMonkey Main | Art | Writing | Fan Stuff | Links | Contact | Site Map

HARRY POTTER, characters, names and related indicia are trademarks of Warner Bros. TM & ©
Harry Potter Publishing Rights © J.K.R.

The X-Files, characters etc. TM & © FOX and its related entities.

The Sims © Electronic Arts Inc.

Original artwork and site design © Gillian Rhett 2003-2007.