tipsseo - Gambar sangat penting untuk sebuah website. Karena sebuah situs yang tidak menampilkan gambar tentunya akan nampak membosankan, dan tidak menarik. Cara memberikan gambar ke website adalah dengan memahami cara memasukan dan mengatur gambar di HTML. HTML merupakan salah satu tag yang paling banyak digunakan untuk membangun struktur website.
Sebagai developer website, Anda harus mengetahui hal ini agar bisa mengoptimasi website Anda secara optimal. Tidak ada yang sulit jika Anda mau belajar dan hanya butuh waktu saja untuk bisa mengerti bahasa HTML ini. Nah, berikut ini cara memasukkan gambar di HTML dengan mudah!
Inilah Cara Memasukan Gambar Di HTML
Agar dapat memasukan gambar di website yang Anda kelola, Anda dapat menggunakan 4 cara menampilkan gambar di HTML berikut. Simak langkah-langkahnya di bawah ini.
1. Memastikan Format Gambar Yang Akan Dimasukan Sudah Sesuai
Cara memasukan dan mengatur gambar di HTML pertama yang harus Anda lakukan adalah memastikan gambar yang akan dimasukan ke dokumen HTML telah memiliki format yang sesuai. Karena jika format gambar tidak kompatibel maka kemungkinan besar gambar akan gagal ditampilkan.
Format gambar yang dapat disematkan pada dokumen HTML adalah APNG dengan ekstensi gambar .apng. selain itu Ada juga dapat memasukkan format gambar GIF dengan ekstensi gambar .gif, JPEG dengan ekstensi gambar .jpg, .pjpeg, .jpeg,.jfif, .pjp, dan lain sebagainya.
2. Memasukan Atribut Sumber Gambar Pada Tag HTML Images
Langkah berikutnya dari cara memasukan dan mengatur gambar di HTML adalah dengan memasukan tag <img> pada dokumen HTML. Ini karena HTML tidak dapat langsung menampilkan gambar begitu saja.
HTML harus mengambil gambar dari sebuah tempat penyimpanan atau direktori seperti drive, website, dan lain sebagainya. Inilah mengapa diperlukan atribut untuk mengambil gambar tersebut agar dapat tampil di browser.
Atribut untuk mengambil gambar dari server penyimpanan disebut Src. Isi dari atribut ini dapat berupa pranala yang menuju direktori maupun nama dari file gambar. Untuk menggunakan atribut Src anda cukup memasukan tag <img src=”langit .png”>
3. Memberikan Atribut Alt Text Pada Tag HTML Images
Cara memasukan dan mengatur gambar di HTML berikutnya adalah memberikan atribut Alt text. Atribut ini berfungsi memberikan teks alternatif pada gambar. Sehingga apabila karena suatu sebab gambar gagal ditampilkan akan muncul teks alternatif yang membuat pengunjung website tetap mampu mengidentifikasi gambar. Apalagi ternyata Alt text pada gambar juga dapat memperkuat rangking website.
4. Menyematkan Keterangan Gambar
Anda dapat mencantumkan keterangan yang bisa dilihat oleh pengunjung ketika kursor mengarah ke gambar. Caranya dengan menambahkan atribut title di dalam tag <img>. Dengan atribut ini gambar akan mempunyai tooltips atau pesan yang akan muncul ketika kursor diarahkan ke objek. Disamping itu keterangan gambar ini tidak akan memakan banyak tempat sehingga halaman website tetap luas
Cara Mengatur Gambar Di HTML
Setelah anda berhasil memasukan gambar di HTML anda juga harus mengetahui cara mengatur posisi gambar di HTML. Agar gambar dapat tampil dengan menarik dan memikat sesuai dengan kebutuhan website. Simak beberapa cara untuk mengatur gambar di HTML dibawah ini.
1. Mengatur Dimensi Gambar
Untuk mengatur dimensi gambar anda harus menggunakan atribut style yang mengandung elemen width juga height. Elemen ini berfungsi memodifikasi lebar dan tinggi gambar.
2. Menambahkan Bingkai Gambar
Anda dapat membingkai atau memberi garis tepi pada gambar dengan atribut border. Anda bahkan dapat mengatur sendiri bingkai tersebut. Atribut border tersebut dapat ditulis dengan syntax: <img src=”bunga.png” border=“5”>
3. Mengatur Posisi Gambar
Agar gambar dapat berada pada posisi yang tepat tentunya anda harus mengaturnya. Caranya dengan menggunakan align. Atribut ini akan membuat gambar berada pada posisi yang anda inginkan.
Nah, itu tadi cara memasukan dan mengatur gambar di HTML. Namun perlu diingat gambar yang dimasukan tentunya harus sesuai dengan konteks konten website yang anda kelola. Hal ini dimaksudkan agar website anda bukan hanya terlihat menarik namun juga tetap informatif. Semoga bermanfaat.
Post a Comment for " Begini Cara Memasukkan Dan Mengatur Gambar di HTML"