Bahasa Penanda Hiperteks (HTML)/Memformat Teks

Unsur-unsur pemformatan teks memberikan struktur logikal pada dokumen HTML anda. Struktur ini lazimnya dipaparkan pada pengguna dengan mengubah penampilan teks.

Kita sudah melihat dalam bab Pengenalan buku ini cara bagi kita menekankan teks dengan mengguna tag <em></em>. Pelayar-pelayar grafikal lazimnya memaparkan teks yang ditekankan dalam huruf condong. Beberapa [pautan ke Wikipedia] pembaca skrin, perisian utiliti yang membacakan kandungan laman pada pengguna, mungkin menyuarakan perktaan-perkataan yang ditekankan dengan infleksi berbeza.

Satu kesilapan yang sering dibuat ialah mengelirukan penampilan pada pelayar anda dengan maksud sesuatu unsur. Inilah sebabnya anda perlu mengguna lebih daripada satu pelayar bagi menguji laman anda. Cara yang paling baik ialah menguji laman dengan menggunakan pelayar grafikal, pelayar teks, dan pembaca skrin.

Anda dapat menukar paparan lalai buat apa jua unsur dengan mengguna Lembaran Gaya Lata (CSS). Misalnya, jika anda mahu menjadikan semua teks yang ditekankan kelihatan merah, anda boleh menggunakan perturan CSS seperti berikut:

 em { font-style:normal; color:red; }

Dalam bahagian ini kita akan melihat cara-cara bagaimana anda dapat menandakan struktur logikal dokumen HTML anda.

Penekanan

HTML memiliki unsur bagi dua darjah penekanan:

• Unsur em buat teks yang ditekankan, lazimnya dipaparkan dalam teks sendeng atau condong.
• Unsur strong buat teks yang ditekankan dengan kuat, lazimnya dipaparkan dengan teks tebal.

Contoh teks yang ditekankan:

Amat penting yang anda bukan sahaja meneka, akan tetapi <em>melihat</em> keputusan ujian.

Contoh penampilan:

Amat penting yang anda bukan sahaja meneka, akan tetapi melihat keputusan ujian.

Contoh teks yang amat ditekankan:

Mari kita tumpukan pada  <strong>penanda struktur</strong>.

Contoh paparan:

Mari kita tumpukan pada penanda struktur.

Teks Praformat

Teks praformat ditampilkan dengan mengguna fon fixed-width (lebar tetap), dan tanpa mengecilkan ruang-ruang berganda menjadi satu ruang, yang menghasilkan ruang terpelihara. Baris baharu dipaparkan sebagai baris baharu. Berlaianan dengan teks biasa, penanda HTML yang terdapat dalam teks praformat masih ditakrifkan oleh pelayar seperti biasa, bermakna "<em>a</em>" akan masih dipaparkan sebagai "a".

Untuk menjana teks praformat, mulakannya dengan <pre> dan akhiri dengan </pre>.

Contoh:

<pre>
,-----------------------,
| No. | Orang           |
|-----------------------|
| 1.  | Mat Sabun       |
| 2.  | Karen Muniandy  |
'-----------------------'
</pre>

Paparan hasilan:

,-----------------------,
| No. | Orang           |
|-----------------------|
| 1.  | Mat Sabun       |
| 2.  | Karen Muniandy  |
'-----------------------'

Membuang tag-tag praformat akan menyebabkan teks yang sama dipaparkan dalam satu baris.

,-----------------------, | No. | Orang | |-----------------------| | 1. | Mat Sabun | | 2. | Karen Muniandy | '-----------------------'

Aksara Khas

Lihat juga Templat:Simbol bahasa meta:Help:Special characters.

Sebuah rujukan aksara perlu bagi menyisipkan aksara yang tak piawai atau aksara yang memiliki maksud khas ke dalam HTML. Sebagai contoh, untuk memasukkan ampersan, "&", perlu ditapikan "&amp;". Aksara juga boleh dimasukkan dengan menggunakan kod nombor ASCII atau UNICODE masing-masing.

Kod Nama	Kod Nombor	Glif	Pemerian
"	"	"	double quotation mark
&	&	&	ampersand
⁄	/	/	slash
&lt;	&#60;	<	less-than sign
&gt;	&#62;	>	greater-than sign
&ndash;	&#150;	&#150;	en dash
&mdash;	&#151;	&#151;	em dash
&nbsp;	&#160;		nonbreaking space (invisible)
&iexcl;	&#161;	¡	inverted exclamation
&cent;	&#162;	¢	cent sign
&pound;	&#163;	£	pound sterling
&curren;	&#164;	¤	general currency sign
&yen;	&#165;	¥	yen sign
&brvbar; or &brkbar;	&#166;	¦	broken vertical bar
&sect;	&#167;	§	section sign
&uml; or &die;	&#168;	¨	umlaut
&copy;	&#169;	©	copyright
&ordf;	&#170;	ª	feminine ordinal
&laquo;	&#171;	«	left angle quote
&not;	&#172;	¬	not sign
&shy;	&#173;	­	soft hyphen
&reg;	&#174;	®	registered trademark
&macr; or &hibar;	&#175;	¯	macron accent
&deg;	&#176;	°	degree sign
&plusmn;	&#177;	±	plus or minus
&sup2;	&#178;	²	superscript two
&sup3;	&#179;	³	superscript three
&acute;	&#180;	´	acute accent
&micro;	&#181;	µ	micro sign
&para;	&#182;	¶	paragraph sign
&middot;	&#183;	·	middle dot
&cedil;	&#184;	¸	cedilla
&sup1;	&#185;	¹	superscript one
&ordm;	&#186;	º	masculine ordinal
&raquo;	&#187;	»	right angle quote
&frac14;	&#188;	¼	one-fourth
&frac12;	&#189;	½	one-half
&frac34;	&#190;	¾	three-fourths
&iquest;	&#191;	¿	inverted question mark
&lsquo;		‘	left single quote
&rsquo;		’	right single quote
&sbquo;		‚	single low-9 quote
&ldquo;		“	left double quote
&rdquo;		”	right double quote
&bdquo;		„	double low-9 quote
&dagger;		†	dagger
&Dagger;		‡	double dagger
&permil;		‰	per mill sign
&lsaquo;		‹	single left-pointing angle quote
&rsaquo;		›	single right-pointing angle quote
&spades;		♠	black spade suit
&clubs;		♣	black club suit
&hearts;		♥	black heart suit
&diams;		♦	black diamond suit
&oline;		‾	overline, = spacing overscore
&larr;		←	leftward arrow
&uarr;		↑	upward arrow
&rarr;		→	rightward arrow
&darr;		↓	downward arrow
&trade;		™	trademark sign
&times;	&#215;	×	multiplication sign
&divide;	&#247;	÷	division sign

Kod Nama	Kod Nombor	Glif	Pemerian
À	À	À	uppercase A, grave accent
Á	Á	Á	uppercase A, acute accent
Â	Â	Â	uppercase A, circumflex accent
Ã	Ã	Ã	uppercase A, tilde
Ä	Ä	Ä	uppercase A, umlaut
Å	Å	Å	uppercase A, ring
Æ	Æ	Æ	uppercase AE
Ç	Ç	Ç	uppercase C, cedilla
È	È	È	uppercase E, grave accent
É	É	É	uppercase E, acute accent
Ê	Ê	Ê	uppercase E, circumflex accent
Ë	Ë	Ë	uppercase E, umlaut
Ì	Ì	Ì	uppercase I, grave accent
Í	Í	Í	uppercase I, acute accent
Î	Î	Î	uppercase I, circumflex accent
Ï	Ï	Ï	uppercase I, umlaut
Ð	Ð	Ð	uppercase Eth, Icelandic
Ñ	Ñ	Ñ	uppercase N, tilde
Ò	Ò	Ò	uppercase O, grave accent
Ó	Ó	Ó	uppercase O, acute accent
Ô	Ô	Ô	uppercase O, circumflex accent
Õ	Õ	Õ	uppercase O, tilde
Ö	Ö	Ö	uppercase O, umlaut
Ø	Ø	Ø	uppercase O, slash
Ù	Ù	Ù	uppercase U, grave accent
Ú	Ú	Ú	uppercase U, acute accent
Û	Û	Û	uppercase U, circumflex accent
Ü	Ü	Ü	uppercase U, umlaut
Ý	Ý	Ý	uppercase Y, acute accent
Þ	Þ	Þ	uppercase THORN, Icelandic
ß	ß	ß	lowercase sharps, German
à	à	à	lowercase a, grave accent
á	á	á	lowercase a, acute accent
â	â	â	lowercase a, circumflex accent
ã	ã	ã	lowercase a, tilde
ä	ä	ä	lowercase a, umlaut
å	å	å	lowercase a, ring
æ	æ	æ	lowercase ae
ç	ç	ç	lowercase c, cedilla
è	è	è	lowercase e, grave accent
é	é	é	lowercase e, acute accent
ê	ê	ê	lowercase e, circumflex accent
ë	ë	ë	lowercase e, umlaut
ì	ì	ì	lowercase i, grave accent
í	í	í	lowercase i, acute accent
î	î	î	lowercase i, circumflex accent
ï	ï	ï	lowercase i, umlaut
ð	ð	ð	lowercase eth, Icelandic
ñ	ñ	ñ	lowercase n, tilde
ò	ò	ò	lowercase o, grave accent
ó	ó	ó	lowercase o, acute accent
ô	ô	ô	lowercase o, circumflex accent
õ	õ	õ	lowercase o, tilde
ö	ö	ö	lowercase o, umlaut
ø	ø	ø	lowercase o, slash
ù	ù	ù	lowercase u, grave accent
ú	ú	ú	lowercase u, acute accent
û	û	û	lowercase u, circumflex accent
ü	ü	ü	lowercase u, umlaut
ý	ý	ý	lowercase y, acute accent
þ	þ	þ	lowercase thorn, Icelandic
ÿ	ÿ	ÿ	lowercase y, umlaut

Singkatan

Satu lagi unsur berguna ialah abbr. Unsur ini digunakan bagi memberi takrif sesuatu singkatan, misalnya,

 <abbr title="Bahasa Penanda Hiperteks">HTML</abbr>

Pelayar-pelayar grafikal lazimnya menunjukkan singkatan dengan baris bawah bertitik. Tajuk dokumen, yakni title kelihatan sebagai "tooltip". Pembaca skrin mungkin membaca title atas permintaan pengguna.

Malangnya, Internet Explorer versi 6 ke bawah tidak mendokong abbr. Walau bagaimanapun, ia mendokong unsur berkaitan, acronym yang menyebabkan unsur ini digunakan bagi semua singkatan, dan tidak terhad pada akronim sahaja.

Akronim ialah satu singkatan khas huruf yang disebutkan dan justeru, menjadi satu "kata" baharu (contoh, radar - RAdio Detection And Ranging).

Pemformatan Yang Tidak Digalakkan

HTML mendokong beberapa unsur-unsur pemformatan yang kegunaannya tidak digalakkan dan harus diganti oleh CSS. Mari kita lihat pemformatan sedemikian agar anda maklum apa ia sebenarnya dan agar anda dapat membuat pembetulan dengan CSS jika menjumpai pemformatan sedemikian. Sesetengah daripada unsur ini hanya tidak digalakkan, sementara yang lainnya tidak digalakkan dan dikecam (deprecated). Pemformatan HTML lazimnya digunakan dengan pelayar-pelayar lama yang tidak mendokong CSS.

Unsur	Kesan	Contoh	Pilihan CSS	Nota
b	tebal	bold	font-weight: bold;
i	condong	italics	font-style: italics;
u	garis bawah	underlined	text-decoration: underline	dikecam
tt	muka mesin taip	typewriter face	font-family: monospace
s	garisan tengah	strikethrough	text-decoration: line-through	dikecam
strikethrough	garisan tengah	<strikethrough>strikethrough</strikethrough>	text-decoration: line-through	dikecam
big	fon besar	big	font-size: larger
small	fon kecil	small	font-size: smaller
font	saiz fon	size=1	font-size:(value)	dikecam
center	letak blok ditengah		<div align="center">	dikecam

Lembaran Gaya Lata (CSS)

Penggunaan unsur-unsur gaya seperti <b> bagi bold atau <i> bagi italic mudah, akan tetapi ia menggabungkan lapisan penampilan dengan lapisan kandungan. Dengan mengguna Lembaran Gaya Lata atau CSS, pengarang HTML dan memisahkan bahagian-bahagian yang berlainan ini kepada bahagian-bahagiannya tersendiri. Ini akan membolehkan sesuatu dokumen itu dipaparkan dengan pelbagai cara sementara dokumen iru sendiri tidak berubah. Justeru, sebagai misalan, jika seseorang pengarang itu mahu menukar petikan rujukan agar kelihatan tebal daripada condong, pengarang hanya perlu menukar lembaran gaya dan tidak perlu mengharungi setiap dokumen dan menukar setiap <b> ke <i> dan sebaliknya. CSS juga membolehkan si pembaca itu sendiri untuk membuat pilihan-pilihan ini dan mengatasi pilihan si pengarang.

Bersambung dengan contoh di atas, katakan pengarang telah menanda dokumen dengan betul dengan menggunakan petikan rujukan yang sahih (misalnya, tajuk buku) dengan menggunakan tag <cite>:

<cite>Masyarakat Melayu</cite> oleh Khoo Kay Kim

Kemudian jika pengarang mahu membuat semua petikan ditulis dengan muka tebal, pengaranga akan meletakkan peraturan CSS ini ke dalam lembaran gayanya:

 cite { font-weight: bold; }

dan ia akan kelihatan:

Masyarakat Melayu oleh Khoo Kay Kim

Kemudian, pengarang diberitahu bahawa semua rujukan perlu ditulis dalam muka condong. Sebelum adanya CSS, pengarang terpaksa mengelintar semua dokumen dan mengubah kod satu persatu, menukar <b> dan </b> ke <i> dan </i> (akan tetapi berhati-hati tidak menukar perkataan yang bukan rujukan akan tetapi yang sememangnya ditebalkan).

Dengan CSS, ia semudah menukar hanya satu baris dalam lembaran gaya kepada:

 cite { font-style: italic; }

Hasilan:

Masyarakat Melayu oleh Khoo Kay Kim

Lihat juga

• W:Unsur HTML
• Lembaran Gaya Lata (CSS)