Widget edited by super-bee

Laman

10.26.2011

Membuat Paragraf dan Judul dalam HTML

Sekarang kita akan membahas tentang cara membuat paragraf dan judul. Kembali lagi ke analogi membuat kue, untuk membuat 'kue' paragraf tentu kita harus tahu bahan-bahannya bukan? Untuk membuat 'kue' paragraf bahan-bahan yang dibutuhkan hanyalah <p>, sedangkan untuk judul kita akan membutuhkan <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. Setelah bahan-bahannya kita ketahui maka kita akan mulai membuat 'kue'nya. Masih ingat kan struktur html itu seperti apa? yap seperti hamburger, maka untuk membuat 'kue' paragraf ini kalian akan menjepit isi dari paragraf kalian dengan bahan yang telah kalian ketahui sebelumnya yaitu <p> dan </p>.

Anggap Kita akan bercerita mengenai pengalaman kalian liburan ke pantai. Tentunya paragraf yang akan kita buat tidak begitu jauh dari apa yang kami tulis berikut ini,

"Akhirnya aku kembali ke tempat ini. Aku tidak bisa menahan perasaanku untuk tidak menemuinya lagi. Aku hanya ingin melihatnya dari jarak yang agak jauh, dari tempat yang agak terlindung. Dari balik malam, dengan leluasa aku bisa melihatnya tertawa dan tersenyum --tawa dan senyum yang dibuat-buat-- di hadapan para tamu.

Tempat dia duduk menunggu tamu cukup terang bagi mataku, meski tempat itu hanya ditaburi cahaya merah yang redup. Aku masih bisa merasakan pancaran matanya yang pedih. Aku merasa dia sedang memperhatikan aku. Aku berusaha bersembunyi di balik kerumunan para pengunjung yang berseliweran di luar ruangan. Tapi sejenak aku ragu, apakah benar dia melihatku? Ah, jangan-jangan itu hanya perasaanku saja. Aku yakin dia kecewa dengan aku. Dia kecewa karena aku gagal membawanya pergi dari tempat ini."

Untuk membuat paragraf seperti diatas maka kita tulis struktur html dasar yaitu <html>, <head>, dan <body> lalu kita masukkan bahan untuk membuat paragraf yaitu <p> lalu masukkan isinya, seperti berikut ...

<html>
<head>
<title>Belajar Membuat Paragraf</title>
</head>
<body>

<p>
Akhirnya aku kembali ke tempat ini. Aku tidak bisa menahan perasaanku untuk tidak menemuinya lagi. Aku hanya ingin melihatnya dari jarak yang agak jauh, dari tempat yang agak terlindung. Dari balik malam, dengan leluasa aku bisa melihatnya tertawa dan tersenyum --tawa dan senyum yang dibuat-buat-- di hadapan para tamu.
</p>
<p>
Tempat dia duduk menunggu tamu cukup terang bagi mataku, meski tempat itu hanya ditaburi cahaya merah yang redup. Aku masih bisa merasakan pancaran matanya yang pedih. Aku merasa dia sedang memperhatikan aku. Aku berusaha bersembunyi di balik kerumunan para pengunjung yang berseliweran di luar ruangan. Tapi sejenak aku ragu, apakah benar dia melihatku? Ah, jangan-jangan itu hanya perasaanku saja. Aku yakin dia kecewa dengan aku. Dia kecewa karena aku gagal membawanya pergi dari tempat ini."
</p>

</body>
</html>

Perhatikan kode html diatas, karena contoh paragraf terdiri dari dua paragraf maka kode yang dibuat pun harus menggunakan dua <p> dan dua </p>. Kalian dapat mencoba kode diatas ke dalam papan tulis yang disediakan dibawah. Lalu bagaimana agar paragraf yang kalian tampilkan memakai huruf miring semua seperti pada contoh diatas? Untuk membuat tulisan miring atau cetak tebal, atau bergaris bawah kalian harus mengetahui bahan tambahan yang diperlukan, yaitu <i>, <b>, dan <u>. Masing-masing tag ini merupakan kepanjangan dari italic (huruf miring), bold (cetak tebal), dan underline (garis bawah). Cara memakai bahan-bahan ini bagaimana? Sama seperti hamburger kita, dijepit saja isinya, lihat kode dibawah ini ...

<html>
<head>
<title>Belajar Membuat Paragraf</title>
</head>
<body>

<p>
<i>
Akhirnya aku kembali ke tempat ini. Aku tidak bisa menahan perasaanku untuk tidak menemuinya lagi. Aku hanya ingin melihatnya dari jarak yang agak jauh, dari tempat yang agak terlindung. Dari balik malam, dengan leluasa aku bisa melihatnya tertawa dan tersenyum --tawa dan senyum yang dibuat-buat-- di hadapan para tamu.
</i>
</p>
<p>
<i>
Tempat dia duduk menunggu tamu cukup terang bagi mataku, meski tempat itu hanya ditaburi cahaya merah yang redup. Aku masih bisa merasakan pancaran matanya yang pedih. Aku merasa dia sedang memperhatikan aku. Aku berusaha bersembunyi di balik kerumunan para pengunjung yang berseliweran di luar ruangan. Tapi sejenak aku ragu, apakah benar dia melihatku? Ah, jangan-jangan itu hanya perasaanku saja. Aku yakin dia kecewa dengan aku. Dia kecewa karena aku gagal membawanya pergi dari tempat ini."
</i>
</p>

</body>
</html>

Lihat, mirip seperti hamburger kan :) .

Dalam membuat paragraf tentu kalian sewaktu-waktu akan membutuhkan paragraf yang rata kiri, rata kanan, rata tengah, dan rata kanan kiri. Untuk membuat ini kalian akan membutuhkan atribut yang bernama "align". Ada 4 nilai align, yaitu left (rata kiri), right (rata kanan), centre (rata tengah), dan justify (rata kanan kiri). Sekarang lihat kode dibawah untuk cara pemakaian atribut ini.

<p align="right">
Tempat dia duduk menunggu tamu cukup terang bagi mataku, meski tempat itu hanya ditaburi cahaya merah yang redup. Aku masih bisa merasakan pancaran matanya yang pedih. Aku merasa dia sedang memperhatikan aku. Aku berusaha bersembunyi di balik kerumunan para pengunjung yang berseliweran di luar ruangan. Tapi sejenak aku ragu, apakah benar dia melihatku? Ah, jangan-jangan itu hanya perasaanku saja. Aku yakin dia kecewa dengan aku. Dia kecewa karena aku gagal membawanya pergi dari tempat ini.
</p>

Untuk menjadikannya rata kiri atau tengah tinggal mengganti kode "right" menjadi "left" atau "centre".

Judul dari paragraf atau Heading dalam bahasa Inggris menggunakan bahan-bahan yang telah disebutkan di awal tulisan yaitu <h1>, <h2>, <h3>, <h4>, <h5>, dan <h6>. <h1> adalah judul utama dan paling besar sedangkan <h6> adalah yang paling kecil. Contoh penulisan judul paragraf dapat kita lihat dibawah.

<h1>Contoh Judul Paragraf</h1>
<h2>Contoh Judul Paragraf</h2>
<h3>Contoh Judul Paragraf</h3>
<h4>Contoh Judul Paragraf</h4>
<h5>Contoh Judul Paragraf</h5>
<h6>Contoh Judul Paragraf</h6>

Coba Kita lihat perbedaan keenam judul tersebut.

Pada bagian penjelasan tag dijelaskan atribut-atribut lain yang berkaitan dengan paragraf dan judul. Kalian dapat menemukannya secara lengkap disana. Pelajaran berikutnya yaitu HTML link atau tautan.


Artikel Terkait:

Comments
0 Comments

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More