08 insert image
-
Upload
amiroh-skom -
Category
Internet
-
view
36 -
download
1
Transcript of 08 insert image
HTMLMenyisipkan Gambar
Dan Multimedia
Amiroh, S.Kom
HTML Images
Digunakan untuk menyisipkan gambar pada halaman web
Contoh format gambar yang dapat disisipkan pada
halaman web:
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' >
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">
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:
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”>
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
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”>
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:
LATIHAN:
BUKALAH FOLDER LATIHAN PEMROGRAMAN WEB
LAKUKAN PENGATURAN LAYOUT HALAMAN WEB SESUAI DENGAN SCREENSHOT
SELAMAT MENGERJAKAN