Kali ini saya akan membahas tentang masalah posisi pada HTML, sekedar untuk menabah sedikit pengetahuan saja. Pengalaman ini juga saya dapat ketika ingin mengedit tampilan blog ini. Poisitioning in HTML yang saya ketahui terdiri dari tiga bentuk, yaitu:
1. Position fixed
2. Position Absolute
3. Position Relative
Position Fixed
Postition fixed dalam HTML artinya posisi gambar yang ingin kita tempatkan di dalam sebuah website atau blog sudah fix, atau dengan kata lain posisinya di situ situ aja XD untuk mengatur di bagian mana kita ingin menempatkan gambar kita bisa merubah pixelnya. Gambar di bawah ini merupakan codingan HTML untuk gambar kelinci atau rabbit yang ada di blog saya. Untuk mengubah tata letak si kelinci tersebut tinggal ubah angka yang ada di top dan right.
Untuk mengubah atau mengatur pixel dari gambar kita bisa mengira-ngira berapa pixel dari atas dan dari kanan sehingga gambar yang kita masukkan akan berada di posisi yang tepat. Namun akan memerlukan waktu yang lama apabila kita hanya asal mengira-ngira dan mengubah angka pixel secara asal. Oleh karena itu berikut ini akan di jelaskan logika secara simpelnya mengenai pixel dalam sebuah HTML.
Gambar di atas merupakan gambaran sederhana untuk memperkuat logika kita dalam penentuan posisi di HTML. Pada gambar tersebut juga telah di cantumkan perkiraan pixel untuk penempatan suatu gambar atau yang lainnya. Di gambar tersebut di jelaskan bahwa posisi pixel untuk top: 100px dan right: 200px letakknya akan berada pada titik biru di gambar. Jadi mulai dari angka 50px sampai 250px yang berada di sebelah kiri merupakan aturan angka untuk menempatkan dimana gambar dari posisi atas. Sedangkan dari angka 50px sampai 500px merupakan aturan angka untuk menempatkan dimana gambar dari posisi kanan. Untuk lebih jelasnya bisa anda coba sendiri dengan mengotak-atik codingan HTML yang ada pada gambar sebelumnya.
Untuk posisi fixed, gambar yang kita tempatkan akan mengikuti apabila kita menscroll halaman ke bawah. Gambar tersebut akan mengikuti. Untuk lebih jelasnya silahkan coba scroll halaman ke bawah pada blog ini, maka si kelinci akan mengikuti.
Untuk mengedit codingan, bisa langsung kita klik tombol setting yang ada di blog kita.
Position Absolute
Untuk postion absolute pada HTML, cara mengatur posisi gambar sama seperti position fixed. Tetapi perbedaannya terletak pada saat kita menscroll halaman. Untuk postion absolute gambar yang kita letakkan di pixel yang sudah kita tentukan akan tetap diam di situ, tidak mengikuti seperti pengaturan position fixed. Karena pengaturannya absolute, jadi posisi si gambar sudah absolute atau menetap pada pixel yang kita tentukan.
Gambar di bawah ini merupakan screen shoot codingan HTML-nya:
Berikut ini merupakan tampilan awal blog sebelum di scroll ke bawah:
Setelah di scroll ke bawah, maka si rabbit akan tetap di posisi pixel yang kita tentukan, alias tidak mengikuti.
R dalam gambar di bawah merupakan si rabbit.
Position Relative
Untuk position Relative, penempatan gambarnya berbeda dengan position fixed dan absolute. Untuk position relative, tampilan gambarnya akan terlihat seperti pada gambar di bawah ini:
Meskipun kita merubah angka pixel dalam codingannya, tetap saja si rabbit akan terletak di situ. Tapi jika kita merubah height dan weightnya baru akan berpengaruh, gambarnya akan semakin besar atau semakin kecil. Namun untuk posisi pikel dalam pengaturan position relative tidak begitu berpengaruh terhadap letak gambarnya.
Gambar codingan untuk position relative
Sekian pembahasan mengenai positioning in HTML xD semoga bermanfaat ilmunya meskipun pembahasannya sangat kurang dan bahasanya agak amburadul LOL
~Have a Nice Day ^_^
1. Position fixed
2. Position Absolute
3. Position Relative
Position Fixed
Postition fixed dalam HTML artinya posisi gambar yang ingin kita tempatkan di dalam sebuah website atau blog sudah fix, atau dengan kata lain posisinya di situ situ aja XD untuk mengatur di bagian mana kita ingin menempatkan gambar kita bisa merubah pixelnya. Gambar di bawah ini merupakan codingan HTML untuk gambar kelinci atau rabbit yang ada di blog saya. Untuk mengubah tata letak si kelinci tersebut tinggal ubah angka yang ada di top dan right.
Untuk mengubah atau mengatur pixel dari gambar kita bisa mengira-ngira berapa pixel dari atas dan dari kanan sehingga gambar yang kita masukkan akan berada di posisi yang tepat. Namun akan memerlukan waktu yang lama apabila kita hanya asal mengira-ngira dan mengubah angka pixel secara asal. Oleh karena itu berikut ini akan di jelaskan logika secara simpelnya mengenai pixel dalam sebuah HTML.
Gambar di atas merupakan gambaran sederhana untuk memperkuat logika kita dalam penentuan posisi di HTML. Pada gambar tersebut juga telah di cantumkan perkiraan pixel untuk penempatan suatu gambar atau yang lainnya. Di gambar tersebut di jelaskan bahwa posisi pixel untuk top: 100px dan right: 200px letakknya akan berada pada titik biru di gambar. Jadi mulai dari angka 50px sampai 250px yang berada di sebelah kiri merupakan aturan angka untuk menempatkan dimana gambar dari posisi atas. Sedangkan dari angka 50px sampai 500px merupakan aturan angka untuk menempatkan dimana gambar dari posisi kanan. Untuk lebih jelasnya bisa anda coba sendiri dengan mengotak-atik codingan HTML yang ada pada gambar sebelumnya.
Untuk posisi fixed, gambar yang kita tempatkan akan mengikuti apabila kita menscroll halaman ke bawah. Gambar tersebut akan mengikuti. Untuk lebih jelasnya silahkan coba scroll halaman ke bawah pada blog ini, maka si kelinci akan mengikuti.
Untuk mengedit codingan, bisa langsung kita klik tombol setting yang ada di blog kita.
Position Absolute
Untuk postion absolute pada HTML, cara mengatur posisi gambar sama seperti position fixed. Tetapi perbedaannya terletak pada saat kita menscroll halaman. Untuk postion absolute gambar yang kita letakkan di pixel yang sudah kita tentukan akan tetap diam di situ, tidak mengikuti seperti pengaturan position fixed. Karena pengaturannya absolute, jadi posisi si gambar sudah absolute atau menetap pada pixel yang kita tentukan.
Gambar di bawah ini merupakan screen shoot codingan HTML-nya:
Berikut ini merupakan tampilan awal blog sebelum di scroll ke bawah:
Setelah di scroll ke bawah, maka si rabbit akan tetap di posisi pixel yang kita tentukan, alias tidak mengikuti.
R dalam gambar di bawah merupakan si rabbit.
Position Relative
Untuk position Relative, penempatan gambarnya berbeda dengan position fixed dan absolute. Untuk position relative, tampilan gambarnya akan terlihat seperti pada gambar di bawah ini:
Meskipun kita merubah angka pixel dalam codingannya, tetap saja si rabbit akan terletak di situ. Tapi jika kita merubah height dan weightnya baru akan berpengaruh, gambarnya akan semakin besar atau semakin kecil. Namun untuk posisi pikel dalam pengaturan position relative tidak begitu berpengaruh terhadap letak gambarnya.
Gambar codingan untuk position relative
Sekian pembahasan mengenai positioning in HTML xD semoga bermanfaat ilmunya meskipun pembahasannya sangat kurang dan bahasanya agak amburadul LOL
~Have a Nice Day ^_^
Tidak ada komentar :
Posting Komentar