Panduan html untuk spasi paragraf

p{     margin-bottom : 2px;     margin-top : 2px; } .styleku{     width : 300px;     height : auto;     background : yellow; } .styleku *{     width : auto;     height : auto;     background : green; } .styleku1{     line-height : 1;     word-spacing : 1em; } .styleku2{     line-height : 2;     word-spacing : 2em; } .styleku3{     line-height : 1;     word-spacing : 2em; } .styleku4{     line-height : 2;     word-spacing : 1em; }

Kode HTML-nya bisa kalian buat sendiri. Kalian juga bisa menggunakan kode HTML di bawah ini jika malas mengetik.

<HTML> <HEAD>     <TITLE>Belajar HTML</TITLE>     <link rel="stylesheet" href="cssku.css"> </HEAD> <BODY> <h3>Belajar HTML</h3>     <div class="styleku">         <div class="styleku1">             <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.             </p>         </div>         <div class="styleku2">             <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.             </p>         </div>         <div class="styleku3">             <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.             </p>         </div>            <div class="styleku4">             <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.             </p>         </div>     </div> </BODY> </HTML>

Panduan html untuk spasi paragraf

Nilai-nilai yang bisa diberikan pada line-height dan word spacing, yaitu :

  1. normal
  2. initial
  3. inherit
  4. Panjang berupa angka dengan satuan px, cm, pt, em, dll.

Khusus untuk line-height, penulisan angka tanpa satuan bisa berarti kelipatan dari ukuran normal. Dalam hal ini, nilai 2 berbeda dengan 2px, 2cm, 2em, dan 2pt.

  • Tweet
  • Share
  • Share
  • Share

Bagaimana cara mengatur spasi antar baris?

Mengubah penspasian baris di sebagian dokumen.

Pilih satu atau beberapa paragraf untuk diperbarui. ... .

Masuk ke beranda > baris dan Penspasian paragraf..

Pilih opsi Penspasian baris dan pilih opsi dalam kotak penspasian baris ..

Menyesuaikan pengaturan sebelum dan sesudah untuk mengubah spasi antar paragraf..

Pilih OK..

Untuk membuat spasi pada HTML menggunakan perintah apa?

Menggunakan &nbsp; Yang perlu diingat adalah pada HTML berapa kalipun tombol spasi kita klik yang ditampilkan hanya lah satu spasi.

Apa itu   pada HTML?

Tikkan &nbsp; untuk menambahkan spasi di tempat yang Anda inginkan. Hasil kode ini dikenal sebagai non-breaking space atau spasi tetap karena mencegah pemisahan baris pada lokasi penempatan kode.

Bagaimana caranya merubah spasi baris menjadi 2?

Membuat spasi ganda pada teks yang dipilih.

Pilih teks yang ingin Anda ubah..

Pada tab Beranda, dalam grup Paragraf, klik Penspasian Baris dan Paragraf( Penspasian Baris di Word 2007) ..

Dalam tutorial CSS kali ini kita akan membahas tentang Cara Mengatur Tinggi Baris dalam Paragraf HTML. Tinggi baris atau besar “spasi paragraf” di dalam CSS diatur menggunakan property: line-height.


Mengatur Tinggi Baris dalam Paragraf dengan line-height

Yang dimaksud dengan tinggi baris dalam paragraf adalah besar jarak antara satu baris dengan baris di bawahnya. Dalam penggunaan sehari-hari kita menggunakan istilah “spasi paragraf” untuk hal ini. Misalnya agar tulisan skripsi menjadi lebih mudah dibaca, kita mengganti spasi (dalam aplikasi microsoft word) menjadi 1,5. Dibandingkan dengan jarak 1 spasi, pengaturan paragraf sebesar 1,5 spasi akan membuat jarak baris di dalam paragraf menjadi lebih “lega”. Didalam CSS, pengaturan “besar spasi” ini ditangani dengan property line-height.

Nilai dari property line-height bisa diisi dengan nilai pixel, persen, em, atau angka (tanpa satuan). Berikut adalah contoh penulisannya:

p { line-height:16px; }


Cara Perhitungan Nilai line-height

Jika nilai line-height ditetapkan dengan satuan pixel, perhitungan nilai line-height cukup sederhana. Untuk paragraf yang memiliki ukuran font (font-size) sebesar 14px, dan line-height sebesar 18px, maka jarak antar baris dihitung berdasarkan rumus berikut: 18px-14px. Hasil perhitungannya, yakni 4px adalah jarak antar baris yang dihasilkan. Jarak antar baris ini dikenal juga dengan istilah leading.

Bagaimana jika satuannya dicantumkan dalam persen atau em? Jika kita membuat line-height: 150% atau line-height: 1.5em pada teks yang berukuran 14px, maka line-height akan menjadi 150%*14px=21px. Sehingga jarak antar baris (leading) untuk contoh ini adalah 21px-14px=7px.

Selain satuan pixel, persen dan em, line-height juga memiliki satuan khusus yang digunakan untuk line-height, yaitu angka (tanpa satuan). Contoh penulisannya adalah sebagai berikut:

p { line-height:1.5; }

Bagaimana perhitungan hasil leading dari penulisan line-height ini? Dalam kebanyakan kasus, line-height:1.5 akan menghasilkan nilai yang sama dengan line-height: 150%. Namun untuk kasus tag di dalam tag (nested tag) hasil yang didapat akan berbeda.

Misalkan kita membuat property line-height: 150% dan font-size: 14px pada tag <body>. Karena sifat line-height ini diturunkan ke dalam tag-tag lain (bersifat inherit) maka seluruh tag di dalam halaman HTML akan mendapatkan nilai line-height yang sama. Akan tetapi, nilai line-height yang diturunkan bukanlah line-height:150%, namun hasil perhitungannya, yakni line-height sebesar 21px (hasil dari 150%*14px).

Apabila di dalam halaman tersebut kita memiliki tag <p> dengan font-size sebesar 36 pixel, maka line height:21px akan membuat paragraf susah dibaca.

Dalam kasus ini, jika kita mengganti property line-height menjadi line-height:1.5 pada tag <body>, maka setiap tag dibawahnya akan mendapatkan nilai line-height:1.5. Sehingga untuk paragraf dengan font-size: 36px, efek turunan line-height:1.5 akan menghasilkan nilai line-height: 54px (hasil dari 150%*36).

Panduan html untuk spasi paragraf
Dalam contoh diatas, saya membuat nilai line-height yang berbeda-beda untuk setiap paragraf. Untuk paragraf pertama, saya tidak mencantumkan nilai line-height, sehingga akan menggunakan nilai bawaan web browser.

Panduan html untuk spasi paragraf

eBook CSS Uncover Duniailkom

Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

Apa perintah untuk membuat spasi pada HTML?

Menggunakan &nbsp; Di atas merupakan contoh penggunaan dari kode &nbsp;. Yang perlu diingat adalah pada HTML berapa kalipun tombol spasi kita klik yang ditampilkan hanya lah satu spasi.

Bagaimana penulisan paragraf yang benar pada HTML?

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel. Paragraf pada HTML dibuat dengan tag <p> . Selain tag ini, ada juga tag pendukung lain seperti <div> , <hr> , <br> , dan <pre> .

Apa itu   pada HTML?

Tikkan &nbsp; untuk menambahkan spasi di tempat yang Anda inginkan. Hasil kode ini dikenal sebagai non-breaking space atau spasi tetap karena mencegah pemisahan baris pada lokasi penempatan kode.

Manakah atribut yang dipakai oleh paragraf?

Atribut untuk Paragraf Atribut align merupakan atribut yang digunakan untuk pertaan teks pada paragraf.