Gambar, Link dan Marquee Menyisipkan Gambar

Ukuran: px

Mulai penontonan dengan halaman:

Download "Gambar, Link dan Marquee Menyisipkan Gambar"

Sucianty Hartono
7 tahun lalu
Tontonan:

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 <IMG>. Tag <IMG> memiliki elemen tambahan sebagai berikut:

2 Tip Tentang Gambar : Umumnya monitor memiliki Resolusi 72 dpi (dot per inch atau piksel per inci) Itulah sebabnya memberikan gambar yang beresolusi tinggi yang berimplikasi Pada ukuran gambar yang besar hanya memperlambat waktu pemuatan Gambar.

3 ELEMEN ATRIBUT KETERANGAN SRC ALT URL gambar teks Diisi dengan alamat yang menunjuk pada sumber file gambar 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 WIDTH BORDER angka angka angka Digunakan untuk menentukan ukuran tinggi gambar Digunakan untuk menentukan ukuran lebar gambar Digunakan untuk memberikan bingkai pada gambar

4 Terdapat dua cara untuk membuat gambar daam web dengan menggunakan tag <img> : 1. Penggunaan Absolute Path : gambar yang diletakkan pada folder yang sama dengan halaman web, sehingga cukup dipanggil nama filenya saja, atau dapat berupa alamat dari suatu website. Contoh : <img src = <img src= logo.gif > 2. Penggunaan Relative Path : File gambar yang disimpan pada folder yang terpisah dengan folder halaman webnya. Contoh : <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.

5 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>

6 <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> <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>

8 Tampilannya sebagai berikut:

9 Menyisipkan Latar Belakang Gambar Gambar juga dapat dijadikan latar belakang (background) dari suatu halaman web. 1. Tag yang digunakan untuk menyisipkan gambar sebagai background adalah <Body background= namagambar.extensinya >. 2. Apabila background berupa warna maka dapat menggunakan tag <body bgcolor= warna > Berikut adalah contoh penulisan tag tersebut dalam dokumen HTMl - Background gambar : <body background= background.jpg > - Background warna : <body bgcolor= d0d0d0 >

10 Tip Memilih Gambar Latar Belakang: Gambar yang digunakan sebagai latar belakang cukup berukuran kecil Karena browser akan mengulang gambar tersebut dengan model Pengubinan. Selain itu, gunakan warna yang tidak menyolok atau Samar-samar sehingga tidak menganggu informasi pada halaman Web

11 Contoh Selengkapkan adalah sebagai berikut: <html> <! untuk background warna--> <body bgcolor= red"> <p> <h3><center>contoh PENGGUNAAN BACKGROUND WARNA</center></h3> </p> </body></html>

12 Tampilan dengan background Warna : <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> Tampilan Dengan Background Gambar:

13 Buatlah HTML Untuk Tampilan Dibawah Ini:

14 1. Link Link adalah suatu kemampuan yang dimiliki oleh halaman web. Link berfungsi untuk menghubungkan halamanhalaman web, situs yang lain atau bagian-bagian tertentu pada suatu halaman web. Tag yang digunakan untuk menyatakan link adalah TAG <A>..</A> Sedangkan atribut yang dapat mengikuti tag <A> dalah :

15 Atribut <a>: 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 Penulsannya Dapat Dilihat Sebagai 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)

16 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=" Ke Microsoft</a> Link yang menghubungkan dengan suatu halaman di World Wide Web. </p></body></html>

17 Tampilannya sebagai berikut:

18 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>

19 Tampilannya:

20 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>

21 Tampilannya:

22 Tag untuk membuat objek bergerak. Tag : <MARQUEE>. </MARQUEE> Atribut Argumen Fungsi Direction Behavior Left Right Up Down Alternate Scroll Slide Arah pergerakan ke Kiri (dari kanan kiri) Arah pergerakan ke Kanan (dari kiri kanan) Arah pergerakan ke Atas (dari bawah atas) Arah pergerakan ke Bawah (dari atas ke bawah) Bentuk pergerakan bolak balik Bentuk pergerakan scroll (seperti marquee biasa) Bentuk pergerakan slide (setelah bergerak lalu diam ditempat) Contoh : <marquee direction= up >Teknik Informatika</marquee> <marquee direction= right behavior= alternate >UNIKOM</marquee)

dokumen-dokumen yang mirip

Pengenalan Perancangan Web 2017

Pengenalan Perancangan Web 2017 5. Marquee Marquee merupakan tag non-standard elemen HTML yang menyebabkan suatu teks/gambar bergerak ke atas dan ke bawah, kanan atau kiri secara otomatis. Tulisan berjalan ini dapat digunakan untuk menuliskan