HTML Merubah ukuran gambar

Setelah kemarin HTML merubah ukuran dan warna text, memberi link pada teks kini kita semua maju lagi kebagian HTML memasang Gambar atau Image dan merubah ukuran gambar.

Format Gambar yang di upload biasa nya JPG, PNG, GIF tapi buat saya yang paling baik itu menggunakan format gambar berekstansi PNG alasan nya karna size yang ringan dan pewarnaan yang kaya.

Lanjut ke inti dari artikel toturial ini Mari kita siapkan 1 gambar yang sudah di upload Contoh:

Sampel Gambar
Format : PNG
Size download: 5,30KB
Ukuran : (X 250px)(Y 250px)
link : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cMulC9WP31PgNjj2gj5bTshqh7k2vdLJhCu0L4l7s9RDCh2rhKsExxg_YAt3TpEbtS5DmFuc7MgndEvCGyBbIjz_OfOgrA6lK5zdcgeJVDAg5yFIyreg8uQb9ogIbV0Az6ef8VgjYKmG/s1600/HTML-GAMBAR-SEMPLE.png

Gambar di atas ini ada sampel yang saya buat untuk kita pelajari bersama, Ukuran asli gambar ini bisa kita buat menjadi berbagai ukuran lain dari 1 gambar yang saya.

Html memasang gambar tanpa merubah ukuran PX :
code = <img src="link gambar" />
Contoh = <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cMulC9WP31PgNjj2gj5bTshqh7k2vdLJhCu0L4l7s9RDCh2rhKsExxg_YAt3TpEbtS5DmFuc7MgndEvCGyBbIjz_OfOgrA6lK5zdcgeJVDAg5yFIyreg8uQb9ogIbV0Az6ef8VgjYKmG/s1600/HTML-GAMBAR-SEMPLE.png" />
Hasil =

Html memasang gambar dengan tambahan atribut title dan alt (alternative description) :
code = <img src="link gambar" alt="gambar gunung" title="gambar gunung"/>
Contoh = <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cMulC9WP31PgNjj2gj5bTshqh7k2vdLJhCu0L4l7s9RDCh2rhKsExxg_YAt3TpEbtS5DmFuc7MgndEvCGyBbIjz_OfOgrA6lK5zdcgeJVDAg5yFIyreg8uQb9ogIbV0Az6ef8VgjYKmG/s1600/HTML-GAMBAR-SEMPLE.png" alt="gambar gunung" title="gambar gunung"/>
Hasil =

Html merubah ukuran px gamabar:
code = <img src="link gambar" height="100" width="100" />
Contoh = <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cMulC9WP31PgNjj2gj5bTshqh7k2vdLJhCu0L4l7s9RDCh2rhKsExxg_YAt3TpEbtS5DmFuc7MgndEvCGyBbIjz_OfOgrA6lK5zdcgeJVDAg5yFIyreg8uQb9ogIbV0Az6ef8VgjYKmG/s1600/HTML-GAMBAR-SEMPLE.png" height="100" width="100" />
Hasil =

Html memasang link pada gambar :
code = <a href="Link kamu"> <img src="Link gambar"/></a>
Contoh = <a href="http://www.rumusblogger.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cMulC9WP31PgNjj2gj5bTshqh7k2vdLJhCu0L4l7s9RDCh2rhKsExxg_YAt3TpEbtS5DmFuc7MgndEvCGyBbIjz_OfOgrA6lK5zdcgeJVDAg5yFIyreg8uQb9ogIbV0Az6ef8VgjYKmG/s1600/HTML-GAMBAR-SEMPLE.png"/></a>
Hasil =

Menggabung kan semua atribut dan printah HTML (100px X 100px +  Title&alt + Link)

Code/Kode

<a href="http://www.rumusblogger.com/" title="gambar gunung" alt="gambar gunung"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cMulC9WP31PgNjj2gj5bTshqh7k2vdLJhCu0L4l7s9RDCh2rhKsExxg_YAt3TpEbtS5DmFuc7MgndEvCGyBbIjz_OfOgrA6lK5zdcgeJVDAg5yFIyreg8uQb9ogIbV0Az6ef8VgjYKmG/s1600/HTML-GAMBAR-SEMPLE.png" height="100" width="100" /></a>

Warna merah : Link web nya
warna ungu : pesan gambar nya
warna hijau : deskripsi gambar nya
warna biru : link gambar nya
warna kuning : ukuran gambar nya

Hasil nya ini:

OK selamat mencoba Merubah ukuran gambar dan memasang link atribut dengan HTML
Silakan copy kode/code nya

Posted by Nabil

Tweet