Asas HTML
Dalam artikel ini, kami menerangkan asas HTML.
Ini menerangkan tag utama seperti deklarasi DOCTYPE, tag <html>, <head>, dan <body>. Ia juga menerangkan tag, atribut, dan aksara khas.
YouTube Video
Asas HTML
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>HTML is the language used to create the basic structure of web pages.</p>
15 </main>
16 </body>
17</html>-
<!DOCTYPE html>Pada permulaan fail, kita mengisytiharkan bahawa ini adalah dokumen HTML5, menunjukkan bahawa ia mengikut peraturan HTML5.
-
<html>Tag
<html>adalah elemen paling luar dalam dokumen HTML yang meliputi seluruh kandungan. Setiap fail HTML mengandungi hanya satu tag<html>, dan semua tag lain bersarang dalam tag ini. Atributlang="en"dalam tag pembukaan<html>dipanggil atribut dan memberitahu pelayar bahawa dokumen itu ditulis dalam Bahasa Inggeris. Ini membantu memaklumkan pembaca skrin dan enjin carian tentang bahasa dokumen. -
<head>Tag
<head>mentakrifkan metadata (maklumat) untuk halaman. Ini termasuk tajuk halaman, pengekodan aksara, dan tetapan reka bentuk responsif. Reka bentuk responsif merujuk kepada kaedah yang direka untuk laman web atau aplikasi untuk menyesuaikan dan memaparkan dengan baik pada pelbagai peranti dan saiz skrin. Ini membolehkan pengguna melihat kandungan dengan selesa pada peranti yang berbeza seperti telefon pintar, tablet, dan komputer meja.<meta charset="UTF-8">menetapkan pengekodan aksara dokumen kepada UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">ialah tetapan yang mengoptimumkan paparan untuk peranti mudah alih. Halaman menyesuaikan diri dengan lebar skrin peranti.<title>mewakili tajuk halaman yang dipaparkan dalam tab pelayar. Dalam contoh ini, tajuk 'Asas HTML' ditetapkan. -
<body>Tag
<body>mengandungi bahagian yang memaparkan kandungan kepada pengguna. Dalam tag ini, teks, gambar, pautan dan lain-lain ditulis. -
<main>Tag
<main>mewakili kandungan utama halaman. Ini termasuk tajuk dan perenggan. -
<h1>Tag
<h1>mewakili tajuk paling penting pada halaman. Ia lazimnya menggunakan tag<main>dan tag<h1>hanya sekali dalam dokumen. -
<p>Tag
<p>mewakili satu perenggan. -
<!-- Comment -->Anda boleh menulis komen dalam HTML dalam format ini. Oleh kerana HTML sisi klien boleh dilihat oleh sesiapa sahaja, jangan sertakan maklumat sensitif seperti kata laluan atau kunci API dalam komen.
HTML mempunyai banyak tag, tetapi beri perhatian kepada perkara berikut di sini. Satu fail HTML terdiri daripada satu pengisytiharan DOCTYPE dan satu tag <html>. Tag <html> mengandungi satu tag <head> dan satu tag <body>. Dalam HTML, semua tag terkandung dalam tag <html>, menyatakan struktur teks melalui hubungan induk, anak, dan saudara, serupa dengan struktur pokok. Apabila menulis HTML, fokus juga kepada struktur dokumen.
Tag dan Atribut
Seterusnya, mari kita lihat tag dan atribut HTML.
1<!-- Opening tag and closing tag -->
2<div>Content</div>
3
4<!-- Self-closing tag -->
5<br>
6
7<!-- Nested tag -->
8<div>
9 <div>Nested Content</div>
10</div>
11
12<!-- Attribute -->
13<div id="main">
14 <div>Nested Content</div>
15</div>
16
17<!-- Tag : <div> -->
18<!-- Element : <div>Content</div> -->Tag dikurung dalam kurungan sudut (<, >) dan biasanya terdiri daripada pasangan tag pembukaan dan penutupan. Namun, terdapat juga tag tunggal, seperti tag <meta> dan <img>, yang tidak mengandungi kandungan. Tag tunggal tidak memerlukan tag penutupan.
Tag boleh mempunyai atribut, yang memberikan maklumat tambahan kepada tag. Atribut ditulis di dalam tag pembukaan dalam format attributeName="value".
Di sini, <div> dirujuk sebagai tag, dan <div>Content</div> sebagai elemen.
1<div id="header">
2 <ul class="menu">
3 <li>Home</li>
4 <li style="display: hidden;">Unvisible Menu Item</li>
5 </ul>
6</div>Atribut biasa dalam HTML termasuk id, class, dan style. Atribut id digunakan untuk memberikan elemen suatu pengenal pasti unik, dan hanya boleh ada satu elemen dengan id yang sama pada satu halaman. Ia berguna apabila memanipulasi elemen tertentu dengan JavaScript atau CSS. Atribut class membolehkan anda mengumpulkan pelbagai elemen dengan CSS atau JavaScript dengan menetapkan nama kelas. Anda boleh menetapkan kelas yang sama kepada pelbagai elemen, membolehkan gaya dikongsi. Atribut style menentukan gaya CSS secara inline untuk satu elemen. Biasanya, gaya ditakrif dalam lembaran gaya luaran atau dalam tag <style>, tetapi atribut ini digunakan apabila anda ingin menentukan gaya secara langsung untuk elemen individu.
Aksara khas dalam HTML
Seterusnya, mari kita lihat watak khas dalam HTML.
Dalam HTML, terdapat watak khas yang digunakan untuk memaparkan simbol dan watak tertentu. Watak khas ini dipanggil entiti. Aksara khas bermula dengan & (ampersand), diikuti dengan nama atau nombor, dan diakhiri dengan ; (titik koma).
Watak khas perwakilan dalam HTML
Berikut adalah beberapa watak khas biasa.
| Display | Entity Name | Entity Number | Description |
|---|---|---|---|
& |
& |
& |
Ampersand (&) |
< |
< |
< |
Less-than sign (<) |
> |
> |
> |
Greater-than sign (>) |
" |
" |
" |
Double quotation mark (") |
' |
' |
' |
Apostrophe (') |
| © | © |
© |
Copyright symbol (©) |
| € | € |
€ |
Euro symbol (€) |
| ¥ | ¥ |
¥ |
Japanese Yen symbol (¥) |
| ¢ | ¢ |
¢ |
Cent symbol (¢) |
| £ | £ |
£ |
Pound symbol (£) |
|
|
  |
Non-breaking space (space) |
Contoh penggunaan watak khas dalam HTML
Secara khusus, kurungan sudut (<, >) dan petikan berganda perlu digunakan dengan betul dalam HTML.
Kurung sudut (<, >) dan tanda petikan dua harus diwakili sebagai watak khas dalam HTML, seperti yang ditunjukkan di bawah.
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Basics of HTML</title>
7 </head>
8 <body>
9 <!-- Main content wrapped in the main tag -->
10 <main>
11 <!-- Main heading -->
12 <h1>What is HTML?</h1>
13 <!-- Example of a paragraph -->
14 <p>
15 HTML is the language used to create the basic structure of web pages.<br>
16 It defines the content and layout of a webpage using various elements such as headings, paragraphs, and lists.
17 </p>
18 <hr>
19 <h2>Basic Elements of HTML</h2>
20 <div>
21 HTML elements are used to organize and display content on a web page.
22 They include tags for text, images, links, and more.
23 </div>
24 <hr>
25 <ul>
26 <li>Headings (e.g., <h1>, <h2>)</li>
27 <li>Paragraphs (<p>)</li>
28 <li>Links (<a>)</li>
29 <li>Lists (<ul>, <ol>)</li>
30 <li>Images (<img>)</li>
31 </ul>
32 <hr>
33- <h3>About '<h1>' tag and '<h2>' tag</h3>
34+ <h3>About '<h1>' tag and '<h2>' tag</h3>
35 <img src="image.png"
36- alt="This is an example of "image"">
37+ alt="This is an example of "image"">
38 </main>
39 </body>
40</html>
Versi HTML
Mari kita lihat versi HTML di sini.
Versi HTML telah berkembang untuk menentukan struktur dan fungsi halaman web. Berikut adalah versi utama:.
-
HTML 1.0 (1993)
Versi HTML pertama hanya mempunyai ciri markup yang sangat asas. Ia mentakrifkan elemen seperti pautan, tajuk, perenggan dan senarai.
-
HTML 2.0 (1995)
Versi pertama yang diseragamkan, dengan lebih banyak elemen ditambah, termasuk sokongan untuk borang dan jadual.
-
HTML 3.2 (1997)
Lebih banyak ciri susun atur ditambah, membenarkan penyisipan elemen gaya dan skrip. Selain itu, susun atur menggunakan elemen
<table>menjadi biasa. -
HTML 4.01 (1999)
Pemisahan antara struktur dan penyampaian dipertingkatkan, dan CSS diperkenalkan. Penciptaan laman web yang mematuhi piawaian menjadi disyorkan. Selain itu, internasionalisasi dan kebolehcapatan dokumen telah diperbaiki.
-
HTML5 (2014)
Versi utama terbaru, memperkenalkan sokongan untuk video dan audio, kanvas, storan setempat, geolokasi, dan API baru yang lain. Ia mesra mudah alih, membolehkan pembangunan aplikasi web yang lebih interaktif.
HTML5.2 adalah versi HTML yang disarankan pada tahun 2017, dan merupakan versi yang diperbaiki dari HTML5. Sejak HTML5.2, ia sentiasa dikemas kini sebagai HTML Living Standard, bukannya mempunyai nombor versi statik.
HTML telah berkembang melalui versi-versi ini, menjadi teknologi web yang lebih fleksibel dan berkuasa.
Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.