Spacefem's Tutorials: The Very Basic HTML Tutorial
So, you want to make a website, but feel like a total baby? Don't know where to start? Maybe this will help.
HTML stands for Hyper Text Markup Language. It's how we talk to web browsers. When making web pages, we have things we want to
say to people (like the paragraph you're reading now) and things we want to say to the browser (like "Make this text bold" or "display this image"). That's
what HTML is for.
It's not programming. You cannot tell the browser to add two numbers together or perform an embedded function. But that's okay,
because it means it's simple, and that's what the web is about sometimes. Keeping it simple.
Part 1: Starting Off
So, let's start in! Open a text editor. If you're running windows, you probably have Microsoft Notepad... that should do fine. If you
keep at this though you'll probably want to download Textpad or something more powerful (or you can
just run Linux and get all the greatest text editors ever, for free! rock on.)
In your text editor, tell the browser that you want this to be an HTML web page. To tell the browser things, we put them in little
< and > symbols. See, HTML stands for "Hyper-Text Markup Language" because that's exactly what it's used for... marking up text. If a friend of yours gave you a paper with a bunch of words on it and told you to make sense of it, you'd write your friend notes on how to make it better. With HTML, we tell the computer things. The symbols work like this:
This is some text on a web page.
See? Now, the "/" symbol is the equivalent of saying "STOP" to the browser. When we typed "<HTML>" that meant "Start reading HTML". When we
typed </HTML>, that meant "Stop reading HTML". The "This is some text on a web page." line wasn't in the < > symbols, so the browser
will just show it on the page. It doesn't matter if stuff in your tags is uppercase or lowercase, but I like to make things uppercase because I think that makes it easier for me to read at a glance.
Save your page as "mypage.html" or whatever. USE THE QUOTE MARKS and be sure to include the ".html" extention. For the type of file, change
the ".txt" to "All Files". It should look something like this:
Go find it and double click it, it should open up in a web browser and be showing your text.
Part 2: Getting The Details
Okay, I know you want to get to the fun stuff, but first we need to make sure we're making a proper page, with sections for the Body (stuff that gets
shown) and Header (information that's just good to have).
Title Of My Page
<h1>Title Of My Page</h1>
This is some text.
Now you can say whatever you want, as long as it's in those Body tags. The text in between the <TITLE> and </TITLE> tags gets
shown up on top of the web browser, not on your page, so be sure to repeat it in the body of your document.
By now you're probably starting to understand how tags work, so I'm going to throw some more out that you can use to format text...
There are also tags that you don't have to close up, they just happen...
<br> - line break
<hr> - horizontal rule
Part 3: Bigger, Better Tags
Once you've learned a few basic tags you'll be on your way, but the really good tags have attributes assigned to them. Attributes are
variables assigned within the tag. For example, let's look at the body tag.
You'd probably like to tell the browser some more things to do to the body. Maybe you'd like the body to have a background color, and
a text color, and link colors. Can do.
<BODY BGCOLOR="orange" BACKGROUND="image.gif" TEXT="black" LINK="violet" VLINK="black" ALINK="red">
We just assigned the following attributes to the body of the page:
Play around, you'll love it. You can either call colors out by their names (listed here)
or write out their Hexadecimal code... three two-digit, hexadecimal values ranging from 00 to FF, one for red, green, and blue. The page
I just linked to lists hexadecimal values for the HTML color names, but you can use any combination you'd like.
- BGCOLOR - the background color of the page.
- BACKGROUND - a background image for the page. This will be automatically tiled.
- TEXT - the color of the text
- LINK - link color
- VLINK - visted link color
- ALINK - active link color
The FONT tag is another good example. It doesn't do anything without attributes. Let's create a tag to make our
text look like this.
<FONT FACE="times new roman" COLOR="green" SIZE="+1">
Remember, even though a tag has attributes, we still use the same closing tag to end it. So when we don't want our text to be big and green anymore,
we add a </FONT> and it's done. Just remember to be careful with that FACE attribute: it only works if people visiting your page have that font installed on their computers. Just about everyone has fonts like times new roman, arial, verdana, and comic sans. Don't call out anything weird and you should be fine.
The anchor tag will put links on your page:
<A HREF="http://www.spacefem.com">>Click here to visit Spacefem.com!</a>
Notice that we started the tag (<A>), slapped an attribute in there (HREF="http://www.spacefem.com"),
put some text for it to effect, then ended it with </A> It's very important to end it, otherwise your
entire page can be one big link. Here's another anchor tag:
<A HREF="mailto:email@example.com">E-mail Spacefem</a>
The "mailto:" in there makes it so when the user clicks on the address, their e-mail client pops up. Nice!
And finally, if you want to display a picture, use the IMG tag:
<IMG SRC="http://spacefem.com/image.jpg" ALT="Picture for you" BORDER=0 HEIGHT=100 WIDTH=100>
This tag gets used a LOT, so let's look at its attributes a little closer:
Now you should have about all you need to create a basic web page. Remember, content is what's important, not how fancy your page is. Some very
popular pages use only these HTML tags... I know mine did for a long time. So take it slow.
- SRC - the "source" of the image. If the page is in the same directory as the image, you can just say "image.jpg" or whatever and be done with it. Otherwise, go to the path.
- ALT - text that is associated with the image. Don't leave this out! It's informative, yes, but it's also crucial to people with disabilities who wish to visit your page.
- BORDER - if you have the image in a link tag, it will automatically add a border. Setting this attribute to 0 stops that.
- HEIGHT/WIDTH - in pixels.
Part 4: Tables
You might notice that most web pages aren't laid out as one big long sheet, they're divided into sections. The easiest and most browser-independent way of doing this is to use Tables. Tables lay things out nicely in rows and columns. My web page is made up of several tables inside one another, each with different numbers of rows and columns and properties. Here's how they work.
Like with anything, you'll start with opening and closing tags like this:
In between your table tags, you'll have your rows and columns set up. Columns go inside rows. This may look dizzying, but it's really simple because it's only three different tags.
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
I've given my table a border so it'll be easier to see the edges. This is done using the border attribute, which is just like any other attribute so you'll have no problem staying with me on this one, right? Here's what our table looks like:
And there you have a table! Awesome, huh?
Row 1, Column 1
Row 1, Column 2
Row 2, Column 1
Row 2, Column 2
There are many attributes to know about when making tables. The <TABLE> itself has pixel values like CELLSPACING (distance between cells) and CELLPADDING (distance inside cells between contents of the cell and the borders). You can also set its BGCOLOR and even WIDTH (for instance, WIDTH=50% will make the table take up half the page, and WIDTH=100 will make it 100 pixels wide).
<TR> starts a new row. It can also have a BGCOLOR and even a ROWSPAN, which would make it span across a couple rows.
<TD> starts a new column and has WIDTH, BGCOLOR, and COLSPAN, which would make it span across several columns. Things can get complicated quickly when you use ROWSPAN and COLSPAN in the same table, so be ready for surprises if you just want to try it out.
A common mistake people make is not using <TD> </TD> tags in the right places, so nothing shows up in the table. If you're putting text in cells and it's nowhere to be seen, make sure it's in between your <TD> & </TD> tags.