Berikut saya akan membagikan cara untuk pembuatan 3 jenis model tersebut :
Border
border atau garis yang mengelilingi tulisan yang fungsinya untuk memperindah tampilan dan juga sebagai pembatas tulisan.
Contoh border :
Isi Teks Anda Disini
Kodenya :
<div style="border: 3px solid #FF0000; margin: 5px 0px; padding: 10px; width: auto; height: auto; background-color:#ABABAB; text-align: left; font color:#1AFF00;">Isi Teks Anda Disini</div>
Keterangan:
- Border: 3px solid #FF0000; = Tebal garis border jenis solid 3px dengan kode warna border #FF0000
- Margin: 5px 0px; = Margin atas-bawah 5px dan margin kiri-kanan 0 px.
- Padding: 10px; = Jarak tulisan ke border adalah 10px.
- Perintah width: auto; height: auto; = agar lebarnya(width) mengikuti lebar kolom yang tersedia dan tinggi(height) mengikuti tulisan yang ada didalamnya.
Untuk Perintah auto, sobat bisa menggantinya dalam bentuk pixel, misalnya: 100px. - background-color:#ABABAB; = warna latar/gambar belakang tulisan dengan kode warna #ABABAB;
silahkan ganti kode #ABABAB dengan none atau hapus saja perintahnya apabila ingin tanpa warna latar. - text-align: left; = bentuk rata kiri.
- ganti sesuai selera dengan perintah right (Rata Kanan), center (Rata Tengah), atau justify (Rata kiri-kanan)
- font color:#1AFF00; = Warna Huruf menggunakan kode #1AFF00
Textarea
Textarea atau kotak yang melingkupi daerah text itu berada.
Pada perintah dalam textarea tidak menggunakan width dan height melainkan memakai rows (baris) dan cols (kolom) untuk lebar dan tinggi.
Penggunaan kode rows dan cols efeknya akan sama dengan overflow,
yaitu jika text melebihi area baris dan kolom , maka akan dibuatkan scroll dan disembunyikan.
Contoh textarea :
Kodenya :
<textarea rows="5" cols="50">Isi Teks Anda disini</textarea>Keterangan :
- rows="5" cols="50" artinya 5 baris dan lebar 50 kolom (tulisan yang melebihi 5 baris dan 50 kolom akan disembunyikan dan diberikan scroll)
- Untuk melihat contoh model textarea lainnya silahkan sobat baca di postingan saya yg lain Klik disini
Overflow
Overflow artinya tulisan yang melebihi media yang tersedia.
Perintah dalam overflow, yaitu scroll, hide, dan auto.
Keterangan
- scroll = tulisan yang melebihi media akan dibuatkan scroll.
- hide = tulisan yang melebihi media akan disembunyikan.
- auto = tulisan yang melebihi media akan dibuatkan scroll dan sisanya akan disembunyikan.
Isi Teks Anda disini
Kodenya :
<div style="overflow:auto; border: 5px solid #FF0000; margin: auto; padding: 3px; width: 95%; height: 100px; background-color:#ABABAB; text-align: justify; font color:#1AFF00;">Isi Teks Anda disini</div>Keterangan:
- Jika tulisan tersebut melebihi lebar 95% dari lebar container dan tinggi melebihi 100px maka akan dibuatkan scroll dan sisanya akan disembunyikan.
Perintah-perintah pada overflow sama dengan perintah pada border.
Untuk pemberian warna silahkan sobat lihat pada kode generator warna atau memasang generator warna pada blog sobat sendiri yang pernah saya posting sebelumnya disini
0 Comments