Tuesday, July 10, 2018

Asas-Asas HTML





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>
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
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. 

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>
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>
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>     
 </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 :


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>
 



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.

 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>



Kod 6


 Pada paparan Sublime text 3 :





 Hasilnya adalah seperti berikut :

 Selamat mencuba ya..

 Sumber : Cikgu Afzan


No comments:

Post a Comment