Dapatkan info terbaru via Facebook. Silahkan klik LIKE / SUKA.

Powered By Blogger Widgets and warungbelajar

Jumat, 06 April 2012

Mengatur Text Dengan Css



Hai kawan seudah lama tidak ngeblog , abis bersih bersih di blog yang hampir disetiap sudutnya banyak sarang laba labanya kawan hihi, ukey dalam kesempatan kali ini warungbelajar Membahas mengenai cara untuk mengatur text dengan css, dalam bab ini kita akan mempelajari mengenai cara pengaturan dari text di dalam css , pengaturan dari text didalam css sangatlah detail dimana banyak pengaturan yang bisa anda rubah dengan menggunakan css.Adapun yang akan kita pelajari dalam bab ini adalah :

  • Text color 
  • Text Aligment 
  • Text Decoration
  • Text Transformation
  • Text Indentation




Ukey langsung saja kawan kita bahas satu persatu dalam pembahasan kali ini :

Text Color 


        Text color digunakan untuk merubah warna dari sebauh text pada halaman web dengna menggunakan css,skrip yang digunakan adalah seperti ini :

anda akan belajar mengganti warna dari teks pada bab ini , adapun skrip yang digunakan adalah seperti berikut ini :

h1 {color:red;}

Penjelasan:


•    h1 adalah selector yang akan kita rubah warnanya
•    color adalah properties yang merupakan perintah untuk mengganti warna dari text
•    red adalah value dari properti color  yaitu memerintahkan untuk memberikan warna merah pada      bagian teks

Jadi kesimpulannya perintah diatas akan memberikan warna merah pada teks dengan tag h1.

Nb :

Untuk nama dari warna anda bisa menggunakan beberapa mode penulisan :
•    Menggunakan kode hexa ,contoh :
      h1{color:#cccccc;}
•    Menggunakan kode rgb,contoh :
     h1{color: rgb(255,0,0);}
•    Menggunakan nama dari warna itu sendiri,contoh :
     h1{color:red;}





Contoh Penggunaan Skrip :


<html>
<head>
<title></title>
<style type="text/css">
h1
{
color:red;
}
</style>
</head>
<body>
<h1>ini adalah h1</h1>
</body>
</html>




Penjelasan:


•    h1 adalah selector yang akan kita rubah warnanya

•    color adalah properties yang merupakan perintah untuk mengganti warna dari text

•    red adalah value dari properti color  yaitu memerintahkan untuk memberikan warna merah pada    bagian teks

Jadi kesimpulannya perintah diatas akan memberikan warna merah pada teks dengan tag h1.


Hasilnya :





----------------------------------------------------------------------------------------------------------------------------

Text Aligment

          Dalam bab kita akan berbicara mengenai cara untuk mengatur posisi tulisan , apakah rata kanan , rata kiri atau dari arah tengah,baik kita mulai kawan:

Skrip yang dipakai :

h1 {text-align:center;}

Penjelasan :


•    h1
adalah selector (bagian yang akan kita rubah)

•    text-align
adalah properti (merupakan perintah untuk mengatur rata dari text)

•    center
adalah value yang berarti kita memulai text dari arah tengah

Kesimpulan dari skrip diatas adalah :

mengatur untuk semua elemen h1 akan posisi tulisannya berada pada tengah halaman .
value yang lainnya adalah :

center  --> tulisan dari posisi tengah
left --> tulisan dari posisi kiri
right --> tulisan dari posisi kanan
justify --> tulisan rata kanan dan kiri

Contoh Pemakaian Skrip  :

<html>
<head>
<title></title>
<style type="text/css">
h1
{
text-align:center;
}
</style>
</head>
<body>
<h1>ini adalah h1</h1>
</body>
</html>



Hasilnya :





 ----------------------------------------------------------------------------------------------------------------------------

Text Decoration


    Dalam bab ini anda akan belajar untuk melakukan pengaturan dekorasi dari sebuah teks,dekorasi yang paling sering digunakan adalah untuk menghilangkan garis bawah pada sebuah link,adapun skrip yang digunakan adalah sebagai berikut:

    a {text-decoration:none;}

Skrip diatas ini sering kita gunakan untuk menghilangkan garis bawah pada sebuah link

Penjelasan :


•    a
    adalah selector karena kita akan merubah sebuah link

•    text-decoration
    adalah propertinya perintah untuk mengatur dekorasi dari sebuah teks

•    none
    adalah value dari properti yang akan menghilangkan semua dekorasi dari   text

lalu value apa saja yang bisa gunakan dalam text decoration ini ??

overline //memberikan garis pada atas teks
line-through //memberikan garis pada tengah teks
underline //memberikan garis pada bawah teks
blink //memberikan effect kelap kelip pada teks


 Contoh Pemakian Skrip :



<html>
<head>
<title></title>
<style type="text/css">
h1
{
text-decoration:line-through;
}
</style>
</head>
<body>
<h1>ini adalah h1</h1>
</body>
</html>



Hasilnya adalah :



 ----------------------------------------------------------------------- ---------------------------------------------------

 Text Transformation

 

 Pada bab ini kita akan membahas mengenai mengenai text transformation, apa itu ?? kita bisa memberikan pengaturan kepada ukuran dari text baik itu huruf kapital , atau memakai huruf kecil bisa anda atur pada bagian ini,skrip yang digunakan adalah  :

p{text-transform:uppercase;}


Penjelasan

•    p
adalah bagian selector
•    text-transform
adalah bagian properti yang merupakan perintah untuk mengatur apakah hurufnya memakai huruf kapital atau tidak
•    uppercase
adalah bagian value dari properti yang berarti untuk memberikan huruf kapital pada teks
 

Lalu value apa saja yang bisa kita isikan dalam text-transform ini :


uppercase //membuat tulisan menjadi huruf besar semua
lowercase //membuat tulisan menjadi huruf kecil semua
capitalize //membuat tulisan menjadi huruf besar hanya diawal kata
 

Contoh penggunaan Skrip :

<html>
<head>
<title></title>
<style type="text/css">
p
{
text-transform:uppercase;
}
</style>
</head>
<body>
<p>
ini adalah contoh paragraf yang terkena effect uppercase
</p>
</body>
</html>



Hasilnya adalah :




----------------------------------------------------------------------------------------------------------------------------


 Text indetation


        Biasanya dalam penulisan paragraf terdapat sebuah jarak yang menjorok kearah kanan ,nah fungsi dari text indentation ini adalah memberikan jarak pada awal paragraf.


Skrip yang digunakan adalah seperti berikut ini :

p {text-indent:50px;}


Penjelasan:


•    p
adalah merupakan selector
•    text-indent
adalah merupakan propertinya yang merupakan perintah untuk memberikan jarak pada awal teks
•    50px
adalah value dari properti yang berarti memberikan jarak sebesar 50px

Kesimpulan

akan memberikan jarak pada awal paragraf sebesar 50 px


Contoh Skrip :

<html>
<head>
<title></title>
<style type="text/css">
p
{
text-indent:50px;
}
</style>
</head>
<body>
<p>
ini adalah contoh paragraf yang terkena effect text indent sebesar 50px ini adalah contoh paragraf yang terkena effect text indent sebesar 50px ini adalah contoh paragraf yang terkena effect text indent sebesar 50px
</p>
</body>
</html>



Hasilnya :





Demikian Penjelasan untuk bab Mengatur text dengan css , sekian dulu ya kawan , disambung di artikel selajutnya dan semoga bisa bermanfaat buat teman teman :D. salam hangat dari warung belajar .

Jika anda suka dengan artikel di blog ini.Silahkan berlangganan GRATIS via EMAIL.Isi alamat email anda di bawah ini

Masukkan Email anda disini:

Delivered by FeedBurner

Baca Artikel Menarik Lainnya Gan

7 komentar:

widhi online mengatakan...

nice tutorial kang. thanks ya :)

system of blog mengatakan...

bagus nih

Cek Info mengatakan...

wah keren ni, buat pemula seperti ane :D

Rudy Hartono mengatakan...

muantebb banget sob

berbagi cerita mengatakan...

@widhi : ya kakak , semoga membantu kakak
@system : ya kakak semoga membantu
cek info : ya kakak ane juga pemula kok kakak :D
RUDY : manteb kakak semoga bisa membantu artikel sya

Neng Cici mengatakan...

otak aye mah gak muat kang tentang ginian
btw ini ilmu yang bermanfaat

Daftar Harga HP Nokia 2013 mengatakan...

kalau mengatur semua kata berawalan huruf kapital sobat? di tunggu jawabnnya sob

Poskan Komentar

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Buy Coupons