Scribd Logo
Unggah

Selamat datang di Scribd!

  • Materi Pengantar Web Pertemuan Ke4

    Diunggah oleh

    Mukhammad Luthfi Widiatmoko
    179 tayangan14 halaman
    STMIK AKAKOM

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    STMIK AKAKOM

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    179 tayangan14 halaman

    Materi Pengantar Web Pertemuan Ke4

    Diunggah oleh

    Mukhammad Luthfi Widiatmoko
    STMIK AKAKOM

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 14

    Membuat Link

    Untuk membuat link atau hyperlink, dapat menggunakan tag :


    <a href> …</a>

    Berikut beberapa contoh script penggunaan link :


    <body>
    <a href=”help.htm”>halaman help
    </a><br>
    </body>

    Ketika teks halaman web diklik, maka akan menuju ke file help.htm

    Secara default, link pada halaman web diberi garis bawah dan umumnya berwarna biru.
    Ada beberapa atribut untuk mengatur warna link dan juga pengaturan lainnya. Atribut-
    atribut ini diletakkan dalam tab <body>. Berikut atribut yang digunakan untuk mengatur
    link :

    No. Atribut Fungsi

    1. link Menentukan warna link

    2. alink Menentukan warna link ketika diklik dan halaman


    link belum terbuka

    3. vlink Menentukan warna link jika link tersebut sudah


    pernah dibuka

    Atribut-atribut yang digunakan dalam tag link <a> antara lain :

    No. Atribut Fungsi

    1. tabindex Menentukan urutan link pada halaman web dengan


    memanfaatkan tombol tab

    2. target Menampilkan halaman link dengan membuka


    jendela browser yang baru. Nilai yang ada untuk
    target yaitu blank
    Contoh 1:

    File pertama dengan nama hal_x.html

    <HTML>

    <HEAD>

    <TITLE>Halaman X</TITLE>

    </HEAD>

    <BODY>

    <H1>Halaman X</H1>

    </BODY>

    </HTML>

    File kedua dengan nama hal_y.html

    <HTML>

    <HEAD>

    <TITLE>Halaman Y</TITLE>

    </HEAD>

    <BODY>

    <H1>Halaman Y</H1>

    </BODY>

    </HTML>

    File ketiga dengan nama hal_utama.htm

    <HTML>
    <HEAD>

    <TITLE>Halaman Utama</TITLE>

    </HEAD>

    <BODY>

    <H1>Halaman Utama</H1>

    Silakan klik pada link-link berikut:<BR>

    <A HREF = "hal_x.html">Halaman X</A><BR>

    <A HREF = "hal_y.html">Halaman Y</A><BR>

    </BODY>

    </HTML>

    Tampilan pada web browser

    Pada saat diklik link Halaman X maka browser akan memanggil file hal_x.html
    sehingga akan ditampilkan halaman seperti berikut :
    Hyperlink tidak terbatas pada halaman – halaman web yang berada pada sistem yang
    sama seperti contoh diatas tetapi bisa juga dihubungkan ke situs web yang lain yang
    berada pada sembarang Web Server

    Contoh 2 : link ke halaman web lain

    <HTML>

    <HEAD>

    <TITLE>Vendor Komputer</TITLE>

    </HEAD>

    <BODY>

    <CENTER>

    <H1>Vendor Komputer</H1>

    <BR>

    <A HREF = "http://www.ibm.com/">IBM</A><BR>

    <A HREF = "http://www.fujitsu.com/">Fujitsu</A><BR>

    <A HREF = "http://www.dell.com/">Dell</A><BR>

    </CENTER>

    </BODY>

    </HTML>
    Bila sistem terhubung dengan internet maka saat di klik salah satu link nya maka akan
    terhubung ke halaman web dari vendor yang bersangkutan.

    Menentukan Warna Hyperlink

    Caranya yaitu dengan menggunakan atribut LINKyang terdapat pada tag <BODY>

    Contoh :

    <HTML>

    <HEAD>

    <TITLE>Vendor Komputer</TITLE>

    </HEAD>

    <BODY LINK = “black”>

    <CENTER>

    <H1>Vendor Komputer</H1>

    <BR>

    <A HREF = "http://www.ibm.com/">IBM</A><BR>

    <A HREF = "http://www.fujitsu.com/">Fujitsu</A><BR>

    <A HREF = "http://www.dell.com/">Dell</A><BR>


    </CENTER>

    </BODY>

    </HTML>

    Contoh penggunaan atribut ALINK dan VLINK

    <HTML>

    <HEAD>

    <TITLE>Halaman Utama</TITLE>

    </HEAD>

    <BODY LINK = "black" ALINK ="green" VLINK ="pink">

    <H1>Halaman Utama</H1>

    Silakan klik pada link-link berikut:<BR>

    <A HREF = "hal_x.html">Halaman X</A><BR>

    <A HREF = "hal_y.html">Halaman Y</A><BR>

    </BODY>

    </HTML>

    Pada contoh di atas link akan berwarna hitam sekiranya belum pernah di klik, berwarna hijau
    ketika di klik dan halaman yang di link belum dibuka, dan berwarna pink jika halaman yang
    di link sudah pernah dibuka.

    Penggunaan tabindex

    Kegunaannya untuk menentukan urutan link sekiranya pemakai menggunakan tombol tab
    untuk berpindah dari satu link ke link yang lain. Nilai untuk setiap tabindex berupa angka
    yang harus bersifat unik (tidak ada yang kembar).
    Contoh penggunaan TabIndex

    <HTML>

    <HEAD>

    <TITLE>Vendor Komputer</TITLE>

    </HEAD>

    <BODY LINK = "black" ALINK ="green" VLINK ="pink">

    <CENTER>

    <H1>Vendor Komputer</H1>

    <BR>

    <A HREF = "http://www.ibm.com/" tabindex ="1">IBM</A><BR>

    <A HREF = "http://www.fujitsu.com/" tabindex="3">Fujitsu</A><BR>

    <A HREF = "http://www.dell.com/" tabindex="2">Dell</A><BR>

    </CENTER>

    </BODY>

    </HTML>

    Menggunakan Bookmark

    Jika suatu halaman web sangat panjang, adakalanya halaman tersebut dilengkapi
    dengan sejumlah hyperlink yang mengacu ke area tertentu pada halaman itu sendiri. Hal
    seperti itu diimplementasikan dengan menggunakan bookmark, pemakai tidak perlu
    membolak – balik halaman halaman secara manual untuk mendapatkan bagian tertentu dalam
    halaman tersebut.

    Contoh :
    <HTML>

    <HEAD>

    <TITLE>Bookmark</TITLE>

    </HEAD>

    <BODY>

    <CENTER>

    <H1>BUKU</H1>

    <B>Daftar Isi:</B><BR>

    Prolog<BR>

    <A HREF = "#bab1">Bab 1</A></BR>

    <A HREF = "#bab2">Bab 2</A></BR>

    <A HREF = "#bab3">Bab 3</A></BR>

    <A HREF = "#epilog">Epilog</A></BR>

    <HR>

    <A NAME = "bab1">

    <H2>BAB 1</H2>

    Ini merupakan isi dari bab 1<BR>

    ....<BR>

    ....<BR>

    ....<BR>

    <HR>
    <A NAME = "bab2">

    <H2>BAB 2</H2>

    Ini merupakan isi dari bab 2<BR>

    ....<BR>

    ....<BR>

    ....<BR>

    <HR>

    <A NAME = "bab3">

    <H2>BAB 3</H2>

    Ini merupakan isi dari bab 3<BR>

    ....<BR>

    ....<BR>

    ....<BR>

    <HR>

    <A NAME = "epilog">

    <H2>EPILOG</H2>

    Ini merupakan isi dari penutup<BR>

    ....<BR>

    ....<BR>

    ....<BR>

    <HR>
    </CENTER>

    </BODY>

    </HTML>

    Tampilan pada browser adalah seperti berikut :

    Pada saat diklik pada Bab1 maka akan ditampilkan bagian Banb 1 seperti gambar berikut :
    URL Absolut dan Relatif

    Umumnya URL absolut memiliki ciri – ciri diawali dengan http:// , ftp:// atau /

    URL relatif adalah URL yang menyebutkan nama berkas secara langsung

    Misalnya abc.html atau dengan tanda ...

    Kelebihan URL absolut adalah dalam hal pemuatannya yang sangat cepat dibandingkan
    dengan URL relatif. Namun URL relatif memiliki kelebihan yaitu memungkinkan anda bisa
    mengubah direktori kerja untuk program – program HTML ataupun berkas – berkas lainnya
    tanpa mengubah program- program HTML sama sekali.

    LINK dengan Gambar

    Sebuah gambar dapat dapat dijadikan sebagai link ke halaman lain. Caranya adalah dengan
    menggunakan tag <IMG> di antara pasangan tag <A> dan </A>

    Contoh :

    <html>

    <head>

    <title>Link dengan gambar</title>

    </head>

    <body>

    klik gambar berikut

    <a href = "link.html">

    <img src = "image.jpg"></a>

    untuk melihat halaman pada link.html

    </body>

    </html>

    Tampilan pada halaman web browser


    Pada saat image di klik maka akan menuju ke halaman link.htlm

    Link ke protokol lain

    Beberapa contoh penulisan yang perlu diberikan dalam atribut HREF untuk berhubungan
    dengan berbagai protokol

    URL Layanan Contoh

    http :// Web http://www.ibm.com

    ftp :// Server FTP ftp ://ftp.domain.com/public

    File :/// Berkas FTP File:///html/bab-


    2/sampel.html

    News:// Newsgroup UseNet News://news.erols.com/vrml

    mailto : e-mail mailto:vege_fem@yahoo.com

    telnet: telnet telnet:abc.xyz.com

    Contoh :

    <html>

    <head>

    <title>contoh e - mail</title>

    </head>
    <body>

    klik

    <a href = "mailto:vege_fem@yahoo.com">

    vege_fem@yahoo.com</a>

    untuk memberikan komentar dan saran

    </body>

    </html>

    Membuka jendela baru

    Kadangkala dikehendaki agar kalau suatu link diklik maka jendela baru akan
    ditampilkan untuk menampung halaman yang di link. Hal ini bisa dikerjakan dengan
    menambahkan kode :

    TARGET = “_blank” pada tag <A>

    Contoh :

    <HTML>

    <HEAD>

    <TITLE>Halaman Utama</TITLE>

    </HEAD>

    <BODY LINK = "black" ALINK ="green" VLINK ="pink">

    <H1>Halaman Utama</H1>

    Silakan klik pada link-link berikut:<BR>

    <A HREF = "hal_x.html" target ="_blank">Halaman X</A><BR>

    <A HREF = "hal_y.html" target ="_blank">Halaman Y</A><BR>

    </BODY>
    </HTML>

    Anda mungkin juga menyukai