MySpace : HTML for Beginners

By on

MySpace is a popular social networking site which allows you to customize everything – but that is not our tutorial for today. This tutorial is basically for the comments, where you can add images and change colours to text, among other things.

But many, like new users, do not know what <b> means. So, TECHGEEK is pleased to bring out the basics of HTML.

This tutorial is to be used with MYSPACE ONLY! Many new social networks use XHTML, which is a variation of HTML and there are things under this lesson which are not supported. You can comment on the TECHGEEK blog, however, do not use this tutorial – a follow up will be up soon (like next week.)

Like this Tutorial? Need your questions answered? Suggesting a new tutorial? Comment below!


HTML Tags

HTML tags follow a simple principal – less than sign-attribute-greater than sign. That’s it. However, you need to make sure you close the tag, or else it would not stop doing the certain attribute. To stop it, put it after the sentence or word you want the attribute and repeat the same thing, but put in a forward slash before the attribute.

Hint: All attributes will be bolded.

Bold, Underline and Italicise your words.

HTML is like a .doc file, it is all written in codes – however, in Microsoft Word, you do not see the codes for yourself as you type what you see. HTML is the back-end for all websites, and is need to be written correctly so it can render, or be read by your web browser, correctly.

Like Microsoft Word; you can make your text bold, underlined or italicised. To make a font bold, replace the word "attribute" from the above section with b. Your code should be, if the sentence was TECHGEEK.com.au would be: <b>TECHGEEK.com.au</b>.

To make text italicised, you just replace the attribute to i – that simple. Underline is also the same, just replace it with a u. The code should now be, for italics: <i>TECHGEEK.com.au</i>; and for underlining TECHGEEK.com.au, it should be: <u>TECHGEEK.com.au</u>.

Links, Embed and Images

Adding links just requires you to do the following: Use the less than sign-attribute-greater than sign, and replace "attribute" with a. Now add a space between a and the greater than sign and type in: href=". Now go to where you want to link to and copy and paste the URL after the quotation mark. Now close the quotation mark and type in a message, like Click Here. Close the tag.

This should be it, if you want to link to TECHGEEK: <a href="http://techgeek.com.au">Click Here</a>.

Images, however, require you to replace "attribute" to img. Now, just like the a attribute, you will need to put something else in it. Put a space and type in src=", and go find your image and its URL – an easy way is to right click on the image and click "View Image" and copy the URL. Now paste it after the quotation mark and close it. Now close the tag. You do not need to put anything between the tags.

It should be this, if I was taking the TECHGEEK Logo and putting it on a comment: <img src="http://techgeek.com.au/wp-content/themes/rnb/img/techgeek.png"></img>. You can also resize it by putting widths and heights, but we will do that in later tutorials.

Embedding Videos, however, is the most simple thing there is. You just need to go on Youtube or any video site and copy the embed code.

Change my font colour and size

Follow the less than sign-attribute-greater than sign basics, and replace the attribute with font. Now put a space and type in size=", and put any size you want the font to be. The font sizes are following the same ones you see on Word, so do not make them too big, or too small. After choosing a size, close the quotation mark. Now go to the end of the word or sentence and close the tag.

It should be: <font size="15">TECHGEEK.com.au</font>.

Now, this is where it gets easy. Changing the font size and colour are under the same tag, so you can just do the same thing as above. For colour, add a space and type in color=" (Note the American spelling). Now, you need to find something called a Hex Code. This is basically the computer’s way to make colours. You can also type in red, black, green, blue, etc.; but they do not understand the concept of dark blue or light blue.

To find the hex code of your colour, visit this site.

After choosing on a colour, now close the quotation marks. If you haven’t closed the tag, close it now. It should now look like this: <font size="15" color="black">TECHGEEK.com.au</font>.

You do not have to have size and colour in the same tag, you can have a <font size="15"> tag and a <font color="black">, but not next to each other.

Is there an easier way?

Yes there is. For Firefox users, you can install an extension called BBCode. This will allow you to format your comments easier with BBCode (for forums), XHTML (for example, the comment form in TECHGEEK) and HTML (for Myspace). If you have not gotten a single word of this, or just need an easier way to do this, this is a great plugin.

How it works is that you just right click on a text box and you should see BBCode. You will need, however, to configure the options to show HTML tags.

Join the Conversation