DASAR
LINK HTML
HTML sesuai dengan sifatnya yaitu hypertext yang artinya dengan
menggunakan teks yang pendek bias menjadi acuan untuk pindah dari satu halaman
yang satu ke halaman yang lain untuk mendapatkan informasi. Dikatakan hypertext apabila dalam sebuah tampilan website
terdapat hyperlink. Hyperlink sifatnya ada dua yaitu :
1.
Berpindah dari satu
halaman ke halaman lain
2.
Berpindah tetapi
hanya dalam satu halaman saja
Tag yang digunakan
untuk membuat hyperlink adalah pasangan tag <A>……</A> yang biasa
disebut tag jangkar atau anchor tag bentuk yang biasa dipakai dalam hyperlink
adalah
<a href = ”URL”>NAMA LINK</a> , URL ( Uniform Resource Locator ) dapat berupa alamat suat dokumen
web, gambar, ataupun alamat situs lain.
Berikut ini langkah-langkah yang
perlu anda lakukan dalam membuat situs dengan link
1.
Siapkan tema atau isi yang ada buat situs
tersebut termasuk berapa halaman yang akan anda buat.
2.
Tentukan nama-nama file yang akan anda buat
biar memudahkan anda dalam membuat link.
3.
Halaman utama dalam website selalu menggunahan
nama file index.html kemudian tentukan nama file yang lain. Dengan extention
html ( contoh profile.html )
4.
Susun file html tersebut dalam satu folder nama
anda atau nama yang lain.
BERIKUT INI PRAKTIKUM DALAM MEMBUAT
LINK
1.
Buat situs
pribadi anda dengan yang berisi , halaman utama dengan file index.html, profile anda dengan nama profil.html, Cita-Cita anda dengan file
cita.html, pengalaman anda dengan
file pengalaman.html , keempat file
tersebut disimpan pada satu folder. Jadi anda akan menyediakan 4 file dalam 4
halaman
2.
Pada halaman utama masukkan nama-nama
link, untuk menuju link yang akan anda tuju
3.
Berikut ini langkah yang harus anda ikuti
1.
Buat halaman
utama dengan file index.html simpan
pada folder nama anda2 ( contoh :
AHMAD2)
<html>
<head>
<title>Situs pribadi</title>
</head>
<body>
<div align="center">SELAMAT DATANG
DISITUS PRIBADI
<br>
<hr>
</div>
Situs ini kami persembakan buat teman teman saya yang lagi asik belajar
membuat link, semoga saya mendapatkan apa yang saya inginkan. Juga kami
mengharap teman-teman juga mau memperhatikan pengetahuan yang sangat berharga
ini .
</body>
</html>
2.
Buat halaman dengan
file profil.html simpan
pada folder nama anda2
<html>
<head>
<title>Profil</title>
</head>
<body>
<div align="center">SELAMAT DATANG
DISITUS PRIBADI
<br>
<hr>
PROFIL
PRIBADI SAYA
</div>
<p>NAMA : SALSABILA</p>
<p>ALAMAT ; Jl Samanhudi 30 Jakarta </p>
<p>STATUS : Jomblo </p>
</body>
</html>
3.
Buat halaman dengan
file cita.html simpan
pada folder nama anda2
<html>
<head>
<title>Cita-cita</title>
</head>
<body>
<div align="center">SELAMAT DATANG
DISITUS PRIBADI
<br>
<hr>
CITA-CITA</div>
<p>Jika aku telah dewasa nanti saya ingimn
menjadi ahli design komputer yang handal, sehingga aku dapat mengembangkan
keilmuan an membantu orang tua dalam permasalahan ekonomi </p>
</body>
</html>
4.
Buat halaman dengan
file pengalaman.html simpan pada folder nama anda2
<html>
<head>
<title>pengalamanku</title>
</head>
<body>
<div align="center">SELAMAT DATANG
DISITUS PRIBADI
<br>
<hr>
PENGALAMAN
KU </div>
<p>Di Pondok Pesantren Sunan Drajat aku telah mendapatkan banyak
yang aku pelajari selama ini, begitu juga selama sekolah saya juga merasakan
rasa menyenagkan juga kadang-kadang menyebalkan terutama pada bapak guru yang
ngajar komputer " ADUH GALAK BENAR GURU INI ' </p>
</body>
</html>
5.
Buka kembali file index.html,
kemudian buat link pada file yang lain dengan link sebagai berikut :
<a href=”profil.html”>PROFILKU</a>
<a href=”cita.html”>CITA-CITAKU</a>
<a href=”pengalaman.html”>PENGALAMANKU</a>
<html>
<head>
<title>Situs pribadi</title>
</head>
<body>
<div align="center">SELAMAT DATANG
DISITUS PRIBADI
<br>
<hr>
<br>
<a href=”profil.html”>PROFILKU</a>
<a href=”cita.html”>CITA-CITAKU</a>
<a href=”pengalaman.html”>PENGALAMANKU</a>
</div>
Situs ini kami persembakan buat teman teman saya yang lagi asik belajar
membuat link, semoga saya mendapatkan apa yang saya inginkan. Juga kami
mengharap teman-teman juga mau memperhatikan pengetahuan yang sangat berharga
ini .
</body>
</html>
MACAM-MACAM LINK
1.
Mailto, link yang langsung menuju
ke alamat e-mail.
<a href=”mailto:saya@gmail.com”>Kirim
E-mail</a>
2.
Link ke situs lain
<a href=”http://www.google.com”> Google</a>
3.
Link untuk file Download
<a href=”cerita.doc>Download</a>
4.
Link ke halaman lain.
<a href=”profil.html>PROFIL</a>
WARNA HYPERLINK
Teks atau label yang menadi
hyperlink atau penghubung ke halaman yang web lain secara otomatis akan diberi
warna tertentu ( biasanya biru ) bergaris bawah. Namun warna tersebut
sebenarnya dapat diubah sesuai dengan keinginan kita. Cara nya dengan
menggunakan atribut LINK yang terdapat pada tag body .
Selain menngunakan link untuk
pemberian warna , terdapat dua atribut lagi yang digunakan untuk memberikan
warna pada hyperlink yaitu :
- ALINK berguna untuk menentukan
link aktif, yaitu link yang telah diklik pemakai, tetapi halaman belum
selesai dibuka
- VLINK berguna untuk menentukan warna link yang
halaman web terkait atau yang di link telah dikunjungi
PRAKTIKUM 18
<html>
<head>
<title>membuat link</title>
</head>
<body link=”green”>
<a href=”http://www.google.com”> Google</a>
<a href=”http://www.mmasunandrajat.net”> Madrasah Mu’allimin Mu’allimat</a>
</body>
</html>
1.
Selanjutnya
simpan PRAKTIKUM 18 dalam FOLDER NAMA ANDA
dengan file name : “ praktikum18.html “
2.
Lihat hasilnya
dan kesimpulan
apa yang dapat anda peroleh dari latihan tersebut
PRAKTIKUM 19
<html>
<head>
<title>membuat link</title>
</head>
<body link=”green” alink=”red” vlink=”pink”>
<a href="http://www.google.com">
Google</a>
<a href="http://www.mmasunandrajat.net"> Madrasah
Mu’allimin Mu’allimat</a>
</body>
</html>
1.
Selanjutnya
simpan PRAKTIKUM 19 dalam FOLDER NAMA ANDA
dengan file name : “ praktikum19.html “
2.
Lihat hasilnya
dan kesimpulan
apa yang dapat anda peroleh dari latihan tersebut
Variasi lain dari model hyperlink adalah apabila kita mengklik suatu
link, dokumen utama tidak menghilang melainkan akan terbuka jendela lain yang
menampilkan informasi suatu halaman. Hal ini dapat kita kerjakan dengan
menambah kode : target="_blank"
Contoh
pada praktikum link pada pembahasan sebelumnya
<a
href="profil.html" target="_blank">PROFIL</a>
<a
href="cita.html" target="_blank">CITA-CITAKU</a>
<a
href="pengalaman.html"
target="_blank">PENGALAMAN</a>
LINK DENGAN GAMBAR
Link selain
dapat dilakukan dengan teks juga dapat dilakukan dengan gambar. Sebelumnya buat
gambar pada Photoshop dengan file name profil.jpg. cita.jpg dan
pengalaman.jpg kemudian buat link dengan tag <img src=" nama file.jpg">
pada contoh link diatas
<a href="profil.html"><img
src="profil.jpg"></a>
<a
href="cita.html"><img src="cita.jpg"></a>
<a
href="pengalaman.html"><img src="pengalaman.jpg"></a>
MENYISIPKAN
GAMBAR
1)
Atribut ukuran gambar, bila tidak
dituliskan, maka ukuran gambar sesuai ukuran aslinya. Namun ukuran gambar bisa
dibuat dengan nilai tertentu dengan cara menuliskan atribut height dan width.
<img src=”foto.fpg” height=”200” width=”100”>
2)
Pelurusan gambar, posisi gambar
terhadap teks sebelum dan sesudahnya bisa fleksibel, misalnya lurus atas :
<img src=”foto.bmp” align=”top”>
3)
Teks alternatif untuk gambar,
dimaksudkan untuk mengganti gambar apabila browser tidak mampu menampilkan
gambar tersebut.
<img src=”foto.jpg” alt=”Foto”>
4)
Atribut border dan spasi, jika
atribut ini tidak disertakan, maka gambar ditampilkan tanpa garis tepi.
<img src=”foto.gif” border=”10”>
5)
Gambar sebagai hyperlink.
<a href=”registrasi.html”><img
src=”foto.gif”></a>
6)
Gambar sebagai background
<body background=”file_gambar.jpg”>
7)
Background warna
<body bgcolor=”red” text=”white” link=”green”>