Pengenalan kepada HTML

Apabila anda melihat pada satu laman web pada sebuah pelayar web, anda dapat lihat pada tahap paling rendah adalah perkataan. Perkataan-perkataan ini kebiasaannya mempunyai gaya, seperti saiz dan warna yang berbeza. Dalam kebanyakan kes, sesebuah laman itu menunjukkan gambar atau video. Dalam sesetengah laman, akan ada borang yang anda boleh isi  (atau cari) untuk maklumat, atau ubah untuk ditayangkan pada laman anda. Sering kali sesebuah laman mempunyai kandungan beranimasi dan kandungan yang berubah sementara kandungan yang lain masih lagi kekal serta tidak berubah-ubah.

Beberapa teknologi (seperti CSS, JavaScript, Flash, AJAX, JSON) boleh digunakan untuk mendefiniskan elemen-elemen sesebuah laman web. Walaubagaimanapun, pada tahap paling rendah, sesebuah laman web didefinisikan dengan menggunakan HTML (HyperText Markup Language). Tanpa HTML, tidak akan ada laman web.

Artikel ini menyediakan sebuah pengenaln kepada HTML. Sekiranya anda pernah tertanya-tanya apakah yang berlaku di belakang tabir sesebuah laman web, artikel inilah tempat untuk anda mula ketahui dan pelajarinya.

*Artikel ini masih di dalam proses penafsiran. Harap maaf di atas segala kesulitan.

Sejarah ringkas HTML

Pada akhir 1980-an, seorang ahli fizik bernama Tim Berners-Lee sedang bekerja di CERN (European Organization for Nuclear Research). Beliau menjumpai cara bagi saintis untuk berkongsi dokumen melalui internet. Dengan cara ini, komunikasi melalui internet masih lagi terhad kepada pengunaan teks, menggunakan teknologi seperti email, FTP (File Transfer Protocol), dan papan perbincangan berasaskan Usenet. Kewujudan HTML menggunakan sebuah model isi kandungan yang disimpan di sebuah server utama yang boleh dipindahkan dan dipamerkan pada sebuah stesen kerja tempatan melalui sebuah pelayar. Ini memudahkan capaian kepada isi kandungan dan membolehkan pameran kandungan yang kaya atau padat (seperti format teks dan pameran gambar).

Apakah itu HTML?

HTML adalah sebuah markup language. Ia memberitahu pelayar web bagaimana untuk mempamerkan kandungan laman web. HTML memisahkan "kandungan" (perkataan, gambar, audio, video dan sebagainya) daripada "persembahan" (definis bagi jenis kandungan dan arahan bagaimana kandungan tersebut dipamerkan). HTML menggunakan elemen yang telah didefinisikan terlebih dahulu untuk mengenalpasti jenis kandungan. Elemen mempunyai satu atau lebih "tag" yang mengandungi atau mengekspresi kandungan. Tag dikelilingi oleh breket bersudut, dan tag "penutupan" (yang menyatakan pengakhiran sesebuah kandungan) ditetapkan terlebih dahulu dengan slash hadapan.

Sebagai contoh, elemen perenggan mengandungi tag pembukaan "<p>" dan tag penutupan "</p>". Contoh yang tertera menunjukkan sebuah perenggan yang terkandung di dalam elemen perenggan HTML:

<p>My dog ate all the guacamole.</p>

Apabila kandungan ini dipamerkan di dalam sebuah pelayar web, kandungan tersebut akan kelihatan seperti ini:

Pelayar tersebut menggunakan tag sebagai petanda bagaimana kandungan tersebut sepatutnya dipamerkan.

Elemen-elemen yang mengandungi kandungan kebiasaannya akan mengandungi elemen lain juga. Sebagai contoh, elemen penekanan ("<em>") boleh dimasukkan ke dalam elemen perenggan:

<p>My dog ate <em>all</em> the guacamole.</p>

Apabila dipamerkan, akan kelihatan seperti:

Beberapa elemen tidak mempunyai elemen lain di dalamnya. Sebagai contoh, tag gambar ("<img>") hanya menyatakan nama fail kandungan tersebut (gambar) sebagai sifat:

<img src="smileyface.jpg">

Sering kali slash hadapan diletakkan sebelum braket bersudut akhir untuk menyatakan pengakhiran tag tersebut. Ini adalah pilihan yang boleh dilakukan di dalam HTML tetapi diperlukan di dalam XHTML (sebuah skema XML yang mengimplementasikan elemen-elemen HTML).

Seterusnya, artikel ini akan menjelaskan dengan lebih mendalam mengenai konsep yang diperkenalkan di dalam seksyen ini. Walaubagaimanapun, sekiranya anda mahu melihat cara HTML berfungsi, kunjungilah Mozilla Thimble, sebuah editor interaktif online yang mengajar anda cara untuk menulis HTML. Serta, lihatlah Elemen-elemen HTML untuk senarai elemen-elemen yang boleh digunakan dan cara kegunaannya.

Elemen — asas pembangunan

HTML diperbuat daripada elemen-elemen. Elemen-elemen ini mendefinisikan maksud semantik kandungan. Elemen-elemen merangkumi segala di antara dua elemen yang bersamaan tag, termasuklah tag itu sendiri. Sebagai contoh, elemen "<p>" menunjukkan sebuah perenggan; elemen "<img>" menunjukkan sebuah gambar. Lihatlah laman Elemen-elemen HTML untuk senarai yang lengkap.

Beberapa elemen mempunyai maksud yang terperinci seperti, "ini adalah sebuah gambar", "ini adalah header" or "ini adalah ordered list ". Otheres adalah kurang spesifik, seperti "ini adalah sebuah seksyen pada laman ini" atau "ini adalah sebahagian daripada teks". Sebahagian yang lain digunakan untuk teknikal, seperti "ini adalah untuk mengenalpasti informasi bagi sebuah laman yang tidak sepatutnya dipamerkan". Walaubagaimanapun, setiap elemen HTML mempunyai nilai semantik.

Most elements may contain other elements, forming a hierarchic structure. A very simple but complete web page looks like this:

<html>
  <body>

    <p>My dog ate all the guacamole.</p>

  </body>
</html>

As you can see, <html> elements surround the rest of the document, and <body> elements surround the page content. This structure is often throught of as a tree with branches (in this case, the <body> and <p> elements) growing from the trunk (<html>). This hierarchical structure is called the DOM: the Document Object Model.

Tag

HTML documents are written in plain text. They can be written in any text editor that allows content to be saved as plain text (although most HTML authors prefer to use a specialized editor that highlights syntax and shows the DOM). Tag names may be written in either upper or lower case. However, the W3C (the global consortium that maintains the HTML standard) recommends using lower case (and XHTML requires lower case).

HTML attaches special meaning to anything that starts with the less-than sign ("<") and ends with the greater-than sign (">"). Such markup is called a tag. Here is a simple example:

<p>This is text within a paragraph.</p>

In this example there is a start tag and a closing tag. Closing tags are the same as the start tag but also contain a forward slash immediately after the leading less-than sign. Most elements in HTML are written using both start and closing tags. Start and closing tags should be properly nested, that is closing tags should be written in the opposite order of the start tags. Proper nesting is one rule that must be obeyed in order to write valid code.

This is an an example of valid code:

<em>I <strong>really</strong> mean that</em>.

This is an example of invalid code:

Invalid: <em>I <strong>really</em> mean that</strong>.

Note that in the valid example, the closing tag for the nested element is placed before the closing tag for the element in which it is nested.

Some elements do not contain any text content or any other elements. These are empty elements and need no closing tag. This is an example:

<img src="smileyface.jpg">

Many people mark up empty elements using a trailing forward slash (which is mandatory in XHTML).

<img src="smileyface.jpg" />

In HTML this slash has no technical functionality and using it is a pure stylistic choice.

Sifat

The start tag may contain additional information, as in the preceding example. Such information is called an attribute. Attributes usually consist of 2 parts:

• An attribute name.
• An attribute value.

A few attributes can only have one value. They are Boolean attributes and may be shortened by only specifying the attribute name or leaving the attribute value empty. Thus, the following 3 examples have the same meaning:

<input required="required">

<input required="">

<input required>

Attribute values that consist of a single word or number may be written as they are, but as soon as there are two or more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye and to avoid mistakes. The following is such a mistake:

<p class=foo bar> (Beware, this probably does not mean what you think it means.)

In this example the value was supposed to be "foo bar" but since there were no quotes the code is interpreted as if it had been written like this:

<p class="foo" bar="">

Rujukan nama watak

Named character references (often casually called entities) are used to print characters that have a special meaning in HTML. For example, HTML interprets the less-than and greater-than symbols as tag delimiters. When you want to display a greater-than symbol in the text, you can use a named character reference. There are four common named character references one must know:

• > denotes the greater than sign (>)
• < denotes the less than sign (<)
• & denotes the ampersand (&)
• " denotes double quote (")

There are many more entities, but these four are the most important because they represent characters that have a special meaning in HTML.

Doctype dan comments

In addition to tags, text content and entities, an HTML document must contain a doctype declaration as the first line. In modern HTML this is written like this:

<!DOCTYPE html>

The doctype has a long and intricate history, but for now all you need to know is that this doctype tells the browser to interpret the HTML and CSS code according to W3C standards and not try to pretend that it is Internet Explorer from the 90's. (See quirks mode.)

HTML has a mechanism for embedding comments that are not displayed when the page is rendered in a browser. This is useful for explaining a section of markup, or leaving notes for other people who might work on the page, or for leaving reminders for yourself. HTML comments are enclosed in symbols as follows:

<!-- This is comment text -->

Dokumen yang ringkas tetapi padat

Putting this together here is a tiny example of an HTML-document. You can copy this code to a text editor, save it as myfirstdoc.html and load it in a browser. Make sure you are saving it using the character encoding UTF-8. Since this document uses no styling it will look very plain, but it is only a small start.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>A tiny document</title>
</head>
<body>
  <h1>Main heading in my document</h1>
  <!-- Note that it is "h" + "1", not "h" + the letter "one" -->
  <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
</body>
</html>