Menyajikan dan Memahami Jenis- jenis Hyperlink

   1) Anatomi hyperlink

           Salah satu kelebihan dokumen HTML adalah memiliki kemampuan untuk saling terkait dengan dokumen lain. Link (sebutan singkat dari hyperlink text) adalah suatu metode yang digunakan dalam HTML untuk membuat hubungan antar halaman yang terdapat dalam satu situs web. Semua halaman web yang ada di internet hampir bisa dipastikan memiliki link. Secara umum, fungsi link adalah untuk memudahkan pengunjung web dalam menulusuri/menjelajahi seluruh isi atau informasi yang tersimpan dalam situs web bersangkutan.

Dalam keadaan default (normal), suatu link akan ditandari dengan teks berwarna biru yang memiliki garis bawah. Meskipun demikian, kita dapat mengubah warna dan gaya link sesuai dengan kebutuhan dan keinginan kita melalui pembuatan kode CSS.jika kita mengarahkan kursor ke suatu link tertentu, maka penunjuk mouse akan berubah menjadi gambar tangan dengan satu jari yang sedang menunjuk, seperti yang ditunjukkan oleh gambar di bawah ini.

Contoh link

Konsep atau cara kerja link dalam HTML dapat diilustrasikan melalui gambar berikut :

Gambar Konsep atau cara kerja link dalam HTML

         Pada gambar diatas, masing-masing halaman memiliki keterkaitan satu sama lain. Artinya, masing-masing halaman tersebut dapat dipanggil atau ditampilkan dari halaman manapun. Hal ini bisa terjadi jika setiap halaman di atas memiliki link.

   Mengenal Tag <a> (anchor)

Untuk membuat suatu link, HTML menyediakan satu tag khusus, yaitu tag <a>, yang berpasangan dengan </a>. Setiap teks yang diapit oleh tag ini akan ditampilkan sebagai link. Bentuk umum pembuat 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 yang akan dipanggil saat link tersebut di klik atau dipilih oleh pengunjung web.

Contoh :

Pada contoh diatas kita membuat tiga buah link dengan teks : Home, Tentang kami, dan kontak. Ketika pengunjung melakukan klik terhadap link pertama (home), web browser akan menampilkan dokumen yang disimpan dalam file index.html. Begitu juga dengan link kedua (Tentang Kami) dan ketiga (Kontak), setiap di klik akan menjadikan web browser menampilkan dokumen yang terdapat pada file about.html dan contact.html.

Berikut ini ada beberapa hal yang perlu diperhatikan dalam pemberian nama dokumen web, agar link dapat berfungsi dengan baik :

• Penamaan file dengan huruf kecil semua
• Jangan ada spasi serta hindari non-karakter alphabet

2) Jenis-jenis Link dalam HTML

Dalam HTML, link dibedakan menjadi 3 jenis, yaitu :

• Link absolut
• Link relatif
• Link ke bagian dokumen tertentu

HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat dokumen yang akan diakses. Dengan demikian, perbedaannya hanya terletak pada nilai atribut HREF-nya saja.

Link Absolut

Link Absolut adalah link yang akan menunjuk ke halaman dari situs web lain. Penulisan alamatnya pun harus ditulis secara lengkap. Sebagai contoh, jika tema atau isi dari situs web yang kita buat adalah pemrograman HTML, maka kita dapat membuat link ke situs web lain yang memiliki tema yang sama atau relevan. Tujuannya adalah agar pengunjung bisa memperoleh informasi lebih tentang tema tersebut yang ‘mungkin’ tidak/belum kita bahas pada situs web kita.

Contoh : 

<a href=http://www.w3.org/>W3</a>

Pada contoh diatas, tujuan link yang dibuat akan mengarah ke situs web http://www.w3.org/

Link Relatif

Link Relatif adalah link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada di dalam satu situs web yang sama (komputer yang sama). Penulisan alamat tujuannya pun tidak perlu ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya (jika ada).

Perhatikan contoh kode berikut :

 Tidak perlu ditulis lengkap seperti berikut :

          Kita tidak perlu menulis alamat secara lengkap karena server web akan mencari file kantak.html dan sahara.jpg di computer yang sama. jika halaman utama dari situs web yang akan kita buat adalah index. html, maka file kontak. html harus di tempatkan di dalam direktori yang sama dengan file index.html ; sedangkan sahara.jpg harus berada di dalam direktori images\jeep. Jika digambarkan, struktur di rektori dan file-nya akan tampak sebagai berikut :

     Menjadikan Gambar sebagai Link

Selain link berupa teks, gambar juga dapat dijadikan sebagai link. Konsepnya sebenarnya sama saja dengan link berupa teks, perbedaannya hanya perlu mengganti teks yang dijadikan sebagai link dengan tag <img>.

Link yang berupa teks: 

         <a href=”dokumenlain”>teks link</a>

Link yang berupa gambar: 

         <a href=”dokumenlain”><img src=”NamaFileGambar” /></a>

Contoh :

Pada contoh di atas kita menjadikan gambar sahara1.jpg yang tersimpan di dalam direktori images\jeep sebagai link untuk menuju ke dokumen detail-sahara.html.

3) Link ke Bagian Dokumen Tertentu

          Link dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu yang masih berada dalam satu dokumen yang sama. Link seperti ini biasanya pada halaman web yang memiliki informasi yang panjang atau pada dokumen yang memiliki daftar isi di bagian atasnya. Tujuannya adalah agar para pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk menuju/kembali tertentu dalam dokumen bersangkutan.

             Sapat juga membuat link internal dalam suatu halaman - misalnya daftar isi di atas dengan link ke setiap bab . Yang perlu digunakan adalah atribut yang disebut id (identifikasi) dan simbol “#”.

Gunakan atribut id untuk menandai elemen yang ingin ditautkan/link. Sebagai contoh:

                 <h1 id="heading1">heading 1</h1>

Sekarang kita dapat membuat link ke elemen dengan menggunakan ”#” di atribut link. Tanda “#” harus diikuti dengan id dari tag yang ingin ditautkan/link. Sebagai contoh: 

                 <a href="#heading1"> Menuju ke heading 1</a>

Berikut ini contoh bila ada beberapa link internal

Link ke bagian dokumen tertentu dapat di bedakan lagi menjadi dua jenis, yaitu :

• Link ke bagian tertentu dalam dokumen yang sama
• Link ke bagian tertentu dalam dokumen lain

Link ke Bagian Tertentu dalam Dokumen yang sama

      Untuk membuat link semacam ini, terlebih dahulu kita perlu memberikan id atau nama pada bagian teks atau gambar tertentu sebagai bagian yang akan dituju. Pemberian id tersebut dilakukan dengan cara menuliskan kode berikut :

                <a id=”tujuanLink”>Teks atau gambar</a>

Selanjutnya untuk membuat link yang akan mengarah ke teks atau gambar yang telah di namai tersebut adalah dengan menuliskan kode seperti berikut :

                <a href=”#Tujuanlink”>Teks atau gambar</a>

Tanda # di atas menunjukan bahwa tujuan link adalah nama bagian, bukan berupa file.

Link ke Bagian Tertentu Dalam Dokumen Lain

        Selain bagian yang berada dalam satu dokumen, link dapat juga mengarah ke sesuatu bagian tertentu yang terdapat dalam dokumen lain. Untuk membuat link semacam ini, bagian tertentu dalam dokumen lain tersebut harus di tantai dengan pemberian id seperti pada sub-bab sebelumnya. Perbedaan hanya terletak pada penulisan tujuan link-nya saja. Pada kasus seperti ini, kita perlu menambahkan id bagian pada tujuan link, seperti berikut:

               <a href=”namafile#idBagian”>Teks atau gambar</a>

Dari teori diatas dapat dibuat rangkuman materi seperti berikut

  -> Link (sebutan singkat dari hyperlink text) adalah suatu metode yang digunakan dalam HTML 

       untuk membuat hubungan antar halaman yang terdapat dalam satu situs web.

  -> Tag untuk membuat link adalah <a href=””>, dimana atribut href=”” berisi URL atau alamat dari 

       halaman yang akan dituju.

  -> HTML tag <a> mendefinisikan hyperlink.

  -> Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat diklik untuk 

       menuju ke dokumen lain.

  -> Untuk memindahkan kursor di atas link di halaman Web, panah akan berubah menjadi tangan 

       kecil.

  -> Atribut yang paling penting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link.

  -> Jenis-jenis link dalam HTML, yaitu :

        - Link absolut adalah link yang akan menunjuk ke halaman dari situs web lain

        - Link relative adalah link ke dokumen internal, dan penulisan alamat tujuannya pun tidak perlu 

          ditulis secara lengkap, cukup nama dokumennya saja, dan nama direktorinya

        - Link ke bagian dokumen tertentu atau internal link

  -> HTML membedakan ketiga jenis link diatas berdasarkan lokasi atau alamat dokumen yang akan 

       diakses

  -> Link dapat dibuat ke bagian teks atau gambar tertentu yang masih berada dalam satu dokumen 

       yang sama. Link seperti ini biasanya pada halaman web yang memiliki informasi yang panjang 

       atau pada dokumen yang memiliki daftar isi di bagian atasnya. Tujuannya adalah agar para

       pengunjung tidak perlu melakukan scrolling pada halaman tersebut untuk menuju / kembali 

       tertentu dalam dokumen bersangkutan

  -> Caranya adalah memberikan nama atau id pada bagian teks atau gambar tertentu sebagai bagian 

       yang akan dituju. Yang perlu digunakan adalah atribut yang disebut id (identifikasi) dan simbol 

       “#”. Gunakan tag: <a id= “ tujuanLink”>Teks atau gambar</a>

  -> Kemudian untuk tag link dengan cara : <a href= “#Tujuanlink”>Teks atau gambar</a>

Format Tampilan Gambar dengan Map

       Format gambar yang ditambahkan dalam dokumen HTML, diantaranya dalam format GIF, JPEG, PNG. Untuk menambahkan gambar kedalam dokumen HTML digunakan tag <IMG> dengan dilengkapi atribut img. Atribut tag <img> yang sering digunakan diantaranya src, align, width, height, alt dan penulisan skrip secara umum adalah sebagai berikut :

          Gambar dengan map memungkinkan untuk memasang beberapa link dalam satu gambar. Hal tersebut memudahkan kita dalam memanggil sebuah halaman web dengan hanya menempatkan sekelompok gambar menjadi satu gambar. Untuk membuat image map, harus ditambahkan atribut USEMAP pada tag image.

           Tampilan gambar dengan map merupakan suatu area pada gambar /image yang dapat diberi hyperlink area yang biasanya disebut ”hotspots”. Koordinatnya gambar ditentukan menggunakan bidang geometri seperti rectangle, polygon dan lain sebagainya. Map sendiri dapat diartikan sebagai peta. Untuk membuat image map digunakan tag <map> dan <area>.

Perintah <map> dapat didukung oleh pelbagai browser, diantaranya internet explorer, mozilla firefox, opera, google chrome maupun safari.

Gambar browser yan mendukung tag <map>

            Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side. Sebuah gambar map adalah gambar merupakan area yang dapat diklik. Nama dari gambar yang dibutuhkan pada penulisan atribut pada tag <map>.Hal ini dikaitkan dengan <img> usemap atribut dan menciptakan hubungan antara gambar dan map nya. Bagian dari tag <map> berisi sejumlah elemen <area>, yang mendefinisikan suatu lokasi/daerah saat diklik di gambar map dapat menghubungkan ke gambar lainnya yang sudah ditentukan.

Format penulisan gambar map

Penulisan skript secara umum adalah sebagai berikut :

Keterangan:

Nama map -> nama dari map yang nantinya akan dipanggil oleh <image usemap>

Area shape -> jenis shape yang digunakan untuk menggambarkan area dari gambar map. Adapun 

                         jenis shape map yang dapat digunakan adalah

Aturan untuk menuliskan nilai untuk menentukan koordinat pada image yang berguna sebagai area hyperlink dapat dilihat pada daftar tabel di bawah ini

Berikut adalah contoh penulisan kode program untuk menampilkan gambar map, dimana tag<area> menggunakan atribut shape

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

Pada kode program untuk menampilkan gambar dengan map

Bila kode program diatas dijalankan maka pada browser akan muncul gambar seperti dibawah ini. Gambar akan menampilkan gambar matahari beserta 2 planet disekitarnya. Bila diklik misalnya planet A maka akan muncul gambar D yang merupakan gambar detail planet A.

Gambar tampilan gambar dengan map

Pada HTML 5 ada beberapa atribut baru dan ada pula atribut HTML4.01 yang tidak berlaku pada HTML 5. Berikut adalah daftar atribut yang berhubungan dengan gambar map

Dari kegiatan belajar ini dapat dibuat rangkuman materi sebagai berikut :

• Untuk menambahkan gambar kedalam dokumen HTML digunakan tag <IMG>
• Untuk membuat image map, harus menambahkan atribut USEMAP pada tag image. <IMG SRC = ”directori gambar / nama gambar” usemap="#planetmap">
• Untuk membuat image map digunakan tag <map> dan <area>.
• Tag <map> digunakan untuk mendefinisikan sebuah tampilan gambar map pada sisi client-side
• Bagian dari tag <map> berisi sejumlah elemen <area>
• Format penulisan gambar map

                    <map name =”nama map”>

                    <area shape = ”type” coords=”value” href=”link”>

                    </map>

• Area shape merupakan jenis shape yang digunakan untuk menggambarkan area dari gambar map.
• Area shape yang digunakan pada map Default, Rect, Poly, Circle
• Atribut yang digunakan pada tag <area> diantaranya alt, coords, download, href, hreflang, media, nohref, rel, shape, target, type

Format Tampilan Video dan Animasi

1) Format tampilan file Video

          Untuk menampilkan video pada halaman web dapat ditangani secara langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah <video> </video>. Namun tidak semua format videonya dapat ditampilkan di web. Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya adalah WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari masing-masing browser terhadap file video.

         Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp4 di web yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil embed mp4 di web yan telah kita buat tersebut. Hal tersebut bisa jadi disebabkan browser yang digunakan tidak support pada file berekstensi mp4.

Bila anda hendak menampilkan video pada halaman web sedangkan file video yang anda miliki berformat seperti *.avi, maka video dengan format *.avi tersebut harus dikonversi terlebih ke format yang didukung oleh HTML5 dengan menggunakan program gratis atau melalui layanan situs web.

Contoh program yang dapat mengkonversi format video adalah :

• Miro Video Converter dapat diunduh secara gratis atau melalui layanan www.microvideoconverter.com .
• FormatFactory -> di unduh gratis di http://format-factory.en.softonic.com
• http://video.online-convert.com -> layanan konversi secara online

MIME untuk format Video

    MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format video.

2) Menyajikan file Video pada tampilan web

        File video seperti mp4 dapat dimainkan pada halaman web melalui tag<video> < /video>. Ketika mencoba menjalankan video pada halaman web , file video ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan. Berikut adalah format lengkap untuk memainkan video ke dalam aplikasi web

Atribut Height dan Width dalam tag <video> digunakan untuk menentukan tinggi dan lebar penampilan video. Atribut Src menentukan file video.

Bila listing program diatas dijalankan akan menghasilkan tampilan video di browser chrome . Tekan tombol play untuk memulai menjalankan videonya

Gambar video pada tampilan web menggunakan browser chrome

Bila dijalankan akan menghasilkan tampilan video di browser mozilla firefox, video tidak akan muncul hal ini dikarenakan browser mozilla firefox tidak mendukung format file *.mp4.

Gambar video pada tampilan web menggunakan browser mozilla firefox

Tag <video> memiliki beberapa atribut, tidak hanya width dan height saja. Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume. Berikut ini adalah atribut – atribut yang digunakan pada tag <video>.

Poster

       Atribute poster berfungsi untuk memunculkan poster/gambar pada saat video buffer atau diunduh. Misalnya saat buffer video akan muncul gambar “anak.gif” maka dalam tak <video> disisipkan atribut poster=”anak.gif” dengan catatan file anak.gif diletakan dalam folder yang sama dengan file html nya.

Gambar anak.gif gambar yang akan disisipkan sebagai poster

Berikut adalah potongan kode yang menggunakan atribut poster

Ketika kode program di atas dijalankan maka akan menghasilka tampilan web seperti berikut ini

Gambar Tampilan video menggunakan atribut poster=”anak.gif”

SRC

        Source atau src digunakan disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan menggunakan 2 sumber dimana file tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini adalah web browser akan memilih memutar yang mana nantinya sesuai dengan format yang didukung oleh web browser tersebut .Dapat dilihat pada potongan kode berikut :

4.) Menyajikan animasi pada tampilan web

       File animasi juga dapat ditampilkan pada halaman web dengan cara di embed-kan. Embed digunakan untuk melampirkan file dari eksternal seperti *.swf dan lain-lain sebagainya. Perintah yang digunakan adalah

<embed src="siboy.swf">

Untuk penulisan kode embed selengkapnya adalah sebagai berikut ini.

Bila kode program diatas dijalankan maka akan muncul file animasi “siboy.swf” pada halaman web.

Gambar animasi siboy.swf pada halaman web

Pada halaman web selain animasi dalam bentuk *.swf dengan menggunakan perintah < embed> dapat juga menampilkan animasi dalam bentuk *.gif. Hal ini dapat dilihat pada potongan kode berikut dimana file rose.gif merupakan gambar bergerak (animasi). jika kalian membutuhkan animasi klik disini

Saat kode program diatas dijalankan maka animasi akan muncul dihalama web seperti terlihat pada gambar berikut

Gambar animasi rose.gif pada halaman web

Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut attribut seperti pada tabel berikut ini.

• cara standar untuk menanamkan file audio pada halaman web: elemen <video> </video>.
• File-file video yang didukung HTML5 adalah MP4,WebM dan OGG.
• Atribut video dituliskan dalam elemen <video xxxxxx= “ xxxxxx” >
• Atribut Audio yang digunakan dalam penulisan html diantaranya autoplay, controls, height, width, loop, muted,poster, preload, src.
• Animasi dapat ditampilkan dalam web dengan menuliskan <embed src="file.swf">
• File animasi berupa *.swf dan *.gif dapat ditampilkan pada halaman web.

Format Tampilan Audio

1.) Format tampilan file audio

         Kebanyakan file audio diputar melalui sebuah plug-in, misalnya seperti flash. Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio> </audio>.

         Untuk memasukkan suara pada html bisa menggunakan tag <audio>. Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP. File-file Audio yang didukung HTML5 adalah MP3,WAV, dan OGG. Tidak semua tipe file audio tersebut didukung oleh browser.

• OGG merupakan format audio yang didukung oleh Mozilla firefox, opera, dan google chrome.
• MP3 merupakan format audio yang didukung oleh Google Chrome dan safari.
• WAV merupakan format audio yang didukung oleh Mozilla Firefox dan Opera.

Jenis file audio untuk dukungan pada web browser bisa dilihat pada tabel berikut ini.

     a. Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp3 di web yang kita buat, akan 

         ada  beberapa  orang  yang  tidak  bisa  memutar  hasil  embed  mp3 di  web yan telah kita buat 

         tersebut. Hal  tersebut  bisa  jadi  disebabkan browser  yang  digunakan  tidak support pada file 

         berekstensi mp3.

     b. MIME untuk format audio

         MIME  (Multipurpose  Internet  Mail  Extension) digunakan untuk mekanisme untuk mengirim

         berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser

         tidak   salah   menterjemahkan   konten   yg  diterima.  Tidak   hanya   pada   web,   email   juga 

         menggunakan MIME. Berikut adalah tipe mime untuk format audio.

2.) Menyajikan audio dalam tampilan web

      File audio seperti mp3 dapat dilantunkan melalui tag<audio> < /audio>. Berikut adalah format lengkap untuk memainkan musik ke dalam aplikasi web.

      Ketika mencoba listing program diatas , file audio ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan. Untuk listing program di atas menggunakan file audio bernama "house.mp3" dan "house.ogg".

Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Tekan tombol play untuk memulai menjalan audionya.

Gambar tampilan audio saat dalam web

Atribut yang digunakan pada tag <audio> </audio> dapat juga menggunakan atribut autoplay, loop dan controls. Detail atribut pada audio adalah sebagai berikut :

Berikut adalah listing program audio yang telah diberi atribut control, autoplay serta loop . Ketika listing program tersebut dijalankan maka audio akan berjalan secara otomatis tanpa harus ditekan tombol play .

        Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Audio akan mulai diperdengarkan tanpa harus menekan tombol play. Audio akan terus dimainkan kembali ketika audio sudah habis waktunya karena pada atribut audio di set “loop”.

Gambar tampilan audio saat dimainkan dalam web

3.) Plug-in audio

         Plug-in merupakan sebuah program komputer kecil yang memperluas fungsi standar dari sebuah browser. Plug-in dapat ditambahkan ke halaman HTML menggunakan tag <object> atau tag <embed>.

        Tag <embed>

Tag <embed> diartikan sebagai sebuah wadah untuk konten eksternal (non-HTML). Adapun potongan kode untuk memainkan file *.mp3 yang embed/tertanam di halaman web adalah

Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web akan akan muncul tampilan berikut, dan file house.mp3 tidak terdengar suaranya karena browser mozilla firefox tidak mendukung file audio *.mp3.

Gambar tampilan audio dengan tag <embed>

           Tag <object>

Format audio dapat pula didefiniskan sebagai obyek ekternal untuk konten non HTML dengan menggunakan tag<obyek>. Berikut ini potongan kode program untuk menampilkan file audio

Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web akan terdengar suara dari file "house.ogg"

Gambar tampilan audio dengan tag <obyek>

Dari kegiatan belajar berikut ini dapat dibuat rangkuman materi sebagai berikut :

• cara standar untuk menanamkan file audio pada halaman web: elemen <audio> </audio>.
• File-file Audio yang didukung HTML5 adalah MP3,WAV dan OGG.
• Atribut Audio dituliskan dalam elemen <audio xxxxxx= “ xxxxxx” >
• Atribut Audio yang digunakan dalam penulisan html diantaranya controls, autoplay, loop, muted, preload dan src.
• File audio dapat juga dituliskan menggunakan tag <embed> dan tag<object>