#11 Test Your Code, Maybe?

"Aku pengen bikin CSS, tapi males bikin file htmlnya."

Saya rekomendasikan satu link untuk kamu:
http://www.w3schools.com/css/tryit.asp?filename=trycss_default

Kamu bisa mengetes kode CSSmu online, tanpa perlu buat file html baru!

Happy coding!

.ulaai

#10 Property: Cursor

Hello semuanya, apakabar? Sekarang kita akan belajar tentang cursor. Kodenya seperti ini:

selector {
cursor: ()
}

Contoh kodenya sebagai berikut.

h1 {
cursor: help;
}

Sehingga ketika h1 ini dihover/ditunjuk, maka cursor kita akan berubah jadi kursor help. Well, ada berapa yaa jumlah kursor yang bisa kita pakai? Saya telah membuat listnya. Ayo lihat di bawah!

cursor: auto

cursor: crosshair

cursor: default

cursor: pointer

cursor: wait

cursor: text

cursor: help

cursor: move

cursor: n-resize

cursor: ne-resize

cursor: nw-resize

cursor: e-resize

cursor: w-resize

cursor: s-resize

cursor: se-resize

cursor: sw-resize

Silahkan hover tiap nama kursor untuk contoh kursornya :D
Happy coding, then!

.ulaai

#9 Customizing the Text part 2

Konbanwa minna :D Ogenki desuka? Genki desu yo. Hehehe. Hari ini kita akan melanjutkan 'Customizing the Text part 1' yang lalu. Semoga kalian belum bosan :)

Kali ini kita akan belajar tentang LINK. You know link, right. Kalau kalian menulis link di file htmlmu tanpa CSS, pasti warna linknya bakal biru/ungu, font Times New Roman ukuran 12pt. Right? Ah-ah, how boring! Kenapa nggak kita coba yang lain? Kenapa nggak fontnya kita ganti atau warnanya diubah gitu? Ya nggak? Makanya baca post ini baik-baik, dan praktekkan :D

Kodenya adalah:

A:link
{
(code yang diinginkan)
}

A:visited
{
(code yang diinginkan)
}

A:active
{
(code yang diinginkan)
}

A:hover
{
(code yang diinginkan)
}

A:link adalah link itu sendiri. Apa warnanya? Fontnya? Ukurannya? Bisa kamu ubah di a:link.
A:visited adalah link yang sudah pernah kamu kunjungi. Kalau kamu menulis link di file htmlmu tanpa CSS, jika sitenya sudah pernah kamu kunjungi (google.com misalnya) pasti warnanya akan berubah jadi ungu. Kalau belum pernah kamu kunjungi maka warnanya akan berubah jadi biru. Am I right?
A:active adalah keadaan link ketika kamu mengekliknya. Hanya ketika saat kamu mengekliknya.
A:hover adalah keadaan link ketika ditunjuk. Apakah bakal kedip-kedip? Apakah akan menebal? Bisa kamu atur di a:hover.

Contohnya seperti ini:

A:link
{
text-decoration: none; color: #FFFFFF; cursor:crosshair;
}

A:visited
{
text-decoration: none; cursor:crosshair; color: #FFFFFF;
}

A:active
{
text-decoration: none; cursor:crosshair; color:#5A5A5A ;
}

A:hover {
text-decoration: blink; color: #000000; font weight: bold; cursor: help;
}

Then test it!
Kalian mungkin melihat sesuatu yang beda pada kode di atas. Yep, bener. CURSOR. Penasaran? Nantikan postingan berikutnya! Jaa~

.ulaai

#8 Customizing the Text part 1

Hullaaaaah. Apa kabar? Kali ini kita akan belajar tentang mengutak-atik tulisan. Misalnya, "Aku pengen kalau aku masukin bold, maka tulisannya warna merah bukan warna item." Atau, "Aku pengen underlinenya yang dotted, bukan solid!" Well, asal kamu mengikuti postingan kali ini dengan baik, pasti kamu akan bisa mendapatkan hasil sesuai yang kamu inginkan!

PART 1: Customizing b, i, u, and s

b {
(kode yang kamu mau)
}

Nah, b itu artinya bold. Bisa kamu ganti dengan i (italic), u (underline), s (strike).

Misalnya:

b {
color: #222222;
}

i {
color: #999999;
font-family: arial;
font-size: 8pt;
}

u {
color: #333333;
border-bottom: 2 px dashed #ffffff;
}

s {
text-decoration: blink;
}

Seperti itu. Gampang kan? Saya juga nggak bakal ngasih contoh buat yang ini, wong sangat-gampang-sekali kok :)
Sampai jumpa di Customizing the Text part 2!

#7 Property: Border

Hello folks. Apa kabar? I changed the blog's layout, hope you like it ya. Pada kesempatan kali ini kita akan belajar tentang BORDER... TEREEETTT!!

Border itu garis tepi. Yeah, kamu pasti sudah tahu, karena border ini ada di berbagai aplikasi office seperti Microsoft Word atau Powerpoint. Yak seperti itulah. Langsung saja ya.

GENERAL (property: value)

border: value border (dijelaskan di bawah)

BORDER (property: value)

border-width: besar border (pakai px)
border-style: style border (dashed, double, groove, dotted, inset, outset, ridge, solid, none)
border-color: warna border

---

Nah, untungnya di materi border kali ini penggunaannya mudah sekali. Misalnya untuk kode seperti ini:

contoh1 {
border-width: 2px;
border-style: dashed;
border-color: #666666;
}

Mungkin kalian berpikir, "Repot dong kalau satu-satu, apa nggak bisa disatuin aja?" Gampang! Kamu hanya perlu menghilangkan propertynya. Sehingga kodenyapun menjadi seperti ini:

contoh2 {
border: 2px dashed #666666;
}

Gampang, kan? Untuk materi ini saya nggak akan kasih contoh untuk pengaplikasiannya, karena mudah sekali. Untuk contoh kamu bisa pakai kode yang ada di post sebelumnya. But still, be creative, ciptakan kodemu sendiri! Happy coding!

.ulaai

#6 Property: Box Model

Hellooo! Still in this channel with me, Uli, and we will continue our CSS lesson. Eheh. Property selanjutnya yang akan kita gunakan adalah Box Model. Make sure you'll read this carefully :)

BOX MODEL (property: value)

height panjang kotak
width lebar kotak
margin (top, right, bottom, left) jarak antara luar kotak dengan tepi kotak
padding (top, right, bottom, left) jarak antara tepi kotak dengan isi kotak

Masih belum jelas? Kalau gitu kita lihat gambar di bawah deh:

Gambar diambil dari sini

Bagaimana cara mengaplikasikannya? Hoho. Ayo kita coba--masih dengan menggunakan kode yang lalu. Berani?




<html>
<head>
<title>TEST</title>

<style type="text/css">
h1 {
font-style: italic;
font-weight: bold;
font-family: Century Gothic;
font-size: 32 pt;
color: #ff0022;
letter-spacing: 2px;
text-align: center;
text-decoration: overline;
text-transform: uppercase;
}

blockquote {
height: 300px;
width: 200px;
margin: 10px;
padding-top: 5px;
padding-right: 7px;
padding-left: 10px;
padding-bottom: 5px;
border: 1px solid #000000;
font-family: Tahoma;
font-size: 14pt;
color: #666666;
text-decoration: underline;
text-align: justify;
}

</style>
</head>

<body>
<h1>Somehow it was Ended Like This</h1>
<br> <br>
<blockquote> Lontong balap adalah makanan khas Indonesia yang merupakan ciri khas kota Surabaya di Jawa Timur. Makanan ini terdiri dari lontong, tauge, tahu goreng, lentho, bawang goreng, kecap dan sambal. Lontong balap biasanya didominasi oleh tauge.
</body>
</html>

More complicated? I guess so hehe. Ada beberapa hal yang perlu diperhatikan dalam kode di atas:
BLOCKQUOTE adalah sebuah kode HTML, sama kayak b, i, u, atau s, gunanya untuk jmeng'quote' sesuatu. Cara memasukkannya gampang saja, cukup dengan melihat di atas. Mudah kan?
BORDER bakal kita pelajari di post selanjutnya.

Well, gimana hasilnya? Kalau saya hasilnya seperti ini:

Masih semangat kan belajar CSS? See you next time then. :)

.ulaai

#5 Property: Text

Halo semuanya :D Apa kabar? Kuharap kalian belum bosan belajar CSS, masih di channel CSS bareng saya, Uli. XD
Property dan value yang akan kita pelajari kali ini adalah text.

TEXT (property: value)

letter-spacing jarak antar huruf
line-height jarak antar baris
text-align alignment (center, justify, left, right)
text-decoration blink, line-through, none, overline, underline
text-indent first line indentation
text-transform capitalize, lowercase, uppercase
vertical-align vertical alignment
word-spacing jarak antar kata

---

Letter spacing adalah jarak antar huruf. Misalnya:

H A L O I N I B L O G S A Y A
HALO INI BLOG SAYA

Line height adalah jarak antar baris. Misalnya:

Halo nama saya uli.




Umur saya tiga belas tahun.




Jarak antar baris saya besar sekali.

Text align adalah alignment, macam left, right, center, dan justify di Microsoft Word. Nggak usah pakai contoh deh, pasti sudah tahu, kan :D

Text decoration adalah hiasan teks kamu. Misalnya blink (kedip-kedip) line-through (kayak kecoret), none (nggak pakai dekorasi apapun), overline (garis atas), underline (garis bawah).

Text-indent itu macam first line indent di Microsoft Word. Tapi property ini jarang digunakan kok, sampai sekarang saya belum ketemu contoh yang konkrit.

Text-transform, sesuai namanya, adalah transformasi teks. Capitalize (Huruf Kapital Tiap Awal Kata), lowercase (huruf kecil semua), uppercase (HURUF BESAR SEMUA).

Vertical align, saya juga belum pernah ketemu contoh yang konkrit. Jadi saya belum bisa kasih tahu contohnya gimana. Maaf ya :D

Word-spacing itu jarak antar kata. Misalnya:

Halo nama saya Uli.

Sudah ngerti sekarang? Kita coba yuk! Hohoho. Gimana kalau langsung kita gabung sama pelajaran kita minggu lalu? Sip ya? Sip dong hehehe.

Contoh kode:

<html>
<head>
<title>TEST</title>

<style type="text/css">
h1 {
font-style: italic;
font-weight: bold;
font-family: Century Gothic;
font-size: 32 pt;
color: #ff0022;
letter-spacing: 2px;
text-align: center;
text-decoration: overline;
text-transform: uppercase;
}

</style>
</head>

<body>
<h1>Somehow it was Ended Like This</h1>
</body>
</html>




Yup, kita selesai coding. Kita coba yuk! Kalau kamu melakukannya dengan baik maka hasilnya akan seperti ini (image resized):


Taaa-raaaaah! Lebih keren kan? Coba kamu bandingkan yang saya tulis 'Somehow it was Ended Like This' dengan hasil yang ditunjukkan. Apa ada yang beda? Kalau kamu bisa menjawab, berarti kamu sudah mengerti property bagian ini. Keep learning!

#4 Property: Font

Annyeong haseyo :) Mulai post ini kita akan belajar tentang selector, property dan value. Apa itu selector? Apa itu property? Apa itu value? Kalau belum tahu, kalian bisa baca di sini. Now off to the topic!

Selector ada banyak macamnya. Bagaimana cara menghapalnya? Gampang saja, cukup cocokkan selector dengan value yang cocok. Dan sering-seringlah berlatih menggunakan CSS. Saya punya CSS Cheat Sheet yang selalu saya bangga-banggakan kalau lagi bikin layout. Jadi, kalau kamu lupa, kamu bisa nengok ke cheatsheet itu :D Credit cheat sheet to its own, saya dapatnya dari multiply.com.

Jenis property dan value ada banyak, menurut CSS Cheat Sheet di atas ada 7 buah. Tapi saya akan meringkasnya supaya lebih mudah dimengerti, dan kita bakal pelajari satu-satu. Daripada langsung tujuh-tujuhnya, pasti bingung, kan?

GENERAL (property: value)

color: nama warna (boleh hex color, boleh nama langsung)

FONT (property: value)

font-style: italic, normal
font-variant: normal, small-caps
font-weight: bold, normal, lighter, bolder, integer (100-900)
font-size: size of the font (px or pt)
font-family: nama font


Misalnya kamu mau masukin kode seperti ini:

h1 {
font-style: italic;
font-weight: bold;
font-size: 16 pt;
font-family: "Century Gothic";
color: #fff000;
}

Ketika kamu memasukkan kode <h1>HALOOO!</h1> maka hasilnya akan seperti ini:


Sudah ngerti kan?

Mungkin kalian bertanya-tanya, apa sih bedanya px dengan pt pada ukuran font? Gampang aja. PX itu PIXEL, PT itu ukuran standar nulis. Kalau misalnya kalian nulis cerita di Microsoft Word terus nyetting ukuran angka jadi 18, misalnya, berarti itu 18 pt. Ukuran px lebih kecil daripada pt. Berdasarkan pengalaman saya waktu buat-buat layout dulu sih, 11 px = 8 pt. Lebih enak yang mana? Tergantung kalian. Saya pribadi lebih suka pakai yang pt, soalnya gampang (tinggal lihat Wordpad buat pedoman ukurannya) kalau px harus ngira-ngira sendiri. But still, itu semua terserah kalian. :)

Kalau hex color dan nama langsung? Oke. Kalian pasti tahu this kind of thing: #000000, #FF0000, #222222. Ya kan? Itulah kode nama bernama hex color. Keuntungan hex color ini, warnanya banyak dan pasti benar warnanya (maksudnya sesuai yang kita inginkan begitu). Kalau nama langsung seperti: black, white, violet, orchid. Keuntungan nama langsung ini, kita nggak perlu susah-susah menghapal 'ini berapa jumlah 0-nya?' atau 'ini F-nya diulang berapa kali?' dan sebagainya.

Happy coding!

#3 Peletakan CSS dan Disclaimer

Hola! Como estas? Sekarang mari kita lanjutkan lagi pelajaran tentang CSS. Kuharap kalian belum bosan^^

CSS diletakkan diantara <head> dan </head> dengan mengetikkan kalimat <style type="text/css"> dan ditutup dengan </style>. Nah, biar nggak bingung, langsung saja ke contoh.

<html>
<head>
<style type="text/css">

h1 {
color: #000000;
}

h2 {
color: #222222;
}

</style>
</head>
</html>

Remember to put </style> after the CSS codes :)

Oh ya, by the way, salah satu keasyikan dari CSS kode ini adalah kita bisa memasukkan kata-kata tambahan, boleh semacam disclaimer atau copyright. Sebenarnya nggak cuma CSS aja sih, Javascript juga bisa. Caranya sama kok. Dengan mengetikkan kata-kata yang kamu mau di antara /* dan */. Bingung? Langsung saja ke contoh.

<html>
<head>
<style type="text/css">
/*DO NOT COPYCAT THIS CODE!*/
/*THIS CODE BELONGS TO YOUR NAME, DO NOT COPY AND CLAIM THIS AS YOURS!
Thanks*/

h1 {
color: #000000;
}

h2 {
color: #222222;
}

</style>
</head>
</html>

See? Jadi kamu masih bisa memberi peringatan pada tangan-tangan jahil yang akan mencuri kodemu. Dan enaknya lagi, kata-kata di dalam /**/ nggak akan muncul di dalam file HTML-mu. Asyik, kan? Pada post selanjutnya kita akan mengupas tentang selector dan value, so don't miss it!

#2 Apa itu CSS

Selamat pagi :D Pagi ini kita akan belajar tentang pengertian CSS.

Apa itu CSS? Wikipedia bilang
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

The truth is, saya sudah kenal bahasa komputer yang satu ini dari kelas tujuh :D Kalau kata Wikipedia sih, jenis CSS ada 2. CSS1, untuk penggunaan HTML, dan CSS2 untuk penggunaan pada pencetakan. Yang kita akan pelajari ke depan adalah CSS1, untuk penggunaan HTML.

Sebelumnya kita juga harus akrab sama bentuk-bentuk CSS. Contoh sederhananya seperti ini:

h1 {
color: #fff000;
}

Bagian pertama sebelum tanda '{}' dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #fff000 adalah value.

Masih bingung? Haha, yang di atas ini terjemahan bebas Wikipedia. Saya akan jelaskan dengan bahasa sendiri.

Bagian pertama sebelum tanda {} dinamakan selector. Kenapa selector? Karena bagian ini menunjukkan bagian mana yang akan diubah. Kalau menurut kode di atas, bagian yang akan diubah dari HTML kita adalah bagian h1 (

). Begitu juga kalau tulisannya h2, h3, dsb.

Yang diapit oleh '{}' disebut declaration. Declaration = mendeklarasikan, menjelaskan. Jadi, semua kata yang ada dalam {} akan menjelaskan bagaimana teks akan bekerja. Kalau menurut kode di atas, ada dua jenis tag di situ: color: dan #fff000. Yang color itu namanya property dan yang #fff000 merupakan value. Value= isi. Pendeknya, value adalah isi dari property dan keduanya adalah declaration. Sudah ngerti kan?

Property dan value banyaaaaaaak sekali macamnya. Ada color, font-family, font-size, mouse, text-decoration, border, dan lain-lain. Tapi kita nggak akan belajar itu sekarang. Sekarang cukup sampai di sini dulu, ya. I am gonna prepare my bag as I wanna go to the school tomorrow :) Happy weekend!

.ulaai

#1: Pembuka

Selamat malam. Assalamualaikum wr. wb.

Oke.

Selamat datang di blog ini, yang khusus dibuat untuk melaksanakan tugas TIK sekolah saya. Sekolah saya bernama SMP Al Hikmah Surabaya. Nama saya Fatihah 'Ulya Hakiem, siswi kelas 8H tahun ajar 2009-2010. Perlu dicatat bahwa blog pribadi saya bukanlah yang ini.

Di blog ini saya akan mengajarkan tentang CSS. Berhubung saya cuma ngerti CSS dan sedikit javascript jadi hanya CSS yang bisa saya berikan...

At the end, please enjoy :)