Sunday, February 17, 2019

Cara Membuat Paragraf dengan HTML

 


Cara Membuat Paragraf dengan HTML(tag p)

Setelah memahami Struktur Dasar dari HTML, selanjutnya kita akan mempelajari Cara Membuat Paragraf dengan HTML. Dalam membuat paragraf di dokumen HTML sedikit berbeda dengan membuat paragraf pada aplikasi seperti Ms. Word atau semacamnya. Jadi web browser tidak akan menampilkan beda enter atau spasi.

Lebih jelas lagi buatlah dokumen HTML dengan struktur seperti yang sudah kita pelajari kemarin.

[code hl="1, 4, 7"] <html> <head> <title>Title Website Anda</title> </head> <body> Ini adalah paragraf 1 Ini adalah paragraf 2 </body> </html> [/code]

Pada kode diatas, kita tambahkan kata "paragraf 1" dan "paragraf 2" dengan memisahkannya menggunakan 'enter'. Save hasil kerja tersebut dengan nama paragraf.html dan jalankan filenya.



Hasil dari kode diatas menampilkan "paragraf 1" dan "paragraf 2" dalan satu baris, walaupun sudah kita pisahkan dengan 'enter'. Hasil ini juga akan sama jika kita menggunakan 'spasi'. Hal ini terjadi karena HTML mengabaikan 'spasi' dan 'enter'.

Jadi pada intinya kita harus memberikan instruksi pada web browser untuk membuat paragraf satu dengan yang lain harus bertempat pada baris yang berbeda.


Tag Paragraf <p> 

Pada pembuatan paragraf dalam HTML menyediakan tag yang dikhususkan untuk membuat paragraf, yaitu tag <p>. Sekarang kita gunakan tag ini pada dokumen kita yang tadi. 

[code hl="1, 4, 7"] <!DOCTYPE html> <html> <head> <title>Title Website Anda</title> </head> <body> <p>Ini adalah paragraf 1</p> <p>Ini adalah paragraf 2</p> </body> </html> [/code]

Setelah menambahkan tag p pada setiap kalimat, setiap paragraf akan ada pada posisinya masing dan tentunya web browser memberikan spasi yang seharusnya ada antara paragraf.

Tag Break <br> 

Selain menggunakan tag p, kita juga bisa menggunakan tag break (<br>) untuk membuat baris baru dalam dokumen HTML. Ketikkan kode dibawah dan jalankan.


Dalam pengunaan tag <br> ada dua opsi pilihan, yaitu tag <br> dan kemudian di tutup dengan tag </br>. Atau menggunakan tag <br /> tanpa menggunakan tag penutup. Dan hasilnya akan tetap sama.

[code hl="1, 4, 7"] <!DOCTYPE html> <html> <head> <title>Title Website Anda</title> </head> <body> <br>Ini adalah paragraf 1</br> Ini adalah paragraf 2<br /> </body> </html> [/code]


Sebenarnya tag <br> ini bukan untuk membuat paragraf, melainkan hanya untuk memisah baris suatu teks dengan teks lain saja. jadi jika kita ingin membuat sebuah struktur paragraf baru, lebih baik menggunakan tag <p>.


Tag Tebal dan Tag Cetak Miring dalam HTML(Tag Strong & Em)

Saat kita membaca artikel atau sebuah berita dikoran, biasanya kita mendapati kata yang dicetak tebal atau-pun miring, ini bertujuan untuk melakukan penekanan pada kata yang diperlukan. Sama halnya dengan artikel atau berita diwebsite. 

Untuk menebalkan dan memiringkan suatu kata dalam dokumen HTML, kita bisa menggunakan tag <strong> untuk menebalkan dan tag <em>(emphasis) untuk memiringkan teks.

Contoh pengunaan tag <strong> dan <em>.

[code hl="1, 4, 7"] <!DOCTYPE html> <html> <head> <title>Title Website Anda</title> </head> <body> <p> Belajar <em>pemrogaman web</em> akan mudah jika kita<br /> mau mempelajarinya dengan <strong>sungguh-sungguh</strong> dan penuh<br /> semangat<br /> </p> </body> </html> [/code]

Dalam HTML juga terdapat tag lain yang memiliki fungsi sama dengan kedua tag diatas, yaitu tab <b> untuk menebalkan huruf dan tag <i> untuk memiringkan huruf. Namun penggunaan tag ini tidak disarankan karena akan mengganggu tampilan dari HTML.
Setelah memahami cara untuk membuat paragraf, selanjutnya yang kita pelajari adalah membuat judul dalam dokumen HTML dengan menggunakan tag <h1>.

No comments:
Write comments