Hi there,
In this HTML tutorial I’ll be explaining the basics of HTML scripting.
1. Why should I use HTML?
2.Tags
3.Tables
4.Frames
5.Hyperlinks and everything about showing text
6.Forms
1.Why should I use HTML?
HTML is a simple ‘language’ for making your own webpage. And it’s the basic ‘language’ for creating websites overall (for the text, images, graphics) usually combined with CSS. It’s not one of the hardest ‘languages’ but very useful for making your own, simple webpage.
2.Tags
HTML uses tags. Each (correctly built) HTML webpage’s structure looks somehow smilar to this:
<html> <head> Here you put the titel(like this: <title>here your title</title>) and other text ( or javascript initalizations ) that should be shown on the top of your website. </head> <body> Here you can put the most of the script for your website such as: website layout with its main content, etc. </body> <footer> The text you put in here will be shown at the bottom of your site. </footer> </html>
These are called “tags”. The tag <html> tells the internet explorer: The following script will be a HTML script and with </html> you end the html script. For an enter use <br>, for a paragraph use <p> ( or put the heading between <p> and </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
Note: However tables are still used, most websites try to use as few tables as possible and try to use divs instead where possible. This is basicly because it takes more loading/server time.
Tables can be used for making a layout for your site or divide your site in different parts(tables). It’s used to organize, layout, the content of your website. Nowadays though, a lot people use divs instead, combined with CSS, as they take less bandwith.
An example of a table:
<table>
<tr> // this makes a new row
<td> this is a part of the 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 shown 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 this row and </td> means: the end of a cel from the 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 shown next to eachother.
so:
<table> <tr> <td> hallo</td> </tr> <tr> <td> bye! </td> </tr> </table>
will be shown like:
hallo
bye!
but:
<table> <tr> <td> hallo </td> <td> bye! </td> </tr> </table>
will be shown like:
hallo bye!
Because in the first case, the cells were put in different rows and so appear under eachother. In the second case though, the 2 cells are both put in the same row and so appear beside eachother, in one and the same row.
You can also give a td (cel) a different colour, like:
<td bgcolor="red"> text</td>
This cell of the row will be shown red now.
Or you can give it a picture as background;
<td background="picture.jpg"> text here </td>
Now on the background of this td a picture will be shown: picture.jpg
If you want to give the table a border you can use:
<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” inside the <table> tag. Example:
<table border="1" bordercolor="red"> <tr> <td> wow, this cel is having a red border! </td> </tr> </table>
You can also give a table/td a width and height.
just put into the td/table: width=”width in pixels or in %” height=”height in pixels or in %”, example:
<table border="1" width="500" height="600"> <tr> <td> </td> </tr> </table>
This are the most importants things you need to know about making tables for the layout of your webpage. Enjoy!
4.Frames
Note: Frames are not used as often anymore as they are not easy accessable by links and so not search engine friendly. Instead divs are used often.
A frame is usefully for putting text into or showing a page in.
You can start an iframe by:
<iframe>
and close a iframe with:
</iframe>
Also for an iframe you can set a width and height. Example:
<iframe width="500" height="600"> text </iframe>
If you have made a file like main.html and you want that file to beshown up in your iframe, then you can do that like this:
<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:
<iframe src="main.html"> </iframe>
Would be the same as
<iframe>Hello everyone, welcome to my site!</iframe>
5.Hyperlinks and everything about showing text
You can easilie make hyperlinks by using the a tag:
<a href="site_here">text where they have to click on for going to the site, here</a>
Example: you want a link with the text “google” that links to http://www.google.com , the script would look like this:
<a href="http://www.google.com">google</a>
As easy as it gets! If you want it as a popup:
<a href="http://www.google.com/" target="popup">google</a>
You could as well use target=”_BLANK” to open it in a new tab (target).
if you want to show a site (or a HTML(or other) document) into a FRAME, you can use this:
<iframe name="main"></iframe>
Now you have made a frame called “main”.
<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 shown up into the target(frame) main, and you’re done!
You can also write text bold, underlined, italic, big, small, red or black. Some examples:
<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 shown very BIG! </h1> <h6> this text will be very tiny </h6> <font color="red"> this text will be red </font> <font size="1"> this text will be shown small </font>
6.Forms
A form always starts with the tags:
<form method="post OR get" action="location"> // when you filled in the fields and pressed enter you'll be redirected to what you filled in at "location" (action="") and send the info filled in by the method post or by the method get </form>
For an user input field use:
<input type="text" name="name_of_inputfield_here" value="standard value here">
And for textareas (like for a whole story or message or something):
<textarea cols="amount(60 will be oke)" rows="amount(5 will be oke)" name="textarea name here"> standard value here </textarea>
To declare the width of an input field you can use size = amount so for example:
<input type='text' name='test' size='4'>
What the user will put into the input field will be the VALUE of the certain input field. You can also give it an standard value, which it contains before anything is filled in it yet. We’ll be using the value = text , for example:
<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 disabled=’true’ example:
<input type='text' disabled='true'>
Quite easy, isn’t it!? This is all you need to know about input fields
Example(for sending a mail):
file: form1.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>
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 won’t be explained in this tutorial).
But as you can see, you can’t submit yet. We’ll need to add a submit button.
It’s quite easy, just put this into the script (between the <form> </form>)
<input type="submit" name="submit" value="send mail!">
You can give it any name though, but it’s important to use the right name for a PHP file to handle it. The script will be like this now:
<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>
more form types
type=radio
type=checkbox
type=text
type=submit
type=button
type=image
SELECT
And then we have the SELECT tag yet, it works like this:
<SELECT name='name'> <option value='value'>text</option> </SELECT>
Let’s take for example: they can choose there country, we’ll use just these ones: US, The Netherlands, Belgium
<SELECT name='country'> <option value='us'>United States</option> <option value='netherlands'>The Netherlands</option> <option value='belgium'>Belgium</option> </SELECT>
Don’t forget to put it into a form with a submit button of course.
Admin.
Thu, Jan 21, 2010
HTML & CSS