Layout Halaman Web Left Index, Layout Split, dan Alternating Index

Assalamualaikum WR.WB

Selamat pagi/siang/malam. Kali ini saya akan memposting contoh Layout Halaman Web Left Index, Layout Split, dan Alternating Index.

1. Layout Halaman Web Left Index.

 Codingnya.

<html>
<body>
<head>
<title>Left Index</title>
<form id="form1" name="form1" method="post" action="">
<table width="825" height="447" border="1" cellspacing="1">
<tr>
<td width="160" rowspan="4" align="center" valign="top" bgcolor="red"><b>
<p>Home</p>
<p>Profile</p>
<p>About Us</p>
<p>Blog</p>
<p>Contact Us</p></b>
</tr>
<th width="627" height="100" align="center" bgcolor="black"><strong><font color="white" size="+4">Electronic Shop</font></strong></th>
<tr>
<td align="center" valign="center" bgcolor="yellow"><font color="black">Selamat datang di web kami, penjualan produk online ini adalah yang pertama di kota kami. kualaitas dan harga dapat dipercaya langsung saja pesan dan menjadi langganan kami.</font></td>
</tr>
<tr>
<td height="30" align="center" bgcolor="black"><font color="white" size="+2">profilkami.com</font></td>
</tr>
</table>
</body>
</html>

Hasil coding.


Home
Profile
About Us
Blog
Contact Us
Electronic Shop
Selamat datang di web kami, penjualan produk online ini adalah yang pertama di kota kami. kualaitas dan harga dapat dipercaya langsung saja pesan dan menjadi langganan kami.
profilkami.com

2. Layout Split

Codingnya.

<html>
<head>
<title>Layout Split</title>
</head>
<body>
<table border=1 width=720px height=500px>
<tr>
<td width="100" bgcolor="yellow" rowspan=2 align=center>Daftar isi</td>
<td bgcolor="black" align=center><font color="yellow"><h2>Banner/Judul</font></h2></td>
<td width="100" bgcolor="yellow" rowspan=2 align=center>Daftar isi</td>
</tr>
<tr>
<td bgcolor="#f1f1f1" align=center>
<p>Body atau contents(isi)</p>
<p><font color="black">Body atau contents(isi)</font></p>
<p><font color="black">Body atau contents(isi)</font></p>
<p><font color="black">Body atau contents(isi)</font></p>
<p><font color="black">Body atau contents(isi)</font></p>
</td></tr>
<tr><td bgcolor="black" colspan=3 align=center height="20px"><font color="yellow">Lain-lain</font></td></tr>
</table>
</body>
</html>


Hasilnya.

Daftar isi

Banner/Judul

 Daftar isi
Body atau contents(isi)
Body atau contents(isi)
Body atau contents(isi)
Body atau contents(isi)
Body atau contents(isi)
Lain-lain

3. Alternating Index

Codingnya.

<html>
<head>
<title>Alternating Index</title>
</head>
<body>
<table border=1>
<tr>
<td bgcolor="red" align=center width=250px height=170px><font color="black">Teks daftar isi<font></td>
<td bgcolor="black" align=center width=250px height=170px><font size="+3" color="white"><b><i>Gambar</i></b></font></td>
</tr>
<tr>
<td bgcolor="black" align=center width=250px height=170px><font size="+3" color="white"><b><i>Gambar</i></b></font></td>
<td bgcolor="red" align=center width=250px height=170px><font color="black">Teks daftar isi<font></td></tr>
<tr>
<td bgcolor="yellow" colspan=2 align=center width=170px height=100px><font color="red">Lain-lain</font></td></tr>
</table>
</body>
</html>

Hasilnya.

Teks daftar isi Gambar
Gambar Teks daftar isi
Lain-lain

Inilah postingan contoh Layout Halaman Web Left Index, Layout Split, dan Alternating Index. sekian dari saya.
Wassalamualaikum WR.WB.

Komentar

Posting Komentar

Postingan populer dari blog ini

Menggabungkan Gambar Dan Teks Secara Vertikal

Gambar
Assalamualaikum Wr.Wb Kali ini saya akan memposting tentang Menggabungkan Gambar dan Teks secara Vertikal dalam bentuk coding html.. - Menggabung atau menyisipkan gambar didalam suatu teks atau paragraf tertentu. Terdapat pilihan posisi gambar yang harus diperhatikan. - Secara Vertikal:    1. Teks bisa berada sejajar dengan bagian atas gambar.    2. Teks bisa berada sejajar dengan bagian tengah gambar.    3. Teks bisa berada sejaja dengan bagian bawah gambar. - Untuk posisi gambar yang dilihat dari arah vertikal dapat ditentukan dengan mengisi nilai TOP, MIDDLE, atau  BOTTOM, kedalam atribut ALIGN yang terdapat pada tag <img>. CODING : <!DOCTYPE HTML> <html> <head> <title>gambar</title> </head> <h1> Menggabung gambar dan teks, posisi terhadap teks secara vertikal</h1> <body> <p><img src="smk2.jpeg" width="150" align="TOP"> logo 1 (menggunakan align=TOP)</p> <p...
Baca selengkapnya

SUSUNAN KABEL LAN BERDASARKAN STANDAR PENGKABELAN EIA 586

Gambar
Assalamualaikum wr.wb Pada kali ini saya akan membahas tentang :  SUSUNAN KABEL LAN BERDASARKAN STANDAR PENGKABELAN EIA 586 A. Pengertian Kabel UTP kabel UTP (Unshiel ded Twisted Pair) adalah jenis kabel ini terbuat dari bahan penghantar tembaga, mempunyai isolasi dari plastik & terbungkus oleh bahan isolasi yang dapat melindungi dari api dan juga kerusakan fisik  tetapi tidak memiliki pelindung dari interferensi elektromagnetik, namun jenis kabel ini banyak digunakan karena harga yang relatif murah dan fungsinya yang memang sudah sesuai dengan standar yang diharapkan. , kabel UTP sendiri terdiri dari 4 pasang inti kabel yang saling berbelit dimana masing-masing pasang mempunyai kode warna berbeda. B. Bagan Kabel UTP (berserta outer jacket)   C. Susunan Standar Pengkabelan EIA 586 Berdasarkan Warna Kabel untuk Sraight dan Cross-Over   STRAIGHT             ...
Baca selengkapnya