Saat membuat website yang kaya akan tulisan, pasti akan lebih menarik jika tulisan atau kontennya dibagi menjadi beberapa paragraf. Karena akan lebih mudah bagi pengunjung website Anda untuk membaca. Jika Anda membuat website dengan CMS seperti Wordpress sudah memiliki tampilan GUI sehingga Anda hanya perlu menekan tombol tertentu untuk membuat paragraf
Daftar isi
Cara Membuat Paragraf di HTML
Nah beda ceritanya kalau kamu membuat website dengan coding (pemrograman), kamu harus mengetikkan tag-tag tertentu agar bisa membuat sebuah paragraf. Bagi Anda yang belum mengetahui apa itu tag, elemen atau atribut, Anda dapat membaca panduannya di bawah ini
Membacanya. Mengetahui Apa itu Tag, Elemen, Atribut dan Contoh dalam HTML
Disini ada 2 cara membuat paragraf pada HTML yaitu dengan menggunakan tag P (
) dan menggunakan tag BR (
). Keduanya akan dijelaskan di bawah ini
Membuat Paragraf dengan
Label P (
) yang merupakan singkatan dari paragraf. Jadi, pada dasarnya tag ini didesain khusus untuk para pembuat website untuk membuat paragraf. Dengan kata lain,
yang berfungsi untuk membuat sebuah paragraf. Contoh penggunaannya adalah sebagai berikut
[bahasa kode sumber =”polos”]
Ini adalah paragraf pertama
Ini adalah paragraf kedua
Ini adalah paragraf ketiga
[/Kode sumber]
Hasilnya adalah sebagai berikut
Sekalipun tag p tidak ditulis pada baris baru, hasilnya tetap pada baris baru, karena paragraf selalu dimulai pada baris baru. Jika Anda menulis tag p pada baris baru, maka jarak antara satu paragraf dengan paragraf lainnya juga semakin jauh
Sekarang kita akan menggunakan tag p yang sudah diberi atribut, baca artikel dibawah ini jika anda belum mengetahui apa itu elemen dan atribut
Membacanya. Mengetahui Apa itu Tag, Elemen, Atribut dan Contoh dalam HTML
Membuat Paragraf dengan
yang Telah Diberi Atribut
Jika diatas kita telah membahas cara membuat paragraf dengan tag p murni, sekarang kita akan mencoba menggunakan tag p yang diberi atribut agar bisa divariasikan. Lihat contoh di bawah ini
[bahasa kode sumber =”polos”]
Ini adalah paragraf rata kiri (default). Sepintas hampir sama dengan paragraf datar kiri dan kanan (justify), namun itu berbeda. Jika kontennya pendek mungkin terlihat sama, tetapi jika kontennya panjang akan terlihat berbeda
Ini adalah paragraf rata tengah
Ini adalah paragraf datar kanan
Ini adalah paragraf datar kanan kiri (justify). Sekilas hampir sama dengan paragraf rata kiri, namun berbeda. Jika kontennya pendek mungkin terlihat sama, tetapi jika kontennya panjang akan terlihat berbeda
[/Kode sumber]
Kami melihat hasilnya
Beda kan? . Sebenarnya yang bisa diatur dengan CSS, Anda bisa belajar CSS dengan mengklik gambar di bawah ini
Pada contoh di atas kita menggunakan atribut align. Nah, nilai pada atribut align adalah
- kiri = Teks rata kiri
- kanan = Teks rata kanan
- center = Pusat teks datar
- justify = Teks datar kiri kanan
Jelas saat menggunakan tag p. Sekarang saatnya kita menggunakan tag br
Buat Paragraf dengan
Tag br pada dasarnya memiliki arti break atau yang fungsinya untuk mengganti baris. Jadi saat menggunakan
itu sama seperti kita membuat baris baru. Contoh kode program
[bahasa kode sumber=”polos”][/ kode sumber]
Ini adalah paragraf pertama
Ini adalah paragraf kedua
Maka hasilnya adalah sebagai berikut
Hasilnya sama ketika kita menggunakan tag p untuk membuat paragraf di HTML. Ini adalah tutorial cara membuat paragraf di HTML menggunakan tag P dan tag BR. Jika ada yang kurang paham bisa ditanyakan di kolom komentar
Bertemu lagi dengan lapak untuk belajar melanjutkan pembahasan tentang HTML, jika pada tutorial sebelumnya kita telah membahas struktur dasar pada HTML, pada part 5 kita membahas cara membuat paragraf dan beberapa tag yang berhubungan dengan teks
Seperti yang Anda ketahui peran paragraf cukup penting terhadap informasi yang ditampilkan pada website yang Anda buat
Video Tutorial Belajar HTML - Cara Membuat Paragraf di HTML
Sebenarnya kita bisa membuat artikel tanpa menggunakan tag paragraf, tapi ada baiknya kita menggunakan tag paragraf yang sudah ada di HTML, agar browser bisa mendeteksi paragraf yang sudah anda buat.
Nah, untuk mempelajari lebih lanjut tentang peran tag paragraf ini, silakan ketik skrip di bawah ini di editor teks Anda
1
2
3
4
5
6
7
8
9
10
Pelajari HTML
Ini adalah paragraf paragraf pertama
paragraf ini kedua
Misalnya anda membuat 2 paragraf dengan script diatas, dan ditampilkan di browser, hasilnya seperti berikut
seperti hasil di atas dapat dilihat jika anda membuat lebih dari satu paragraf tanpa menggunakan tag paragraf, yang terjadi adalah kedua paragraf akan tetap dalam satu baris, oleh karena itu ada baiknya anda menggunakan tag paragraf yang sudah disediakan html, untuk membuat 1 paragraf atau lebih
1
2
3
4
5
6
7
8
9
10
Pelajari HTML
Paragraf ini pertama
paragraf ini detik
dengan menggunakan script diatas jika anda membukanya di browser maka setiap paragraf akan berada pada baris yang berbeda
Keterangan
- Jadi ada baiknya jika memang membuat lebih dari satu paragraf menggunakan tag
dan di tutup dengan
Tag
untuk ganti Baris
Setelah kita belajar tag paragraf, selanjutnya adalah tag
biasanya digunakan untuk ganti baris, atau disebut break, seperti yang telah dijelaskan sebelumnya bahwa html tidak membaca spasi ataupun enter, karena itu untuk membuat text berganti baris silahkan gunakan tag
Tag ini merupakan elemen void yang artinya tidak memerlukan tag penutup
1
2
3
4
5
6
7
8
9
10
11
12
13
Pelajari HTML
Paragraf ini pertama
paragraf ini detik
lalu apa yang terjadi ketika skrip dimuat di browser
Keterangan
- Terdapat beberapa pergantian baris pada text yang ditampilkan di browser, anda bisa menuliskan tag ini dengan beberapa option yaitu dengan tag
ataupun tag
Mengenal Tag
tag ini digunakan untuk membuat sebuah garis di dalam HTML, sama seperti tag
tag ini juga bersifat void element atau tidak membutuhkan tag penutup.
1
2
3
4
5
6
7
8
9
10
11
12
13
Pelajari HTML
Paragraf ini pertama
paragraf ini detik
maka hasil saat diakses melalui browser adalah
Keterangan
- maka akan terbuat 3 garis seperti ini diantara kedua paragraf, anda bisa menuliskan tag ini dengan ataupun
Nah, sekian pembahasan tentang html pada seri tutorial ke 5 ini, kita telah belajar tentang cara membuat paragraf, serta cara mengubah garis dan memberi garis pada paragraf di html
[stextbox id=”info”] Anda serius ingin menguasai HTML?Warung Belajar telah membuat DVD Tutorial "Tutorial HTML - Kotak Putih". DVD Tutorial kali ini membahas tentang HTML secara lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke. Tutorial HTML – Kotak Putih[/stextbox]