Menyisipkan gambar

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