Belajar Pemrograman Bersama Portal Coding
Belajar berbagai pemrograman secara gratis dan praktis agar cepat mahir.
Mulai BelajarMenampilkan gambar didalam HTML.
Tanggal Upload : 2020-03-13 17:46:27
Diupload Oleh : Erji Ridho Lubis
# html # html dan css
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.
Pertanyaan : 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 :
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