Thursday, September 13, 2007

Let's build a simple web page using a table In HTML Programming


Now we will build a simple website used a table element in HTML code. We build a simpe web with two coloumn. You can see the example in here. or bellow this



That website combine with tree table.

First, the big table. Table to divide web begin tree a part. that is part of header, content, and footer. The content consist of left side and right side. The left side used to put the menu block, web link, and another block. That the right site used to paragraph of contents.

The second table use to fill in left side on the first table. That is used to arrange the block menu and the other block. And the third table is filled the right side on the first table. its used to arrange the contents of web.

Now we build the big table first. We build this table with a two coloumns and three rows. Lets see the structur of this table first.



Now here's the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Simple Personal Web</title>
</head>
<body topmargin=0 leftmargin=0>
<table width=779 cellpadding=0 cellspacing=0 border=0 bgcolor="#FFFFFF">
<tr>
<td colspan=2>
<!---- begin header ---->

<!---- end header ---->
</td>
</tr>
<tr>
<td width=179 bgcolor="#F0F0F0" valign="top">
<!---- begin left block ---->

<!---- end left block ---->
</td><td width=600 valign="top">
<!---- begin right block ---->

<!---- end right block ---->
</td>
</tr>
<tr>
<td colspan=2 align=center bgcolor="#4B0082" height=30>
<!---- begin footer ---->

<!---- end footer ---->
</td>
</tr>
</table>
</body>
</html>


Ok, we put the picture on the header part. you can save the picture in here.


<!---- begin header ---->
<img src="banner.jpg" border=0>
<!---- end header ---->


In the left side we will build the second table. See the structur table in here.



Now the code should be like that.

<!---- begin left block ---->
<table width="100%" cellspacing=0 cellpadding=5 border=0>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Menu Utama</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Home
<li>My Profile
<li>My Hobby
<li>My Friend
<li>My Photo
</ul>
</td>

</tr>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Web link</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Astagina
<li>Yahoo.com
<li>Google
<li>M3-access
<li>Primbon.com
</ul>
</td>

</tr>
</table>
<!---- end left block ---->



And now we build the third table. You can see the structur of table



And here's the code.

<!---- begin right block ---->
<table width=100% cellpadding=5 border=0>
<tr>
<td>
<font face="verdana" size=2><b>
Welcome to my Site</b><hr>
<a href="1.jpg"><img src="1.jpg" border=0 width=180 height=110 align="left" hspace=5 vspace=0></a>Selamat datang di situs pribadiku yang teramat sangat sederhana ini. Disini ada beberapa menu link yang bisa anda jelajahi. Masing masing menu merupakan sepenggal dari kehidupanku di dunia yang fana ini.<br>

Tak lupa aku ucapkan kepada Tuhan yang Maha Esa yang telah memberi kesehatan padaku hingga aku dapat menyelesaikan website pribadiku ini serta kepada teman-temanku yang telah membantuku untuk membuat website pribadi ini. Jangan lupa untuk memberikan kritik dan sarannya guna memajukan dan membangun website ini menjadi lebih baik<br>
Jika ada saran dan kritik segera kirim kesini neehh!<br>
<a href="mailto"innan@tegal.indo.net.id">innan@tegal.indo.net.id</a><br>
Jangan lupa yaaahhhh!!
<br><br><b>Salam, Innan Mei Setiyono</B><br>
Web deigner and programmer<br>
</td>
</tr>
</table>
<!---- end right block ---->



And the last we put a copyright on the footer part like this.

<!---- begin footer ---->
<font face="verdana" size=2 color="#FFFFFF">Copyright © Mysite.com 2005
<!---- end footer ---->

Ok let's combine all of code, you can see the code here.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Simple Personal Web</title>
</head>
<body topmargin=0 leftmargin=0>
<table width=779 cellpadding=0 cellspacing=0 border=0 bgcolor="#FFFFFF">
<tr>
<td colspan=2>
<!---- begin header ---->
<img src="banner.jpg" border=0>
<!---- end header ---->
</td>
</tr>
<tr>
<td width=179 bgcolor="#F0F0F0" valign="top">
<!---- begin left block ---->
<table width="100%" cellspacing=0 cellpadding=5 border=0>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Menu Utama</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Home
<li>My Profile
<li>My Hobby
<li>My Friend
<li>My Photo
</ul>
</td>

</tr>
<tr>
<td bgcolor=#cococo><font face="verdana" size=2><b>Web link</b>
</td>
</tr>
<tr>
<td><font face="verdana" size=2>
<ul>
<li>Astagina
<li>Yahoo.com
<li>Google
<li>M3-access
<li>Primbon.com
</ul>
</td>

</tr>
</table>
<!---- end left block ---->
</td><td width=600 valign="top">
<!---- begin right block ---->
<table width=100% cellpadding=5 border=0>
<tr>
<td>
<font face="verdana" size=2><b>
Welcome to my Site</b><hr>
<a href="1.jpg"><img src="1.jpg" border=0 width=180 height=110 align="left" hspace=5 vspace=0></a>Selamat datang di situs pribadiku yang teramat sangat sederhana ini. Disini ada beberapa menu link yang bisa anda jelajahi. Masing masing menu merupakan sepenggal dari kehidupanku di dunia yang fana ini.<br>

Tak lupa aku ucapkan kepada Tuhan yang Maha Esa yang telah memberi kesehatan padaku hingga aku dapat menyelesaikan website pribadiku ini serta kepada teman-temanku yang telah membantuku untuk membuat website pribadi ini. Jangan lupa untuk memberikan kritik dan sarannya guna memajukan dan membangun website ini menjadi lebih baik<br>
Jika ada saran dan kritik segera kirim kesini neehh!<br>
<a href="mailto"innan@tegal.indo.net.id">innan@tegal.indo.net.id</a><br>
Jangan lupa yaaahhhh!!
<br><br><b>Salam, Innan Mei Setiyono</B><br>
Web deigner and programmer<br>
</td>
</tr>
</table>
<!---- end right block ---->
</td>
</tr>
<tr>
<td colspan=2 align=center bgcolor="#4B0082" height=30>
<!---- begin footer ---->
<font face="verdana" size=2 color="#FFFFFF">Copyright © Mysite.com 2005
<!---- end footer ---->
</td>
</tr>
</table>
</body>
</html>


Now you have done make a simple website using a table. it's very easy isn't ?

posted by Innan Mei Setiyono at 9:18 AM 1 comments

Tuesday, September 11, 2007

HTML Colspan And Rowspan on the table


Colspan indicate how many columns of cell should be take up to span together.
Rowspan indicate how many rows of cell should be take up to span together.

For example we want to build the list of employer in the table. In head cell have coloumn Name and Region. Below the Region colounm header have a two coloumn, that is a City and Post Code. For more understanding what i meands, look the example table in below.

Now let's see the code in here :

<table border="1">
<tr>
<td rowspan="2">Name</td>
<td colspan="2">Region</td>
</tr>
<tr>
<td>City</td>
<td>Post Code</td>
</tr>
<tr>
<td>Innan Mei S</td>
<td>Tegal</td>
<td>52123</td>
</tr>
<tr>
<td>Jimy John</td>
<td>Semarang</td>
<td>7586</td>
</tr>
<tr>
<td>Arde Sany</td>
<td>Jakarta</td>
<td>58985</td>
</tr>
</table>


The value of attribute colspan or rowspan is integer like in the example (Rowspan = 2 or colspan = 2), its means cell many row that you want span.
You can use the attribut cellpadding or bgcolor to make the table more beauty.

posted by Innan Mei Setiyono at 9:11 AM 0 comments

Monday, September 10, 2007

Attribut TD on table


BGCOLOR and BACKGROUND

Bgcolor used to give a background color in the table cell. And if you want to give a background image use the background attribute. Remember the image must be one place with the HTML file.

example

<table>
<tr>
<td bgcolor="yellow">A<td bgcolor="purple">B</td>
</tr>
</table>

Here is ther result -- Ini hasilnya.




AB


ALIGN and VALIGN

Align use to arrange horisontal alligment in the cell table. The value is left, right and center.
Valign use to arrange vertical aligment, the value is top, bottom and middle.

The example

<table width=250 height=200 border=1>
<tr>
<td align="right" valign="top">A</td>
<td align="left" valign="bottom">B</td>
</tr>
</table>

here the result





AB

posted by Innan Mei Setiyono at 12:10 PM 0 comments

Saturday, September 08, 2007

ATTRIBUTE ON TABLE IN HTML CODE


BORDER

Border use to make a border in the table, when border attribute didn't place in the table the preview not look a table. The value on the pixels.

for example :

<TABLE>
<TR>
<TD>A</TD><TD>B</TD>
</TR>
</TABLE>

The preview like this



AB
But you can see if the table have a border attribute like this example:

<TABLE BORDER=1>
<TR>
<TD>A</TD><TD>B</TD>
</TR>
</TABLE>

Here is the result



AB
You can see the different from both, isn't ?

CELLSPACING AND CELLPADDING

To give a distance of cell use the cellspacing atribute, but if you want to give distance cell with the text/content of column use the cellpadding attribute.

The example like this -- Contohnya sbb:

<TABLE BORDER=1 CELLPADDING=5 CELLSPACING=5>
<TR>
<TD>A</TD><TD>B</TD>
</TR>
</TABLE>

Here the result



AB
WIDTH AND HEIGHT

Width use to arrange wide of the table, its can use pixels or percent value. To arrange hight of the table you can use Height attribute.

For example -- Contohnya

<TABLE BORDER=1 CELLPADDING=5 CELLSPACING=5 WIDTH=250 HEIGHT=250>
<TR>
<TD>A</TD><TD>B</TD>
</TR>
</TABLE>

Here the result



AB
BGCOLOR or BACKGROUND

Do you remember BGCOLOR dan BACKGRAUND atribute in BODY tag? the function is same, but it use to give a background of the table. IF the background is color you can use the bgcolor attribute but if the background is picture use the background attribute.

The example using background color :

<TABLE BGCOLOR="blue" BORDER=1 CELLPADDING=5 CELLSPACING=5 WIDTH=250 HEIGHT=250>
<TR>
<TD>A</TD><TD>B</TD>
</TR>
</TABLE>

The result



AB
The example using background picture :

<TABLE BACKGROUND="01.jpg" BORDER=1 CELLPADDING=5 CELLSPACING=5 WIDTH=250 HEIGHT=250>
<TR>
<TD>A</TD><TD>B</TD>
</TR>
</TABLE>

The result



AB


To be Continued....

posted by Innan Mei Setiyono at 8:48 AM 0 comments

Friday, September 07, 2007

Make TABLE in HTML Programming


To make a table in HTML programming use <TABLE> tag and ended </TABLE>.
There are have a 2 part of table its row and cell. To make a row in table use <TR></TR> inside <TABLE> and </TABLE> tag and to make a cell use <TD></TD> insede the <TR> and </TR> tag.
The code like this:

<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>

That code used to make a table with one row and one column.

More Example

<HTML>
<HEAD><TITLE>My table</TITLE></HEAD>
<BODY>
<TABLE>
<TR>
<TD>No</TD><TD>Name</TD>
</TR>
<TR>
<TD>1</TD><TD>Rudi</TD>
</TR>
<TR>
<TD>2</TD><TD>Dodi</TD>
</TR>
</TABLE>
</BODY>
</HTML>

The preview will be like this

posted by Innan Mei Setiyono at 8:29 PM 1 comments