1.
Menampilkan gambar pada dokumen HTML
Gambar merupakan suatu media untuk menambah
daya tarik dokumemn anda, selain itu gambar juga digunakan untuk menjelaskan
suatu informasi.tipe / format gambar banyak sekali namun tidak semua tipe dapat
ditampilkan pada dokumen HTML, berikut adalah beberrapa format /tipe yang dapat
dimunculkan pada dokumen HTML :
Jenis
gambar
|
Ekstensi
|
Kepanjangan
Ekstensi
|
JPEG
|
.jpg/.jpeg
|
Joint photographic expert group
|
TIFF/TIF
|
.tif
|
Tagged Image File Format
|
PNG
|
.png
|
Portable Network Graphics
|
GIF
|
.gif
|
Graphis Interchage Format
|
Berikut adalah kode yang digunakan untuk
memunculkan gambar pada dokumen HTML :
Ini adalah hasil dari kode diatas :
A.
Background gambar
Selain menggunaka warma background dokumen HTML jga bias menggunakan gambar.
Berikut adalah kode yang dapat mengubah gambar menjadi background :
Ini adalah hasil dari kode di atas :
B.
Atribut border
Atribut ini digunakan untuk menampilkan bingkai pada sebuah gambar.
Berikut kode yang digunakan untuk membuat sebuah bingkai pada gambar :
Ini adalah hasil dari kode diatas :
C.
Pengaturan teks terhadap gambar
Atribut yang digunakan untuk pengaturan teks terhadap gambar adalah
align.Berikut adalah nilai yang terdapat pada atribuy align :
nama
|
fungsi
|
BOTTOM
|
Teks terletak pada bagian bawah
|
MIDDLE
|
Teks terletak pada bagian tengah
|
TOP
|
Teks terletak pada bagian atas
|
Untuk lebih jelas silahkan lihat contoh kode dibawah ini :
Ini adalah hasil dari kode di atas :
D.
Teks alternative
Gambar yang telah dimunculkan ada kemungkinan tedak bias ditampilkan atau
terlihat pada kondisi tertuntu, misalnya browser yang digunakan tidak mendukung adanya gambar.Untuk mengatasi
hal seperti ini, dapat diberikan teks alternative sebagai pengganti gambar.Caranya
adalah dengan memberikan atribut ALT
pada tag <IMG>. Sebagai contoh, perhatikan kode berikut :
Ini adalah hasil dari kode diatas :
Untuk mengatur ukuran gambar kita dapat menggunkan atribut dibawah ini :
1.HEIGHT untuk mangatur tinggi gambar
2.WIDTH
untuk mengatur lebar gambar
Berikut adalah hasil dari kode
diatas :
Atribut yang digunakan adalah VCPACE dan HSPACE. Atribut ini digunakan
untuk mengatur jarak gambar terhadp teks baik secara vertical maupun horizontal.
Ini adalah hasil kodenya :
G.
Gambar animasi
Selain menampilkan gambar dokumen HTML juga dapat menampilkan animasi.
Agar lebih jelas silahkan lihat gambar dibawah ini :
Ini adalah hasil dari kode diatas :
1.
Membuat tabel di dokumen HTML
Kemarin kita talah membahas sedikit mengenau
tag tabel.Nah…, pada kesempatan kali ini saya akan membahas lebih jauh lagi
mengenai tag tabel.Tabel berguna untuk mempermudah seseorang dalam membaca
suatu data.
Tag
|
catatan
|
<TABLE>….</TABLE>
|
Mengawali dan mengakhiri sebuah tabel
|
<CAPTION>…</CAPTION>
|
Menemtukan judul tabel
|
<TD>…</TD>
|
Membuat sebuah sel data
|
<TH>…</TH>
|
Membuat judul kolom
|
<TR>…</TR>
|
Membuat sebuah baris dalam tabel
|
A.
Baris pada tabel
Digunakan untuk menentukan jumlah ketebalan garis yang diinginkan.Berikut
adalah contoh penggunaan kode border :
B.
Judul tabel
Untuk membuat judul tabel kita dapat menggunakan tag <caption>,
agar lebih jelas mari kita lihat contoh kode dibawah ini :
C.
Warna latar belakang
Agar lebih menarik tabel bisa ditambahkan warna pada latar
belakangnya,agar lebih jelas silahkan lihat contoh kode dibawah ini :
D.
Pengaturan taks pada tabel
Untuk mengatur pelatakan teks di dalam sebuah sel, kita dapat menggunakan
atribut VALIGN yang dapat diletakan pada tag <td>, untuk lebih jelas
silahkan lihat kode dibawah ini :
E.
Penggabungan sel
Sama seperti di ms.excel kolom disini dapat juga digabungkan dengan
menggunakan atribut ROWSPAN dan COLSPAN, untuk lebih jelas silahkna lihat
contoh kode dibawah ini :
1.colspan :
1.colspan :
F.
Alignment tabel
Digunakan untuk perataan teks dalam sebuah tabel untuk lebih jelas lihat
kode pada gambar dibawah ini :
G.
Penggaturan sel pada tabel
Untuk mengatur tinggi sel pada sebuah tabel kita dapat menggunakan
atribut HEIGHT sedangkan untuk lebar kita dapat menggunakan atribut WIDTH,agar
lebih jelas silahkan lihat gambar dibawah ini :
selain untuk mengatur tinggi sel keseluruhan tabel,kita juga dapat mengatur tinggi sel pada kolom tertentu saja ,seperti pada gambar dibawah ini :
H.
Pengaturan jarak tabel
Untuk mengatur jarak teks kita dapat menggunakan atribut CELLPADDING dan
CELLSPACING, untuk lebih jelas silahkan lihat gambar dibawah ini :
I. Tabel dan gambar
Kita
juga dapat memasukkan gambar ke dalam tabel,untuk lebih jelas mari kita lihat
gambar dibawah ini :
3.Membuat Hyperlink
Dikatakan hypertext apabila dalam sebuah tampilan halaman
web terdapat hyperlink. Situs dalam internet hamper seluruhnya menggunakan
hyperlink. Hyperlink sifatnya ada dua jenis yaitu :berpindah ke halaman lain
dan tidak berpindah ke halaman yang lain .Tag yang digunakan untuk pelajaran
kali ini adalah tag <A> …</A> atau yang disebut tag jangkar (tag
anchor).untuk lebih jelas coba lihat gambar dibawah ini :
hasil apabila lihat tag di klik :
A.
Link ke
situs web lain
Seperti yang telah dibahas diatas bahwa
hyperlink tidak hanya dapat berpindah dalam sebuah halaman melainkan juga dapat
ke halaman web lainnya. Untuk lebih jelas sihlakan lihat gambar di bawah ini :
B.
Warna hyperlink
Warna pada tulisan hyperlink biasanya biru,
namun warna tersebut dapat diganti sesuai denggan keinginan kita,untuk lebih
jelas silahkan lihat gambar dibawah :
Selain menggunakan link untuk member warna
,terdapat pula dua atribut lagi yang digunakan untuk memberikan warna pada
hyperlink, yaitu ;
1.ALINK : digunakan untuk menentukan link
aktif,yaitu link yang telah diklik pemakai,tetapi halamannya belum selesai di
buka
2.VLINK : digunakan untuk menentukan warna
link yang halaman web terkait atau yang delink dikunjungi
Untuk lebih jelas silahkan lihat gambar
dibawah :
C.
Menggunakan bookmark
Jika dalam sebuah halaman yang berisi
dokumen yang terlalu panjang , kita dapat menggunakan bookmark,untuk lebih
jelas menggenai hal ini silahkan lihat gambar dibawah ini :
D.
Link dengan gambar
Link tidak hanya data berupa teks tetapa
dapat juga berisis gambar, untuk lebih jelas silahkan lihat gambar dibawah ini
:
E.
Membuka jendela baru
Variasa lain dari model hyperlink salah
satunya adalah apabila kita mengklik suatu link, dokumen utama tidak akan
hilang melainkan akan terbuka jendela lain yang menampilkan informasi suatu
halaman, untuk lebih jelas silahkan lihat gambar dibawah ini :
Tidak ada komentar:
Posting Komentar