Rabu, 02 November 2016

Belajar HTML Part 5 : Membuat Paragraf Pada HTML

  Tidak ada komentar

SCRIPT KIDDIES - Paragraf merupakan suatu tag yang digunakan untuk membuat suatu element dalam penulisan HTML atau gampangnya untuk membuat sebuah paragraf dalam halaman website. Dalam paragraf itu sendiri terdapat 4 element yang dapat dikombinasikan langsung dengan tag <p> atau paragraf. Element tag tersebut yaitu :
  1. Paragraf rata kiri menggunakan align left
  2. Paragraf rata kanan menggunakan align right
  3. Paragraft rata tengah menggunakan align center
  4. Paragraf rata kanan kiri menggunakan align justify
PENULISAN TAG PARAGRAF <p>
HTML menggunakan tag kusus untuk membuat sebuah paragraf yaitu menggunakan tag <p> Berikut contohnya :

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat Paragraf</title>
</head>
<body>
Ini adalah paragraf pertama
Ini adalah paragraf kedua
</body>
</html>
Jika kita run dalam web browser

Perhatikan contoh diatas, itu tidak tepat karena paragraf tidak dipisahkan melainkan disatukan. Karena dalam HTML enter tidak berpengaruh

Untuk penulisan yang lebih tepat akan saya contohkan sebagai berikut

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat Paragraf</title>
</head>
<body>
<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua</p>
</body>
</html> 
Jika kita run dalam browser
Dapat kita lihat antara paragraf satu dan paragraf dipisahkan. Yaitu dengan cara menggunakan tag <p> dan ditutup dengan </p>

JENIS PARAGRAF
Paragraf rata kiri
<p align="left">1. Ini Merupakan Penulisan Paragraf Rata Kiri Dalam HTML</p>
Paragraf rata kanan
<p align="right">2. ini merupakan penulisan paragraf rata kanan dalam dokument HTML</p>
Paragraf rata tengah
<p align="center">3. ini merupakan penulisan paragraf rata tengah dalam dokument HTML</p>
Paragraf rata kanan kiri
<p align="justivy">4. ini merupakan penulisan paragraf rata kiri kanan dalam dokument HTML</p>
Berikut contoh lengkap jika kita gabungkan

<!DOCTYPE html>
<html>
<head>
 <title>Belajar membuat paragraf</title>
</head>
<body>
 <p align="left">1. Ini Merupakan Penulisan Paragraf Rata Kiri Dalam HTML</p>
 <p align="right">2. Ini Merupakan Penulisan Paragraf Rata Kanan Dalam HTML</p>
 <p align="center">3. Ini Merupakan Penulisan Paragraf Rata Tengah Dalam HTML</p>
 <p align="justivy">4. Ini Merupakan Penulisan Paragraf Rata Kanan Kiri Dalam HTML</p>
</body>
</html>

PENULISAN PARAGRAF <br>
Kita juga dapat menggunakan tag <br> yang jika di ibaratkan keyboard adalah ENTER. Jadi dengan tag ini kita dapat membuat baris baru dengan tag ini dan menurut saya lebih simpel menggunakan tag <br> alasi break daripada menggunakan tag <p> tapi tergantung kondisi penulisanya. Berikut contohnya :

<!DOCTYPE html>
<html>
<head>
 <title>Belajar membuat paragraf</title>
</head>
<body>
 Ini Adalah Paragraf ke satu<br>
 Ini Adalah Paragraf ke dua
</body>
</html>
Jika kita run dalam browser
Dapat kita lihat dan kita ambil kesimpulan bahwa tag <br> berfungsi untuk memisahkan teks satu dengan yang lain atau meng ENTER kalo dalam bahasa saya hehe. Perbedaan antara tag <br> dengan <p> adalah jarak barisnya, tag <p> memiliki jarak baris yang lebih lebar daripada tag <br> . Jika memang membutuhkan paragraf dalam dokumen HTML kita gunakan saja tag <p>

Sekian tutorial kali ini jika sobat masih bingung atau ada yang ditanyakan silahkan berikan komentar, Semoga tutorial kali ini dapat membantu sobat dalam belajar bahasa pemrograman HTML, Sekian Terima Kasih

Kunjungi Juga : Tampan Squad
Referensi : Malas Ngoding

TUTORIAL HTML DASAR LAINYA
Belajar HTML : Mengenal Text Editor
Belajar HTML Part 1 : Mengenal HTML
Belajar HTML Part 2 : Mengenal Tag, Element, Atribut & Struktur Dasar HTML
Belajar HTML Part 3 : Mengenal Heading Pada HTML
Belajar HTML Part 4 : Format Text Pada HTML
Belajar HTML Part 5 : Membuat Paragraf Pada HTML
Belajar HTML Part 6 : Membuat Tabel Pada HTML
Belajar HTML Part 7 : Membuat Hyperlink Pada HTML
Belajar HTML Part 8 : Membuat List Pada HTML
Belajar HTML Part 9 : Membuat Format Code dan Pre Pada HTML
Belajar HTML Part 10 : Membuat Form Pada HTML 
Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML

Tidak ada komentar :

Posting Komentar