Layout Halaman Web

Assalamualikum
Saya akan menunjukkan coding  Layout Halaman Web.
Beberapa model layout yang biasa digunakan dalam mendesain suatu halaman web, diantaranya adalah
Top Index digunakan untuk menampilkan link yang banyak ke situs lain, seperti search engine.
Bottom Index Biasanya digunakan apabila isi dari halaman banyak berhubungan dengan topik tunggal
Left Index Digunakan untuk layar dengan resolusi yang lebar sehingga mudah dalam penyediaan navigasi, tanpa menimbulkan kekacauan penyajian pada halaman utama
Layout Split Merupakan model yang banyak dipakai, karena terjaga keseimbangan dalam halaman web
Alternating Index digunakan untuk halaman yang banyak menampilkan grafik, foto dan produk yang disertai dengan teks berupa keterangan, harga, jumlah, dan lain - lain. 
Contoh coding: pada Notpad++
1. Top Index
Top Index
<!DOCTYPE html>
<head>
<title>Top index</title>
</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">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> 
</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="#FF6633">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>   
 
   
Coding


Hasil


2. Bottom Index
<!DOCTYPE html>
<head>
<title>Bottom Index</title>
</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">Banner / 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><font color="#9966CC" size="+2">&nbsp;</font></td>
</tr>
</table>
</form>
</body>
</html>

 Coding


Hasil


Fungsi <form> disini untuk Tampilan yang memperlihatkan data 1 record secara keseluruhan dalam tampilan yang lebih menarik dan dapat juga untuk menambah, mengubah, ataupun menghapus data.

HTML Form, Atribut dan Fungsinya

Action Attribute

Action attribute pada HTML Form berfungsi untuk mendefinisikan tindakan apa yang akan dilakukan ketika formulir dikirimkan. contoh: server yang ditentukan untuk menangani formulir yang diajukan adalah ke halaman contoh_action.php

Method Attribute

Ada dua method, yaitu GET dan POST. Apa bedanya? method GET pada HTML Form digunakan jika pengiriman data bersifat pasif, Bila kamu menggunakan method GET maka data yang dikirim akan terlihat pada page address. Misalnya saja permintaan pada mesin pencari.

Name Attribute

Name attribute pada HTML Form berada di elemen input. Agar data yang dikirimkan bisa diterima dengan valid, maka masing-masing bidang input harus memiliki name atribut. Jika tidak dicantumkan name attributnya maka tidak akan diproses oleh form action.

Sekian penjelasan ini yang saya dapat dari google juga.
 
Terimakasih sudah mengunjungi blog saya semoga bermanfaat

Komentar

Posting Komentar

Postingan populer dari blog ini

Contoh Coding Table dalam table atau Table Bersarang

Gambar
Assalamualikum :) Selamat datang di blog saya. Pada kesempatan kali ini saya akan memberikan coding dari Table dalam table atau Tabel bersarang. Sebelum mencoba, sebaiknya kalian menggunakan software text editor seperti Notepad++ atau Wordpad. Dalam membuat coding sebaiknya kalian harus teliti karena kalau salah satu tulisan atau titik koma dan code lainnya "salah" maka hasil coding tersebut tidak akan seperti yang diinginkan.  Berikut contoh coding table dalam table atau Tabel bersarang : <html> <head> </head> <body>                 <table border="1" cellpadding="3">                 <caption>Online Order</caption>                 <tr>                                 <th align="left">Description</th>                                 <th align="right">Qty</th>                                 <th align="right">Price<
Baca selengkapnya

Troubleshooting Jaringan

Gambar
Assalamualaikum Warrahmatullahi Wabarakatuh Alhamdullilah, kali Ini Saya akan berbagi pelajaran tentang Troubleshooting Jaringan dengan materi yang akan saya bahas satu persatu. Berikut penjelasannya : Dahulu ketika OSI belum digunakan, perangkat komunikasi yang berasal dari vendor berbeda tidak dapat saling berkomunikasi. Alat komunikasi yang diciptakan oleh IBM tidak dapat berkomunikasi dengan vendor lain. Sehingga dibentuklah standard OSI. 1. OSI Layer OSI Layer adalah standar komunikasi yang diterapkan didalam jaringan komputer. Standa itulah yang menyebabkan seluruh alat komunikasi dapat saling berkomunikasi melalui jaringan. Model referensi OSI (Open Systems Interconnection) menggambarkan bagaimana informasi dari suatu software aplikasi di sebuah komputer berpindah melewati sebuah media jaringan ke suatu software aplikasi di komputer lain. Model referensi OSI secara konseptual terbagi ke dalam 7 lapisan dimana masing-masing lapisan memliki fungsi jari
Baca selengkapnya

TUTORIAL Konfigurasi IP Address Windows7 dan langkah Cek Internet Conection dan Sharing File

Gambar
Konfigurasi IP Address Windows 7 Klik Start Menu atau Icon Windows Dan klik Control Panel. Terlihat pada gambar berikut : Setelah itu lihat menu Network and Internet lalu klik View network status and task. Terlihat pada gambar yan g tertera di bawah ini : Setelah anda masuk ke view network status and task, anda akan dibawa masuk ke network and sharing center seperti gambar di bawah ini. Kemudian pilih change adapter setting pada menu bagian kiri. Setelah itu klik kanan pada Local Area Network lalu pilih properties . Terlibat pada gambar berikut : Selanjutnya pada LAN properties anda pilih Internet Protokol v4 (TCP/IPv4) Kemudian klik dua kali pada Internet Protocol Version 4 (TCP/Ipv4). Nah setelah itu pilih Use the following IP address dan masukkan IP Address yang anda inginkan sesuai ketentuan jaringan anda seperti, Gatewaynya atau DNSnya. Setelah itu tekan OK. Langkah-langkah Cek internet Conection
Baca selengkapnya