Belajar HTML #03: Membuat paragraf dalam HTML

-

 

Hai teman-teman! Setelah kita belajar tentang dasar-dasar HTML, seperti apa itu tag, elemen, dan atribut, sekarang saatnya untuk melangkah lebih jauh. Kali ini, kita akan mengenal beberapa elemen dasar HTML yang sering digunakan saat membuat website.

Yuk, kita mulai dengan elemen paragraf. Apa sih elemen paragraf itu? Mari kita bahas bersama!


Membuat Paragraf di HTML

Halo, teman-teman! Mari kita ngobrol tentang paragraf. Apa sih paragraf itu? Sederhananya, paragraf adalah kumpulan beberapa kalimat yang kita satukan untuk menyampaikan informasi. Dalam dunia web, kita biasanya menggunakan paragraf untuk menampilkan teks atau artikel yang ingin kita bagi.

Di HTML, kita bisa membuat paragraf dengan menggunakan tag <p>. Ini sangat mudah! Tapi tunggu dulu, ada juga beberapa tag pendukung yang bisa membantu kita, seperti <div> untuk mengelompokkan konten, <hr> yang membuat garis horizontal sebagai pemisah, <br> untuk membuat jeda baris, dan <pre> yang menampilkan teks dengan format yang sudah kita atur.

Sudah siap untuk mencoba? Mari kita lihat bagaimana cara menulisnya dalam kode HTML! 



<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di NgodingYuk Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

Hasilnya akan seperti dibawah ini

 

Atribut untuk Paragraf

Biasanya paragraf ditambahkan dengan beberapa atribut seperti align, id, class, dll.

Contoh:


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p align="center">Ini adalah sebuah paragraf yang berisi beberapa 
        kalimat. Saya sedang belajar HTML di NgodingYuk Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <p align="right">Paragraf adalah kumpulan dari beberapa kalimat yang 
        saling mendukung. Paragraf dibuat dengan menentukan ide pokok terlebih
        dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

Hasilnya :

 

Atribut align

merupakan atribut yang digunakan untuk perataan teks pada paragraf. Namun, menurut validator W3C..

penggunaan tag ini sebaiknya diganti dengan CSS.

Mengapa demikian?

Karena atribut align dapat mengubah tampilan dari web. Ini sebenarnya tigas dari CSS. Tugas utama dari HTML adalah membuat struktur dasar dari web.

Contoh perataan menggunakan CSS:


 


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p style="text-align: justify">Ini adalah sebuah paragraf yang berisi 
        beberapa kalimat. Saya sedang belajar HTML di NgodingYuk Saat ini 
        Sedang, Belajar tentang paragraf.</p>
        <p style="text-align: center">Paragraf adalah kumpulan dari beberapa 
        kalimat yang saling mendukung. Paragraf dibuat dengan menentukan ide 
        pokok terlebih dahulu. Lalu diikuti dengan kalimat-kalimat pendukung.</p>
    </body>
</html>

Hasilnya Adalah :

 

Tag <br> untuk Membuat Paragraf


Tag <br> sebenarnya bukanlah tag untuk membuat paragraf. Tapi tag ini, biasanya digunakan untuk membantu tag <p>.

Fungsi utama tag <br> adalah untuk membuat baris baru.

Contoh:

Misalkan kita ingin menampilkan pantun, bisa saja kita buat seperti ini di dengan tag <p>. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Buka laptop belajar ngoding</p>
        <p>NgodingYuk tempatnya seru</p>
        <p>Cari bug sambil pusing-pusing</p>
        <p>Tapi kalau berhasil, senangnya seru!</p>
    </body>
</html>

Hasilnya :

 

Meskipun pada kode HTML kita sudah menulis tiap bait pantun dalam baris yang baru. Tapi ia akan tetap ditampilkan seperti baris.

Di sinilah saatnya kita harus menggunakan tag <br> Maka, kode di atas.. bisa kita perbaiki menjadi seperti ini: 



<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Buka laptop belajar ngoding<br/>
        NgodingYuk tempatnya seru<br/>
        Cari bug sambil pusing-pusing<br/>
        Tapi kalau berhasil, senangnya seru!</p>
    </body>
</html>

Hasilnya :



Tag <br> adalah tag yang tidak memiliki pasangan penutup. Untuk menutupnya, Anda cukup menambahkan garis miring seperti ini:<br> Meskipun penutupan tag <br> tidak selalu diperlukan, disarankan untuk menutupnya demi memenuhi standar validasi W3C.

Tag <hr> untuk Membuat Garis

Sama seperti tag <br> tag <hr> juga bukanlah tag untuk membuat paragraf.

Tag <hr> merupakan tag yang digunakan untuk membuat garis lurus secara horizontal (horizontal rule). Biasanya digunakan untuk memisahkan beberapa konten atau paragraf.

Contoh code nya:


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <p>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di NgodingYuk Saat ini Sedang,
        Belajar tentang paragraf.</p>
        <hr />
        <p>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</p>
    </body>
</html>

Hasilnya di browser :



Tag <pre>


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 : 


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <h1>Malam Bulan Purnama</h1>
        <p>oleh Sapardi Djoko Damono</p>
        <pre>
tak ada yang lebih sunyi
dari malam bulan purnama
ditemaninya kesepian bintang
yang enggan bersuara di angkasa

    tak ada yang lebih tenang
    dari malam bulan purnama
    diteranginya jalan setapak
    yang dingin oleh angin malam

tak ada yang lebih damai
dari malam bulan purnama
dibisikannya rahasia malam
pada embun yang membeku di dedaunan
        </pre>
    </body>
</html>

hasilnya :





Coba perhatikan!

Paragraf yang kita buat di dalam kode HTML akan ditampilkan dengan format yang sama seperti yang kita tulis di sana. Biasanya tag <pre> sering digunakan untuk menampilkan source code. Karena, tag ini menggunakan font Monospace atau Courier New (di Windows).

Tag <p> vs Tag <div>

Tag <p> dan Tag <div> , memiliki perilaku yang hampir sama. Tapi tag <div> sebenarnya bukanlah tag untuk membuat paragraf, melainkan tag untuk membuat layout web.

Kadang tag <div> sering ‘disalahgunakan’ untuk membuat paragraf.

Contoh: 


<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tutorial Paragraf di HTML</title>
    </head>
    <body>
        <div>Ini adalah sebuah paragraf yang berisi beberapa kalimat.
        Saya sedang belajar HTML di NgodingYuk. Saat ini Sedang,
        Belajar tentang paragraf.</div>
        <div>Paragraf adalah kumpulan dari beberapa kalimat yang saling
        mendukung. Punya ide pokok sebagai dasar dari paragraf itu sendiri.</div>
    </body>
</html>

Ini boleh-boleh, saja. Tapi hasilnya tidak akan sama seperti tag <p>

Contoh mengunakan <div> dan <p> :




Paragraf yang dibuat dengan tag <div> tidak akan memiliki jarak margin antar paragraf.

Tag <div> biasanya digunakan untuk membungkus teks yang ada di luar artikel. Contoh seperti teks pada footer, header, sidebar, dll.

Contoh:


Comments

Post a Comment

Popular posts from this blog

Belajar HTML #01: Pengenalan Dasar HTML untuk Pemula

-
Image
Kenalan Dulu Nih Dengan HTML      HTML adalah bahasa yang sangat penting untuk dipelajari bagi siapa saja yang ingin menjadi web developer Mengapa demikian? Karena HTML adalah fondasi utama dalam pembuatan halaman web. Pasti kamu sudah pernah mendengar tentang HTML sebelumnya, tetapi tidak ada salahnya untuk menyegarkan ingatanmu dengan membaca artikel ini. Dalam tutorial ini, kita akan membahas semuanya dari awal hingga kamu mampu membuat halaman HTML-mu sendiri. Jadi, siap untuk memulai petualangan ini? Ayo kita mulai! Apa Itu HTML? HTML, atau HyperText Markup Language,   adalah bahasa markah yang digunakan untuk membuat halaman web . Masih bingung?  Mari saya jelaskan dengan cara yang lebih sederhana.. HTML adalah bahasa yang menggunakan penanda, yang kita sebut " tag ," untuk merancang halaman web. Tag ini membantu kita menentukan bagaimana konten akan ditampilkan dan disusun di dalam sebuah situs web Jika kita ibaratkan, HTML itu seperti batu bata yang digu...
Read more

Belajar CSS Dasar : Mengenal CSS #01

-
Image
Apa Itu CSS? Hai, sudah siap belajar CSS? Nah, sebelum kita mulai ngoding, yuk kenalan dulu dengan CSS! Jadi, CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya halaman web. Ibaratnya, HTML itu struktur tulang-tulangnya, dan CSS adalah baju yang bikin tampilan web kita jadi cantik dan menarik. Dengan CSS, kamu bisa mengubah warna, ukuran teks, tata letak, dan bahkan membuat animasi di halaman web. Seru, kan? Cara Menyertakan CSS: Inline, Internal, dan Eksternal Sekarang, kita masuk ke cara bagaimana CSS ini "menempel" ke halaman HTML. Ada tiga cara, yaitu inline, internal, dan eksternal. Yuk, kita bahas satu-satu biar paham. 1. Inline CSS Cara ini menulis kode CSS langsung di dalam elemen HTML. Biasanya dipakai kalau kita hanya ingin menambahkan gaya ke satu elemen saja. Cara ini praktis tapi tidak efisien kalau elemen yang ingin kita gaya lebih dari satu. Contoh code ditandai kotak hijau : ...
Read more