Ada tiga jenis kotak yang biasa dipakai untuk membingkai sebuah tulisan, yaitu: border, overflow dan textarea (1 dan 2). Tentu saja ketiganya memiliki karakteristik yang berbeda. Nah, untuk mengetahui itu semua, berikut akan dijelaskan satu persatu mengenai kotak tersebut.
Border
Seperti namanya, border berarti bingkai yang membatasi tulisan/gambar yang berada di dalamnya.
TULISAN YANG KAMU INGINKAN
Keterangan:
- Border: 1px solid #CCC, berarti ketebalan garis (border) adalah 1px dengan warna abu-abu (mengenai kode warna dapat dilihat di Adobe Photoshop atau CorelDraw. Atau bisa kamu kunjung situs HTML Color Codes).
- Margin: 10px 0px, berarti margin atas-bawah 10 px dan margin kiri-kanan 0 px.
- Padding: 10px, berarti jarak tulisan ke border adalah 10px.
- Perintah auto pada width dan height supaya lebarnya mengikuti lebar kolom yang tersedia, sedangkan tingginya mengikuti isi (tulisan/gambar) yang dimasukkan kedalamnya. Kamu bisa merubah perintah auto kedalam bentuk pixel, misalnya: 100px.
- Background-color:#FBFBEE, berarti kotak berwarna gading. Jika ingin dihilangkan warnanya, ganti kode #FBFBEE dengan none atau hapus perintah background-color berikut kode warnanya.
- Text-align: left, berarti tulisan dalam bentuk rata kiri. Jika kamu ingin mengubahnya, ganti saja left-nya dengan right, center, atau justify (rata kanan = right, rata tengah = center, dan rata kiri-kanan = justify).
Untuk semua perintah tersebut kamu bisa mengubahnya sesuai dengan selera kamu.
Overflow
Overflow berarti tulisan yang melebihi media yang tersedia. Ada tiga perintah dalam overflow, yaitu scroll, hide, dan auto. Jika scroll yang digunakan maka tulisan yang melebihi media akan dibuatkan scroll. Jika hide, maka tulisan yang melebihi media akan disembunyikan. Dan jika auto, maka tulisan yang melebihi media akan dibuatkan scroll dan sisanya akan disembunyikan.
Cara Penulisan:
Silahkan CoPas code di atas, maka hasilnya akan seperti dibawah ini:
TULISAN YANG KAMU INGINKAN
TULISAN YANG KAMU INGINKAN
TULISAN YANG KAMU INGINKAN
TULISAN YANG KAMU INGINKAN
TULISAN YANG KAMU INGINKAN
TULISAN YANG KAMU INGINKAN
TULISAN YANG KAMU INGINKAN
Keterangan:
- Jika tulisan tersebut melebihi lebar (lebarnya 95% dari lebar container) yang tersedia dan tingginya melebihi 100px maka akan dibuatkan scroll dan sisanya akan disembunyikan.
- Perintah-perintah tambahan pada overflow ini mirip dengan perintah-perintah pada border sehingga untuk memahaminya bisa dilihat pada keterangan border
Text Area 1
Textarea berarti kotak yang melingkupi daerah text itu berada.Cara Penulisan:
Silahkan CoPas code di atas, maka hasilnya akan seperti dibawah ini:
Keterangan:
- Center menunjukkan posisi kotak ditengah. jika ingin meletakkan di sisi kiri maka ganti dengan left
- Pada textarea ini menggunakan rows dan cols (baris dan kolom) untuk menyatakan lebar dan tinggi areanya. Tetapi akibatnya akan sama dengan overflow, yaitu akan dibuatkan scroll dan disembunyikan jika text melebihi area baris dan kolom yang ditentukan.
- Pada script di atas menunjukkan 5 baris dan 50 kolom. Dengan demikian tulisan yang melebihi 5 baris dan/atau melebihi 50 kolom akan disembunyikan.
Text Area 2 pada dasarnya mempunya fungsi yang sama dengan Text Area 1 bedanya kalau text area 1 menggunakan rows dan cols tetapi pada text area 2 menggunakan width dan height.
Cara Penulisan:
Silahkan CoPas code di atas, maka hasilnya akan seperti dibawah ini:
Keterangan:
- Center menunjukkan posisi kotak ditengah. jika ingin meletakkan di sisi kiri maka ganti dengan left
- Pada textarea ini menggunakan width dan height (lebar dan tinggi) untuk menyatakan lebar dan tinggi areanya. Tetapi akibatnya akan sama dengan overflow, yaitu akan dibuatkan scroll dan disembunyikan jika text melebihi area baris dan kolom yang ditentukan.
- http://ruangsc.blogspot.com/2009/06/cara-membuat-tulisan-bergerak-komplit.html
- http://hermanblogtips.blogspot.com/2009/01/cara-membuat-text-area-dengan-fasilitas.html
Tidak ada komentar:
Posting Komentar