Selamat datang Kembali di Chakra media blog. Sekarang saya akan mencoba mengenalkan kepada sahabat tentang Hyperlink dan image di HTML. Sebelum membaca tutorial kali ini, alangkah baiknya sahabt membaca dulu postingan sebelumnya tentang Tutorial HTML Dasar : 8. Mengenal Formatting dan komentar di HTML. Gimana, sobat blog udah buat tugas yang saya berikan di tutorial atau postingan sebelumnya ?? jika belum mending baca-baca dulu tutorial HTML dasar yang lalu deh, biar gak pusing dan belajarnya terstruktur.
Belajar Hyperlink
Nah, sekarang kita akan belajar atau mempelajari tentang Hyperlink. apa sih hyperlink itu ?? Hyperlink adalah suatu teks ataupun gambar yang bisa di klik untuk menuju ke dokumen lain. Kalo di HTML ini gak ada hyperlink gak afdol dong, kan tujuan html dibuat juga salah satunya untuk mempermudah berpindah dari dokumen satu ke dokumen lainnya.
Baik sekarang saya akan membuat sebuah contoh dari hyperlink untuk di pelajari oleh sahabat, Langsung saja :
<!doctype html>Coba buat file htmlnya dan lihat hasilnya di web browser.
<html>
<head>
<title>Belajar Hyperlink dan Image</title>
</head>
<body>
<a href="http://www.chakra-media.tk"> Ini hyperlink </a>
</body>
</html>
Saya akan coba jelaskan <a => ini tag hyperlink, href => attribut ini berfungsi untuk mencari tujuan dokumen yang akan kita buka, dan "http://www.chakra-media.tk" => ini value atau nilai atau isi dari href yang akan mengantar kita ke alamat web tersebut. Untuk sobat yang masih kebingungan, saya akan buatkan 2 contoh hyperlink :
<!doctype html>Kosongkan dulu value href-nya. Buatlah file HTML seperti diatas dengan nama hyperlink2.html, lalu buka file di web browser sobat dan lihat di address barnya dan copy-lah. contoh gambarnya.
<html>
<head>
<title>Belajar Hyperlink dan Image</title>
</head>
<body>
<a href=""> Menuju hyperlink1 </a>
</body>
</html>
Lalu buatlah sebuah file HTML kembali :
<!doctype html>Paste-lah hasil copy tadi di dalam href, Lalu save satu folder dengan hyperlink2.html, dan beri nama hyperlink1.html. buka di web browser, lihat apakah berhasil atau tidak, jika berhasil, lakukan copy seperti contoh yang di atas, dan sekarang buka lagi hyperlink2.html. paste hasil copy tadi ke dalam attribut href, seperti di hyperlink1.html, Lalu save kembali.
<html>
<head>
<title>Belajar Hyperlink dan Image</title>
</head>
<body>
<a href="file:///D:/Blog/TUTORIAL%20DASAR%20HTML/hyperlink2.html"> menuju hyperlink2 </a>
</body>
</html>
Sekarang coba buka file hyperlink1.html dan coba klik menuju hyperlink2, jika berhasil akan tampil tulisan menuju hyperlink1.
Agar ketika klik membuka ditab berbeda kita tinggal menggunakan attribut Target dan valuenya yaitu _blank. contoh :
<a href="http://www.chakra-media.tk" target="_blank"> menuju hyperlink2 </a>Kita juga bisa berpindah ke teks lain bukan ke dokumen di hyperlink ini, mari kita coba buat contohnya :
<!doctype html>Coba sobat buat file seperti itu, dan coba klik hyperlinknya, jika berpindah berarti itu berhasil. Kenapa saya pakai tag <br/> banyak sekali ?? Karena agar terlihat pindahnya ke teks 5 tersebut. Jika satu halaman saja tidak akan bereaksi karena sudah terlihat. Tanda # di href ini berpasangan dengan attribut id, jadi kita HTML memanggil attribut id dengan value teks5 dengan tanda #teks5 di href.
<html>
<head>
<title>Belajar Hyperlink dan Image</title>
</head>
<body>
<a href="#teks5"> Loncat ke teks5 </a><br/>
<h2>Teks 1</h2>
<p>Ini adalah teks 1</p><br/><br/><br/><br/><br/><br/><br/><br/>
<h2>Teks 2</h2>
<p>Ini adalah teks 2</p><br/><br/><br/><br/><br/><br/><br/><br/>
<h2>Teks 3</h2>
<p>Ini adalah teks 3</p><br/><br/><br/><br/><br/><br/><br/><br/>
<h2>Teks 4</h2>
<p>Ini adalah teks 4</p><br/><br/><br/><br/><br/><br/><br/><br/>
<h2 id="teks5">Teks 5</h2>
<p>Ini adalah teks 5</p><br/><br/><br/><br/><br/><br/><br/><br/>
<h2>Teks 6</h2>
<p>Ini adalah teks 6</p><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
Perlu diingat hyperlink ini tidak harus teks, bisa juga dengan image dan akan dibahas dibawah.
Untuk pelajaran hyperlink cukup sekian, sekarang kita akan belajar tag image dan kita bisa kolaborasikan dengan tag hyperlink ini.
Belajar Image
Setelah kita belajar hyperlink, sekarang kita akan belajar tentang Image. Image adalah tag yang digunakan untuk memunculkan gambar dalam sebuah web. Nanti akan saya kolaborasikan dengan tag hyperlink. Image ini support gambar jpg, png, dan gif. Misal kita ingin memasukan gambar .gif yang gerak, kita bisa menampilkannya di browser.
Langsung ke contohnya, tapi sobat harus menyimpan file gambar satu folder dengan file ini, saya menyimpan gambar bernama smiley.jpg dalam satu folder :
<!doctype html>Nah coba sobat buat seperti sintak diatas, dan lihat di web browser, jangan lupa ganti value smiley.jpg ini menjadi nama gambar sobat. Penjelasannya <img => tagnya, src => attribut untuk memanggil file gambarnya, dan alt => attribut untuk mendeskripsikan atau menggambarkan gambar dalam bentuk teks.
<html>
<head>
<title>Belajar Hyperlink dan Image</title>
</head>
<body>
<h3>Belajar Tag Image</h3>
<img src="smiley.jpg" alt="Ini gambar Smiley">
</body>
</html>
Sekarang saya akan coba buat 2 image dengan berbeda tempat di browser dengan menggunakan float di attribut style.
<!doctype html>Sekarang coba sobat buat sintak seperti diatas, pasti akan berbeda tempat kan ? itu gunanya float di attribut style atau nanti di css.
<html>
<head>
<title>Belajar Hyperlink dan Image</title>
</head>
<body>
<h3>Belajar Tag Image</h3>
<img src="smiley.jpg" alt="Ini gambar Smiley" style="float:right">
<img src="smiley.jpg" alt="Ini gambar Smiley" style="float:left">
</body>
</html>
Sebenarnya di tag image ini ada attribut widht dan height di html5 masih digunakan, tapi memang kurang bagus menggunakan attribut itu. Kita menggantinya dengan attribut style atau di css width dan height. Contoh :
<!doctype html>Silakan sobat coba dan lihat perbedaannya. Jadi kalau menggunakan style properti width height ukurannya tidak berubah, tapi kalau menggunakan attribut width dan height akan mengubah ukuran width. Itu karena, pengaruh dari img{ width:100%;}, maksud dari 100% ini ukurannya mengikuti perintah, jika dengan attribut style sintaknya terhubung jadi di perintah img pertama gambar ukurannya tetap mengikuti perintah di attribut style, akan tetapi jika menggunakan attribut width dan height tidak terhubung jadi maksud dari 100% di tag style di atas membuatnya seukuran atau mengikuti ukuran web browser.
<html>
<head>
<title>Belajar Hyperlink dan Image</title>
<style>
img{
width:100%;
}
</style>
</head>
<body>
<h3>Belajar Tag Image</h3>
<img src="smiley.jpg" alt="Ini gambar Smiley" style="width:223px;height:226px;">
<img src="smiley.jpg" alt="Ini gambar Smiley" width="223px" height="226px">
</body>
</html>
Setelah mempelajari tag image, sekarang mari kita satukan semua pelajaran ini. Kita bisa membuat hyperlink dengan tag image. Langsung ke contohnya :
<!doctype html>Tanda ../ di attribut src maksudnya untuk keluar dari folder awal /image untuk masuk ke folder image dan /logo.png untuk mengambil gambarnya. Silakan pelajari, tanyak jika ada yang kurang mengerti, saya akan coba membantu. Terima kasih sudah mengunjungi blog saya dan semoga bermanfaat.
<html>
<head>
<title>Belajar Hyperlink dan Image</title>
<style>
img{
width:100%;
}
</style>
</head>
<body>
<h3>Belajar Tag Hyperlink dengan Image</h3>
<a href="http://chakra-media.tk">
<img src="../image/logo.png" alt="Ini Logo Chakra Media" style="width:223px;height:226px;">
</a>
</body>
</html>
0 komentar