Assalamualaikum Wr. Wb
Hey yow yow omi fams welcome back to my chanell eaaa... kembali lagi bersama mimin nisa, nah kali ini kita masih akan membahas tentang tabel ya geng. Pembahasan kali ini jeng jeng:> Top index
> Bottom Index
> Left Index
> Layout split
Dengan tabel kita bisa membuat layout yang colorfull seperti memakai css lho geng,asalkan kita mau menguliknya dan ulet,telaten juga. Mau tau hasil hasilnya...
Oke langsung sadja ke pembahasan pertama yaitu
1. Top index
Ini dia codingan untuk membuat top index
<!DOCTYPE html>
<html>
<head>
<title>Top index</title>
<link rel="stylesheet" href="">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="23" align="center">
<tr>
<td height="23" align="center" border color= "#FFFFFF" bgcolor="#FFFF00">
<strong><font size="+5">Banner atau iklan</font></strong></td>
</tr>
<tr>
<td height="27" align="center" bgcolor="#FFCCCC">
<font color="#FF0000">Daftar isi atau navigasi</font></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#FF66CC">
<p>Body atau contents (isi)</p>
<p><font color="#006600">Body atau contents (isi)</font></p>
<p><font color="#CC0000">Body atau contents (isi)</font></p>
<p><font color="#FFFF00">Body atau contents (isi)</font></p>
<p><font color="#FF66CC">Body atau contents (isi)</font></p>
</td>
</tr>
<tr>
<td height="23" align="center" bgcolor="#CCFF99">
<font color="#9966CC">Info tambahan atau lain-lain</font></td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Top index</title>
<link rel="stylesheet" href="">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="23" align="center">
<tr>
<td height="23" align="center" border color= "#FFFFFF" bgcolor="#FFFF00">
<strong><font size="+5">Banner atau iklan</font></strong></td>
</tr>
<tr>
<td height="27" align="center" bgcolor="#FFCCCC">
<font color="#FF0000">Daftar isi atau navigasi</font></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#FF66CC">
<p>Body atau contents (isi)</p>
<p><font color="#006600">Body atau contents (isi)</font></p>
<p><font color="#CC0000">Body atau contents (isi)</font></p>
<p><font color="#FFFF00">Body atau contents (isi)</font></p>
<p><font color="#FF66CC">Body atau contents (isi)</font></p>
</td>
</tr>
<tr>
<td height="23" align="center" bgcolor="#CCFF99">
<font color="#9966CC">Info tambahan atau lain-lain</font></td>
</tr>
</table>
</form>
</body>
</html>
Hasilnya jadi seperti ini gengs:
Gimana fullcolor kan kayak hidup mimin penuh dengan warna eaaaa. Ouh iya lupa mau ngasih tau di dalam codingan ada tag form ya geng fungsinya tuh biasanya untuk membuat pendaftaran akun, log in page dll.
2. Bottom index
Ini dia scriptnya gengs:
<!DOCTYPE html>
<html>
<head>
<title>Bottom index</title>
<link rel="stylesheet" href="">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="542" border="1" align="center">
<tr>
<td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00">
<strong><font size="+5">Baner/Judul</font></strong></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#CCCCCC">
<p>Body atau contents (isi)</p>
<p><font color="#006600">Body atau contents (isi)</font></p>
<p><font color="#CC0000">Body atau contents (isi)</font></p>
<p><font color="#FFFF00">Body atau contents (isi)</font></p>
<p><font color="#990033">Body atau contents (isi)</font></p>
</td>
</tr>
<tr>
<td height="23" align="center" bgcolor="#CCFF99"><font color="#FF0000">
<strong><font size="+2">Daftar isi atau navigasi</font></strong></font>
</td>
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Bottom index</title>
<link rel="stylesheet" href="">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="542" border="1" align="center">
<tr>
<td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00">
<strong><font size="+5">Baner/Judul</font></strong></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#CCCCCC">
<p>Body atau contents (isi)</p>
<p><font color="#006600">Body atau contents (isi)</font></p>
<p><font color="#CC0000">Body atau contents (isi)</font></p>
<p><font color="#FFFF00">Body atau contents (isi)</font></p>
<p><font color="#990033">Body atau contents (isi)</font></p>
</td>
</tr>
<tr>
<td height="23" align="center" bgcolor="#CCFF99"><font color="#FF0000">
<strong><font size="+2">Daftar isi atau navigasi</font></strong></font>
</td>
</td>
</tr>
</table>
</form>
</body>
</html>
Nah jika di buka di browser hasilnya akan jadi seperti ini:
3. Left index
Ini dia scriptnya:
<!DOCTYPE html>
<html>
<head>
<title>Left color</title>
<link rel="stylesheet" href="">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="447" border="1" align="center" cellspacing="1">
<tr>
<th width="160" rowspan="3" valign="top" bgcolor="#993366"><p>Home</p>
<p>Profile</p>
<p>About Us</p>
<p>Blog</p>
<p>Contact Us</p></th>
<th width="627" height="23" align="center" bgcolor="#FFFF99">
<strong><font color="#CCCCCC" size="+4">Electronic shop</font></strong>
</th>
</tr>
<tr>
<dd><td height="176" align="center" valign="top" bgcolor="#FFFF99">
Selamat datang di web kami, penjualan produk online iniadalah yang pertama di kota kami. Kualitas dan harga dapat dipercaya langsung saja pesan dan menjadi langganan kami
</td></dd>
</tr>
<tr>
<td height="30" align="center" bgcolor="#FFFF99">
<font size="+2">Profilkami.com</font>
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Left color</title>
<link rel="stylesheet" href="">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="447" border="1" align="center" cellspacing="1">
<tr>
<th width="160" rowspan="3" valign="top" bgcolor="#993366"><p>Home</p>
<p>Profile</p>
<p>About Us</p>
<p>Blog</p>
<p>Contact Us</p></th>
<th width="627" height="23" align="center" bgcolor="#FFFF99">
<strong><font color="#CCCCCC" size="+4">Electronic shop</font></strong>
</th>
</tr>
<tr>
<dd><td height="176" align="center" valign="top" bgcolor="#FFFF99">
Selamat datang di web kami, penjualan produk online iniadalah yang pertama di kota kami. Kualitas dan harga dapat dipercaya langsung saja pesan dan menjadi langganan kami
</td></dd>
</tr>
<tr>
<td height="30" align="center" bgcolor="#FFFF99">
<font size="+2">Profilkami.com</font>
</td>
</tr>
</table>
</form>
</body>
</html>
Hasilnya akan jadi seperti ini:
4. Layout split
Ini dia codingannya:
<!DOCTYPE html>
<html>
<head>
<title>Left index</title>
<link rel="stylesheet" href="">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="512" border="1" align="center">
<tr>
<td width="15%" rowspan="2" align="center" bgcolor="#99CC99">
<strong>Daftar isi</strong></td>
<td width="67%" height="23" align="center" bgcolor="#FFCCFF">
<font size="+3"><strong>Baner/judul</strong></font></td>
<td width="18%" rowspan="2" align="center" bgcolor="#99CC99">
<strong>Daftar isi</strong></td>
</tr>
<tr>
<td height="456" align="center" bgcolor="#CCCCCC">
<p>Body atau contents (isi)</p>
<p><font color="#006600">Body atau contents (isi)</font></p>
<p><font color="#CC0000">Body atau contents (isi)</font></p>
<p><font color="#FFFF00">Body atau contents (isi)</font></p>
<p><font color="#990033">Body atau contents (isi)</font></p>
</td>
</tr>
<tr bgcolor="#FF99FF">
<td height="23" colspan="3" align="center">Lain lain</td>
</tr>
</body>
</html>
<html>
<head>
<title>Left index</title>
<link rel="stylesheet" href="">
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="512" border="1" align="center">
<tr>
<td width="15%" rowspan="2" align="center" bgcolor="#99CC99">
<strong>Daftar isi</strong></td>
<td width="67%" height="23" align="center" bgcolor="#FFCCFF">
<font size="+3"><strong>Baner/judul</strong></font></td>
<td width="18%" rowspan="2" align="center" bgcolor="#99CC99">
<strong>Daftar isi</strong></td>
</tr>
<tr>
<td height="456" align="center" bgcolor="#CCCCCC">
<p>Body atau contents (isi)</p>
<p><font color="#006600">Body atau contents (isi)</font></p>
<p><font color="#CC0000">Body atau contents (isi)</font></p>
<p><font color="#FFFF00">Body atau contents (isi)</font></p>
<p><font color="#990033">Body atau contents (isi)</font></p>
</td>
</tr>
<tr bgcolor="#FF99FF">
<td height="23" colspan="3" align="center">Lain lain</td>
</tr>
</body>
</html>
Mau tau hasilnya ini dia
5. Part bonus
Nah disini mimin akan memperlihatkan karya mimin, disini mimin memakai left index karena ya dirasa cocok aja gitu, pas liat nya juga langsung klop (*maafkan mimin kalo ngawur.. karena lagi gak fokus)
Ini dia codingnya gengs monggo diliat:
<!DOCTYPE html>
<html>
<head>
<title>Pt Homina</title>
<link rel="stylesheet" href="">
</head>
<body>
<font face="Tw Cen MT">
<table border="0" cellspacing="0">
<tr>
<th align="center" valign="top" width="200" height="700" rowspan="4" bgcolor="#3E3230"><br><br><br>
<font color="white">
<p>Search :</p>
<hr><p>Home</p>
<hr><a href="biodata.html"><p>Profile</p></a>
<hr><p>Blog</p>
<hr><p>About Us</p>
<hr><p>Contact Us</p><hr>
<p><marquee>Hub : 088218473970</marquee></p>
</th>
</font>
</tr>
<tr>
<th bgcolor="#D3C2BE" align="center" height="100"><font size="7"> Homina fams<hr color="black" width="500"></th></font>
</tr>
<tr>
<td bgcolor="#D3C2BE" height="500" valign="top">
<center><img src="bahan/keju.png" width="400" height="250"><hr color="black" width="500"></center>
<p><h1><center>Tutorial membuat kue kastangel keju</center></h1></p>
<p><h2><dd>Bahan-bahan</dd></h2></p>
<ul>
<dd>
<font size="+2">
<li>Margarine 300 gram,atau bisa gunakan komposisi 200 gram margarine dan 100 gram mentega</li>
<li>Kuning telur suhu ruang 2 butir</li>
<li>Telur 1 butir</li>
<li>Keju cheddar parut 300 gram,sisihkan sekitar 4 sendok makan untuk hiasan atau topping kue kering kastengel</li>
<li>Vanilla extract 2 sendok teh</li>
<li>Susu bubuk full cream 2 sendok makan</li>
<li>Tepung maizena 100 gram</li>
</font>
</dd>
</ul>
</td>
</tr>
<tr>
<td bgcolor="#D3C2BE" height="50" align="center">
<font size="+1"><b><hr color="black" width="300">Create by: Annisarhy ♥</b></font>
</td>
</tr>
</table>
</font>
</body>
</html>
<html>
<head>
<title>Pt Homina</title>
<link rel="stylesheet" href="">
</head>
<body>
<font face="Tw Cen MT">
<table border="0" cellspacing="0">
<tr>
<th align="center" valign="top" width="200" height="700" rowspan="4" bgcolor="#3E3230"><br><br><br>
<font color="white">
<p>Search :</p>
<hr><p>Home</p>
<hr><a href="biodata.html"><p>Profile</p></a>
<hr><p>Blog</p>
<hr><p>About Us</p>
<hr><p>Contact Us</p><hr>
<p><marquee>Hub : 088218473970</marquee></p>
</th>
</font>
</tr>
<tr>
<th bgcolor="#D3C2BE" align="center" height="100"><font size="7"> Homina fams<hr color="black" width="500"></th></font>
</tr>
<tr>
<td bgcolor="#D3C2BE" height="500" valign="top">
<center><img src="bahan/keju.png" width="400" height="250"><hr color="black" width="500"></center>
<p><h1><center>Tutorial membuat kue kastangel keju</center></h1></p>
<p><h2><dd>Bahan-bahan</dd></h2></p>
<ul>
<dd>
<font size="+2">
<li>Margarine 300 gram,atau bisa gunakan komposisi 200 gram margarine dan 100 gram mentega</li>
<li>Kuning telur suhu ruang 2 butir</li>
<li>Telur 1 butir</li>
<li>Keju cheddar parut 300 gram,sisihkan sekitar 4 sendok makan untuk hiasan atau topping kue kering kastengel</li>
<li>Vanilla extract 2 sendok teh</li>
<li>Susu bubuk full cream 2 sendok makan</li>
<li>Tepung maizena 100 gram</li>
</font>
</dd>
</ul>
</td>
</tr>
<tr>
<td bgcolor="#D3C2BE" height="50" align="center">
<font size="+1"><b><hr color="black" width="300">Create by: Annisarhy ♥</b></font>
</td>
</tr>
</table>
</font>
</body>
</html>
Mau tau hasilnya kan, aaaa cie kepo
Tuh hasilnya, ya kalo kurang bagus maafin yak soalnya mimin juga masi belajar, jadi maklumin ya.. ouh iya itu di tulisan profile bisa diklik gengs, terus langsung pindah ke profile mimin jeng jeng
Mungkin kali ini itu yang bisa dibahas oleh mimin, karena keadaan mimin yang lagi drop, doa'in ya semoga cepet sembuh.... maaf juga bisi banyak typo, karena mimin hanya manusia bukan robot
Jaga kesehatan, karena sakit tuh gaenak:(
0 Komentar