Cara mengatur gambar di html

Menata gambar dalam sebuah postingan memang menjadi kebutuhan vital yang harus ditangani dengan baik oleh para blogger yang serius

Menata gambar dalam sebuah postingan memang menjadi kebutuhan vital yang harus digarap dengan baik oleh para blogger yang tulus ingin memberikan sajian terbaik dari sebuah postingan. Tampilan yang rapi pasti akan memberikan kepuasan batin tidak hanya bagi pemilik blog, namun juga memberikan kenyamanan bagi pembaca blog untuk menikmati semua postingan yang telah dibuat dengan kerja keras yang tidak hanya melelahkan secara fisik, namun sekaligus membuat pikiran kadang terasa seperti tidak ada tulangnya. (Hai. hai. apakah benar ada otak tulang?. Otak DinoPatiSaurus kali ya?. ). Hah. Hah. rajin, cerdas, hemat, kaya, rapi dan teliti bukan hanya milik anak TK, tapi juga milik ABRI (Blog Asyik Rajin dan Cantik)

Menyusun beberapa gambar dalam sebuah postingan memang berbeda dengan ketika kita hanya menampilkan satu gambar/gambar. Untuk satu gambar kita taruh saja di pojok kiri (float. kiri;) atau di pojok kanan (float. benar;), lalu semuanya selesai dan postingan mengalir seperti orang gila. Terburu-buru dan suka menyapu orang sekaligus menyebabkan banjir. Ya benar?. Hai. hai. Ada cara yang cukup sederhana untuk membuat susunan gambar berjejer dengan arah horizontal dengan tampilan yang rapi. Satu hal yang perlu dipahami adalah mengetahui penggunaan margin dan fungsi float. Sederhananya, margin adalah jarak antara satu field dengan field lainnya dalam sebuah web/blog, sedangkan float berfungsi untuk mengatur posisi image atau tag (DIV, p dll) agar berada di kanan, kiri, bukan kanan. dan/atau kiri dan sekaligus float mampu membuat tag secara otomatis memiliki area seluas konten yang terkandung di dalamnya. Properti seperti ini sangat diperlukan agar materi (gambar atau tag lainnya) dapat tersusun dalam barisan horizontal secara otomatis. Penggunaan pelampung menguntungkan karena membuat lebar atau tinggi terkadang tidak perlu ditambahkan

Untuk mengembangkan sebuah desain yang lebih bernilai tentunya bukan hanya margin dan float saja yang harus dipahami dari segi fungsi dan kegunaannya. Kode-kode CSS lainnya seperti border, padding, background dan beberapa lainnya akan memberikan banyak dukungan hingga dihasilkan tampilan yang lebih cantik dan menarik. Ini sebenarnya tidak terlalu sulit untuk dilakukan, namun yang utama adalah kesabaran dan semangat serta kemauan yang kuat untuk mencoba memahami satu per satu setiap fungsi dan penggunaan kode HTML. Salah satu fasilitas (software) yang paling dibutuhkan untuk mempermudah pemahaman kode HTML adalah dengan menggunakan software Dreamweaver atau yang sekarang lebih dikenal dengan Adobe Dreamweaver CS5 . Coba cari software ini supaya lebih mudah dan cepat belajar kode CSS, xHTML, javascript atau PHP.

Sebagai langkah awal untuk memahami susunan gambar dalam sebuah postingan, ada baiknya anda juga membuka postingan di blog ini yang membahas tentang penggunaan margin untuk menyusun gambar yang terdapat pada

Pembedahan Posting gambar dan foto;

D E M O

Melalui Jalan Pertama

<div style="width: 440px;float: left;margin: 10px;padding: 10px 0px 0px 10px;border: 2px solid #000;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;background: #996600;background: -moz-linear-gradient(top, #996600, #99CCFF);background: -webkit-gradient(linear, 0% top, 100% bottom, from(#996600), to(#99CCFF));">
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYTvkSmS8I/AAAAAAAAAoU/zWFh8hb2jSc/s320/gbr1.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTw-AvaPI/AAAAAAAAAos/vsLbByZomPs/s320/gbr9.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYULupTjpI/AAAAAAAAAo0/aWeSUN-9atM/s320/gbr13.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width:78px;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTwmapIqI/AAAAAAAAAok/7IbqpBp5Kw4/s320/gbr6.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 115px;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYTwHFWOlI/AAAAAAAAAoc/mCFSJ2iO9a4/s320/gbr3.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://3.bp.blogspot.com/_550XeJhg_o8/TJYUM3o_0MI/AAAAAAAAApE/kTJ6o6TYdfs/s320/gbr11.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 170px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYV8bG09dI/AAAAAAAAApU/_TxLTyu-tAI/s320/gbr10.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://4.bp.blogspot.com/_550XeJhg_o8/TJYTUghFzSI/AAAAAAAAAoE/bPhfIRgdY64/s320/gbr114.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYUMVuEvAI/AAAAAAAAAo8/x9-6Q3npJQ4/s320/gbr7.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: auto;" src="http://1.bp.blogspot.com/_550XeJhg_o8/TJYUmK50DfI/AAAAAAAAApM/Exm6RGzhT0o/s320/gbr4.jpg" />
<img style="float:left; margin: 0px 10px 10px 0px; height: 100px; width: 98px;" src="http://2.bp.blogspot.com/_550XeJhg_o8/TJYTvOwhFJI/AAAAAAAAAoM/G4nsncp6c0w/s320/gbr2.jpg" />
</div>

Seperti biasa agar tidak ada perubahan desain atau denah galeri gambar maka pada saat posting semua kode harus dibuat close form agar kode di atas berubah menjadi seperti di bawah ini

Tag HTML IMG memiliki atribut apa saja?

Mengapa gambar tidak bisa muncul di HTML?

Apa HTML yang benar untuk menyisipkan gambar latar belakang?