Headlines News
Home » , » Tutorial CSS Keempat Menciptakan Dekorasi

Tutorial CSS Keempat Menciptakan Dekorasi



Sebagai tambahan terhadap banyak properties font yang telah kita diskusikan pada artikel pertama, CSS juga merestui anda untuk mengatur secara luarbiasa masalah spasi (spacing), perataan (alignment) dan tampilan dari text anda (appearance). Properties “text-decoration” mengijinkan anda untuk membuat penekanan pada text. Sebuah garis dibawah, di atas, maupun garis yang melaluinya. Coba lihat :





<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {text-decoration: underline} /*tampil garis di bawah text */
.answer {text-decoration: overline} /*tampil garis di atas text */
.repeat {text-decoration: line-through}/*tampil garis melalui text */
.no-imagination {text-decoration: blink; font-weight: bolder}
/* text berkedip */
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. Kenapa why, tidak pernah never, selalu always?
<P CLASS="answer">
A. Karena because selalu always kapan-kapan sometimes?
<P CLASS="repeat">
Q. Apakah anda tau, siapa orang yang terlucu di Indonesia?
<P CLASS="repeat">
A. I Don’t know, Kasino and Indro.
<P CLASS="no-imagination">
Maksudnya? Dono, Kasino, dan Indro (Warkop DKI)
</BODY>
</HTML>

Catat, bahwa keyword “blink” hanya bekerja pada browser Netscape Navigator. Salah satu penggunaan umum dari property “text-decaorate” adalah untuk memberi links garis bawah ketika pointer mouse lewat di atas huruf tersebut (on mouse – over), sebagai kombinasi dari A:hover pseudo – class (masih ingat psudo – classes kan?). Begini contohnya :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
A {text-decoration: none}
A:hover {text-decoration: underline}
</STYLE>
</HEAD>
<BODY>
<A HREF="#">Ini Sebuah Link</A>. Yahoo!
</BODY>
</HTML>
Berikan Mereka Ruang (Space)
Anda juga dapat mengendalikan jumlah spasi antara karakter-karakter dengan property “letter-spacing”
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {letter-spacing: 30px}
</STYLE>
</HEAD>
<BODY>
<P>
Q. Kenapa Pekerjaan Jika Kita Anggap Mudah Akan Menjadi Benar-benar Mudah?
<P>
A. Kok, Sepertinya ini pertanyaan artikel yang kemarin?
</BODY>
</HTML>

Berantakan? Tidak mengapa, nanti anda bisa sesuaikan dengan kebutuhan. Sekarang anda perhatikan contoh di bawah yang berguna membuat indent untuk awal pharagraph!

<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {text-indent: 10px}
</STYLE>
</HEAD>
<BODY>
<P>
Q. Kenapa Pekerjaan Jika Kita Anggap Mudah Akan Menjadi Benar-benar Mudah?
<BR>
A. Kok, Sepertinya ini pertanyaan artikel yang kemarin?
</BODY>
</HTML>

Kerjakan dan Selesaikan Semua Contoh 

Perataan horizontal berlangsung melalui property “text-align”, yang menerima harga “left”, ”right”, “center” dan “justify”, ketika perataan vertical terjadi melalui property “vertical-align”, yang dapat membawa harga “baseline”, “text-top”, “text-bottom”, “middle”, “sub”, “super”, “top”, dan “bottom”. Kebanyakan ini adalah self-explanatory (anda harus bisa memakai dan memilahnya sendiri), akan tetapi
contoh di bawah akan membuat semuanya lebih jelas :

<HTML>
<HEAD>
</HEAD>
<BODY>
<P STYLE="text-align: center; font-weight: bolder">
Judul Di atas!
<P STYLE="text-align: left">
Buku Adalah Dunia!
<P STYLE="text-align: right">
<IMG SRC="bunga.gif" HEIGHT="25" WIDTH="25"> Jangan Menilai Buku Dari
Sampulnya
<P STYLE="text-align: justify">
<IMG SRC="bunga.gif" HEIGHT="25" WIDTH="25">Apakah Anda Sadar Kalau
Kita Sebenarnya Lemah!
<P STYLE="vertical-align: sub">
<IMG SRC="bunga.gif" HEIGHT="25" WIDTH="25">Iwan Fals? Padi? Sheila On 7?
Dan Dewa 19?
<P STYLE="vertical-align: super">
<IMG SRC="bunga.gif" HEIGHT="25" WIDTH="25">Mari Kita Mulai Dari
Permulaan.
<P STYLE="vertical-align: top">
<IMG SRC="bunga.gif" HEIGHT="25" WIDTH="25">Let’s We Begin From The
Beginning.
</BODY>
</HTML>

Bagaimana? Sudah jelas? Ada yang error? Hehehe.. “bunga.gif” anda tidak nongol ya? Duduls.. terang aja itukan bunga penulis, copy dan pastekan bunga anda ke dalam direktori anda menyimpan script di atas. Perhatikan ekstensinya, jangan salah namanya. Oke.. cukup masalah bunga, sekarang kita lanjutkan lagi. Property “text-transform” juga mengijinkan anda untuk mengganti besar huruf, maaf, maksudnya Kapitalisasi dari seluruh teks. Pilih antara “uppercase”, “lowercase”, “capitalize”, dan “none”.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {text-transform: capitalize} /*Karakter Pertama Huruf Besar*/
.answer {text-transform: uppercase} /* Semua Karakter Huruf Besar */
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. sebutkan sebuah kata bijak yang anda ketahui?
<P CLASS="answer">
A. never judge a book from its cover!!!
</BODY>
</HTML>

Pada contoh di atas, anda lihat properti “capitalize” membuat kalimat “sebutkan sebuah kata bijak yang anda ketahui?” menjadi “Sebutkan Sebuah Kata Bijak Yang Anda Ketahui?” Beda? Tentu saja. Perhatikan pada setiap awal kata menjadi Huruf Besar. Untuk kalimat “never judge a book from its cover!!!” akan berubah menjadi huruf besar (kapital) semuanya! Property “line-height” mengijinkan anda untuk mengubah space di antara dua garis, dengan demikian anda bisa bebas menumpang tindih kan teks satu dengan yang lain.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-size: 30pt; text-transform: capitalize; line-height: 60px}
.answer {font-size: 50pt; color: red; text-transform: uppercase;
line-height: 20px}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. Apakah semua properti CSS ini bisa dimanfaatkan?
Kuliah Umum IlmuKomputer.Com
Copyright © 2003 IlmuKomputer.Com
16
<P CLASS="answer">
A. Lho? Kok tanya penulis? Tanya tuh si Abe Poetra!
</BODY>
</HTML>

Sekiat Tutorial CSS Keempat yang saya Buat Semoga Bisa menginspirasi Sobat Blogger juga belajar lagi dengan giat untuk membuat Websitenya ya Ok Terima kasih banyak.............
Sobat sedang membaca artikel Aplikasi Online tentang Tutorial CSS Keempat Menciptakan Dekorasi dan Sobat bisa menemukan artikel Tutorial CSS Keempat Menciptakan Dekorasi ini dengan url Sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Tutorial CSS Keempat Menciptakan Dekorasi ini sangat bermanfaat bagi teman-teman, namun jangan lupa untuk meletakkan link Tutorial CSS Keempat Menciptakan Dekorasi sumbernya.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Free Aplikasi Full Version - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger