Kamis, 26 April 2012

DASAR-DASAR HTML LANJUTAN 1..

1. Format Teks

 HTML menyediakan beragam elemen yang dapat dimanfaatkan untuk pemformatan teks.
Ø  Heading
Heading merupakan salah satu elemen penting di dalam dokumen HTML. Heading didefinisikan menggunakan tag <hn> dan diakhiri dengan </hn>, di mana n menyatakan tipe dengan nilai 1-6.

Untuk mengetahui bentuk semua jenis heading, buat kode HTML seperti di bawah ini. Perhatikan, kode HTML ini sengaja diringkas guna memudahkan penulisan. Jadi, dalam implementasinya harus mendeklarasikan semua elemen-elemen dasar.

<body>

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

</body>
 
Gambar 1. Tampilan heading 1-6

Elemen heading menyediakan atribut align yang dapat digunakan untuk mengatur posisi teks.

<body>
<h1 align="right">Heading 1</h1>
<h2 align="left">Heading 2</h2>
<h3 align="center">Heading 3</h3>
</body>

 
Gambar 2. Mengatur posisi heading
Ø  Paragraf

Sebagaimana teks pada umumnya, dokumen HTML dapat terdiri darikumpulan paragraf. Dalam konteks HTML, paragraf direpresentasikan melalui tag <p>. Tag <p> sebenarnya merupakan tag pasangan, meski dalam implementasinya kerap kali diabaikan.

<body>

<p>
Ini paragraf pertama

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<p>
Ini paragraf ketiga

</body>


Gambar 3. Menggunakan paragraf


Sebagaimana heading, kita juga bisa mengatur posisi paragraf dengan memanfaatkan atribut align. Sebagai contoh, dokumen berikut akan menghasilkan paragraf rata tengah, kiri kanan, dan kanan.

<!DOCTYPE html

            PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml
transitional.dtd">
<html xmlns=http://www.w3.org/1999/xhtml xml:lang="en"
lang="en">
<head>
            <title>Demo Paragraf</title>
</head>

<body>

            <p align="center">
            Ini paragraf rata tengah

            <p align="justify">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.

            <p align="right">
            Ini paragraf rata kanan

</body>

</html>
 
Gambar 4. Mengatur posisi paragraf
 

Tidak ada komentar:

Posting Komentar