The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.
So building a website
When the fact hits you that all your peers have all singing and dancing websites whilst you have a page saying Index of www.yourpage.com with a few files and text documents scattered about, you're spurred into action. You don't want to read a hundred page tutorial booklet written by some nerd : you just want to get into the action and adrenalin-pumping project of building a site!
How on earth do i get started?
First of all you don't need to buy a 400 pound website development program, all you need is Notepad. (I'll be upset if you don't know this) Notepad can be found in accessories in the programs section of the start menu. So open up notepad and stare at the jaw-dropping complexity of the menus and all those funtcions ... Yeah ! I was being sarcastic.
For notepad to realise that you're coding in HTML (The language interpruted by your web browser which most websites are coded in), you need to put in the following code. Snippets of code are called tags
So, now notepad knows where you're at! Thats a good start, at least.
So on your webpage you may want the following witty text ...
Why did the skeleton cross the road ..To get to the body shop!
Easy peasy! Nothing complex - just tap in the text you want anywhere under the opening HTML tag. One of the post important things to remember is that the formatting on notepad bears no resemblance whatsoever on the webpage itself!
Because you have no tags telling the text where it should live, how it should look etc the text will appear in the top - right corner of the webpage when you test it. Because you have no TAGS to tell it how it should behave the text will appear in bland Times New Roman and black.
So, how do i test my amazing website with the hilarious jokes on it?
Ok. Click on SAVE AS and in the filename box type Index.html
The Index part is the name that your webpage will be called on your server. Index is the homepage of your site, so when someone visits they will see what you have on the file Index.html.
The .html part refers to how the file is saved. We are making a HTML website so the file is saved as either .html or .htm
Congrats! You have saved your first webpage!
How do i format text
Now onto formatting. Here are some very useful tags :
This puts the text surrounded by the code in Bold
This puts the text surrounded by the code in Italics
This Underlines the text surrounded by the code.
You can combine these codes and make cool combinations.
Perhaps..
or ...
Ok, i've done that .. Now i want to change the colours!
Do you really ! Ok, lets go for it.
Here are the codes we're going to use:
Put the text that you want to be in Tahoma,in 4,in orange here.
This code is very customisable. You can change tahoma to any font you desire. However, beacause HTML was created by the Americans, you must remember to spell colour without the "u"
Also remember that if you only want part of the sentence to be orange and the other part to be red, you need to put the bit you want in orange within the tags that change the font to orange, and so on.
How do i put gaps in and leave lines free?
This code will give you a line's space between the text.
For example ..
Why did the chicken cross the road?
Will look like this on the webpage ..
Why did the chicken cross the road?
To get to the other side!
If you just want to start a new line you use the following:
You must remember that leaving gaps in the notepad file will not effect the formatting on the webpage!
How do i insert a picture?
Sure! Why not.
This code is a little more complex than the earlier codes,as a lot of customisation is possible.
We will be using this code ..
The "chicken.gif" is the filename of the picture. You must include the file extension for example: .gif .jpg .png
A mistake many people make is to find a picture on google called "chicken.gif" and try to put this picture on their site with the filename simply "chicken.gif". That makes me cry!
To start with "chicken.gif" refers to a file on your server called chicken.
If you found the picture on google you need to add some extra.
For example the chicken picture you want may have the address:
http://images.google.co.uk/images/chicken.gif
That is the address of where the picture is hosted (just like a website it has an address).
So if u wanted this specific image on you page you would need to use the code:
However this form of embedding images is frowned upon (quite rightly). It is called hotlinking where you use a file hosted by another site to use in your own website. It uses the server's bandwidth, which is very cheeky.
It's like using a neighbours lawnmower without permission and having nothing to stop you.
Secondly the image will not appear on your prized page if the host changes the name (even if only just very,very slightly!)
So how do i embed an image in my website without upsetting anyone?
Simple. Find the image. Save it. Upload it to your own host. This makes things much, much better. Because now you can have a much shorter filename for the image. Perhaps ... "chicken.gif" This will now work if you upload the image and name it chicken.gif yourself, unless you store it in a folder on your server perhaps named "images". Then the address of "chicken.gif" would be "/images/chicken.gif".
I've done all that, and now im hooked on HTML!
Yeah i thought you would be!
There are many, many sites out there which have scripts, tutorials and codes for you to use on your site which now your peers are extremely jealous of.
Perhaps the method which is best when you're starting out is to view other sites source codes and analyse. To view the site's code click on "view" and then "view source".
There are many, many forms of web language out there. To name a few: Css,DHTML,XHTML,Php are all web languages.
Never stop learning guys!
I hope this tutorial has really helped!
Nitro_goat
(Edited slight code error)
When the fact hits you that all your peers have all singing and dancing websites whilst you have a page saying Index of www.yourpage.com with a few files and text documents scattered about, you're spurred into action. You don't want to read a hundred page tutorial booklet written by some nerd : you just want to get into the action and adrenalin-pumping project of building a site!
How on earth do i get started?
First of all you don't need to buy a 400 pound website development program, all you need is Notepad. (I'll be upset if you don't know this) Notepad can be found in accessories in the programs section of the start menu. So open up notepad and stare at the jaw-dropping complexity of the menus and all those funtcions ... Yeah ! I was being sarcastic.
For notepad to realise that you're coding in HTML (The language interpruted by your web browser which most websites are coded in), you need to put in the following code. Snippets of code are called tags
<HTML>So, now notepad knows where you're at! Thats a good start, at least.
So on your webpage you may want the following witty text ...
Why did the skeleton cross the road ..To get to the body shop!
Easy peasy! Nothing complex - just tap in the text you want anywhere under the opening HTML tag. One of the post important things to remember is that the formatting on notepad bears no resemblance whatsoever on the webpage itself!
Because you have no tags telling the text where it should live, how it should look etc the text will appear in the top - right corner of the webpage when you test it. Because you have no TAGS to tell it how it should behave the text will appear in bland Times New Roman and black.
So, how do i test my amazing website with the hilarious jokes on it?
Ok. Click on SAVE AS and in the filename box type Index.html
The Index part is the name that your webpage will be called on your server. Index is the homepage of your site, so when someone visits they will see what you have on the file Index.html.
The .html part refers to how the file is saved. We are making a HTML website so the file is saved as either .html or .htm
Congrats! You have saved your first webpage!
How do i format text
Now onto formatting. Here are some very useful tags :
<b>text here </b>This puts the text surrounded by the code in Bold
<i>text here </i>This puts the text surrounded by the code in Italics
<u>text here </u>This Underlines the text surrounded by the code.
You can combine these codes and make cool combinations.
Perhaps..
<i><u>Chicken </u> </i>or ...
<b><u>The road </u></b>Ok, i've done that .. Now i want to change the colours!
Do you really ! Ok, lets go for it.
Here are the codes we're going to use:
<font face="tahoma" size="4" color="orange">Put the text that you want to be in Tahoma,in 4,in orange here.
</font> This code is very customisable. You can change tahoma to any font you desire. However, beacause HTML was created by the Americans, you must remember to spell colour without the "u"
Also remember that if you only want part of the sentence to be orange and the other part to be red, you need to put the bit you want in orange within the tags that change the font to orange, and so on.
How do i put gaps in and leave lines free?
<p>This code will give you a line's space between the text.
For example ..
Why did the chicken cross the road?
<p>To get to the other side!Will look like this on the webpage ..
Why did the chicken cross the road?
To get to the other side!
If you just want to start a new line you use the following:
<br> You must remember that leaving gaps in the notepad file will not effect the formatting on the webpage!
How do i insert a picture?
Sure! Why not.
This code is a little more complex than the earlier codes,as a lot of customisation is possible.
We will be using this code ..
<img src="chicken.gif" height="80" width="50">The "chicken.gif" is the filename of the picture. You must include the file extension for example: .gif .jpg .png
A mistake many people make is to find a picture on google called "chicken.gif" and try to put this picture on their site with the filename simply "chicken.gif". That makes me cry!
To start with "chicken.gif" refers to a file on your server called chicken.
If you found the picture on google you need to add some extra.
For example the chicken picture you want may have the address:
http://images.google.co.uk/images/chicken.gif
That is the address of where the picture is hosted (just like a website it has an address).
So if u wanted this specific image on you page you would need to use the code:
<img src="http://images.google.co.uk/images/chicken.gif" height="80" width="50">However this form of embedding images is frowned upon (quite rightly). It is called hotlinking where you use a file hosted by another site to use in your own website. It uses the server's bandwidth, which is very cheeky.
It's like using a neighbours lawnmower without permission and having nothing to stop you.
Secondly the image will not appear on your prized page if the host changes the name (even if only just very,very slightly!)
So how do i embed an image in my website without upsetting anyone?
Simple. Find the image. Save it. Upload it to your own host. This makes things much, much better. Because now you can have a much shorter filename for the image. Perhaps ... "chicken.gif" This will now work if you upload the image and name it chicken.gif yourself, unless you store it in a folder on your server perhaps named "images". Then the address of "chicken.gif" would be "/images/chicken.gif".
I've done all that, and now im hooked on HTML!
Yeah i thought you would be!
There are many, many sites out there which have scripts, tutorials and codes for you to use on your site which now your peers are extremely jealous of.
Perhaps the method which is best when you're starting out is to view other sites source codes and analyse. To view the site's code click on "view" and then "view source".
There are many, many forms of web language out there. To name a few: Css,DHTML,XHTML,Php are all web languages.
Never stop learning guys!
I hope this tutorial has really helped!
Nitro_goat
(Edited slight code error)
Page:
I am interested in learning more about PHP what about a tutorial on PHP please.
Kev
Kev
Did you see my post about php from a few days ago? Is that the sort of thing you want? Or something different? I can have a go if you would find it useful.
Jo
Jo
If any wants something flash related for their website i could go through various methods etc. But a majority of people don't have flash here so ..
nice guide nitro, just been reading a post about setting up a wiki site and thought prehaps Freeola could set up a wiki website design page or two using this and some of the other things posted as a start...
Sounds cool
Thanks :)
Thanks :)
oooo nice.
Page: