HTML/JavaScript

Belajar HTML dasar Div dan Stylenya 2019

HTML dasar Div

Belajar HTML dasar Div -- Div mampu dikatakan menjadi kontainer buat kode HTML apa saja yang ingin anda tampilkan pada dalamnya. HTML Div sanggup anda gunakan buat melakukan sedikit modifikasi pada tampilan blog anda. Pengetahuan ini sahih-sahih baku saja bagi blogger, tapi mungkin beberapa blogger pemula belum mengetahui HTML yg sangat dasar ini. Jadi tidak apa-apa kita bahas sedikit.

Bentuk dasar HTML div adalah misalnya pada bawah ini

ISI DARI DIV HTML TAG

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

ISI DARI DIV HTML TAG

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

Style background
Style background ini anda gunakan buat memberikan warna latar apa saja yg anda inginkan ke dalam tag HTML div. Cara menggunakannya sangat gampang cukup masukkan kode berikut ke pada kode awal tadi. Lihat contoh berikut adalah:

style="background: #9fc5e8">
ISI DARI DIV HTML TAG

Kode #9fc5e8 yang anda lihat di atas adalah kode rona yg saya inginkan, yaitu biru muda. Anda bisa mengganti kode #9fc5e8 dengan kode rona apa saja yg anda mau. Jika menginginkan warna lain coba lihat daftar rona HTML hexadecimal di //www.computerhope.com/htmcolor.htm.
Jadi selesainya diberi kode warna, maka tampilannya misalnya pada bawah ini:
ISI DARI DIV HTML TAG

Style Font Color
Mungkin anda kurang nyaman dengan tampilan ini serta ingin memberi rona pada goresan pena di dalamnya. Untuk itu anda sanggup memakai perintah color:kode warna pada dalam style. Tapi sebelumnya tutup dulu kode background tadi dengan titik koma (;). Lihat model di bawah:

style="background: #9fc5e8; color:#0000cc">
ISI DARI DIV HTML TAG
Kode warna #0000CC sanggup anda ganti menurut kode yang terdapat dalam website pada 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 supaya tulisan nir terlalu menempel pada dinding kontainernya. Anda mampu menggunakan kode style padding untuk itu: Kodenya merupakan padding: atas kanan bawah kiri. Sebagai contoh lihat pengaturan tambahan di bawah, tapi sebelumnya kita tutup dulu kode color tersebut dengan indikasi titik koma (;).

style="background: #9fc5e8; color:#0000cc;padding: 10px 20px 30px 25px ">
ISI DARI DIV HTML TAG

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

ISI DARI DIV HTML TAG

Style Text Align
Mungkin kini anda ingin mengatur supaya goresan pena pada dalam div homogen kiri, rata kanan, sama rata, atau di tengah? Untuk itu anda mampu mengguakan kode text-align:value. Nilai value mampu anda ganti dengan left, right, justify, atau center. Dalam masalah ini saya akan menggunakan nilai center saja... Tapi ingat, ditutup lagi kode sebelumnya dengan indikasi epilog ;

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

Sekarang mari kita lihat hasilnya...
ISI DARI DIV HTML TAG

Style Font Family
Kalau anda ingin mengganti bentuk font, maka kode Times New Roman, Verdana, Georgia, serta lain-lain. Ok, ekali lagi anda wajib menutup style sebelumnya menggunakan epilog ; sebelum menambahkan style ini.

style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px;text-align: center;
ISI DARI DIV HTML TAG

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

Style Font Size
Kalau anda merasa perlu memperbesar hurufnya, maka tinggal masukkan saja kode font-size: ukuran yg anda inginkan. Ukuran bisa pada px atau pt. Tapi kali ini saya akan menggunakan satuan pixel (px). Lihat model pada bawah.
style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px;text-align: center; font-size: 30px">
ISI DARI DIV HTML TAG

Hasilnya akan terlihat misalnya pada bawah ini.
ISI DARI DIV HTML TAG

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

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

Hasilnya misalnya ini:
ISI DARI DIV HTML TAG

Ada jua HTML style height, tapi sama saja pemakaiannya dengan width, jadi terserah bila anda mau memasukkan atau nir. Jika anda memasukkan, maka tingginya akan menjadi terbatas. Saya nir akan membahas style ini pada sini.

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


Hasilnya akan terlihat misalnya berikut:
ISI DARI DIV HTML TAG

Style Border
Apakah anda ingin memberi garis pembatas pada kode ini? Apabila ya maka anda perlu menambahkan kode border: [tebal] [gaya] [warna]. Tebal mampu anda isi dengan nomor berapa saja pada satuan px. Gaya anda mampu isi menggunakan solid, outset, dotted, dashed, double, dan lain-lain. Sedangkan rona sanggup anda isi menggunakan kode rona berdasarkan situs pada atas. Coba jika kita masukkan kode seperti berikut ini:

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

Maka hasilnya akan terlihat misalnya berikut adalah:
ISI DARI DIV HTML TAG

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

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 membarui nilai kode-kode di atas sesuka anda buat bereksperimen. Lalu tambahkan ke pada kode pada atas. Hasilnya seperti contoh pada bawah ini:
style="background: #9fc5e8; color:#0000cc; padding: 10px 20px 30px 25px; text-align: center; 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

Hasilnya akan terlihat misalnya berikut adalah:
ISI DARI DIV HTML TAG

Ok, itu saja dulu. Silahkan berekperimen sendiri. Apabila ada satu atau 2 atribut di atas yg kalian hilangkan, maka efeknya juga akan hilang. Sebagai catatan ini bisa anda lakukan waktu menciptakan artikel atau hendak memasukkan widget HTML/JAVASCRIPT. Mudah-mudahan ini mampu membantu anda.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel