HTML Images


«Previous Lanjut Bab »

Contoh

Norwegia Mountain Trip

Coba sendiri »


Try it Yourself – Contoh

Sisipkan gambar
Contoh ini menunjukkan bagaimana untuk menyisipkan gambar ke halaman Web Anda.

Sisipkan gambar dari lokasi yang berbeda
Contoh ini menunjukkan bagaimana untuk menyisipkan gambar dari folder lain atau server lain.

(Anda dapat menemukan lebih banyak contoh di bagian bawah halaman ini)


Image Tag dan Atribut Src

Dalam HTML, gambar didefinisikan dengan tag <img>.

<img> Tag yang kosong, yang berarti bahwa atribut hanya mengandung dan tidak memiliki tag penutup.

Untuk menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari “sumber”. Nilai dari atribut src adalah URL dari gambar yang ingin ditampilkan pada halaman Anda.

Sintaks mendefinisikan gambar:

<img src=”url” />

URL yang menunjuk ke lokasi di mana foto tersebut disimpan. Sebuah gambar yang bernama “boat.gif” terletak di direktori “images” pada “www.w3schools.com” memiliki URL: http://www.w3schools.com/images/boat.gif.

Browser meletakkan foto di mana gambar tag terjadi dalam dokumen. Jika Anda memasang tag gambar antara dua paragraf, browser menampilkan paragraf pertama, kemudian gambar, dan kemudian paragraf kedua.


Atribut Alt

Atribut alt digunakan untuk mendefinisikan sebuah “teks alternatif” untuk gambar. Nilai atribut alt adalah seorang penulis-teks didefinisikan:

<img src=”boat.gif” alt=”Big Boat” />

The “alt” atribut memberitahu pembaca apa yang dia hilang pada halaman jika browser tidak dapat memuat gambar. Browser akan menampilkan teks alternatif bukan gambar. Ini adalah praktik yang baik untuk menyertakan “alt” atribut untuk setiap gambar pada halaman, untuk memperbaiki tampilan dan kegunaan dari dokumen Anda bagi orang-orang yang hanya teks browser.


Catatan Dasar – Tips Berguna

Jika sebuah file HTML berisi sepuluh gambar – sebelas file yang diperlukan untuk menampilkan halaman yang tepat. Gambar loading membutuhkan waktu, jadi saran terbaik saya adalah: Gunakan gambar dengan hati-hati.


Lebih Contoh

Gambar latar belakang
This example demonstrates how to add a background image to an HTML page. Contoh ini menunjukkan bagaimana untuk menambahkan gambar latar belakang ke halaman HTML.

Menyelaraskan gambar
Contoh ini menunjukkan bagaimana untuk menyesuaikan gambar dalam teks.

Biarkan gambar float
Contoh ini menunjukkan bagaimana untuk membiarkan mengambang gambar ke kiri atau kanan paragraf.

Menyesuaikan gambar ke ukuran yang berbeda
Contoh ini menunjukkan bagaimana untuk menyesuaikan gambar ke ukuran yang berbeda.

Menampilkan teks pengganti untuk gambar
Contoh ini menunjukkan bagaimana menampilkan teks alternatif untuk gambar jika browser tidak dapat menampilkan gambar. Anda harus selalu menyertakan atribut alt untuk gambar.

Membuat hyperlink dari suatu gambar
Contoh ini menunjukkan cara menggunakan gambar sebagai link.

Buat peta gambar
Contoh ini menunjukkan bagaimana membuat gambar peta, dengan daerah dapat diklik. Masing-masing daerah adalah hyperlink.


Image Tag

Tag Deskripsi
<img> Mendefinisikan gambar
<map> Mendefinisikan peta gambar
<area> Mendefinisikan daerah yang dapat diklik dalam peta gambar
«Previous Lanjut Bab »

  1. Belum ada komentar.
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: