Pemrograman Web:HTML 2: Difference between revisions

 
(12 intermediate revisions by the same user not shown)
Line 131: Line 131:


Contoh dokumen:
Contoh dokumen:
<code><html>
<head>
<title>Mencoba membuat daftar dengan order list</title>
</head>
<body>
    <ol>
        Ini adalah warna-warni pada pelangi:
        <hr>
        <li>Merah</li>
        <li>Jingga</li>
        <li>Kuning</li>
        <li>Hijau</li>
        <li>Biru</li>
        <li>Nila</li>
        <li>Ungu</li>
    </ol>
</body>
</html></code>
Membuat Daftar dalam Daftar (Nested Ordered List):<syntaxhighlight lang="html" line="1">
<html>
<head>
<title>Mencoba membuat daftar dengan order list</title>
</head>
<body>
    <h2>Planet dalam tata surya</h2>
    <hr>
        <ol>
            <li>Merkurius</li>
                <ol>
                    <li>57.9 juta kilometer dari matahari</li>
                    <li>tidak punya satelit</li>
                </ol>
            <li>Venus</li>
                <ol>
                    <li>108 juta kilometer dari matahari</li>
                    <li>tidak punya satelit</li>
                </ol>
            <li>Bumi</li>
                <ol>
                    <li>149.6 juta kilometer dari matahari</li>
                    <li>satu satelit = Bulan</li>
                </ol>
            <li>Mars</li>
                <ol>
                    <li>227.9 Juta kilometer dari matahari</li>
                    <li>Dua satelit</li>
                        <ol>
                            <li>Phobos</li>
                            <li>Deimos</li>
                        </ol>
                </ol>
        </ol>
</body>
</html>
</syntaxhighlight>
=== Atribut pada <code><nowiki><OL></nowiki></code> ===
{| class="wikitable"
|+
!ATRIBUT
!FUNGSI
|-
|TYPE=A
|Membuat daftar berurut dengan huruf besar (A, B, C…)
|-
|TYPE=a
|Membuat daftar berurut dengan huruf kecil (a, b, c…)
|-
|TYPE=I
|Membuat daftar berurut dengan huruf romawi besar (I,II,III,IV)
|-
|TYPE=i
|Membuat daftar berurut dengan huruf kecil (i,ii,iii,iv,…)
|-
|TYPE=1
|Membuat daftar berurut dengan huruf kecil (1,2,3,…)
|-
|START=n
|Menentukan nilai awal dari item dalam daftar, n=nilai awal
|}
==== Contoh ====
<syntaxhighlight lang="html" line="1" start="9">
            <li>Merkurius</li>
                <ol type="A">
                    <li>57.9 juta kilometer dari matahari</li>
                    <li>tidak punya satelit</li>
                </ol>
</syntaxhighlight>
== 2. Uuordered List <code><nowiki><ol></nowiki></code> ==
* Ordered List atau Bulleted List adalah suatu daftar dimana urutan item-item tidak diutamakan. Item-tem ditampilkan dalam semabarng urutan.
* Setiap item dalam Unordered list biasanya ditandai dengan bulatan, kotak atau lingkaran.
* Ordered List dimulai dengan tag awal <nowiki><OL> dan diakhiri dengan tag akhir </nowiki><code><nowiki></OL></nowiki></code>
* Diantara kedua tag tersebut terdapat tag <nowiki><LI> yang menyatakan list item.</nowiki>
<syntaxhighlight lang="html" line="1">
<html>
<head>
<title>Mencoba membuat daftar dengan unordered list</title>
</head>
<body>
    <h2>Planet dalam tata surya</h2>
    <hr>
        <ul>
            <li>Merkurius</li>
                <ul>
                    <li>57.9 juta kilometer dari matahari</li>
                    <li>tidak punya satelit</li>
                </ul>
            <li>Venus</li>
                <ul>
                    <li>108 juta kilometer dari matahari</li>
                    <li>tidak punya satelit</li>
                </ul>
            <li>Bumi</li>
                <ul>
                    <li>149.6 juta kilometer dari matahari</li>
                    <li>satu satelit = Bulan</li>
                </ul>
            <li>Mars</li>
                <ul>
                    <li>227.9 Juta kilometer dari matahari</li>
                    <li>Dua satelit</li>
                        <ul>
                            <li>Phobos</li>
                            <li>Deimos</li>
                        </ul>
                </ul>
        </ul>
</body>
</html>
</syntaxhighlight>
=== Atribut pada <code><nowiki><ul></nowiki></code> ===
{| class="wikitable"
|+
!ATRIBUT
!FUNGSI
|-
|TYPE=circle
|Membuat tanda lingkaran ○
|-
|TYPE=square
|Membuat tanda kotak □
|-
|TYPE=disc
|Membuat tanda cakram ●
|}
<syntaxhighlight lang="html" line="1">
<html>
<head>
<title>Mencoba membuat daftar dengan unordered list</title>
</head>
<body>
    <h2>Planet dalam tata surya</h2>
    <hr>
        <ul>
            <li>Merkurius</li>
                <ul type="circle">
                    <li>57.9 juta kilometer dari matahari</li>
                    <li>tidak punya satelit</li>
                </ul>
            <li>Venus</li>
                <ul type="square">
                    <li>108 juta kilometer dari matahari</li>
                    <li>tidak punya satelit</li>
                </ul>
            <li>Bumi</li>
                <ul type="disc">
                    <li>149.6 juta kilometer dari matahari</li>
                    <li>satu satelit = Bulan</li>
                </ul>
        </ul>
</body>
</html>
</syntaxhighlight>
== 3. Definition List ==
* Definition List adalah suatu jenis daftar khusus yang berbeda jauh dengan daftar-daftar sebelumnya.
* Definition List digunakan untuk mendefinisikan atau menjelaskan istilah-istilah yang disebut Glosarry List (Daftar Istilah)
* Definition List dinyatakan dengan tag awal <code><nowiki><dl></nowiki></code> dan tag akhir <code><nowiki></dl></nowiki></code>. Dalam tag tersebut ada dua bagian yaitu:
** Istilah yang akan didefinisikan, dinyatakan dengan tag tunggal <code><nowiki><dt></nowiki></code> atau Definition Term
** Definisi dari istilah tersebut dinyatakan dengan tag tunggal <code><nowiki><dd></nowiki></code> atau Definition Data
* Browser akan menampilkan istilah yang didefinisikan pada baris tersendiri, Kemudian definisinya ditampilkan pada baris berikutnya dengan suatu indentasi.
<syntaxhighlight lang="html" line="1">
<html>
<head>
<title>Mencoba DEFINITION LIST</title>
</head>
<body>
    <h2>Planet dalam sistem Tata Surya</h2>
    <hr>
   
    <dl>
        <dt>Merkurius</dt>
        <dd>Planet paling kecil dan paling dengan matahari, berevolusi dengan matahari selama 88,8 hari.
            Jarak dari matahari adalah 58,3 juta kilometer (36,2 juta mil) dan mempunyai ukuran radius
            kira-kira 2,414 kilometer (1,500 mil)</dd>
        <dt>Venus</dt>
        <dd>Planet kedua dari matahari, mempunyai ukuran radius 6,052 kilometer (3,760 juta mil), berat
            0,815 dari bumi, berevolusi dengan matahari selama 224,7 hari, dan berjarak kira-kira
            100,1 kilometer (62,2 juta mil)</dd>
        <dt>Bumi</dt>
        <dd>Bumi ketiga dari matahari, berevolusi dengan matahari selama 365.26 hari, berjarak 149 juta
            kilometer, berputar pada prosnya selama 23 jam 56,07 menit, mempunyai radius 6,374 kilometer
            dan mempunyai berat kira-kira 29,11 x 10^24 kilogram.</dd>
    </dl>
</body>
</html>
</syntaxhighlight>
[[Category:Materi]]
[[Category:Matkul]]
[[Category:Pemrograman Web]]