Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

08 insert image

277 views

Published on

Menyisipkan gambar

Published in: Internet
  • Be the first to comment

  • Be the first to like this

08 insert image

  1. 1. HTML Menyisipkan Gambar Dan Multimedia Amiroh, S.Kom
  2. 2. HTML Images  Digunakan untuk menyisipkan gambar pada halaman web  Contoh format gambar yang dapat disisipkan pada halaman web:
  3. 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. 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. 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. 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. 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. 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. 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. 10. LATIHAN:  BUKALAH FOLDER LATIHAN PEMROGRAMAN WEB  LAKUKAN PENGATURAN LAYOUT HALAMAN WEB SESUAI DENGAN SCREENSHOT
  11. 11. SELAMAT MENGERJAKAN

×