08 insert image

11
HTML Menyisipkan Gambar Dan Multimedia Amiroh, S.Kom

Transcript of 08 insert image

Page 1: 08 insert image

HTMLMenyisipkan Gambar

Dan Multimedia

Amiroh, S.Kom

Page 2: 08 insert image

HTML Images

Digunakan untuk menyisipkan gambar pada halaman web

Contoh format gambar yang dapat disisipkan pada

halaman web:

Page 3: 08 insert image

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' >

Page 4: 08 insert image

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">

Page 5: 08 insert image

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:

Page 6: 08 insert image

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”>

Page 7: 08 insert image

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

Page 8: 08 insert image

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”>

Page 9: 08 insert image

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:

Page 10: 08 insert image

LATIHAN:

BUKALAH FOLDER LATIHAN PEMROGRAMAN WEB

LAKUKAN PENGATURAN LAYOUT HALAMAN WEB SESUAI DENGAN SCREENSHOT

Page 11: 08 insert image

SELAMAT MENGERJAKAN