MODUL - · PDF filememiliki garis bawah serta jika kita mengarahkan kursor mouse ke teks...
14
Oleh : Yunita Prastyaningsih, S.Kom MODUL MODUL MODUL MODUL PEMROGRAMAN WEB
Transcript of MODUL - · PDF filememiliki garis bawah serta jika kita mengarahkan kursor mouse ke teks...
Oleh : Yunita Prastyaningsih, S.Kom
MODULMODULMODULMODUL PEMROGRAMAN WEB
Modul 3 1. IMAGE / GAMBAR
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.
<html> <head> <title>menampilkan image</title> </head> <body> <h2> demo menampilkan gambar pada HTML </h2><br> Foto Laptop:<br> <img src="laptop.jpg"/> </body> </html>
· 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 <body> memiliki atribut. Untuk diperhatikan, jika gambar tidak berhasil ditampilkan maka cobalah untuk memindahkan letak file gambar ke folder dimana file.html berada.
<body background=”…” >
Contoh background menggunakan warna <html> <head> <title>Image</title> <body background="laptop.jpg"> <h1 align="center"><font size="30" color="red">Demo Background image</font></h1> </body> </html>
· 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<img>.
<html> <head> <title>image</title> </head> <body> <h2> demo vertical alignment </h2><br> <p><img src="laptop.jpg" width="150" height="115" align="top"/> laptop 1(menggunakan TOP)</p> <p><img src="laptop.jpg" width="150" height="115" align="middle"/> laptop 2(menggunakan MIDDLE)</p> <p><img src="laptop.jpg" width="150" height="115" align="bottom"/> laptop 3(menggunakan BOTTOM)</p> </body> </html>
Untuk posisi gambar yang dilihat dari horizontal ditentukan dengan mengisi nilai LEFT dan RIGHT ke dalam atribut ALIGN pada tag <img>. dengan mengisi atribut tersebut tersebut dengan nilai LEFT maka gambar akan berada disebelah kiri teks dan sebaliknya.
<html> <head> <title>image</title> </head> <body> <p><img src="laptop.jpg" width="150" height="115" align="left"/> 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</p><br><br> <p><img src="laptop.jpg" width="150" height="115" align="right"/> 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.</p> </body> </html>
· Atribut Border, Hspace, Vspace, Title
Ø Border :digunakan untuk memberi bingkai pada gambar. Ø Hspace :digunakan untuk memberi ruang kosong disebelah kanan dan kiri gambar. Ø Vspace :digunakan untuk memberi ruang kosong di atas dan bawah gambar. Ø Title :untuk member komentar bila pointer mouse berada diatas gambar
<html> <head> <title>image</title> </head> <body> <h2> contoh penggunaan atribut Hspace dan Vspace </h2> Jarak bagian kiri <img src="laptop.jpg" width="150" height="115" align="center" hspace="100" vspace="50"/>Jarak bagian kanan<br> Jarak bagian bawah<br> <h2>Contoh penggunaan atribut border dan title</h2> <img src="laptop.jpg" align="left" border="2" title="gambar laptop"/> </body> </html>
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 <a> (anchor)
Untuk membuat link, HTML menyediakan satu tag khusus, yaitu tag <a> …..</a>. bentuk umum pembuatan link dalam dokumen HTML adalah sebagai berikut:
<a href=”DokumenLain”>Teks Link</a>
Atribut HREF dalam tag <a> 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 :
<a href=http://www.php.com> website php</>
Link seperti di atas disebut link absolute. Disini, alamat website tujuan harus ditulis secara lengkap
<html> <head> <title>Link Absolut</title> </head> <body> <h2> Situs mana yang ingin anda buka? </h2><br> <a href="http://www.google.com"> Google </a> <br> <a href="http://www.facebook.com"> Facebook </a> <br> </body> </html>
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
<a href=”kontak.html”>kontak</a>
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 <html> <head> <title>Link HTML</title> </head> <body> <h2>Demo membuat link relatif</h2><br> untuk informasi lebih lanjut, silakan kontak kami <a href="kontak.html"> disini </a> </body> </html>
Kontak.html
<html> <head> <title>Kontak</title> </head> <body> <p><strong>kontak Kami</p></strong> <strong>POLITEKNIK INDUSTRI TANAH LAUT</strong></br> JL. A. Syairani Komp. Perkantoran Gagas (Kantor BLK-UKM), Pelaihari, Kalimantan Selatan<br> Telp.(0512) 2722005<br> <p><a href="index.html"> kembali ke halaman utama </a></p> </body> </html>
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:
<a name=”TujuanLink”>teks atau gambar</a>
Selanjutnya, untuk membuat link yang akan mengarah ke teks atau gambar yang telah dinamai tersebut adalah dengan cara sebagai berikut:
<a href=”#TujuanLink”> teks atau gambar</a>
Tanda # di atas menunjukkan bahwa tujuan link adalah nama bagian, bukan berupa file.
<html> <head> <title>Link dalam satu dokumen HTML</title> </head> <body> <h1 align="center"><a name="atas">Demo membuat link dalam satu dokumen</a></h1> <p align="justify"> 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.</p> <p align="right"><a href="#atas">kembali ke atas...</a></p> <p align="justify">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.<p> <p align="right"><a href="#atas">kembali ke atas...</a></p> </body> </html>
· 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
<a href=”NamaDokumen”target=”NamaTarget”>Teks link</a>
Jenis jenis nilai target :
Nilai Target Keterangan _blank Link dokumen ke jendela baru _top Link dokumen ke jendela yang sama _self Link dokumen frame yang bersangkutan (dibahas selanjutnya) Contoh penggunaan Target _blank
html> <head> <title>Link</title> </head> <body> <h2> TARGET LINK </h2> <a href="http://www.google.com" target="_blank"> Google </a> <br> </body> </html>
· 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.
<html> <head> <title>Link E-Mail</title> </head> <body> <h2> Link email default </h2> <a href="mailto:[email protected]">E-Mail Saya</a> </body> </html>
· Link Image
Untuk menjadikan gambar sebagai suatu link kita hanya tinggal menempatkan posisi tag <img> di dalam tag <a>. bentuk umum penulisan sebagai berikut :
<a href=”DokumenTujuan”><img src=”NamaFileGambar”/><a>
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.
<html> <head> <title>Link</title> </head> <body> <h2> Link Image </h2> <a href="laptop.jpg" target="_blank"><img src="laptop.gif" align="middle"/> </a> Klik Gambar </body> </html>
