Learn HTML

Learn HTML

To make your own pages!
So, you want to learn how to make your own pages with plain HTML? Well, it's really easy. Just click on the list of lessons to learn them.

The Basics
*The < html > tag
* The < head > tag
* The < body > tag

How do I do links?

How do I do Colors?

How do I put Images?

Backgrounds, borders & buttons

How do I change the text size, color, font, and make it bold, underlined or italic?

How do I put music on my page?

Tables

Frames

Here is lesson one.

lesson one: The Basics

HTML tags are what tell your browser (like netscape) what to display. HTML tags are typed inside angle brackets like this: ! The first HTML tag is usually the tag, which tells your browser that the document has been written in HTML. If you forget this tag, you'll probably be in trouble! Every tag has a starting tag, and an ending tag. If you didn't end it, your command will run on and on forever, and probably confuse your browser. Ending tags are like this
The tag after the 'html' tag is the This is the head tag, it is where you put the page's title (displayed at the top of your screen) (end the title)The next tag is the tag, which tells the browser which background color, link color, text color and background image.You must put a < body > tag in you HTML, because that's where all your page stuff goes. At the end of all your pages, you must put < /body > and < /html >!
Usually, you'll want to center whatever you put on your page. To do this, put This means 'align the paragraph in the center'. You can put 'left' or 'right' instead of 'center' too. To make your text indented on both sides, put . ^TOP^

Links

There are four kinds of links. A link is a highlited piece of text or an image that goes to a different page or site. The first kind of link is to a different site. To do this put Where 'http://www.yoursfavoritesite.com' is, put a url to the site you want, and where it says 'click here' put the text you want your visitors to click on to go there. The second kind of link is a link to one of your pages. You have to link all of your pages together so people can get from one to the other. It's pretty much the same Idea. The third kind of link is a link to your email. Say you want all people who have a black cat to email you. They probably don't want to have to copy your email adress, go to their mail box and send you a message. Instead, just put a link that they can click on that brings up their email program with your email filled in! Don't forget the 'mailto:' part, or it won't work! The fourth kind of link is a jump link, which links the top of one page to the bottom, or to different parts, as on the top of this page. All you need to do is name the part of the page you want to link to, like this Then, create a link where you want it to be: ^TOP^
Colors

In the < body > tag at the top of your page you can specify link colors, text color, and background color. Vlink is a visited link, and alink is an active link. You can put whatever color you like, but for more acurate colors, you should use the color codes. Every color has a code, like #000000 or #FFFFFF. Just copy the code from the color chart and put it in your html instead of the word.

^TOP^

Images

Images spice up your page! backgrounds, photos, logos, or buttons are neat! All images should have width and height parameters. You can find these out by looking in a paint program, or by clicking on the image and viewing it. To put an image There are many different kinds of images, but .gif and .jpg are the most common. GIFs are best for graphics and buttons, and JPEGs are best for photos. Remember, if you spell the image name wrong, it won't display. Before the image can display, you have to upload it to your site. Usually, if you are using a site like Geocities, there will be a button that says "upload", click on this, then click 'browse' and choose the image you want from your computer. Make sure it is .jpg or .gif! Note if it has capital letters or underscores (you CANNOT USE SPACES in file or image names)!
^TOP^
Backgrounds

Ok, go back to the < body > tag. But first, you need a background image. You can probably get one free at any graphics site. Or, I can make one for you. So, say you have a nice background of flowers called 'flowerbg.gif'. (upload it) Just go to your < body > tag and put in 'background="flowerbg.gif">'
Buttons buttons are just images that are linked. Simply put a link to a site, and then put the image, and close the link. Borders are just backgrounds that just go down one side. Same thing as regular.
^TOP^

Font

To change the font to bold there are:ItalicUnderline To change the color, use the color codes or colors, in a font tag, like this: To change the size: To change the font to a different font, you have to know the name of it, say Comic sans MS.^TOP^
Music

To put music on your page, basically you just need to find and upload a music (prefferably MIDI .mid) file. Then, where you want it, put YOu can put 'autostart' which does exactly what it says, also 'loop="1"' how many times you want it to play.
^TOP^

Tables
Tables are a bit complicated. They are usually used for lining pages, pictures and text up. Think of a checkerboard, there are verticle columns, and horizontal rows. There are so many little squares in the columns and rows. First, you start a table with: < center > is so that the table will be in the center of the page. < table border="0" > you can set the border to whatever you want, it determines how thick the border around the table is. < table width > is how far across the screen the table goes. If you choose more than 600, however, visitors will have to scroll sideways to see the rest of the table. There are other attributes that go into the < table > tag, but they aren't absolutely nessary. To make a new row, you put the tag. Then, you put as many cells in the row as you like, cells are what contain your data. The cell is defined by the tag. As always, these tags have closing (< /td >) tags. After you've filled the cell with data, you must use the < / td > tag. When you'd like a new row, you must first close the old row < /tr >! Here is an example of a table:
Welcome To Our Site
Please Sign Guestbook
Here is the code for that table:
Back