MEMBUAT GAMBAR DAN LINK

I. GAMBAR

Yang harus diketahui sebelum menambahkan gambar dalam dokumen HTML adalah :
 File gambar lambat untuk di download.
 Beberapa search engine seperti Alta Vista dan Excite tidak bisa menampilkan file gambar
 Tidak ada browser grafik/gambar
 Gambar tidak selalu dikenal secara international
 Warna gambar mungkin tidak ditampilkan seperti aslinya

A. Format gambar
Saat ini sebagian masyarakat WEB menjadikan format GIF dan JPEG sebagai format standar untuk menampilkan gambar dalam WEB.

B. WARNA
 GIF ( Graphic Interchange Format ) : menghasilkan gambar sampai dengan 256 warna. Warna sejumlah ini baik untuk membuat gambar logo, icon, garis seni dan gambar-gambar lain yang sederhana tetapi tidak cukup baik untuk menyimpan gambar fotografik.
 JPEG ( Joint Photographic Expert Group ) : menghasilkan 16,7 juta warna. Dengan warna sebanyak ini, JPEG sangat efektif untuk menyimpan gambar-gambar dengan kualitas foto.

C. Pemadatan Ukuran Gambar
 GIF memadatkan datanya dengan menggunakan metode lossless compression. Metode lossless compression bekerja dengan mencari pola-pola berulang dalam suatu gambar. Lossless compression pada GIF membuang informasi dalam jumlah yang sedikit, yaitu hanya warna-warni dengan pola yang sama. Jika file GIF ditampilkan, waktu yang digunakan tidak lama, karena file hasil pemadatan dengan file yang diuraikan merupakan dua buah file yang hampir sama. Gambar file PNG juga menggunakan lossless compression, sehingga bisa menjadi alternatif pengganti file GIF.
 JPEG menggunakan metode pemadatan lossy compression. Pemadatan gambar metode lossy compression, membuang sejumlah bit-bit gambar untuk membuat gambar berukuran kecil. Tingkat pembuangan informasi gambar ini biasanya dapat ditentukan oleh pemakai sewaktu membuat file JPEG.

D. Menampilkan inline dan external image
Cara menampilkan gambar dalam web, ada dua cara, yaitu internal dan eksternal.
 Internal Image : gambar ditampilkan secara langsung saat web page dimuat dalam browser yang berbasiskan grafik.
 External Image : gambar yang tidak ditampilkan secara otomatis ketika suatu page dimuat, tetapi hanya akan dimuat jika pemakai menginginkan.
Menempatkan gambar pada dokumen HTML sngat mudah, dengan menggunakan tag beserta atribut SRC. Kemudian tempatkan nama file dengan URL untuk menampilkan gambar. Penggunaan secara umum adalah : < IMG SRC=”nama file”>
Contoh :

Penggunaan tag IMG

Teks ditampilkan setelah gambar.

Teks ini terpotong dengan

gambar logo.

Gambar tampil inline setelah teks ini

E. Mengatur Perataan teks dengan Inline Image
Secara default, ketika image inline dengan teks, teks ditampilkan rata bawah dengan gambar. Pengaturan perataan ini menggunakan atribut ALIGN dalam tag .
 TOP : Meratakan teks dengan bagian atas gambar
 MIDDLE : Meratakan gambar dengan bagian tengah gambar
 BOTTOM : Meratakan teks dengan bagian bawah gambar
Contoh :

Perataan Teks dalam tag IMG

Teks ini rata dengan bagian atas gambar.

Teks ini rata dengan bagian tengah gambar

Teks ini rata dengan bagian bawah gambar.

F. Mengatur Posisi Gambar Pada halaman WEB
Gambar bisa diatur untuk berada di kiri atau di kanan halaman WEB. Penggunaan atribut ALIGN beserta nilainya dalam tag untuk mengatur tampilan teks disekitar gambar.
 LEFT : Meletakan gambar di sebelah kiri teks. Teks wrap di sekitar gambar
 RIGHT : Meletakan gambar di sebelah kanan teks. Teks wrap di sekitar gambar.
Contoh :

Penggunaan Perataan Teks

Gambar rata kiri
Dalam buku ini akan dipelajari cara membuat halaman WEB. World Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa server komputer yangterhubung satu sama lain dalam jaringan Internet.

Buku ini berisi cara pengatur paragraf dokumen, membuat tabel, membuat frame juga tidak ketinggalan cara membuat form.

Demikian diharapkan para pembaca nantinya mampu membuat web site sendiri.....

Gambar rata kanan
Dalam buku ini akan dipelajari cara membuat halaman WEB. World Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa server komputer yang terhubung satu sama lain dalam jaringan Internet.

Buku ini berisi cara pengatur paragraf dokumen, membuat tabel, membuat frame juga tidak ketinggalan cara membuat form.

Demikian diharapkan para pembaca nantinya mampu membuat web site sendiri.....

G. Mengatur Ukuran Gambar Pada Browser
Ada dua keuntungan dengan mengatur ukuran gambar pada browser, yaitu :
 Pengaturan ukuran membantu pengguna yang tidak bisa menampilkan gambar secara inline.
 Pengaturan ukuran membuat halaman web lebih cepat ditampilkan.

Pengaturan ukuran tinggi dan lebar pada tag dilakukan oleh atribut HEIGHT dan WIDTH. Kedua atribut ini mengatur ukuran gambar dengan ukuran pixel.
Contoh :

Mengatur Ukuran Tinggi dan Lebar Gambar

Gambar Ukuran Asli



Gambar Ukuran lebar=180px Tinggi 140px







H. Menambahkan Teks Keterangan
Anda dapat menambahkan keterangan tambahan pada gambar yang ditampilkan secara inline. jika petunjuk mouse diletakan di atas gambar, maka teks keterangan akan ditampilkan. Gunakan atribut ALT dalam tag . Pemakaian secara umum :

Contoh :

Penggunaan atribut ALT

I. Memberi Border Pada Gambar
Gambar yang ditampilkan oleh browser tanpa border. Atribut BORDER memberikan suatu border atau batas pada suatu inline gambar. Inline gambar tidak mempunyai border kecuali berfungsi sebagai link. Nilai untuk BORDER menggunakan satuan pixel.
Contoh :

Penggunaan BORDER untuk gambar

J. Memberi Ruang Pada Gambar
Atribut HSPACE dan VSPACE digunakan untuk menentukan jarak spasi antara gambar dengan objek di sekitarnya. Atribut HSPACE menentukan spasi horisontal ( bagian kanan dan kiri ) suatu gambar, sedangkan atribut VSPACE menentukan spasi vertikal ( bagian atas dan bawah ) gambar. Spasi ini dinyatakan dalam bentuk pixel dan akan memberi spasi kosong di sekitar gambar.
Contoh :

Menggunakan atribut VSPACE dan HSPACE

Teks Wrap disekitar Gambar


Dalam buku ini akan dipelajari cara membuat halaman web. World Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa server komputer yang terhubung satu sama lain dalam jaringan Internet.

Buku ini berisi cara pengatur paragraf dokumen, membuat tabel, membuat frame juga tidak ketinggalan cara membuat form.

Demikian diharapkan para pembaca nantinya mampu membuat web site sendiri....




K. Link Dengan Gambar
Suatu gambar dapat berfungsi secara bersama-sama dengan tag . jika gambar di klik maka link akan menuju ke informasi yang diberikan pada tag . Gambar yang dijadikan Link muncul dengan dikelilingi kotak. Hal ini untuk membedakan dengan gambar biasa. Anda juga bisa menggabungkan gambar sebagai link dan teks sebagai link. Dengan demikian, ada dua pilihan link ke suatu dokumen.
Contoh :

Gambar sebagai link

• Ini gambar biasa
  
  
• Gambar berfungsi sebagai link
  
  
  
• Link ke beruang
  
  

I. GAMBAR Yang harus diketahui sebelum menambahkan gambar dalam dokumen HTML adalah :  File gambar lambat untuk di download.  Beberapa search engine seperti Alta Vista dan Excite tidak bisa menampilkan file gambar  Tidak ada browser grafik/gambar  Gambar tidak selalu dikenal secara international  Warna gambar mungkin tidak ditampilkan seperti aslinya A. Format gambar Saat ini sebagian masyarakat WEB menjadikan format GIF dan JPEG sebagai format standar untuk menampilkan gambar dalam WEB. B. WARNA  GIF ( Graphic Interchange Format ) : menghasilkan gambar sampai dengan 256 warna. Warna sejumlah ini baik untuk membuat gambar logo, icon, garis seni dan gambar-gambar lain yang sederhana tetapi tidak cukup baik untuk menyimpan gambar fotografik.  JPEG ( Joint Photographic Expert Group ) : menghasilkan 16,7 juta warna. Dengan warna sebanyak ini, JPEG sangat efektif untuk menyimpan gambar-gambar dengan kualitas foto. C. Pemadatan Ukuran Gambar  GIF memadatkan datanya dengan menggunakan metode lossless compression. Metode lossless compression bekerja dengan mencari pola-pola berulang dalam suatu gambar. Lossless compression pada GIF membuang informasi dalam jumlah yang sedikit, yaitu hanya warna-warni dengan pola yang sama. Jika file GIF ditampilkan, waktu yang digunakan tidak lama, karena file hasil pemadatan dengan file yang diuraikan merupakan dua buah file yang hampir sama. Gambar file PNG juga menggunakan lossless compression, sehingga bisa menjadi alternatif pengganti file GIF.  JPEG menggunakan metode pemadatan lossy compression. Pemadatan gambar metode lossy compression, membuang sejumlah bit-bit gambar untuk membuat gambar berukuran kecil. Tingkat pembuangan informasi gambar ini biasanya dapat ditentukan oleh pemakai sewaktu membuat file JPEG. D. Menampilkan inline dan external image Cara menampilkan gambar dalam web, ada dua cara, yaitu internal dan eksternal.  Internal Image : gambar ditampilkan secara langsung saat web page dimuat dalam browser yang berbasiskan grafik.  External Image : gambar yang tidak ditampilkan secara otomatis ketika suatu page dimuat, tetapi hanya akan dimuat jika pemakai menginginkan. Menempatkan gambar pada dokumen HTML sngat mudah, dengan menggunakan tag beserta atribut SRC. Kemudian tempatkan nama file dengan URL untuk menampilkan gambar. Penggunaan secara umum adalah : < IMG SRC=”nama file”> Contoh :

Penggunaan tag IMG

Teks ditampilkan setelah gambar.

Teks ini terpotong dengan gambar logo.

Gambar tampil inline setelah teks ini

E. Mengatur Perataan teks dengan Inline Image Secara default, ketika image inline dengan teks, teks ditampilkan rata bawah dengan gambar. Pengaturan perataan ini menggunakan atribut ALIGN dalam tag .  TOP : Meratakan teks dengan bagian atas gambar  MIDDLE : Meratakan gambar dengan bagian tengah gambar  BOTTOM : Meratakan teks dengan bagian bawah gambar Contoh :

Perataan Teks dalam tag IMG

Teks ini rata dengan bagian atas gambar.

Teks ini rata dengan bagian tengah gambar

Teks ini rata dengan bagian bawah gambar.

F. Mengatur Posisi Gambar Pada halaman WEB Gambar bisa diatur untuk berada di kiri atau di kanan halaman WEB. Penggunaan atribut ALIGN beserta nilainya dalam tag untuk mengatur tampilan teks disekitar gambar.  LEFT : Meletakan gambar di sebelah kiri teks. Teks wrap di sekitar gambar  RIGHT : Meletakan gambar di sebelah kanan teks. Teks wrap di sekitar gambar. Contoh :

Penggunaan Perataan Teks

Gambar rata kiri Dalam buku ini akan dipelajari cara membuat halaman WEB. World Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa server komputer yangterhubung satu sama lain dalam jaringan Internet. Buku ini berisi cara pengatur paragraf dokumen, membuat tabel, membuat frame juga tidak ketinggalan cara membuat form. Demikian diharapkan para pembaca nantinya mampu membuat web site sendiri.....

Gambar rata kanan Dalam buku ini akan dipelajari cara membuat halaman WEB. World Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa server komputer yang terhubung satu sama lain dalam jaringan Internet. Buku ini berisi cara pengatur paragraf dokumen, membuat tabel, membuat frame juga tidak ketinggalan cara membuat form. Demikian diharapkan para pembaca nantinya mampu membuat web site sendiri.....

G. Mengatur Ukuran Gambar Pada Browser Ada dua keuntungan dengan mengatur ukuran gambar pada browser, yaitu :  Pengaturan ukuran membantu pengguna yang tidak bisa menampilkan gambar secara inline.  Pengaturan ukuran membuat halaman web lebih cepat ditampilkan. Pengaturan ukuran tinggi dan lebar pada tag dilakukan oleh atribut HEIGHT dan WIDTH. Kedua atribut ini mengatur ukuran gambar dengan ukuran pixel. Contoh :

Mengatur Ukuran Tinggi dan Lebar Gambar

Gambar Ukuran Asli

Gambar Ukuran lebar=180px Tinggi 140px
H. Menambahkan Teks Keterangan Anda dapat menambahkan keterangan tambahan pada gambar yang ditampilkan secara inline. jika petunjuk mouse diletakan di atas gambar, maka teks keterangan akan ditampilkan. Gunakan atribut ALT dalam tag . Pemakaian secara umum : Contoh :

Penggunaan atribut ALT

I. Memberi Border Pada Gambar Gambar yang ditampilkan oleh browser tanpa border. Atribut BORDER memberikan suatu border atau batas pada suatu inline gambar. Inline gambar tidak mempunyai border kecuali berfungsi sebagai link. Nilai untuk BORDER menggunakan satuan pixel. Contoh :

Penggunaan BORDER untuk gambar

J. Memberi Ruang Pada Gambar Atribut HSPACE dan VSPACE digunakan untuk menentukan jarak spasi antara gambar dengan objek di sekitarnya. Atribut HSPACE menentukan spasi horisontal ( bagian kanan dan kiri ) suatu gambar, sedangkan atribut VSPACE menentukan spasi vertikal ( bagian atas dan bawah ) gambar. Spasi ini dinyatakan dalam bentuk pixel dan akan memberi spasi kosong di sekitar gambar. Contoh :

Menggunakan atribut VSPACE dan HSPACE

Teks Wrap disekitar Gambar
Dalam buku ini akan dipelajari cara membuat halaman web. World Wide Web (WEB) adalah suatu kumpulan informasi pada beberapa server komputer yang terhubung satu sama lain dalam jaringan Internet. Buku ini berisi cara pengatur paragraf dokumen, membuat tabel, membuat frame juga tidak ketinggalan cara membuat form. Demikian diharapkan para pembaca nantinya mampu membuat web site sendiri.... K. Link Dengan Gambar Suatu gambar dapat berfungsi secara bersama-sama dengan tag . jika gambar di klik maka link akan menuju ke informasi yang diberikan pada tag . Gambar yang dijadikan Link muncul dengan dikelilingi kotak. Hal ini untuk membedakan dengan gambar biasa. Anda juga bisa menggabungkan gambar sebagai link dan teks sebagai link. Dengan demikian, ada dua pilihan link ke suatu dokumen. Contoh :

Gambar sebagai link

• Ini gambar biasa
  
  
• Gambar berfungsi sebagai link
  
  
  
• Link ke beruang