So here the first part finally is!

Hello guys,

Let me introduce you what we will be doing the first part of this tutorial:

• Download all the stuff we need.
• Install it and set up the project.
• First look at what we are working with.
• Make a template in our own style with basic HTML & CSS code.
• Explaining what we have done and what you can do before the next part.

Files – What do we need to get started ?

First of all we need something to compile the PHP code on our local machine.
PHP is a server side script that needs to be compiled by the server and then sended to the viewing user in propper HTML.
HTML code is a browser/client script that can be viewed with it need to be compiled by a server first.

For this we dont really need a compiler for the PHP as we won’t be using PHP in now but we will be using it in the next part!

While doing the whole tutorial we will be using a few library’s:

1. CodeIgniter (an Application Development Framework, for clean scripting in MVC)

• www.codeigniter.com

2. Smarty (a Template Engine for PHP this will be used as the (V)iew in CodeIgniter)

• www.smarty.net

3. jQuery (a JavaScript library for some nice and easy to code effects)

• ww.jquery.com

4. And HTML and CSS.

If you like to customize your website other then the tutorial, you should read the documents here to know what you can with it. Also if i forget to explain something they got a full documentation on their sites so you can check it out on their website.

Lets get started!
First we need Xampp go to www.apachefriends.org/en/xampp.html and download the version you need (Windows / Linux etc.) install the program by following the instructions given.

After you have installed it with success you should have a directory like “C:\xampp\htdocs\”
this is the directory where you should put your projects in to access them with your browser.
For more information about Xampp please read it on the website.

Now lets go to your directory “C:\xampp\htdocs\” and create a new folder.
Name this folder “mygame” (or whatever you like to call it, but do not use spacebar, numbers or uppercase characters)

I created a basic template for you with all the connections and Database we will be using during this tutorial.
Download it and place the files in the folder you just created.

——————–

After you have placed this in “C:\xampp\htdocs\{your_folder_name}\” we will need to adjust some config files to get it working propper.

• Open C:\xampp\htdocs\{your_folder_name}\.htaccess, change line 3 “tutorial” with {your_folder_name}
  
• Open C:\xampp\htdocs\{your_folder_name}\application\config\constants.php, change line 40 “tutorial” with {your_folder_name}
  
• Open C:\xampp\htdocs\{your_folder_name}\application\config\database.php, change the variables with your database setup, also on line 47 change “tutorial” to the database name you like to use (We will set the database after this).
  

Now lets go to your database.

Open your browser and go to “http://localhost/phpmyadmin/” this should open the database screen for you.

Create a database with the name you earlier picked in the database.php file.
Go to import and select the database file i created for you. “C:\xampp\htdocs\{your_folder_name}\database\complete.sql”

At this point we have done all we need for now.
Lets try to open the website: “http://localhost/{your_folder_name}/” if you did it all right, then you should see: “This will be you template file.” on your screen.

You can grab a cup of coffee now or some food cause you completed the first part,

Lets go further with the real thing now!

Lets go to the template file and start designing our webgame!
Open “http://localhost/{your_folder_name}/application/views/template.tpl“.

You will see the next lines in it:

Here we will begin with creating our style.
If you don’t have any knowledge with basic HTML i like to reffer you to my other tutorials i have some basic HTML tutorials there.

Click here for the first HTML tutorial
Click here for the second HTML tutorial
Click here for the third HTML tutorial
Click here for the fourth HTML tutorial

Lets create the frame for the website first, we will need the page to be centered and have a menu at the top and when a player logged in we want a menu at the left aswell.
We will create a page with this setup.

Lets start with writing a wrapper to keep it all together and in the center.

template.tpl

What we have done here is created some blocks with text in it, it will look like some simple text rules now if you open your website but we will fix this!
We gave every div an unique name so we can reconize what it will be (aswell as the code will reconize this).

Lets give the website some color!
Open “http://localhost/{your_folder_name}/public/css/default_style.css“.

You will see 4 things in there:

1. body{}
2. a{}
3. a:link{}
4. a:hover{}

Lets put our just created blocks in it and give them some color  (If you give an element the Tag id=”" you can call them with # in your css file)

default_style.css

If you save our work and try to open you website again you will see a big difference with the last time you visited.
We gave the blocks some style and created the first part of our mockup.
Do you want to know more about css? Try my tutorial or visit w3schools for more information about what you can do with it.

At this point i will stop with part 1, now it is time for you guy’s to play with your website (mockup) create something nice for the game you got on your mind!
The next tutorial we will be creating many things for the website like the menu, the contents, and more! so be sure to check often for updates!

Leave a message or screenshots please, i would like to see how other’s are doing or if you are stuck at a point i could help you out with it.

Good luck and have fun!

   Verstuur artikel als PDF   

Hey peepz,

I have added a simple tutorial document here.
Are you starting with 3D max but have no idea where to begin ?

The document is only in dutch at the moment but if there are enough reply’s i will start translating it.

Do you want to follow this tutorial ? Just reply with yes! or something like that

   Verstuur artikel als PDF   

Hi guy’s someone asked me for a mount script in RealmCrafter engine.
So… Here it is.
Keep in mind TYPING OVER IS BETTER THEN COPY PASTE IT!
Any problem’s or upgrades you can post here

First start a new script you will see something similar to this:

Using “RC_Core.rcm”
; TestEnvironment
; Date/Time: 1:57:37 on 20-6-2010
; By Nigel on PC_VAN_NIGEL

Function Main()

End Function

First we need to think of what we want.
This is what im think off.

First we need the first 2 lines of the list:

Using "RC_Core.rcm"
; TestEnvironment
; Date/Time: 1:57:37 on 20-6-2010
; By Nigel on PC_VAN_NIGEL

Function Main()
Player = Actor()

pX# = ActorX(Player)
pY# = ActorY(Player)
pZ# = ActorZ(Player)
End Function

With this we have the Player stored in the variable Player and the location of the player.
Now we want to get the zone the player is in and the mount id and spawn it near the player.

Using "RC_Core.rcm"
; TestEnvironment
; Date/Time: 1:57:37 on 20-6-2010
; By Nigel on PC_VAN_NIGEL

Function Main()
Player = Actor()
Zone$ = ActorZone(Player)
Mount = ActorID("Horse","Mount")

rd = Rand(25,50)
pX# = ActorX(Player)
pY# = ActorY(Player)
pZ# = ActorZ(Player)
spawnMount = Spawn(Mount,Zone,pX+rd,pY+10,pZ+rd)
End Function

Ok now we have created something that will be visible! Hoorray!
Save the script call it SummonMount or something u like.
And go to your editor.
Open your ability's and assign this script to one of your ability's
After your did that you could give it to a shop dealer or your ingame commands to quick try it.

(Ingame Command's way)

Function GiveMount()
Player = Actor()
If PlayerIsGM(Player) = 1
AddAbility(Player, "YourAbilityNameWithTheQuotes")
output( Player, "Gained the Mount ability.", 255, 0, 0 )
EndIf
End Function

Save all your work and start your game.
When you are ingame just type /GiveMount and you will notice in the chat it say's "Gained the Mount Ability".
This is a good sign!
Open your Ability's Window and learn it.
Put it in your QuickSlots and press it to use.
If all go good you will now see your horse or any other mount you wrote down!
If not check your server log's if there is any error.

Lets go to the next lines:

Using "RC_Core.rcm"
; TestEnvironment
; Date/Time: 1:57:37 on 20-6-2010
; By Nigel on PC_VAN_NIGEL

Function Main()
Player = Actor()
Zone$ = ActorZone(Player)
Mount = ActorID("Horse","Mount")

rd = Rand(1,3)
pX# = ActorX(Player)
pY# = ActorY(Player)
pZ# = ActorZ(Player)
spawnMount = Spawn(Mount,Zone,pX+rd,pY+10,pZ+rd)
SetLeader(spawnMount ,Player)
SetActorAIState(spawnMount ,7)

End Function

With this you it is now bound to you as player so only you can ride it
Now lets do the last point to let the mount walk away when you dismount

Open your Mount.rsl
You will see something similar to this in it:

Using "RC_Core.rcm"
; Default mounting change script for player characters
; You may alter this script however you like, but DO NOT RENAME OR DELETE IT

; This function is called when a player mounts an actor
; The actor is the player, the context actor is the mount
Function Mount()
; Done
Return
End Function

; This function is called when a player dismounts from an actor
; The actor is the player, the context actor is the ex-mount
Function Dismount()
Return
End Function

Lets alter the script so it will walk away and dissappear.

Using "RC_Core.rcm"
; Default mounting change script for player characters
; You may alter this script however you like, but DO NOT RENAME OR DELETE IT

; This function is called when a player mounts an actor
; The actor is the player, the context actor is the mount
Function Mount()
; Done
Return
End Function

; This function is called when a player dismounts from an actor
; The actor is the player, the context actor is the ex-mount
Function Dismount()
DoEvents(50)
C = ContextActor()
Player = Actor()
pX = ActorX(Player)
pZ = ActorZ(Player)
rd = Rand(25,50)
SetActorDestination(C, pX+rd, pZ+rd)
DoEvents(5000)
KillActor(C)
End Function

Now with this all inserted try it out! save your work and have fun
You could offcourse upgrade it with more options like only spawn 1 time.
Or on spawn it runs to you etc, etc.

   Verstuur artikel als PDF   

I decided instead of creating a step by step tutorial i will just publish the source.
This way i hope other will help eachother here to improve the source by posting it.
There can be done much more to this mini game then i did.
I just don’t have much time at the moment to create a full tutorial cause of the game contest i’m in.

Want to download the Package ? You will have to create an account and sign in.
When you have done that the bottom content will become visible with a download link

Press the brown cylinder slots to insert a coin in 1 of the 2 slots

   Verstuur artikel als PDF   

Hey people,
Today i gonna show some new Tag’s.
You can use your old file or create a new one.

In this lesson we gonna use some fun Tag’s that we can use for many purposes.
This will aswell be the last lesson of HTML. Are you stuggling or want to know something ? Drop a comment and well maybe… i will create a new lesson for it.
And offcourse ill help you first

I will demostrate the next Tag’s:

Center
Form
HR
Marquee
Div

Lets begin with Center

<center> Here goes down our text / image or other stuff you wanna drop </center>

Put this somewhere between your Body Tag’s (<body> </body>)
If you save and view it you will see that it is in the center of your page! (Or the center of your table)
Very handy!! you can put your website in the center! Make a table as your layout and drop it in the center.

The next Tag is handy to create forms.
Lets use <form></form> .

<form method=”post” action=”index.html” >
Name:<input type=”text” name=”name” / >
Password:<input type=”password” name=”pass” / >
<select name=”Gender” >
<option value=”M” > Male </option>
<option value=”F” > Female </option>
</select>
<input type=”checkbox” name=”accept” > I accept the license.
<input type=”submit” name=”submit” value=”register” / >
</form>

Type this over and post it between your body Tag’s, after save your file.
Check your work, now you have a form and with more effort you can make your own member login.
Pretty cool heh.
A form Tag (<form> </form>) starts just a form and will send all the options between the Tag’s the user has filled in.
The method can be only 2 things: Post and Get.
And the action is where the filled in slots must been sended to so you can catch it up and put in a database for example.

Between the form Tag’s (<form> </form>) you see diffrent input Tag’s.
These objects can be filled by the user itself.
The function between the input type Tag (type=”") will tell what sort of input it is like a textfield.

Text – Tells it will be a text field
Password – Tells it will be a text field but the characters will be hidden
Checkbox – Tells it will be a square what you can enable or disable
Submit – Tells it will be a button to send the field to a page

The function name will be send to the page you selected so give it reconizable names
With the function value will put that what the user typed in inside the name value so you can get it out of that.
But if you change the value of (<input type=”submit” name=”submit” value=”register” / >) to the word in Dutch (“Registreer”) then you will see that the name on the button will change.

The option input now:

<select name=”Gender” >
<option value=”M” > Male </option>
<option value=”F” > Female </option>
</select>

With this Tag you can say the user can only choice 1 of the options, offcourse you can make more option Tag’s.
The value is the text you wanna send to another page and between the Tag’s is a name you can give the option.

Enough over Form’s try to play with it your own and combine it with the CSS lesson i gave to create a pretty/nice form.

<hr>

HR – This stand for as it almost allready say’s “Horizontal Ruler”

<marquee> Here you put your text </marquee>

I don’t think i have to say much about what it does ?

<div style=’bottom:0px; width:100%; height:50px; background-color:#333333;’ > This is a DIV only the style=”" you can better place in your CSS file </div>

DIV’s – Div’s are very handy Tag’s and later (if you get used to them) it will be a often used Tag!
Div’s are little windows at top of your page (or under) You can build them in layers on top of eachother.
You can position them on any spot / Position and Hold them on any spot, and with a little bit Javascript you can even show and hide them! (Think of error’s to display)
As you see there are many possibily’s with Div’s ! Study them! Use them! Become them! You will need these in the future.

This is the end of the HTML Tutorials (For now) It doesn’t work for you ? need more info ? want more ? comment on the post and ask!


The next upcomming Tutorials will be about Photoshop, with these we can graphical design our website or anything else. (Don’t have photoshop? Download the Trial them! It is a great program.)

To do for you!
Upgrade your website with the new Tag’s you have learned!
Leave me a link in this post and wait for the photoshop tutorials
so you can design you website aswell

Good Luck!

   Verstuur artikel als PDF   

Hey people,
Today i will explain more about css style’s
With these command you will be able to modify you layout through another file.
Let us first make this “file”.
Go to your directory where your files are (index.html etc.)
Now make an new file with the name: “style“.
Here we will put our layout in.

Open your editor (Notepad, Notepad++ or any other you prefer).
Put the following in it:

body
{
background-color:#000000;
}

Now save this in the directory you just made : “style” as: style.css.
You can open your website but you will see nothing has changed.
That is right!
We first must let these communicate with eachother.
To do this we must:

Open your “index.html” in your editor.
Now place between the HEAD Tag’s this code:

<link rel=”stylesheet” type=”text/css” href=”./style/style.css”>

(Above or under the TITLE Tag doesn’t matter, for a nicer looking script i prefer 1 row above the HEAD Close Tag (“ <HEAD>“)
Save it an preview your website.
WoW! your background is totally black.
But where is my text ?
Because your text is black it will be like camoflage and you wont see it! (Press ctrl+a for fun inside your website)

What did we do ?
In the new file (style.css) we have placed a stylesheet code.

body
{
background-color:#000000;
}

Here we same letterly that EVERYTHING in your body (Body Tag) must have the properties that are between the brackets { }.
We say background-color:#000000;. or… the background must have a hexadecimale code, but can be aswell standard names like “ black, green, blue“.
You could aswell make the code background-color: black;.

How will you find out what code to use for which color?
You could do this with photoshop or another draw program.
Don’t you have this? Take a look at: This Website.

Lets make the text white to view the text better.
Put this code under or above your Background-Color code:

color:#ffffff; or color:white;

Save your work and view your side again.

So, it is possible to change many things in just this file.
Like we used BODY now we could aswell use other Tag’s.

Try it with f.e.:

a
li
img

You can change almost any Tag to your hand with just this file.
Even with the A Tag you can do funny things.

Open your style.css and put this in it:

a:link
{
color:#FF0000;
text-decoration:none;
background-color:#B2FF99;
}

a:visited
{
color:#00FF00;
text-decoration:none;
background-color:#FFFF85;
}

a:hover
{
color:#FF00FF;
background-color:#FF704D;
}

a:active
{
color:#0000FF;
text-decoration:none;
background-color:#FF704D;
}

It is a long piece of code, but this is a fun one.
Try and and view what happend with your menu.

We now only changed color’s but we could aswell change the measure’s of the Tag’s
Or placing a picture in the back of a Tag.
F.e. you want to change your header picture but don’t want to go through all your files.
Just change it in your CSS File and it will be replaced everywhere!

Lets give the Table Tag a measure and a title image on the background so we can put text on top of it.
We will use classes for this as it is easy to use.
Everything with a dot in front of it ( . ) will be seen as class in your CSS file.

Place this in your style.css:

.MyLogo
{
background-image:url (http://i372.photobucket.com/albums/oo170/LANTE_17/evil-smiley-face.jpg);
height: 100px;
width: 500px;
}

background-image We call the title image to the background.
height We set the height for the Tag.
width We set the width for the Tag.

This isn’t enough yet we aswell must tell to our website which Tag is listing to this class.
Open your index.html and change your title (header)

<TD colspan=”2″ class=”MyLogo” > Here was the link to your image of your header at first place. </TD>

Save your work and view the results.
Try to play aswell with the next thing in your class MyLogo:

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

By this the tutorial has ended.
Mission:

Make your website more completer.
f.e. by drawing a button and put it in the class for the menu (LI Tag).
Through your css file.
Adjust the height and width of your Table Tag so you will have the layout you want.
For more properties of CSS you can visit this site.

Good Luck!

   Verstuur artikel als PDF   

NL: Hey mensen welkom bij de eerste photoshop tutorial.
Vandaag ga ik jullie leren om een basis iets te maken met photoshop wat je dus eventueel in je eigen ontwikkeld spel kunt gebruiken. Laten we beginnen!

EN: Hi people welcome to the first photoshop tutorial.
Today i gonna learn you to make a very basic image in photoshop what you perhaps can use in your own game. Let’s start!

NL: Laten we als eerst een nieuw document starten (ctrl+n) in photoshop.
En we geven het document de naam “PlayerHealth” met de hoogte en breedte van 128 (Macht van 2 voor spellen )
En druk op OK als je klaar bent.

EN: Let’s start a new document (ctrl + n) in photoshop.
Give it the name “PlayerHealth” and set the width and height to 128 ( Divideable by 2 for games )
And press OK when you are done.

NL: Houd je Custom Shapes tool ingedrukt en je krijgt een menu selecteer daar custom shape tool.

EN: Keep you Custom Shapes tool pressed and you will get a menu select here the custom shape tool.

NL:Nu heb je onder je menu een extra menu gekregen die lijkt op het plaatje hierboven. Klik hier op het plaatje en selecteer het hartje in het menu dat naar voren komt.

EN:Now you have a new submenu that looks like the image above this text. Click here on the shape and select the hearth in the menu that pops up.

NL:Nu klik je op het lege veld en sleep je naar de andere kant om het hartje te tekenen (Maak zelf je eigen gewenste grootte).

EN: Now you click on the empty field en drag to the other side to draw the hearth (Draw it by your own wishes)

NL: In je lagen klik je nu 2x op de kleur naast je hartje (Zie plaatje hierboven), en kies de gewenste kleur.

EN: In the layers you click 2 times on the color next to your hearth (See image above), and pick the desired color.

NL: Selecteer je hartjes laag en klik op het FX knopje zoals op de afbeelding hierboven staat aangegeven.
Kies hier Blending Options.
Doe nu de volgende acties zoals aangegeven in de plaatjes hieronder.

EN:Select your hearth layer and click on the FX button like you see in the image here above.
Pick Blending Options from the menu.
Now do all the options in the images under this text till said otherwise.

NL:Als je alles ingesteld hebt zoals weergeven op de bovenstaande plaatjes kun je op OK drukken om het effect toe te voegen.

EN:If you configured everything like in the above images then you can press on OK to add the effects.

NL: Als het goed is ziet je plaatje er nu ongeveer zo uit.
Dupliceer nu je hartje (ctrl + j).

EN: If it is correct, your image will look like mine.
Now duplicate your hearth (ctrl + j)

NL: Transform nu je net gedupliceerde laag (ctrl + t) en vul boven in je menu de waardes in van het plaatje hierboven.
Zoals je ziet heb je nu 2 hartjes over elkaar heen 1 grote en 1 kleine in het midden.
(We kunnen dit gebruiken al volledige Levenspunten en halve Levenspunten en uiteindelijk ook geen Levenspunten)
Voer de volgende acties uit op de laag met het grootste hartje (Blending options bekijk 6de plaatje).

EN: Transform your duplicated layer (ctrl + t) and fill in the menu like i show in the image above.
You will see that you have 2 hearths over eachother now, 1 big one and a smaller one.
(We could use this for Full HealthPoints, Half HealthPoints and finally one for No HealthPoints)
Select the layer with the biggest hearth now open Blending options on it (See image 6) and follow the next steps.

NL: Zodra je alles hebt ingevuld zal je plaatje er ongeveer zoals mijn plaatje eruitzien (Kijk plaatje hieronder)
Je kunt nu ook de laag uitvinken van het kleine hartje en hebt dan een leeg hart.

EN: If you filled in everything your image will look like mine. (See image under)
You can aswell turn off the small hearth layer and you will have a empty hearth.

NL: Sla nu je 3 varianten op als png/tga of gif zorg wel dat je de “background” uitzet!
(Zie plaatje hieronder)
Nu kun je in je spel deze 3 varianten gebruik zoals ik ook gedaan heb (zie: http://www.ungahstudios.com/game)

EN: Save the 3 variant’s as png/tga of gif, dont forget to turn off your background!
(See image beneath)
Now you can use these 3 images in your game like i did (see: http://www.ungahstudios.com/game)

NL: Bedankt voor het lezen van mijn tutorial.
Mocht er vraag zijn naar een specifiek iets, heb je ooit iets gezien dat je ook wilt doen?
Stel gerust je vragen en ik beantwoord ze met info of misschien zelfs met een tutorial.

EN: Thanks for reading my tutorial.
If you want ask something specific, seen stuff you want to do aswell?
Ask your questions! And i will awnser them with info or perhaps a tutorial.

   Verstuur artikel als PDF   

Hey people,
In this tutorial we will be using more “Tag’s” like in the first tutorial.
This time we will be using Tag’s that will come handy in webdesign.
If you have question’s or want to know something specific the leave a post and ill awnser it.

In this tutorial we will learn:

<UL>
<LI>
<TABLE>
<IMG>
<A HREF>

Let’s start!
Last tutorial we ended with:

<HTML>
<HEAD>
<TITLE>My first website</TITLE>
</HEAD>
<BODY>
Wow… My website is the best!
</BODY>
</HTML>

We will use this file again but make it better.

Let’s fill the website with more content, in what Tag we will do this?? …

Body Tag (<BODY></BODY>)

Delete Wow… My website is the best!

And put a table there.
We want a table that contains the: Title/Menu and Information.
3 things so we will need atleast 3 cells.

We want the title on the top offcourse and the menu and information next to eachother.
Add the next code into your Body tag.

<TABLE border=”1″>
<TR>
<TD colspan=”2″>Title comes here.</TD>
</TR><TR>
<TD>Menu comes here.</TD>
<TD>Information comes here.</TD>
</TR>
</TABLE>

Save your work and view the file.
So… with a table you can set the interface position of your website.
Every TR Tag is needed for a new row.
And every TD Tag is need for a cell inside the row.
When you got the wanted cells in a row you will need to close the TR Tag and open it again for the next row.
Got everything ready ? then close the Table Tag.

TD colspan=”2″ -> A colspan will melt your cells together here it will melt 2 cells into 1 big cell.

Let’s place something better then current title.
Delete Title comes here. and put:

<IMG src=”http://i372.photobucket.com/albums/oo170/LANTE_17/evil-smiley-face.jpg” />

Save your work and look at your file.
You got an image now… wasn’t that hard was it?

IMG is the Tag with a function “src=” that will find the source of the image (URL).

Lets do the menu, delete Menu comes here and put in place:

<UL>
<LI>Home</LI>
<LI>Photo’s</LI>
<LI>Games</LI>
<LI>Websites</LI>
</UL>

Save and view your website again.
UL tell’s the browser to sart a list every LI in it will put tekst into that list with a dot in front of it. Make sure you close your Tag’s aswell!

Now we have a nice menu, but can’t click on it.
Change you menu code into this code:

<UL>
<LI><A HREF=”index.html”>Home</a></LI>
<LI><A HREF=”photos.html”>Photos</a></LI>
<LI><A HREF=”games.html”>Games</a></LI>
<LI><A HREF=”websites.html”>Websites</a></LI>
</UL>

Save again, and view the file.
You will see you can click it now but it will generate errors.
To solve this you will need to make new files again, don’t call them index.html again but like in your menu “photos.html“.
An A Tag has a function HREF this can call objects on the internet like website’s, files, photo’s etc. aswell the A Tag supposed to be closed again! Everything between the A Tag’s will be displayed as an A Tag (Let’s you click on the thing you place between the Tag’s like images or text).

That is it for today!

Mission:

Finish the website further.
Make the menu complete and create other files to link to through the menu.
Make your own title and text.
If you can put it online aswell then do it, i would like to see what you made (and suppose other will like it to).
Everyone likes to see others work.

Good Luck!

   Verstuur artikel als PDF   

Hey people,

I want to learn you guy’s something about HTML (Simple static website’s)
I hope you can learn something from these tutorials

Let’s begin!
Open a editor you will like to use. (Notepad, Notepad++ etc.)
I do NOT recommend Word or Wordpad! Most of the time these will scramble your code.
Notepad is good enough, I myself use Notepad++ this editor will aswell highlight your code for easy use,
this way you will make the most less mistakes.

Lets start with the frist thing you will always need.

   Verstuur artikel als PDF