Rabu, 07 Desember 2011
Kita akan belajar membuat Paragraf di HTML (tag P). Agar memahami cara pembuatan paragraf di dalam HTML, kita akan menggunakan contoh struktur kerangka HTML dasar, dan menambahkan beberapa text. Silahkan buka kembali text editor, lalu ketikkan kode berikut:
Contoh tag paragraf 1:
Kamu akan melihat bahwa paragraf tersebut tidaklah berada pada baris berbeda, namun berada pada satu baris yang sama. Dalam HTML, spasi akan diabaikan, termasuk jika kamu merubahnya menjadi:
Contoh tag paragraf 2:
Tag Paragraf (<p>)
Contoh tag paragraf 1:
<!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 kesayangan kamu. lalu muncul seperti Screenshot di bawah ini.
Contoh tag paragraf 2:
<!DOCTYPE html> <html> <head> <title>Title dari Websiteku</title> </head> <body> Ini adalah paragraf pertama Ini adalah paragraf kedua </body> </html>Kamu harus memberi tahu web browser bahwa kedua kalimat itu harus terpisah. Dan bahwa masing-masing kalimat itu adalah sebuah paragraf, lantas bagai mana cara memberitahunya ? Berikut sambungannya.
HTML menyediakan tag khusus untuk membuat paragraf. Penulisannya menggunakan huruf p, sebagai berikut : <p>. Mari kita revisi contoh kode HTML sebelumnya, dan menambahkan tag <p>.
Contoh tag paragraf 3:
Maka dengan ini kamu melihat bahwa kedua paragraf tersebut sudah berada pada posisi masing-masing. Setiap tag paragraf, web browser akan memberikan spasi antar paragraf.
Tag Break (<br>)
Contoh tag paragraf 3:
<!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>Lalu akan tampil seperti di bawah ini :
Maka dengan ini kamu melihat bahwa kedua paragraf tersebut sudah berada pada posisi masing-masing. Setiap tag paragraf, web browser akan memberikan spasi antar paragraf.
Cara lain untuk memisahkan kedua paragraf adalah dengan menggunakan tag <br> (br singkatan dari break).
Contoh tag <br>:
Tag untuk penebalan dan garis miring (<em> dan <strong>)
Contoh tag <br>:
<!DOCTYPE html> <html> <head> <title>title dari websiteku</title> </head> <body> ini adalah paragraf pertama <br/> ini adalah paragraf kedua </body> </html>Jika kode HTML diatas dijalankan, maka hasilnya hampir sama dengan menggunakan tag <p>. Namun pemisahan paragraf menggunakan tag <br> bukanlah untuk membuat paragraf. Tag <br> berfungsi untuk memisahkan sebuah bagian text dengan text lain. Jika yang kamu butuhkan adalah struktur paragraf, maka gunakan tag <p>.
Perhatikan penulisan tag <br>, tag break adalah salah satu dari beberapa tag yang tidak memiliki tag penutup, dan bisa ditulis sebagai<br > atau <br />. Penulisan <br /> merupakan bawaan dari xHTML yang dianggap lebih rapi. Namun dalam standar HTML5, penulisan <br> maupun <br /> tetap dianggap valid.
Dalam sebuah paragraf, kadang kamu 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> untuk strong emphasis.
Pada umumnya web browser akan menampilkan <em> sebagai garis miring, dan <strong> dengan penebalan huruf.
Contoh tag <em> dan <strong>:
Meskipun tanda spasi tidak akan dianggap dalam HTML, namun untuk membuat kode HTML, menjorokkan (indent) beberapa baris dalam suatu tag akan membuat kode mudah dibaca.
Sebenarnya kita juga tidak terlalu perlu menghafalkan banyak Script HTML, tetapi kita harus tahu perintah dari Script Tersebut, selanjutnya kita akan belajar Membuat Judul / Heading di HTML (tag h1).
Tag emphasis (penekanan) terdiri dari 2 tag, <em> untuk emphasis, dan <strong> untuk strong emphasis.
Pada umumnya web browser akan menampilkan <em> sebagai garis miring, dan <strong> dengan penebalan huruf.
Contoh tag <em> dan <strong>:
<!DOCTYPE html> <html> <head> <title> Judul dari web/blogku</title> </head> <body> <p>ini adalah kalimat <em>pertama</em>, sedangkan ini adalah kalimat <strong>kedua</strong></p> </body> </html>Maka seperti di bawah inilah Outputnya:
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 HTML5, tag <i> dan <b> kembali dianggap relevan.
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 HTML5, tag <i> dan <b> kembali dianggap relevan.
Sebenarnya kita juga tidak terlalu perlu menghafalkan banyak Script HTML, tetapi kita harus tahu perintah dari Script Tersebut, selanjutnya kita akan belajar Membuat Judul / Heading di HTML (tag h1).