Kd 3 : Membuat link dan frame menggunakan HTML
Dalam suatu web kita pasti sering menjumpai link, baik berupa link tulisan maupun link gambar. Link sendiri berguna untuk menghubungkan satu file dengan file yang lain, di html biasanya penggunaan tag <link> diikuti dengan atribute href, sehingga penulisannya seperti berikut ini :
<link href=”namafile_yg_dituju.tipe”> tulisan yang akan ditampilkan </link>
Sript diatas untuk menampilkan link dalam bentuk tulisan, sedangkan jika ingin membuat link dalam bentuk gambar, scriptnya seperti dibawah ini :
<link href=”namafile_yg_dituju.tipe”> <img src=”namafilegambar.tipe”> </link>
Yang perlu diingat jika ingin membuat link gambar adalah letak gambar yang akan ditampilkan sebagai link. Dimanapun letak gambar asal penulisan path-nya benar maka gambarnya akan muncul, tapi jika kita ingin memindah file html tersebut ke komputer lain, dan kita lupa ikut memindahkan gambarnya maka gambar tersebut tidak akan tampil. Untuk mengantisipasi hal itu, akan lebih baik bila semua file gambar yang digunakan dalam web kita dikumpulkan dalam satu folder, yang kemudian folder gambar tersebut disimpan dalam folder yang berisi file html kita.
A. Membuat Link
1. Link tulisan dan link gambar
Contoh penggunaan link dapat dilihat pada gambar dibawah ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ayoo coba link !!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<a href="link2.html">Link 1</a>
</body>
</html>
Gambar 3.1. Link pada tulisan (halaman 1)
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Link Gambar</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1”>
</head>
<body>
<a href=”link1.html”><img src=”images/94.gif”></a>
</body>
</html>
Gambar 3.2. Link pada gambar (halaman 2)
Maksud dari kedua gambar diatas adalah me-link halaman 1 dengan halaman 2. Jadi jika kita mengklik link tulisan pada halaman 1, akan ditampilkan halaman 2 yang berisi gambar, dan jika gambar pada halaman 2 di klik, maka akan kembali lagi ke halaman 1.
Gambar yang di-link ditepinya akan muncul garis, untuk menghilangkannya dapat dilakukan dengan pemberian atribut border=”0” pada tag <img> nya.
2. Link tulisan di atas gambar
Salah satu cara sederhana untuk memodifikasi link, dapat dilakukan dengan memberikan background gambar dibelakang tulisan yang di link. Contohnya seperti berikut :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Link Gambar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table background="images/94.gif" width="70" height="45">
<tr align="center" valign="bottom">
<td height="39"><a href="link1.html"><font color="#000000"><b >Link 1</b></font></a> </td>
</tr>
</table>
</body>
</html>
Gambar 3.3. Background gambar pada link tulisan
Gambar diatas dibuat dengan memanfaatkan tabel, sehingga gambarnya bisa dijadikan background tabel dan tinggal ditambahkan tulisan yang akan di link pada kolomnya.
Banyak hal lain yang bisa di buat sesuai keinginan kita, hanya dibutuhkan untuk meningkatkan kekreatifitasan kita untuk mengembangkannya. Ayo lebih kreatif..!!!
B. Membuat Frame
Mengolah tampilan web menjadi bagus dan enak dipandang memang diperlukan cara dan ketrampilan khusus, apalagi untuk mengatur kombinasi gambar, warna dsb. Dan salah satu cara untuk membuat tampilan web menarik adalah dengan mengatur pembagian halaman web. Pembagian halaman web dapat dilakukan dengan menggunakan tabel atau juga frame, namun untuk kesempatan kali ini, yang dibahas adalah pembagian halaman web menggunakan frame. Contohnya seperti berikut ini :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset rows="*" cols="80,*" frameborder="NO" border="1" framespacing="0">
<frame src="UntitledFrame-8" name="leftFrame" scrolling="yes" noresize>
<frameset rows="80,*" frameborder="yes" border="0" framespacing="0">
<frame src="UntitledFrame-9" name="topFrame" scrolling="yes" noresize>
<frame src="UntitledFrame-9" name="mainFrame" scrolling="yes" noresize>
</frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>
Gambar 3.4. Tampilan awal frame
Dari script di atas dapat dilihat jika tampilan yang akan di buat terdiri dari 1 baris dengan 2 kolom, yang dijelaskan di tag <frameset> dengan atribut rows=”*” adalah untuk menentukan jumlah baris, dan cols=”80,*“ untuk menentukan jumlah kolom.
Tanda * pada atribut rows dan cols berfungsi sebagai ukuran lebar frame yang akan disesuaikan secara otomatis mengikuti browser yang digunakan untuk membuka halaman tersebut. Namun tanda * tersebut bisa diganti dengan nilai persentase atau nilai tanpa persentase sesuai kebutuhan.
Untuk mengubah jumlah kolom dan jumlah barisnya dapat dilakukan pada banyaknya ukuran kolom atau baris, misalnya gambaran frame yang akan dibuat :
Frame 1 Frame 2
Frame 3 Frame 4
Maka pada : <frameset rows=”80,*” cols=”120,*”>
Sehingga dengan menggunakan frame, kita bisa mengumpulkan tampilan dari beberapa file dalam satu halaman web. Caranya, pada atribut src=”namafile.tipe” di tag <frame> kita isi dengan nama file html yang akan ditampilkan pada frame tersebut. Misalnya akan dibuat tampilan frame seperti dibawah ini, (dengan nama file : frame1.html) :
Gambar 3.5. Tampilan frame yang masih kosong
file untuk pengisi frame header bernama header.html dengan tampilan :
Gambar 3.6. Tampilan file header.html
untuk file pengisi frame menu utama bernama isi.html dengan tampilan :
Gambar 3.7. Tampilan file isi.html
Sehingga pada script di file frame1.html dapat diketik seperti berikut :
<frameset rows="108,*" frameborder="NO" border="0" framespacing="0">
<frame src="header.html" name="topFrame" scrolling="no" noresize >
<frame src="isi.html" name="mainFrame">
</frameset>
Dan hasilnya pada saat file frame1.html dijalankan akan tampak tampilan seperti berikut :
Gambar 3.8. Tampilan web dengan menggunakan frame
Tampilan diatas hanya contoh yang sederhana saja. Untuk ke depannya bisa dikembangkan sesuai imajinasi dan kreatifitas kalian. Selamat Mencoba !!
Berikut ini pembagian frame yang bisa dijadikan contoh :
TUGAS :
Buat 1 tampilan halaman web menggunakan frame (contohnya seperti gambar 3.8), dengan ketentuan :
- halaman web minimal dibagi menjadi 2 frame
- ukuran frame bebas
- isi web juga bebas
- identitas di dalam halaman web
- waktu 2 minggu.
Latihan :
Lengkapi fungsi-fungsi atribut berikut ini :
Tag Atribut Fungsi Cara penulisan
<frameset>..</frameset> Border
Bordercolor
Class
Cols
Frameborder
Framespacing
Rows
<frame>..</frame > Bordercolor
Class
Frameborder
Marginheight
MarginWidth
Noresize
Scrolling
Src
Eumph . . .
- lee's
- MaLanG, Jawi weTan, Indonesia
- nama saya masih Mar'atus SoLihah,, kaLo siang dipanggiL mario,, kaLo maLam dipanggiL maria,, saya sesosok yang Lemah gemuLai dan Lembut sekaLii,, percayakan diri Anda pada saya.
Tidak ada komentar:
Posting Komentar