Jump to content

Pemrograman Web:HTML 2: Difference between revisions

From Wiki
Kangtain (talk | contribs)
Bureaucrats, Interface administrators, Suppressors, Administrators
9,154 edits
VisualWikitext
Created page with "=== Atribut Elemen HEADING === {| class="wikitable" |+ !Atribut !Fungsi |- |ALIGN |Mengatur Perataan, dapat diset dengan nilai Left, Center atau RIGHT |} === Atribut Elemen BODY === {| class="wikitable" |+ !ATRIBUT !FUNGSI |- |TEXT |Mengatur warna teks dokumen |- |ALINK |Menyatakan warna link yang aktif |- |VLINK |Warna Link yang pernah dikunjungi |- |BACKGROUND |Menyatakan gambar sebagai latar belakang |- |BGCOLOR |Menyatakan warna sebagai latar belakang |- |BGPROPERT..."
 
 
(13 intermediate revisions by the same user not shown)
Line 90: Line 90:
|#FFFFFF
|#FFFFFF
|}
|}
=== Atribut Elemen GARIS (HR) ===
{| class="wikitable"
|+
!ATRIBUT
!FUNGSI
|-
|ALIGN
|Mengatur Perataan, dapat diset dengan nilai Left, Center atau RIGHT
|-
|WIDTH
|Mengatur panjang garis horisontal (pixel datau persen)
|-
|SIZE
|Mengatur ketebalan garis (pixel)
|-
|NOSHADE
|Menampilkan garis horisontal tanpa bayang-bayang 3D
|-
|COLOR
|Memberi warna pada garis
|}
== List/Daftar ==
=== Macam-macam LIST ===
* Ordered List/Numered List (Daftar berurutan/Daftar dengan Nomor)
* Unordered List?Bulleted List (Daftar tak berurut/Daftar dengan titik)
* Menu List (Daftar Menu)
* Directory List
* Definition List (Daftar Istilah)
== 1. Order list <code><nowiki><ol></nowiki></code> ==
* Ordered List atau Numbered List adalah suatu daftar dimana item-item yang ada dalam daftar memiliki nomor secara urut.
* 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>
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]]

Latest revision as of 06:06, 12 December 2025

Atribut Elemen HEADING

Atribut Fungsi
ALIGN Mengatur Perataan, dapat diset dengan nilai Left, Center

atau RIGHT

Atribut Elemen BODY

ATRIBUT FUNGSI
TEXT Mengatur warna teks dokumen
ALINK Menyatakan warna link yang aktif
VLINK Warna Link yang pernah dikunjungi
BACKGROUND Menyatakan gambar sebagai latar belakang
BGCOLOR Menyatakan warna sebagai latar belakang
BGPROPERTIES Jika diset FIXED. Membuat suatu watermark yaitu background tetap (tidak menggulung)
LEFTMARGIN Mengatur margin kiri dari suatu dokumen (pixel)
TOPMARGIN Mengatur margin atas dari dokumen (pixel)

Tabel Warna

Warna Hexadisemal
Green #008000
Olive #808000
Navy #000080
Purple #800080
Teal #008080
Gray #808080
Silver #C0C0C0
Red #FF0000
Lime #00FF00
Yellow #FFFF00
Blue #0000FF
Fuchsia #FF00FF
Aqua #00FFFF
White #FFFFFF

Atribut Elemen GARIS (HR)

ATRIBUT FUNGSI
ALIGN Mengatur Perataan, dapat diset dengan nilai Left, Center atau RIGHT
WIDTH Mengatur panjang garis horisontal (pixel datau persen)
SIZE Mengatur ketebalan garis (pixel)
NOSHADE Menampilkan garis horisontal tanpa bayang-bayang 3D
COLOR Memberi warna pada garis

List/Daftar

Macam-macam LIST

  • Ordered List/Numered List (Daftar berurutan/Daftar dengan Nomor)
  • Unordered List?Bulleted List (Daftar tak berurut/Daftar dengan titik)
  • Menu List (Daftar Menu)
  • Directory List
  • Definition List (Daftar Istilah)

1. Order list <ol>

  • Ordered List atau Numbered List adalah suatu daftar dimana item-item yang ada dalam daftar memiliki nomor secara urut.
  • Ordered List dimulai dengan tag awal <OL> dan diakhiri dengan tag akhir </OL>
  • Diantara kedua tag tersebut terdapat tag <LI> yang menyatakan list item.

Contoh dokumen: 

<html>
<head>
<title>Mencoba membuat daftar dengan order list</title>
</head>
<body>
    Ini adalah warna-warni pada pelangi:
  1. Merah
  2. Jingga
  3. Kuning
  4. Hijau
  5. Biru
  6. Nila
  7. Ungu
</body>
</html>

Membuat Daftar dalam Daftar (Nested Ordered List):

<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>

Atribut pada <OL>

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

            <li>Merkurius</li>
                <ol type="A">
                    <li>57.9 juta kilometer dari matahari</li>
                    <li>tidak punya satelit</li>
                </ol>

2. Uuordered List <ol>

  • 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 <OL> dan diakhiri dengan tag akhir </OL>
  • Diantara kedua tag tersebut terdapat tag <LI> yang menyatakan list item.
<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>

Atribut pada <ul>

ATRIBUT FUNGSI
TYPE=circle Membuat tanda lingkaran ○
TYPE=square Membuat tanda kotak □
TYPE=disc Membuat tanda cakram ● 
<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>

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 <dl> dan tag akhir </dl>. Dalam tag tersebut ada dua bagian yaitu:
    • Istilah yang akan didefinisikan, dinyatakan dengan tag tunggal <dt> atau Definition Term
    • Definisi dari istilah tersebut dinyatakan dengan tag tunggal <dd> atau Definition Data
  • Browser akan menampilkan istilah yang didefinisikan pada baris tersendiri, Kemudian definisinya ditampilkan pada baris berikutnya dengan suatu indentasi.
<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>
Retrieved from "https://kangtain.com/wiki/index.php?title=Pemrograman_Web:HTML_2&oldid=8958"