Useful HTML Guide

261 Broad Street
Windsor, CT 06095
(860) 285-0172
support@invisiblegold.com

Your Website Should Be Easy to Edit

Useful HTML Guide

It seems that you can't go too far into the computer world now without hearing about HTML. We know that it's a programming language, or atleast a technique for making text bold or italic and setting fonts. Invisible Gold allows you to enter HTML into many of the text fields so you'll want to know a few of these handy tags.

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.

Hello World!	Hello World!
<b>Hello World!</b>	Hello World!
Hello <b>World</b>!	Hello World!

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.

Styles
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.)

Bold	<b>example</b>	example
Italic	<I>example</I>	example
Underline	<u>example</u>	example
Typewriter	<tt>example</tt>	`example`

Text Formatting
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:

<center>Centered Text</center>	Centered Text
<center>Check <b>This</b> Out</center>	Check This Out

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>

Special Tags
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.

<h1>Sunday Online</h1>	Sunday Online
<h2>Sunday Online</h2>	Sunday Online
<h3>Sunday Online</h3>	Sunday Online

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 '/'.

<hr>

Fonts
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.

<font face="arial">Sample Arial Font</font>	Sample Arial Font
<font face="Times">Sample Times Roman Font</font>	Sample Times Roman Font
<font face="arial" size="1" color="red">Tiny Red</font>	Tiny Red
<font size="5" color="blue">Big Blue</font>	Big Blue

Font Colors
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.)

#FF0000	RED
#00FF00	GREEN
#0000FF	BLUE
#000000	BLACK
#FFFFFF	WHITE
#777777	GREY
#FFFF00	YELLOW
#FF00FF	PURPLE

Links
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.

<a href="http://www.google.com">Click Here</a>	Click Here (clicking this goes to google.com)
<a href="http://www.msn.com" target="_blank">Launch MSN</a>	Launch MSN (clicking this goes to msn.com in a new window)
<a href="mailto:info@invisiblegold.com" target="_blank">Send Me an Email</a>	Send Me an Email (clicking this starts an email message to info@invisiblegold.com address)

Lists
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>.

<ul><li>One</li><li>Two</li><li>Three</li></ul>

One
Two
Three

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>.

<ol><li>One</li><li>Two</li><li>Three</li></ol>

One
Two
Three

Keywords:

HTML, Links, Fonts, Bold

Useful HTML Guide

Sunday Online

Sunday Online

Sunday Online

Latest News

Support

Contact Us