Note: There are tutorials on the internet that explain how to write complete HTML files. This guide only explains the techniques that will be useful in editing content on Invisible Gold powered websites.
|What is HTML?|
Well, it goes back to the early days of the internet. It's basically a cross between a word processor and a programming language. It was designed to be simple for anyone to learn. It is more complicated now, but the basics are quite simple.
A really basic HTML site is just text. However, you may want to make the text easier to read. To do so, put "TAGS" on either side of it. The first example would just say Hello World! The second example makes the word World bold.
Notice each tag has a beginning and an end. In this case the <b> starts the bold mode, and the </b> ends it. HTML tags work this way.
Look at these simple examples. They show how to make text bold, italic, underlined, and typewriter font (try it to see what it looks like.)
Another thing to note about the HTML tags is that they can be nested, (one inside another) and they can span across lines. Make sure to keep them in order. For example:
You can also switch to <pre> mode to line things up in columns exactly as you type them. For example:
<pre> one two three 1 2 3 a b c </pre>
There are a couple of special little tags that might come in handy. First of all is the "heading" tag. This is useful for text at the top of a page. There are several different levels of heading with 1 being the largest. (h1, h2, h3, etc.) Note that you could use a bold, font, and center tag to accomplish the same result, but heading tags add space above and below the text.
The horizontal rule
is another useful tag. It draws a line across the page. Note that unlike many other tags, it includes the begin and end function in one tag. Note: it must have a space between the letter 'r' and the '/'.
Once we start talking about fonts, we need to explain another feature of HTML. The font tag works like other HTML tags. You turn it on and off with <font> and </font>. However, it can also take attributes to determine which font to use, what color, and/or what size. For now, let's talk about basic colors. The next section will expand upon color choosing.
You can use a color name like red or blue for basic colors. You can also choose very specific colors based on mixing of red, green, and blue using hexidecimal color codes. If you like playing with numbers this will be sort of fun. If not, play around and find some colors you like (Photoshop's color picker or www.colorschemer.com) and make a note of the hexidecimal code.
Basically, a hexidecimal color code looks like #ff00ff. It starts with a # sign, and has 3 pairs of digits. The weird thing is that they go from 00 to FF. Yup, there is a A1 and
F0 and 3B, etc. Each digit can have the values 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. This is wacky, right? Well, it's beyond the scope of this document to explain.
(for reference, it is called Hexadecimal since there are 16 possible values for each digit.)
Links open up different pages in the web browser. They can also create a link to send an email. Note that a link is actually called an Anchor or HREF. Note, two of these examples have a "target" parameter. These tell the browser to open up a new window.
It is relatively easy to make lists of items. There are two types: ordered and numbered lists. They work the same way. In both examples, there are a pair of tags working together. You need to start and end the list tag, like any other tag. Inside, you can start and end individual list items.
Here is an example of an unordered, or bulleted list. Note that we start and end it with a <ul> and </ul>. Each line starts with a <li> and ends with </li>.
Next is an example of an ordered, or numbered list. It starts and ends with <ol> and </ol>. Again each line starts with a <li> and ends with </li>.
| HTML, Links, Fonts, Bold|