Buat baris baru di css

Pada tutorial CSS kali ini, kita akan membahas cara mengatur tinggi baris pada paragraf HTML. Tinggi baris atau "ruang paragraf" besar di CSS diatur menggunakan properti. tinggi garis

Mengatur Tinggi Garis dalam Paragraf dengan ketinggian garis

Yang dimaksud dengan tinggi garis dalam suatu paragraf adalah jarak antara satu garis dengan garis di bawahnya. Dalam penggunaan sehari-hari kami menggunakan istilah "ruang paragraf" untuk ini. Misal agar skripsi lebih mudah dibaca, kita ubah spasi (pada aplikasi Microsoft Word) menjadi 1,5. Dibandingkan dengan spasi 1 spasi, susunan paragraf 1,5 spasi akan membuat spasi baris dalam paragraf lebih “santai”. Di CSS, pengaturan "ruang besar" ini ditangani dengan properti line-height

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

p {
   line-height:16px;
}

Cara menghitung nilai tinggi garis

Jika nilai tinggi garis ditetapkan dalam satuan piksel, perhitungan nilai tinggi garis cukup sederhana. Untuk paragraf yang memiliki ukuran font 14px, dan tinggi baris 18px, jarak antar baris dihitung berdasarkan rumus berikut. 18px-14px. Hasil perhitungan yaitu 4px adalah jarak antar garis yang dihasilkan. Jarak antara garis juga dikenal sebagai leading

Bagaimana jika satuannya tercantum dalam persen atau em? . 150% atau tinggi garis. 1. 5em pada teks berukuran 14px, maka tinggi garis akan menjadi 150%*14px=21px. Jadi jarak antar garis (terdepan) 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 cara menghitung hasil terdepan dari tulisan setinggi garis ini? . 1. 5 akan menghasilkan nilai yang sama dengan tinggi garis. 150%. Namun untuk kasus tag di dalam tag (nested tag), hasil yang didapatkan akan berbeda

Misalkan kita membuat property line-height: 150% dan font-size: 14px pada tag . 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

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 , 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).

eBook CSS Uncover Duniailkom

Jika Anda ingin mempelajari cara mendesain web, CSS harus dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas tentang CSS secara lebih detail dan lengkap, mulai dari dasar hingga fitur terbaru dari CSS3 seperti animasi dan web yang responsif. Penjelasan lebih lanjut bisa ke. eBook CSS Uncover Duniailkom

Salam belajar HTML semuanya kali ini kita akan melanjutkan study kita, Bahasan kali ini yaitu tentang cara membuat baris baru di HTML, Yaitu dengan tag break dan horizontal. meskipun dalam text, Kita menggunakan tag paragraf

agar tulisan tidak berantakan, namun adakalanya kita membutuhkan tag BR atau HR, Agar mendapatkan baris baru yang lebih.

Cara Membuat Baris Baru di HTML

Kedua tag break dan horizontal ini memiliki kesamaan fungsi, yaitu memberikan baris baru, cuma bedanya yaitu pada bentuk tampilan dan penulisannya. Jika menggunkan tag
untuk baris baru, maka dalam tampilan halaman akan tampak adanya baris baru saja. Namun jika kita menggunakan tag

Berikut adalah contoh penulisan dari tag baris baru ini

…content…

…content…

---

Kode ini terlihat berbeda dengan kode tag lain bukan? Jika tag HTML lain, untuk menutup fungsinya, perlu tag kedua yang disertai dengan garis miring seperti

Membuat Baris Baru menggunakan Tag

Untuk melihat fungsi dari tag Break Ruler (
), Mari kita langsung saja sisipkan pada kode HTML. Silahkan buka text editornya, dan ketikan kode HTML berikut ini.

<html>
<head>
<title> mencoba belajar tag break line </title>
</head>
<body>

MENU MAKAN<br>nasi<br>ikan<br>jus lemon<br>dan besi berkarat<br>tak lupa emas sebagai pencuci mulut

</body>
</html>

Penjelasan kode

kode tag
akan membuat tulisan menjadi baris Baru.

Sekarang simpan kode dengan ekstensi “. html", kurang lebih hasilnya akan seperti di bawah ini

Membuat Baris Baru dengan Kode Tag

Mari kita lihat contoh penggunaan tag penggaris/garis horizontal berikut ini. pertama buka aplikasi editor, dan ketikkan kode perintah HTML berikut

<html>
<head>
<title>belajar horisontal line </title>
</head>
<body>

BIODATA<hr>Nama; ari prayogi putra <hr> t/t/l ;tasikmalaya, 2026 <hr>umur : seumur jagung <hr>jodoh; mudah mudahan ada amiin

</body>
</html>

Lihat juga Cara membuat daftar di html

Simpan file. kurang lebih hasil dari penggunaan tag penggaris horizontal, akan terlihat seperti gambar berikut

Apa perintah HTML untuk membuat baris baru?

Apa itu teks CSS?

Apa perbedaan antara CSS dan HTML?

Sebutkan elemen elemen CSS apa saja?