Tutorial HTML – 04 And there came more Tag’s!

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:


Lets begin with Center

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

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>
  <input type="checkbox" name="accept"> I accept the license.
  <input type="submit" name="submit" value="register" />

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>

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 – This stand for as it almost allready say’s “Horizontal Ruler”

That is a horizontal ruler. Very simple as you see, with CSS you can adjust it easy to your needs like the color etc.

Marquee – This is a fun Tag!

  Here you put your text

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’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!


Tutorial HTML – 03 CSS (Cascading Style Sheets).

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 directory with the name: “css“.
Here we will put our stylesheets in.

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

body {

Now save this in the directory you just made : “css” as: style.css.
You can open your website but you will see that nothing has changed.
And that’s right!
We first must let this code communicate with our website.
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="./css/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.


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 also like “ black, green, blue“.
Like this: 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:


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.:


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 {

a:visited {

a:hover {

a:active {

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 (;
  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.

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.

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!


Tutorial HTML – 02 Let’s view some more commands.

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 then leave a post and ill awnser it in time.

In this tutorial we will learn:

<a href>

Let’s start!
Last tutorial we ended with:

    <title>My first website</title>
    Wow… My website is the best!

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">
    <td colspan="2">Title comes here.</td>
    <td>Menu comes here.</td>
    <td>Information comes here.</td>

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="" />

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:


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:

  <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>

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!


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!


Tutorial HTML – 01 Let’s get started in webdesign.

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.


Explain ?
Everything between <> are called TAG’s these will be reconized by your browser as code.
<HTML> say’s to the browser that you are starting your HTML Code.
<HEAD> This tag will be the first thing that the browser reads.
<TITLE> This must be in your HEAD tag because this need to be readed first in your browser.
<BODY> Here every magic in your website will be placed.

Now save this as index.html.
And double click the file you just created.
If you did everything correctly you will see now an empty website has opend.

You did great if it works and can now edit the file by rightclicking it and select open with. Select here Notepad (or other editor you like to use)

Now change your code to:

    <title>My first website</title>
    Wow... my first website will be the best!

Now save this again!
If you open it again and look at the titlebar. you will see My first website here now!
We did this between the <TITLE> Tags
You must remember to close all your tag’s like title ( <TITLE> </TITLE> ).
Every tage must be closed with a /
You will see aswell the text Wow… my first website will be the best! in the website.
You just placed your first piece in a website!

For this week we leave it this way. I hope next week to come with a greater post.
If you still having trouble or something isn’t working or you don’t get a point feel free to ask me here.