<contents>
- getting started
- first tags
- formatting text
- blockquote
- the font tag
- colors
- how to add images
- making links
- links within a page
- comments
- meta tags
- escape sequences
- summing up
HTML stands for HyperText Markup Language. It's a way to format your text to make it viewable in web browsers. To format a word, a paragraph, or an entire document, all you need to do is enclose it within two HTML tags - one to start the formatting, and one to stop it - main rule: you must close every tag you open! An opening tag looks like this: <p> and a closing tag is like this: </p>. When you're opening and closing all of your tags make sure to avoid overlapping them - close them in the order you opened them. For example, don't do this:
Do not <i><b>overlap</i></b> your tags.
Do this:
Keep your tags in <i><b>order.</b></i>
HTML is not case sensitive, so you can write your tags in upper or lowercase, whichever you prefer. I use lowercase, just because it takes a lot more time to type your page up if you're constantly hitting the caps lock button.
Try out these tags and get used to them. Look at other pages and view other people's source code (right-click in the browser window and select "view source" in Netscape) to see how they do things. Decide ahead of time how you want your page to look, then figure out how to do it. It's simple!
<first tags>
<html> - this is the tag you need to start and end an HTML document.
<head> - this is the head of your document - it isn't visible to the viewer. This contains the title of your page, meta tags, JavaScript you're using, and the like.
<title> - this specifies the title of your page, i.e. what will be up in the top bar of your browser.
<body> - this begins and ends the body (viewable area) of the page.
<formatting text>
<i>word</i> = italics
<b>word</b> = bold
<u>word</u> = underline
<br> = line break - this is one of the few tags you don't need to close. It just puts a break and goes down a line. The only variable I know of for this tag is actually kind of cool. Pass this over if you're just starting, but <br="clear all"> will make it so if you have text next to a left or right aligned image, the next line after the <br> will come under the image. Cool.
<p> = new paragraph - surround each paragraph with the <p> and </p> tags. You can also pick how you'd like to align the text in the paragraph. For example, <p align=center> will center the text of that paragraph. Your options are left, right, center, and justify.
= "non-breaking space" - use this if you want a space. You don't have to use it in between every word, but it comes in handy for other stuff.
<hr> = horizontal rule. A lot of people use these to separate different sections of their site. Please use these sparingly - for some reason, people like to go wild with the <hr> tag. Also, if you are going to use it, don't use it plain. Specify the width, in pixels, like so:
<hr width=300> makes this:
There are other options you can use in the <hr> tag, such as size (in pixels), align (left, center, right) and noshade, which will keep the rule from having a shadow.
<pre> - this tag stands for "preformatted," and keeps your text in a fixed-width font. Anything that you have in between the <pre> tags will be left exactly how you wrote it, including spacing, tabs, and new lines.
make tabs and returns and double spaces.
make tabs and returns and double spaces.
<blockquote>
So you want a block of text indented on both sides? Here's how:
<blockquote>
Manatees grow new teeth all the time. They grow in from the back, and come forward, and their old, worn down teeth just fall out the front of their mouths. I'm kind of into this idea - no more fillings ever! But it would be pretty disgusting to have your teeth falling out of your mouth all of your life. Also, all your teeth would have to be the same shape and size so that it wouldn't matter what part of your mouth they were in. Cool for the manatees, though. </blockquote>
Wasn't that nice?
Manatees grow new teeth all the time. They grow in from the back, and come forward, and their old, worn down teeth just fall out the front of their mouths. I'm kind of into this idea - no more fillings ever! But it would be pretty disgusting to have your teeth falling out of your mouth all of your life. Also, all your teeth would have to be the same shape and size so that it wouldn't matter what part of your mouth they were in. Cool for the manatees, though.Wasn't that nice?
<the font tag>
The font tag has a few different variables. Face, size, & color. The default font face is Times New Roman, size=3, and color =black. One thing to think about is that if you specify a font that the person viewing your site doesn't have on their computer, they'll just see Times New Roman (or whatever they have specified as their default font on their browser). That's why it's a good idea to either stick with the major fonts, or specify backup fonts in your tag.
<font face="courier">paragraph or whatever</font> = says what font to use
<font face="arial narrow,arial,helvetica,sans-serif"> paragraph or whatever</font> = tag with backup fonts. It will go down the list in the order you put the names until it finds a font your visitor has on their computer. So if you really want Arial Narrow, but it also looks good with Arial, you could use Arial as the backup. If you put "serif" or "sans-serif" as the last backup font, it will pick a basic one of either. If you want a fancy font for something small, like a title, make it an image! Don't go making your whole page images, though, or I'll come and get you.
<font size=2>word</font> = tiny type
<font size=4>word</font> = bigger type
<font size=6>word</font> = big type
Another way to specify font size is to do <font size="+2"> - this means that if you change your base font at the top, this tag will increase it by two. You can also use the tag I (somewhat irrationally) hate: <big> - ugh!
<font color=red>word</font>
This works with the basic colors by just putting in their names, but if you want a specific color, you're going to want to use the hexadecimal code (more on that below).
<colors>
You can change a lot of variables in the <body> tag. Here is an example.
<body background="image.gif" bgcolor="#FFFFFF" text="#000000" link="#00AA39" alink="#FFFFFF" vlink="#005500">
background = background image
bgcolor = background color
text = what color you want the text
link = what color you want the link
alink = what color you want the link while it's being clicked ("active")
vlink = what color you want the link after it's been clicked ("viewed")
You'll notice that a lot of the variables are surrounded by quotes. You have to put variables in quotes if they are more than one word or if there are letters mixed with numbers or other characters. For example, <font size=8> doesn't need quotes (although adding quotes wouldn't do anything bad), but <img src="../pix/12.jpg"> does. That's because of the numbers and the slash.
You'll also notice that all the colors are written in hexadecimal code.
#FFFFFF= white
#000000= black
and there's lots of colors in between.
There are a lot of programs you can use to get this code, and they're pretty simple.
Things I use:
- Photoshop, mostly. But also:
- htcl - this is a tiny utility you can play with on
your desktop. You can select colors from a palette, adjust them, and
then hit "copy" to get your code. Very simple and easy. This is my favorite
tool!
- Eyedropper - this is a funny little program. It sits around in your task bar and you can hover over anything on your screen and get the hex code for it. Cute.
Once you've got a picture in your directory, you've got to link to it on your page. Here's a simple example:
<img src="picture.gif">
Here's a more tricky example:
<img src="picture.gif" height=60 width=20 align=left alt="here is my nice picture" border=0>
Here are some of the variables:
src - your image source, which is the path to your image.
height - specify the height of your image in pixels. This makes your page appear to load faster and is just generally a good thing to do. Don't take a big image and just shrink the height and width in the link to it - there's nothing worse than that.
width - same as height.
align - If you want your text to go alongside your image, align it. You can do either left or right.
alt - this is the text that will show on browsers that aren't loading images. It also makes the little floaty-box thing on new browsers. Picture description here. This is important to people who have their images off.
border - this is the border of your image - it shows up when you make your image a link. <making links>
The anchor (<a>) tag is the tag you use to make links. There are four ways to do this. If the file you're linking to is on your own domain, use #1. If it's on another domain altogether, use #2; if it's on your domain, but in another directory, use #3; if you want a link to email you, use #4.
1) To another one of your pages:
<a href="page2.html">go to page two</a>
you don't have to type in the entire address, just the name of the file.
2) To a page somewhere else:
<a href="http://www.indiepages.com/diyhtml">learn some web stuff</a>
here you have to type in the whole URL (including "http://") or it will try to go somewhere in your directory.
3) In another one of your directories:
To go down a directory: <a href="pix/fun.jpg"> to get to an image in a directory called "pix."
To go up a directory: <a href="../index.html"> to get to a file in the directory above the one you're in.
4) To email you:
<a href="mailto:you@yourdomain.com"> you@yourdomain.com</a>
Now don't go crazy and do what some people do - don't make every fifth word you write a link. For example, if you write a little thingy about yourself ("I went to such-and-such high school in such-and-such town in such-and-such state") please don't feel the need to make links to your high school, your town, and your state. I can assure you, no one gives a rat's ass. And it's bad for your site, because people will leave it to go see your dumb high school's webpage instead of finish reading your page.
<links within a page>
Here is a bit more on the anchor tag. To make a link to a certain part of a page, you'll want to use name instead of href.
So, say you have a big list of stuff on a page that's pretty long (like this page you're on right now, for example). You want people to be able to go to certain parts of the page from a menu at the top. Here's what you would do.
All of the links up top would go like this:
<a href="#something">
And the place on the page you want the link to go to should look like this:
<a name="something">something</a>
To link to a certain area of a different page on your site, do this:
<a href="links.html#something">
<comments>
So say you want to jot a note to yourself in your html, but you don't want it to show. That's what a comment is for. It looks like this:
<!-- little note to myself -->
Anything within those two tags will be invisible on the page. Comments are useful to make notes to yourself, and they're also good for updating things. Say you almost have something ready to put up on the page - put it on the page and hide it in comments. When you're ready for it, remove the comments, and voila! there it is. Also, say you have a list of new stuff on your site. You want to move the old stuff off of there, but don't want to lose it for yourself. Hide the old news in the comments. Then you can still check back and see what you did, but it's not cluttering up the page. Another nice thing to do with comments is to put the date you last updated the page in them - then people can view your source to see if it's current.
<meta tags>
There are a few things you can do with meta tags. Some are better than others. Say you want a description or keywords for your page to make it show up in search engines. Instead of writing all the words on your page, put them in your meta tags! Here's how:
<meta name="description" content="learn how to make your own webpage here">
<meta name="keywords" content="html help, making webpages, learning html, websites, site design">
You put those tags inside of your <head> tags. That's all you'll get from me, but you can go to the resources page to get a link to a meta tag generator.
<escape sequences>
There are three characters that are part of the code in HTML, that you aren't able to use just by typing them in. These are the left angle bracket (<), the right angle bracket (>), and the ampersand (&). The brackets won't work at all if you just try to type them in, and probably will screw up your code. The ampersand will work, but is incorrect HTML.
To use one of these three characters in an HTML document, you must enter its escape sequence instead. These escape sequences are actually case-sensitive, so you have to do them just as they are below, lowercase.
< - the escape sequence for <
> - the escape sequence for >
& - the escape sequence for &
<to sum up>
Code for a webpage with default colors and only the words "tree frog" in the center of the page would look like this:
<html>
<head>
<title>My Tree Frog Webpage</title>
</head>
<body>
<center>tree frog</center>
</body>
</html>
go see it
<main thing to remember>
Any tag you write, close it. Or else your page will look crazy. The end.