Graphic-Goodies.com - HTML Tutorial

Navigation

Myspace Layouts

Myspace Comments

HTML Tutorial

HTML is used to changed the format of text. You can use HTML just about anywhere, and it is very easy to learn.

1) Font tags.
All font tags look like this: Text That obviously won't do anything because you haven't set any attributes. These tell the tag how to display the text.

Font color:
To set the color of a font, add a space after "font", then "color='red'"
Text displays as Text
There are many named colors you can use. W3Schools has a full list of supported color names.
You may also use a hex code, which lets you use a much wider variety of colors, but if you're a beginner it's best to just stick with the names for now.

Font size:
You can also set the size of your text with the "size" attribute. Unlike on commonly used messengers such as AIM, Yahoo!, MSN, etc. size in font tags are in a measurement called "points" rather than "pixels" in the messengers. Sizes range from 1 to 7 in points.
Size 1 shows as Size 1
Size 2 shows as Size 2
Size 3 shows as Size 3
Size 4 shows as Size 4
Size 5 shows as Size 5
Size 6 shows as Size 6
Size 7 shows as Size 7

Font face:
Face defines what kind of font you are using. Common fonts are Arial, Tahoma, Verdana, Times New Roman, etc. It's best to always put quotes around font names because of font names such as Times New Roman that consist of multiple words. Note: If the page you are on is using a font not installed on your computer, the default one will be displayed.
This is Arial shows as This is Arial
This is Tahoma shows as This is Tahoma
This is Times New Roman shows as This is Times New Roman
This is Verdana shows as This is Verdana

It'd be pretty tedious to repeat the font tag over and over if you wanted, say, the word "Myspace" to be blue at a size 3 with the font Comic Sans MS, which is why you can put all of these attributes into one tag.
Myspace shows as Myspace

2.) Other tags.
You can also make your text bold, underlined, italicised or with a line through it.
Bold shows as Bold
Underlined shows as Underlined
Italicised shows as Italicised <s>Strikethrough</s> shows as ~~Strikethrough~~

To center your text:
<center>Text here</center>

The linebreak puts text after it on the next line, like hitting enter in a word processor. 

If you were to put it between the words 'brown' and 'fox' in "The quick brown fox jumps over the lazy dog.", the result would be:
The quick brown
fox jumps over the lazy dog.

A horizontal rule can be used to separate content, usually for organization or other purposes. <hr> I'll use the linebreak from the previous example with this.
"The quick brown <hr> fox jumps over the lazy dog." shows as "The quick brown

fox jumps over the lazy dog."

The first line is "The quick brown", and then everything after moves to the next line with the linebreak tag . The horizontal rule <hr> tag comes next as a line, and one more linebreak is inserted after to put "fox jumps over the lazy dog" below the horizontal rule.

3.) Images.
To post an image, you'll need the full image URL, which will start with http:// and end with an extension like .gif, .png, .jpg, or sometimes .bmp. There are other image types but those are the most common. An example will look something like http://graphic-goodies.com/pro-icon-1.png
To post the image:
<img src="http://graphic-goodies.com/pro-icon-1.png"> shows as

Change the red to your image URL.

Ever wanted to add roll-over text? You can with the "alt" attribute.
<img src="http://graphic-goodies.com/pro-icon-1.png" alt="Welcome to Graphic-Goodies!"> shows as

Just put your mouse cursor over the image to view the text. Make sure you keep the quotes around your words.

Note: In Mozilla Firefox, alt text does not display when the mouse is on it, so it's best to add the "title" attribute as well as your "alt" attritube (both work exactly the same). <img src="http://graphic-goodies.com/pro-icon-1.png" alt="Welcome to Graphic-Goodies!" title="Welcome to Graphic-Goodies!">

4.) Links.
To make a hyperlink, use the anchor, or "a" tag.
<a>http://graphic-goodies.com</a> shows as http://graphic-goodies.com
Make sure you include the http://

If you have specific text you want linked, add the "href" attribute. Your image URL will go there instead, and your text will go between the starting and closing tags. <a href="http://graphic-goodies.com">Linked text</a> shows as Linked text

You can also link images, too! To do this, just place the image code from before into the anchor tag.
<a href="http://graphic-goodies.com"><img src="http://graphic-goodies.com/pro-icon-1.png"></a> shows as

Your image is linked, but now there is this annoying border around it. To remove this, add the "border" attribute to the image tag.
<a href="http://graphic-goodies.com"><img src="http://graphic-goodies.com/pro-icon-1.png" border="0"></a> shows as

If you have any questions regarding this tutorial or the site, or have ideas on how this tutorial can be improved, contact us.

Profile Goodies

Myspace Music Skins

Create Your Own

HTML Tutorial

Link Exchanges