Tables and Advanced HTML

By Peter


Tables
Input Types
Where To Go After HTML


So you already know the basics of HTML, (go here to learn the basics) now you just need to know the more advanced tags.
In this guide to Advanced HTML, I will show you some of the more advanced tags that help your site be a little more interactive.




Tip 1:

When you want to see the code (all the HTML tags that make up the page) of a webpage, right-click the page (For Mac Users: Hold down the "ctrl" key and click the page) and click "View Source" from the menu.


Tip 2:

If you can't figure something out, do 1 of 2 things:

1)Do a Google search on what you're wondering.
2)Mess around!
(where ever you see bold text inside a tag, you replace that text with your own.)



Tables

With a table, you can organize information, make a good website layout, and much, much more!

First, to make a table, you have to start with the table tag. Here it is <table></table>
Now you add a table row, and the code for that is: <tr></tr>
So now your code should look like this: <table><tr></tr></table>
Now where does the text go? Well, it goes inside a table cell: <td></td>
You can add as many table cells in as many table rows as you would like.
So now once you've typed it all up, your code should look like this: <table><tr><td>table cell's text in here</td></tr></table>
Now, you have a table! The finished table will look like this:
This is a table... YAY!!!

To set the thickness of the border around your table, add border="#" to the table tag, so that it looks like this: <table border="#"> (where I put "#" I mean the number of pixels)


Input Types


If you have "inputs" (buttons, text boxes, text areas, drop-down menu, etc.) your visitors can submit forms or play games, or any other interactive thing you can imagine!

Buttons: You might want to have buttons on your page, to submit a form, start a search, etc.
The code for the this button is is: <button>button text here</button>

or
 You can disable a button by adding: <button disabled="true">button text</button> or lt;input type="button" disabled="true" value="button text" name="button name" />
The code for the this button is: <input type="button" value="button text" name="name of button" />
The code for the this button is: <input type="submit" value="button text (optional)" name="name of button" />. The default text if you don't include value="value" is "Submit Query" on most browsers. (shown here)



Drop-Down Menus:
If you include a drop-down menu on your website, you visitors can pick from a list of items for a form.
The code for this drop-down menu is: <select>options here</select> and then where I say "options here", put these tags for every option you want: <option>the option text here</option>

Text Boxes: With a text box, users can enter information into it before submitting a form.
The code for this text box is: <input type="text" value="text box value" name="text box name" /> The value is the default text inside the text box.
The code for this text area is: <textarea cols="# of columns" rows="# of rows" name="text area name">text inside the text area</textarea> The value is the default text inside the text box.



Where to Go After HTML


After reading this guide, your probably thinking, "what should I learn after HTML?". You can do to here and study JavaScript, or you can read the JavaScript guide on this website. JavaScript makes your page interactive so you can please your visitors!

We hope this tutorial helped you! For suggestions, questions, or anything, contact yael@lime-pie.zzn.com or sasha@lime-pie.zzn.com.