Belajar Pemrograman Bersama Portal Coding

Belajar berbagai pemrograman secara gratis dan praktis agar cepat mahir.

Mulai Belajar

Menampilkan gambar didalam HTML.

Tanggal Upload : 2020-03-13 17:46:27

Diupload Oleh : Erji Ridho Lubis


# html # html dan css

menampilkan gambar didalam html

Menampilkan Gambar didalam dokumen HTML

 

Kembali lagi bersama Portal Coding.

Kemarin kita telah mempelajari beberapa hal dalam pembangunan sebuah halaman html. Seperti struktur dasar, heading, link, paragraf, serta kutipan. Itu semua adalah untuk memodifikasi teks dalam dokumen html. Nah pada pembahasan kali ini, yang kita bahas adalah menampilkan gambar didalam dokumen html. 

Bagaimana caranya? Simak pembahasannya berikut ini.

Didalam dokumen html, kita dapat menampilkan sebuah gambar pada dokumen tersebut, dan gambar pun akan tampil sesuai bentuk dan ukurannya.

Adapun tag yang digunakan untuk menampilkan gambar didalam dokumen html ini adalah tag <img /> . Dengan menggunakan tag <img /> ini, kita bisa menampilkan gambar sesuai dengan source atau sumber yang telah kita definisikan didalam atribut pada tag tersebut.

Atribut penting yang harus digunakan dalam tag ini adalah atribut src=" ", didalam atribut ini lah kita mendefinisikan sumber dari gambar yang ingin kita tampilkan.

Sintaks dasar tag :

 

<img src="source image" alt="alternate image">

 

Atribut alt

Apa fungsi atribut alt? Atribut alt berfungsi untuk menginformasikan judul dari sebuah file, tabel, ataupun link yang menggambarkan tujuan dari elemen saat menggunakan kata kunci bertarget.

 

Saat kita akan mendefinisikan sumber dari gambar (link gambar tersebut), sebagiknya kita mengelompokkan file html ini dengan gambar didalam 1 folder. Strukturnya foldernya seperti berikut.

 

=> belajar-html
   |
    -> index.html
   |
    => img
       |
        -> nama-img.jpg

 

Note : => (folder)

          -> (file)

 

Contoh penggunaan tag <img />

 


  <html>
    <head>
      <title>Belajar Menampilkan Gambar didalam HTML</title>
    </head>
    <body>
        <h1>Menampilkan Gambar</h1>
        <br>
        <img src="img/lampu.jpg" alt="belajar menampilkan gambar didalam html">
    </body>
  </html>
  

 

Saat dokumen dibuka, maka gambar akan tampil pada halaman html tersebut, seperti berikut ini.

 

menampilkan gambar pada dokumen htmlPertanyaan : Bagaimana jika ukuran gambar terlalu lebar?

Jawab : Solusi dari permasalahan seperti itu adalah dengan mengatur ukuran dari gambar tersebut menggunakan css didalam dokumen. Untuk pembahasannya akan kita bahas pada artikel selanjutnya.

 

Selanjutnya :

=> Menampilkan Video dialam HTML

Advertisement


Tentang Portal Coding

Tentang Portal Coding

Portal Coding adalah situs web yang membahas mengenai berbagai macam bahasa pemrograman baik versi web, desktop maupun mobile secara lengkap.

Portal Coding On Youtube

Ayo subscribe channel Portal Coding di Youtube. Dichannel ini kami menyediakan berbagai tutorial dalam bentuk video. Agar kita lebih mudah belajar pemrograman. Klik disini untuk subscribe.

Subscribe