Sebelum saya masuk ke pembahasan utama, bagi sobat yang belum mengerti tentang Dasar HTML silahkan untuk membuka halaman direktori Belajar Dasar HTML.
Cara Menambahkan Gambar Di HTML
Di dalam HTML jika kita ingin menambahkan sebuah gambar di dokumen atau halaman html kita itu ada sebuah tag khusus, yaitu tag <img> dan atributnya yaitu atribut src.
Apa Itu Atribut src ?
Atribut src merupakan singkatan dari kata "source" jika di artikan ke indonesia adalah sumber. Jadi atribut src ini berisi sumber dari gambar tersebut yang ingin kita tambahkan atau lebih tepatnya adalah URL dari gambar tersebut.
Pada contoh kali ini sebelumnya silahkan di siapkan dulu sebuah gambar, nahh saya disini akan menggunakan sebuah gambar logo Blog Pintasku. Lalu simpanlah di dalam satu folder dengan dokumen html yang dibuat. Untuk kodenya berikut ini.
<!DOCTYPE html> <html> <head> <title>Penggunaan Tag Image</title> </head> <body> <h1>Ini Adalah Contoh Gambar</h1> <img src="Blog-pintasku.jpg" /> </body> </html>
Hasilnya :
Bagaimana Cara Mengubah Ukuran Gambar DI HTML ?
Untuk mengubah ukuran gambar di HTML kita hanya perlu menambahkan beberapa atribut lainnya yaitu atribut width dan height.
Dibawah ini adalah contoh Penggunaan Atribut Width dan Height.
<!DOCTYPE html> <html> <head> <title>Penggunaan Tag Image</title> </head> <body> <h1>Ini Adalah Contoh Gambar</h1> <img src="Blog-pintasku.jpg" height="200" width="400" /> </body> </html>
Hasilnya :
Pada Contoh di atas kita menggunakan ukuran width adalah 400px dan height 200px, jika kita tidak menambahkan salah satu atribut width atau height. browser akan secara otomatis mengatur ukuran lebar gambar tersebut sehingga menjadi gambar yang proporsional.
Pengguaan Atribut Alt
Nahh ini ada satu lagi atribut yang sangatlah penting jika menambahkan gambar di halaman web, yaitu atribut Alt. Alt merupakan sebuah singkatan dari "alternative description" Dimana Atribut Alt ini berfungsi untuk menambahkan keterangan atau deskripsi dari gambar tersebut jika pada browser tidak tampil gambar tersebut maka atribut alt ini akan memberikan sebuah keterangan pada gambar tersebut yang tidak tampil.
Berikut ini adalah contoh Penggunaan Atribut Alt.
<!DOCTYPE html> <html> <head> <title>Penggunaan Tag Image</title> </head> <body> <h1>Ini Adalah Contoh Gambar</h1> <img alt="gambar blog pintasku" src="Blog-pintasku.jpg" height="200" width="400" /> </body> </html>
Perlu diketahui penggunaan atribut alt ini sangatlah berperan penting dalam sebuah web untuk bersain dengan blog lain. Karena cara kerja mesin pencari adalah untuk membaca isi kesuluruhan tulisan yang berada pada halaman web dan tidak membaca pada gambar oleh karena itu dengan menambahkan sebuah deskripsi singkat pada sebuah gambar itu akan membuat tanda bahwa gambar yang di tambahkan itu ada di deskripsi gambar tersebut.
Nahh sekian artikel dari saya mengenai Cara Menambah Gambar Di HTML semoga tutorial ini bisa bermanfaat dan membantu untuk semuanya, terimakasih.
No comments:
Post a Comment