Membuat Paragraf di HTML
Pada web, Paragraf digunakan untuk menampilkan teks atau artikel. Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>, dan <pre>.
Latihan 1: Tutorial Paragraf di HTML
- Buka teks editor notepad atau notepad++.
- Masukkan atau ketik kode berikut:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Paragraf di HTML</title> </head> <body> <p>Contoh paragraf berisi beberapa kalimat. Saya belajar HTML sama bos Ali di Cikande . Saat ini Sedang, Belajar tentang paragraf.</p> <p>Paragraf adalah kesatuan pokok pikiran yang terdiri atas beberapa kalimat. Sebuah paragraf terdiri atas satu pokok pikiran atau satu gagasan utama.</p> </body> </html> |
- Pada menu File pilih Save.
- Pada kotak dialog Save As, tentukan alamat/folder penyimpanan.
- Pada kotak masukan File name > ketik latihanParagraf.html (jangan lupa ekstensi html)
- Klik Save.
- Buka file latihanParagraf.html
Tampilan pada halaman web:
Latihan 2: Atribut pada Paragraf
Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dan lainnya.
Contoh berikut membuat sebuah paragraf rata tengah (center) dan paragraf rata kanan (right)
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Atribut pada Paragraf </title> </head> <body> <p align="center">Isi dari paragraf tentunya memiliki berbagai tujuan. Ada yang sifatnya memaparkan, mengajak, mendebat, dan lain-lain. Berdasarkan tujuan dari isinya, paragraf dapat dikelompokkan menjadi lima jenis.</p> <p align="right">Yang dimaksud paragraf campuran adalah gabungan gagasan utama yang berada di awal dan akhir rangkaian kalimat. Gagasan di kalimat awal biasanya berupa inti pikiran dari paragraf tersebut. Sementara itu, di bagian akhir kembali ditekankan mengenai gagasan utama dengan kalimat yang mungkin saja berbeda dari kalimat gagasan utama di awal.</p> </body> </html> |
- Pada menu File pilih Save.
- Pada kotak dialog Save As, tentukan alamat/folder penyimpanan.
- Pada kotak masukan File name > ketik Atribut pada Paragraf.html (jangan lupa ekstensi html)
- Klik Save.
- Buka file Atribut pada Paragraf.html
Tampilan pada halaman web:
Karena atribut align pada HTML dapat merubah tampilan dari web. Sebaiknya tugas perataan menggunakan CSS. Tugas utama dari HTML adalah membuat struktur dasar dari web.
Contoh perataan menggunakan CSS:
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Atribut pada Paragraf</title> </head> <body> <p style="text-align: right">Isi dari paragraf tentunya memiliki berbagai tujuan. Ada yang sifatnya memaparkan, mengajak, mendebat, dan lain-lain. Berdasarkan tujuan dari isinya, paragraf dapat dikelompokkan menjadi lima jenis.</p> <p style="text-align: center">Yang dimaksud paragraf campuran adalah gabungan gagasan utama yang berada di awal dan akhir rangkaian kalimat. Gagasan di kalimat awal biasanya berupa inti pikiran dari paragraf tersebut. Sementara itu, di bagian akhir kembali ditekankan mengenai gagasan utama dengan kalimat yang mungkin saja berbeda dari kalimat gagasan utama diawal.</p> </body> </html> |
Tampilan pada halaman web:
Latihan 3: Tag <br> pada Paragraf
Tag <br> biasanya digunakan untuk membantu tag <p>. Fungsi utama tag <br> adalah untuk membuat baris baru, biasa digunakan untuk membuat baris-baris dalam puisi.
Contoh: Misalkan kita ingin menampilkan pantun, bisa saja kita buat seperti ini di dengan tag <p>.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="en"> <head> <title>Fungsi Tag br </title> </head> <body> <p>Cuplikan Risalah hati dewa 19<br/> Aku bisa membuatmu<br/> Jatuh cinta kepadaku<br/> Meski kau tak cinta kepadaku<br/> Beri sedikit waktu<br/> Agar cinta datang karena telah terbiasa</p> </body> </html> |
Tampilan pada halaman web:
Latihan 4: Tag <pre> pada Paragraf
Pada kasus tertentu, kita ingin menampilkan paragraf dengan format yang lebih spesifik. Contohnya seperti pantun dan puisi yang paragrafnya ditulis dengan garis baru dan juga indentasi.
Hal ini bisa dilakukan dengan bantuan tag <br>. Namun ada juga tag lain yang bisa jadi alternatif, yakni tag <pre>.
Tag <pre> (preformatting) merupakan tag yang digunakan untuk menampilkan teks atau paragraf dalam format yang sudah kita tentukan di HTML.
Contoh:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="en"> <head> <title>Tag pre dalam Paragraf </title> </head> <body> <h1>Apatis Blues</h1> <p>oleh SLANK</p> <pre> Manipulasi di sini Perkosaan moral disana Ribut soal harga diri Permainan kuasa Wieeech… (Asal jangan ganggu gua) Prostitusi disini Saling sikut-sikut disana Diskriminasi menjadi Banyak orang-orang gila Lalu mau bilang apa Dan bagaimana Mending mainkan bluesku Nyanyikan bluesku Mainkan bluesku Nyanyikan bluesku </pre> </body> </html> |
Tampilan pada halaman web:
Tag <div>
Tag div merupakan tag yang sangat fleksibel, maka kamu dapat menggunakannnya dalam kondisi apapun. Misalnya ketika kita membagi halaman menjadi beberapa bagian sehingga akan tampak lokasi header, footer, main (tengah), side (samping) seperti sebuah halaman web.
Selanjutnya kamu juga dapat menambahkan tag lain di dalamnya untuk menampilkan sebuah link, gambar, text, dan lainnya. Apabila ingin menambahkan animasi seperti gerak memutar, gerak vertikal, horizontal, zoom in, zoom out, show-hide, dan lain-lain, kamu bisa memadukannya dengan CSS dan javascript.
Tag <div>, memiliki perilaku yang hampir sama dengan tag <p>. tag <div> bisanya digunakan untuk footer, bukan untuk membuat paragraf, melainkan tag untuk membuat layout web.
Published: Seno Adjie
1 Komentar
Mantap... Saya mengikuti web ini
BalasHapus