Tutorials: Basic HTML
HTML, which stands for "Hyper Text Mark-up Language", is a programming language used to build websites. The entire Domain has been coded from scratch using HTML, which isn't too hard to learn. Granted, if you check the source code * of most sites, you'll be confronted with a wall of nasty-looking code, but if you were to do this on the domain you could see the code broken down into readable portions, as no advanced scripting has been used. Of course, if you don't know HTML, the code means nothing.
HTML is little more than text interspersed with a series of tags enclosed in angle brackets (< and >). Granted, you occasionally have things such as entities (an ampersand, &, followed by some numbers or letters, resulting in a special symbol, such as the copyright symbol), but for the most part, you are simply dealing with tags.
Most tags come in pairs, such as <CENTER> and </CENTER>, which specifies that anything between those two tags is aligned to the center of the page. Note the use of the American spelling; if you are outside North America, you must remember to use the American "E after R" rather than "R after E".
Tags in HTML are not case-sensitive. This means that <Center>...</Center>, <center>...</center>, and <CENTER>...</CENTER> all do the same thing. You can even mix and match, such as <CENTER>...</center>, which still works.
To start off, every HTML document (the technical term for "file") must have <HTML>...</HTML> tags around everything on the page. This is telling your computer that it's reading a HTML file rather than just a plain text file.
Then, you need to include a set of <HEAD>...</HEAD> and <BODY>...</BODY> tags, to specify different parts of the document. Generally, all you will want to put in the document head (the part between the <HEAD>...</HEAD> tags is a pair of <TITLE>...</TITLE> tags to specify the title, which is what text goes at the top of the window (next to the minimise, maximise/restore, and close buttons).
The document body is the main part of the document. The rest of the page goes here, including text, pictures, tables, and all the rest of it. Typing text on its own will simply transfer the text to the screen, but if you want to organise it, you need some more tags.
Putting a <BR> tag anywhere will cause a line break. This makes the text go down to the next line, as though you had pressed the Enter key on your keyboard (Actually pressing the enter key won't change the document). The <BR> tag is stand-alone; that is to say, there is no closing tag (a tag with a foreslash (/) in it).
Headings, such as the one at the top of this page, are done with <H1>...</H1> through to <H6>...</H6> tags, with H1 being the largest and H6 being the smallest.
Using bold, italic, or underlined text is as simple as <B>...</B>, <I>...</I>, and <U>...</U> tags. You can also make the text bigger with <FONT SIZE = +1>...</FONT> or a specific value, such as <FONT SIZE = 5>...</FONT>. You can change the colour of the text with <FONT COLOR = #FFFFFF>...</FONT> or any other hexadecimal* value, but you must remember to put a hash (#) before the value.
Hexadecimal colors go #rrggbb, with a two-digit hexadecimal value for each colour. A few sample colours are shown below:
| Red | Green | Blue | Result |
| 00 | 00 | 00 | Black (can't be shown on this background) |
| 80 | 80 | 80 | Grey |
| FF | FF | FF | White |
| FF | 00 | 00 | Red |
| 00 | FF | 00 | Green |
| 00 | 00 | FF | Blue |
| 80 | 00 | 00 | Dark Red |
| 00 | 80 | 00 | Dark Green |
| 00 | 00 | 80 | Dark Blue |
| FF | FF | 00 | Yellow |
| 00 | FF | FF | Cyan |
| FF | 00 | FF | Magenta |
| 80 | 80 | 00 | Dark Yellow |
| 00 | 80 | 80 | Teal |
| 80 | 00 | 80 | Purple |
| AA | 70 | 00 | Brown |
If you ever need to convert Decimal to Hexadecimal, multiply by 10 and divide by 16. To convert Hexadecimal to Decimal, multiply by 16 and divide by 10.
But now I hear you cry, "A table! How did you do that?". Well, it's simpler than you might think. First, you use a <TABLE>...</TABLE> tag. In the above example, to get a border around the table, you use <TABLE BORDER = "1">...</TABLE> to specify a border for the table along with the table itself. For every row, you use <TR>...</TR> tags, and for every column, you use <TD>...</TD> tags, in that order. If you want to see for yourself, click "View", then "Source", and scroll down to the table.
Pictures next. For a picture, the basic tag is <IMG>, another stand-alone tag. However, just the IMG tag won't get you anywhere. You have to put "SRC" after the "IMG", as in, <IMG SRC>, and then the URL of the image. For the picture at the top of this page, I could use <IMG SRC = http://darkut.free.fr/Icons/tutorials_button.gif>, which would result in:
Note that, if you check the HTML code with "View source", you'll see I've used a local reference, but that's for another tutorial.
To find the URL of an image on the internet, right-click on it, then left-click on "Properties". Note that you CANNOT link to a file on your hard drive, even if you have a DSL connection that is permenantly on. You must find a host for your image, but again, that's another story... er, tutorial.
And finally, what about hyperlinks? Hyperlinks, in case you don't know, are textual (or image) links that you click on to go to somewhere else. Linking to a HTML document opens that document, linking to an image file displays the image, and linking to any other type of file will (usually) download it, after the user (that's you) confirms the download.
To make a link, you need to use the "Anchor" tag, <A>...</A>. This tag on its own won't do anything, as it can be used with other functions. For now, we'll just look at "HREF", which creates a hyperlink ("Hyperlink REFerence"). All you need is the URL of the page, image, or whatever you are linking to. To link to this page, you would need <A HREF = http://darkut.free.fr/Tutorials/html_tutorial.htm>TEXT</A>, with the text for the link where the word "TEXT" is. That tag as is would result in TEXT, but you can change the word "TEXT" to whatever you want, even a whole sentance.
Remember to get the URL* exactly right by using Copy and Paste. Select the URL by left-clicking and dragging around it, then pressing Ctrl+C on your keyboard. To put the text down into a text editor, left-click where you want to paste the text, then press Ctrl+V on your keyboard.