|
This tutorial will cover most of the basics in how to make your very first web page. HTML Tags covered in this tutorial <table><tr><td>
Open your index.html file that we started working with from the second tutorial and copy and paste this HTML code into your document:
<head>
<title>My Resume</title>
</head>
<body>
<p align="center"><font color="#0000FF" size="6"><b>Jason Rundell</b></font><br>
<font size="4">123 URL.biz Drive<br>
<i>www.url.biz, World Wide Web, 216.22.36.55</i></font><br>
<u>Tel: 123-123-1234 Cell Phone: 123-123-1234 fakeemail@url.biz</u></p>
</body>
</html>
This will be our starting point for finishing our resume web page. Below is what we will be trying to achieve ...Jason Rundell
123 URL.biz Drive
www.url.biz, World Wide Web, 216.22.36.55
Tel: 1-123-123-1234 Cell Phone: 123-123-1234 fakeemail@url.biz
| PROFILE: | Experience in leadership and supervisory roles | | | Attentive, loyal, organized, and self motivated | | | Problem solving skills | | | Easily adaptive to changing environment | | | Experience in systems analysis, programming, server analysis, network installation, and trouble shooting | | | Ability to deliver results in a timely and positive manner |
We're almost done. Our header information is completed so all we have left to do is tackle the table that contains our profile information.
In my opinion, tables are one of the greatest and most powerful elements that are used in HTML. They order and structure content and are the invisible skeleton to some of the most complex sites on the net. Below are just some examples of sites that rely on tables:
| SITE NAME | AMOUNT (APROX.) | | http://www.yahoo.com | 71 table elements used | | http://www.cnn.com | 50 table elements used | | http://www.msn.com | 41 table elements used | | http://www.playboy.com | 16 table elements used |
CSS is an alternative method of shaping site design, www.macromedia.com is a superb example of a site built with CSS and absolutely NO tables. The difference between working with tables and CSS, however, is dramatic. HTML tables are much more "hands-on" and concrete, where CSS is much more coding intensive and impalpable. There are also other things that set the two types apart. The learning curve for CSS is slightly steeper than the curve for learning how to create and use HTML tables. The list goes on and on, so I will eventually dedicate a tutorial on CSS ;)
Anyway, back to our Resume table. Take a look below to the new elements I have added to our HTML code:
<head>
<title>My Resume</title>
</head>
<body>
<p align="center"><font color="#0000FF" size="6"><b>Jason Rundell</b></font><br>
<font size="4">123 URL.biz Drive<br>
<i>www.url.biz, World Wide Web, 216.22.36.55</i></font><br>
<u>Tel: 123-123-1234 Cell Phone: 123-123-1234 fakeemail@url.biz</u></p>
<table>
<tr>
<td></td>
</tr>
<table>
</body>
</html>
There are many tag properties to learn for tables. The first thing to know is that tables are comprised of rows and columns. Rows run along a table's border horizontally and columns run vertically.
| 1 Row with 3 Columns
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table> | | 1 Column with 3 Rows <table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table> |
A table's border can be of varying thickness. You can use any positive integer as a border value (0 - Infinity).
| <table border="0"> (Invisible) | | <table border="1"> (default size) | | <table border="2"> | | <table border="3"> | | <table border="4"> | | <table border="5"> |
The squares inside of a table are also called "Cells" - like a prison cell - square and keep things contained within their walls. Cells can have "Padding" and "Spacing". Here are some examples of their effect on a table:
| <table cellpadding="0"> (None) | | <table cellpadding="1"> (default size) | | <table cellpadding="5"> | | <table cellspacing="0"> (None) | | <table cellspacing="1"> (default size) | | <table cellspacing="5"> |
Just like how we learned to align text with our paragraph (<p>) tags, you can use the "align" property to align HTML tables.
| <table align="left"> | <table align="center"> | <table align="right"> | | | |
You can also control a table's width and height with the "width" and "height" properties.
| <table width="100"> | <table height="100"> | | |
Images and colors can be applied to a table's background when necessary.
| <table bgcolor="#FF0000"> | | | | <table background="http://www.url.biz/images/logo2.gif"> |
Rows are created with the <tr></tr> tags. Columns are made with the <td></td> tags. Most of the above properties can also be applied to the <tr> and <td> tags.
Now that we know our properties lets finish our Resume's table (I know I've been doddling along but now I'm finally getting to it). With the table in our resume I've created a a left aligned table with 6 rows, 2 columns, cellpadding value of 5, and a width of 50%.
Whenever I hand-code a table I start by first creating the <table> and </table> tags:
<table></table>
Then, I visualize in my head how many rows I will need and then place their tags in first.
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
Then I visualize how many columns I'll need and place their tags inside the row tags.
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Now I have my 6 rows and 2 columns. All that's left is the cellpadding, table alignment, table width, and inputing our profile content.
<table cellpadding="5" align="center" width="50%">
<tr>
<td><b><font color="#FF0000">PROFILE:</font></b></td>
<td>Experience in leadership and supervisory roles</td>
</tr>
<tr>
<td></td>
<td>Attentive, loyal, organized, and self motivated</td>
</tr>
<tr>
<td></td>
<td>Problem solving skills</td>
</tr>
<tr>
<td></td>
<td>Easily adaptive to changing environment</td>
</tr>
<tr>
<td></td>
<td>Experience in systems analysis, programming, server analysis, network installation, and trouble shooting</td>
</tr>
<tr>
<td></td>
<td>Ability to deliver results in a timely and positive manner</td>
</tr>
</table>
As you can see, coding a simple table can be fairly labour-intensive! So you should always bee looking for shortcuts! One shortcut we could make is to use just 1 row, 2 columns, break up the seperate points with <br> tags, and align both columns of text (vertically) to the top.
<table cellpadding="5" align="center" width="50%">
<tr>
<td valign="top"><b><font color="#FF0000">PROFILE:</font></b></td>
<td valign="top">Experience in leadership and supervisory roles<br><br>
Attentive, loyal, organized, and self motivated<br><br>
Problem solving skills<br><br>
Easily adaptive to changing environment<br><br>
Experience in systems analysis, programming, server analysis, network installation, and trouble shooting<br><br>
Ability to deliver results in a timely and positive manner</td>
</tr>
</table>
Woa! Look at that! Much smaller! When we minimizing the amount of characters of code used we also minimize the size of our index.html file. When we decrease files sizes we decrease the amount of time people have to spend in order to download our HTML files (and also images). Smaller and faster is always the way to go on the world wide web! Also, if you have this kind of mindset - where you always try to cut off the excess - your large projects will reap the benefits.
Below is our completed Resume HTML code:
<head>
<title>My Resume</title>
</head>
<body>
<p align="center"><font color="#0000FF" size="6"><b>Jason Rundell</b></font><br>
<font size="4">123 URL.biz Drive<br>
<i>www.url.biz, World Wide Web, 216.22.36.55</i></font><br>
<u>Tel: 123-123-1234 Cell Phone: 123-123-1234 fakeemail@url.biz</u></p>
<table cellpadding="5" align="center" width="50%">
<tr>
<td valign="top"><b><font color="#FF0000">PROFILE:</font></b></td>
<td valign="top">Experience in leadership
and supervisory roles<br><br>
Attentive, loyal, organized, and self motivated<br><br>
Problem solving skills<br><br>
Easily adaptive to changing environment<br><br>
Experience in systems analysis, programming, server analysis, network installation, and trouble shooting<br><br>
Ability to deliver results in a timely and positive manner</td>
</tr>
</table>
</body>
</html>
That's it for this tutorial kiddies, the next one will be on bullet points, images, and image maps. If you have any questions or comments on this tutorial please go to my web site's Contact page (http://www.visexpert.com/contact.php) and message me.
|
