Bahasa Penanda Hiperteks, biasanya dikenali sebagai HTML, ialah sistem piawai yang digunakan untuk mencipta dan menstruktur halaman web. Ia membentuk tulang belakang World Wide Web, membolehkan pelayar web mentafsir dan memaparkan teks, imej, video dan kandungan multimedia lain di tapak web. HTML berfungsi sebagai bahasa asas untuk membina struktur dan susun atur halaman web, memudahkan interaksi lancar antara pengguna dan kandungan dalam talian.
Sejarah asal usul Hypertext Markup Language (HTML) dan sebutan pertama mengenainya
Konsep hiperteks, sistem pencarian maklumat bukan linear, telah diperkenalkan pada tahun 1940-an oleh Vannevar Bush, seorang jurutera dan saintis yang berwawasan. Walau bagaimanapun, hanya pada awal 1990-an barulah HTML wujud sebagai bahasa penanda piawai. Pembangunan HTML dikaitkan dengan Tim Berners-Lee, seorang saintis komputer British, yang membayangkan cara untuk berkongsi dokumen di kalangan penyelidik di CERN, sebuah organisasi penyelidikan Eropah.
Pada tahun 1991, Tim Berners-Lee menerbitkan laman web pertama, yang memaparkan dokumen HTML yang ringkas. Beliau juga memperkenalkan pelayar web dan pelayan web pertama, sekali gus meletakkan asas untuk World Wide Web. HTML mendapat populariti yang ketara dengan keluaran pelayar web Mosaic pada tahun 1993, menjadikan internet boleh diakses oleh khalayak yang lebih luas.
Maklumat terperinci tentang Hypertext Markup Language (HTML)
HTML ialah bahasa penanda yang menggunakan sistem tag untuk menstruktur kandungan pada halaman web. Teg ini memberikan arahan kepada pelayar web tentang cara memaparkan elemen halaman web, seperti tajuk, perenggan, imej, pautan dan kandungan multimedia. Versi terkini HTML ialah HTML5, yang disokong secara meluas oleh pelayar web moden.
Ciri-ciri utama HTML termasuk:
-
Elemen dan Tag: Dokumen HTML terdiri daripada pelbagai elemen yang diwakili oleh tag. Tag disertakan dalam kurungan sudut (< >) dan biasanya datang secara berpasangan, dengan tag pembuka dan tag penutup. Kandungan antara teg pembukaan dan penutup mentakrifkan elemen.
-
Unsur Semantik: HTML5 memperkenalkan satu set elemen semantik yang memberikan lebih makna dan struktur kepada kandungan. Contoh unsur semantik termasuklah
<header>,<nav>,<main>,<article>,<section>, dan<footer>. Elemen ini meningkatkan kebolehaksesan dan membantu enjin carian memahami kandungan dengan lebih baik. -
Atribut: Elemen HTML boleh mempunyai atribut yang memberikan maklumat tambahan atau mengubah suai tingkah laku elemen tersebut. Atribut ditambah dalam teg pembukaan elemen.
-
Hiperpautan: HTML membenarkan penciptaan hiperpautan menggunakan
<a>(sauh) unsur. Hiperpautan membolehkan pengguna menavigasi antara halaman web atau sumber yang berbeza. -
Imej dan Multimedia: HTML menyokong pembenaman imej, video dan audio menggunakan elemen yang sesuai seperti
<img>,<video>, dan<audio>. -
Borang: HTML menyediakan elemen bentuk, seperti
<form>,<input>,<select>, dan<button>, untuk mencipta borang web interaktif untuk input pengguna dan penyerahan data. -
Keserasian: HTML direka bentuk untuk serasi ke belakang, bermakna pelayar web yang lebih lama masih boleh memaparkan versi HTML yang lebih baharu, walaupun mereka mungkin tidak menyokong semua ciri terkini.
Struktur dalaman Bahasa Penanda Hiperteks (HTML) dan cara ia berfungsi
Dokumen HTML mengikut struktur hierarki, biasanya dirujuk sebagai Model Objek Dokumen (DOM). DOM mewakili halaman web sebagai struktur elemen seperti pokok, dengan <html> unsur sebagai akar pokok. Setiap elemen dalam pepohon ialah nod, dan hubungan antara elemen menentukan reka letak halaman.
Apabila halaman web dimuatkan dalam penyemak imbas, enjin pemaparan penyemak imbas memproses kod HTML dan membina DOM. Semasa DOM dibina, penyemak imbas mentafsir teg HTML dan menggunakan gaya dan peraturan reka letak yang sepadan, menghasilkan perwakilan visual halaman web yang dilihat pengguna.
Proses rendering melibatkan langkah-langkah berikut:
-
Menghuraikan: Penyemak imbas membaca kod HTML dan menukarnya menjadi pepohon DOM, mengiktiraf elemen dan hubungannya.
-
Penyampaian: Penyemak imbas menentukan susun atur setiap elemen berdasarkan gaya yang berkaitan (CSS) dan mengira kedudukan elemen pada halaman.
-
Melukis: Penyemak imbas memaparkan halaman web terakhir dengan melukis setiap elemen pada skrin.
Adalah penting untuk ambil perhatian bahawa semasa HTML mentakrifkan struktur dan kandungan halaman web, Cascading Style Sheets (CSS) digunakan untuk mengawal pembentangan dan reka letak, manakala JavaScript mendayakan interaktiviti dan tingkah laku dinamik.
Analisis ciri utama Bahasa Penanda Hiperteks (HTML)
Ciri utama HTML menjadikannya bahasa penting untuk pembangunan web, memastikan konsistensi dan keserasian merentas platform dan pelayar yang berbeza. Beberapa ciri penting termasuk:
-
Elemen Struktur: HTML menyediakan satu set elemen struktur standard, seperti tajuk, perenggan, senarai dan jadual, membenarkan pembangun menyusun kandungan secara logik dan intuitif.
-
Kebolehcapaian: HTML5 memperkenalkan elemen semantik yang membantu dalam membina tapak web yang boleh diakses. Elemen ini membantu pembaca skrin dan teknologi bantuan lain lebih memahami struktur kandungan, menjadikan web lebih inklusif.
-
Hiperpautan dan Navigasi: Keupayaan untuk mencipta hiperpautan membolehkan navigasi lancar antara halaman web dan sumber, membentuk asas kepada World Wide Web yang saling berkaitan.
-
Integrasi Media: HTML membenarkan penyepaduan pelbagai elemen multimedia, termasuk imej, video dan audio, memperkayakan pengalaman pengguna.
-
Pengendalian Borang: Elemen bentuk HTML membolehkan penciptaan borang interaktif, memudahkan input pengguna dan penyerahan data, menjadikannya penting untuk tinjauan dalam talian, pendaftaran dan sistem log masuk.
-
Keserasian ke belakang: Keserasian ke belakang HTML memastikan bahawa halaman web yang lebih lama terus berfungsi dengan betul pada pelayar web yang lebih baharu, memberikan kestabilan dan sokongan jangka panjang.
Jenis Bahasa Penanda Hiperteks (HTML)
HTML telah berkembang dari semasa ke semasa, dan versi berbeza telah dikeluarkan untuk menambah baik dan mengembangkan keupayaannya. Berikut adalah beberapa versi HTML yang ketara:
| Versi HTML | Penerangan | Tahun Keluaran |
|---|---|---|
| HTML | Versi awal HTML. | 1993 |
| HTML 2.0 | Memperkenalkan sokongan untuk jadual dan borang. | 1995 |
| HTML 3.2 | Sokongan yang lebih baik untuk CSS dan skrip. | 1997 |
| HTML 4.01 | Memperkenalkan penyeragaman yang lebih ketat. | 1999 |
| XHTML | Versi HTML berasaskan XML. | 2000 |
| HTML5 | Versi semasa dengan ciri dan API baharu. | 2014 |
HTML digunakan terutamanya dalam pembangunan web untuk mencipta halaman web statik dan aplikasi web dinamik. Beberapa cara biasa HTML digunakan termasuk:
-
Pembangunan Laman Web: HTML membentuk struktur halaman web, mentakrifkan reka letak, kandungan dan elemen multimedia.
-
Reka bentuk responsif: HTML adalah penting untuk mencipta tapak web responsif yang menyesuaikan diri dengan saiz skrin dan peranti yang berbeza.
-
Templat E-mel: HTML digunakan untuk mereka bentuk templat e-mel yang menarik secara visual dan responsif.
-
Borang Web: Elemen bentuk HTML digunakan untuk mencipta borang interaktif dan mesra pengguna untuk input dan penyerahan data.
-
Dokumentasi Dalam Talian: HTML digunakan untuk mencipta dokumentasi dalam talian dan pangkalan pengetahuan.
Walau bagaimanapun, walaupun HTML adalah bahasa yang serba boleh, pembangun mungkin menghadapi beberapa cabaran, termasuk:
-
Keserasian Merentas Pelayar: Pelayar web yang berbeza mungkin mentafsir HTML dan CSS secara berbeza, yang membawa kepada ketidakkonsistenan dalam pemaparan halaman. Menggunakan rangka kerja CSS moden dan ujian pada berbilang penyemak imbas boleh membantu menangani isu ini.
-
Kebolehcapaian: Memastikan tapak web boleh diakses oleh pengguna kurang upaya mungkin memerlukan usaha tambahan, seperti menambah atribut ARIA (Accessible Rich Internet Applications) yang sesuai dan ujian dengan pembaca skrin.
-
Kerentanan Keselamatan: Serangan suntikan HTML dan kelemahan skrip merentas tapak (XSS) boleh menjejaskan keselamatan tapak web. Melaksanakan pengesahan input yang betul dan menggunakan amalan terbaik keselamatan boleh mengurangkan risiko ini.
-
Ralat Pengesahan: HTML yang tidak berstruktur boleh menyebabkan ralat pengesahan, menjejaskan prestasi tapak web dan pengoptimuman enjin carian. Pemeriksaan pengesahan yang kerap boleh membantu mengenal pasti dan membetulkan isu tersebut.
Ciri-ciri utama dan perbandingan lain dengan istilah yang serupa
Berikut ialah beberapa perbandingan antara HTML dan teknologi web yang serupa:
| Aspek | HTML | CSS (Lembaran Gaya Lantunan) | JavaScript |
|---|---|---|---|
| Tujuan | Mentakrifkan struktur halaman web | Mengawal persembahan | Membolehkan interaktiviti |
| Jenis Bahasa | Bahasa penanda | Bahasa helaian gaya | Bahasa pengaturcaraan |
| Penggunaan | Struktur dan kandungan halaman | Susun atur dan rupa halaman | Tingkah laku tapak web dinamik |
| Sokongan dalam Pelayar | Disokong oleh semua pelayar web | Disokong oleh semua pelayar web | Disokong oleh semua pelayar |
| Interaksi dengan HTML | Digunakan bersama dengan CSS | Digunakan untuk menggayakan elemen HTML | Digunakan untuk memanipulasi DOM |
HTML terus berkembang untuk memenuhi permintaan pembangunan web moden dan jangkaan pengguna. Perspektif dan teknologi masa depan yang berkaitan dengan HTML termasuk:
-
Komponen Web: Komponen Web ialah satu set piawaian yang membolehkan pembangun mencipta elemen HTML tersuai yang boleh diguna semula dan dikapsulkan. Pendekatan ini memupuk modulariti dan memudahkan pembangunan web.
-
Web Semantik: Web Semantik bertujuan untuk menjadikan kandungan web lebih mudah dibaca mesin, membolehkan pemahaman dan penyepaduan data yang lebih baik merentas aplikasi yang berbeza.
-
Realiti Tambahan (AR) dan Realiti Maya (VR): HTML berkemungkinan memainkan peranan penting dalam pembangunan pengalaman AR dan VR di web.
-
WebAssembly: WebAssembly membenarkan kod berjalan yang ditulis dalam bahasa pengaturcaraan selain JavaScript secara langsung dalam pelayar web, meningkatkan prestasi dan membuka kemungkinan baharu untuk aplikasi web.
Bagaimana pelayan proksi boleh digunakan atau dikaitkan dengan Hypertext Markup Language (HTML)
Pelayan proksi bertindak sebagai perantara antara pelanggan (seperti pelayar web) dan pelayan web. Ia boleh dikaitkan dengan HTML dalam pelbagai cara, seperti:
-
Caching dan Pecutan: Pelayan proksi boleh cache HTML dan kandungan web lain, mengurangkan beban pada pelayan web dan mempercepatkan masa memuatkan halaman untuk pengguna.
-
Tanpa Nama dan Privasi: Pengguna boleh menggunakan pelayan proksi untuk mengakses kandungan web tanpa nama, kerana pelayan bertindak sebagai perantara dan melindungi alamat IP pengguna daripada pelayan sasaran.
-
Pintasan Geolokasi: Pelayan proksi boleh membolehkan pengguna mengakses kandungan terhad wilayah dengan menghalakan permintaan mereka melalui pelayan yang terletak di kawasan yang berbeza.
-
Keselamatan dan Penapisan: Pelayan proksi boleh menapis dan menyekat kandungan HTML yang berniat jahat atau tidak sesuai, memberikan lapisan keselamatan tambahan untuk pengguna.
Pautan berkaitan
Untuk mendapatkan maklumat lanjut tentang Hypertext Markup Language (HTML), anda boleh melawati sumber berikut:
- Rangkaian Pembangun Mozilla (MDN) – Asas HTML
- W3Schools – Tutorial HTML
- HTML5 Rocks – Sumber untuk mempelajari HTML5
- WHATWG – Standard Hidup HTML
Memandangkan HTML kekal sebagai asas pembangunan web, memahami selok-belok dan amalan terbaiknya adalah penting untuk membina pengalaman web yang menarik dan boleh diakses.
