PERTEMUAN IV

PAGE 6

PERTEMUAN IV

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

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 :

Penggunaan Align PadaTag IMG

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 :

Tag IMG dan atribut ALIGN

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 :

Menggunakan HEIGHT dan WIDTH

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 :

Menggunakan atribut ALT

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 Atribut BORDER

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 :

Atribut VSPACE dan HSPACE

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

Gambar sebagai link

Ini gambar biasa

Gambar berfungsi sebagai link

Link ke beruang

II. LINK

Link dapat menuju ke Web Page, grafik, suara, film, program, isi dari server Gopher, log-in ke suatu remote computer, server e-mail atau ke suatu ftp.

A. Hypertext dan Hypermedia

Dokumen Hypertext adalah dokumen yang berisi link ke dokumen lain. Dokumen Hypermedia adalah dokumen yang berdasarkan hypertext ditambah dengan multimedia seperti gambar, video dan audio.

B. Uniform Resource Locator

WWW menggunakan URL untuk menuju ke lokasi dari suatu informasi pada server lain. Pemakaian umum URL adalah Protokol://domain_host{:port}/path/nama_file.

Dimana protokol adalah salah satu dari :

http = untuk suatu file pada server WWW

file = untuk suatu file pada sistem komputer lokal

gopher = untuk file pada server gopher

WAIS = untuk suatu file pada server WAIS

telnet = untuk suatu link ke server berbasis telnet

news = untuk suatu newsgroup usenet

ftp = untuk suatu file pada server ftp

Host adalah suatu alamat server. Contoh : www.yahoo.com , www.microsoft.comPort memberitahu browser untuk membuka koneksi pada suatu port jaringan yang berbeda dari port default untuk setiap protokol.

Path adalah suatu lokasi dari informasi yang dicari di dalam server, sedang nama file adalah nama dari file yang diinginkan. Contoh : www.rekreasi.com/lokasi .htmlC. Absolute Path dan Relative Path

Dalam HTML terdapat dua jenis path, yaitu path absolute dan path relative. Path relative jika lokasi file tersebut relatif terhadap dokumen yang sedang aktif, yaitu terletak di atas atau di bawah direktori dokumen tersebut. Jika suatu file berada di bawah direktori yang sedang aktif, maka direktori file tersebut perlu disebutkan. Misalnya file hal12.html berada di bawah direktori Bab1 maka untuk membuat link ke file hal12.html adalah :

Link ke halaman 12

Jika ingin membuat suatu link ke direktori di atas direktori aktif saat ini, gunakan :

Link ke file di atas direktori saat ini

Tanda .. dalam path menunjukan direktori di atas direktori aktif saat ini.

D. Link Ke Bagian Lain dalam Satu Dokumen

Secara default link digunakan untuk mendapatkan informasi dokumen Web. Pada contoh program dibawah ini, dokumen HTML mempunyai dua link, satu merupakn anchor tujuan yaitu Bab2.html dan yang satunya anchor gambar GIF, yaitu Sunset.gif.

LINK dan ANCHOR

Penggunaan Link dan anchor

Berikut adalah penggunaan Link dan Anchor untuk memanggil dokumen web

lain

Lihat tanda LinkBab 2

Untuk melihat yang detail Gambar Hutan

E. Atribut Name dan ID

Atribut href untuk menyatakan suatu file tujuan. Server mencari kedalam direktori di mana dokumen saat ini berada untuk mencari file tersebut. File dokumen tujuan HTML yang menggunakan elemen A bisa diikuti atribut name atau id. Untuk membuat link yang membaca pembaca ke suatu bagian tertentu dalam dokumen, cukup sertakan tanda # setelah nama bagian.

Contoh program dibawah ini untuk membuat tabel yang berisi link pada elemen header H2, H3 dan lainnya dalam satu dokumen, dengan menggunakan elemen A dan atribut name dan ID :

Element A ( atribut name dan id )

Daftar Isi

Pengenalan

Latar Belakang

Catatan

Jika anda klik salah satu link dokumen di atas, maka isi dokumen yang berada di bawah (tidak tertampung oleh jendela browser) akan ditampilkan. Hal ini akan sangat membantu pembuatan dokumen yang sangat panjang. Misalnya FAQ (Frequently Ask Question), anda bisa klik pertanyaan yang ada, kemudian dokumen akan link ke dokumen pertanyaan, yang sebenarnya berada pada satu dokumen.

Dan untuk kembali ke daftar pertanyaan, klik toolbar Back yang berada pada menu Standard, atau jika sudah dibuat link ke daftar pertanyaan tinggal klik kembali saja.

Pengenalan

...section 1...

Latar Belakang

...section 2...

Catatan

...section 2.1...

Jika anda klik salah satu daftar isi di atas misalnya Pengenalan atau Latar belakang atau Catatan, maka dokumen akan link pada isi dari daftar tersebt yang sebenarnya berada di bagian bawah dokumen. Hal ini dikarenakan jendela browser tidak mampu menampung seluruh isi dokumen.

F. Judul LINK

Atribut title bisa digunakan dalam elemen A dan LINK untuk menambah informasi tentang link. Informasi ini akan ditampilkan berupa tooltip oleh browser.

Contoh :

Atribut title

Menampilkan title sebagai tool tip

............

............

Anda akan melihat lebih jauh ke dalamBab 2

Bab 2

Lihat juga gambar Gambar Logo STMIK JAKARTA STI&K

G. Elemen

Untuk membuat suatu link dalam HTML elemen dipergunakan elemen anchor yang dinyatakan dengan tag berpasangan . Atribut yang boleh menyertai elemen A adalah :

Name : Menyatakan titik anchor dalam suatu dokumen HTML.

Href : Menunjukan lokasi dokumen Web.

Hreflang : Menunjukan bahasa yang dipergunaka, hanya digunakan bersama dengan href.

Type : Atribut ini memberi catatan tipe isi dari dokumen tujuan.

Rel : Menggambarkan hubungan dari dokumen asal dengan dokumen tujuan yang ditunjuk dengan atribut href.

Rev : menggambarkan hubungan antara dokumen tujuan yang ditunjuk oleh atribut href dengan dokumen asal.

Charset : Untuk menspesifikasikan karakter encoding dokumen web.

H. Sintaks nama Anchor

Anchor mempunyai nila atribut name dan id. Nama anchor harus mengikuti beberapa aturan sebagai berikut :

Unik, nama anchor harus unik dalam dokumen. Dalam satu dokumen tidak boleh ada nama anchor yang sama.

String # , penggunaan string # untuk menuju ke bagian lain dalam dokumen.

I. Dokumen Yang Tidak Ditemukan Browser

Jika suatu dokumen yang link tidak ditemukan oleh browser, ada beberapa keterangan :

Jika browser tidak menemukan lokasi yang di link, browser akan memberi keterangan.

Jika browser tidak bisa mendefinisikan tipe dokumen yang di link, browser akan terus mencobanya dan akan memberi peringatan.

J. Elemen

Elemen ini untuk mendefinisikan suatu hubungan (link). LINK boleh ditampilkan dalam elemen dan ditampilkan berulang kali. LINK mempunyai tugas untuk menyampaikan informasi hubungan antar dokumen /bagian, misalnya toolbar dengan menu drop-down.

Berikut adalah contoh potongan program yang menggambarkan beberapa LINK yang berada pada elemen . Dokumen yang aktif adalah Bab2.html. Atribut rel menunjukan hubungan antara dokumen yang aktif dengan dokumen yang ituju. Nilai Index, Next, Prev menjelaskan tujuan dokumen berikutnya.

Bab 2

isi dokumen selanjutnya

K. Link Tujuan Dan Kembali

Atribut rel dan rev digunakan untuk saling melengkapi. Atribut rel digunakan untuk link ke dokumen tujuan sedangkan atribut rev digunakan untuk link kembali ke dokumen sebelumnya.

Contoh :

Dokumen A :

Mempunyai arti yang sama dengan

Dokumen B:

Kedua atribut boleh digunakan secara bersamaan. Atribut rev menunjukan link kembali dari atribut rel. ini menunjukan bahwa halaman sebelumnya adalah halaman superior. Atribut rel dan rev mempunyai beberapa nilai yang mengindikasikan dokumen sebagai :

Parent : Dokumen utama (parent)

Index : Dokumen indeks

Next : Halaman selanjutnya

Contents : Isi dokumen

Alternate : Versi alternatif

Begin : Awal halaman

Nilai alternate menunjukan dokumen referensi dari alternatif versi halaman yang aktif. Alternatif versi ini bisa untuk versi cetak atau alternatif bahasa (tambahan atribut lang).

L. Link Dan External Style Sheet

Jika elemen LINK dihubungkan dengan external style sheet sebuah dokumen, atribut type menunjukan style sheet bahasa dan atribut media menunjukan tampilan media. Sebagai contoh nilai MEDIA=screen menentukan style sheet akan dihubungkan dengan layar video, MEDIA=print menunjukan versi cetak.

M. Link Dan Search Engine

Elemen LINK digunakan untuk menyediakan keanekaragaman informasi dari serch engine, termasuk :

Link untuk alternatif versi bahasa dokumen, ditulis dengan bahasa selain bahasa inggris.

Link untuk alternatif versi dokumen, mendesain media yang berbeda seperti versi yang cocok untuk pencetakan

Link untuk awal halaman dari sekelompok dokumen

Contoh program dibawah ini untuk menggambarkan informasi bahasa, tipe media, tipe link yang dikombinasikan untuk memperbaiki penanganan dokumen oleh search engine. Penggunaan atribut hreflang untuk menemukan versi bahasa yang digunakan dalam dokumen, misalnya bahasa belanda, Portugis dan Arab. Atribut charset digunakan sebagai encoding dalam bahasa Arab. Atribut lang untuk menunjukan nilai atribut title untuk elemen LINk yang didesain dalam bahasa Perancis.

Manual dalam Bahasa English