Rabu, 04 September 2013

firstimg

Belajar HTML Dasar Part 3: Cara Membuat Paragraf di HTML (tag p)


Pada tutorial Belajar HTML kali ini kita akan membahas tentang tag paragraf, bagaimana penulisan tag paragraf dan bagaimana cara membuat paragraf di HTML.

Untuk memahaminya, kita kembali terlebih dahulu membuat contoh. Silahkan buka kembali text editor, lalu ketikkan kode berikut:
Contoh penggunaan tag paragraf:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>Title dari Websiteku</title>
</head>
<body>
Ini adalah paragraf pertama
Ini adalah paragraf kedua
</body>
</html>
Save sebagai paragraf.html, lalu jalankan di web browser.
Cara Membuat Paragraf di HTML
Kita akan melihat bahwa paragraf tersebut tidaklah berada pada baris berbeda, namun berada pada satu baris yang sama. Dalam HTMLspasi akan diabaikan, termasuk jika kita merubahnya menjadi :
Contoh penggunaan tag paragraf 2:
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Title dari Websiteku</title>
</head>
<body>
Ini adalah paragraf pertama        Ini adalah paragraf kedua
</body>
</html>
Kita harus memberi tahu web browser bahwa kedua kalimat itu harus terpisah. Dan bahwa masing-masing kalimat itu adalah sebuah paragraf.

Tag Paragraf (<p>)

HTML menyediakan tag khusus untuk paragraf : <p>
Contoh penggunaan tag paragraf 3:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>title dari websiteku</title>
</head>
<body>
<p>ini adalah paragraf pertama</p>
<p>ini adalah paragraf kedua</p>
</body>
</html>
Cara Membuat Paragraf di HTML 1
Maka kali ini kita akan melihat bahwa kedua paragraf itu sudah berada pada posisi masing-masing. Setiap tag paragraf, web browser akan memberikan spasi antar paragraf.

Tag Break (<br>)

Cara lain untuk memisahkan kedua paragraf adalah dengan menggunakan tag <br> (br singkatan dari break).
Contoh penggunaan tag <br>:
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<title>title dari websiteku</title>
</head>
<body>
ini adalah paragraf pertama
<br />
ini adalah paragraf kedua
</body>
</html>
Maka kita akan melihat hasil yang hampir sama.
Perhatikan penulisan tag <br>, tag break adalah salah satu dari beberapa tag yang tidak memiliki pasangan, dan karena disarankan untuk menutup tag, maka tag bar ditulis menjadi<br />
Kita tetap bisa menggunakan tag break tanpa penutup, dan efeknya akan sama. Hanya untuk aturan xHTML dan agar kode kita konsisten, hendaknya disarankan menggunakan <br />
Pemisahan paragraf menggunakan tag break juga kurang disarankan, karena kode HTMLkita akan menjadi lebih sistemik dan teratur jika menggunakan <p>.

Tag untuk penebalan dan garis miring (<em> dan <strong>)

Di dalam sebuah paragraf, kadang kita perlu untuk membuat penekanan pada kata-kata tertentu. Penekanan ini bisa dilakukan dengan menebalkan kata, atau dengan garis miring.
Tag emphasis (penekanan) terdiri dari 2 tag, <em> untuk emphasis, dan <strong> untukstrong emphasis.
Pada umumnya web browser akan menampilkan <em> sebagai garis miring, dan <strong>dengan penebalan huruf.
Contoh penggunaan tag <em> dan <strong>:
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<title>title dari websiteku</title>
</head>
<body>
<p>ini adalah kalimat <em>pertama</em>,
sedangkan ini adalah kalimat <strong>kedua</strong></p>
</body>
</html>
Cara penggunaan tag em dan strong
kita juga akan menemukan bahwa HTML memiliki tag <i> (italic) untuk memiringkan huruf, dan <b> (bold) untuk menebalkan huruf. Pakar HTML yang mendukung pemisahan konten dengan tampilan tidak menyarankan menggunakan tag <i> dan <b>, karena kedua tag ini akan mempengaruhi tampilan dari HTML. Tampilan halaman web seharusnya di tangani oleh CSS, bukan di dalam kode HTML. Pada xHTML, tag <i> dan <b> sudah dianggap usang, dan tidak akan dipakai lagi, namun dalam spesifikasi draft HTML 5, tag <i> dan <b> kembali dianggap relevan.
Walaupun tanda spasi tidak akan dianggap dalam HTML, namun untuk membuat kodeHTML, menjorokkan (indent) beberapa baris dalam suatu tag akan membuat kode mudah dibaca.

0 komentar:

Posting Komentar