Saturday, March 11, 2017

Membuat Gambar Link / Link Banner di HTML

Membuat Gambar Link / Link Banner di HTML
Membuat Gambar Link / Link Banner di HTML - Pada tutorial kali ini merupakan gabungan dari postingan - postingan sebelum nya, yaitu membuat link di HTML dan menyisipkan gambar di HTML. Penyisipan gambar pada halaman website memang sangatlah beguna sekali mengingat kebutuhan - kebutuhan para user yang menginginkan sebuah interface halaman website yang enak di lihat. Dengan gambar lah salah satunya untuk memperindah halaman website kita gambar nya pun bebas bisa berupa foto atau gambar yang di buat dengan bantuan software lainnya, seperti CorelDraw, Adobe Photoshop, dll. ya. . . semuanya tergantung kepada kebutuhan kita nya sebagai pembuat halaman website.

Mungkin dengan menyisipkan gambar saja itu hal biasa, nah bagaimana di gambar tersebut kita pasang link yang nyambung ke halaman lainnya. Dilihat dari sisi penerapannya tutorial kali ini bisa diterapkan bagi anda yang kebutuhan nya membuat profile website. Biasanya kan pada profile suka ada gambar foto yang pada halaman awal nya hanya foto saja atau hanya keterangan yang mencakup secara umum saja, nah untuk ingin melihat lebih detail nya klik poto tersebut.

Tools
  • Web Editor (Notepad++)
  • Web Browser(Mozilla)

Langkah - langkah
  • Cari gambar yang akan dijadikan latihan kali ini, untuk contoh sekarang dengan nama gambarnya "walter-obrien" tanpa tanda petik
  • Simpan didalam 1 folder bersama file dibawah ini yang akan segera di buat
Ketikan atau copas sintak dibawah

<html>

<head>

<title>halaman 1</title>

</head>

<body>



<a href="hal2.html"> <img src = "walter-obrien.jpg"></a>



</body>

</html>


Simpan dengan nama hal1.html
Ketikan atau copas sintak dibawah


<html>

<head>

<title>halaman 2</title>

</head>

<body>

<p>

Walter O'Brien (lahir 24 Februari 1975) adalah seorang pengusaha Irlandia dimana ia adalah pendiri

dan CEO dari Computer Services Scorpion. Ia juga menjadi inspirasi bagi produser eksekutif

dari 2014 CBS serial televisi Scorpion. (sumber : wiki)

<a href="hal1.html">kembali</a>

</body>

</html>


Simpan dengan nama hal2.html
Mungkin seperti itu contoh latihan kali ini mengenai gambar link di HTML, semoga bermanfaat dan bisa anda kembangkan lagi dengan memasang gambar lebih dari satu.

Untuk mengembangkan lagi kita bisa menambahkan atribut alt serta title pada tag <img> sekaligus request dari salah satu agan di blogger indonesia. Thanks gan sudah request. (y)
request link banner

Kembali mengenai fungsi dari masing - masing attribut tersebut :
alt : untuk memberikan  alternatif keterangan yang keluar apabila gambar gagal keluar
title : untuk memberikan keterangan judul pada gambar ketika gambar disorot
Contoh nya seperti dibawah ini


<img src = "walter-obrien.jpg" title="walter" alt="gambar walter">


No comments:

Post a Comment