Atribut HTML

Atribut memberi maklumat tambahan kepada suatu elemen HTML.

Atribut Tag HTML

Tag HTML boleh mempunyai atribut atau sifat. Atribut memberi maklumat tambahan kepada suatu elemen HTML.

Atribut biasanya hadir dalam pasangan name/value seperti : name="value".

Atribut juga kebiasaannya diletakkan pada tag permulaan suatu elemen HTML.

Contoh Atribut 1 :

<h1> mentakrifkan permulaan suatu heading.

<h1 align="center"> memberi maklumat tambahan mengenai alignment.

Contoh Atribut 2 :

<body> mentakrifkan body suatu dokumen HTML.

<body bgcolor="yellow"> memberi maklumat tambahan mengenai warna latar.

Contoh Atribut 3 :

<table> mentakrifkan suatu jadual HTML. (Anda akan belajar mengenai jadual HTML nanti)

<table border="1"> memberi maklumat tambahan mengenai sempadan di sekeliling jadual.

Gunakan Atribut Berhuruf Kecil

Atribut dan nilai atribut adalah sensitif kepada huruf. Bagaimanapun, World Wide Web Consortium (W3C) menyarankan penggunaan atribut/nilai atribut berhuruf kecil dalam saranan HTML 4 mereka, dan XHTML (generasi HTML terkini) menghendaki penggunaan atribut/nilai atribut berhuruf kecil.

Sentiasa Quote Nilai Atribut

Nilai atribut mestilah sentiasa ditutup dengan tanda quote “”. Kebiasaannya double style quote “” sentiasa digunapakai, tetapi single style quote '' juga dibenarkan.

Pada suatu ketika, contohnya apabila nilai atribut mengandungi tanda quote, maka single style quote perlu digunakan.

name='John "ShotGun" Nelson'

Tag Asas HTML

Tag penting dalam HTML adalah tag heading, paragraph dan line break.

Cara terbaik untuk mempelajari HTML adalah melalui contoh-contoh. Kami telah menyediakan anda dengan beberapa contoh mudah supaya anda memahami sepenuhnya asas-asas HTML.

Cuba sendiri – Contoh

<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>

<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>

Heading

Heading ditakrifkan dengan tag <h1> hingga tag <h6>. <h1> mentakrifkan heading terbesar. <h6> pula mentakrifkan heading terkecil.

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

HTML secara automatiknya akan menambah satu ruang kosong sebelum dan selepas heading.

Paragraph

Paragraph ditakrifkan dengan tag <p>.

<p>Ini paragraph</p>
<p>Ini paragraph lain</p>

HTML secara automatiknya akan menambah satu ruang kosong sebelum dan selepas paragraph.

Jangan lupa tag penutup

Anda mungkin dapat perhatikan bahawa paragraph boleh ditulis tanpa tag penutup </p> :

<p>Ini paragraph
<p>Ini paragraph lain

Contoh di atas akan berjaya dipaparkan di kebanyakan pelayar web, tetapi jangan bergantung harap sepenuhnya. Versi HTML akan datang tidak akan membenarkan SEBARANG tag penutup diabaikan.

Mengakhiri semua elemen HTML dengan tag penutup adalah salah satu cara pengesahan suatu penulisan kod HTML pada masa hadapan. Ia juga memudahkan sesuatu kod itu difahami apabila tag permulaan dan tag penutup ditanda dengan betul.

Line Break

Tag <br> digunakan apabila anda mahu menamatkan satu baris, tetapi anda tidak mahu memulakan satu paragraph baru. Tag <br> akan menamatkan satu baris di lokasi mana tag tersebut diletakkan.

<p>This <br> is a para<br>graph with line breaks</p>

Cuba sendiri

Tag <br> adalah satu tag kosong. Ia tiada tag penutup </br> kerana tag penutup tersebut tidak memberi apa-apa kesan.

<br> atau <br />

Selepas ini anda akan mendapati tag <br> ditulis begini : <br />

Disebabkan tag <br> tidak mempunyai tag penutup, ia melanggar satu peraturan HTML masa hadapan (XML based XHTML), iaitu semua elemen mesti berakhir dengan tag penutup.

Menulis tag tersebut sebagai <br /> adalah satu cara pengesahan mengakhiri suatu tag permulaan yang diterima pakai oleh HTML dan XML.

Komen dalam HTML

Tag komen digunakan untuk memasukkan apa-apa komen dalam kod sumber HTML. Komen akan diabaikan oleh pelayar web. Komen boleh digunakan untuk menerangkan sesuatu kod, di mana dapat membantu semasa anda melakukan suntingan pada kod sumber anda kelak.

<!-- This is a comment -->

Anda perlu meletakkan tanda seru selepas kurungan pembukaan, tetapi tidak sebelum kurungan penutup.

Kesimpulan untuk Elemen HTML

* Setiap elemen HTML mempunyai nama elemen (body, h1, p, br)
* Tag permulaan mengandungi nama elemen dan dikelilingi dengan angle bracket <h1>
* Tag penutup mengandungi slash dan nama elemen serta dikelilingi dengan angle bracket </h1>
* Kandungan elemen terletak di antara tag permulaan dan tag penutup tersebut
* Terdapat beberapa elemen HTML tidak mempunyai kandungan elemen
* Terdapat beberapa elemen HTML tidak mempunyai tag penutup

Nota asas – Tip berguna

Apabila anda menulis teks HTML, anda tentu tidak pasti bagaimana teks tersebut dipaparkan dalam pelayar web lain. Sesetengah pengguna mempunyai paparan komputer yang besar, dan sesetengah yang lain hanya mempunyai paparan yang kecil. Teks tersebut akan disusun semula setiap kali pengguna mengubah saiz tetingkap mereka. Jangan sesekali cuba menyusun teks dalam editor teks anda dengan memasukkan ruang atau baris kosong kepada teks.

Ruang kosong tidak memberikan apa-apa kesan dalam HTML. Beberapa ruang kosong akan tetap dikira sebagai satu ruang kosong. Lagi maklumat tambahan : Dalam HTML, satu baris baru yang dicipta dianggap sebagai satu ruang kosong.

Menggunakan paragraph kosong <p> untuk memasukkan baris kosong adalah satu tabiat buruk. Gunakan tag <br> sebaliknya. (Tetapi jangan gunakan tag <br> untuk membina senarai. Tunggu sehingga anda belajar mengenai senarai HTML.)

HTML secara automatiknya akan menambah satu baris kosong sebelum dan selepas beberapa elemen, contohnya seperti sebelum dan selepas paragraph dan sebelum dan selepas heading.

Kami menggunakan horizontal rule (tag <hr>) untuk memisahkan bab-bab dalam tutorial kami.

Tag Asas HTML

Jika anda perhatikan tag asas HTML seperti rujukan di bawah, anda akan memperoleh maklumat lanjut mengenai atribut-atribut tag.

Anda akan belajar dengan lebih lanjut mengenai atribut-atribut tag HTML dalam bab seterusnya.

Tag Penerangan
<html> Mentakrifkan dokumen HTML
<body> Mentakrifkan kandungan dokumen
<h1> to <h6> Mentakrifkan header 1 hingga header 6
<p> Mentakrifkan paragraph
<br> Memasukkan penamat untuk satu baris
<hr> Mentakrifkan horizontal rule
<!–> Mentakrifkan komen

Elemen HTML

Dokumen HTML mengandungi beberapa elemen HTML.

Elemen HTML dikenal pasti melalui tag-tag HTML.

Tag-tag HTML

* Tag HTML digunakan untuk mengenal pasti elemen-elemen HTML
* Tag HTML dikelilingi dengan karektor < dan >
* Karektor tersebut dipanggil angle bracket
* Tag HTML kebiasaanya wujud berpasangan seperti <b> dan </b>
* Tag pertama <b> adalah tag permulaan manakala tag kedua </b> adalah tag penutup
* Teks di antara tag permulaan dan tag penutup adalah kandungan elemen
* Tag HTML tidak sensitif kepada huruf, <b> adalah sama seperti <B>

Elemen-elemen HTML

Ingat contoh HTML pada laman sebelum ini :

<html>
<head>
<title>Tajuk laman web</title>
</head>
<body>
Ini laman web pertama saya. <b>Teks ini ditebalkan</b>
</body>
</html>

Berikut adalah satu elemen HTML :

<b>This text is bold</b>

Elemen HTML tersebut bermula dengan tag permulaan : <b>
Kandungan elemen HTML tersebut ialah : Teks ini ditebalkan
Elemen HTML tersebut berakhir dengan tag penutup : </b>

Tujuan tag <b> adalah untuk mengenal pasti elemen HTML yang akan dipaparkan tebal.

Berikut juga merupakan satu elemen HTML :

<body>
Ini laman web pertama saya. <b>Teks ini ditebalkan</b>
</body>

Elemen HTML ini bermula dengan tag permulaan <body>, dan berakhir dengan tag penutup </body>.

Tujuan tag <body> adalah untuk mengenal pasti elemen HTML yang mengandungi body dokumen HTML berkenaan.

Mengapa menggunakan tag berhuruf kecil?

Seperti yang dikatakan sebelum ini bahawa tag HTML tidak sensitif kepada huruf : <B> adalah sama dengan <b>. Jika anda melayari laman web, anda akan mendapati kebanyakan laman web menggunakan tag HTML berhuruf besar dalam kod sumber mereka. Kami menggunakan huruf kecil. Kenapa?

Jika anda ingin mematuhi piawai web terkini, anda mesti menggunakan tag berhuruf kecil. World Wide Web Consortium (W3C) menyarankan penggunaan tag berhuruf kecil dalam saranan HTML 4 mereka, dan XHTML (generasi HTML terkini) menghendaki penggunaan tag berhuruf kecil.