Tutorial HTML dasar part 3 (Link dan Gambar)

Membuat Link

Sekarang kita coba untuk membuat link pada sebuh teks dan sebagai contoh tujuan link tersebut kita mengarah ke facebook.

Link di definisikan atau di tulis dengan tag <a>...</a> dan tujuan link tersebut menggunakan atribut href="http://www.facebook.com" serta kita sispka atribut target yaitu dimana kita akan membuka file dokumen tersebut contohnya target="_blank".

Kita coba dengan kode skrip dibawah ini


<!DOCTYPE html>

<html>
<head>
<title>Pembelajaran HTML dasar</title>
</head>
<body>
<a href="http://www.facebook.com" target="_blank">Facebook</a><hr>
<a href="http://www.google.com" target="_self">Google</a><hr>
<a href="http://id.yahoo.com" target="_parent">Yahoo</a><hr>
<a href="http://www.twitter.com" target="_top">Twitter</a>
</body>
</html>

Dari kode skrip diatas maka hasilnya akan terlihat seperti pada gambar dibawah ini.

Gambar 4 (Klik pada gambar untuk memperbesar)

Value	Penjelasan
_blank	Membuka file dokumen pada tab baru browser
_self _parent _top	Membuka file dokumen dimana Anda mengklik link tersebut (satu tab)

Namun pada kode skrip diatas terdapat tag <hr> yang berfungsi untuk membuat garis yang dapat Anda lihat seperti pada gambar diatas.

Menampilkan Gambar

Sekarang kita coba untuk menampilkan gambar dengan tag <img> dan atribut uuntuk mencari file gambar yang akan ditampilkannya adalah src="gambar.jpg" dan ukuran panjang gambar bisa kita atur dengan atribut width="100px" dan jika Anda tidak mengatur ukuran file gambar yang ditampilkan maka gambar akan ditampilkan pada ukuran default atau ukuran sebenarnya / asli file gambar tersebut.
Kita buat contoh kode skrip untuk menampilkan gambar.


<!DOCTYPE html>

<html>

<head>

<title>Pembelajaran HTML dasar</title>

</head>

<body>

<img src="facebook.png"><br>

<p><b>Ini adalah gambar kaleng facebook</b></p>

</body>

</html>

Dari kode skrip diatas akan menghasilkan tampilan seperti pada gambar dibawah ini.

Gambar 5 (Klik pada gambar untuk memperbesar)

Pada file diatas file gambar harus 1 folder atau satu tempat dengan file html yang akan menampilkan gambar tersebut tapi apabila file gambar terdapat pada folder yang lain maka folder yang berisi gambar yang akan di tampilkan harus disebutkan juga pada atribut src sehingga penulisannya akan seperti src="gambar/facebook.png".
Gambarannya seperti dibawah ini.

Gambar 6 (Klik pada gambar untuk memperbesar)

Dan apabila apabila berada diluar folder yang berisikan file html yang menampilkan gambar tersebut maka ditulis seperti src="../facebook.png", tanda ../ menandakan bahwa tag html mencari keluar folder yang berisikan file html tersebut.

Tidak perlu saya gambarkan mungkin Anda sudah mengerti dan bisa membayangkan gambarannya seperti apa.

Jika Anda ingin menyisipkan link url pada gambar tersebut maka kode skrip untuk menampilkan gambarnya sisipkan di tag <a>, sebagai contoh Anda tulis seperti kode skrip dibawah ini.


<!DOCTYPE html>

<html>

<head>

<title>Pembelajaran HTML dasar</title>

</head>

<body>

<a href="http://www.facebook.com" target="_blank">

<img src="facebook.png">

</a><br>

<p><b>Ini adalah gambar kaleng facebook</b></p>

</body>

</html>

Untuk penampilan gambar dan membuat link url sangat mudah kan sekarang Anda lanjutkan tutorialnya.

« Kembali Selanjutnya »