�ݺ�ߣ

Judul

Judul didefinisikan dengan menggunakan tag <h1> sampai >h6>. <h1> mendefinisikan huruf
judul yang paling besar, dan <h6> yang terkecil. Untuk latihan coba kamu bikin file HTML
berikut ini dan perhatikan hasilnya.

<h1>Ini Judul</h1>
<h2>Ini Judul</h2>
<h3>Ini Judul</h3>
<h4>Ini Judul</h4>
<h5>Ini Judul</h5>
<h6>Ini Judul</h6>

HTML secara otomatis akan menambahkan baris kosong sebelum dan sesudah judul.

Paragraf

Paragraf didefinisikan dengan menggunakan tag <p>.

<p>Ini adalah sebuah paragraf</p>
<p>Ini paragraf lainnya</p>

Sama seperti judul, HTML secara otomatis akan menambahkan baris kosong sebelum dan
sesudah paragraf.

Jangan lupa Tag penutup

Kamu pastinya udah pernah ngeliat bahwa paragraf dapat ditulis tanpa tag penutup </p> kayak
ginii:

<p>Ini adalah sebuah paragraf
<p>Ini paragraf lain

Contoh barusan dapat digunakan pada hampir semua jenis browser, tapi jangan ngandelin hal itu.
Versi-versi HTML ke depan kayaknya ndak akan ngijinin kamu untuk melewatkan tag penutup.

Menutup semua elemen HTML dengan tag penutup adalah cara yang ampuh untuk menulis
HTML yang kompatibel dengan smeua browser dan pengembangan ke depan. Hal ini juga
membuat kode kita lebih mudah dimengerti (baik dibaca maupun di browse).

Ganti Baris

Tag <br> digunakan pada saat kamu pengen membuat baris baru, tapi belum ingin ganti
paragraf. Tag <br> akan membuatkan sebuah baris baru buat kamu dimanapun kamu letakkan
tag itu.

<p>Ini <br> adalah sebuah pa<br>ragaraf dengan ganti baris </p>

Tag <br> adalah tag yang kosong. Nah, karena itu dia tidak punya tag penutup seperti misalnya
</br>, karena jadi ndak masuk akal. Ya tho?

<br> atau <br />

Kamu akan makin sering melihat penulisan tag <br> dengan cara begini: <br />

Karena tag <br> tidak memiliki tag penutup, maka tag tersebut melanggar salah satu aturan dasar
dalam penulisan HTML ke depannya (XHTML yang berbasis XML), di mana semua elemen
harus ditutup.

Menuliskan penggantian baris dengan cara <br/> ini menjamin bahwa file HTML kamu akan
kompatibel dengan XML maupun cara penulisan HTML di masa datang.

Menuliskan Komentar dalam HTML

Tag komentar digunakan untuk menyisipkan sebuah komentar dalam kode sumber HTML.
Sebuah komentas akan diabaikan oleh browser. Kamu bisa menggunakan komentar untuk
menjelaskan kode yang kamu bikin, dan tentu saja hal ini akan membantu kamu saat kamu perlu
melakukan perubahan pada kode kamu kapan-kapan.



Perhatikan bahwa kamu perlu menuliskan tanda seru setelah kurung buka, tetapi tidak sebelum
kurung tutupnya.

Ingat hal-hal berikut!

• Setiap tag HTML memiliki sebuah nama elemen (body, h1, p, br)
• Tag pembuka adalah nama yang dilingkupi oleh tanda kurung siku: <h1>

• Tag penutup adalah tanda garis miring dan nama yang dilingkupi oleh tanda kurung siku
</h1>
• Isi elemen berada di antara tag pembuka dan tag penutup

• Beberapa elemen HTML tidak memiliki isi elemen

• Beberapa elemen HTML tidak memiliki tag penutup

Beberapa Tips Yang Bermanfaat

Waktu kamu menulis teks HTML, maka kamu tidak akan pernah bisa yakin bagaimana teks itu
ditampilkan oleh browser lain. Beberapa orang memiliki monitor yang lebih besar, dan yang
lainnya. Teks akan diatur ulang setiap kali pengunjung mengubah ukuran windownya. Jangan
pernah mencoba untuk membantuk teks yang memiliki baris kosong atau spasi dekat dengan teks
itu.

HTML akan menghapus spasi dalam teks kamu. Berapa banyakpun kamu tuliskan spasi, tetap
akan dihitung satu. Satu lagi, dalam HTML sebuah baris baru dihitung sebagai satu spasi.

Menggunakan paragraf kosong <p> untuk menyisipkan baris kosong adalah kebiasaan yang
kurang baik. Gunakan tag <br> sebagai penggantinya. (tapi jangan juga gunakan tag <br> untuk
membuat daftar. Tunggu sampai pelajaran tentang daftar dimulai ya).

HTML secara otomatis akan menambah baris kosong sebelum dan sesudah beberapa elemen,
seperti sebelum dan sesudah paragraf dan judul.

Tag HTML Dasar

Berikut adalah tag-tag penting yang akan sangat sering kamu pakai. Dan kamu akan mempelajari
masing-masing secara lebih detil terutama yang menyangkut atributnya.

Tag - Description

<html> - Mendefinsikan sebuah dokumen HTML

<body> - Mendefinisikan isi utama

<h1> to <h6> - Mendefinisikan judul 1 sampai 6

<p> - Mendefinisikan paragraf

<br> - Menyisipkan sebuah baris

<hr> - Mendefinisikan garis horisontal

<!--> - Bikin komentar

Atribut Tag HTML

Tag HTML dapat memiliki atribut. Atribut memungkinkan informasi tambahan pada elemn
HTML.

Atribut selalu memiliki pasangan nama/nilai seperti ini: nama=”nilai”.

Atribut selalu dicantumkan pada awal tag elemen HTML.

Contoh Atribut 1:

<h1> mendefinisikan awal sebuah judul.

<h1 align=”center”> memiliki informasi tambahan tentang perataan baris.

Contoh Atribut 2:

<body> mendefinisikan badan/isi halaman HTML kita.

<body bgcolor=”red”> akan membuat background layar menjadi merah.

Contoh Atribut 3:

<table> mendefinisikan sebuah tabel HTML (nanti kita pelajari lebih lanjut).

<table border=”1”> memiliki tambahan informasi mengenai ketebalan garis pada tabel.

Selalu Gunakan Tanda Kutip pada Nilai Atribut

Nilai atribut seharusnya selalu diapit oleh tanda kutip. Tanda kutip ganda paling sering
digunakan, tapi sebenarnya tanda kutip tunggal juga boleh ko.

Pada beberapa situasi tertantu yang sangat jarang terjadi, seperti misalnya saat nilai atribut itu
sendiri berisi tanda kutip, maka kamu bisa gunakan tanda kutip tunggal.

Contohnya kayak gini:

nama=’Uzumaki “Jurus Seribu Bayangan” Naruto’

Ok.

Selamat mencoba atribut tag HTML.

Entitas karakter

Beberapa karakter memiliki arti khusus dalam HTML, seperti tanda lebih kecil (<) yang
mendefinisikan awal dari sebuah tag HTML. Kalau kita ingin agar browser menampilkan tanda
lebih kecil itu (<), kita harus menyisipkan entitas karakter dalam kode HTML kita.
Entitas karakter memiliki 3 komponen: sebuah tanda dan (&), nama entitas atau sebuah # yang
diikuti nomor entitas dan diakhiri dengan tanda titik koma (;).
Untuk menampilkan tanda lebih kecil dalam halaman HTML kita, maka kita harus menuliskan :
< atau <
Keuntungan menggunakan nama dibandingkan nomor adalah bahwa nama lebih mudah untuk
diingat. Kekurangannya adalah bahwa tidak semua browser mendukung nama-nama entitas yang
baru, namun demikian hampir semua browser mendukung nama entitas standar.
Catatan: entitas bersifat case sensitif.

Spasi berurutan

Entitas karakter yang mungkin akan paling sering kamu pakai adalah spasi.
HTML akan menghilangkan spasi dalam teks HTML kamu. Kalau kamu menuliskan 10 spasi
pada kode HTML kamu, maka HTML akan menghapus 9 spasi. Nah, untuk menambahkan spasi
pada dokumen HTML kamu, gunakan entitas karakter  

Beberapa entitas karakter yang sering dipakai:

Hasil Penjelasan Nama Entitas Nomor Entitas

Spasi    

< Kurang dari < <

> Lebih dari > >

" Tanda kutip " "

' Kutip tunggal ' (Ndak berlaku di IE) '

& Dan & &

Beberapa komentar yang ada meminta agar tutorial ini ditambah dengan contoh agar lebih jelas.
Nah, berikut ini contoh untuk memperjelas tentang apa yang dimaksud dengan entitas karakter.

Kasusnya sangat mudah kok. Kita kan udah tahu, kalau yang namanya HTML itu menggunakan
tag, iya kan? Salah satu contoh adalah tag <b> </b>untuk menebalkan huruf.

Sekarang bayangkan kalau suatu ketika kamu diminta untuk menulis tutorial tentang HTML dan
kebetulan akan menulis tentang tag HTML yang berfungsi untuk menebelkan huruf. Misalnya
kamu pengen baris berikut tampil di tutorial kamu (perhatikan, kamu ingin agar tag <b> dan
</b> muncul dalam baris tersebut).

Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag <b> dan </b>

Nah, coba pikirkan, bagaimana menuliskan bari sederhana ini tanpa entitas karakter. Ndak bisa
kan? Misalnya kamu menulis seperti ini:

Untuk menebalkan huruf seperti kata <b>tebal</b> ini,
kamu memerlukan tag <b> dan </b>

Apa yang terjadi? Browser akan menampilkan kalimat berikut:

Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag dan

Apa bedanya? Ya...tag <b> dan </b> tidak muncul, sebagai gantinya, kata dan akan tampil dalam
huruf tebal.

Untuk membuat agar tag <b> dan </b> dapat muncul, kamu memerlukan entitas karakter,
sehingga kamu harus menuliskan kode HTML menjadi seperti ini:

Untuk menebalkan huruf seperti kata <b>tebal</b> ini,

kamu memerlukan tag <b> dan </b>

Perhatikan, tanda < saya ganti dengan entitas karakter <, sedangkan tanda > saya ganti dengan
>.

Lhah ... nambah lagi tuh pertanyaan di komentar. Gini pertanyaannya, terus gimana dunks cara
kita menampilkan > biar yang keluar bukan >.

Mudah aja, kita bisa gunakan &amp di depannya untuk meng-escape tanda & sehingga kamu
bisa tulis seperti ini & > (tanpa spasi di antara & dan >. Saya terpaksa
menuliskan menggunakan spasi, karena tidak mungkin saya tuliskan tanpa spasi.)

Gampang kan? Ok, mudah-mudahan contoh ini bisa meningkatkan pemahaman kamu tentang
apa yang dimaksud dengan entitas karakter ini.

http://prothelon.com/caramembuatwebsite/tutorial-html

�ݺ�ߣ

Dasar html

Recommended

More Related Content

What's hot (18)

Viewers also liked (17)

Similar to Dasar html (20)

Recently uploaded (20)

Dasar html