HTML adalah tulang belakang internet masa kini. Berjuta-juta laman web bersama-sama membentuk internet. Di mana HTML adalah blok bangunan semua laman web ini. Dua puluh tahun yang lalu, walaupun anda hanya seorang blogger hobi, anda perlu mengetahui beberapa pengekodan web untuk melindungi diri anda atau menambah fungsi mudah pada tapak anda. Tetapi kini terdapat begitu banyak editor dan pemalam yang tersedia sehingga mengetahui asas HTML tidak lagi diperlukan.
Masalahnya ialah jika anda tidak mengetahui beberapa perkara asas, anda boleh dengan mudah menghadapi masalah sebenar dalam blog anda dan perlu mengupah pembangun yang mahal untuk menyelesaikan masalah yang mungkin kecil. Bukan itu sahaja, malah membuat perubahan pada blog anda seperti menambah widget teks tersuai memerlukan sedikit pengetahuan.
Dan jika anda mengalami reka letak kandungan kelihatan tidak betul, pengetahuan HTML boleh membawa anda kembali ke landasan yang betul.
Sebelum Anda Mula – Asas HTML
Apa itu HTML?
HTML ialah singkatan daripada Hyper Text MArkupe Language. Ia adalah bahasa standard untuk menandai kandungan untuk pelayar web.
HTML diwakili oleh "Elemen". Elemen juga dikenali sebagai "Tag".
Mengapa HTML diperlukan?
Pelayar web hanya boleh memaparkan tapak web apabila ia ditulis dalam bahasa yang disokongnya. HTML ialah bahasa penanda yang paling biasa dan mempunyai penerimaan tertinggi kepada pelayar web.
Itulah sebabnya anda memerlukan HTML.
Adakah HTML sensitif huruf besar-besaran?
HTML tidak sensitif huruf besar-besaran. Tetapi amalan terbaik ialah menulis HTML dengan kes yang betul.
Langkah-langkah untuk Mencipta Fail HTML Pertama Anda
Anda boleh mencipta fail HTML asas menggunakan Notepad pada komputer anda. Tetapi ia akan menyakitkan untuk menulis banyak baris kod.
Anda memerlukan Editor Kod. Editor kod yang baik akan memudahkan untuk menulis dan menyusun kod yang besar. Saya menggunakan dan mengesyorkan Notepad++ (percuma dan sumber terbuka) untuk menulis bahasa web. Terdapat editor lain yang boleh anda gunakan seperti Teks Sublime, Atom dll.
Inilah yang perlu anda lakukan:
- Pasang editor kod
- Bukanya
- Buat fail baru
- Simpannya sebagai fail .html
1. Hello Dunia!
Salin dan tampal kod berikut ke dalam fail HTML baharu anda dan simpannya. Sekarang jalankannya pada pelayar web anda.
Kod HTML
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Output:
tahniah! Anda telah mencipta fail HTML pertama anda. Anda tidak perlu memahaminya pada ketika ini. Kami akan menutupnya sebentar lagi.
Memahami Struktur HTML
Setiap fail HTML mempunyai struktur telanjang biasa. Di sinilah segalanya bermula. Dan setiap halaman besar kod akan datang ke struktur ini selepas dipangkas.
Jadi mari kita cuba memahaminya dari "Hello World!" kod. Elemen berikut adalah bahagian wajib untuk setiap fail HTML.
- = Ia adalah pengisytiharan kepada penyemak imbas bahawa ini ialah fail HTML. Anda mesti menyatakannya sebelum tag.
- = Ini ialah elemen akar fail HTML. Semua yang anda tulis adalah antara dan .
- = Ini ialah bahagian maklumat meta untuk penyemak imbas. Kod dalam teg ini tidak mempunyai output visual.
- = Ini adalah bahagian yang dibuat oleh pelayar web. Perkara yang betul-betul anda lihat di tapak web ialah pemaparan kod antara dan .
2. Tag HTML
HTML ialah kerjasama ratusan tag yang berbeza. Anda perlu belajar bagaimana ia berfungsi. Anda juga perlu memastikan bahawa mereka telah menggunakannya dengan cara yang betul.
Tag HTML biasanya mempunyai teg pembuka dan penutup. Teg pembuka mempunyai kata kunci yang dikelilingi oleh tanda kurang daripada (<) dan lebih besar daripada (>). Teg penutup mempunyai semua yang sama tetapi garis miring ke hadapan tambahan (/) selepas tanda kurang daripada (<).
Tag Kepala
Semua tag kepala pergi antara dan . Ia mengandungi maklumat meta untuk pelayar web dan enjin carian. Mereka pada dasarnya tidak mempunyai output visual.
Teg tajuk mentakrifkan tajuk halaman web yang boleh dilihat pada tab penyemak imbas. Maklumat ini digunakan oleh program web dan enjin carian. Anda boleh mempunyai satu tajuk tertinggi bagi setiap fail HTML.
Kod:
<title>My first web page</title>
Teg pautan memautkan halaman HTML anda dengan sumber luaran. Penggunaan utamanya ialah memautkan halaman HTML dengan lembaran gaya CSS. Ia adalah teg penutup sendiri dan tidak memerlukan pengakhiran . Di sini rel bermaksud hubungan dengan fail dan src bermaksud sumber.
Kod:
<link rel="stylesheet" type="text/css" src="style.css">Meta ialah satu lagi tag penutup diri yang menyediakan maklumat meta bagi fail html. Enjin carian dan perkhidmatan web lain menggunakan maklumat ini. Tag meta adalah satu kemestian jika anda ingin mengoptimumkan halaman anda untuk enjin carian.
Kod:
<meta name="description" content="This is the short description that search engines show"Teg skrip digunakan untuk memasukkan skrip sebelah pelayan atau membuat pautan ke fail skrip luaran. Ia boleh mempunyai dua atribut dalam teg pembukaan. Satu adalah jenis dan satu lagi adalah sumber (src).
Kod:
<script type="text/javascript" src="scripts.js"></script>Teg noskrip berfungsi apabila skrip dilumpuhkan dalam penyemak imbas web. Ia menjadikan halaman serasi kepada mereka yang tidak membenarkan skrip dalam penyemak imbas web mereka.
Kod:
<noscript><p>Alas! Scripts are disabled.</p></noscript>Tag Badan
Semua tag badan pergi antara dan . Mereka mempunyai output visual. Di sinilah paling banyak kerja dilakukan. Anda perlu menggunakan teg ini untuk menyusun kandungan halaman utama anda.
kepada
Ini adalah tag tajuk. Tajuk yang paling penting ditandakan dengan dan yang paling kurang penting dengan . Anda harus menggunakannya dalam hierarki yang betul.
Kod:
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading </h2>
<h3>This is a h3 heading </h3>
<h4>This is a h4 heading </h4>
<h5>This is a h5 heading </h5>
<h6>This is a h6 heading </h6>Output:
Memformat Tag
Teks dalam fail html boleh diformat menggunakan banyak teg pemformatan. Ia perlu apabila anda ingin menyerlahkan perkataan atau baris daripada kandungan anda.
Kod:
<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>Output:
Anda boleh menyimpang beberapa kod daripada rending menggunakan tag ulasan. Kod akan dipaparkan dalam kod sumber tetapi tidak akan dipaparkan. Kegunaan utama tag ini adalah untuk membuat dokumentasi fail html untuk rujukan masa hadapan.
Contoh:
<!-- <p>You can comment out any code by surrounding them in this way</p> -->Tag HTML Penting Lain
Anchor ialah tag yang tidak ternilai yang digunakan hampir di mana-mana. Anda tidak akan melihat mana-mana halaman web dalam talian tanpa sekurang-kurangnya satu pautan utama.
Strukturnya sama. Ia mempunyai bahagian pembukaan dan penutup . Teks yang ingin anda sauhkan berada di antara dan .
Terdapat beberapa atribut yang menentukan ke mana dan cara pengguna pergi selepas mengklik padanya.
- ahref="" = Ia mentakrifkan pautan destinasi. Pautan pergi antara petikan berganda.
- sasaran=” “ = Ia mentakrifkan sama ada URL akan dibuka dalam tab penyemak imbas baharu atau dalam tab yang sama. target=”_blank” adalah untuk tab baharu dan target=”_self” adalah untuk pembukaan dalam tab yang sama.
- rel="" = Ia mentakrifkan hubungan halaman semasa dengan halaman yang dipautkan. Jika anda tidak mempercayai halaman yang dipautkan, anda boleh menentukan rel="nofollow".
Kod:
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google.
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>.
It will also take you to Google but will open in the current tab.</p>Output:
Teg imej ialah satu lagi teg penting yang tanpanya anda tidak boleh bayangkan banyak tapak web berasaskan imej.
ialah tag penutup diri. Ia tidak memerlukan penutup tradisional seperti . Terdapat beberapa atribut yang perlu anda ketahui sebelum anda boleh menggunakannya dengan betul.
- src="" = Ini adalah untuk menentukan pautan sumber imej. Letakkan pautan betul-betul di antara petikan berganda.
- alt="" = Ia bermaksud teks alternatif. Apabila imej anda tidak dimuatkan, teks ini akan memberi pengguna idea tentang imej yang hilang.
- lebar=” “ = Ia mentakrifkan lebar imej dalam piksel.
- Tinggi =” “ = Ia mentakrifkan ketinggian imej dalam piksel.
<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"
alt="Google's Headquarter in August 2014" width="500" height="375" />Output:
Petua: Ingin memasukkan imej yang boleh diklik? Balut kod imej dengan tag. Lihat bagaimana ia berlaku.
atau
Tag senarai adalah untuk membuat senarai item. bermaksud senarai tertib (senarai bernombor) dan bermaksud senarai tidak tersusun (titik peluru).
Item senarai di dalam atau ditandakan dengan . li bermaksud senarai. Anda boleh mempunyai seberapa banyak seperti yang anda mahukan di dalam ibu bapa atau tag.
Kod:
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Output:
Teg jadual adalah untuk membuat jadual data. Terdapat beberapa teg peringkat dalaman yang mentakrifkan pengepala jadual, baris dan lajur.
ialah kod induk luar. Dalam tag ini, bermaksud barisan meja, bermaksud lajur jadual dan bermaksud pengepala meja.
Kod:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>Output:
Nota: Nilai di dalam yang pertama adalah tajuk. Jadi, kami gunakan yang menggunakan kesan teks tebal pada teks.
Pengumpulan Jadual
Anda boleh melanjutkan kefungsian jadual menggunakan elemen kumpulan jadual. Akan ada masanya anda perlu membuat jadual besar yang berpecah kepada beberapa halaman.
Dengan mengumpulkan data jadual anda ke dalam pengepala, badan dan pengaki, anda boleh membenarkan penatalan bebas. Pengepala dan bahagian badan akan dicetak pada setiap halaman di mana jadual anda telah terbentang.
Tag kumpulan jadual ialah:
- = Untuk membungkus tajuk jadual. Ia mencetak pada setiap halaman pecahan jadual.
- = Untuk membungkus data utama jadual. Anda boleh mempunyai seberapa banyak seperti yang anda perlukan. A tag bermaksud kumpulan data yang berasingan.
- = Untuk membungkus maklumat pengaki jadual. Ia mencetak pada setiap halaman pecahan jadual.
Sila ambil perhatian bahawa penggunaan kumpulan tidak wajib. Anda boleh menggunakannya untuk menjadikan jadual yang lebih besar lebih mudah dibaca. Walaupun sesetengah pembangun khas menggunakan teg ini dengan ketara sebagai Pemilih CSS.
Berikut ialah cara kami boleh mengumpulkan jadual contoh kami , dan :
Kod:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>Output:
Elemen borang digunakan untuk membuat borang interaktif untuk halaman web. Borang HTML mengandungi beberapa elemen berturut-turut. Contohnya: , , dsb.
Atribut tindakan dalam bentuk sangat penting. Ia menunjuk ke bahagian pelayan atau halaman pihak ketiga untuk memproses maklumat. Untuk pemprosesan, anda perlu menentukan kaedah terlebih dahulu.
Anda boleh menggunakan salah satu daripada dua kaedah, dapatkan atau hantar. Dapatkan menghantar semua maklumat dalam format URL di mana Post menghantar maklumat dalam badan mesej.
Terdapat banyak jenis input untuk borang. Jenis input yang sangat asas ialah teks. Ia ditulis sebagai . Jenis juga mungkin radio, kotak semak, e-mel dan sebagainya. Perlu ada input jenis hantar di bahagian bawah untuk membuat butang hantar.
tag digunakan untuk membuat label dan mengaitkannya dengan input. Peraturan mengaitkan label dengan input ialah yang mempunyai nilai yang sama dalam untuk=” ” atribut label dan id=” ” atribut input.
Kod:
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>Output:
Nota: Saya telah menunjukkan tindakan kepada nilai nol kerana ia tidak disambungkan ke mana-mana pelayan untuk memproses maklumat.
3. Atribut HTML
Atribut ialah satu jenis pengubah suai untuk teg HTML. Mereka menambah konfigurasi baharu pada teg HTML.
Atribut kelihatan seperti attributename=” ” dan terletak dalam teg HTML pembukaan. Nilai atribut berada di antara petikan berganda.
id="" dan kelas=""
id dan kelas ialah pengecam teg HTML. Nama yang berbeza ditetapkan untuk elemen HTML yang berbeza menggunakan pengecam. Anda boleh menggunakan satu pengecam kelas untuk berbilang elemen. Tetapi anda tidak boleh menggunakan satu pengecam id untuk berbilang elemen.
Kod:
<h1 class="heading">This is the main title</h1>href=””
href bermaksud Rujukan Hiperteks. Mereka mengarahkan pengguna ke pautan rujukan. Tag anchor menggunakan href untuk menghantar pengguna ke URL destinasi.
Kod:
<a href="https://www.google.com/">Google</a>src=""
src bermaksud sumber. Ia mentakrifkan sumber media atau sumber yang anda gunakan dalam fail HTML. Sumber boleh sama ada URL tempatan atau pihak ketiga.
Kod:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt = ""
alt bermaksud alternatif. Ia ialah teks sandaran yang digunakan apabila elemen HTML tidak dapat dimuatkan.
Kod:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />gaya=””
atribut gaya sering digunakan dalam tag HTML. Ia melakukan tugas CSS dalam teg HTML. Sifat penggayaan anda berada di antara petikan berganda.
Kod:
<h2 style="color:red">This is another title</h2>4. Paparan Kod: Blok lwn Sebaris
Sesetengah elemen sentiasa bermula pada baris baharu dan mengambil lebar penuh yang tersedia. Ini ialah elemen "Sekat".
Cth: , , - , borang dll.
Sesetengah elemen hanya mengambil ruang yang diperlukan dan tidak bermula pada baris baharu. Ini ialah elemen "Sebaris".
Cth: , , , , dll.
Anda perlu membezakan elemen blok daripada sebaris apabila anda akan menggunakan gaya CSS. Dalam panduan HTML ini, ia tidak begitu diperlukan.
Kod:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>Output:
5. Petikan berganda vs petikan tunggal dalam HTML
Soalan ini sangat jelas. Apakah yang perlu anda gunakan dalam HTML? Petikan tunggal atau petikan berganda? Orang ramai nampaknya menggunakan kedua-duanya tetapi yang manakah betul?
Dalam HTML, petikan tunggal dan petikan berganda adalah sama. Mereka tidak membuat apa-apa perbezaan dalam output.
Anda boleh menggunakan sesiapa sahaja yang anda suka. Tetapi mencampurkan kedua-duanya dalam halaman kod dianggap sebagai amalan buruk. Anda harus konsisten dengan mana-mana daripada mereka.
6. HTML Semantik vs HTML Bukan Semantik
HTML Semantik ialah versi terkini HTML, yang juga dipanggil HTML5. Ia adalah versi dibangunkan bagi HTML dan XHTML bukan semantik.
Mengapa HTML5 lebih baik? Dalam versi sebelumnya, elemen HTML telah dikenal pasti dengan nama id/kelas. Contohnya: telah dianggap sebagai artikel.
Dalam HTML5, tag mewakili dirinya sebagai artikel tanpa memerlukan sebarang pengecam id/kelas.
Demi HTML5, kini enjin carian dan aplikasi web lain boleh memahami halaman web dengan lebih baik. Laman web semantik telah terbukti lebih baik untuk SEO.
Berikut ialah senarai beberapa teg HTML5 yang popular:
- = Ini adalah untuk membungkus kandungan utama yang anda ingin tunjukkan kepada penonton anda.
- = Ini adalah untuk menandakan bahagian pengepala kandungan seperti tajuk atau meta pengarang.
- = Ia menentukan kandungan yang ditentukan pengguna atau bebas kepada penonton anda.
- = Ia boleh mengumpulkan sebarang kod seperti pengepala, pengaki atau bar sisi. Anda boleh katakan, ia adalah bentuk semantik div.
- = Di sinilah kandungan pengaki, penafian atau teks hak cipta anda berada.
- = Ia membolehkan anda memasukkan fail audio tanpa mempunyai sebarang masalah pemalam.
- = Suka , anda boleh memasukkan video menggunakan teg ini tanpa masalah pemalam.
Struktur HTML5 ringkas akan kelihatan seperti ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. Pengesahan HTML
Kebanyakan profesional web mengesahkan kod mereka selepas menyelesaikannya. Mengapakah perlu untuk mengesahkan kod apabila ia berfungsi dengan baik?
Terdapat dua sebab yang mungkin untuk mengesahkan kod anda:
- Ia akan membantu anda menjadikan kod anda merentas pelayar dan merentas platform serasi. Kod mungkin tidak menunjukkan sebarang ralat dalam penyemak imbas semasa anda, tetapi mungkin dalam satu lagi. Pengesahan kod akan membetulkannya.
- Enjin carian dan program web lain mungkin berhenti merangkak halaman anda jika anda mempunyai ralat di dalamnya. Anda boleh mengesahkan melalui pengesahan bahawa anda tidak mempunyai sebarang ralat besar.
W3C Validator ialah perkhidmatan yang paling popular untuk pengesahan kod. Mereka mempunyai beberapa kaedah untuk mengesahkan kod. Anda boleh sama ada memuat naik fail atau memasukkan terus kod dalam enjin pengesahan mereka.
Mengambil Langkah Seterusnya: Daripada Menulis HTML kepada Membina dan Mengehos Laman Web Anda
Kini setelah anda mempunyai pemahaman yang kukuh tentang asas-asas HTML, anda sedang dalam perjalanan untuk mencipta halaman web yang berfungsi dan tersusun dengan baik. Sama ada anda meneruskan pengekodan secara manual atau lebih suka pendekatan yang lebih diperkemas, terdapat banyak alatan untuk membantu anda menghidupkan projek anda.
Jika anda ingin membina tapak web tanpa mendalami kod, pertimbangkan untuk meneroka senarai kami pembangun tapak web tanpa kod terbaik. Platform ini membolehkan anda mereka bentuk dan melancarkan tapak web profesional dengan mudah, menggunakan antara muka seret dan lepas yang intuitif—sempurna untuk mengubah idea anda dengan cepat menjadi realiti tanpa mengorbankan fleksibiliti.
Bagi mereka yang bersedia untuk menjalankan projek HTML mereka secara langsung, memilih perkhidmatan pengehosan yang betul adalah penting. Semak beberapa penyedia pengehosan laman web statik terbaik dalam panduan ini untuk mencari pilihan mampu milik yang melengkapkan tapak berkod tangan anda dengan sempurna.
Mana-mana laluan yang anda pilih, menggabungkan kemahiran HTML anda dengan alatan yang betul dan penyelesaian pengehosan akan menetapkan asas untuk kehadiran dalam talian anda. Selamat mengekod!
