In this HTML story you'll learn the basic of html but also more.
This tutorial is totaly for the people who're new to scripting.
1. Why should I use HTML?
2.Tags
3.Tables
4.Frames
5.Hypertext and everything about showing text
6.Forms
1.Why should I use HTML?
HTML is a simple language for making your website. It's verry usefull and in other script languages you'll need to use HTML too for sure. It's quite easy but usefully for making your own site!
2.Tags
HTML uses tags. Each page starts with:
These are called "tags". The tag <html> tells the internet explorer: The follow script will be a HTML script.
and with </html> you close the html script.
for a enter use <br>, for 2 enters (
) use <p>
When you want to make a HTML document(script) you should make a new text document, open it with notepad and now you can script html. When you're finished you should click file-> save as and save it as filename.html (this will make it a HTML file instead of a normal text file).
3.Tables
Tables can be used for making a layout for your site or devide your site in different parts(tables).
An example of a table:
This script will be showed like:
this is a a part of a row this is the cel next to the previous cel(part of the row)!
<td> means; the begining of a new cel of a row and </td> means: the end of a cel from a row
<tr> means : the beginning of a new row and </tr> means the end of this row
all rows will come under eachother, and each cel (which are in the same row) will be next to eachother.
so:
will be showed like:
but:
will be showed like:
caus all <td>'s which are in the same row(<tr> tds here </tr) will be showed next to each other and each <tr> </tr> (rows) will be showed under each other.
you can also give a td (cel) a different colour, like:
[/html]<td bgcolor="red"> text</td>[/html]
this row will be red now.
Or you can give it a picture as background;
now the background of this td (row) will be the picture : picture.jpg
If you want to give the table and each row (td) and collom (tr) a border you can use:
now the border will be 1 px, if you want to give it another color(the border) just add bordercolor="colour here" into the <table> tag, example:
You can also give a table/td/tr a width and height.
just put into the tr/td/table: width="width in pixels or in %" height="height in pixels or in %", example:
This are the most importants things you have to know for making tables for the layout of your page. Enjoy!
4.Frames
A frame is usefully for puting text into it.
You can start an iframe by:
and close a iframe by:
Also for an iframe you can give a width and height. Example:
If you have made a file like main.html and you want that the text will be showed up in your iframe, then you can do that like this way:
if you puted in the text "Hello everyone,welcome to my site!" into the main.html, this text will come into the frame. So then:
will be the same as
Hope you understand it! if you have any questions feel free to ask it here.
5.Hypertext and everything about showing text
You can easylie make hypertext (a link) by using:
example: you want to show that the text "scriptware" link to www.scriptware.com , the script will be:
Simple and easy! if you want it as a popup:
as you see: just add target="popup" into the tags.
if you want to show a site (or a HTML(or other) document) into a FRAME, you can use this:
now you have made a frame called "main"
Now there will be a link to file.html and when you click on "click here!", the document file.html will be showed up into the target(frame) main, and you're done
You can also write text bold orunderlined or italic, or big or small, or red or black. Some examples:
6.Forms
A form always starts with the tags:
for an user input field use:
and for longer fields (like for a whole story or message or something):
to declear the with of an input field you can use size = amount so for example:
What the user will put into the input field will be the VALUE of the curtainly input field, you can also give it an standard value, which it contains befor anything is filled in it yet. We'll be using the value = text , for example:
We can also DISABLE the input field, so it can't be edited by anyone. We'll be using the disabled example:
Quite easy, isn'tit!? This is all you have to know about input fields
Example(for sending a mail):
file: form1.html
This script will go to the page "mail.php" when the user filled all fields in and pressed enter. The file "mail.php" should send the mail (but u need php knowledge for doing that part so that we won't do yet).
from this script (above) it will be showed like this:
click
but as you can see, you can't submit yet. We'll need to add a submit button.
It's quite easy, just add this into the script (between the <form> </form>)
The script will be like this now:
end result:
clickie
more form types
type=radio example
type=checkbox example
type=text example
type=submit example
type=button example
type=image example
SELECT
And then we have the SELECT tag yet, it works like this:
Lets take for example: they can choose there country, we'll use just these ones: US, The Netherlands, Belgium
this will look like this: click
now you set it in a form, and get the value the user chose by: $_POST['country'] caus the select name='country', if the user choosed 'United States' the value would be 'us' (as you can see in the value statement inside the option tag), etc., good luck!
This was the tutorial, I hope you have understanded it and if I forgot something, tell me, or if you have any questions; feel free to ask it!
Soon I'll update this.
Once you're family with this, you can use my other tutorials, good luck!
This tutorial is totaly for the people who're new to scripting.
1. Why should I use HTML?
2.Tags
3.Tables
4.Frames
5.Hypertext and everything about showing text
6.Forms
1.Why should I use HTML?
HTML is a simple language for making your website. It's verry usefull and in other script languages you'll need to use HTML too for sure. It's quite easy but usefully for making your own site!
2.Tags
HTML uses tags. Each page starts with:
HTML
<html>
<head>
here you put the titel(<title>here your title</title>) and other text that should be showed into the top of your site.
</head>
<body>
Here you'll put the most of the script into.
</body>
<footer>
The text you put in here will be showed at the bottom of your site.
</footer>
</html>
<head>
here you put the titel(<title>here your title</title>) and other text that should be showed into the top of your site.
</head>
<body>
Here you'll put the most of the script into.
</body>
<footer>
The text you put in here will be showed at the bottom of your site.
</footer>
</html>
These are called "tags". The tag <html> tells the internet explorer: The follow script will be a HTML script.
and with </html> you close the html script.
for a enter use <br>, for 2 enters (
) use <p>When you want to make a HTML document(script) you should make a new text document, open it with notepad and now you can script html. When you're finished you should click file-> save as and save it as filename.html (this will make it a HTML file instead of a normal text file).
3.Tables
Tables can be used for making a layout for your site or devide your site in different parts(tables).
An example of a table:
HTML
<table>
<tr> // this makes a new row
<td> this is a part of a row, a cel</td>
<td> This is the cel next to the previous cel(part of the row)! </td>
</tr> //end of the row
</table>
<tr> // this makes a new row
<td> this is a part of a row, a cel</td>
<td> This is the cel next to the previous cel(part of the row)! </td>
</tr> //end of the row
</table>
This script will be showed like:
this is a a part of a row this is the cel next to the previous cel(part of the row)!
<td> means; the begining of a new cel of a row and </td> means: the end of a cel from a row
<tr> means : the beginning of a new row and </tr> means the end of this row
all rows will come under eachother, and each cel (which are in the same row) will be next to eachother.
so:
HTML
<table>
<tr>
<td> hallo</td>
</tr>
<tr>
<td> bye! </td>
</tr>
</table>
<tr>
<td> hallo</td>
</tr>
<tr>
<td> bye! </td>
</tr>
</table>
will be showed like:
QUOTE
hallo
bye!
bye!
but:
HTML
<table>
<tr>
<td> hallo </td>
<td> bye! </td>
</tr>
</table>
<tr>
<td> hallo </td>
<td> bye! </td>
</tr>
</table>
will be showed like:
QUOTE
hallo bye!
caus all <td>'s which are in the same row(<tr> tds here </tr) will be showed next to each other and each <tr> </tr> (rows) will be showed under each other.
you can also give a td (cel) a different colour, like:
[/html]<td bgcolor="red"> text</td>[/html]
this row will be red now.
Or you can give it a picture as background;
HTML
<td background="picture.jpg"> text here </td>
now the background of this td (row) will be the picture : picture.jpg
If you want to give the table and each row (td) and collom (tr) a border you can use:
HTML
<table border="1">
now the border will be 1 px, if you want to give it another color(the border) just add bordercolor="colour here" into the <table> tag, example:
HTML
<table border="1" bordercolor="red">
<tr>
<td> wow, this cel is having a red border! </td>
</tr>
</table>
<tr>
<td> wow, this cel is having a red border! </td>
</tr>
</table>
You can also give a table/td/tr a width and height.
just put into the tr/td/table: width="width in pixels or in %" height="height in pixels or in %", example:
HTML
<table border="1" width="500" height="600">
<tr> <td> </td> </tr>
</table>
<tr> <td> </td> </tr>
</table>
This are the most importants things you have to know for making tables for the layout of your page. Enjoy!
4.Frames
A frame is usefully for puting text into it.
You can start an iframe by:
HTML
<iframe>
and close a iframe by:
HTML
</iframe>
Also for an iframe you can give a width and height. Example:
HTML
<iframe width="500" height="600"> text </iframe>
If you have made a file like main.html and you want that the text will be showed up in your iframe, then you can do that like this way:
HTML
<iframe src="main.html"> </iframe>
if you puted in the text "Hello everyone,welcome to my site!" into the main.html, this text will come into the frame. So then:
HTML
<iframe src="main.html"> </iframe>
will be the same as
HTML
<iframe>Hello everyone, welcome to my site!</iframe>
Hope you understand it! if you have any questions feel free to ask it here.
5.Hypertext and everything about showing text
You can easylie make hypertext (a link) by using:
HTML
<a href="site_here">text where they have to click on for going to the site, here</a>
example: you want to show that the text "scriptware" link to www.scriptware.com , the script will be:
HTML
<a href="www.crona.co.nr">crona</a>
Simple and easy! if you want it as a popup:
HTML
<a href="www.scriptware.com" target="popup">scriptware</a>
as you see: just add target="popup" into the tags.
if you want to show a site (or a HTML(or other) document) into a FRAME, you can use this:
HTML
<iframe name="main"></iframe>
now you have made a frame called "main"
HTML
<a href="file.html" target="main">click here!</a>
Now there will be a link to file.html and when you click on "click here!", the document file.html will be showed up into the target(frame) main, and you're done
You can also write text bold orunderlined or italic, or big or small, or red or black. Some examples:
HTML
<b> this text will be bold</b>
<i> this text will be italic (cursive) </i>
<u> this text will be underlined </u>
<h1> this text will be showed verry BIG! </h1>
<h6> this txt will be verry tiny </h6>
<font color="red"> this text will be red </font>
<font size="1"> this text will be showed small </font>
<i> this text will be italic (cursive) </i>
<u> this text will be underlined </u>
<h1> this text will be showed verry BIG! </h1>
<h6> this txt will be verry tiny </h6>
<font color="red"> this text will be red </font>
<font size="1"> this text will be showed small </font>
6.Forms
A form always starts with the tags:
HTML
<form method="post or get" action="location"> // when you filled in the fields and pressed enter you'll be redericted to what you filled in at "location" (action="")
and ends with:
</form>
and ends with:
</form>
for an user input field use:
HTML
<input type="text" name="name_of_inputfield_here" value="standard value here">
and for longer fields (like for a whole story or message or something):
HTML
<textarea cols="amount(60 will be oke)" rows="amount(5 will be oke)" name="textarea name here"> standard value here </textarea>
to declear the with of an input field you can use size = amount so for example:
HTML
<input type='text' name='test' size='4'>
What the user will put into the input field will be the VALUE of the curtainly input field, you can also give it an standard value, which it contains befor anything is filled in it yet. We'll be using the value = text , for example:
HTML
<input type='text' name='inputfield_name' value='check, this is the value!'>
We can also DISABLE the input field, so it can't be edited by anyone. We'll be using the disabled example:
HTML
<input type='text' disabled='true'>
Quite easy, isn'tit!? This is all you have to know about input fields
Example(for sending a mail):
file: form1.html
HTML
<form method="post" action="mail.php">
Email: <input type="text" name="email"> <p>
Message: <textarea name="message" cols="60" rows="5"> put your message here </textarea><p>
</form>
Email: <input type="text" name="email"> <p>
Message: <textarea name="message" cols="60" rows="5"> put your message here </textarea><p>
</form>
This script will go to the page "mail.php" when the user filled all fields in and pressed enter. The file "mail.php" should send the mail (but u need php knowledge for doing that part so that we won't do yet).
from this script (above) it will be showed like this:
click
but as you can see, you can't submit yet. We'll need to add a submit button.
It's quite easy, just add this into the script (between the <form> </form>)
HTML
<input type="submit" name="submit" value="send mail!">
The script will be like this now:
HTML
<form method="post" action="mail.php">
Email: <input type="text" name="email"> <p>
Message: <textarea name="message" cols="60" rows="5"> put your message here </textarea><p>
<input type="submit" name="submit" value="send mail!">
</form>
Email: <input type="text" name="email"> <p>
Message: <textarea name="message" cols="60" rows="5"> put your message here </textarea><p>
<input type="submit" name="submit" value="send mail!">
</form>
end result:
clickie
more form types
type=radio example
type=checkbox example
type=text example
type=submit example
type=button example
type=image example
SELECT
And then we have the SELECT tag yet, it works like this:
HTML
<SELECT name='name'>
<option value='value'>text</option>
</SELECT>
<option value='value'>text</option>
</SELECT>
Lets take for example: they can choose there country, we'll use just these ones: US, The Netherlands, Belgium
HTML
<SELECT name='country'>
<option value='us'>United States</option>
<option value='netherlands'>The Netherlands</option>
<option value='belgium'>Belgium</option>
</SELECT>
<option value='us'>United States</option>
<option value='netherlands'>The Netherlands</option>
<option value='belgium'>Belgium</option>
</SELECT>
this will look like this: click
now you set it in a form, and get the value the user chose by: $_POST['country'] caus the select name='country', if the user choosed 'United States' the value would be 'us' (as you can see in the value statement inside the option tag), etc., good luck!
This was the tutorial, I hope you have understanded it and if I forgot something, tell me, or if you have any questions; feel free to ask it!
Soon I'll update this.
Once you're family with this, you can use my other tutorials, good luck!
discuss this topic to forum
