Belajar HTML Part #5 - Membuat Paragraf Pada HTML
Mas Hary
---
Crewnesia - Setelah belajar tentang memmbuat heading pada html, kali ini kita akan membahas materi tentang membuat paragraf pada html dan materi ini masih berkaittan dengan yang kalian telah pelajari di materi mengenal tag, element dan atribut.
Cara Membuat Paragraf DI HTML
Paragraf merupakan kumpulan dari beberapa kalimat dan paragraf biasanya digunakan untuk membuat teks atau artikel. Untuk membuat paragraf pada html biasanya diawali dengan tag <p>, selain tag itu adapun tag pendukung seperti <pre>, <br>, dan <hr>.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Part #5 - Membuat Paragraf</title>
</head>
<body>
<p>Paragraf adalah kumpulan dari beberapa kalimat pada website, paragraf biasanya digunakan untuk membuat teks atau artikel.</p>
</body>
</html>Hasilnya :
Atribut Untuk Paragraf
Biasanya paragraf ditambahkan beberapa atribut seperti; align, class, id dll. Atribut align biasanya digunakan untuk perataan teks sedangkan untuk class dan id biasanya digunakan sebagai penanda, maksud dari penanda adaldah element-element yang ada di html agar bisa dimanipulasi menggunakan css atau javascript.
Perbedaan class dan id adalah dari cara memanggilnya, untuk memanggil class pada css atau javascript biasanya menggunakan tanda titik ".", sedangkan untuk memanggil id pada css atau javascript biasayan menggunakan tanda pagar "#".
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Part #5 - Membuat Paragraf</title>
<style type="text/css">
.kotak{
background-color: blue;
width: 200px;
color: white;
padding: 20px;
}
#kotak{
background-color: red;
width: 200px;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<!-- Contoh Pengunaan class -->
<p class="kotak">Paragraf adalah kumpulan dari beberapa kalimat pada website, paragraf biasanya digunakan untuk membuat teks atau artikel. Paragraf ini menggunakan atribut class</p>
<!-- Contoh Penggunaan id -->
<p id="kotak">Paragraf adalah kumpulan dari beberapa kalimat pada website, paragraf biasanya digunakan untuk membuat teks atau artikel. Paragraf ini menggunakan atribut id</p>
</body>
</html>
Hasilnya :
Tag <br>
Sebenernya tag <br> ini bukan lah untuk membuat paragraf. Biasanya tag <br> digunakan untuk membuat baris baru.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Part #5 - Membuat Paragraf</title>
</head>
<body>
<!-- Tidak Menggunakan Tag <br> -->
<p>Asam pauh dari seberang (a)
Dimuat orang dalam pedati (b)
Badan jauh dirantau orang (a)
Kalau sakit siapa mengobati (b) </p>
<!-- Menngunakan Tag <br> -->
<p>Asam pauh dari seberang (a)<br />
Dimuat orang dalam pedati (b)<br />
Badan jauh dirantau orang (a)<br />
Kalau sakit siapa mengobati (b) </p>
</body>
</html>
Hasilnya :
Tag <pre>
Tag <pre> adalah singkatan dari Preformatted Text biasanya digunakkan untuk yang belum di format, jika text dimasukkan ke dalam tag <pre> maka HTML akan menampilkan text tersebut apa adanya.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Part #5 - Membuat Paragraf</title>
</head>
<body> <pre>Asam pauh dari seberang (a)
Dimuat orang dalam pedati (b)
Badan jauh dirantau orang (a)
Kalau sakit siapa mengobati (b) </pre>
</body>
</html>Hasilnya :
Tag <hr>
Tag <hr> sebenernya juga bukan untuk membuat paragraf melainkan untuk membuat garis untuk memisahkan konten atau paragraf satu dengan lainnya, istilah lainnya adalah paragraph-level thematic break.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML Part #5 - Membuat Paragraf</title>
</head>
<body>
<p>Tag pre adalah singkatan dari Preformatted Text biasanya digunakkan untuk yang belum di format, jika text dimasukkan ke dalam tag pre maka HTML akan menampilkan text tersebut apa adanya.</p>
<hr />
<p>Paragraf adalah kumpulan dari beberapa kalimat pada website, paragraf biasanya digunakan untuk membuat teks atau artikel.</p>
</body>
</html>Hasilnya :
Pada materi ini kita sudah belajjar cara membuat paragraf pada HTML dan kita juga sudah belajar beberapa tag yaitu
- Tag <p> Untuk membuat paragraf.
- Tag <br> Untuk membuat Baris Baru.
- Tag <hr> Untuk membuat Garis.
- Tag <pre> Untuk membuat paragraf dengan format yang sudah ditentukan.
Selanjutnya kita akan belajar materi Tect Formattting, Langsung saja pelajari materinya.
Posting Komentar
Posting Komentar