Coding Basics

If you've browsed around VF a bit, chances are you've seen fabulous (and dreadful) examples of personalised layouts. If you don't know anything about web design you're probably wondering how the hell they do that (no there are no buttons you're missing).

Actually, web pages (and indeed Vampirefreaks layouts) are written in a language called HTML. This isn't nearly as intimidating as it sounds. In fact it's very simple. Don't believe me do you? I bet I can teach it to you in 5 minutes... Ready? 3, 2, 1, GO!

HTML consists of tags, which are easily identifiable by the fact that they appear between < and > marks. Most of the time you will use tags in pairs- a starting tag where you want to begin applying that effect, and an ending one where you want to stop. Ending tags look just like starting tags, except they begin with a / (backslash). For example:

Some starting tags can have extra twiddly bits in too, for instance, font tags can contain color, face or size:

Now let's try something a bit more interactive. To make clickable links, you use the a tag, like this:

href is the address of the page you want the link to lead to. It must include the http:// bit at the beginning! a tags have another extra twiddly bit, called target. Target lets you make your links open in a new window:

If you want to make your text move, you could use a marquee:

Marquees have other behaviors and other directions too:

Now just to confuse things let's look at images. Image tags are a bit different from most HTML tags because they don't ever have an ending tag. This image tag is correct and complete:

It contains the path to this picture that I uploaded to tinypic. To make any image show up on the internet you have to UPLOAD it, which means you store it on a website so that anyone can access it anytime.
[ Tinypic ] is a site that lets you store your images online for free. After you click upload, they will give you 3 different paths- The bottom one (the URL Link) is the one you need to put inside the image tag.

Making images into links is one trick that comes in handy quite a lot. It means you can make banners or buttons that people click on to go to your profile or cult. And it's as simple as taking the image tag, and putting it inside the link tag, like this:

Now you've made your fantastic clickable banner / image code, you might want to show it for other people to copy by putting it in a textarea like this:

Text in here!

To do that, you just put all the code you want to show inside textarea tags, like this:

Now let's cover how to annoy your visitors. Music! On VF there's an option to turn music (and flash) off in peoples profiles, so if you're going to try this, you might want to check you have music enabled so as you can see the results of your hard work. The option is under [ Edit Settings ]. Now for the music...

The embed tag doesn't require an end tag, but it's not wrong to include one- it's optional. Like with images the src is the path to where you've uploaded your music file. [ FileDen ] is a free site where you can upload music.

All of the other stuff in the embed tag is optional. Autostart means your music starts playing straight away, without people needing to press play. Loop means it plays over and over again, and if you set hidden to true you can accomplish the ultimate web design crime, and provide no way for people to turn your music off.

... and we're done. With about a minute to spare. Now what about borders and backgrounds and and coloring all the links and text on your page? Well technically that's CSS (aka stylesheets) which are a sort of subdivision of HTML, but with a whole new syntax, but what do you care? You already learnt one new language...

Even if you're truly lazy, it's well worth expending a little energy to learn CSS. It'll save you much time and frustration in the end. CSS stands for (Cascading) Style Sheets. It isn't an alternative to HTML, it's an extension- if HTML were the building blocks, CSS would be the paint. It's good for things like backgrounds, borders, coloring and cursors.

The first thing you need to know is that style sheets always go between style tags. These tell the browser that it's looking at a style sheet, and not just plain text with a few curly brackets in. Your style sheets on VF will always follow this format:

Since style sheets only recognise correctly formatted commands, the code above won't do anything, or indeed show up on your page. To see something happen, we have to actually style something. "html, body" refers to your entire VF page. We'll start simple. The code below will makes all the text on your page red, and the background silver.

The html, body refers to what we want to style, and the curly brackets contain the styles we want to apply. You could have one line in here, or many. Each line will be structured like the ones above- first the feature we want to change (eg background) and then the way in which to change it (eg, making it silver).

Some features can be changed in more than one way, for instance, background can be a color as in the example above, or it can be an image. To set an image as a background, you first need to UPLOAD it (see the section on images in the HTML bit above) and then take the url or path, and instead of pasting it inside an image tag, paste it here:

Let's take a look at some of the other stuff you can do to the body of your page:

Of course there's much much more- the advantage of CSS is that it lets you to get as specific as you like when styling stuff, but trying to cover everything would take all day, so let's move on to another really useful area- link styles. Links have 3 different states- a:link (regular unvisited links) a:visited (link to a page you've visited) and a:hover (whilst you are hovering the mouse over it). You can set different styles for these and make a link change color on mouseover, like this:

If you paste that code into your edit profile page, it would affect every single link, but what if you don't want to affect all of them? This is where VF gets really clever. Classes allow you to style specific boxes, images or links.

A class is an identifying name that can belong to just one item (eg, the rate bar has the class "rate"), or several items (eg, all of your thumbnails have the class "thumbnail"). Most of the stuff on your VF page has classes, and you can find pictures of what class belongs to what [ here on VFLayouts]. In CSS, classes are always preceeded by a dot, for instance, your main picture has the class defaultpic, so you would refer to it as .defaultpic, like this:

So now we can be specific, let's do tricks. Most of your profile (everything below the VF banner) is in one big invisible table called main. We can shrink your main table down to give your profile the skinny look (and let's give it a border so you can see what's happening):

Of course when you've achieved that, the VF banner and users online box are going to be annoyingly out of sync, so lets make them disappear. That whole top bit is in a separate invisible table called maintop, so if we hide maintop, it'll all disappear:

This hiding trick works on all tables and images, and, if you want to apply the same styles to a bunch of stuff, you can list them, separated by commas, like this:

Now, as promised, let's style some specific links. The ones on the lefthand nav table (which has the class leftnav). To only affect links in a specific table, you need to write the tables class followed by the link state in your css, like this:

Notice the lack of a comma between .leftnav and a:link, as this time we want to style leftnav a:links, NOT leftnav AND a:links. The lack of a comma means these styles will only affect a:links inside the leftnav.

And that concludes the basics of HTML, CSS and Classes. If you think I've missed anything important out, or anything is unclear, please get in touch, and if you want more detailed tutorials on html, css and site building, I'm working on it! This is just meant to be a quick Vampirefreaks relevant guide, to help you understand how these things work.