HTML DASAR – Memasukan Gambar pada Halaman Website

  • Post
    codeorayo
    Keymaster
    none
    Bagaimana caranya untuk  Memasukan Gambar pada Halaman Website ?. Dalam memasukan gambar anda dapat menggunakan tag . Tag ini termasuk ke dalam kategori Self Closing Tag yakni tag yang tidak memiliki tag penutup namun memasukan objek berdasarkan sumbernya/alamat objek itu disimpan. Tag  memiliki atribut dasar seperti :

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td]Nama Atribut[/td] [td]Fungsi[/td]
    [td]Src[/td] [td]Mendefinisikan lokasi gambar disimpan. Atribut ini wajib.[/td]
    [td]Alt[/td] [td]Memberikan informasi berupa teks yang kalian buat, apabila gambar gagal dimuat.[/td]
    [td]Width[/td] [td]Mendefinisikan lebar gambar.[/td]
    [td]Height[/td] [td]Mendefinisikan tinggi gambar.[/td]

    Dalam menentukan ukuran gambar, disarankan untuk menggunakan width dan height dari CSS. Dan sebelum kita ke praktek codingnya, pertama – tama silahkan anda sediakan gambar yang ingin anda gunakan sebagai praktek. Gambar ini harus 1 folder dengan file HTML.

    Jika sudah menentukan gambarnya, silahkan kopi paste kode di bawah ini :

    Code:




    Image


    logo

    Dan di bawah ini adalah hasil dari kode sumber di atas :

    [img width=853,height=529]http://lautankode.com/wp-content/uploads/2018/01/image-output.png[/img]

    Apabila gambar gagal dimuat, akan muncul informasi yang di tulis pada atribut alt. Berikan informasi yang menspesifikasikan gambar tersebut.

    [img width=863,height=526]http://lautankode.com/wp-content/uploads/2018/01/image-output-2.png[/img]

    Mengatur Ukuran Gambar pada HalamanDalam mengatur ukuran gambar anda dapat menggunakan atribut (pada HTML) / property (pada CSS) width dan height. Namun, sangat dianjurkan untuk menggunakan width dan height pada property CSS. Satuan yang digunakan dapat px, ataupun %. Untuk membuat website yang responsive umumnya satuan % lah yang digunakan.

    Kode Sumber…

    Code:




    Mengatur Ukuran Gambar



    Persen %

    logo

    Pixel

    logo

    Di bawah ini adalah hasil dari kode sumber di atas, dengan nilai zoom 100%, dan ukuran layar 1187px.

    [img width=1024,height=528]http://lautankode.com/wp-content/uploads/2018/01/image-mengukur-ukuran-gambar-1-1024×528.png[/img]

    Ada 2 mode yang akan mempengaruhi ukuran gambar, yakni mode zooming (adalah ketika anda memperbesar/memperkecil ukuran layar dengan konsep Scroll Up / Sroll Down) dan mode Responsive, yakni ketika anda mempersempit / memperlebar ukuran layar.

    Nilai Responsive ini ada kaitannya terhadap tampilan gambar di berbagai perangkat, yakni tampilan pada Desktop, Tablet, dan Mobile.

    Pada mode zooming silahkan anda perbesar / perkecil ukuran layar (ctrl + scrolling), maka perubahan hanya akan terjadi pada gambar dengan satuan nilai pixel.

    Zooming 200%.

    [img width=1024,height=532]http://lautankode.com/wp-content/uploads/2018/01/image-mengukur-ukuran-gambar-2-1024×532.png[/img]

    Sedangkan pada mode Responsive, perubahan ukuran gambar hanya terjadi pada gambar dengan satuan nilai persen. Hal ini terjadi karena ukuran gambar di kali ukuran layar. Satuan nilai ini cocok untuk gambar yang akan setting Responsive.

    [img width=466,height=677]http://lautankode.com/wp-content/uploads/2018/01/image-mengukur-ukuran-gambar-3.png[/img]

    Menjadikan Gambar Sebagai LinkAnda pun dapat menjadikan gambar sebagai link, untuk tersambung ke halaman lainnya. Anda hanya perlu memasukan elemen di dalam elemen .

    Kode Sumber…

    Code:




    Link Image



    Google


    Di bawah ini adalah hasilnya :

    [img width=992,height=488]http://lautankode.com/wp-content/uploads/2018/01/image-image-link-1.png[/img]

    Outputnya adalah seperti gambar di atas, apabila gambar itu di klik akan menuju ke situs Google asalkan anda terhubung dengan internet.

    [img width=1024,height=527]http://lautankode.com/wp-content/uploads/2018/01/image-image-link-2-1024×527.png[/img]

    Images MapMaksudnya disini adalah membuat area yang dapat di klik dalam area yang menjadi media tersebut. Perhatikan gambar di bawah ini… dan kalian pun dapat mendownloadnya sebagai contoh, agar sesuai dengan contoh yang akan saya berikan di bawah pula.

    [img width=1024,height=455]http://lautankode.com/wp-content/uploads/2018/01/image-image-map-1-1024×455.jpg[/img]

    Dalam bujur sangkar di atas, saya masukan gambar Twitter, Facebook, dan Google. Lalu akan saya buat sebuah area pada masing – masing logo agar dapat di klik, dan akan menuju ke situs mereka masing – masing.

    Intinya saya akan membuat area pada masing – masing gambar seperti ini :

    [img width=443,height=197]http://lautankode.com/wp-content/uploads/2018/01/image-image-map-2.jpg[/img]

    Namun, area tersebut dalam bentuk transparan.

    Kode Sumber…

    Code:





    image map

    twitter     
        

    facebook     
        

    google


    Dan di bawah ini adalah outputnya :

    [img width=1024,height=521]http://lautankode.com/wp-content/uploads/2018/01/image-image-map-output-1-1024×521.png[/img]

    Jika anda arahkan kursor anda pada masing – masing gambar, maka kursor anda akan berubah menjadi gambar tangan dan jika anda klik area tersebut, anda akan ter – arahkan pada masing – masing situsnya sendiri – sendiri.

    Catatan : Perhitungan yang anda buat pada kode sumber, harus tepat sesuai lokasi gambar.

    Penjelasan dari materi di atas…

  • Pada tag , terdapat atribut usemap yang mendefinisikan kata kunci untuk pembuatan area pada tag 

    .
  • Maka pada tag 

    , saya memanggil nilai atribut dari usemap, yakni contoh. Untuk disandingkan/disambungkan.
  • Lalu masuklah pada tahap pembuatan area dengan tag 

    . Berikut atribut dan nilai atributnya.

  • Shape, mendefinisikan bentuk area yang dibuat (circle/poly/rect).

  • Cords, mendefinisikan kordinat, dan luas kordinatnya (panjang x lebar).




    [img width=337,height=168]http://lautankode.com/wp-content/uploads/2018/01/image-image-map-output-2.jpg[/img]

  • Alt, memberikan informasi apabila gambar gagal di muat.

  • Href, mendefinisikan link yang dituju.




    Jika ada kekurangan dalam penjelasan yang saya sampaikan, nasehat dari pengunjung akan memperbaiki kekurangan tersebut.

     Menyisipkan Gambar ke dalam TeksAnda dapat saja menyisipkan gambar ke dalam teks atau kalimat. Hal ini biasanya di lakukan dalam sebuah paragraf, umumnya gambar ini diletakkan di sebelah kiri.

    Namun, anda pun dapat merubah atau mendesainnya dengan menggunakan CSS.

    Peletakkan gambar dilakukan dengan atribut float, dan ukurannya disesuaikan dengan atribut width.

    Kode Sumber…

    Code:





    Google merupakan salah satu mesin pencari terpopuler didunia, karena apa pun yang kalian ingin cari 99% akan anda temukan pada mesin pencari ini.


    Dan di bawah ini adalah output dari kode sumber di atas :

    [img width=524,height=312]http://lautankode.com/wp-content/uploads/2018/01/image-menyisipkan-gambar-ke-dalam-teks-1024×609.png[/img]

    Gambar yang gagal dimuat.Sebuah gambar dapat saja gagal dimuat, dan biasanya hal ini terjadi karena kesalahan penulisan nama gambar tersebut oleh programmer, oleh karena itu HTML menyediakan cara untuk mengatasi masalah ini. Yakni dengan menggunakan atribut alt atau kependekan dari alternative.

    Kode Sumber…

    Code:




      gambar logo

    Hasil dari kode sumber di atas :

    [img width=1024,height=615]http://lautankode.com/wp-content/uploads/2018/01/image-gambar-yang-gagal-dimuat-1024×615.png[/img]

    Harap diingat, agar memberikan informasi pada atribut alt sesuai dengan Nama gambar yang ingin ditampilkan, hal ini akan meringankan masalah anda, ketika anda tidak mengetahui gambar apa yang gagal dimuat oleh halaman website.

    Sekarang anda sudah mengerti Bagaimana caranya untuk  Memasukan Gambar pada Halaman Website.

    https://www.lautankode.com/memasukan-gambar-pada-halaman-website/

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.