Posisi Anda
Home > Teknologi > Memahami Fungsi Div Dan Stylenya Pada HTML Atau PHP

Memahami Fungsi Div Dan Stylenya Pada HTML Atau PHP

menggabungkan css dan php

fungsi div dalam phpDiv bisa dikatakan sebagai kontainer untuk kode HTML apa saja yang ingin anda tampilkan di dalamnya. HTML Div bisa anda gunakan untuk melakukan sedikit modifikasi pada tampilan blog anda. Pengetahuan ini benar-benar standar saja bagi blogger, tapi mungkin beberapa blogger pemula belum mengetahui HTML yang sangat dasar ini. Jadi tidak apa-apa kita bahas sedikit.

Bentuk dasar HTML div adalah seperti di bawah ini

<div>
ISI DARI DIV HTML TAG
</div>

Jika anda membentuknya seperti ini, maka isinya akan standar saja, ukurannya akan mengikuti isi yang ada di dalamnya. Lihat contoh yang ada di bawah ini:

ISI DARI DIV HTML TAG

Benar-benar standar saja tampilannya. Jadi ada baiknya anda juga mengenal perintah style untuk memberi variasi pada tag ini. Jadi mari kita masukkan satu persatu element style untuk melihat perubahan-perubahan yang akan terjadi:

Style background
Style background ini anda gunakan untuk memberikan warna latar apa saja yang anda inginkan ke dalam tag HTML div. Cara menggunakannya sangat mudah cukup tambahkan kode berikut ke dalam kode awal tadi. Lihat contoh berikut ini:

<div style=”background: #9fc5e8″>
ISI DARI DIV HTML TAG
</div>

Kode #9fc5e8 yang anda lihat di atas adalah kode warna yang saya inginkan, yaitu biru muda. Anda bisa mengganti kode #9fc5e8 dengan kode warna apa saja yang anda mau. Jika menginginkan warna lain coba lihat daftar warna HTML hexadecimal di http://www.w3schools.com/tags/ref_colorpicker.asp
Jadi setelah diberi kode warna, maka tampilannya seperti di bawah ini:
ISI DARI DIV HTML TAG

Style Font Color
Mungkin anda kurang nyaman dengan tampilan ini dan ingin memberi warna pada tulisan di dalamnya. Untuk itu anda bisa memakai perintah color:kode warna di dalam style. Tapi sebelumnya tutup dulu kode background tadi dengan titik koma (;). Lihat contoh di bawah:

<div style=”background: #9fc5e8; color:#0000cc”>
ISI DARI DIV HTML TAG
</div>
Kode warna #0000CC bisa anda ganti menurut kode yang ada pada website di atas tadi. Tapi kita lihat dulu hasil edit style pada kode HTML div kita ini.
ISI DARI DIV HTML TAG

Style Padding
Mungkin anda menginginkan agar tulisan tidak terlalu menempel pada dinding kontainernya. Anda bisa menggunakan kode style padding untuk itu: Kodenya adalah padding: atas kanan bawah kiri. Sebagai contoh lihat pengaturan tambahan di bawah, tapi sebelumnya kita tutup dulu kode color tadi dengan tanda titik koma (;).

<div style=”background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px “>
ISI DARI DIV HTML TAG
</div>

Dari pengaturan di atas anda ingin menaruh “ganjalan” setebal 10px di atas, 20px di kanan, 30px di bawah, dan 25px di kiri. Tampilannya akan berbentuk seperti ini:

ISI DARI DIV HTML TAG

Style Text Align
Mungkin sekarang anda ingin mengatur agar tulisan di dalam div rata kiri, rata kanan, sama rata, atau di tengah? Untuk itu anda bisa mengguakan kode text-align:value. Nilai value bisa anda ganti dengan left, right, justify, atau center. Dalam kasus ini saya akan menggunakan nilai center saja… Tapi ingat, ditutup lagi kode sebelumnya dengan tanda penutup ;

<div style=”background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center “>
ISI DARI DIV HTML TAG
</div>

Sekarang mari kita lihat hasilnya…
ISI DARI DIV HTML TAG

Style Font Family
Kalau anda ingin mengubah bentuk font, maka kode font-family: Nama Font harus anda tambahkan ke dalam kode ini. Adapun nama font yang bisa anda gunakan hanya yang disediakan oleh blogger seperti Arial, Courier New, Impact; Times New Roman, Verdana, Georgia, dan lain-lain. Ok, ekali lagi anda harus menutup style sebelumnya dengan penutup ; sebelum menambahkan style ini.

<div style=”background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact”>
ISI DARI DIV HTML TAG
</div>

Hasilnya bisa anda lihat di bawah ini.
ISI DARI DIV HTML TAG

Style Font Size
Kalau anda merasa perlu memperbesar hurufnya, maka tinggal tambahkan saja kode font-size: ukuran yang anda inginkan. Ukuran bisa dalam px atau pt. Tapi kali ini saya akan menggunakan satuan pixel (px). Lihat contoh di bawah.
<div style=”background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px”>
ISI DARI DIV HTML TAG
</div>

Baca Juga :   Teknologi Baru Robot Canggih Mirip Artis Hollywood, Cantik Banget!

Hasilnya akan terlihat seperti di bawah ini.
ISI DARI DIV HTML TAG

Style Width
Mungkin anda tidak suka jika ukuran div ini terlalu penuh. Anda bisa mengatur ukurannya dengan menambahkan atribut width: ukuran. Satuannya bisa dalam pixel(px) ataupun persen(%). Kali ini saya akan memakai pixel saja.

<div style=”background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px”>
ISI DARI DIV HTML TAG
</div>

Hasilnya seperti ini:
ISI DARI DIV HTML TAG

Ada juga HTML style height, tapi sama saja pemakaiannya dengan width, jadi terserah jika anda mau memasukkan atau tidak. Jika anda memasukkan, maka tingginya akan menjadi terbatas. Saya tidak akan membahas style ini di sini.

Center Div
Jika anda ingin div anda berada di tengah-tengah kolom, maka anda bisa mengapitnya dalam kode <center></center>. Seperti berikut ini:
<center>
<div style=”background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px”>
ISI DARI DIV HTML TAG
</div>
</center>

Hasilnya akan terlihat seperti berikut:
ISI DARI DIV HTML TAG

Style Border
Apakah anda ingin memberi garis pembatas pada kode ini? Jika ya maka anda perlu menambahkan kode border: [tebal] [gaya] [warna]. Tebal bisa anda isi dengan angka berapa saja dalam satuan px. Gaya anda bisa isi dengan solid, outset, dotted, dashed, double, dan lain-lain. Sedangkan warna bisa anda isi dengan kode warna dari situs di atas. Coba jika kita tambahkan kode seperti berikut ini:

<center>
<div style=”background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6″>
ISI DARI DIV HTML TAG
</div>
</center>

Maka hasilnya akan terlihat seperti berikut ini:
ISI DARI DIV HTML TAG

Style Border Radius
Mungkin rekan blogger suka model kapsul dan tidak ingin kotaknya bersudut tajam seperti di atas. Anda bisa menambahkan kode border-radius: value, di mana nilai value ini bisa diganti angka dalam satuan pixel. Angka ini menjadi perwakilan jari-jari radius yang anda inginkan. Supaya tidak bingung lihat contoh di bawah saja.
<center>
<div style=”background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px”>
ISI DARI DIV HTML TAG
</div>
</center>

Hasilnya akan terlihat seperti di bawah ini:
ISI DARI DIV HTML TAG

Div dengan Bayangan
Kalau anda ingin menambahkan bayangan, maka kode yang perlu anda tambahkan adalah:
-moz-box-shadow: 2px 2px 5px 4px #999; -webkit-box-shadow: 2px 2px 5px 4px #999; box-shadow: 2px 2px 5px 4px #999;
Silahkan mengubah nilai kode-kode di atas sesuka anda untuk bereksperimen. Lalu masukkan ke dalam kode di atas. Hasilnya seperti contoh di bawah ini:
<center>
<div style=”background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; font-family: impact; font-size: 30px; width: 400px; border: 4px outset #3d85c6; border-radius:15px; -moz-box-shadow: 0px 0px 5px 4px #6fa8dc; -webkit-box-shadow: 0px 0px 5px 4px #6fa8dc; box-shadow: 0px 0px 5px 4px #6fa8dc”>
ISI DARI DIV HTML TAG
</div>
</center>

Hasilnya akan terlihat seperti berikut ini:
ISI DARI DIV HTML TAG

Ok, itu saja dulu. Silahkan berekperimen sendiri. Jika ada satu atau dua atribut di atas yang kalian hilangkan, maka efeknya juga akan hilang. Sebagai catatan ini bisa anda lakukan saat membuat artikel atau hendak memasukkan widget HTML/JAVASCRIPT. Mudah-mudahan ini bisa membantu anda.

Memahami Fungsi Div Dan Stylenya Pada HTML Atau PHP was last modified: April 6th, 2016 by admin

Pengunjung Lain Juga Membaca Ini :

Teknik Budidaya Tanaman Kenaf Di Lahan Gambut Lahan gambut tergolong lahan bermasalah, karena mempunyai sifat-sifat antara lain: ketebalan gambut yang cepat menyusut, daya tahan rendah, sifat mengerut yang sulit kembali yang mengakibatkan daya re...
Penemuan Teknologi Terbaru, Alat Penambal Ban Anak SMK Indonesia Teknologi - Penemuan bidang teknologi terbaru terus bermunculan seiring dengan perkembangan pemikiran manusia yang cenderung akan pola hidup yang praktis, simpel, cepat, mudah dan murah. Salah satu pe...
Ini Dia Aplikasi Kamera Android yang punya Fitur Sama dengan DLSR Teknologi, pedekik.com - Banyak sekali aplikasi kamera android yang saat ini tersedia sebagai pelengkap smartphone anda. Bahkan ada yang fiturnya menyamai kamera DLSR sekelas Nikon atau Canon. Bagi...
Mengenal Tanaman Kenaf Dan Prospeknya Kenaf merupakan salah satu tanaman semusim penghasil serat selain tanaman sejenis lainnya seperti rami, rosella, dan yute. Serat yang dihasilkan merupakan serat alam yang ramah lingkungan. Serat kenaf...
Agar Selamat dari Hacker, Terapkan Cara ini di Gadget Anda Teknologi, Pedekik.com - Penggunaan gadget sekarang sudah menjadi keharusan. Karena memang pekembangan zaman sudah semakin maju. Selain itu gadget atau perangkat seperti laptop, handphone dan lainnya ...
Ingin Mengetahui Berita Hoax? Deteksi Menggunakan Facebook Facebook, Pedekik.com - Anda pasti sudah sering mendengar istilah berita hoax di internet. Tidak tahu persis dari mana istilah itu muncul. Namun saat ini berita hoax memang sudah kelewat batas. Bahkan...
Teknologi Terbaru Firmware PS4 Versi 3.50 Telah dirilis Dengan Berbaga... Teknologi - Teknologi terbaru Software PS4 yang sudah dirilis beberapa waktu lalu kini mulai di uji cobakan kepada para gamer. Ada beberapa fitur-fitur tambahan yang akan memanjakan maniac game. Pa...
Indonesia Jadi Sasaran Besar Ahli Cyber Crime China Teknologi - Baru-baru ini sebuah perusahaan keamanan dan perlindungan data asal California Amerika menginformasikan bahwa Indonesia jadi sasaran besar para cyber crime china. Perusahaan bernama Fir...

Leave a Reply

Top