HTML (Hypertext Markup Language) 2
Tag Link (Anchor) <a href="Link">Kata yang di-click</a> <a name="#Acuan">Kata yang dituju</a> Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain. Ada 3 Jenis Link : 1. Link Absolut : Link yang menujuk ke halaman dari situs web lain. <a href =“http://www.microsoft.com”>This Test is Displayed</a> 2. Link Relatif : Link yang tujuannya mengarah ke dokumen-dokumen lain yang masih berada didalam situs web yang sama. <a href=“Index.html”>Home</a> 3. Link dalam dokumen yang sama : Link yang dapat berperan untuk mengarahkan ke bagian teks atau gambar tertentu yang masih berada dalam satu dokumen yang sama. <a name=“Bab2”>Menuju Bab 2 </a>
Contoh Link Relatif File : Dokumen_1.html <html> <head> <title>Link</ title> </head> <body> <h2>Demo Membuat Link Relatif</h2> <h3><u>Dokumen 1</u></h3> <p>Klik Link di bawah ini untuk melihat isi halaman web pada Dokumen_2.html </ p> <p><a href=“Dokumen_2.html”>Lihat Dokumen 2 </a></p> </body> </html>
Lanjutan ….. File : Dokumen_2.html <html> <head> < title>Link</ title> </ head> <body> <h2>Demo Membuat Link</h2> <h3><u>Dokumen 2</u></h3> <p>Ini adalah isi halaman yang terdapat pada dokumen 2, untuk kembali ke Halama 1, silahkan klik Link di bawah ini </p> <p><a href=“dokumen_1.html”>Kembali ke Halaman 1</a></p> </ body> </ html>
Contoh Link Absolut <html> <head> <title>Link</ title> </ head> <body> <h2>Demo Membuat Link Absolut</ h2> <p>Pilih Situs Favorit Anda :</ p> <p> <a href=“http://www.detik.com” style="text-decoration:none">Detik</a> <a href=“http://www.kompas.com” style="text-decoration:none">Kompas</a> <a href=“http://yahoo.com” style="text-decoration:none">Yahoo</a></p> </ body> </ html>
Contoh Link dalam Dokumen Yang sama <html> <head> <title>Link</ title> </ head> <body> <h2> Demo Membuat Link dalam Dokumen Yang sama</h2> <a name=“atas”></a> <p>HTML adalah bahasa dasar pembangunan web. Sebelum mulai belajar web programming, anda dituntut untuk menguasai HTML terlebih dahulu. Dan di bawah ini adalah panduan bahasa HTML yang kami susun mulai dasar hingga tingkatan yang lebih rumit. Mudah-mudahan bermanfaat bagi anda.</p> <p>Pilih salah satu judul materi berikut untuk mempelajari pemrograman HTML : </p> <a href=“#gambar”>Memasukan Gambar</a><br> <a href= “#tabel”>Membuat Tabel</a><br> <a href=“#heading>Macam-Macam Heading</a><br>
Lanjutan ….. <a name=“gambar”></a> <h3>Memasukan Gambar</h3> <p>Cara memasukan Gambar, Cara memasukan Gambar, Cara memasukan Gambar, Cara memasukan Gambar, Cara memasukan Gambar, Cara memasukan Gambar, <br></p> <a href=“#atas>Kembali Keatas</a> <a name=“tabel”></a> <h3>Membuat Tabel</h3> <p>Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel, Cara Membuat Tabel. <br></p> <a name=“Heading”></a> <h3>Macam-Macam Heading</h3> <p>Macam-Macam Heading, Macam-Macam Heading, Macam-Macam Heading, Macam-Macam Heading, Macam-Macam Heading, Macam-Macam Heading, Macam-Macam Heading.<br></p> </body> </html>
Membuka Link untuk Window Baru <html> <head> <title>Link</title> </head> <body> <a href="http://yahoo.com" target="_blank">Yahoo</a> <p> Jika anda menentukan atribut link to "_blank", link akan dibuka pada window baru.</p> </body> </html>
Menjadikan Gambar Sebagai Link <html> <head> <title>Link</title> </head> <body> <h2>Demo Membuat Link Berupa Gambar</h2> <p> Klik gambar dibawah ini untuk melihat informasi detail :</p> <a href="http://www.sony.co.id"><img src="sony-vaio.jpg"></a> </body> </html>
Tugas Membuat Link Buat Coding HTML yang mengandung unsur : 1. link Relatif, 2. link Absolut, 3. link dalam dokumen yang sama, 4. link untuk window yang baru 5. link dengan menggunakan gambar. Isi dari halaman bebas dan harus susai dengan format yang terdapat dalam contoh di bawah ini. Keseluruhan terdapat 6 file yang harus terhubung (Link) dengan format utama. Buat secreative mungkin.
Format Halaman Utama
Format Link Absolut
Format Link Relatif
Format Link Dokumen Yang Sama
Format Window Baru
Format Link Menggunakan Gambar