Setelah mengunggah atau meng-upload gambar, kita harus melakukan beberapa perubahan atau pengeditan kode yang membungkus gambar tersebut.
Cara optimasi gambar posting agar valid HTML5
Pengaturan awal gambar
Klik gambar, maka akan muncul kotak dialog berwarna biru (perhatikan kotak berwarna hijau pada gambar).
Klik Original Size, untuk memilih ukuran gambar berdasarkan ukuran orisinal gambar yang kita unggah.
Klik Properties, maka akan muncul kotak dialog Image Properties, isi kedua kolom yang ada, yaitu: title dan alt text.
Edit kode gambar dan pembungkusnya
Klik tab HTML, perhatikan kotak bergaris merah di gambar pertama post ini.
Kemudian hapus beberapa kode yang mirip dengan kode-kode berwarna merah di bawah ini:
Contoh kode gambar posting pertama
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJ7TJLHjyVeoNKdogsnnZv_M4dFwN9lIesCwaMNx68ZfnN8hbyvilmcVw1khwGXU3HfGDLqEmXnmPwJV5z19ZY4IzgBaInqrCYva6ye7qaO6OKcOxdCzYBQtkILvdWkIFoJJxsNZvixbf/s1600/opowg2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="gambar valid html5" border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJ7TJLHjyVeoNKdogsnnZv_M4dFwN9lIesCwaMNx68ZfnN8hbyvilmcVw1khwGXU3HfGDLqEmXnmPwJV5z19ZY4IzgBaInqrCYva6ye7qaO6OKcOxdCzYBQtkILvdWkIFoJJxsNZvixbf/s320/opowg2.png" title="gambar valid html5" width="320" /></a></div>
Contoh kode gambar posting kedua
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJ7TJLHjyVeoNKdogsnnZv_M4dFwN9lIesCwaMNx68ZfnN8hbyvilmcVw1khwGXU3HfGDLqEmXnmPwJV5z19ZY4IzgBaInqrCYva6ye7qaO6OKcOxdCzYBQtkILvdWkIFoJJxsNZvixbf/s1600/opowg2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="gambar valid html5" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJ7TJLHjyVeoNKdogsnnZv_M4dFwN9lIesCwaMNx68ZfnN8hbyvilmcVw1khwGXU3HfGDLqEmXnmPwJV5z19ZY4IzgBaInqrCYva6ye7qaO6OKcOxdCzYBQtkILvdWkIFoJJxsNZvixbf/s1600/opowg2.png" title="gambar valid html5" /></a></div>
Contoh kode gambar posting VALID HTML5
<div class="separator">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJ7TJLHjyVeoNKdogsnnZv_M4dFwN9lIesCwaMNx68ZfnN8hbyvilmcVw1khwGXU3HfGDLqEmXnmPwJV5z19ZY4IzgBaInqrCYva6ye7qaO6OKcOxdCzYBQtkILvdWkIFoJJxsNZvixbf/s1600/opowg2.png"><img alt="gambar valid html5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhJ7TJLHjyVeoNKdogsnnZv_M4dFwN9lIesCwaMNx68ZfnN8hbyvilmcVw1khwGXU3HfGDLqEmXnmPwJV5z19ZY4IzgBaInqrCYva6ye7qaO6OKcOxdCzYBQtkILvdWkIFoJJxsNZvixbf/s1600/opowg2.png" title="gambar valid html5" /></a></div>
No comments