Kamis, 30 Maret 2017

Belajar HTML dan CSS Bagian 9 : Save Image Pada HTML

Save Image Pada HTML

      Assalamualaikum Wr. Wb. Selamat datang kembali di blog lupacode. Sebelumnya kita telah mempelajari tentang Belajar HTML dan CSS Bagian 8. Bagi sahabat lupacode yang baru saja bergabung atau nyasar ke halaman ini, silahkan pelajari terlebih dahulu dari artikel yang pertama agar sahabat paham dan mengerti maksud dari artikel yang akan saya bahas kali ini. Sahabat semua dapat melihat seluruh isi artikel pada blog ini di halaman Daftar isi

lupacode - belajar html bagian 5

     Pada materi kali ini ita akan membahas tentang bagaimana caranya menyimpan sebuah gambar pada dokumen html kita. Yang akan kita gunakan adalah tag <img src=””> lalu atribut yang harus ada pada tag <img> ini adalah src atau source.
   Pertama – tama saya sudah membuat file yang saya beri nama image.html dan saya sudah menyiapkan sebuah gambar bernama logo.png didalam folder html, dimana folder html ini adalah folder latihan kita dari materi yang pertama sampai saat ini.
    File gambar yang bisa kita simpan ada dua. Yang pertama ada Internal resource dan kedua External resource. Internal resource adalah gambar yang kita miliki sendiri di dalam folder. Sedangkan External resource itu mengambil gambar dari sumber lain atau website lain.
      
Kita coba yang internal resource dan saya akan coba membuat tag <img> seperti ini
<img src=”logo.png”>
      Extensi filenya harus selalu ditulis dan pastikan gambar nya berada di dalam folder yang sama. Jika gambar nya berada didalam folder yang berbeda, maka gunakan relative link, seperti yang sudah kita bahas pada artikel sebelumnya. Hasilnya bisa kita lihat seperti ini

      Selain internal resource kita juga bisa menggunakan External resource atau biasa disebut dengan hotlink. Nah ini tidak saya sarankan karena gambar yang akan kita ambil berasal dari website lain, jika kita menambil gambar dari website lain, maka ketika user mengunjungi website kita dan gambarnya tampil, itu yang digunakan adalah bandwith dari pemilik website tersebut, jadi curang yah. Kemudian jika kita mengambil gambar dari website lain itu belum tentu gambarnya bebas pakai atau memiliki copyright jadi saya tidak sarankan.
        Atribut apa saja yang dimiliki oleh <img> ??? Berikut adalah atribut yang dimiliki oleh <img>

<img>
Src = Tadi kita sudah menggunakan atribut ini
Alt = untuk memberikan alternative text pada gambar
Title = Untuk memberikan title atau judul pada gambar
Widht = Untuk mengatur lebar gambar yang ingin ditampilkan
Height = Untuk mengatur tinggi gambar yang ingin ditampilkan

Menggabungkan gambar dengan hyperlink

        Kalau pada pembahasan sebelumnya kita menggunakan hyperlink dengan text, sekarang kita akan menggunakan hyperlink dengan gambar. Misalnya saya ingin membuat sebuah link, ketika saya klik sebuah image. Contohnya saya menuliskan seperti ini

<a href="http://www.facebook.com">
<img src="logo.png">
</a>

     Jadi ketika gambar tersebut di klik maka akan langsung meridirect ke halaman website www.facebook.com cukup mudah bukan untuk penggunannya ? saya harap sahabat semua dapat mengerti dengan pembahasan ini
    Baiklah saya rasa cukup untuk materi Save Image Pada HTML dan kita akan langsung melanjutkan ke materi selanjutnya yaitu Belajar HTML dan CSS Bagian 10

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon