Aneka Pengaturan Paragraf HTML dengan CSS: jarak antar baris, tebal, warna, tipe border dan perataan.

Cara membedakan method POSTdengan GET di PHP emerer.com
Cara membedakan method POST dengan GET di PHP
31 May 2016
Memasukan Gambar ke Website, Mengatur Ukuran, Link dengan Gambar emerer.com
Memasukan Gambar ke Website, Mengatur Ukuran, Link dengan Gambar
9 June 2016

Aneka Pengaturan Paragraf HTML dengan CSS: jarak antar baris, tebal, warna, tipe border dan perataan.

Aneka Pengaturan Paragraf HTML dengan CSS jarak antar baris tebal warna tipe border perataan emerer.com

Ternyata beraneka ragam pengaturan paragraf HTML dengan CSS diantaranya:

  1. Mengatur baris pertama agar menjorok kedalam dalam suatu paragraf.
  2. mengatur jarak margin dan padding
  3. membuat garis tepi atau border dengan beraneka ragam tipenya
  4. mengatur warna di border tadi
  5. mengatur ketebalan boder yang sudah dibuat
  6. mengatur perataan dan
  7. mengatur jarak antar baris, kalau di Ms Word menyebutnya spasi.

Berikut ini contoh program pengaturan paragraf yang sudah saya buat.

Nah ini penjelasannya, perhatikan baik baik ya biar tidak bingung.

text-indent: 50px;
Ini digunakan untuk mengatur agar baris pertamapada paragraf yang saya buat terluhat menjorok ke dalam. Biar seperti di MS Word, kalau disana setiap paragraf bisa menjorok ke arah dalam menggunakan perintah tombol tap. Di HTML cukup menggunakan text-indent itu nilainya saya kasih 50 px biar terlihat jelas. Biasanya orang ngasih 20px dah cukup.

margin: 20px;
Perintah ini digunakan untuk mengatur jarak border dengan bagian LUAR dari paragraf yang sudah dibuat. Biar agak lega gitu loh. Jika ada konten lain misalnya gambar, vidio atau teks lain akan ada jarak nilainya 20px. Atur aja jaraknya sesuai kebutuhan.
AWAS JAGA JARAK, hehehhe seperti truk gandeng aja.

padding: 40px;
Nah margin ini digunakan dalam pengaturan jarak antara konten di DALAM border dengan garis border itu sediri, biar rapi. Lebih jelasnya untuk mengatur isi paragraf yaitu tulisan emerer.com dengan garis putus putus diatas.

border-style: dashed;
Yang satu ini digunakan untuk mengatur tipe dari border atau garis yang ada di sekeliling paragraf. Macamnya ada banyak: solid, dotted, dashed, double, groove, ridge, inset, outset dan none. Yang saya pakai di atas adalah yang tipenya dashed, silahkan coba coba semuanya. Mana yang cocok di hati.

border-top-color: brown;
border-bottom-color: red;
border-left-color: green;
border-right-color: aqua;
Meriah….. Warna warni dari border, coklat, merah, hijau dan biru laut. Itu cuma contoh aja, jangan ditiru. Biasanya satu warna aja. Perintah dasarnya sebenarnya hanya border-color. Jadi jika kalian ingin satu warna cukup mengganti dari 4 baris diatas dengan perintah ini:
border-color: red;
Sistem warna terserah, mau pakai yang seperti diatas atau pakai kode #heksadesimal yang 8 digit atau bisa dengan metode RGB. Bisa semua.

border-width: 5px;
Tebal dari border dapat diatur dengan perintah ini, berarti perintah diatas menyuruh browser menebalkan border setebal 5px. Gunakan tingkat ketebalan sesuai dengan tinggkat kebutuhan.

text-align: center;
Untuk merapikan perataan dalam suatu paragraf, rata kanan, kiri, atau tengah. Nilainya bisa dipakai center, bisa right, pilih left atau justify.

line-height: 200%;
Kalau dalam Ms Word kita mengenal istilah 2 spasi. Dalam HTML dan CSS kita menggunakan line-height yang nilainya 200%. Maksudnya 200% , adalah 200% dari nilai secara umum atau  dua kali lipat dari ukuran sebenarnya. Terus kenapa kok dibuat 2 spasi, biar konten dari website kita nampak banyak, hehehhee. Kan enak dipandang mata juga.

Semoga penjelasan diatas membantu pemahaman dalam pengaturan paragraf. Jika ada yang kurang jelas silahkan tulis di komentar di bagian bawah. Terima kasih banyak.

 

Muhammat Rasid Ridho
Muhammat Rasid Ridho
Software Developer yang Suka Jalan jalan, Belajar Jaringan dan Berbagi Cerita. Instagram: muhammat.rasid.ridho Jangan lupa tulis komentar di bawah ini ya teman teman ... !

1 Comment

  1. www.javanesetrans.com says:

    sip, buat panduan referensi belajar kode html. makasih mas ridho. share trus ilmunya.

Leave a Reply

Your email address will not be published.