Mengenal
Kode HTML Dasar Div - Style
Bloggerkotasukabumi - HTML adalah singkatan dari Hyper Text Markup Language adalah salah satu bahasa yang umum dan paling sederhana untuk menulis di web. Sama halnya dengan manusia yang mempunyai bahasa tersendiri dan bicaranya pun berbeda begitu pun dengan internet yang mempunyai bahasa sendiri. Dengan bantuan bahasa HTML kita bisa melakukan aktivitas di internet seperti halnya upload data di internet sesuai yang kita inginkan.
Ada seorang webmaster yang bilang bahwa untuk mempelajari HTML tidaklah sulit jika dipelajari dengan sungguh-sungguh karena HTML adalah paduan ilmu dan seni dimana di dalamnya terkandung nilai estetika dan ilmu desain web yang memerlukan penguasaan bahasa mesin yang nantinya dapat diterjemahkan oleh browser. Bahasa HTML adalah salah satu bahasa komputer yang paling dasar. HTML adalah file teks atau file ASCII yang berisi perintah dengan script kepada wen browser agar menampilkan suatu tampilan grafis dari sebuah halaman di web.
Dalam file HTML terdiri dari beberapa tag HTML atau kode-kode HTML yang dimengerti oleh web browser agar dapat menampilkannya pada halaman-halaman web. File HTML dapat di buat melalui aplikasi text editor apapun di setiap operasi apa saja, antara lain : notepad di window, emasc atau vi di unix atau simple text di macintosh dan juga telah banyak tersedia aplikasi instant HTML editor. File HTML juga bisa di buat di MS.Word asal penyimpanannya melalui save as format plain text.
Salah satu kelebihan file HTML adalah cross platform maksudnya file HTML dapat di buka atau di tampilkan di beberapa sistem operasi yang berbeda dan tampilan yang persis sama meskipun saat pembuatan dan pengeditannya menggunakan operating sistem yang berbeda.
Kembali ke pokok bahasan tadi kode HTML dasar div 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.computerhope.com/htmcolor.htm.
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>
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
Keterangan : Apabila anda akan melakukan eksperimen disarankan untuk tidak menghilangkan atribut apabila ada salah satu atau dua atribut yang dihilangkan maka otomatis efeknya juga akan turut hilang.
Demikian ulasan tentang
mengenal kode HTML Dasar Div -Style, selamat mencoba dan semoga bermanfaat.
happy blogging..............................
.Kondisi seperti itu pernah saya alami pertama kali mengenal yang namanya blogging, sebenarnya banyak cara untuk mengatasi hal ini. Salah satunya adalah blog harus terisi dengan artikel-artikel atau content yang barang tentu berkualitas dan banyak bermanfaat bagi pengunjung. 
...). Langkah lain yang harus dilakukan antara lain :
)
