pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Beranda Blogging Tips Blogspot Cari Uang Di Internet Google SEO Tips Template Blog Traffic Blog Wordpress Social Media RSS

Home » blogging tips » Belajar HTML dasar Div dan Stylenya

BELAJAR HTML DASAR DIV DAN STYLENYA

Belajar HTML dasar Div -- 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

Mencari Sesuatu?

Masukkan kata kunci topik yang diinginkan. Misalnya meta

Belajar HTML dasar Div dan StylenyaCara Membuat Blog Blogger dan Wordpress | Trik SEO dan Traffic Blog Terbaru

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

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 backgroundStyle 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

Masukkan kata kunci topik yang diinginkan. Misalnya meta

description, onpage, atau apa saja

Mencari Sesuatu? Cari!

Artikel Terbaru

Perhatikan Penggunaan

Sinonim Di Dalam Artikel

...

5 Cara Mendapatkan Banyak

Pengunjung Ke Blog Kita

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

</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 ColorMungkin 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

...

Membuat Blog Dengan Niche

Yang Fokus atau Campuran

...

Cara Download Video Dari

Youtube Tanpa Software IDM

Terbaru 2014

...

CARA MEMBUAT BLOG -

BUAT BLOGSPOT SENDIRI

KEREN DAN MUDAH

...

Cara Mengatasi Sanksi

Hukuman Algoritma Google

Panda 4.0 Terbaru

...

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

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 30px25px ">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 AlignMungkin 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 30px25px; text-align: center ">

Baca Ini Juga

Kenapa Cara Keluar Dari

Sanksi Hukuman Google

Penguin Begitu Sulit?

...

Cara Melakukan Riset Kata

Kunci di Google Keyword

Planner

...

Memilih Niche Yang Tepat

Untuk Blog Anda

...

Cara Mengatur Privasi Di

Facebook

...

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

ISI DARI DIV HTML TAG</div>

Sekarang mari kita lihat hasilnya...

ISI DARI DIV HTML TAG

Style Font FamilyKalau 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 30px25px; text-align: center; font-family: impact">ISI DARI DIV HTML TAG</div>

Hasilnya bisa anda lihat di bawah ini.

ISI DARI DIV HTML TAG

Cara membuat email google baru

Cara membuat website com sendiri

Cara membuat blog di blogspot

Cara mendaftar dan membuat akun facebook

Download template blog gratis keren

Cara download youtube downloader terbaru

Cara download video youtube tanpa software

Cara membuat website sendiri dengan cms

Cara mudah mengganti password gmail

Cara download youtube format mp3

Google + Saya

Ricky Pratama

5.971 pengikut

Ikuti

Label

blogging tips Blogspot Google SEO tips social media

cari uang di internet

SEO brief

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Style Font SizeKalau 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 30px25px; 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 WidthMungkin anda tidak suka jika ukuran div ini terlalu penuh. Anda bisa mengatur ukurannya

dengan menambahkan atribut width: ukuran. Satuannya bisa dalam pixel(px) ataupun

Google SEO tips social mediaTemplate SEO Friendly

Google+ FollowersRicky Pratama

5.971 memiliki saya dilingkaran

Lihat semua

+ ke lingkaran

Blog Followers

SEO brief traff ic blog Wordpress

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

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 30px25px; 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 DivJika 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 30px25px; text-align: center; font-family: impact; font-size: 30px; width:400px">ISI DARI DIV HTML TAG

Join this sitew ith Google Friend Connect

Members (2196) More »

Already a member? Sign in

BLOG INI ONLINE SEJAK22 MARET 2012

HATI-HATI COPY PASTEDiharapkan agar tidak melakukan copy

paste. Untuk pengutipan diharapkan disertailink ke halaman artikel di blog ini. Terima

Kasih atas pengertiannya

Alexa Rank Widget

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

</div></center>

Hasilnya akan terlihat seperti berikut:

ISI DARI DIV HTML TAG

Style BorderApakah 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 30px25px; 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:

Feedburner

↑ Grab this Headline Animator

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

ISI DARI DIV HTML TAG

Style Border RadiusMungkin 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 30px25px; 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 BayanganKalau 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;

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

-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 30px25px; 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.

COBA JUGA ARTIKEL DI BAWAH INI

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Tweet 0 0

Memilih NicheYang TepatUntuk Blog...

3 CARAMEMBUATWEBSITE .COMSENDIRI

Cara MembuatBlog YangBenar Untuk ...

CaraMeningkatkanAlexa RankDengan...

CaraMenggunakanTypeitin -Softwar...

Jika ingin mendapatkan buzz terkini seputar SEO dan blog, silahkan add akun saya di bawah ini

Facebook ---> https://www.facebook.com/ricky.pratama.12139

Twitter ---> https://twitter.com/rickypratamaseo

Dan jika tidak keberatan mohon vote-nya untuk blog saya di sosmed, thanks berat gan!

Silahkan Berkomentar

3Suka

Anda perlu menerima kuki pihak ketiga di brow ser Anda untuk berkomentar menggunakan plugin sosial.

Plugin sosial Facebook

Komentari

Tambahkan Komentar...

pdfcrowd.comopen in browser PRO version Are you a developer? Try out the HTML to PDF API

Ditulis oleh Ricky PratamaJudul: Belajar HTML dasar Div dan Stylenyahttp://trikmudahseo.blogspot.in/2012/10/belajar-html-dasar-div-dan-stylenya.htmlRating: 5.0 Base On 458965 reviews Harap untuk tidak melakukan copy paste! 68 blog sudah terhapus....

Posting Lebih Baru Posting LamaBeranda

Posted By Ricky PratamaRicky Pratama adalah nama saya, tapi biasa dipanggil keluarga sebagai Tama. Saya seorang blogger yang memulai kegiatanblogging sejak 2009 lalu. Pada tahun 2010 aw al sampai akhir 2011 saya istirahat dari blogging karena kesibukan pekerjaan.Tapi sekarang di 2012 kembali lagi blogging, karena ada w aktu luang... Blog saya adalah trikmudahseo.blogspot.com. Sayatinggal di Surabaya, dekat BG Junction . Saya adalah seorang Programmer pada perusahaan Sw asta Nasional.Jasa Backlink Murah Pagerank Tinggi

Copyright © 2014 Belajar SEO dan Cara Membuat Blog untuk Pemula.