Belajar HTML dan CSS part 8

Images

(Gambar)

Kita berlanjut pada tutorial selanjutnya.Saya harap kalian memehami maksud dari tutorial di yang lalu.Saya sarankan untuk membaca dari turioal bg1 karena pelajarannya saling berkaitan satu sama lain.

Pada kesempatan kali ini saya akan membahas mengenai gambar.Semua umatmanusia pasti sudah mengetahui apa itu gambar.Sedikit kita bahas mengnai gambar.Gambar dalam kamus besar bahasa indonesia adalah tiruan barang barang yang meliputi orang,tumbuhan,binatang,alam dan sebagainya yang di buat dengan coretan pensil ataupun alat lain dengan media kertas dan sebagainya.Lantas apa hubungannya gambar dengan pelajaran kita kali ini.Tentnya ada tepatnya kita akan belajar menganai gambar pada web

Tag <img> pada html

Merupakan tag yang menjadi titik masalah pada tutorial ini.tag img menunjukan image atau gambar.Dan karena itu maka di jadikan untuk mewakili tag image atau gambar.Tag img bisa dii artikan sebagai penamung format-format gambar seperti *jpg,*gif,*png.Dengan cara menunjukan link tersebut img pada akhir.

Sebenarnya ada dua element yang wajib ada di <img> yaitu src dan alt.
!).SRC adalah element untuk menyimpan alamat link tempat gambar tersebut disimpan.

<img src=”sakurasou.gif”>

2).ALT merupakan nama pengganti jika gambar yang kita input tak muncul seperti ini

 

<img src=”sakurasoku.gif alt ="Bot ketemu”>

Berkiut kalian coba codingnya seperti pada contoh di atas:

3).Height berari tinggi.Fungsinya adalah mengatur ukuran ketinggian atau panjang secara vertikal.Contoh penggunaannya adalah sebagai berikut 

<img src=”knnw.jpg alt ="tak ketemu height="421px”>

4)widh dalam bahasa indonesia berarti lebar merupakan elemen yang fungnya untuk mengatur lebar atau ukuran secara horizontal dalam hal ini adalah gambar.

<img src=”knnw.jpg alt ="tak ketemu height="421px” widht="120px">

Beginilah perbedaannya :

Gambar disamping kiri merupakan gambar asli dari gambar tersebut sementara dan tidak di atur
ukurannya,



Gambar di samping kanan merupakan gambar yang telah di atur tunggi sxerta lebarbya seddemikian rupa hingga menjadi seperti gambar di samping,







Nahh dasar penambahan gambar pada html memang seperti itu.Sekarang kalian pasti bertanya-tanya bagaimana jika langsung di CSS nya apa bisa?.Tentunya bisa caranya cukup mudah
kalian hanay perlu membuat property back ground pada sebuah element.Contoh seperti ini:

.Konten{    background:url('tempatgambardisimpan/gambar.png'); |

Dan tak hanya bisa ditambahkan saja lewat css.gambar juga bisa di melakukan perunlagan dengan menggunakan property background-repeat
Cukup mudahkan,perlu ditambahkan bahwa gambar di html pun bisa disisipkan sebuah link di dalamnya,

Contoh codingnya adalah sebagai berikut :

<a href="#"> <img src="knnw.jpg" alt="gambar tidak ada" height="421px" width="120px" display="inline-block"> </a>

Kalian cukup menambahkan elemen <a> yang merupakan elemen pembuat link.