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