8.1 Menyisipkan Gambar
Selain teks, halaman web juga dapat memuat gambar/image. Terdapat beberapa jenis format gambar yang dapat digunakan pada halaman web, antara lain :
* GIF (Grafical Interchange Format) (.gif)
* JPEG (Joint Photographic Expert Image) (.jpg)
* PNG( Portable Network Graphic) (.png)
* BMP (Bitmap) (.bmp)
Untuk menyisipkan suatu gambar dalam halaman web dapat dilakukan dengan menggunakan tag . Tag tersebut memiliki elemen tambahan sebagai berikut :
ELEMEN ATRIBUT KETERANGAN
SRC URL gambar Diisi dengan alamat yang menunjuk pada sumber file gambar
ALT teks Menentukan tulisan yang akan ditampilkan (biasanya ditempatkan antara tanda petik). Apabila browser tidak dapat menampilkan gambar untuk alasan tertentu.
ALIGN Center | Justify | Left | Right | Baseline | Top | Bottom | Middle Top, bottom, middle digunakan untuk menentukan posisi image terhadap teks
Left, Right, Center untuk menentukan posisi image pada dokumen
HEIGHT angka Digunakan untuk menentukan ukuran tinggi gambar
WIDTH angka Digunakan untuk menentukan ukuran lebar gambar
BORDER angka Digunakan untuk memberikan bingkai pada gambar
Terdapat dua cara untuk memuat gambar dalam web dengan menggunakan tag :
* Penggunaan Absolute path, biasanya gambar diletakkan pada folder yang sama dengan halaman web, sehingga cukup dipanggil nama filenya saja, atau dapat berupa alamat dari suatu website.
Contoh :
* Penggunaan relative path, yaitu file gambar disimpan pada folder yang terpisah dengan folder halaman webnya
Penggunaan gambar dapat diletakkan dibagian mana saja dari suatu dokumen web, yang harus dilakukan hanya memanggil tag dimana gambar tersebut akan dimunculkan.
clip_image002
Gambar 8.1 halaman web dengan gambar
Berikut ini adalah contoh penggunaan gambar pada suatu halaman web dengan atribut yang dimilikinya.
Contoh penyisipan gambar
tinggal letakkan tag IMG di bagian yang akan disisipi gambar Secara default atribut align adalah bottom
Atribut align TOP
Atribut align MIDDLE
Atribut align RIGHT
Penggunaan Atribut Alt, karena gambar tidak dapat dimunculkan
Penggunaan relative address, karena letak gambar berada di folder lain
clip_image004
Gambar 8.2 Penggunaan Atribut pada Gambar
8.2 Menyisipkan Latar Belakang Gambar
Gambar juga dapat dijadikan latar belakang (background) dari suatu halaman web. Tag yang digunakan untuk menyisipkan gambar sebagai background adalah . Apabila background berupa warna maka dapat menggunakan tag .
Berikut ini adalah contoh penulisan tag tersebut dalam suatu dokumen HTML
Background gambar :
Background warna :
Selengkapnya dapat dilihat pada pada contoh berikut :
CONTOH PENGGUNAAN BACKGROUND WARNA
Image Background
File bertipe jpeg dan gif dapat digunakan sebagai background HTML
Apabila gambar tersebut berukuran kecil, maka gambar tersebut akan disambung
hingga halaman tersebut tertutupi oleh gambar tersebut.
clip_image006
Gambar 8.3 Contoh Background Warna
clip_image008
Gambar 8.4 Contoh Background Gambar
8.3 Link
Link adalah suatu kemampuan yang dimiliki oleh halaman web. Link berfungsi untuk menghubungkan halaman-halaman web, situs yang lain atau bagian-bagian tertentu pada suatu halaman web. Tag …. digunakan untuk membentuk suatu link ke dokumen atau sumber yang akan dimuat ketika user melakukan klik pada link tersebut. Atribut yang digunakan pada tag terdiri dari :
ATRIBUT ARGUMEN KETERANGAN
HREF URL/ Halaman web Diisi dengan nama halaman web atau nama URL yang akan di-link-kan
NAME #namabagian Digunkan untuk link dalam satu dokumen web
Penulisannya dapat dilihat seperti berikut :
teks ditandai dengan link
teks (sebagai penghubung)
(bagian yang dihubungkan)
Dibawah ini adalah contoh link yang menghubungkan dengan suatu halaman atau alamat di World Wide Web.
Mata kuliah
Digunakan untuk menghubungkan dengan halaman matakuliah pada suatu web site.
Link Ke Microsoft
Link yang menghubungkan dengan suatu halaman di World Wide Web.
clip_image010
Gambar 8.5 Contoh Link
Berikutnya adalah contoh untuk membuat link dalam satu dokumen html
Bab 1
Bab 1 berisi mengenai Pendahuluan
Bab 2
Bab 2 berisi mengenai Landasan Teori
Bab 3
Bab 3 berisi mengenai Analisis
Bab 4
Bab 4 berisi mengenai Perancangan
Bab 5
Bab 5 berisi mengenai Implementasi
Bab 6
Bab 6 berisi mengenai Kesimpulan dan Saran
clip_image012
Gambar 8.6 Link Pada Satu Dokumen
Selain menggunakan teks, link juga dapat dibuat dengan menggunakan image/gambar. Caranya adalah dengan mengkombinasikan antara tag dan tag
Image juga dapat dijadikan Link
0 komentar:
Posting Komentar