bewoksatukosong.com - Hallo Semuanya balik lagi dengan Om bewok. Anyway hari ini om bewok bakal ngejelasin mengenai Text Formatting. Text Formating adalah sebuah format text, yaelah cuman di balik doang kata - katanya, hehe
Jadi kita bakal mainin text, ya entah itu text di bikin Kecil, Besar, ya pokoknya diapa-apain aja deh dianya bakal nurut kok.
Jadi kita bakal mainin text, ya entah itu text di bikin Kecil, Besar, ya pokoknya diapa-apain aja deh dianya bakal nurut kok.
Well om bewok bakal kasih list apa saja yang bakal kita coba di text formatting tersebut. Here we go
Ada 5 Text-Formatting :
1.Text Color
TEXT COLOR Mungkin temen - temen pernah baca tutorial ini sebelumnya, nah om bewok takut teman - teman lupa makanya di kasih lagi disini, baik kan om bewok?#mukaGenit. Nah jadi kamu bisa banget buat ganti - ganti warna font, dan caranya gampang banget, sumpah ga pake bohong kok, tapi kamu perlu banget hapalin semua color,HAH? ga kok bercanda lebay banget kamu :p. Om bewok jelasin dulu ya, bahwa property color ada 3 pilihan.
pertama color name contoh nya "red", "blue", "green", "yellow" pokoknya sebutin nama warna tapi ada tapi nya nih di inget baik - baik setelah kata - kata ini "Dalam menggunakan bahasa inggris ya". Yaelah gue jago kali om bewokkkk.
Kedua Hex Value seperti #000000, #fff, nah kamu ga perlu takut kalau kamu gatau hex kamu bisa kok main - main ke link yang om bewok tulis seperti flatuicolour.com .
Ketiga terakhir nih. kamu bisa menuliskan menggunakan RGB contoh nya seperti rgb(0,0,0,0.1); tenang aja di link yang kamu kasih juga bisa kok dengan format RGB. Untuk Memperpanjang waktu, eh maksudnya memperpendek waktu ah pokoknya gitu, marilah kita coba ya mengenai text color, pasti sudah penasaran kan ?SOK TAU, siapa tau mereka malah menjawab "ga tuh biasa aja", sabar, sabar :))
Seperti ini ya teman - teman kodinganya
<!DOCTYPE html>
<html>
<head>
<title>om bewok</title>
<style>
/* inget ya ini property yang pertama */
h1 {
color :red;
}
/* inget ya kalau ini yang kedua, inget ya mas mas*/
h2 {
color : #16a085;
}
/* hmmm pilih aku ya mas, aku yang ketiga keren loh dari namanya RGB */
h3 {
color: rgb(52, 152, 219);
}
</style>
</head>
<body>
<h1>
Halo om bewok kali ini menggunakan type property yang pertama lohh inget yang pertama bukan yang lain ya
</h1><br/>
<h2>
Halo kali ini om bewok lagi pake yang type property ke dua lohhh inget kedua, pilih aku ya mas#nyengir
</h2><br/>
<h3>
hikz hikz sedih font-color aku,aku menggunakan terakhir, tapi gapapa aku bangga sama kamu. #papaBanggaSamaKamuRGB
</h3>
</body>
</html>
Hasil nya seperti di bawah ini ya
2. Text-Align
TEXT - ALIGN Dari namanya seperti nya sudah tidak asing ya, yap text align ini adalah bahasa kasar nih text mau di kemanain nih ratanya, mau ke kiri, kanan, tengah atau rata semua.
Oke biar tidak kelamaan, marilah kita selesaikan dengan sesingkat - singkat nya,
oke sudah mengerti semuanya. Terima kasih
It's joke dude.
Mari kita mulai lets do it
om bewok bakal kasih catatan kecil dulu mengenai ini.
kanan : right
kiri : left
tengah : center
rata semua : justify
Yaelah gini doang mah orang udah tau, makanya kan om bilang kasih catatan kecil kan malu kalau keliatan orang, catatan nya gede terus isi nya artinya ginian doang ? LANJUT GA NIH ? MANA SUARANYA ? HUAHHH HUAAH . 'mas nya kesurupan??', lanjut aja deh daripada om bewok juga kena hiiiiiii!!!
Om bewok bakal kasih tutorialnya ya
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#rata-kiri {
text-align : left;
}
#rata-kanan {
text-align:right;
}
#rata-tengah {
text-align:center;
}
#justify {
text-align: justify;
}
</style>
</head>
<body>
<p id="rata-kiri">inget lohh ini rata kiri, inget loh ya awas aja kalau ampe lupaaa, jadi pengen curcol di sini. Jadi gini om tuh sebenernya kan nah iya om bewok orang nya gitu tapi kan om bewok pengen ngebela yang benar tapi dia nya gitu sih rada - rada sel... gitu deh #apasih om bewok.</p>
<br/>
<p id="rata-kanan">
ini rata kanan lohh ya biar text nya panjang, om sekalian curcol ya, boleh ya jadi gini om bewok kan punya smp, punya banyak deh ada sih dakong, jaya dan bla bla, terkadang om bewok pernah berfikir mereka apa kabar ya? hmm padahal dulu kita nongkrong bareng tapi sekarang hilang seperti debu
</p>
<br/>
<p id="rata-tengah">
ini rata tengah lohhhh, terkadang kepikiran ga sih, teman - teman sd kamu atau smp kamu atau SMA kamu mungkin yang kamu sukain sekarang apa kabar ya ? apa sudah nikah ? punya pacar kah ? masih jones kah ? yuk kita berdoa buat teman - teman lama kita semoga di manapun mereka berada di beri kesehatan ya. amin
</p>
<br/>
<p id="justify">
Kali ini yang terakhir yaitu rata kiri - kanan, curcol lagi, ada kejadian seru waktu smp, temen om bewok mules nya ga ketolong inisialnya si RIZKI, nah dia pup di wc sekolah, pasti teman - teman tau yang namanya wc sekolah jorok, gatau sih kalau sekarang, nah pintu nya itu ga bisa dikunci jadi di tutup, nah kebetulan ada senior bandel nendang - nendangin pintu wc pas banget si rizki ini lagi pup, langsung jadi canggung gitu beberapa menit, abis itu rizki langsung nangis, kalau di realitanya nya ngakak parah. udah ah jangan ngomongin orang, ga baik. Betul ?
</p>
</body>
</html>
Hasil nya seperti di bawah ini ya
Lanjut ?? Oke
3. Text-Decoration
TEXT-DECORATION
Text decoration pada inti nya hanya untuk mendekorasi atau memberikan tambahan kepada text, ya biar ga bingung om kasih tutorial nya aja ya.
Nah mungkin kalau dari ke empat tersebut yang sering digunakan adalah text decoration none pada a href, biasanya di gunakan untuk membuat menu bar atau disebut juga dengan navigation bar.
Inti dari text-decoration : none adalah menghilangkan garis bawah tersebut.
Oke Selesai Sudah Tutorial CSS Text-Formatting Part 1, Selanjutnya kita akan Berlanjut ke Text-Formatting pada CSS Part 2
om bewok maaf nih mw nanya apa bedanya di file css kan ada yang pake # . atau langsung h1 a dsb.
ReplyDeletecontoh
#rata-kiri
.box
yang paling bingung mah yang # sama titik
biar lebih jelas gto kalo nanya langsung hehe makasih om bewok