Salam Blogger Selalu,
Biasa basa - basi dengan sapaan, kumaha (gimana) rerencangan (temen2) blogger setelah membaca postingan saya Latihan html part 1 mudah - mudahan dah ngerti, kita lanjutkan ke pembahasa tabel, link, menampilkan gambar dan form.
Mungkin pada bagian ini yang saya rasa sangat penting dalam mempelajari html, kok bisa ? kita liat aja nanti setelah anda mempelajari pembahasan tentang tabel dan form, pokonya serasa ada hasilnya pada saat kita mempelajari html ini.
Untuk yang pertama kita masuk ke tabel dulu, sebetulnya bagian tabel ini kalau dikatakan paling seru mempelajarinya, gimana yah ? susah - susah gampang !! saya akan simpulkan dalam mempelajari tabel ini, yang harus anda perhatikan tag table ini yang intinya hanya ada 3 tag, yang pertama tag <table>...<able>, <tr> ...</tr>, dan <td>...</td>, setelah kita tahu tag inti, yang harus anda ingat juga bahwa ketiganya ini saling berhubungan, statment penting (wisss .. ) hehee "diawali dengan tag <table> dan dalam table itu pasti ada tag <tr> dan didalam tag tr itu pasti ada tag <td> dan tag <tr> adalah untuk membuat sebuah baris sedang tag <td> untuk membuat sebuah kolom" contoh penulisannya :
| <table> <tr> <td> isi yang akan ditampilkan </td> </tr> </table> |
| <html> <head> <title>latihan tabel</title> <body> <table border="1"> <tr> <td> baris 1 kolom 1 </td> <td> baris 1 kolom2 </td> </tr> <tr> <td> baris 2 kolom1 </td> <td> baris 2 kolom2 </td> </tr> <tr> <td> baris 3 kolom1 </td> <td> baris 3 kolom2 </td> </tr> </table> </body> </html> |
latihan tabel.
Selanjutnya yang harus di pahami dalam table yaitu atribut "colspan" dan "rowspan", awas anda harus tahu dulu perbedaan tag dan atribut, kalau belum baca di artikel saya sebelumnya sekilas tag - tag html, kalau sudah ngerti kita lanjutkan, untuk colspan dan rowspan saya menyimpulkan dan mencontohkan bahwa colspan dan rowspan, kalau di Microsoft Word/Excell ada yang disebut dengan istilah "Marge And Center" saya anggap anda tahu, misal : untuk mengatur table yang tadinya di baris pertama itu 2 kolom, selanjutnya dengan pengaturan colspan akan menjadi 1 kolom, ok ! kita lihat contoh penerapannya :
| <html> <head> <title>latihan tabel</title> <body> <table border="1"> <tr bgcolor="blue"> <td colspan="2"> baris 1 kolom 1 (pengaturan dengan colspan) </td> </tr> <tr> <td> baris 2 kolom1 </td> <td> baris 2 kolom2 </td> </tr> <tr> <td rowspan="2" bgcolor="red"> baris 3 kolom1 (pengaturan dengan rowspan) </td> <td> baris 3 kolom2 </td> </tr> <tr> <td> baris 4 kolom2 </td> </tr> </table> </body> </html> |
contoh penggunaan colspan & rowspan.
Catatan :
- Atribut colspan dan rowspan hanya berlaku di tag <td> (<td colspan="2">)
- Nilai yang kita masukan misal "2", nilai tersebut adalah berapa banyak colom/baris yang akan kita merge, misal diatas karena ada 2 kolom sedang baris 1 hanya ada 1 kolom, nah untuk bisa kelihatan bersatu kita gunakan atribut colspan, begitu juga penggunaan rowspan.
- Harus diingat, saya katakan diatas "statment penting", saya katakan lagi bahwa <tr> adalah baris dan <td> adalah kolom, jadi anda analisis dalam penulisan <tr> dan <td>, harus dimana anda meletakkan colspan dan rowspan.
| <html> <head> <title>latihan link</title> <body bgcolor="yellow" text="white"> <a href="lat2.html">akan masuk ke lat2.html</a> </body> </html> |
- Tagnya adalah <a> ... </a>
- Atribut yang harus di perhatikan adalah "href"
- Penulisannya <a href="lat2.html">akan masuk ke lat2.html</a>, jadi atribut "href" berfungsi untuk menuliskan akan kemana link ini di sambungkan.
- perhatikan di browser paling bawah adal tulisan "file://home/theberingin/Unduhan/blog/lat2.html" itu menunjukkan bahwa apabila kita klik akan menuju ke dokumen html yang bernama "lat2.html"
- Cara penulisannya sama seperti atribut background di tag body, <a href=" nama_file.html"> atau kalau beda folder <a href="nama_folder/nama_file.html">
| <html> <head> <title>latihan menampilkan gambar</title> <body bgcolor="yellow" text="white"> <h3 align="center">Menampilkan Gambar</h3><br> <img src="Windows-8.jpg" width="200px" height="200px"> </body> </html> |
Menampilkan gambar.
Catatan :
- Nama file gambar harus sama, cantumkan beserta type file gambarnya, misal : *.jpg, *.gif, sesuai gambar yang akan ditampilkan.
- Beda dengan background, kalau background itu keseluruhan browser, kalau image bebas kita akan menampilkannya dimana, dan juga bisa diatur lebar dan tinggi gambar tersebut dengan atribut width & height.
| <html> <head> <title>latihan tag form</title> <body bgcolor="yellow" text="black"> <h3 align="center">Masukkan Data Anda</h3><br> <p align="center"> <form method="post" action="lat7.html"> nama : <input type="text" name="nama" size="20"><br> alamat : <input type="text" name="alamat" size="30"><br> jenis kelamin : <input type="radio" name="jk" value="l">Laki - laki <input type="radio" name="jk" value="p">Perempuan<br> status : <select name="status"> <option value="l">lajang</option><option value="n">nikah</option> </select><br> pekerjaan : <input name="pek" type="checkbox" value="s">Swasta <input name="pek" type="checkbox" value="b">buruh<br> pesan : <textarea name="pesan"> isi pesan</textarea><br> password : <input type="password" name="passwd" size="20"><br> <input type="submit" value="Save"><input type="reset" value="batal"> </p> </body> </html> |
latihan tag form.
Catatan :
- Mengapa dibilang mudah ? yang harus di perhatikan bahwa dalam pembuatan form diawali dengan tag <form> </form>.
- Selanjutnya tag <input> ada atribut "type" nah disini anda tinggal coba apa saja type - typenya, misal <input type="text"> yang akan tampil adalah atau <input type="radio"> yang akan tampil adalah jadi kita tinggal coba type - typenya aja.
- Kemudian di tag <select> .. </select> itu berlaku <option>..</option>.
Salam Blogger Selalu.
0 komentar:
Posting Komentar