Latihan Dasar HTML Part 4
Yosh ... kembali lagi bersama saya ... dari judulnya kita bisa tahu , bahwa kita sekarang akan membahas tentang apa... Ya , benar sekali.. kita akan membahas HTML lagi... Kali ini tema yang saya angkat adalah "BULLET AND NUMBERING IN HTML" gimana ? keren kan bahasanya :v...
Oke tanpa membuang waktu dan tenaga lagi kita langsung aja mulai tutorialnya..
Sebelum kita mulai ada baiknya kita mengetahui bullet and numbering itu apa..
Bullet and numbering itu adalah suatu penandaan urutan suatu teks. contohnya:
- Ini adalah contoh Numbering
- Ini juga dong
- Yang Ini namanya Bullet
- Yang ini juga lah
Bullet dalam bahasa pemrograman disebut "Unordered List" (UL)
Numbering dalam bahasa pemrograman disebut "Ordered List" (OL)
tag Bullet : <ul>ditutup dengan</ul>
tag numbering : <ol>ditutup dengan</ol>
Tipe tipe yang dapat digunakan :
type="A"
type="1"
type="I"
2. Unordered List<ul> (Bullet) :
type="round" (untuk bulat penuh biasanya pada HTML 3)
type="disc" (untuk bulat penuh , biasanya ada pada HTML 5 , sering dipakai sekarang)
type="squared" (untuk kotak)
type="circle" (untuk lingkaran kosong)
tag <li> digunakan untuk menandai Teks mana yang akan dibuat Bullet atau Numbering. ditutup dengan tag </li>
Numbering dalam bahasa pemrograman disebut "Ordered List" (OL)
tag Bullet : <ul>ditutup dengan</ul>
tag numbering : <ol>ditutup dengan</ol>
Tipe tipe yang dapat digunakan :
type="A"
type="1"
type="I"
2. Unordered List<ul> (Bullet) :
type="round" (untuk bulat penuh biasanya pada HTML 3)
type="disc" (untuk bulat penuh , biasanya ada pada HTML 5 , sering dipakai sekarang)
type="squared" (untuk kotak)
type="circle" (untuk lingkaran kosong)
tag <li> digunakan untuk menandai Teks mana yang akan dibuat Bullet atau Numbering. ditutup dengan tag </li>
Jika kalian belum memahami tentang tag tag diatas , mari kita lihat contohnya :
warna yang merah merupakan tag UNORDERED LIST (BULLET) tersebut :
<html>
<head>
<title>Latihan Part 4</title>
</head>
<body>
"disini saya akan membuat bullet dengan tipe kotak"
<ul type="square">
<li>Ini Ceritanya yang pertama</li>
<li>Begini seterusnya sampai berapa pun jumlahnya</li>
</ul>
"ingat setiap kita selesai mengurutkan teks dengan bullet, kita harus menutupnya dengan tag</ul>"
</body>
</html>
<head>
<title>Latihan Part 4</title>
</head>
<body>
"disini saya akan membuat bullet dengan tipe kotak"
<ul type="square">
<li>Ini Ceritanya yang pertama</li>
<li>Begini seterusnya sampai berapa pun jumlahnya</li>
</ul>
"ingat setiap kita selesai mengurutkan teks dengan bullet, kita harus menutupnya dengan tag</ul>"
</body>
</html>
Dan dibawah ini merupakan contoh tag ORDERED LIST (NUMBERING), yang warna hijau merupakan tagnya :
<html>
<head>
<title>LATIHAN PART 4</title>
</head>
<body>
"disini saya akan membuat numbering dengan tipe 1"
<ol type="1">
<li>Ini No .1 nya</li>
<li>Ini yang kedua dan seterusnya tetap begini tagnya</li>
</ol>
"ingat , setiap kita selesai mengurutkan teks dengan numbering , kita harus menutupnya dengan tag</ol>"
</body>
</html>
<head>
<title>LATIHAN PART 4</title>
</head>
<body>
"disini saya akan membuat numbering dengan tipe 1"
<ol type="1">
<li>Ini No .1 nya</li>
<li>Ini yang kedua dan seterusnya tetap begini tagnya</li>
</ol>
"ingat , setiap kita selesai mengurutkan teks dengan numbering , kita harus menutupnya dengan tag</ol>"
</body>
</html>
Setelah anda memahami langkah-langkah dan pengertian diatas , maka kita bisa uji coba dengan ini :
Silahkan copas script berikut di notepad dan simpan dalam format HTML. Kemudian lihat hasilnya...
<html>
<head>
<title>Rm. Asal Enak</title>
</head>
<body>
<body bgcolor="aqua">
<h2><font color="red">Daftar Menu Rumah Makan Asal Enak</h2>
<h3><font color="green">1. Ayam</h3>
<ul type="square">
<li>Ayam Goreng Krispi</li>
<li>Ayam Bakar Bumbu Bali</li>
</ul>
<h3><font color="green">2. Bebek</h3>
<ul type="disc">
<li>Bebek Penyet Sambal Terasi</li>
<li>Bebek Goreng Renyah</li>
</ul>
<h3><font color="green">3. Ikan</h3>
<ul type="circle">
<li>Gurame Goreng Gurih <strike>Gratis</strike></li>
<li>Nila Bakar</li>
<li>Kakap</li>
A.Kakap Asam Kiyut<br>
B.Kakap Gulai
</body>
</html>
<head>
<title>Rm. Asal Enak</title>
</head>
<body>
<body bgcolor="aqua">
<h2><font color="red">Daftar Menu Rumah Makan Asal Enak</h2>
<h3><font color="green">1. Ayam</h3>
<ul type="square">
<li>Ayam Goreng Krispi</li>
<li>Ayam Bakar Bumbu Bali</li>
</ul>
<h3><font color="green">2. Bebek</h3>
<ul type="disc">
<li>Bebek Penyet Sambal Terasi</li>
<li>Bebek Goreng Renyah</li>
</ul>
<h3><font color="green">3. Ikan</h3>
<ul type="circle">
<li>Gurame Goreng Gurih <strike>Gratis</strike></li>
<li>Nila Bakar</li>
<li>Kakap</li>
A.Kakap Asam Kiyut<br>
B.Kakap Gulai
</body>
</html>
Sekian mungkin itu saja yang dapat saya sampaikan di pertemuan kali ini , sampai berjumpa di pertemuan berikutnya ..
Jika ada pertanyaan bisa hubungi saya di Facebook (lihat di homepage ada nama fb dan link fb saya).
Salam 3 stripes and red stars...
Tidak ada komentar :
Posting Komentar