Alicorn HTML

Alicorn HTML

This only covers the very most basic HTML tags (commands) to get you started with your first web page.

All HTML documents start with <html> and end with </html>. Within that are two sections: head & body. So your basic empty HTML document looks like this:

<html>
<head>
  (Head stuff)
</head>
<body>
  (Body stuff)
</body>
</html>

You've probably already started to notice a trend. Most html tags have a matching closing tag that is exactly the same, but has a / in it. I'm typing all my tags in lowercase because I like it that way, but it is not case sensitive, and you may find you prefer to type your tags in UPPERCASE so you can see them more easily.

The most important tag for you to know that goes in the <head> section is the <title> tag. That is where you define the title for your page that will show up in the title bar of the browser.

<head>
  <title> Alicorn's Web Page </title>
</head>

The <body> section is where everything happens.

Let's look at the body tag itself first. This is where you can set up the basic way your HTML document looks - the colours particularly.

To set the background colour of the document, use the bgcolor parameter of the body tag like this:
<body bgcolor = white> or <body bgcolor = #339999>

There are a whole bunch of named colours. There are lists of them all over the place, and here's one I like which allows you to preview the background and text colours together. Most colour names you can guess at: white, black, green, magenta, etc. But then there's stuff like aliceblue or lavender. They're fun. :)

If you don't want to use a named colour, you can specify a red/green/blue number of a colour in hexadecimal prefixed by a # sign. #339999 happens to be a teal colour. The range is from #000000 to #FFFFFF. One of those is white, the other black. I always forget which is which. That's why I like named colours. :)

So now we have a background colour, but it's still using the default text colour. Change that with the text parameter like this: <body text = green> or <body text = #18f3cc>

When you are dealing with a tag like <body> that can have multiple parameters, they do not have to be in any particular order. <body bgcolor = white text = blue> works exactly as well as <body text = blue bgcolor = white>.

If you want to designate an image to tile across the background, use the background parameter of the <body> tag like this: <body background = smile.gif> or <body background = flowers.jpg>

Design Tip: Set the background colour to a colour similar to the background image. That way, if someone hits your site and they aren't loading images (or the image just hasn't loaded yet) it still looks sort of the way you wanted it. Also, if you are using a dark background image so you set your text to white, for example, and the background image doesn't load, it will be very difficult to read white text on a white or grey background. (Different browsers default to different background colours.)

Okay, so now we have some pretty colours and a title. Let's put something in this file!

Type everything you want on your page between the <body> and </body> tags. You have the option of using paragraph tags to mark the beginning of each paragraph. When you use these, it will automatically leave a space between each paragraph. It's kind of like hitting enter twice in notepad. Alternately, you can use the tag, which is a line break. It's like hitting enter once. It's probably easiest to use the tag for setting up your paragraphs.

There is a tag that you can use to end a paragraph. It is not required, but it's probably a nice idea to include it.

For example:

<body>
<p>Welcome to my brand new home page!</p>
<p>I'm learning HTML as I go.</p>
</body>

When you type longer paragraphs, they default to being left-aligned. It will automatically wrap the text to the next line depending on how big the viewer's browser is, so you do NOT have to say where to end a line unless you really want to. But that comes later. For now, press enter wherever you want, and don't worry too much about how it is laid out.

Now, you might want to do something a little fancier with the text in your new paragraph. Perhaps you want to make it bold, italics, or underlined. The tags to achieve this are , , and .

For example:
 I like writing in bold, italics and underlined text just because I can!

You can nest these styles together like this:
 This is bold *and* italics

It is good practice to end the tags in the reverse order you entered them as above. Don't do it like this: hi That will work, but it's not as good unless you have a real reason to do it like that.

Now you've got some fairly cool things happening, but you'd like to put in some head lines or change the size of your text. Coming right up!

There are 6 or so levels of headers. A header is different from big text because a header lives on a line all by itself and it has an automatic space before and after it (just like a paragraph, only a slightly bigger space usually). The biggest header is <h1>.

Please please please do not go crazy and make your entire page out of <h1> text. It looks goofy. Don't do it. Okay? Thank you.

However, you could use it at the top of your page to label your page... sort of like you did with the <title> tag in the <head> section.

Now, if you wanted to put sub-headers on your page, you could use <h2>, <h3> and so on. You probably don't want to go very far through these because they get hard to look at. I don't think I've ever used an <h4>. Maybe. I'll have to check and let you know.

It might look like this:

<html>
<head>
  <title> My Cool Page </title>
</head>
<body>
<h1> My Cool Page </h1>
<p> This is my <b>cool</b> page.  My hot page hasn't
been written yet, but I'm going to be doing that
Real Soon Now. </p>
<h2> Stuff </h2>
<p> There is a lot of important stuff in <i>this</i>
paragraph.  Really, there is.  But it's invisible.
Sorry. </p>
</body>
</html>

If you don't want an actual header line, you can achieve a similar effect with and or tags. Like:

<br>
<b>Pretend header</b> <br><br><br> Stuff on next line, but <i>I</i> have
decided how many spaces (3) there will be between this and the pretend
header by how many <br>s I put.  There is also a <br> before the pretend
header to make sure it isn't on the end of the line before it.  I could
also have used a <p> tag but I'm starting to get tired of those.  :)

Ah, I know what I missed. Just plain ol' making text bigger in the middle of a line. Do this with the tag like this:

I'm typing and now it's bigger!

What the size = +1 thing did is said to make the font one step bigger than the default font size. It is possible to specify a precise size but I don't use that much. It doesn't use points anyway, so there's not a lot of point in it. (Heh, no pun intended.) Anyway, you can't say and end up with a 10-point font... I don't think it will even work at all. Fonts are numbered sizes 1 (really tiny) through 7 (really big). The default font is 3. So when you do +1, you get font size 4. You can also do -1.. or +3 or whatever. Neat, huh?

You can also play around with *which* font it uses... but that can be a tad tricky. For one thing, the person looking at your page has to have the font installed on their computer. So if you use some cool font you have, no one else can see it unless they happen to have it too. Don't rely on font faces (that's what they're called) to make your document work. But if you really really want to change the font from the default (Times New Roman, I think it might be), do it like this:

Now I'm in Arial

I think the font name is case sensitive. Treat it like it is, anyway. Safest that way. And make sure you spell it right! It can't guess. Put quote marks around it if it is more than one word, or just get in the habit of always using quotes.

Actually, you can use quotes around every thing. <body bgcolor = "white"> <text size = "+2"> and so on. You probably really should. I should too. I never got in the habit of it. But you're young; you're just beginning. Make it a habit now before it's too late! It's a good habit. :)

Okay. What else? You know how to change the colours of the text and background, how to mess around with fonts and stuff. Oh, you might want to link to another file. That's important. :)

To create a link to another file, type: <a href = "another.html"> if another.html is in the same directory as your current document. If not, use the relative path. For example: <a href = "pictures/me.gif"> would link to a file called me.gif in a subdirectory called pictures of the current directory. If you want to link to a file in a directory above the current one, use things like "../stuff/whatever.html" to go sort of sideways or "/thing.jpg" to go to the very root of the server. If the page is on a different server, type the whole thing like "http://www.wherever.com".

Then, type what you want the link to say, and end it with </a>. So the full thing looks like this:
<a href = friends.html>My friends</a>

If you want to link to an email address instead of a web page or a picture, it's slightly different:
<a href="mailto:alicorn1@geocities.com">Email me!</a>

Got the picture?

Pictures! Another good thing to want to do. Saved the best for last. (Well almost.)

If you want to display a picture (image) on your web page, use the <img> tag. The main parameter is src (source) which says where the picture is located at. It works the exact same way as the linking stuff in the previous paragraph above, so I won't go through all that again. The format is: <img src = "you.gif">

It's a really really REALLY good idea to always include alt (alternate) text with every single picture you ever have on your pages. Why? Because if you are surfing with images off, or you are using a text based browser and you *can't* see images, or if they're being slow to load, you have a clue what you're supposed to be seeing and can go to the trouble of downloading it if you really want to.

So how do you do this magical alt text? Easy:
<img src = flower.gif alt = "flower">

Or you can get more descriptive:
<img src = flower.gif alt = "Flowers from my garden last year">

Something else you can do is include the file size in the alt text:
<img src = flowers.gif alt = "28kb Flowers from my garden">

You can combine the two above to make a picture a clickable link like this:
<a href = "garden.html"><img src= flowers.gif alt = "My Garden"></a>

Even if (heaven forbid) you don't use alt text on normal pictures, ALWAYS use it on clickable images if you don't also include text in the link. Which you can do like this: <a href = "garden.html"><img src= flowers.gif alt = "My Garden"> Visit my garden </a>

You'll notice when you put an image in a link it puts a box around it. That helps people identify it as a link, but if you want to get rid of the box, include a border parameter in the img tag like so: <img src = flowers.gif border = 0>

Of course, if it's not a link (or even if it is) and you want to force a border, you can put a number instead of 0. The bigger the number the thicker the border. Pretty tricky.

I guess I should tell you how to place things where you want to have them show up. The three basic positions are (are you ready?) left, center, and right.

Everything defaults to going to the left. Change it with the align properties of or <img> like this:

or <img src = "stuff.jpg" align = right>

If you want to have things centered, you can do it that way, or use the special <center> tag. Put it before the first thing you want to be centered, and </center> after the last thing. That way you can have multiple paragraphs and images all centered. You can still use the align properties within the <center> tags to change things. Like this:

<center>
<p> This paragraph will be centered.  It's a very important paragraph and
goes on for a while. </p>
<img src = left.gif align = left alt = "Left Hand">
<p> This paragraph will still be centered, but it will now wrap around the picture
of the hand which will be shown all the way to the left.  If you didn't include
the align tag the picture would have been centered above this paragraph instead. </p>
</center>
<p> This paragraph will not be centered.

Okay. I think that's enough for now. There's lots of other cool stuff like tables and frames (avoid frames until you know what you're doing with basic html first. Trust me.) But you have enough now to get started and create a pretty good page if you put it all together right.

To learn more, you can click on View Source of any page you find that does something interesting and see if you can figure out how they did it. There are also a lot of more in depth tutorials "out there" that you might find useful.

Have fun!