CONTENTS OF THIS PAGE:



INTRODUCTION | SPECIAL SGA LINK TAGS | FONT TAGS | HOW TO MAKE A TABLE | IMAGES
click "back" on your browser after you have finished reading each section



INTRODUCTION



Hi all, and welcome to the HTML Primer Page! After you have studied this page thoroughly, you will know everything you need to know to construct your Briefing Room, or BR for short. This guide only explains the very basics. If you want advanced information on how to code the HTML tags that are not listed here, you can go here.

Firstly, how to edit your BR. For this, you can either access level 25 and go to where it says Edit Briefing Room, or you can click on the link that takes you to your BR on the site (as you know, on each SGA-page there is a link to your Section, Division and Team Briefing Rooms). There, you will see a red lettered link that says "Click Here to Edit". Click on it, and you'll see a black square with nothing in. This is where you play with it. This is where you will put all your HTML tags. Once you have typed everything in there you click on Set Page, and your BR will show in the next window.
You can also set it to show that the BR has been changed. But I would advise you to first set your page, check it, and only then set it to show it's been changed for x amount of days/hours (to do that you have to click on edit again, obviously). NOTE: you can only click on EITHER hours OR days, OR 1 day, xx hours. This is why it is best to set the new code first and then set the time, else you will loose all your hard work if you mess up with the timing.

You REALLY should also copy everything into a TEXT-file and save it on your own computer for a back up in case things go wrong.

The way to go about is is this : you should save the file as a proper HTML file, with all the necessary tags there to see it in your browser before you will put it up on the SGA, and then only copy the stuff inside the BODY tags in the Click Here to Edit-page.

Although, if you use advanced tags like javascript and CSS, it might clash when you put it on the SGA, because of all the stuff that is generated above and below the BR (points, ribbons, elevator, etc...).

So, my advice is: Keep Things Simple. There's no need for fancy stuff like moving text or music or whatever, especially not in the beginning as it will only confuse you. You can add all of that later if you so wish (once you are a LOT more familiar with HTML in order to make it work!), but I do warn you that it will make your page slower to load, and harder to code.

To save your page on your computer you put the following into an empty notepad file (= a text file which you will save as "BR.html" (don't forget the dot between BR and html), that way your browser will recognise it and generate it correctly) :



Now you have a copy of your BR on your computer.

Open this file again to work in it now - if you have it still open, click in it so it becomes the active file. Save it regularly as you work in it.

Now you start thinking about what you will put in the BR.

The elements that should be there are:
- your Team's name,
- your name and a way to contact you,
- and maybe a list of your team members... the possibilities are endless.

As this is a RolePlay site, think about what your team/division/section could mean. Think about what you think it would do if it were a REAL SG-team. Then start building your BR accordingly, you think of a colour scheme that would fit it, etc.

The contents of the BR are up to you entirely. Let your imagination run wild, and play with it. I will only teach you *how* to put everything up. I cannot build your BR for you, in the end YOU have to do it.

OK, so how do you put every fancy bit up that you just dreamt of?

Well, I will start with this: first of all the BR does NOT need the basic html page tags, like HTML, HEAD, TITLE, and BODY (only the copy stored on your computer does!). This is because you are already coding INSIDE an HTML page (the black square with the Click Here to Edit text).
So you get to play with font and table and image tags, instead.

OK the basics are out of the way, now we go to the...

SPECIAL SGA LINK TAGS



1) To comm someone:

The stuff after the ?log= is a variable, it is their locker number. As an example I've used my own locker number. Study the code below:

HTML TAGRESULT
Put the Name Of the Person Here


2) To see their ribbons and medals:

The stuff after the ?ur= is a variable, it is their locker number. As an example I've used my own locker number. Study the code below:

HTML TAGSRESULT


Put Their Name here


OR:



3) To greet someone with their rank and username on the page:

I think this is about the easiest piece of code to put in the BR.

4) Polls:

For Polls you go here and follow CD's instructions. Once you have created your poll, you put the code for it in the BR. The code is [POLL ID=xx], you'll get the number once it has been created. The poll should be put somewhere where it can easily be seen, so people can vote on it! Either at the top, right after your greeting and above the news section, or inside the news section, etc. etc. Just play with it.

If you reread the poll creation page, CD has also made it so that you can change the colour scheme of the Poll , just read the whole poll page very carefully.

OK this concludes the SGA special tags you can't use anywhere else but on the SGA!

Now we go back to the basic HTML-stuff that you CAN use everywhere.
First... how to change your font. This is easy:

FONT TAGS



A piece of text can have all the colours and sizes and typefaces that you want it to have. But, there's a catch. You might want to use a very pretty font. Only, your friend might not have this font on their computer, so they won't see it, and their computer will show the font probably something like Times New Roman or whichever system font that comes closest to the font that you coded.

So, the safest is to use either Arial, Times, Verdana, or Comic Sans MS.
Those are the basic fonts that everyone has on their computer.
For sizes and colours, well they can be huge or small, and can have every colour of the rainbow. The basic SGA font is Times and it has that ugly green as basic colour. For links, the basic colour is red, but you can also change that. I'll show you how, just study the code in the copy/paste areas.

FONT FACE

HTML TAGSRESULTS
 Times New Roman
Verdana
Comic Sans Ms


FONT SIZES

HTML TAGSRESULTS
 basic normal size
a little bigger
even bigger
getting there
this is HUGE


FONT COLOURS

For font colours you can go here, it is a good site to select your colours. I've found that with most pages, the best thing is to stick to two or three colours that are contrasting enough and match enough to be esthetically pleasing. But this is only my own opinion, you pick your colours the way you see fit, just make sure that your fonts are legible!

The code is the following. The number after # is called a HEX-code, hexadecimal, I believe. It's how colours are generated on a web page, they use a bit of red, green or blue to make all the colours.

HTML TAGSRESULT
 Your Text Here
Your Text Here
Your Text Here
Your Text Here
Your Text Here

LINK COLOURS:
TEST


HOW TO MAKE A TABLE



This is about the trickiest bit of code you will ever have to write. Tables are quite hard to keep track of, especially if you have a large number of them....
But, it is about the only way possible in a BR to position your text if you want stuff centered and on one line and logically above other lines... I'll attempt to explain every tag first.

TABLE : this is the first tag of every table, it defines the table, it tells the browser, ok bud, you gotta put a table there, savvy?


TR : this is the start tag of every row of the table.
/TR : this is the end tag of every row. DO NOT FORGET TO END THEM, for else you will run into SERIOUS trouble, believe me.

TD : this is the start tag of every cell within the table, wherein the content goes.
/TD : this is the end tag of every cell. DO NOT FORGET TO END THEM, for else you will run into SERIOUS trouble, believe me.

/TABLE : this is the end tag of every table. DO NOT FORGET TO END THEM, for else you will run into SERIOUS trouble, believe me.

And this is how you code a table. Study it VERY carefully to see how it works!

HTML TAGSRESULT
HeaderHeader 2
Text 1Text 2

You can play around with this, obviously.

HTML TAGSRESULT
HeaderHeader 2
Text 1Text 2

You've noticed new codes in there.
ALIGN : tells the browser how to align it. Center, or right. Default is left.

BORDERCOLOR : tells what colour the border has to be, works the same way as with the font tags, you look for a pretty colour and find its number, and then put that number after the #.

WIDTH : This is a little tricky. You'll need to experiment with the number (how many pixels) to see which width of the cell you would prefer. Do not make anything on your BR bigger than 390 pixels wide else you will have loads of trouble!

IMAGES



Now this is fun. You will need to have a decent graphics program for this though. Something like Photoshop Elements or the one JASC made, Paint Shop Pro.
The basic Paint of your Windows version will work too but the BMP files Paint creates are HUGE in size and will take forever to load. I do think that there are generators around out there to convert BMP files into JPG and GIF - the standard for images on the web.
Just have a look on google or any other search engines, and try some out once you made something.

Images can be used for:
- Flashy text. You will have noticed by now that the way text is generated, is not always how you imagined it to be. With images you can circumvent that and create just the type of flashy text that you want. You'll have to be a bit savvy with your program though, but just experiment with it, and play.

- Team logos. You can try and make them yourself if you have the graphic skills. There are people on the SGA who could make them for you if you are friends with them and ask them nicely! I can't do that, for I don't have the templates for it.
- And other things? Well your imaginatioon will provide you with the answers!

Once you create your image you will need a webhost to upload it to. Preferably one that allows Hotlinking! = linking to another page than to the webhost where you have uploaded it to, most free hosts like yahoo or whatever do NOT allow this, you can look for webhosts in any search engine, then set up an account with them and start uploading!

Then you will need the url of that image to put it on your BR.

The tag for the image is the following:

HTML TAGSRESULT
Tag explanation:

SRC : where the image's url is put and where the image is downloaded from.

WIDTH/HEIGHT: the dimensions of the image. You will find that out in your graphics program where you created the image. You can always delete the dimensions and then the browser will generate it for itself, the only thing that will happen is that it might load slower.


This concludes the primer for now, I hope you found it helpful.