Tag paragraf HTML [] akan sering kita gunakan di berbagai jenis situs atau halaman web.
Termasuk toko online, blog, profil perusahaan, portofolio dan sebagainya.
Kita bisa saja membuat paragraf menggunakan tag selain dan menyesuaikan gayanya menggunakan CSS agar menyerupai paragraf, tapi ini bukan praktik yang baik.
Oleh karena itu kali ini kita akan mempelajari beberapa topik terkait paragraf, mulai dari pembuatan, menyesuaikan gaya, mengatur jarak antar paragraf dan sebagainya.
Mari kita mulai.
- Apa Itu Paragraf?
- Cara Membuat Paragraf
- Jangan Gunakan Tag untuk Paragraf
- Membuat Baris Baru dengan Tag
- Membuat Garis Horizontal dengan Tag
- Menggunkaan Tag
- Menyesuaikan Gaya Paragraf
- Warna Latar Belakang dan Teks
- Ukuran Huruf
- Jarak Antar Baris
- Jarak Antar Paragraf
- Jenis Huruf
- Indentasi [menjorok]
Apa Itu Paragraf?
Paragraf adalah elemen yang mewakili sebuah paragraf.
Paragraf biasanya direpresentasikan sebagai blok atau kumpulan teks yang dipisahkan dengan spasi putih dari blok yang berdekatan.
Paragraf digunakan untuk mengelompokkan struktur konten, misalnya gambar dan paragraf akan memiliki tag yang berbeda.
Cara Membuat Paragraf
Untuk membuat paragraf di HTML, kita bisa menggunakan tag yang dibuat khusus untuk paragraf, yaitu
.Dalam stuktur HTML tertentu tag
tidak membutuhkan penutup, namun kita disarankan untuk selalu menulis tag penutup.Teks atau konten yang dijadikan sebagai paragraf bisa ditulis diantara tag pembuka dan penutup.
Contoh:
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf. Ada banyak materi gratis terkait pemrograman yang bisa kita pelajari di Kodealgo termasuk HTML, CSS, JavaScript dan sebagainya.Hasil:
Jangan Gunakan Tag
untuk ParagrafKesalahan umum yang sering dilakukan oleh pemula adalah menggunakan tag yang tidak sesuai untuk membuat elemen tertentu.
Misalnya, niatnya ingin membuat paragraf, tapi tag yang digunakan adalah
.Ini bukan hanya soal visual.
Kalau urusan visual bisa kita atur menggunakan CSS agar memiliki tampilan yang mirip seperti paragraf.
Tapi ini bukanlah parktik yang baik, karena tag
tidak dirancang untuk paragraf.Jadi, gunakan tag yang sesuai fungsinya ketika membuat elemen HTML. Untuk paragraf, selalu gunakan tag
.Contoh baik:
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf. Ada banyak materi gratis terkait pemrograman yang bisa kita pelajari di Kodealgo termasuk HTML, CSS, JavaScript dan sebagainya.Contoh buruk:
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf. Ada banyak materi gratis terkait pemrograman yang bisa kita pelajari di Kodealgo termasuk HTML, CSS, JavaScript dan sebagainya.Berikut perbandingan paragraf yang menggunakan tag
[paragraf 1 dan 2] dan[paragraf 3 dan 4]:Membuat Baris Baru dengan Tag
Baris baru [enter] yang kita tulis di dalam tag
tidak ditampilkan di browser.Lebar paragraf akan secara otomatis menyesuaikan dengan lebar elemen yang membungkusnya.
Jika lebar elemen pembungkus tidak muat dalam satu baris, secara otomatis akan membuat baris baru.
Mari kita lihat contoh berikut:
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf.Lihat baris baru setelah kata "topik", ini tidak ditampilkan di browser.
Seperti ini hasilnya jika saya perkecil jendela browser:
Jika jendela browser seukuran layar hasilnya mungkin akan ditampilkan dalam satu baris, tergantung ukuran layar atau elemen pembungkus.
Terus bagaimana jika saya ingin menambahkan baris baru di dalam paragraf?
Gunakan tag
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf.Hasil:
Jangan gunakan tag
yang berbeda untuk mengelompokkan setiap paragraf.Membuat Garis Horizontal dengan Tag
Tag
atau[horzontal rule] dapat digunakan untuk membuat garis horizontal. Ini biasanya digunakan untuk memisahkan paragraf antar topik.Gaya garis tergantung browser yang digunakan, di Mozilla Firefox garis terlihat lebih tebal dibandingkan dengan Google Chrome.
Tapi, ini bisa kita atur menggunakan CSS.
Contoh:
Saya sedang belajar HTML di Kodealgo, saat ini saya sedang mempelajari topik terkait paragraf mulai dari cara membuat hingga mengatur gaya paragraf. Ada banyak materi gratis terkait pemrograman yang bisa kita pelajari di Kodealgo termasuk HTML, CSS, JavaScript dan sebagainya.Hasil:
Menggunkaan Tag
Teks yang dibungkus dengan tag
akan ditampilkan dengan format yang sama seperti yang ditulis di dalam file HTML.Tidak seperti
, jika kita menambahkan baris baru, indentasi [menjorok], spasi dan sebagainya, itu semua akan ditampilkan apa adanya.Secara default, teks yang ditempatkan di dalam tag ini akan menggunakan jenis huruf monospace.
Contoh:
ini teks tanpa indentasi ini teks dengan identasi ini paragraf setelah dua kali enterHasil:
Tag
sering digunakan untuk membungkus kode atau skrip pemrograman agar strukturnya dipertahankan ketika dibuka di browser.Termasuk semua contoh kode yang Anda lihat di Kodealgo menggunakan tag
.Menyesuaikan Gaya Paragraf
Secara default, browser akan memberikan gaya dasar untuk paragraf HTML. Tapi kita bisa mengaturnya sesuai keinginan menggunakan CSS.
Kita akan menggunakan atribut
styleuntuk menyisipkan CSS di dalam tag pembuka paragraf.Metode ini sebetulnya tidak direkomendasikna, jika Anda sudah mempelajari CSS lebih baik tulis di dalam file CSS agar lebih rapi.
Mari kita mulai.
1. Warna Latar Belakang dan Teks
Untuk mengubah warna latar belakang paragraf bisa menggunakan properti CSS
background-color, sedangkan untuk warna teks menggunakancolor.Kita bisa menggunakan warna standar seperti
tomato,orange,slatebluedan sebagainya, atau menggunkaan kode warna RGB, HEX, HSL, RGBA, atau HSLA.Contoh:
Ini adalah paragraf yang hanya menggunakan warna latar belakang. Semua teks yang ada di dalam paragraf ini akan memiliki warna latar belakang. Ini adalah paragraf yang hanya menggunakan warna teks. Semua teks di dalam paragraf ini akan memiliki warna. Ini adalah paragraf yang menggunakan warna latar belakang dan warna teks. Semua teks di paragraf ini akan memiliki warna latar belakang dan warna teks.Hasil:
2. Ukuran Huruf
Untuk mengubah ukuran huruf paragraf, kita bisa menggunakan properti CSS
font-size. Kita bisa menggunakan satuan ukuran px, em, rem dan sebagainya.Contoh:
Semua teks di dalam paragraf ini memiliki ukuran 20px. Semua teks di dalam paragraf ini memiliki ukuran 25px.Hasil:
3. Jarak Antar Baris
Terkadang kita juga perlu mengatur jarak antar baris dalam paragraf.
Misalnya ketika ukuran huruf diperbesar, agar terlihat lebih rapi kita juga perlu memperbesar ukuran jarak antar baris.
Jarak antar baris bisa kita atur menggunakan properti CSS
line-height.Contoh:
Paragraf 1: Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae odio at quod, doloremque ex vel? Dolore, impedit incidunt cumque tempore vel officiis esse omnis exercitationem soluta eos. Facere, quam autem!Hasil:
4. Jarak Antar Paragraf
Untuk mengatur jarak antar paragraf kita bisa menggunakan properti CSS
margin-top[jarak atas] ataumargin-bottom[jarak atas].Contoh:
Paragraf 1: Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae odio at quod, doloremque ex vel? Dolore, impedit incidunt cumque tempore vel officiis esse omnis exercitationem soluta eos. Facere, quam autem! Paragraf 1: Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae odio at quod, doloremque ex vel? Dolore, impedit incidunt cumque tempore vel officiis esse omnis exercitationem soluta eos. Facere, quam autem!Hasil:
5. Jenis Huruf
Jika tidak ditentukan secara manual, browser biasanya akan menggunakan jenis huruf yang tersedia di komputer.
Di Windows, biasanya menggunakan Times New Roman.
Di linux atau MacOS mungkin beda lagi, tergantung platform yang digunakan untuk menjalankan browser.
Untuk mengubah jenis huruf paragraf, kita bisa menggunakan properti CSS
font-family.Contoh:
Times New Roman: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quos repellat voluptate voluptatum magni dolore consequuntur perferendis iste sint? Eius, incidunt? Arial: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium atque ullam dolorum perferendis architecto veritatis delectus amet fuga reprehenderit repudiandae? Georgia: Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse minima nemo placeat itaque. Iste, officiis veritatis! Autem voluptatibus asperiores aliquam?Hasil:
6. Indentasi [Menjorok]
Untuk membuat baris pertama menjorok ke dalam, kita bisa menggunakan properti CSS
text-indent.Kita bisa menentukan kedalam atau nilai properti
text-indentdalam px, em, atau persen.Contoh:
Baris pertama pada paragraf ini akan menjorok sebesar 50px. Hanya baris pertama saja, baris berikutnya tidak menjorok, mirip seperti koran.Hasil:
Bagaimana cara membuat Paragraf pada HTML *?
Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel. Paragraf pada HTML dibuat dengan tag. Selain tag ini, ada juga tag pendukung lain seperti
, ,
, dan.
Apa itu br dalam HTML?
Pengertian Tag adalah tag yang di sediakan pada html untuk membuat baris baru atau sering dan lebih mudah di sebut dengan membuat enter.Apa perintah HTML untuk membuat teks atau tulisan bergaris bawah?
Membuat Garis Bawah pada Teks Garis bawah di HTML dapat kita buat dengan tag [underline] atau juga tag [insert]. Hasilnya: Pada contoh di atas, kita menggunakan tag untuk membuat teks tercoret. Lalu diikuti dengan teks yang ditambahkan [insert].Tag HTML apa saja?
Berikut ini daftar tag yang wajib ada di HTML:.— untuk deklarasi type dokumen;.— tag utama dalam HTML;.— untuk bagian kepala dari dokumen;.— untuk judul web;.— untuk bagian body dari dokumen..Chủ Đề
- Membuat Baris Baru dengan Tag