Our tutorials have been submitted by our own members and staff over the last four years. They cover a range of design packages and programming languages.
Tutorials are key part of learning new skills, so we not only recommend that you try some, we suggest you experiment with the framework that they give you, don't be scared to wander from the instructions.
Click the categories below to get started!
Alternatively you can pass on your useful tips and advice to others, by creating your own.
Submit a Tutorial
If you like a tutorial, please use the "digg" button below it.
Using Notepad...
A webpage is made up of tags like this <a href=''>text</a> that is a hyperlink!
Basic HTML pages (before any tags are added) should liik like this...
### <html> <head> <title></title> </head> <body> </body> </html> ###
you would place most of your tags inbetween the <body> and the </body> tags.
To add text you would just enter text... Get it!
To add a image you would use the tag <img src='here is where you would place your image location.gif (bmp or jpg most other types are not web frendly - e.g psd)' border='0'>
To add a link you would use this... <a href='http:// link to location.html'>Text link or image</a> if you want a image there you would use that image tag [above]...
To center text place the text between this tag... <center>TEXT</center>
For Bold Text <b>TEXT</b>
For Underlined text <u>TEXT</u>
For italics <i>TEXT</i> in that <body> tag you can change the background colour text colour and link colours by changing it to <body bgcolor='#hex colour for the background' text='#hex colour for the text' link='#hex colour for the links' alink='#hex colour for the active links' vlink='#hex colour for the viseted links'> You should be able to use this to make a basic HTML page
------------- What is HTML? --------------
HTML Stands for ( H )yper ( T )ext (M)arkup (L)anguage. HTML is a language that uses codes to make your own webpage.
What do i need to get started?
-------------------------------
-Notepad
-HTML Knowledge
simple, eh?
Basics
-------
First, you use this to say your using HTML: <html> and you end it with: </html> This is the main code template that you use: <html> <head> </head> <title>TITLE GOES HERE</title> <body> Everything including codes, text, ect. goes here. this is what will be displayed on your site. </body></html> Again simple? isn\'t it?
Working With Text
------------------
This of course goes in the body. To add normal text just like \"this\" just type in what you want and it will be displayed. Text Styles- Color:
<font color=COLORHERE>TEXT HERE
you can use hex code or simply just \"red\" for example. Underline:
<u>and end it with </u>
and:
<i>Italicized</i> <s>Slashout</s> <b>Bold</b> <u>Underline</u> <sup>SuperScript</sup> <sub>SubScript</sub> <tt>Typewriter</tt>
Size:
<h[1-7]> and end it with </h[1-7]>
1 is the biggest 7 the smallest.
Hyperlink:
<a href=URL OF WEBSITE> TEXT HERE</a>
Adding a space (text):
i know it doesn\'t look like HTML but it is. dont add < > around it.
Adding Graphics
----------------
<img src=\"URL OF GRAPHIC\">
making them a link:
<a href=\"URL OF LINK\"> <img src=\"URL OF GRAPHIC\"border=0> </a>
Background:
<body background=\"IMAGE URL\">
^ That\'s for images ^
<body bgcolor=\"COLOR OR HEX CODE HERE\">
^ that\'s for a color background ^
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> HTML Form </title> </head> <body bgcolor="#FFFFFF"> </body> </html>
Now between:
<body bgcolor="#FFFFFF">
I want you to type the opening tag for form
<form>
Once you done that You can choose of what to put in the form field
Here the form code:
For textbox:
Input type="text" />
For Password:
<input type="password" />
For Checkbox:
<input type="checkbox" /><
For Radio:
<input type="radio" />
For Upload File From your PC:
<input type="file" />
For Submit Button:
<input type="submit" />
Notice
If you do not want the button to say submit and want to put of what you want the button to say then do this
<input type="submit" value="Login" />
Notice You see it say
Value="login" />
That is the value where you can choose of what you want the button text to be For Button:
<input type="button" />
For Reset:
Input type="reset" />
For Hidden:
<input type="hidden" />
Notice
The input tag have no separate closing tag but it close it self using "/>" at the end.
For Textarea:
A textbox is a large box which require rows and cols attribute it look like this <textarea rows="5" cols="5">A textbox</textarea>
Last one
For Drop Down Menu:
This is very different from the other tag including the textarea To open the tag for dropdown menu use this tag
<select>
Then for the bit that will be in the box you will need to do this:
<option value="option 1">Mum</option> <option value="option 2">Dad</option> <option value="option 3">Sister</option> <option value="option 4">Brother</option>
To add more item then repeat this in number ordered:
<option value="option 5">Friends</option>
Now you see where i type mum, dad, sister, brother and friends? that is the text that going to appear in the box
Enough TAG! let put it in there form field
Again go to notepad and type this
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> HTML Form </title> </head> <body bgcolor="#FFFFFF"> <form> <input type="text"/> <strong>Username</strong> </form> </body> </html>
and save it as Form.htm, then open it up and you get a clear display of what i'm talking about! So put any of them to see what it like
How to Use Form In A Appropriate Way
Now lot of people can make it look bad way and unexpected way so you gonna have learn how to use it So use the break tag to break the form in the line, it is the same as when you type a text. So try and make a registration fields like in Proboards for a good start So copy and paste this or code:
<!DOCTYPE html PUBLIC"-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title> HTML Form </title> </head> <body bgcolor="#FFFFFF"> <form> <input type="text" /> <strong>Username</strong><br /><br /> <input type="password /> <strong>Password<br /><br /> <input type="password /> <strong>Password Again</strong><br /><br /> <strong>Gender</strong> <input type="radio" /><strong>Male</strong><br /><br /> <input type="radio" /><strong>Female</strong><br /><br /> <input type="radio" /><strong>Keep Secret</strong><br /><br /> <strong>Age</strong><br /><br /> <select> <option value="option 1">13</option> <option value="option 2">Over 13</option> </select> <br /> <br /> <input type="submit" value="submit" /><br /><br /> <strong>thank you for registering At Metal Gear Solid Snake</strong> </form> </body> </html>
Phew after coding it! so save it and open it and you get a very clear image of how to use it in a Appropriate Way :smile: But it does send it to where you want to. If you want to learn how to send it then you will have to learn ASP or PHP I hope this tutorial help you people! Enjoy :) And do not RIP my tutorial
<IFRAME name='framename' src='yoururl.html' width='100' height='100' frameborder='0' scrolling='auto'></IFRAME>
Add the above tag into the page you are wanting to add your Iframe no for each of the parts... the name='framename' change this into what you want the name of the frame to be for targeting frames when hyperlinking
<A href='pagename.html' target='framename'>Text</a>
Get it... the src='yourpage.html' change to what you want the defoult page in the IFrame to be [htm or html] width='100' change to what you want the width of the IFrame to be and same with the height='100' part frameborder='0' can be changed to frameborder='1' if you want a small border aroud the inside of the frame... scrolling can be left auto! Auto=detect if your page in the frame is bigger than the frame, anly than will it show a scrollbar, Yes=always have a scrollbar no=never have a scrollbar even if the page is larger than the IFrame - I dont know why you would want to use it! :grin:
Enjoy, DanielBB
Now HTML isn't really that hard. Now let's make you your own webpage. First of all if your using windows open notepad if linux then open up text editor. Now type in:
<HTML> </HTML>
this starts your webpage. Now add inbetween those tags
<HEAD> </HEAD>
Now caps are not required. The HEAD is the top so whatever is in there is on top and the body has the bottom. Now under the head add this still inbetween the HTML tags:
<BODY> </BODY>
So far this is what is in the document:
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Now you can just add what you want inbetweenthe Head and Body tags but everything stays inbetween the HTML tags.
HTML Cheatsheet:
Bold - Type: <b>Text</b> appears Text
Italic - Type: <i>Text</i> appears Text
Underline - Type: <u>Text</u> appears Text
Strike - Type: <s>Text</s> appears Text
Link - Type: <a href="URL">Text</a> appears Text
Image - Type: <img>Image URL</img>/<img src="Image URL"> appears :smile:
Horizontal Rule - Type: <hr> appears
Tables? What are they? Tables are useful in helping store, orgainze and display data, quickly and easily. All tables start off with the <table> tag, and likewise, end with the </table> tag.
To add info to the table, you must make use of the two tags, <tr> and <td>. Look at the following HTML code, and I'll explain below it.
<table> <tr> <td>Line</td> <td>1</td> </tr> <tr> <td>Line</td> <td>2</td> </table>
The <table> tag starts off the code. To create a new row for data, insert the <tr> tag. The "tr" stands for table row. To add data into cells of that row, simply place the <td> tag AFTER the <tr> tag. Afterwards, close your tags with the </tr> and </td> tags.
You can control the width and height of the table either using percentages or pixels. <table width="90%" height="70%"> Using percentages to resize tables. <table witdh="400" height="100"> Using pixels to resize tables.
You can add many things to a table, and I will list a few of them, and how to use them. To add a border, you would do this: <table border="1"> Just insert your data and close with </table>. Border symbolizes you want a border and 1 designates the thickness of the border. The higher the number, the thicker the border will be.
Cell Padding and Cell Spacing
These two things can be confused easily, and often lead to many mistakes. First, I will explain cell padding. Cell padding increases the extra leftover space in each cell. To use cellpadding, do this: <table border="1" cellpadding="1"> The border is optional, but once again with the border, the higher the number, the more cellpadding there will be.
Think of cellpadding as putting styrofoam into a package to help protect it, which will increase its size. :tongue: Cell spacing is how much space is between individual cells. Cell padding effects the space OUTSIDE the cells, if you are lost. <table border="1" cellspacing="1"> Like with all table attributes, the higher the number, the bigger the result.
Think of cell spacing as the space between each "object" in the area. [u]Empty Cells[/u] For some odd reason, you may want an empty cell. Well, if you tried to just do this: <td>(hit space bar)</td> It would end up no cell with no border.
To create a true empty cell with no border, do this: <td> </td> The creates a non breaking space in the cell.
Cell Spanning
To have a cell span one or more row/column, you have to utilize the "colspan" and "rowspan" attributes. Colspan crates a cell spanning over many columns and Rowspan creates cells spanning many rows.
Cell Data Alignment
If you wish to align the data in a cell left, right, center, etc., use this: <table> <tr> <td align=_______>DATA</td> </tr> </table> For aligments, use "left" for left, "right" for right and "center" for center. KEEP THE QUOTES!
There ya go, a simple, yet plentiful tut on tables.