MODUL

PEMROGRAMAN WEB

Oleh : Yunita Prastyaningsih, S.Kom

Modul 3 1. IMAGE / GAMBAR Untuk menampilkan gambar di dalam dokumen HTML, kita perlu menggunakan tag . Tag ini tidak memiliki pasangan tag sehingga perlu diakhiri atau ditutup dengan tanda slash (/). Bentuk umum penggunaan tag adalah sebagai berikut : NamaFileGambar adalah gambar yang ingin ditampilkan. Sebagai contoh, jika kita ingin menampilkan gambar laptop.jpg yang terdapat pada direktori images, maka kita perlu menuliskan kode berikut: Atribut SRC pada tag di atas menunjukkan lokasi atau sumber gambar yang akan dimuat ke dalam dokumen. Jika gambar tidak berhasil ditampilkan maka cobalah untuk memindahkan letak file gambar yang hendak ditampilkan ke folder dimana file .htm atau .html berada.

demo menampilkan gambar pada HTML

Foto Laptop:


·

Background Image

Didalam tag terdapat beberapa atribut ,atribut tag berada dalam tanda tag tersebut. Atribut tersebut ada yang memiliki nilai tetapi ada juga yang tidak. Tag memiliki atribut. Untuk diperhatikan, jika gambar tidak berhasil ditampilkan maka cobalah untuk memindahkan letak file gambar ke folder dimana file.html berada. Contoh background menggunakan warna

Demo Background image

·

Menggabungkan Gambar Dan Teks Jika kita ingin menggabungkan atau menyisipkan gambar dalam suatu teks atau paragaraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan Secara vertical: Ø Teks berada sejajar dengan bagian atas gambar Ø Teks berada sejajar dengan bagian tengah gambar Ø Teks berada sejajar dengan bagian bawah gambar Secara horizontal : Ø Gambar berada dibagian kiri teks/paragraph Ø Gambar berada dibagian kanan teks/paragraph Untuk posisi gambar yang dilihat dari arah vertical dapat ditentukan dengan nilai TOP,MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag.

demo vertical alignment

laptop 1(menggunakan TOP)

laptop 2(menggunakan MIDDLE)

laptop 3(menggunakan BOTTOM)

Untuk posisi gambar yang dilihat dari horizontal ditentukan dengan mengisi nilai LEFT dan RIGHT ke dalam atribut ALIGN pada tag . dengan mengisi atribut tersebut tersebut dengan nilai LEFT maka gambar akan berada disebelah kiri teks dan sebaliknya.

Jika kita ingin menggabungkan atau menyisipkan gambar dalam suatu teks atau paragaraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan. Untuk posisi gambar yang dilihat dari horizontal ditentukan dengan mengisi nilai LEFT dan RIGHT ke dalam atribut ALIGN pada tag image. dengan mengisi atribut tersebut tersebut dengan nilai LEFT maka gambar akan berada disebelah kiri teks dan sebaliknya

Jika kita ingin menggabungkan atau menyisipkan gambar dalam suatu teks atau paragaraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan. Untuk posisi gambar yang dilihat dari horizontal ditentukan dengan mengisi nilai LEFT dan RIGHT ke dalam atribut ALIGN pada tag image. dengan mengisi atribut tersebut tersebut dengan nilai LEFT maka gambar akan berada disebelah kiri teks dan sebaliknya.

·

Ø Ø Ø Ø

Atribut Border, Hspace, Vspace, Title Border Hspace Vspace Title

:digunakan untuk memberi bingkai pada gambar. :digunakan untuk memberi ruang kosong disebelah kanan dan kiri gambar. :digunakan untuk memberi ruang kosong di atas dan bawah gambar. :untuk member komentar bila pointer mouse berada diatas gambar

contoh penggunaan atribut Hspace dan Vspace

Jarak bagian kiri Jarak bagian kanan
Jarak bagian bawah

Contoh penggunaan atribut border dan title

2. LINK Hampir semua halaman web yang kita jumpai di internet selalu menyediakan LINK ke dokumen atau halaman lain. Link (sebutan singkat untuk hyperlink text) berguna untuk memudahkan user dalam menelusuri seluruh isi atau informasi yang tersimpan dalam website tersebut. Secara default, Link dalam dokumen HTML ditandai dengan teks berwarna biru dan memiliki garis bawah serta jika kita mengarahkan kursor mouse ke teks tersebut, maka penunjuk mouse akan berubah menjadi gambar tangan. Tag (anchor) Untuk membuat link, HTML menyediakan satu tag khusus, yaitu tag …... bentuk umum pembuatan link dalam dokumen HTML adalah sebagai berikut: Teks Link Atribut HREF dalam tag berfungsi untuk menentukan dokumen atau halaman mana yanag akan dipanggil pada saat link di klik. ·

·

Jenis jenis link 1. Link absolute 2. Link Relatif 3. Link dalam dokumen yang sama Link Absolut Adalah suatu link yang tujuannya mengarah ke alamat website lain. Contohnya, kita ingin mengembangkan web yang berisi tentang pemrograman web, lalu kita ingin menyediakan suatu link yang berkaitan dengan isi website kita (misalnya ke website php), dengan menuliskan kode sebagai berikut : website php Link seperti di atas disebut link absolute. Disini, alamat website tujuan harus ditulis secara lengkap

Situs mana yang ingin anda buka?

Google
Facebook


Sebagai contoh,jika user memilih link Google, maka web browser akan langsung mengarah ke situs http://www.google.com

·

Link Relatif Link relatif adalah suatu link yang tujuannya mengarah kedokumen dokumen lain yang masih berada di dalam satu komputer yang sama. Penulisan alamat tujuan pun tidak perlu ditulis secara lengkap, cukup nama dokumen saja. Perhatikan contoh kode berikut: Nama file : index.html kontak Kode diatas digunakan untuk membuat link ke file kontak.html yang lokasinya berada dalam satu folder dengan file index.html. Berikut ini contoh kode yang akan menunjukan konsep diatas.

Index.html

Demo membuat link relatif

untuk informasi lebih lanjut, silakan kontak kami disini Kontak.html

<strong>kontak Kami

<strong>POLITEKNIK INDUSTRI TANAH LAUT
JL. A. Syairani Komp. Perkantoran Gagas (Kantor BLK-UKM), Pelaihari, Kalimantan Selatan
Telp.(0512) 2722005

kembali ke halaman utama

Ketika file index.html dipanggil melalui web browser,hasilnya sebagai berikut:

Jika link dalam dokumen diatas dipilih atau diklik, maka tampilan akan berubah menjadi seperti berikut:

Link yang terdapat dalam dokumen kontak.html berguna untuk mengarah kembali ke dokumen awal. ·

Link dalam Dokumen yang Sama

Link juga dapat berperan untuk mengaktifkan bagian teks atau gambar tertentu yang masih berada dalam satu dokumen yang sama. Link seperti ini biasanya dijumpai pada halaman web yang memiliki daftar isi di bagian atasnya. Untuk membuat link seperti ini, terlebih dahulu kita perlu memberikan nama pada bagian teks atau gambar tertentu sebagian yang akan dituju ketika link tersebut di klik. Pemberian nama tersebut dilakukan dengan cara menuliskan kode sebagai berikut: teks atau gambar Selanjutnya, untuk membuat link yang akan mengarah ke teks atau gambar yang telah dinamai tersebut adalah dengan cara sebagai berikut: teks atau gambar Tanda # di atas menunjukkan bahwa tujuan link adalah nama bagian, bukan berupa file.

Demo membuat link dalam satu dokumen

Untuk menampilkan gambar di dalam dokumen HTML, kita perlu menggunakan tag img. Tag ini tidak memiliki pasangan tag sehingga perlu diakhiri atau ditutup dengan tanda slash (/). Bentuk umum penggunaan tag img adalah sebagai berikut : img src=”NamaFileGambar”.NamaFileGambar adalah gambar yang ingin ditampilkan. Sebagai contoh, jika kita ingin menampilkan gambar laptop.jpg yang terdapat pada direktori images, maka kita perlu menuliskan kode berikut: img src=”images/laptop.jpg”. Atribut SRC pada tag img di atas menunjukkan lokasi atau sumber gambar yang akan dimuat ke dalam dokumen. Jika gambar tidak berhasil ditampilkan maka cobalah untuk memindahkan letak file gambar yang hendak ditampilkan ke folder dimana file .htm atau .html berada.

kembali ke atas...

Jika kita ingin menggabungkan atau menyisipkan gambar dalam suatu teks atau paragaraf tertentu, terdapat pilihan posisi gambar yang harus diperhatikan Secara vertical: Teks berada sejajar dengan bagian atas gambar ? ? Teks berada sejajar dengan bagian tengah gambar Teks berada sejajar dengan bagian bawah gambar ? Secara horizontal : Gambar berada dibagian kiri teks/paragraph ? ? Gambar berada dibagian kanan teks/paragraph Untuk posisi gambar yang dilihat dari arah vertical dapat ditentukan dengan nilai TOP,MIDDLE, atau BOTTOM ke dalam atribut ALIGN yang terdapat pada tag img.

kembali ke atas...

·

Penentuan Target Link Target atau tujuan dokumen yang dihubungkan melalui suatu link dapat ditentukan sendiri. Target yang dimaksud adalah tempat dimana dokumen ditampilkan. Dalam keadaan default, dokumen baru ditampilkan pada saat link dipilih akan menutup atau menimpa dokumen yang mengandung link bersangkutan. Atribut yang digunakan adalah TARGET Teks link Jenis jenis nilai target : Nilai Target _blank _top _self

Keterangan Link dokumen ke jendela baru Link dokumen ke jendela yang sama Link dokumen frame yang bersangkutan (dibahas selanjutnya)

Contoh penggunaan Target _blank html>

TARGET LINK

Google


·

Link ke Email

Link e-mail adalah membuat link pada teks, jika teks tersebut di klik maka akan menampilkan program pengiriman e-mail yang terdapat pada komputer yang dipakai untuk mengakses data atau teks tersebut secara otomatis.

Link email default

E-Mail Saya

·

Link Image Untuk menjadikan gambar sebagai suatu link kita hanya tinggal menempatkan posisi tag di dalam tag . bentuk umum penulisan sebagai berikut : Link berupa gambar banyak dijumpai dalam dokumen gambar yang diperkecil (thumbnail). Namun ketika link gambar tersebut di klik, maka web browser akan menampilkan gambar dalam ukuran sebenarnya.

Link Image

Klik Gambar