WebServant-2000 - Tutorial 004

Tutorial | Elemen Format Teks

Selain untuk mengatur format blok-blok paragraf, HTML juga dapat digunakan untuk mengatur format teks kata demi kata, atau bahkan huruf demi huruf dengan elemen format teks. Terdapat dua cara untuk memformat teks yaitu secara fungsional dan secara fisikal.

Format Fungsional

Pemformatan fungsional dilakukan berdasarkan fungsi atau kegunaan teks yang diformat. Penampilan teks tersebut bisa beragam, tergantung standar yang sedang berlaku. HTML menyediakan 7 elemen pemformatan fungsional, yaitu: EM, CITE, VAR, CODE, KBD, SAMP, dan STRONG.


<HTML>

    <HEAD>

        <TITLE>Format Fungsional</TITLE>

    </HEAD>

    <BODY>

        <P>

            &lt;EM&gt; untuk <EM>penekanan (emphasized)</EM><BR>

            &lt;CITE&gt; untuk <CITE>kutipan (citation)</CITE><BR>

            &lt;VAR&gt; untuk <VAR>variabel</VAR><BR>

            &lt;CODE&gt; untuk <CODE>kode program</CODE><BR>

            &lt;KBD&gt; untuk <KBD>pengetikan keyboard</KBD><BR>

            &lt;SAMP&gt; untuk <SAMP>contoh (sample)</SAMP><BR>

            &lt;STRONG&gt; untuk <STRONG>penguatan</STRONG>

        </P>

    </BODY>

</HTML>

Dari contoh di atas dapat diamati bahwa elemen EM, CITE, dan VAR ditampilkan dengan huruf miring (italic); elemen CODE dan KBD ditampilkan dengan huruf tegak (monospace); dan elemen STRONG ditampilkan dengan huruf tebal. Jadi jelas bahwa penampilan yang berbeda menunjukkan fungsi yang berbeda, namun elemen-elemen tersebut sebaiknya tidak digunakan untuk mengubah penampilan teks karena untuk kegunaan tersebut ada elemen-elemen tersendiri di bawah ini.

Format Fisikal

Pemformatan fisikal berarti memformat teks berdasarkan penampilan fisik yang diharapkan, seperti huruf tebal, miring, dan sebagainya. Terdapat 10 elemen format fisikal, yaitu: B, I, U, S, TT, BIG, SMALL, SUB, SUP, dan BLINK.


<HTML>

    <HEAD>

        <TITLE>Format Fisikal</TITLE>

    </HEAD>

    <BODY>

        <P>

            &lt;B&gt; untuk <B> huruf tebal (bold)</B><BR>

            &lt;I&gt; untuk <I> huruf miring (italic)</I><BR>

            &lt;U&gt; untuk <U> garis bawah (underlined)</U><BR>

            &lt;S&gt; untuk <S> huruf dicoret (striked)</S><BR>

            &lt;TT&gt; untuk <TT> huruf cetak (teletype)</TT><BR>

            &lt;BIG&gt; untuk <BIG> huruf diperbesar</BIG><BR>

            &lt;SMALL&gt; untuk <SMALL> huruf diperkecil</SMALL><BR>

            &lt;SUB&gt; untuk <SUB> teks subscript</SUB><BR>

            &lt;SUP&gt; untuk <SUP> teks superscript</SUP><BR>

            &lt;BLINK&gt; untuk <BLINK> teks berkedip</BLINK>

        </P>

    </BODY>

</HTML>

Tanpa perlu dijelaskan lagi - kecuali elemen BLINK yang memerlukan penjelasan khusus -, dengan melihat contoh di atas kita dapat mengetahui fungsi masing-masing elemen. Elemen BLINK adalah sebuah Netscape Extension sehingga teks di dalamnya hanya akan berkedip jika dilihat dengan browser Netscape.

FONT dan BASEFONT

Sebenarnya masih ada cara ketiga yang tidak standar untuk memformat teks, yaitu dengan elemen FONT dan BASEFONT. Elemen FONT mempunyai atribut FACE, COLOR, dan SIZE. Atribut FACE untuk menentukan jenis huruf yang digunakan, atribut COLOR untuk menentukan warna teks, dan atribut SIZE untuk menentukan ukuran teks. Contoh penggunaan elemen FONT dapat dilihat di bawah ini:


<HTML>

    <HEAD>

        <TITLE>Font</TITLE>

    </HEAD>

    <BODY>

        <P>

            Face: <FONT FACE="courier">Courier</FONT><BR>

            Face: <FONT FACE="arial">Arial</FONT><BR>

            Face: <FONT FACE="times">Times</FONT><BR>

            Color: <FONT COLOR="red">red</FONT><BR>

            Color: <FONT COLOR="green">green</FONT><BR>

            Color: <FONT COLOR="blue">blue</FONT><BR>

            Size: <FONT SIZE="1">paling kecil</FONT><BR>

            Size: <FONT SIZE="2">kecil</FONT><BR>

            Size: <FONT SIZE="3">agak kecil</FONT><BR>

            Size: <FONT SIZE="4">sedang</FONT><BR>

            Size: <FONT SIZE="5">agak besar</FONT><BR>

            Size: <FONT SIZE="6">besar</FONT><BR>

            Size: <FONT SIZE="7">paling besar</FONT>

        </P>

    </BODY>

</HTML>

Untuk menetapkan ukuran default font sebuah dokumen HTML digunakan elemen BASEFONT yang dapat menerima atribut FACE, COLOR, dan SIZE, seperti elemen FONT. Namun tidak seperti elemen FONT, elemen BASEFONT diletakkan di dalam elemen HEAD. Setelah selesai bereksperimen dengan berbagai jenis font, silakan melanjutkan ke bagian selanjutnya, List dan Bullet.