Image
Format standar yang dapat
ditampilkan di halaman web diantararnya GIF, dan JPEG. Format tersebut berisi
informasi gambar yang diterjemahkan dalam kode biner yang bisa dikirim lewat
internet.
Format HTML untuk deklarasi
element image adalah :
<img
src="filename.gif">
Dimana atribut src adalah atribut
yang berisi nilai berupa nama file atau alamat file yang dirujuk, dalam contoh
di atas adalah "filename.gif". Perlu diingat, jika nama file yang
dirujuk, file tersebut harus berada pada direktori yang sama dengan dokumen
HTML Anda atau, bila tidak, harus diberikan lengkap beserta direktori secara
lengkap (baik secara relatif maupun absolut). Selain atribut src, element img juga dapat
memiliki atribut width dan height, masing-masing
untuk menyatakan lebar dan tinggi gambar yang akan ditampilkan oleh browser.
Alignment
Dengan atribut ALIGN pada tag <img...>, kita dapat
mengontrol letak gam-
bar diantara baris-baris teks.
Atribut ALIGN jika ditambahan pada tag <img>
seperti pada contoh berikut
<img align="top"
src="filename.gif">
akan menghasilkan gambar yang
terletak di bagian atas teks.
<img align="middle"
src="filename.gif">
akan menghasilkan gambar yang
terletak ditengah-tengah teks.
<img align="bottom"
src="filename.gif">
akan menghasilkan gambar yang
terletak di bawah teks.
Atribut Alt
Jika halaman web diakses oleh
user yang menggunakan browser yang hanya
dapat menampilkan teks saka, maka
user tidak dapat melihat gambar di halaman web. Dengan adanya atribut ALT, nilai yang
diberikan pada atribut itu dapat menggantikan posisi gambar, dan memberikan
keterangan tentang gambar yang tidak dapat ditampilkan tersebut. Sehingga user
tetap dapat mengetahui, gambar apa yang seharusnya berada pada halaman itu.
Sebagai contoh, kita dapat menambahkan informasi "gambar
komputer" dengan memodifikasi tag <img> seperti contoh
berikut
<img alt="Gambar
Komputer" src="komputerku.jpg">
Atribut Height dan Width
Saat membangun halaman web, ada
kala penyesuaian ukuran gambar diper-
lukan. Atribut yang memungkinkan
untuk menentukan tinggi HEIGHT dan
lebar WIDTH gambar memiliki
format sebagai berikut :
<img
src="filename.gif" width="X" height="Y" >
Nilai X dan Y digambarkan dalam
satuan pixel. Jika gambar komputerku.jpg
diubah ukurannya dengan lebar 300
pixel, dan tinggi 250 pixel, maka kode
untuk menampilkan gambar tersebut
adalah
<img alt="Gambar
komputer" src="komputerku.jpg" width="300"
height="250">
Tabel <table>
Tag table memungkinkan data
ditampilkan dalam bentuk tabel. Tabel menjadi salah satu elemen penting dalam
menghsilkan halaman dengan layout multikolom.
Tabel dibangun atas baris-baris
yang di dalamnya berisi cell. Sebagai contoh, kode berikut menghasilkan tabel dengan
dua baris dan dua kolom (atau dua cell dalam setiap
baris)
<table border="1">
<tr>
<td>Cell 1 dalam baris 1</td>
<td>Cell 2 dalam baris 1</td>
</tr>
<td>Cell 1 dalam baris 2</td>
<td>Cell 2 dalam baris 2</td>
</tr>
</table>
Pada tag <table>, terdapat
atribut border yang menyatakan nilai tebal/tipisnya border. Jika
atribut ini tidak dituliskan, maka secara otomatis nilainya berisi
"0", yang berarti tidak menampilkan border.
Selain memiliki kolom yang sama
jumlahnya untuk setiap baris, sebuah tabel dapat pula memiliki sel yang
merupakan penggabungan beberap sel, baik secara horisontal maupun vertikal.
Untuk mendapatkan hasil seperti itu, dipergunakan atribut rowspan (bila dua atau
lebih baris digabungkan menjadi satu) atau colspan (bila dua atau
lebih kolom digabungkan menjadi satu sel). Untuk lebih jelasnya, silahkan coba
kode HTML di bawah ini dan periksa tampilannya dengan browser
anda.
<html>
<head>
<title>Format layout halaman web dengan
tabel</title>
</head>
<body>
<table>
<tr width="800" bgcolor="yellow">
<td align ="center" colspan="2">
<h1>Baris ini berisi header sebuah
web</h1></td>
</tr>
<tr width="800">
<td width="200" bgcolor="green">
Link 1<br>
Link 2
</td>
<td width="600">
<h4>Judul Artikel</h4>
<p>Isi artikel ditulis di sini</p>
<h4>Judul Artikel 2</h4>
<p>Isi artikel ditulis disini</p>
</td>
</tr>
</table>
</body>
</html>
0 komentar:
Posting Komentar