1. Image HTML
Bayangkan apabila web yang anda kunjungi hanya tulisan saja. Mungkin anda akan merasa cepat bosan dan tidak menarik bukan. Nah gambar didalalm suatu web page bisa menjadi daya penarik bagi para pengunjung web. File gambar yang umum digunakan PNG, GIF, dan JPG. Saat anda memilih gambar harus anda perhatikan format gambar yang akan digunakan karna setiap gambar membutuhkan waktu tambahan untuk mendownload dan memperlambat awal penampilan suatu dokumen dalam browser. Oleh karna itu, anda harus bisa memilah gambar yang akan dimasukan kedalam suatu dokumen. Tag yang bisa memasukan gambar adalah tag <img>. Kalian harus ingat, tag ini tidak memiliki pasangan.
Sintak penulisannya :
<img src= “url”/>
Atribut yang ada didalam tag <img> yaitu :
- Src : Url dari file image/direktori gambar
-Align : letak gambar pada teks, nilai atributnya left, right, top, middle dan bottom.
- Width : lebar gambar dalam satuan px.
- Height : tinggi gambar dalam satuan px.
- Alt : menampilkan teks pengganti jika gambar tidak tampil dibrows
- Border : memberi bingkai pada gambar.
Contoh penulisannya :
<!DOCTYPE html>
<html>
<head>
<title>penggunaan posisi image</title>
</head>
<body>
<p>
logo Amikom
<img src="amikom.jpg" width="223" height="226" align="bottom" alt="logo amikom"/>menggunakan align="bottom"
</p>
</body>
</html>
2. Tabel HTML
Tabel dapat digunakan untuk memberi data dalam bentuk kolom dan baris. Dalam tabel memiliki judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel ini dapat diisi dengan daftar item, paragraf, form,gambar , teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel dalam tabel). Nah tag yang digunakan adalah tag <table> . tag ini memiliki pasanganya.
Sintak penulisannya :
<table>
<tr>
<td> data tabel </td>
<tr>
</table>
Elemen pada tabel :
- <table>...</table> => tag pembentuk tabel. Jika border disertakan, maka tabel akan tampil disertai border . nilai border 0-30.
- <caption>.....</caption> => pembentuk judul table judul dapat diberi tag apa saja.
- <tr>....</tr> => penjelasan baris tabel dalam tabel. Atribut yang dipakai: align (left, center, dan right) atau valign (top, middle dan bottom).
- <th>....</th> => pembentuk sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah.
- <td>....</td> => pembentuk sel data dalam tabel.
Ini buat catatan aja :
- Jumlah baris table ditentukan dengan banyaknya <tr>....</tr> yang dituliskan dalam elemen tabel, dari <table>....</table>
- Jumlah kolom dalam tabel ditentukan dengan banyaknya <td>....</td> didalam setiap defenisi baris, dari <tr>....</tr>
- Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.
Atribut dalam tag <table>
Catatan atribut yagn didefenisikan dalalm <th>... </th> atau <td>...</td> akan menggantikan aligment default yang didefenisikan dalam <tr>...</tr>
Atribut tag <tr>
Gambar
Atribut tag <td> dan <th>
Gambar
Salah satu contoh penggunaan table :
<!DOCTYPE html>
<html>
<head>
<title>contoh penggunaan table</title>
</head>
<body>
<table width="100" border="1" bordercolor="red">
<caption>contoh penggunaan table</caption>
<tr>
<th width="200">baris 1 kolom 1</th>
<th width="100">baris 1 kolom 2</th>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table>
</body>
</html>
Mungkin ini saja dulu yang bisa saya posting. Lain kali saya akan membahas yang lainnya. dan saya minta maaf karna saya tidak posting atribut atribut yang ada didalamnya disebabkan waktu dan tempat. sekali saya mohon sebesar-besarnya kepada pembaca setia.
Sekian dan terima kasih.
Referensi didapat dari :
Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika.
Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset.
Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta
Bayangkan apabila web yang anda kunjungi hanya tulisan saja. Mungkin anda akan merasa cepat bosan dan tidak menarik bukan. Nah gambar didalalm suatu web page bisa menjadi daya penarik bagi para pengunjung web. File gambar yang umum digunakan PNG, GIF, dan JPG. Saat anda memilih gambar harus anda perhatikan format gambar yang akan digunakan karna setiap gambar membutuhkan waktu tambahan untuk mendownload dan memperlambat awal penampilan suatu dokumen dalam browser. Oleh karna itu, anda harus bisa memilah gambar yang akan dimasukan kedalam suatu dokumen. Tag yang bisa memasukan gambar adalah tag <img>. Kalian harus ingat, tag ini tidak memiliki pasangan.
Sintak penulisannya :
<img src= “url”/>
Atribut yang ada didalam tag <img> yaitu :
- Src : Url dari file image/direktori gambar
-Align : letak gambar pada teks, nilai atributnya left, right, top, middle dan bottom.
- Width : lebar gambar dalam satuan px.
- Height : tinggi gambar dalam satuan px.
- Alt : menampilkan teks pengganti jika gambar tidak tampil dibrows
- Border : memberi bingkai pada gambar.
Contoh penulisannya :
<!DOCTYPE html>
<html>
<head>
<title>penggunaan posisi image</title>
</head>
<body>
<p>
logo Amikom
<img src="amikom.jpg" width="223" height="226" align="bottom" alt="logo amikom"/>menggunakan align="bottom"
</p>
</body>
</html>
2. Tabel HTML
Tabel dapat digunakan untuk memberi data dalam bentuk kolom dan baris. Dalam tabel memiliki judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel ini dapat diisi dengan daftar item, paragraf, form,gambar , teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel dalam tabel). Nah tag yang digunakan adalah tag <table> . tag ini memiliki pasanganya.
Sintak penulisannya :
<table>
<tr>
<td> data tabel </td>
<tr>
</table>
Elemen pada tabel :
- <table>...</table> => tag pembentuk tabel. Jika border disertakan, maka tabel akan tampil disertai border . nilai border 0-30.
- <caption>.....</caption> => pembentuk judul table judul dapat diberi tag apa saja.
- <tr>....</tr> => penjelasan baris tabel dalam tabel. Atribut yang dipakai: align (left, center, dan right) atau valign (top, middle dan bottom).
- <th>....</th> => pembentuk sel header tabel. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah.
- <td>....</td> => pembentuk sel data dalam tabel.
Ini buat catatan aja :
- Jumlah baris table ditentukan dengan banyaknya <tr>....</tr> yang dituliskan dalam elemen tabel, dari <table>....</table>
- Jumlah kolom dalam tabel ditentukan dengan banyaknya <td>....</td> didalam setiap defenisi baris, dari <tr>....</tr>
- Setiap baris dalam tabel akan mempunyai jumlah kolom yang berbeda.
Atribut dalam tag <table>
Catatan atribut yagn didefenisikan dalalm <th>... </th> atau <td>...</td> akan menggantikan aligment default yang didefenisikan dalam <tr>...</tr>
Atribut tag <tr>
Gambar
Atribut tag <td> dan <th>
Gambar
Salah satu contoh penggunaan table :
<!DOCTYPE html>
<html>
<head>
<title>contoh penggunaan table</title>
</head>
<body>
<table width="100" border="1" bordercolor="red">
<caption>contoh penggunaan table</caption>
<tr>
<th width="200">baris 1 kolom 1</th>
<th width="100">baris 1 kolom 2</th>
</tr>
<tr>
<td>baris 2 kolom 1</td>
<td>baris 2 kolom 2</td>
</tr>
<tr>
<td>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
</table>
</body>
</html>
Mungkin ini saja dulu yang bisa saya posting. Lain kali saya akan membahas yang lainnya. dan saya minta maaf karna saya tidak posting atribut atribut yang ada didalamnya disebabkan waktu dan tempat. sekali saya mohon sebesar-besarnya kepada pembaca setia.
Sekian dan terima kasih.
Referensi didapat dari :
Sidik, Betha dan Pohan, I. Husni. (2012). Pemrograman Web dengan HTML disertai lebih dari 200 contoh program beserta tampilan grafisnya. Bandung: Informatika.
Arief, M. R. (2011). Pemrograman Web Dinamis menggunakan PHP dan MySQL. Yogyakarta: Andi Offset.
Ahlihi Masruro, S.Kom. Modul Pemrograman Web. STMIK AMIKOM Yogyakarta
Tidak ada komentar:
Posting Komentar