Skip to content Skip to sidebar Skip to footer

Widget HTML #1

Begini Cara Memasukkan Dan Mengatur Gambar di HTML

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!

Cara Memasukkan Dan Mengatur Gambar di HTML

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"