Dasar Div HTML Tag

Dasar Div HTML tag

Pengertian Singkat Div
Div adalah singkatan dari kata division dan sering di gunakan pada saat memodifikasi sebuah blog. Div adalah HTML dasar yang dapat membantu untuk mengatur tampilan apa saja yang ingin ditampilkan

Bentuk-bentuk HTML Div
-Bentuk dasar div

<div>
ISI DIV HTML TAG
</div>

Jika bentuknya seperti diatas maka akan mengikuti isi dari dalam code dan hasilnya akan benar-benar standar. Anda dapat melihat hasilnya seperti berikut:

ISI DIV HTML TAG

Dengan melihat hasilnya Anda mungkin sudah paham.

-Style Background
Style background dalam bahasa Indonesia yaitu tampilan latar. Dengan style background kita dapat mengatur tampilan/warna latar isi dari div html tag. Cara menggunakannya lumayan mudah cukup tambahkan kode berikut ke dalam kode <div> seperti berikut:

<div style="background: #310BEF">
ISI DIV HTML TAG
</div>

Kode #310BEF yang berwarna biru adalah kode warna untuk latar isi div tag. Anda juga dapat mengganti dengan kode warna yang Anda inginkan, untuk menemukan code warna pilihan cukup mengunjungi tautan berikut "Cara Mengetahui Code HTML Warna". Dan Anda dapat melihat hasilnya seperti berikut:

ISI DIV HTML TAG

-Style Font Color
Mungkin tampilan sebelumnya tidak menyesuaikan warna font/tulisan dengan background. Nah dengan style font color kita dapat mengganti warna dari font "ISI DIV HTML TAG". Berikut contoh code style font color:

<div style="background: #310BEF; color:#FF0000">
ISI DIV HTML TAG
</div>

Untuk menggunakan/mengaktivkan style font color anda dapat menambahkan code "color:#FF0000" setelah code sebelumnya dan jangan lupa menutup code sebelumnya dengan tanda " ; " seperti diatas. #FF0000 adalah warna merah dan dapat menggantinya dengan kode warna yang sesuai keinginan Anda dan berikut contoh hasilnya:

ISI DIV HTML TAG

-Style Padding
Style Padding berguna untuk memberikan jarak antara teks/isi dengan kontainernya. Contoh kode padding "padding: atas kanan bawah kiri". Untuk melihat contohnya Anda melihat kode berikut:

<div style="background: #310BEF; color:#FF0000; padding: 40px 30px 20px 10px ">
ISI DIV HTML TAG
</div>

Contoh di atas memberikan jarak setebal 40px ke atas, 30px ke kanan, 20px ke bawah, dan 10px ke kiri dan ingat setiap menambahkan kode harus menutup dengan dengan tanda " ; ". Dan akan menghasilkan seperti tampilan berikut:

ISI DIV HTML TAG

-Style Text Align
Style Text Align berfungs untuk mengatur posisi isi dari div html tag dan untuk menggunakannya kita dapat menggunakan kode text-align:value. Value dapat kita ganti denga, justify, center, left, dan right. Di kode berikut saya akan menggunakan center dan contoh kodenya sebagai berikut:

<div style="background: #310BEF; color:#FF0000; padding: 40px 30px 20px 10px; text-align: center ">
ISI DIV HTML TAG
</div>

Dan hasilnya akan menampilkan sebagai berikut...

ISI DIV HTML TAG

-Style Font Family
Jika Anda berniat untuk mengganti bentuk font, Anda dapat menggunakan efek dari style font family dengan kode "font-family: Nama Font". Nama Font Anda dapat gantikan dengan Arial, Courier New, Impact; Times New Roman, Verdana, Georgia, dan lain-lain. Untuk memperingati saja, ingat menutup kode sebelumnya dengan tanda " ; ". Berikut contohnya:

<div style="background: #310BEF; color:#FF0000; padding: 40px 30px 20px 10px; text-align: center; font-family: impact">
ISI DIV HTML TAG
</div>

Hasilnya akan seperti berikut...

ISI DIV HTML TAG

-Style Font Size
Jika Anda merasa ingin mempersbesar isi text makan anda dapat menggunakan kode font-size: ukuran yang Anda inginkan. Ukuran dapat menggunakan px ataupun %. Tapi kali ini saya akan menggunakan px dan berikut contohnya:

<div style="background: #310BEF; color:#FF0000; padding: 40px 30px 20px 10px; text-align: center; font-family: impact; font-size: 40px">
ISI DIV HTML TAG
</div>

Dan hasilnya akan seperti berikut...

ISI DIV HTML TAG

-Style Width
Style width dapat membantu untuk mengatur ukutan div dan membutuhkan code width: ukuran. Seperti pembelajaran sebelumnya ukuran dapat menggunakan px atau %. Dan kali ini saya akan menggunakan px saja dan berikut contohnya:

<div style="background: #310BEF; color:#FF0000; padding: 40px 30px 20px 10px; text-align: center; font-family: impact; font-size: 40px; width: 380px">
ISI DIV HTML TAG
</div>

Dan hasilnya akan seperti ini...

ISI DIV HTML TAG

-Center Div
Mungkin Anda tidak suka posisi yang berada di sebelah kiri. Nah Center Div berguna untuk memindahkan posisi Div ke tengah dan cara menempatan kodenya juga berbedah dengan kode sebelumnya, berikut contohnya:

<center>
<div style="background: #310BEF; color:#FF0000; padding: 40px 30px 20px 10px; text-align: center; font-family: impact; font-size: 40px; width: 380px">
ISI DARI DIV HTML TAG
</div>
</center>

Hasilnya...

ISI DIV HTML TAG

-Style Border
Style Border berguna untuk menambahkan garis pembatas pada koed div. Anda dapat menggunakan code border: [tebal] [gaya] [warna]. Ukuran untuk ketebalannya anda dapat menggunakan px, gaya dapat di ganti dengan solid, outset, dotted, dashed, double, dan lain-lain, dan kode warna dapat didapatkan di link sebelumnya yang sudah di beritahukan. Berikut contoh:

<center>
<div style="background: #310BEF; color:#FF0000; padding: 40px 30px 20px 10px; text-align: center; font-family: impact; font-size: 40px; width: 380px; border: 5px outset #FF0000">
ISI DIV HTML TAG
</div>
</center>

Dan Anda akan mendapatkan hasil seperti berikut...

ISI DIV HTML TAG

-Style Border Radius
Mungkin Anda tidak suka dengan lekungan sudut yang begitu tajam?  manfaat dari Style Border Radiuslah yang dapat membantu permasalahan ini dengan menggunakan kode border-radius: value. Value dapat di ganti dengan angka beserta kode px yang dapat mengatur jari-jari dari sebuah sudut. Contoh:


<center>
<div style="background: #310BEF; color:#FF0000; padding: 40px 30px 20px 10px; text-align: center; font-family: impact; font-size: 40px; width: 380px; border: 5px outset #FF0000; border-radius:20px">
ISI DIV HTML TAG
</div>

Hasil dari kode tersebut...

ISI DIV HTML TAG

-Div dengan Bayangan
Div dengan bayangan atau biasa disebut dengan div dengan shadow. Div juga dapat ditambahkan sebuah bayangan untuk mempercantik tampilan dengan kode -moz-box-shadow: 2px 2px 5px 4px #999; -webkit-box-shadow: 2px 2px 5px 4px #999; box-shadow: 2px 2px 5px 4px #999;. Pengaturan kode di bayangan ini Anda dapat mengatur sendiri dan selamat berekspirimen. Berikut contoh untuk meletakkan kode bayangan:

<center>
<div style="background: #310BEF; color:#FF0000; padding: 40px 30px 20px 10px; text-align: center; font-family: impact; font-size: 40px; width: 380px; border: 4px outset #FF0000; border-radius:20px; -moz-box-shadow: 0px 0px 5px 4px #FF0000; -webkit-box-shadow: 0px 0px 5px 4px #FF0000; box-shadow: 0px 0px 5px 4px #6fa8dc">
ISI DIV HTML TAG 
</div> 
 </center> 

Dan hasilnya seperti berikut...

ISI DIV HTML TAG

Sekian pembelajaran tentang Dasar DIV HTML TAG dan semoga artikel ini dapat membantu Anda dalam memperbaiki tampilan website maupun blog.

4 Responses to "Dasar Div HTML Tag"