Suatu website yang bagus pasti memiliki gambar di dalamnya. Dan suatu waktu
anda tentu ingin menambahkan gambar didalam website anda. Untuk menampilkan gambar
pada halaman dapat digunakan tag <img>. Format file yang dapat didukung oleh tag img
bermacam-macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag img memiliki beberapa atribut
yaitu
src : letak file gambar yang akan ditampilkan
border: tebal bingkai gambar
height: menentukan tinggi image/gambar
width: menentukan lebar image/gambar
Nilai dari atribut src jika letak file gambar berada pada direktori yang sama dengan direktori file
html anda. Maka cukup tuliskan nama filenya saja, contohnya src=”nama_file.jpg”. Dan jika
letak filenya berada pada sub folder/direktori maka nilainya adalah
src=”sub_folder/nama_file.jpg”. Lalu bagaimana jika letaknya pada folder/direktori diatas
file html saya?. Caranya hampir sama hanya saja ditambahkan tanda ../(titik dua dan slash).
Yang artinya pindah satu folder keatas, jika letaknya di dua folder diatas file html saya. Sama
tinggal menambah ../../ (artinya pindah dua folder ke atas). Contohnya
src=”../nama_folder/nama_file.jpg”.
Untuk contoh kali ini anda buat folder terserah anda, simpan beberapa gambar di folder tersebut, ingat format gambar baik-baik, Lalu ketiklah kode berikut ini. Ingat ganti nilai dari src sesusai dengan nama file gambar anda.
<html>
<head>
<head>
<title>Atribut dari Tag img</title>
</head>
<body>
<p><b>Tag img hanya dengan atribut <i>src</i></b></p>
<img src="teguh.JPG" height="200" width="200">
<p><b>Tag img dengan border="1"</b></p>
<img src="teguh2.JPG" border="1" height="170" width="150"</b><p>
<p><b>Tag img dengan height dan width</b></p>
<img src="teguh3.JPG" border="1" height="100" width="80">
</body>
</html>
Jika sudah selesai anda simpan di dalam folder yang sama dengan gambar. Lalu jalankan di web browser maka hasilnya seperti dibawah ini.
Bagaiman, menyenangkan bukan belajar memasukan gambar di html.
Mungkin itu yang bisa saya sharing hari ini. Tetap berjuang yaaahhhh
Sumber
http://www.direktoriweblog.com
Post a Comment