Justin Kistner

HTML basics for MySpacers

So, I get a lot of questions about how to do various things for a profile, so I thought I’d put together a little list of FAQs. This information is in no way complete, so you may find many different methods for accomplishing what I cover below. I can tell you that I am a knowledgeable web designer and most people use code incorrectly. At least you know that if you follow what I offer, you’ll be doing it right.

Overview

If you just want to copy and past code, then skip ahead. However, if you want to further your understanding about HTML and how it works, then read on.

HTML is an acronym for HyperText Markup Language. HTML is used label the content in a document, link to other documents, and embed objects such as images, videos, and Flash. Hypertext simply means text that contains links to other documents. And, a markup language is a standardized system labeling the components of a document to control formatting and provide an extra level understanding about the content on a document (like is it a paragraph, headline, block quote, etc.). Most HTML is an extension of grammer, like punctuation. You use it to label something as a headline, unordered list, etc. In fact, there is great debate among web developers about what the correct HTML tags are for things like mailing addresses, navigation menus, etc. Because HTML is connected to language, only humans can create HTML. Using WYSIWYG HTML editors, like Dreamweaver, can be helpful, but they don’t replace the knowledge of semantics and proper document structure.

HTML was originally a standard for SGML. Now, HTML is built on XML. XML is a tag based markup language. Tags are either wrapped around content or they are standalone. Their basic structure is this: <tag attribute=”value”>Content being wrapped</tag>

Tags are also referred to as elements. There are two types of elements: inline and block. Block elements, by default, start a new a line on a page. So, if you have two block elements, they will be stacked on top of each other no matter how wide they are. Inline elements are rendered immediately to the right of each other. So, if you have 4 inline elements, they will be side by side (unless they are wider than the page, and then they will drop down to the next line).

HTML is not supposed to be used for the aesthetic control of a web page. That’s the job of Cascading Style Sheets (CSS). HTML is currently maintained by the World Wide Web Consortium (W3C). The W3C was formed at MIT and is currently under the administration of the Internet Society.

Fun with HTML Code

Creating a link

To create a link, you’ll need to wrap the text or image you want to be a link with anchor tags. You’ll need to specify the address using the href attribute with your target web address as the value. Here’s an example:

<a href="http://www.example.com">Link Name</a>

You can copy and paste the link code above and replace the values with your own information.

Adding an image

Images are self contained HTML tags. Images are inline elements, so they will appear in the flow of copy wherever they are placed in the code. If you want to control where images live on a page, you need to place it in the appropriate spot in the code and/or use CSS. Here’s an example of an image tag:

<img src="http://www.somesite.com/your-image.jpg" alt="If your image has text, it's considered best practice to write it out in the alt attribute" />

You may copy and paste the code above. You’ll need to know the URL for your image. Make sure you don’t use a web page address instead of the web address for the image. The URL should end in .jpg .gif .png .tif or some other acceptable image file type.

Embedding Flash

If you want to place a Flash movie on your page, here’s the code that MySpace will allow:

</p> <param name="allowScriptAccess" value="sameDomain" /> <param name="YOUR-MOVIE-NAME" value="http://www.SOMESITE.com/YOUR-FLASH-MOVIE.swf" /> <param name="menu" value="false" /> <param name="quality" value="high" /><embed allowScriptAccess="never" allownetworking="internal" allowScriptAccess="never" allownetworking="internal" src="http://www.SOMESITE.com/YOUR-FLASH-MOVIE.swf" menu="false" quality="high" width="XXX" height="XXX" name="YOUR-MOVIE-NAME" align="middle" allowScriptAccess="never" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />

You’ll need to change some information. I CAPITALIZED the data you need to replace with your own.

Stylizing text

Sometimes you want to dress up your text with color, weight, or size. Here’s some tips for doing just that.

Bold

<strong>Bold</strong>

Italic

<em>Italic</em>

Colorize

<span style="color:rgb(204,0,0);">Colorize</span>

You can change the color by playing with the RGB values. The number must be between 0 and 255.

Highlight

<span style="background-color:rgb(255,204,0);">Highlight</span>

You can change the color by playing with the RGB values. The number must be between 0 and 255.

Size

<span style="font-size:2em;">Size</span>

The bigger the number before em, the larger the text will be. If you want smaller text, use a number less that 1, such a .9 or .6.

Font

<span style="font-family:Georgia,Times,serif;">Font</span>

Because not everyone has the same fonts on their computers, you have to pick some alternates. The first name is your first preference, and if your visitor has that font that’s what will be used. If they don’t have the first font in your list, then it moves on to the second. Best practice is to have your 3rd font be either serif (fonts with decorative tips like Times, Georgia, or Palantino) or sans-serif (fonts with plain strokes like Arial, Verdana, or Trebuchet).

Profile Mods

Adding a comment box to your main profile page.

You’ll need to log in as a different user, then click on your “Add Comment” link. On that page, you’ll have to view the source code. Then you need to look for the form code on that page (I recommend doing a find for <form>). There will be two forms, the first one is the search form for MySpace, the second one is your comment form. Copy the comment form code and paste it where you want it on your profile. You’ll need to copy all of the code between the opening <form> tag and the closing </ form> tag.

You can also put a message box on your profile from doing the same technique mentioned above, but clicking on “Send Message” link in the contact table and copying the form code from the page that loads.

Adding your blog to your profile

People ask me how I have all of my blog posts on my personal profile. I actually maintain the list manually. That means it’s not like when I add a post to my blog that it automagically shows up in my list. I actually copy the link to the post and create a new link in my list. I copy the link from clicking on “View Blog” on the blog home page and then I right-click on the date and click copy link location. Feel free to look at my source code and copy it.

Stylizing

I will post more tips on stylization in the future. I will be posting stuff like the CSS selectors you need to target specific components on the page, such as the friends table, the contact table, comments, etc. If you know CSS, and would like to create a MySpace div layout, then check out my post on MySpace div layouts. It has useful tips and links to other places for help.

09/25/2006 DIY Webmaster, MySpace, Social Networking, web 2.0, web design