Dokumen ini menjelaskan cara menyisipkan gambar dan multimedia dalam HTML menggunakan tag <img>, serta atribut yang diperlukan seperti src, alt, width, dan height. Terdapat juga penjelasan tentang cara mengelola gambar di folder dan dari server lain, serta penerapan gambar animasi. Terakhir, dokumen menyentuh bagaimana mengatur perataan gambar dengan atribut align.

1. HTML
Menyisipkan Gambar
Dan Multimedia
Amiroh, S.Kom

2. HTML Images
 Digunakan untuk menyisipkan gambar pada halaman web
 Contoh format gambar yang dapat disisipkan pada
halaman web:

3. HTML Images Syntax
 Sintax penulisan tag <img>
<img src="url" alt="some_text">
 Tag <img> tidak memiliki tag akhir (penutup)
 Atribut <img>:
 Src > digunakan untuk mendefinisikan alamat /
nama gambar yang akan ditampilkan
 Alt > digunakan untuk menampilkan teks
tertentu ketika gambar tidak berhasil
ditampilkan.
 Contoh :
<img src="logo.png" alt='Logo Sekolah' >

4. Image Size - Width and Height
 Atribut width dan height digunakan untuk menentukan lebar dan tinggi
gambar.
 Nilai atribut Width dan height ditentukan dalam ukuran pixel (px)
Example
<img src=“logo.png” alt=“Logo Sekolah” width=“100” height=“100”>
Atau :
<img src="logo.png" alt=“Logo Sekolah” style="width:100px;height:100px">

5. Images in Another Folder
 Apabila alamat gambar tidak disebutkan secara
spesifik, maka browser akan secara otomatis mencari
gambar pada alamat yang sama dengan alamat file
HTML berada.
 Biasanya gambar yang akan ditampilkan pada halaman
web dikumpulkan dalam folder tersendiri dengan nama
folder “images”
 Contoh penulisan:
<img src=“images/logo.png” alt=“Logo Sekolah”
width=“100” height=“100”>
 Apabila browser tidak menemukan gambar yang
dimaksud, maka akan ditampilkan “broken link icon”
seperti gambar di samping:

6. Images on Another Server
 Terkadang kita perlu menyimpan gambar tertentu pada sebuah
web server berbayar/gratis.
 Misalnya menyimpan gambar pada Facebook, photobucket dst
 Untuk menampilkan gambar dari web server tersebut, maka
dibutuhkan alamat URL tempat di mana gambar tersebut
disimpan.
 Misalnya:
<img src="http://amiroh.web.id/wp-
content/uploads/2013/10/guraru.png" alt=“Logo Guraru”
width=“100” height=“100”>

7. How to get an Image Location?
 Untuk mendapatkan lokasi
gambar yang telah disimpan di
web server, dengan cara:
 Buka gambar > Klik kanan
gambar yang dimaksud > Copy
Image Location

8. Insert Moving Images
 Gambar bergerak (animasi) dengan
format .GIF dapat ditampilkan pada
halaman web dengan cara yang sama
dengan gambar berformat .JPG atau
.PNG
<img
src="http://www.w3schools.com/htm
l/programming.gif" alt=“Logo Guraru”
width=“100” height=“100”>

9. Image Alignments
 Atribut Align digunakan untuk menentukan perataan teks terhadap
gambar
 Nilai atribut align adalah right/left/center/top/middle/bottom
 Syntax:
<img src="http://www.w3schools.com/html/programming.gif" align=“left”
alt=“Logo Guraru” width=“100” height=“100”>
 Hasil:

10. LATIHAN:
 BUKALAH FOLDER LATIHAN PEMROGRAMAN WEB
 LAKUKAN PENGATURAN LAYOUT HALAMAN WEB SESUAI DENGAN SCREENSHOT

11. SELAMAT MENGERJAKAN