UKCS Mega Game Servers

by **wildross** on Wed Dec 14, 2005 5:23 pm

ok i was going to put this in the art section. but its not really art is it, coudlnt find no where else for it,,, so here it is

Ok I had to do this for a friend at college so I thought I would post it here also,

This is the basics ways of making a html site, using notepad as my editor,

HTML reads from left to right, it won’t drop a line when you press enter; you need to use tags to do this,

How tags work, they need to be opened and closed below are the tow tags
<opens the tag >
</ closed tag>

You must always open a tag using < > and close using</> if not then it wont be read right giving you errors,

Text tags,

Code: Select all: <b> this is bold text </b> <I> this is Italic text </I>

Command tags,

<br> this is the command for dropping down to the next line on the page, (just like pressing enter)

<hr> this is a line across the page, I remember this by horizontal rule (not its true meaning though )

<p> It does the exact same thing as the <BR> above except this tag skips a line. BR just jumps to the next line, P skips a line before starting the text again.

<html> Tells that the document contains html code, you must use this when making sites, (remember to close this off at the end using </html>)

Linking

Here is the linking system and how it works, this tag is different from all the others as it uses a different open and close tag,

Code: Select all: <A HREF="http://www.uk-cstrike.net">The best server in the world</A>

^^ this is the open tag, ^^ this is the close tag
http is the command for a webpage, below is the command for a email address

Code: Select all: <A HREF="mailto:iam@home.com ">Email me</A>

All you will see on the screen is the blue bit, none of the
<A HREF="mailto:iam@home.com "> or the </A>

IMAGES

This is the command for placing images on the page,

Code: Select all: <IMG SRC="image.gif">

Img= image
Src = source,

Note the 2 “ before and after the location of the image, and the type of image it is .jif or .jpeg this is important or the image wont show,

You can use images to link to places, if you have seen my site, then you will see that my links are pictures, not text

Here is how you do this

Code: Select all: <A HREF="http://www.uk-cstrike.net"><IMG SRC="ukcs.gif"></A>

It has the reference, the image source and the </A> This would be a linking image,

If you use this you will see that when you mouse over it you will have a small blue (normally) border come up, below is the command to stop that

<IMG BORDER="0" SRC="ukcs.gif">

“0” being the border width,(in pixels)

Images can be manipulated using code, I will show you how,

Code: Select all: <IMG ALIGN="right" SRC="ukcs.gif"> <IMG ALIGN="center" SRC="ukcs.gif"> <IMG ALIGN="top" SRC="ukcs.gif"> <IMG ALIGN="middle" SRC="ukcs.gif"> <IMG ALIGN="bottom" SRC="ukcs.gif">

You can also define the height and width with commands,

Code: Select all: <IMG HEIGHT="##" WIDTH="##" SRC="ukcs.gif">

Just replace the ## with the value you want, anoter little tip is to use the *(star) button in place of the #, this makes the image use as much space as avaible,

EG

Code: Select all: <IMG HEIGHT="*" WIDTH="*" SRC="ukcs.gif">

This image would fill the page, you can also use % to define images

That’s it, this is just the basics, if any one has requests on what to do then, just ask I have a lot of free time over xmas, I aim to learn php then

by **KillswitcH** on Wed Dec 14, 2005 5:29 pm

Can someone sticky this?

by **Little_Devil** on Wed Dec 14, 2005 6:02 pm

KillswitcH wrote:Can someone sticky this?

Done.

by **Psychic Duck** on Wed Dec 14, 2005 6:12 pm

hmm, you needed to check the "disable html" box when you posted it, that way you wouldn't get the tags being read as html

by **wildross** on Wed Dec 14, 2005 6:22 pm

firstly thanks LD

secondly im going to add the page layout system,

This needs to be in every page,

Code: Select all: <html> <head> </head> <body> </body> </html>

In the head section you place data like the page title,
(<title>page title</title>) and other things, normaly on basic level html you only place the title in there, if not you just open and close it,

with in the body section, this is like the main section of the site,
when opening it, you extend out the < > to contain infomation on the body, here is my body line from my portfolio on my site.

Code: Select all: <body bgcolor="#cccacb"TEXT="ffffff" bottomMargin=0 leftMargin=1 topMargin=1 rightMargin=0>

This infomation defines the page, you may think i spelt colour wrong but, its spelt the american way for some strange reason, so rember its color not colour

then, you do what you want with the page, making sure its with in the body section, rember to close the body section with </body> and then close the html section </html>

have a play see what you can do,

by **TuPac** on Wed Dec 14, 2005 7:13 pm

That's very helpful Ross.

Also, how do you know the codes for the colours?

by **pzych0** on Wed Dec 14, 2005 7:18 pm

If you hover over the colour selector in most graphics programs it tells you the hex code. Alternatively, there are hex charts on the net.

For example

http://www.hypersolutions.org/pages/rgbhex.html

Hope this helps.

by **wildross** on Wed Dec 14, 2005 7:18 pm

TuPac wrote:That's very helpful Ross.

Also, how do you know the codes for the colours?

i use photoshop to get my code, there are alot of html colours,

there is site with it on. just easyer to use PS

by **wildross** on Thu Dec 15, 2005 12:28 am

Right moving on to tables,

What is tables you ask? Well its just like in excel tables of data to be displayed, this is a simple tast really, as I will show below

The code

Code: Select all: <TABLE> <CAPTION>caption</CAPTION> <TR><TD> CELL </TD></TR> </TABLE>

That is the base for any table, I will define each command

<TABLE> This is the open command for talbe

<CAPTION> this give the table a title, I have never used this though as I find it a bit bland,

<TR> Stands for table row,

<TD> table data, what ever is between <TD> and </TD> will be in a cell, once you open up a new <TD> it will be in a new cell,

</table> this closes the table command ending the table,

---------

I work as I see it in my head, every person will have there own way of doing this, I just find it easier,

Example,

Code: Select all: <TABLE> <TR><TD>Cell one</TD><TD>cell 2</TD><TD>cell 3</TD></TR> </TABLE>

This table here would be, 1 cell high and 3 across

Below is the code for a table 3cells high and 3 cells wide,

Code: Select all: <TABLE> <TR><TD> 11 </TD><TD> 12 </TD><TD> 13 </TD></TR> <TR><TD> 21 </TD><TD> 22 </TD><TD> 23 </TD></TR> <TR><TD> 31 </TD><TD> 32 </TD><TD> 33 </TD></TR> </TABLE>

As you can see I didn’t need to use <BR> at the end of each row, I used the <TR> (table row command) this ends that row and starts a new cell below the first one,

-----------

Manipulating cells for text and links.

Just like any html code you can manipulate it to do what you like using the commands we have already used,

Just like with the body code, you can define the state of the table with in the first line of the table command

Code: Select all: <TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1">

With this code the table would have a border of 3, be spaces by 1 and have a padding of 1

With in any cell you can have, any of the following,

* text
* links
* images
* linked images
* borders

All of these can be manipulated to do what you want,

-TEXT

<TD ALIGN = "center"> data </TD>

Notice how the command for the cell is in the opening line of the data, see below

Code: Select all: <TD ALIGN = "center">

This is the same for most of the html stuff that I have done, if you want to define anything then you have to have it in the opening line of the command your trying to do,

- links, images and linked images,
They are the same as normal, you just place the link (including the href, url, text, </a>) between the <TD> and </TD>

Coloring with in tables

Code: Select all: <TD BGCOLOR="#000000"> <FONT COLOR="#ffffff">Yellow Stars</FONT>

Just like when adding the command line to the <body> head, easy,

Most of the stuff you have learnt now, will be all you need to do a simple website,

Moving on to,

Colspan and rowsapn

Ok, I will define each one, then show the code for each

colspan = this is when a column spans over a number of columns, make sence,,, didn’t think so I will explain in the easier terms,

you have 2 rows, the first row has one cell in, the bottom has 2,
the top cell still spans the same length as the bottom to,

EG
############ (row 1)
##### | ##### (row 2)

The code for this is,

Code: Select all: <TABLE BORDER=3 CELLSPACING=3 CELLPADDING=3> <TR> <TD ALIGN="center" COLSPAN="3">This Goes Across the Top!</TD> </TR> <TR> <TD ALIGN="center">Cell</TD> <TD ALIGN="center">Cell</TD> <TD ALIGN="center">Cell</TD> </TR> </TABLE>

As you can see, it says ‘colspan=”3” and there is 3 cells below this,
If you had 2 cells then it would be colspan”2”
If you had mixed numbers, then you would have a error,

Right now on to rowspans;

Rowspan – this is where a row spans over the columns
This is just the same as colspans, just the death of 1 cell will equal the total of the ones next to it,
Here is the code

Code: Select all: <TABLE BORDER=3 width=340 CELLSPACING=3 CELLPADDING=3> <TR> <TD ROWSPAN="2" ALIGN=center this down the side</TD> <TD ALIGN=center Cell</TD> </TR> <TR> <TD ALIGN=center> Cell</TD> </TR> </TABLE>

This has a rowspan of 2, aas it spans across 2 rows,

ADDED THIS IMAGE AS ITS EASY TO UNDERSTAND

Simple stuff really,

You can determine the state of cells a bit more by adding things like width height and stuff like that,

I will leave it there for now, and give you change to have a go, feel free to contact me if you need to,

by **egbakaet** on Thu Dec 15, 2005 12:32 am

Yet again, nice tut. Tables are my life in html lol.

by **TuPac** on Thu Dec 15, 2005 1:55 am

<TABLE>
<TR><TD> Played </TD><TD> Won </TD><TD> Lost </TD></TR>
<TR><TD> 1000 </TD><TD> 999 </TD><TD> 1 </TD></TR>
</TABLE>

Would that come out something like -

Played ---------- Won ---------- Lost
1000 --------- 999 ------------ 1

Obviously not with the lines, but am I getting the jist or is that completely wrong? If so how do you title each coloumn?

by **ƒookin ßomboclaat!!™** on Thu Dec 15, 2005 1:58 am

legend

by **TuPac** on Thu Dec 15, 2005 1:59 am

Am I right or not? lol

by **wildross** on Thu Dec 15, 2005 2:13 am

TuPac wrote:<TABLE>
<TR><TD> Played </TD><TD> Won </TD><TD> Lost </TD></TR>
<TR><TD> 1000 </TD><TD> 999 </TD><TD> 1 </TD></TR>
</TABLE>

Would that come out something like -

Played ---------- Won ---------- Lost
1000 --------- 999 ------------ 1

Obviously not with the lines, but am I getting the jist or is that completely wrong? If so how do you title each coloumn?

Yes it would come out like that mate,

by **TuPac** on Thu Dec 15, 2005 2:16 am

Yay, I'm not as stupid as you look

hehe

by **egbakaet** on Thu Dec 15, 2005 2:19 am

Of course you are. ROFL jk mate lol. I <3 tables. <3<3<3.

by **wildross** on Thu Dec 15, 2005 2:30 am

|--UPDATE,

ADDED AN IMAGE ON TABLE SPANING,

by **wildross** on Thu Dec 15, 2005 3:49 pm

Right now we will move on to Frames and iframes, As each one is different I will break them down and do them 1 at a time,

FRAMES

Frames - a frame is a page with in a page if that makes sense, Wildmedia’s main page has 3 frames,

- top
- left
- main

Why have I done this? – simply because you can code one frame to open in a nother and it saves reloading the whole site,

Example, on WM in the top frame I have all my links, once a link is clicked it loads the page in the main frame, no other page is reloaded,

Be low is the frame code

Code: Select all: <HTML> <head> <title>Frames part 1 </title> <FRAME name=frames_1 src="frames_1.html" noResize scrolling=no> <FRAMESET border=0 frameSpacing=0 rows=224,403,* frameBorder=NO colspan=2> <FRAME name=top src="top.html" noResize scrolling=no colspan=2> <FRAMESET border=0 frameSpacing=0 cols=193,580 frameBorder=NO> <FRAME name= "left" src="left.html" noResize scrolling=no> <FRAME name= "main" src="home.html" noResize> </FRAMESET> <FRAME name=bottom src="bottom.html" noResize scrolling=no frameBorder=NO colspan=2> </FRAMESET> </FRAMESET> </HTML>

The code above give you this effect, click here

Ok you have already been show a lot about this with the past posts,
Here are the things we have done befor

- <title> </title>
- Colspan
- Sourcing
- And borders.

The colspan is just like with the tables. And you can have row spanning also, its done exactly how the tables are done.

The thing you may find most confusing is

Code: Select all: cols=193,580 rows=224,403,*

This simply gives dimensions to each frame;
Cols – read from left to right
Rows - read from top to bottom

As u can see for the last dimention on the ROWS I used * (star), this is because I want the bottom frame (bottom.html) to fill what ever space was left on the screen,

For dimentions you can use, % of a page, defined numbers and *

Still winning? Hope so

Within each page you can do what you would normal do on any page, images, linking, linking images, all normal stuff seen as it’s a page after all

But one thing you might want to know is how you “target” a frame, by targeting I mean, when you click a link it opens in a defined frame. I will show you how,

Code: Select all: <A HREF="http://www.wild-media.net" TARGET="main">

When you click this link on a page it would open in the frame with the name ‘main’ because that’s its defined target,

Even you if you want the frame to open with in its self you have to wright the frame name,

So if the link was in the top frame you would Wright

Code: Select all: <A HREF="http://www.wild-media.net" TARGET="top">

I think that’s enough for now, I will move on to Iframes abit later on

by **egbakaet** on Thu Dec 15, 2005 9:33 pm

Yet again, another quality tutorial mate. Cheers.

by **wildross** on Fri Dec 16, 2005 9:11 am

My mate just asked me why his site wasnt working, after looking over his files i seen his folder structer and file name was wrong. so i will make this post from college for you

Directory

How to structure your directorys -

ok so you made all these pages and want to host them, thats fine you just need to do them in the right order

The home page as you may want to call it, the page which you want every one to see first me be called index.html

Any other page after that can be called what ever you like as long as the names match the links they are linked to

A little tip for you,

If you have 2 pages within the same folder on the webser, and you want to link one to the other, you only need to wright the file name. not the whole web address, see below

Code: Select all: <a href="port.html" target="main">

this will link to the page called "port.html"

IMAGES

I have all my images in a folder called "images" this just makes working with your webfolder a whole lot easyer to manage.

like with the links you dont have to wright the full address, you can wright part of it, see below

Code: Select all: <img src="images/portbutton.jpg"

This is my image for the portfolio button, as you can see from the code it is in the images folder and is called portbutton

There, now on to do some college work

UKCS Mega Game Servers

HTML webmaking tutorial

HTML webmaking tutorial

Who is online