[TUT][HTML] The basics

Basic HTML Tutorial

History
Everybody heard of HTML. HTML is a language used among the internet and stands for Hyper Text Markup Language. HTML is used since the beginning of the internet, and so nowadays it's a common language.

Basis
HTML is a tag based language. Tags are specified between the "<" and ">" and are usually closed with the same tag with an "/". We only close tags is something can be added in it, like a crate. The crate can contain more things, like the ball (or even smaller crates). But the ball itself however can't contain anything.

For example, the first and almost most important tag is

Between these tags we specify our code in HTML format. It's obvious that we NEED an opening and closing tag, else our document would ALWAYS be empty.

Now time to move on. A HTML document is like a letter, it has a head and a body. Everything we specify in the head is NOT to be seen on our site. It's used for meta-data. As you can guess, head is specified with the tag: and closed with . Body with and . (Note: Again obvious that our head and body has to contain something, so an opening and a closing tag)

Our document looks like this now:

The head
First some more information about the head. Like I said, it looks like a letter. So what's in a head of a letter? Usually the name of the writer, a date, an address a title and more stuff like that. A HTML head can contains the same things: a title, a creator, an adress etc.

Title
Title is important, because that's what somebody gets to see in his explorer title-bar when he or she opens your page. Title is specified with the tag. Has this tag to be closed? Answer: yes, TITLE contains the title of your page.

Meta data
Other data in the header can be specified with a tag. A meta-tag has a name and a content. This tag has no need to be closed this time, because if we put something between the tags, the computer wouldn't know WHAT you mean, eighter it's the name, or the content. Therefore we introduce "properties" of a tag. A crate for example would have a size like width and height. In other words: the tag should look like this:

Very simple as you can see. For example, we just say that the name is equal to "Generator". We always put the value of the property between " ". Of course it's possible to put more than one tag in the header.

The body
Now our head is done, we take a look at our code again:

My first webpage

Our body has many properties, here we can specify the standard layout for the whole document, colors, background image, margins for the page. These properties are used WITHIN the tag just like in . Not every property needs to be specified. The properties are in the table below.


Note:
* Not every property is available in this table, only some common properties are shown

** See appendix for hexadecimal coloring

If we want a nice black background, yellow text and red hyperlinks, we would use a tag like:

Text
We see that our body contains nothing yet, so let's start off by taking care of some text. Text can be written just like you write it an text-editor, except for special characters and invisible characters. What do "invisible characters" mean? I mean characters like enters, line feeds, page or paragraph endings. We see what they do, be we DON'T see the characters themselves. For a line break, we use the
tag. For a new paragraph we use

. These tags replace characters, so the do not need to be closed with or

.

Because "<" and ">" are used for tags, these symbols are replaced by the following codes:

&lt <
&gt >

And here are some special characters I was talking about:

&amp &
&quot "
&nbsp blank space
&reg ®
&copy ©

Layout
What does a text editor have what we doesn't have? YES! Layout! Maybe we want a big text on top of our page, and then a smaller text for the rest of the text. Or we want another font? It's easiest to give a list with some tags rather than explaining EVERY tag.

Tag

Note:
* Give the exact name of the font as they would appear in your text editor, like face="Arial" , remember that a user MUST have the font installed to display your page correctly.

** Size is specified in steps. 0 is the smallest and means the smallest size in the font-file. For example: The smallest standard size in Arial is 8pt, so size="0" means 8pt. 1 means 9, 2 means 10, 13 means 36 etc.

*** Colors are specified by a hexadecimal value of an RGB color. See appendix for hexadecimal coloring.

Images
Text explains a lot, but isn't always enough. Therefore images are used for explaination or just for fun or decoration. If we want to insert an image, we use the tag. An image can't contain anything else, so we don't have to close this tag. Of course as you would already guess, this tag has properties.


Note:
* There are a lot more properties than displayed here

Hyperlinks
Internet would be nothing if you couldn't redirect to other webpages. That's why hyperlinks exist. We make them using the tag. This tag has to be closed, because we want to know WHAT the hyperlink is (What is inside the crate).
This tag also has some properties. The most important one is href which specifies the URL.

Example:

GfxDiary


Note:
* More about frames coming soon

Bookmarks
Sometimes you want to refer to another chapter or paragraph within your page. Therefore we use bookmarks. We also use the tag for it. By giving the tag a name (with the name property) it's seen as a bookmark. To refer to a bookmark, specify a "#" with the bookmark name instead of an URL for the href property.

Example:

GfxDiary Bookmark

Goto GfxDiary bookmark

Tables
Statistics are always easy to shown in a table, and that's what we are going to make next.
We start of with a tag as usual, the tag we will use is (take a lucky guess) of course this tag has to be closed because a table can contain rows and columns. It would be easy to just specify the number of columns and the number of rows, but then row-spanning ain't possible. So, we just begin by making a new row with the tag. This tag has to be closed also because a row can contain cells, and that is exactly what we are going to make next, a cell within the row. It's done with the tag (Must be closed because a cell can contain something like text or images).

If we look at our code we get: (Note: tabs are added for better visibility)

When we want more cells in one row, we just add tags, if we want more rows, we add more tags. For example, an 2x3 table (2 rows, 3 columns):

Row 1, Cell 1
Row 1, Cell 2
Row 1, Cell 3

Row 2, Cell 1
Row 2, Cell 2
Row 2, Cell 3

Of course this isn't enough to make neat tables, because every cell is exactly the same size. As you can guess we are going to use tag properties. First we begin with tag properties for the tag. Again, I'll put it in a table, so you can easily pick. It still works the same as before ;)

Now for the tag, you can guess where those properties are for.

Note:
* If you in total specified less pixels than the table height, the cells are sized automaticly in most browsers.

** Colors are specified by a hexadecimal value of an RGB color. See appendix for hexadecimal coloring.

*** See next chapter for further explanation

Cell spanning
If you want to make a table that looks like the following:


You defenitly need rowspanning. As descriped above, you need the rowspan property. The starting row of the spanned cell needs this property set, in this case: rowspan="3" If you now specify the next rows, you only need three cells instead of 4.

Another example:

We first count 3 cells, 1 spanned over two rows. We get:

The second row, 1 spanned from the first row, 2 others left, and the first of them spanned over 2 rows:

The third row, one single cell, then one spanned from the previous row, and then a new spanned cell:

The fourth and final row has two ordinary cells and one spanned from the previous row:

And there you are, a nice table with spanned rows.

Final word

These are some basics of HTML, there is SO much more to explore in HTML, that's why I also made an TAG and property list. If you want to learn more about the layout of your webpage, get the STYLE-sheet tutorial, if you want to add javascript, get the JavaScript tutorial. JavaScript is used widely across the internet and serves many purposes you can't even imagine yet :)

This tutorial was written by Aspex, you are allowed to spread this tutorial as long as it's unharmed and you give me credit.

Version 1.0 - July 30, 2002

Appendix

Hexidecimal

Counting
As you normally count decimals, you count from 0 to 9, if you are at 9, the next step is going back to 0 but at the cost of raising the next number by 1.

Example:
000, 001, 002….008, 009, 010, 011, …. 019, 020,…098, 099, 100 etc.

If you going to count hexidecimal, you count from 0 to 15, if you are at 15, the next step is going back to 0 but at the cost of raising the next number by 1. Pretty the same he!
Because we don't have single numbers for 10, 11, 12, 13, 14 and 15 so we use A, B, C, D, E, F instead. We now have 16 different symbols so let the counting begin!

Example:
000, 001, 002,… 008, 009, 00A, 00B,…00F, 010, 011, 012…. 019, 01A,…01F, 020, 021…..09E, 09F, 0A0……0FE, 0FF, 100 etc.

Converting to hexidecimal
If you want to convert decimals to hexadecimals, you have to devide by powers of 16. (1, 16, 256, 4096, 65536 etc.) Start deviding with the largest power, note the answer and repeat with the reminder until you can't devide anymore.

Example:
Decimal value 3641, the biggest power of 16 which fits is 256, so: 3641 / 256 = 14 and a reminder of 57. 57 with 16 as biggest fit. 57 / 16 = 3 and a reminder of 9

14, 3, 9 ' 14 = E, so the hex number of 3641 is E39

Converting to hexidecimal
If you want to convert hexadecimals to decimals, you have to multiplie every number by powers of 16. (1, 16, 256, 4096, 65536 etc.) From right to left, use powers 0,1,2,3 etc.

Example:
Hexadecimal value E39. So the decimal value is 9x1 + 3x16 + 14x256 = 3641
Hexadecimal value C2D. So the decimal value is 13x1 + 2x16 + 12x256 = 3117

Hexadecimal colors
The RGB value of red for example: 255,0,0 in HEX this would be: FF, 00, 00.
To show the browser it's a HEX value, we put an # in front of it and leave out the ",". So a red text can be made using:

The Text

Very detailed tutorial, great for beginners!

I've made a few minor changes to the above post and made it easier to read and understand, as well as small spelling/grammer. ;)