HTML Paragraph

HTML Paragraph 

Sekarang kita akan membahas tentang HTML Paragraph, seperti yang kita tau html memiliki banyak sekali struktur yang harus kita bahas salah satunya yaitu Paragraf HTML.

Nah, tutorialnya saya ambil dari w3schools.com, karena websitenya berbahasa inggris, jadi saya akan translate menjadi bahasa indonesia agar kalian bisa memahami apa yang saya tuliskan :D

Langsung saja ke koding :D eiitt.. ntar dulu...

nah, aplikasi yang saya pakai untuk belajar HTML adalah Sublime Text, seperti yang teman2 saya gunakan. Tetapi kalian bisa pake aplikasi apa saja yang berbasis html, seperti Notepad, Notepad++, dan masih banyak lagi, mungkin cuma itu yang saya tau :v

oke kalo gitu saya akan mulai pembahasannya :D

pertama baca Bismillah dulu, biar berkah hehe.

langsung ke koding ya kk.. 

nah yang diatas adalah contoh dari HTML Paragraph, polanya menggunakan <p>  dan diakhiri dengan </p> di sini kalian bisa masukkan kalimat apa saja yang kalian suka, nah seperti gambar diatas, saya misalkan : 

<p>Aku Cinta Ibu</p>

<p>This is Paragraph</p>

<p>This is Another Paragraph</p>

tetapi kalian bisa memasukkan kalimat atau kata yang kalian sukai. Hehe

oke next ini hasilnya jika kita preview di google chrome :

browser otomatis menambahkan sebuah baris kosong sebelum dan sesudah paragraf, seperti gambar diatas. 

Selanjutnya saya akan bahas tampilan HTML atau HTML Display yang berhubungan dengan paragraf, nah kalian tidak bisa yakin bagaimana tampilan HTML yang akan ditampilkan nantinya. Besar atau kecil layar, dan ukuran jendela akan menciptakan hasil yang berbeda.

Dengan HTML, kalian tidak dapat mengubah output dengan menambahkan ekstra spasi atau baris tambahan dalam koding HTML. Browser otomatis akan menghapus spasi ekstra dan baris tambahan ketika halaman ditampilkan. Setiap jumlah spasi dan sejumlah baris yang baru akan dihitung hanya satu ruangan.

Langsung ke koding dibawah ini :D ayo semangat!!

Ckck.. liat gambar diatas saya menggunakan kalimat yang sama tapi saya menambahkan ekstra spasi pada kalimat kedua, tetapi kedua kalimat tersebut juga saya tambahkan baris tambahan, akan tetapi hasilnya tidak kan bisa berubah :v liat gambar dibawah ini biar greget.. hehe

Selanjutnya saya akan membahas tentang HTML Line Breaks, HTML line breaks <br> elemen itu mendefinisikan satu baris paragraf, gunakan <br> jika kalian ingin menambahkan sebuah baris yang baru (line break) tanpa memulai paragraf yang baru. Liat gambar dibawah ini untuk penjelasannya :D

Pada gambar diatas saya menuliskan kalimat menggunakan paragraph Line breaks tanpa menambahkan paragraf yang baru, gambar dibawah ini adalah tampilannya di Google Chrome

Elemen <br> itu adalah sebuah elemen html baris kosong, elemen <br> juga tidak mempunyai tag akhir.

Selanjutnya saya akan membahas masalah tentang POEM atau The Poem Problem

Langsung ke koding :D

Saya menuliskan koding poem dengan menambahkan baris baru seperti koding diatas, akan tetapi poem akan menampilkan hanya satu baris saja, liat gambar dibawah ini untuk lebih jelasnya 

Hehe, ternyata materi HTML Paragraph lumayan panjang ya, nah sedikit lagi kita akan selesaikan materi ini, yang terakhir saya akan membahas tentang HTML <pre> element,

Elemen <pre> pada HTML menggambarkan sebuah blok teks sebelum diformat, dengan spasi dan baris yang tersruktur. Untuk menampilkan semuanya dengan spasi yang tepat dan line-breaks, kalian harus menambahkan <pre> elemen pada teks seperti gambar dibawah ini

Tidak seperti poem yang masih menggunakan elemen <p>, akan tetapi elemen <pre> akan memberikan tampilan dengan spasi dan baris yang terstrukutur seperti gambar dibawah ini

Ckck, alhamdulillah sudah selesai hehe, dibawah ini adalah catatan tambahan dari tag yang telah saya bahas :

Tag	Deskripsi
<p>	Menggambarkan sebuah paragraf
<br>	Menambahkan sebuah line break (a single line break)
<pre>	Menggambarkan teks sebelum diformat (pre-formatted text)

Nah sudah selesai pembahasan tentang paragraf html (HTML Paragraph), karena saya juga masih tahap belajar html, mungkin banyak yang kurang jelas pada pembahasan diatas, bila ada yang kurang jelas, silahkan bertanya di kolom komentar, maaf, dan terima kasih semoga materi yang saya sampaikan bermanfaat untuk kalian semua terutama untuk diri saya sendiri J hehe, sampai jumpa di materi selanjutnya..

Translated from w3schools.com

Created by Gugus Widiandito – Project X