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 <IMG>. 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 <IMG> :

  • 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 :

 

<img src=”http://www.unikom.ac.id/image/logo.gif”>

<img src=”logo.gif”>

  • Penggunaan relative path, yaitu file gambar disimpan pada folder yang terpisah dengan folder halaman webnya

 

<img src=”/image/logo.gif”>

 

Penggunaan gambar dapat diletakkan dibagian mana saja dari suatu dokumen web, yang harus dilakukan hanya memanggil tag <IMG> dimana gambar tersebut akan dimunculkan.

 

 

Gambar 8.1 halaman web dengan gambar

Berikut ini adalah contoh penggunaan gambar pada suatu halaman web dengan atribut yang dimilikinya.

 

<html>

<body>

<p>

<img src=”constr4.gif” width=”144″ height=”50″ border=”1”> Contoh penyisipan  gambar

<img src=”hackanm.gif” width=”48″ height=”48″>tinggal letakkan tag IMG di bagian yang akan disisipi gambar Secara default atribut align adalah <i><b>bottom</b></i>

</p>

<p>

<img src=”hackanm.gif” width=”60″ height=”60″ align=”top”>Atribut align <u>TOP</u>

</p>

 

 

 

<p>

<img src=”hackanm.gif” width=”60″ height=”60″ align=”middle”>Atribut align <u>MIDDLE</u>

</p>

<p>

<img src=”hackanm.gif” width=”60″ height=”60″ align=”right”>Atribut align <u>RIGHT</u>

</p>

<p>

<img src=”logounikom.gif” width=”100″ height=”60″ alt=”logo unikom”>Penggunaan Atribut <u>Alt</u>, karena gambar tidak dapat dimunculkan

</p>

<p>

<img src=”../logounikom.gif” width=”100″ height=”60″ alt=”logo unikom”>Penggunaan <u>relative address</u>, karena letak gambar berada di folder lain

</p>

</body>

</html>

 

 

 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 <BODY BACKGROUND=”nama gambar.extensinya”>. Apabila background berupa warna maka dapat menggunakan tag <BODY BGCOLOR=”warna”>.

Berikut ini adalah contoh penulisan tag tersebut dalam suatu dokumen HTML

 

Background gambar :

<BODY BACKGROUND=”background.jpg”>

Background warna   :

<BODY BGCOLOR=”#d0d0d0”>

 

Selengkapnya dapat dilihat pada pada contoh berikut :

<html>

<!—untuk background warna–>

<body bgcolor=”#d0d0d0″>

<p>

<h3><center>CONTOH PENGGUNAAN BACKGROUND WARNA</center></h3>

</p>

</body>

</html>

<html>

<!-untuk background gambar–>

<body background=”background.jpg”>

<h3>Image Background</h3>

<p>File bertipe jpeg dan gif dapat digunakan sebagai background HTML</p>

<p>Apabila gambar tersebut berukuran kecil, maka gambar tersebut akan disambung

hingga halaman tersebut tertutupi oleh gambar tersebut.</p>

</body>

</html>

 

 

Gambar 8.3 Contoh Background Warna

 

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 <A>….</A> digunakan untuk membentuk suatu link ke dokumen atau sumber yang akan dimuat ketika user melakukan klik pada link tersebut. Atribut yang digunakan pada tag <A> 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 :

 

<A HREF=”url atau hal.web lain”>teks ditandai dengan link </A>

 

<A HREF=”#bagian dari halaman web”> teks</A> (sebagai penghubung)

<A NAME=”bagian dari halaman web”> (bagian yang dihubungkan)

 

Dibawah ini adalah contoh link yang menghubungkan dengan suatu halaman atau alamat di World Wide Web.

 

<html>

<body>

<p>

<a href=”matakuliah.html”>Mata kuliah</a>

Digunakan untuk menghubungkan dengan halaman matakuliah pada suatu web site.

</p>

<p>

<a href=”http://www.microsoft.com/”>Link Ke Microsoft</a>

Link yang menghubungkan dengan suatu halaman di World Wide Web.

</p>

</body>

</html>

 

 

Gambar 8.5 Contoh Link

 

Berikutnya adalah contoh untuk membuat link dalam satu dokumen html

 

<html>

<body>

<p>

<p><a href=”#C2″>Klik untuk merujuk pada bab 2 </a></p>

<p><a href=”#C4″>Klik untuk merujuk pada bab 4 </a></p>

<p><a href=”#C6″>Klik untuk merujuk pada bab 6</a></p>

</p>

<p>

<h2>Bab 1</h2>

<p>Bab 1 berisi mengenai Pendahuluan</p>

<a name=”C2″><h2>Bab 2</h2></a>

<p>Bab 2 berisi mengenai Landasan Teori</p>

<h2>Bab 3</h2>

<p>Bab 3 berisi mengenai Analisis</p>

<a name=”C4″><h2>Bab 4</h2></a>

<p>Bab 4 berisi mengenai Perancangan</p>

<h2>Bab 5</h2>

<p>Bab 5 berisi mengenai Implementasi</p>

<a name=”C6″><h2>Bab 6</h2></a>

<p>Bab 6 berisi mengenai Kesimpulan dan Saran</p>

</body>

</html>

 

 

Gambar 8.6 Link Pada Satu Dokumen

 

Selain menggunakan teks, link juga dapat dibuat dengan menggunakan image/gambar.  Caranya adalah dengan mengkombinasikan antara tag <A> dan tag <IMG>. Berikut ini adalah contoh dokumen HTML yang menggunakan image sebagai link

 

<html>

<body>

<p>

Image juga dapat dijadikan Link <a href=”halakhir.html”>

<img src=”buttonnext.gif” width=”65″ height=”38″ border=”2″> </a> </p>

</body>

</html>

About these ads

Berikan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s