WebServant-2000 - Tutorial 002

Tutorial | Heading dan Paragraf

Pada bagian sebelumnya sudah disinggung sedikit mengenai elemen H1 untuk menampilkan heading dan P untuk memisahkan paragraf. Di bagian ini kita akan menggali lebih dalam kedua elemen tersebut.

Heading

HTML menyediakan 6 level heading yang dapat digunakan untuk membuat judul. Heading level 1 biasanya digunakan untuk judul utama, dan heading level berikutnya untuk sub-judul dan sub-sub-judul selanjutnya. Perhatikan contoh berikut ini:


<HTML>

    <HEAD>

        <TITLE>Contoh Heading</TITLE>

    </HEAD>

    <BODY>

        <H1>Heading level 1</H1>

        <H2>Heading level 2</H2>

        <H3>Heading level 3</H3>

        <H4>Heading level 4</H4>

        <H5>Heading level 5</H5>

        <H6>Heading level 6</H6>

    </BODY>

</HTML>

Kode HTML di atas akan menghasilkan tampilan seperti ini.

Heading dapat digunakan dengan urutan bebas, artinya elemen H1 tidak harus mendahului H2, H3, dan seterusnya. Namun demikian sebaiknya elemen heading tetap dipakai sesuai urutannya untuk menghasilkan dokumen yang konsisten. Elemen heading sebaiknya juga tidak dipakai untuk memanipulasi ukuran atau ketebalan huruf; untuk kegunaan itu ada elemen-elemen tersendiri yang akan dijelaskan pada bagian selanjutnya nanti.

Paragraf dan Break


<HTML>

    <HEAD>

        <TITLE>Contoh Paragraf</TITLE>

    </HEAD>

    <BODY>

       <P>Ini adalah paragraf pertama. Sebuah paragraf

            diawali dengan tag paragraf pembuka dan

            diakhiri dengan tag paragraf penutup.</P>

        <P>Ini adalah paragraf kedua. Sebuah baris

            kosong akan secara otomatis disisipkan di

            antara dua paragraf.</P>

        <P>Ini adalah paragraf ketiga. Untuk berpindah

            baris tanpa menyisipkan sebuah baris kosong,

            digunakan elemen break.<BR>Kalimat ini adalah

            bagian dari paragraf ketiga yang terletak di

            baris yang baru.</P>

    </BODY>

</HTML>

Klik di sini untuk melihat tampilan yang dihasilkan oleh kode HTML di atas.

Tampak bahwa di antara dua paragraf akan selalu disisipkan sebuah baris kosong secara otomatis. Untuk berpindah ke baris yang baru tanpa harus menyisipkan baris kosong digunakan elemen BR (break). Tidak seperti elemen-elemen lain yang sudah kita kenal, elemen BR ini tidak berupa pasangan tag pembuka dan penutup, melainkan hanya satu tag tunggal <BR> saja.

Whitespace

Jika anda perhatikan lebih teliti, anda akan menemukan bahwa karakter spasi, tabulasi, maupun pergantian baris (ENTER) dalam dokumen HTML tidak memberikan pengaruh pada tampilan di jendela browser. Ini adalah kekhasan HTML. Semua karakter whitespace (spasi, tab, dan enter) yang berlebihan akan diabaikan dan diganti dengan hanya satu spasi saja.

Karakter Khusus

Beberapa karakter seperti tanda lebih kecil (<) dan lebih besar (>) digunakan secara khusus untuk menandai tag HTML. Untuk menampilkan karakter-karakter tersebut dalam halaman web digunakan entity, yaitu kode khusus berupa rangkaian karakter yang diletakkan di antara tanda ampersand (&) dan semicolon (;). Rangkaian karakter tersebut dapat berupa singkatan nama entity tersebut atau kode numerik yang diawali dengan tanda number sign (#). Misalnya:

karakter < diwakili dengan entity < atau <
karakter > diwakili dengan entity > atau >
karakter & diwakili dengan entity & atau &

Tanda & itu sendiri menjadi sebuah karakter khusus sehingga untuk menampilkannya juga perlu diganti dengan entity. Sebuah entity lagi yang penting adalah   atau   yang menampilkan karakter 'spasi' kosong. Karakter ini dapat digunakan untuk membuat spasi yang tidak akan dibuang oleh browser seperti halnya whitespace yang lain. Perhatikan contoh penggunaan karakter khusus beserta hasilnya berikut ini:


<HTML>

    <HEAD>

        <TITLE>Karakter Khusus</TITLE>

    </HEAD>

    <BODY>

        <P>100 + 200 &lt; 500</P>

        <P>100 &times; 200 &gt; 500</P>

        <P>Terpisah&nbsp; &nbsp; &nbsp;jauh</P>

        <P>&copy; Copyright</P>

        <P>&reg; Registered</P>

    </BODY>

</HTML>

Atribut Perataan

Setiap elemen HTML ditampilkan oleh browser dengan cara yang berbeda, tergantung fungsi elemen tersebut. Namun demikian penampilan masing-masing elemen masih dapat dimodifikasi lagi dengan memberikan parameter-parameter tertentu pada tag pembuka. Parameter ini disebut atribut, yang menerima nilai tertentu sebagai argumennya. Agar lebih jelas, kita akan mencoba menggunakan atribut ALIGN pada elemen heading dan paragraf yang mempunyai empat pilihan nilai, yaitu: left, center, right, dan justify.


<HTML>

    <HEAD>

        <TITLE>Atribut Perataan</TITLE>

    </HEAD>

    <BODY>

        <H1 ALIGN="left">Heading rata kiri</H1>

        <H1 ALIGN="center">Heading rata tengah</H1>

        <H1 ALIGN="right">Heading rata kanan</H1>

        <P ALIGN="left">Paragraf pertama diratakan dengan

            tepi kiri halaman. Sisi kanan dari paragraf ini

            akan bergerigi.</P>

        <P ALIGN="center">Paragraf kedua diratakan di

            tengah-tengah halaman. Kedua sisi paragraf ini

            akan bergerigi.</P>

        <P ALIGN="right">Paragraf ketiga diratakan dengan

            tepi kanan halaman. Sisi kiri dari pargraf ini

            akan bergerigi.</P>

        <P ALIGN="justify">Paragraf terakhir ini akan

            diratakan dengan tepi kiri dan kanan halaman.

            Untuk melihat efek perataan dengan lebih jelas,

            perkecil halaman browser sehingga sebagian dari

            paragraf ini berpindah ke baris berikutnya.</P>

    </BODY>

</HTML>

Tampilan contoh di atas dapat dilihat di sini. Kemudian silakan melanjutkan ke bagian berikutnya, tentang Elemen Fomat Blok.