1. Tajuk (Head)
Elemen head (yang bermula dengan <head> tag pembukaan dan berakhir dengan </ head> tagpenutup diletakkan sebelum unsur badan (bermula dengan <body> dan berakhir dengan </ body>) dan mengandungi maklumat mengenai halaman. Maklumat dalam elemen head tidak muncul dalam tetingkap pelayar.
Tag <head> digunakan bilamana anda hendak meletakkan maklumat untuk laman anda. Perhatikan kod di bawah dan hasil terdapat bulatan yang menunjukkan head bagi laman tersebut.
Tulis kod aturcara (Kod 1) berikut dalam Editor Notepad / Sublime text di Pc anda
<html>
<head><title>Laman pertama saya</title></head>
<body>
<i>Ini adalah laman pertama saya.</i><br>
<b>Ini adalah laman pertama saya.</b>
</body>
</html>
<head><title>Laman pertama saya</title></head>
<body>
<i>Ini adalah laman pertama saya.</i><br>
<b>Ini adalah laman pertama saya.</b>
</body>
</html>
Kod 1
Pada paparan Sublime text 3 :
Hasilnya adalah seperti berikut :
2. Judul (Heading)
Apa-apa dokumen bermula dengan heading. Heading boleh menggunakan saiz yang berbeza untuk tajuk anda. HTML juga mempunyai enam tahap tajuk, yang menggunakan unsur-unsur <h1>,<h2>,<h3>,<h4>,<h5>,dan<h6>. Walaupun memaparkan apa-apa tajuk, pelayar menambah satu baris sebelum dan satu baris selepas tajuk itu.
<html>
<head>
<title>Contoh Heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html
<head>
<title>Contoh Heading</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html
Kod 2
Pada paparan Sublime text 3 :
Hasilnya adalah seperti berikut :
3. Perenggan (Paragraph)
Tag <p> ialah satu cara untuk menyusun teks ke dalam perenggan yang berbeza.
Tag <p> ialah satu cara untuk menyusun teks ke dalam perenggan yang berbeza.
Setiap perenggan teks perlu berada di antara pembukaan <p> dan tag </ p> Contoh penggunaan tag seperti berikut :
<html>
<head>
<title>Contoh Paragraph</title>
</head>
<body>
<p>Ini adalah perenggan pertama.</p>
<p>Ini adalah perenggan kedua</p>
<p>Ini adalah perenggan ketiga</p>
</body>
</html>
<head>
<title>Contoh Paragraph</title>
</head>
<body>
<p>Ini adalah perenggan pertama.</p>
<p>Ini adalah perenggan kedua</p>
<p>Ini adalah perenggan ketiga</p>
</body>
</html>
Kod 3
Pada paparan Sublime text 3 :
Hasilnya adalah seperti berikut :
4. Pemisah Baris (Line Break)
Setiap kali menggunakan tag <br/>, apa-apa perkatan seterusnya akan bermula dari baris seterusnya.
Tag ini adalah contoh elemen kosong, di mana tidak perlu membuka dan menutup tag.
Tag <br /> mempunyai ruang di antara aksara br dan forward slash, /.
Contoh penggunaan tag seperti berikut :
<html>
<head>
<title>Contoh Line Break </title>
</head>
<body>
<p>Hello<br />
Selamat Datang ke Tutorial HTML.<br />
Terima Kasih<br />
Cik Lela</p>
</body>
</html>
<head>
<title>Contoh Line Break </title>
</head>
<body>
<p>Hello<br />
Selamat Datang ke Tutorial HTML.<br />
Terima Kasih<br />
Cik Lela</p>
</body>
</html>
Kod 4
Pada paparan Sublime text 3 :
Hasilnya adalah seperti berikut :
5. Komen
Tag komen berfungsi sebagai komen, iaitu
bermaksud memberi penerangan atau maklumat kepada pengguna supaya kod sumber
html mudah difahami dan dikenalpasti.
Simbol tag bagi komen ialah <!-- --> .
Tag ini tidak kelihatan pada
pelayar web, dan sekiranya terdapat lebih dari satu baris komen hanya perlu
diletakkan seperti berikut:
<html>
<head><!-- Header Dokumen mula Disini -->
<title>Ini adalah tajuk dokumen</title>
</head><!-- Header Dokumen Tamat -->
<body>
<p>Selamat Belajat HTML</p>
</body>
<head><!-- Header Dokumen mula Disini -->
<title>Ini adalah tajuk dokumen</title>
</head><!-- Header Dokumen Tamat -->
<body>
<p>Selamat Belajat HTML</p>
</body>
</html>
Kod 5
Pada paparan Sublime text 3 :
Hasilnya adalah seperti berikut :
6. Format Teks
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk format output, seperti teks tebal atau italik. Elemen pemformatan telah direka untuk memaparkan jenis khas teks seperti :
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk format output, seperti teks tebal atau italik. Elemen pemformatan telah direka untuk memaparkan jenis khas teks seperti :
Bold text
|
Teks tebal
|
Important text
|
teks penting
|
Italic text
|
teks italik
|
Emphasized text
|
teks menekankan
|
Marked text
|
teks ketara
|
Small text
|
teks kecil
|
Deleted text
|
teks dipadam
|
Inserted text
|
teks dimasukkan
|
Subscripts
|
subskrip
|
Superscripts
|
superskrip
|
Underlined Text
|
Text yang bergaris
|
Jadual 1 : Format Teks
Tag
|
Penerangan
|
<b></b>
|
Mentakrifkan teks tebal
|
<em></em>
|
Mentakrifkan teks
menekankan
|
<i></i>
|
Mentakrifkan teks italik
|
<small></small>
|
Mentakrifkan teks yang
lebih kecil
|
<strong>
|
Mentakrifkan teks penting
|
<sub>
|
Mentakrifkan teks
subscripted
|
<sup>
|
Mentakrifkan teks
ditandakan
|
<ins>
|
Mentakrifkan teks
dimasukkan
|
<del>
|
Mentakrifkan teks dipadam
|
<mark>
|
Mentakrifkanditandakan/teksdiserlahkan
|
<u>...</u>
|
teks dengangaris bawah
|
Jadual 2 : Format Tag HTML Teks
Contoh penggunaan tag seperti berikut :
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b>.</p>
<p>The following word uses a <i>italicized</i>.</p>
<p>The following word uses a <u>underlined</u>.</p>
</body>
</html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b>.</p>
<p>The following word uses a <i>italicized</i>.</p>
<p>The following word uses a <u>underlined</u>.</p>
</body>
</html>
Kod 6
Pada paparan Sublime text 3 :
Hasilnya adalah seperti berikut :
7. Hyperlink (Pautan)
Pautan terdapat di hampir semua laman web. Pautan membolehkan pengguna untuk klik perjalanan dari laman ke laman. Pautan HTML yang hyperlink.
Pautan terdapat di hampir semua laman web. Pautan membolehkan pengguna untuk klik perjalanan dari laman ke laman. Pautan HTML yang hyperlink.
Hyperlink ialah teks atau imej yang anda boleh klik pada, dan melompat ke dokumen lain. Laman web boleh mengandungi pelbagai pautan yang membawa anda terus ke laman-laman lain dan bahagian-bahagian tertentu bahkan halaman yang diberikan.
Pautan ini dikenali sebagai hyperlink. Hyperlink membolehkan pengunjung untuk mengemudi antara laman web dengan klik pada perkataan, frasa, dan imej. Oleh itu anda boleh membuat hyperlink menggunakan teks atau imej yang terdapat di laman web.
Contoh penggunaan tag seperti berikut :
<html>
<body>
<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</body>
</html>
<body>
<p><a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</body>
</html>
Kod 6
Pada paparan Sublime text 3 :
Hasilnya adalah seperti berikut :
No comments:
Post a Comment