Interactive HTML Tutorial For Beginners:
Printed from
http://echoweb.newn.com/tutorials/html/basics/
Part I: Introduction
Hello. So? You decided to learn HTML. Very wise. A lot of people say that HTML is hard, but to tell you the truth it's not! All you need to know is the basic concepts of computers and WWW, and you can start. I wrote this tutorial in a very simple way. We'll be covering the most important topics. If you have a question you are welcome to email at echohelp@usa.net. So, what are we waiting for? Let's get started.
Note: It is recommended to experiment with what you've learned every time you finish a new chapter. For that mattar we offer a free Echo Lab, where you are welcome to practice new skills that you learned. To access Echo Lab, click here and don't forget to do it every single time you learn something new.
Advice: This tutorial divided in parts to help you read it more easily. Don't take more than two parts in one day, otherwise it will be harder for you to remember all new information.
What do you need?
1. First of all you need a computer (that figures) and an Internet access. If you are viewing this page, I assume that you have both.
2. Now you need a tool for creating and editing HTML. HTML consists of simple text so a NotePad or a WordPad will be perfect. If you really want you can get HTML editor, but if you really want to learn HTML, use a NotePad for now. If anything, you can always get it. Read more about choosing your next HTML Editor here and to view a list of the free HTML editors click here. Note: these pages are not available in the OFFLINE version of this tutorial.
3. You will also need a browser, such us Netscape, Internet Explorer. You obviously have one, because otherwise you wouldn't be able to see this page.
4. And the last but not least, you will need a lot of patience. Learning HTML is like learning a whole new language. It might be hard sometimes but do not give up. If you got patience you won't have a problem with HTML That's all.
What is HTML anyway?
HTML initials stand for HyperText Markup Language. A lot of people ask me if HTML is a computer language. The answer is not. HTML is only a Mark Up Language. It cannot create programs or images. Most of it's job is to tell the browser where, how, and what way you want to place text, images, or files on the page. But do NOT under-estimate HTML. You'll see that it can do awesome stuff in a short while.
Part II: Beginning to write
HTML is a very easy, simple, and logical format. It consists of simple text. It goes from the left to the right, from the top to the bottom, just as a real text. Every single HTML document you have to start with this tag <HTML>. What does it do? Basically this tag tells your computer that everything that goes after this tag is HTML code. But if you started HTML document, at some point you will have to close it. To do that you have to use a closing tag and it looks like this </HTML>. Notice that there is a slash before HTML word in the closing tag. This slash tell your computer that it's the end of the document. It always goes like this.
Document Parts
Every web page written in HTML has two parts: <HEAD> </HEAD> This part goes immediately after HTML tag. Here you place title, description of the page, background information, and some other commands that we'll discuss later. After HEAD goes the <BODY> tag. In here you will put all the content of your page including text, graphics, etc. Once again if you started something you need to end it. To close <BODY> use the following tag: </BODY> Pretty easy for now, right?
|
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY></BODY> </HTML> |
The example below shows the simplest HTML page that you can do (we'll discuss <TITLE> tag in the next chapters).
Part III: Flags (Commands)
What are flags? Flags are simple HTML commands that are used to manipulate with text or images. To help you understand how do we use flags here's an example of a simple HTML page.
<HTML>
<HEAD>
<TITLE>Our first page</TITLE>
</HEAD>
<BODY>
This is my first page on the web.
</BODY>
</HTML>
Say that you want to make the word first bold. All you have to do is to use a flag (sometimes it's called a tag, as well) <B></B> around the word. Put <B> wherever you want to start bolding and put the ending flag when you want it to stop:
<B>first</B> will become first. Simple as that. Most of the tags go in pairs, but there are few that go by itself. I will tell you about them very soon. Here are a few other commands that you might find very useful. Remember: Every single flags start with < and end with >.
<B>Bold</B>
<I>Italic</I>
<U>Underline</U>
<DEL>Strikethrough</DEL>
<TT>Typewriter</TT>
For a complete glossary of HTML tags click here. Note: The glossary is not available in the offline version of this tutorial.
As I told you before there are few flags that stand alone, and don't need a closing flag.
Here they are.
<BR> This command breaks the text and goes to the next line. If you just press Enter when you write in a Wordpad or any other text editor, in HTML you need to enter this command to denote that you want to move to the next line.
<HR> This simple command will give you a line across the HTML document. It's a very useful command. HR are the initials for Horizontal Reference.
<P> P command does almost the exact same thing as BR, but if BR just goes to the next line, <P> skips a line before starting again.
p.s. There are few more advanced tags that do not need a closing tag, but we will not talk about them in this tutorial.
Combining Flags
What if, for example you want your text to be both Bold and Italic at the same time? Or Italic, Underlined, and in Typewriter font? With HTML it's possible. All you have to do to combine them, is to type them one after another.
Example: HTML Tutorial is equal to <B><U>HTML Tutorial</U></B> Take a look at the order the go. It's very important. You can combine as many flags as you want, as long as they follow the same order: If <B> is the first tag, then </B> has to be the last one. If <U> is the last tag, then </U> has to be the first one. Otherwise the code will not work. These are few basic flags with which you can already make an interesting page. A few more things. It's not necessary to capitalize flags. I do it because if you make a mistake, it's much easier to find and fix the error. There are a lot of other flags, but the one that I included are a few most useful. That's all for now. In the next part we are going to start writing a real page.
Part IV: Writing And Saving The Page)
You already know enough information to write a normal page. And this is exactly what we are going to do right now. First let me help you, but after this try to create a completely different website yourself. Are you ready? Follow the instructions.
Creating Your First Page
1. Open a new Wordpad document.
2. Write <HTML> flag on the very top.
3. Immediately after that write a <HEAD> flag.
4. The next flag is new. It's called a Title flag. Anything that you'll write in it will appear on the Title Bar. You'll see it for yourself. This is very important to choose a good title, because if you'll do so, more visitors are going to come to your site. So, type <TITLE>.
5. The next step is to enter some text. Example: Welcome to my first HTML page. Do not use any flags because they won't work (there are a few exception to this rule, though, but we won't cover them in this tutorial).
6. Close the title command with the end flag: </TITLE>.
7. Type the <BODY> tag.
8. Now it's time to play with the text. Type the following:
Hello, and once again <U>Welcome</U> to my first HTML page. I can type text like <B>this</B> or like <I>this</I>.<BR> It's all <U>very simple</U> once you'll read this tutorial. <HR> <I>Well, I have to go now.</I> <TT>I hope to hear from you</TT> <B><I><U>soon.</U></I></B> <B>Bye</B>
9. As you noticed I didn't use all of the flags that you know, so it won't confuse you. This page is very silly, but it's perfect for what we want to do. Do you still remember how to close new documents? Type <BODY>. Skip a line and type </HTML> . It's done. You've created your first HTML page. Now let's try to save it.
10. Go to File; choose Save As. In the box that will pop up, type the name of the document. Example: first. Now the most important part. The name of HTML document as well as of any other document consists of two parts. Name of the file, and a suffix. Erase the text that's there and type first.html. Now save your document in Text-Only format. Then using your browser open this file.
Exercise: At the end of most chapters, I will give you a small exercise so you could practice what you learned. To do it, proceed to our Echo Lab or open a new NotePad document. And the exercise for today is: Create a new page. For the title use Welcome to (your name) page. In the body write a small biography about you (3-5 sentences) using at least 6 of the tags that you learned. Then view the page and save the page on your hard drive.
Part V: Text Styling
In a previous parts, you've learned how to create and save a page, how to create and manipulate with text. In this part, I'll teach you a few more tricks that you and HTML can do with the text.
Aligning Text
As you probably noticed, all text that you type is on the left size. This is what's called default. But what if you need to center the text or if you want to align it to the right? There are commands to do this.
If you want to center the text use these two commands: <CENTER> </CENTER>. It's very simple. Put a <CENTER> when you want to start centering text, and end this command with a </CENTER>. Don't forget to put a slash before the word, otherwise the computer won't understand the command.
Example:
<CENTER>This Is Centered Text</CENTER>
If you want to align your text to the right, there is another tag for it. Here it is
<P ALIGN="right">Your Text Goes Here</P>. What I did here is I took a <P> flag (as you remember, P stands for paragraph) and added an attribute to it ALIGN (value-right). And I ended the flag with a simple </P>.
Example:
<P ALIGN="right"> This Text Aligned To The Right </P>
Font Size Commands
Font commands will be used to change the size of the text. There are 12 font sizes in HTML. They go from +6 through +1 and -1 through -6. +6 is the largest font and -6 is the smallest.
Example: <FONT SIZE="-1">This is -1 size</FONT>. Take a look at the structure of this flag. There are two tags in one. I took a FONT flag and again I've added an attribute to it (FONT), which is now going to make it FONT SIZE.
Changing Color
One of the best parts of the Web Pages is that you can easily add colors to your text.
Example: <FONT COLOR=RED>RED TEXT</FONT>
Here's how we did it. Font and Color are attributes. Every attribute must have a value. Red is a value. The same goes to the font size command. In this example we simply entered the word red. If we'll enter blue, the text will be become blue. The same thing will happen to green, yellow, or any other simple color. But if you'll want something more advanced you'll have to use something more advanced.
It's called HEXADECIMAL. HEXA... what? I know! My reaction was the same, when I started to learn about HTML. It sounds complicated at first but you'll get used to it (there is no other way). What is Hexadecimal? Hexadecimal Color names are six digit codes used to specify how much of the colors RED, BLUE, and GREEN are in the desired color. For a color chart visit click here. If you are going to be using color codes, here's the way you will have to type it <FONT COLOR="#FFFFFF"> Your Text</FONT> . Don't forget to place a # in front of the color code.
Combining Color And Size
You also can combine color and size flags but to do so you have to use a little different format. Say you want the color blue and the font size +2. Here's how you do it:
<FONT SIZE="+2" COLOR=#6666FF>Text</FONT>
Exercise: Open the page that you created in the last chapter. If you didn't do the assignment ,then you can try to do it now, but even though I can't force you, it's highly recommended for you to train what you learned immediately. Anyway, id you DID do the page, open it. Now try to changing the color and the size of your biography. Make it appear nice. And then proceed to the next chapter.
Part VI: Creating A Link
Another great feature on the World Wide Web is that you can easily surf through different pages and web sites using links. Think of a link as it's like a door to another site. You click on it and you open a door. Today we are going to learn how to make links (or doors).
Here's what a link looks like:
This is the HTML code of the link above.
<A HREF="http://www.yahoo.com">Click Here To Go To Yahoo</A>
"Say what?" you are saying. Don't worry. I'll explain. I always do :).
- A stands for Anchor. This is what begins a links.
- HREF stand for Hypertext Reference. It tells computer that this link is going somewhere.
- http://www.yahoo.com is a full address of a website that we link to.
- Once again A HREF is an attribute and http://www.yahoo.com is the value.
- Click Here To Go To Yahoo is the text that you are going to see on the page.
- And we end the link with </A> You can make as many links on a page as you wish.
That simple? Of course. Although in a few months you might be interested in creating hovering links, links with JavaScript, but right now, in this moment, it's all this simple.
In the last paragraph you learned how to link sites. But for example you want to create a link to your e-mail address. It's not going to work if you will simply insert your e-mail instead of the URL. You need a new command for it. Let me show you what I have in mind:
Example: Click Here To Contact Me
p.s. This link is broken. You can try to e-mail the person, but it will not work.
Here's the code for the e-mail link:
<A HREF="mailto:you@somewhere.com">Click Here To Contact Me</A>
You probably noticed that they look almost the same, but wait! there is a new command - mailto: This tag tells a computer that this is an email link only. Isn't HTML great?
Remember: There is no space after the colon and mailto always goes together.
Exercise: Did you notice how easy HTML is? I hope so. Anyway, today's assignment is to add 5 links to your favorite sites and 1 link to your email address on your page. OK? Great. Let's proceed.
Part VII: Graphics
Do you know why the World Wide Web became so popular? Graphics! That's right, since the moment when browsers started to support images WWW became twice as popular. But how can you place an image on your site? Read on.
The image above is an example of what I was trying to tell you. It's only a simple image, but using World Wide Web and HTML hundreds of people can see it. You got my point?
The format for placing image is very short and simple. Here it is:
<IMG SRC="graphic.gif">
Now let me explain all the parts
- IMG stands for image. It tells the computer that the image will go next.
- SRC stands for source. It tells the computer that he has to follow next link in order to find this graphic.
- Next you see the address. This is the URL of the image (in our case it's located in the same directory. If your's not, you have to specify the full URL). Two of the most used image formats on the Internet are .gif and .jpg (or .jpeg). They are so popular because they take as little space as possible. There are many other formats, but I would recommend you these ones. For simple graphics and images use .GIF; For photos and other images where you need the best quality, use .JPG or .JPEG.
Where can you find images? Well, first of all you can make them by yourself. It's very simple. Take our tutorial on creating images here. And if you are not much of an artist there are hundreds of places on the net with free clip art and image libraries, so it's not supposed to be a problem. Try looking at our resources section for such places.
As well as text, you can link images, so when a person will click on them, he will go to another page (or you can make an e-mail link, so when he'll click on it e-mail box will pop up). To help you understand how to do it, here's an example:
Try clicking on it. You will go to Yahoo.
Here's the HTML code that put the image on the site and that linked her to the other page:
<A HREF="http://www.yahoo.com"><IMG SRC="graphic.gif"></A>
As you see it follows exactly the same format as text, but instead of text itself you put the image tag.
Here how it goes: First you type <A HREF="" .
Then you put the address where you want the visitor to go to after he clicked the image.
Then you place the image tag.
And close this code with </A>
After you'll open the page and see the graphic that you linked, you will also notice a small blue border around the image. This border is default. It always there. Some people like it, some people don't. Sometimes it can ruin the whole page effect, so let me show you how to get rid of it.
All you have to do is to add an BORDER attribute to the image flag.
Here's what we got:
<A HREF="http://www.yahoo.com"><IMG Border="0" SRC="graphic.gif"></A>
What we we did here is we added an attribute BORDER with a value 0. This attribute tells the computer that the border should be border should be 0 size (pixels).
If you change the number to 50, the border will be huge. Try practicing different sizes of a border.
Changing The Size Of The Image
Someday you might happen to be in a situation where you need to change the size of the image. I'll show you how:
Remember: If you are increasing the size of the image, it might lose it's quality.
Here's the normal image
Example:
It's size is 31x28
Now it's the same image with a different dimensions
Example:
Did you notice that it lost it's quality? That's a side effect. Sorry.
Here's a coding how I changed the height and the width of the image: <IMG HEIGHT="##" WIDTH="##" SRC="graphic.gif">
Let's take it apart
- IMG as you already know stands for image.
- HEIGHT and WIDTH stand for height and width.
- ## stand for two digits of size. You can make it more than 2 digits, if you need to.
- SRC stands for the source of image. This is supposed to be the address where the image is located.
Please notice the format of this code. Try to memorize it or at least bookmark this page and use it as a reference.
Background is a very interesting thing in a web page. It can assist the design or can tottally ruin. My advice to you is: do not choose backgrounds with many patterns and colors. And of course don;t forget to keep the size small so it won't take a lot of time to load. To place a background, all you have to do is to insert a simple code in the <BODY> tag. I'll show you how in a moment.
If you want a simple color to be as your background (good choice) here's the code for you :
BGCOLOR="######". Instead of ###### insert a hexadecimal color. Add this attribute to the <BODY> tag. You'll get this: <BODY BGCOLOR="######">. We'll be adding a tutorial on backgrounds very soon, so come back often.
Don't forget that when you write a color code you need to have a # sign before the six digits.
If you want to have an image instead of a simple color for your background, use this code.
BACKGROUND="image.gif" . Put the code right into the <BODY> tag. You'll get this <BODY BACKGROUND="image.gif"> . Cool?
Exercise:
Today's exercise will be simple. Open your page and add a gray background
to it. But don't use the word GRAY. Instead find the right HEXADECIMAL
color code and put it in. That's all you have to do.
p.s. This is an additional assignment. You don't have to do it, but's it's
also recommended. Find a nice, small picture on your computer and insert it
into your HTML coding. Then link it to EchoWeb.8m.Com. Think you can do it?
I hope that you are up for some challenge.
Part VIII: Tables
HTML is a pretty hard thing to learn (the basics are not, but if you'll go in deeper, you are going to find it pretty hard to understand). Even though now you know how to make a pretty good page, there are hundreds of other tricks that you can use to spice the page. Here's an example: Tables. This is what this chapter is all about.
| A | B | C |
| D | E | F |
| G | H | I |
Looks interesting? I know it does. You will be able to do it all by yourself in less 10 minutes. This is the code of the table above:
<TABLE BORDER="4" CELLSPACING="2" CELLPADDING="1">
<CAPTION><FONT
COLOR=#70DBDB>Alphabet</FONT>
</CAPTION>
<TR><TD ALIGN="center"><font color="#3333FF">A</font></TD>
<TD ALIGN="center"><font color="#3333FF">B</font></TD>
<TD ALIGN="center"><font color="#3333FF">C</font></TD></TR>
<TR><TD ALIGN="center"><font color="#3333FF">D</font></TD>
<TD ALIGN="center"><font color="#3333FF">E</font></TD>
<TD ALIGN="center"><font color="#3333FF">F </font></TD></TR>
<TR><TD ALIGN="center"><font color="#3333FF">G</font></TD>
<TD ALIGN="center"><font color="#3333FF">H</font></TD>
<TD ALIGN="center"><font color="#3333FF">I</font></TD></TR>
</TABLE>
It looks really complicated but it's not. Let me show you all the tags that I used. You'll see how easy it is very soon.
- <TABLE> This command basically starts the table. This command is very easy to remember.
- <CAPTION> </CAPTION> This command places a caption right on the top of the table. In a while you'll be able to make the advanced captions.
- <TR> </TR> This command is used when you want to begin a new Table Row. So, far all these commands are very easy to understand and to remember.
- <TD> </TD> means Table Data. You have to put <TD> in front of every piece of information. And remember that you need to close every piece with </TD>.
- Border tells the table how large the border will be. Size is measured in pixels.
- CELLSPACING tells the amount of space between cells.
- CELLPADDING tells the amount of space between cell contents and the cell border.
- And in the end of the table we place </TABLE>
Now it makes the perfect sense, doesn't it? Now let's try to create a new table by ourselves.
1. Put a <TABLE BORDER="#" CELLSPACING="#" CELLPADDING="#"> tag in the beginning.
2. Place <CAPTION> and type Alphabet. Now close it with </CAPTION>
3. The next thing we want to do is to start a new row. Type <TR>
4. The next step is to fill out data. Press Enter, and write <TD>A</TD>. Remember these commands? Don't forget to use a closing flag.
5. Continue typing: <TD>B</TD> <TD>C</TD> Three rows is enough for now. Close this row using </TR> tag.
6. Click Enter and start another row. <TR> <TD>D</TD> <TD>E</TD><TD>F</TD> Close this row with </TR>, and do the last one.
7. <TR> <TD>G</TD> <TD>H</TD> <TD>I</TD> </TR>
8. Close it with a </TABLE> tag You are done. Save this document and view it in the browser.
Other Commands
Want to put a few links in the table? Here's how. Instead of just <TD> Text </TD> add a link flag. <TD><A HREF="http://www.somewhere.com">My Home Page</A></TD>
Placing
an image: Want to place an image in the table. Use this code. <TD><IMG
SRC="http://www.somewhere.com/image.gif">
</TD>
Aligning text in cells is almost exactly the same as aligning... the text. All you have to do is to add another attribute to the Table Data. What do you get?
This: <TD ALIGN="center">Text</TD> Try putting left or right instead of center. It will also work Did you notice that we use the same formats in almost every piece of HTML that we learned. If you know these flags, it'll be very easy for you to add some in something more sophisticated.
There is another very cool thing that you can do in table cells. You can add a background to only one, two, or if you want all of the cells. Here's an example of what I'm talking about:
|
CELL1
|
CELL2
|
CELL3
|
|
CELL4
|
CELL5
|
CELL6
|
|
CELL7
|
CELL8
|
CELL9
|
Do you see it now? It's pretty amazing. You can even insert your own picture-backgrounds. All you got to do is to add bgcolor="#anycolor" to the <TD> tag. Together you'll get <TD bgcolor="#anycolor">. But you have to do the same thing for each cell you want to 'paint'. And if you want to add an image instead of bgcolor="#anycolor" add background="graphic.gif" to the <TD> tag. Your possibilities are endless, so to speak. Now it's time to test what you have learned. Don't be ashamed if you don't know something or if you can remember all the tags. A lot of people know, HTML, but don't know all the tags. You'll learn, and we are going to help you.
Exercise: In this chapter we covered a lot of material and it was for a reason. Lately, tables are becoming very popular and it's good to know something about them. Anyway, today's "homework" is to add a centered table to your page. In the cells, list all your interests (I hope you have plenty). Use different colors and sizes for the text, and different backgrounds for the cells. The table should be somewhere around 2x2 to 4x4. This size should be just find. After you'll finish. Take a look at your page, and what you have so far. If you found a mistake, fix it. Then take a look at the source code again. Read the whole code and ask yourself if you understand everything. If you don't, it's not a problem. Simply go back a few chapters and read it again. And if you are finished, then let's proceed to the next chapter: Forms.
Part IX: Forms
Forms? Where did you head this word? Oh yeah! Remember that fancy feedback page on the other site, where you had to fill out a few fields and then all you have to do is to press Send. And in a few days you got a reply. But how? You didn't use any mailto: links or did you?
Before I'll continue I want to tell you about two types of forms. The first one is very simple. It's the one that's we are going to build in this chapter. It uses a hidden mailto: command, but you don't see it (at first). The other type is CGI form. It uses a special CGI/PERL script to send the forms to your e-mail address. To create one, you need to know the basics of CGI. Although, a lot of sites do offer FREE (yay!) CGI-supported forms, it's still VERY useful to know how to build a form.
So, let's start a new form. The very first command that you'll have to write is this
<FORM METHOD="POST" ACTION="mailto:your e-mail address">
What does it do? It does two things: 1. It tells your computer that you are starting a form
2. It also tells that all information should be sent to the following e-mail address.
p.s. Mailto: command in forms will NOT work on everyone's computer. Please be aware of it!
There are five basic form fields that you can use. I'll explain all of them.
The Text Box:
Text box is the most basic field. It's very simple. It allows only one line of text. Here's the coding for it: <INPUT TYPE="text" NAME="name" SIZE="30">
Let's take this code apart:
- Input Type alerts the computer that a form field is going to be placed here and type says what kind of form field is going to be placed here.
- Name is how you name this box. When you'll get a form with the results in your e-mail, you are going to see only text. The name will help you to determine what information goes where.
- Size denotes how many characters you can type in this box. Usually it's from 30 to 60.
The Text Area Box:
This field is almost the same as the one that we discussed before except it's larger. Here's the coding for it: <TEXTAREA NAME="comment" ROWS=6 COLS=40></TEXTAREA> The code as you noticed is slightly different from the one above. Let's take it apart.
- TEXTAREA command tells the computer that now is going to be placed a Text Area Box
- Name same as in a previous field
- Rows tells the computer how many rows is going to be in the box
- Cols tells the computer how many columns is going to be in the box
- Notice that there is an closing tag in this command: </TEXTAREA>. It is very important to use closing tag in this form field, otherwise it won't work.
The Checkbox:
- - -
Checkbox allows user to check a few choice boxes. Try checking them.
Here's the coding for each checkbox: <INPUT TYPE="checkbox" NAME="text">
There is nothing much to take apart that we don't already know. As you noticed all the commands are already explained above.
The Radio Button:
- - -
Radio Button is very similar to the checkbox, except this allows to check only one field. Try it.
Here's the code: <INPUT TYPE="radio" NAME="text"> Notice that the input type is the same as the name of the field itself: radio.
Menu Select:
Last but definitely not least, this field allows you to choose one item from the menu. Very useful and interesting.
Here's the coding:
<SELECT NAME="text" SIZE="1">
<OPTION>Text1
<OPTION>Text2
<OPTION>Text3
<OPTION>Text4
<OPTION>Text5
<OPTION>Text6
</SELECT>
This code seems to be a little more complicated than the others, but after you'll read the descriptions you are going to understand each and every part.
- <SELECT> this is a type of a form field. It tells the computer that now it's going to be Select Menu field
- NAME same as above
- SIZE tells how many items you want to be shown. Try inserting different numbers and see what happens
- <OPTION> denotes another item or line that you want to put in the menu
- </SELECT> is the closing tag. Use it to finish the menu.
Submit and Reset Buttons:
These are the final buttons. Submit button allows user to actually send all this information to the e-mail address that you put in the beginning. And Reset button will allow user to erase all information, in case he want to fill it out again or if he made some mistakes. These buttons are inactive, so if you want you can press them but nothing fill happen.
Here's the code for submit button: <input type="submit" value="Put any text that you want to be displayed on the button">
Here's the code for the reset button: <input type="reset" value="Put any text that you want to be displayed on the button">
Easy? Now end this whole form with the closing tag: </FORM>
If you tried to create a little form (I hope you already did. If you didn't then hurry up, we'll be finishing soon), and then viewed the received info in your mailbox, you should've noticed that the text comes in one long line and that the words are separated by an addition sign (+). Of course, you can read it, but it's a pain in the... (beep!). If you want the text to arrive in a normal, readable format you have to add the following code to the <FORM> flag. Here's the code: ENCTYPE="text/plain"
This simple code (simple to you), tells your computer mail this text in text-only format. Try it now and see if it works.
p.s. There are more to forms than I told you. For example, you can use CSS style sheets to create slightly different fields that you expected. Visit our Cascading Style Sheet tutorial here.
Exercise: The assignment for today's is pretty obvious. Add a small feedback form to your site. Ask the visitor for his name, e-mail, short biography, and 2 more custom questions. Direct the mailto: to your e-mail address. That's all
Part X: Conclusion
Here we are, at the end of my tutorial. The journey was kind of hard, but fun, won't you agree. Now you can tell your friends and relatives that you know another language. And you do (sort of). You've been a great audience and I appreciate you learning from me. I wrote a few more tutorials on this site, so you are welcome to check them out. Anyway, I'd also appreciate your feedback.
E-mail us at echo-web@usa.net.
Thanks You
E-mail: boris251398@hotmail.com
ICQ: 35987813
Y! Pager: boris251398
