List dan List Kombinasi

List dan List Kombinasi - P4

Pemrograman Web-List

Jenis List

Ada 3 Macam Listing di HTML diantaranya:
1. Ordered List: Sebagai Penanda secara Terurut
2. Unordered List: Untuk membuat Penanda secara Tak Terurut
3. Definiton List: Sebagai Daftar Definisi

Untuk Ordered List biasanya menggunakan angka 1,2,3 atau huruf Romawi I,II,III. Juga dengan Alfabet a,b,c,d atahupun dengan huruf "i"(i,ii,iii).Ordered List ini cocok sebagai urutan, Membuat Teks Prosedur untuk membuat sesuatu seperti langkah langkah,Komposisi makanan,Cara membuat,dan lain sebagainya.

Ordered List:

Ordered List perlu memakai Tag <ol>bdi bagian awal dan Tag</ol> di bagian akhir.

Dan kita huga harus menambahkan Tag<ii> dan </ii> di bagian yang diberi Tanda.

Contoh Penulisan Ordered List:

<ol>
<li>Urutan Pertama</li>
<li>Urutan Kedua</li>
</ol>

Itu adalah contoh penulisan Ordered List.Ordered List bisa ditampilkan dengan huruf, angka, angka Romawi,dll.Untuk bisa melakukan hal itu kita perlu menggunakan salah satu Attribut berikut:

Unordered List:

Tag ini digunakan untuk membuat Daftar atau Penanda Tak Berurutan yang berupa Bentuk (Lingkaran, Kotak, Dll)

Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu, misalnya lingkaran atau kontak dan lain lain.

Digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag <ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>.

Contoh penulisan adalah sebagai berikut :

<ul>

<li>Item satu</li>

<li>Item dua</li>

</ul>

Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk setiap item berupa tanda bulatan untuk defaultnya.

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list

adalah :

Daftar Definisi(Definition List)

Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah tertentu, misalnya daftar definisi istilah HTML.

- Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag tidak berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh browser akan ditampilkan secara otomatis menjadi daftar bullet.

- Tidak demikian dengan daftar berurutan <ol>, maka agar tipenya sama dengan daftar berurutan sebelumnya, kita harus memberikan atribut tipe yang sama dengan daftar berurutan sebelumnya.

Contoh:

Pembuatan LIST KOMBINASI

"Memulai dengan Nomor Tertentu."

Contoh:

<ol start="17" >
<li>Blok huruf denqan text tool</li>
<li>Klik tab karakter</li>
<li>Pilih jenis huruf pada menu pop-up.</li>
</ol>

Maka urutan daftar yang ditampilkan akan dimulai dengan nomor 17,Selanjutnya 18 dan 19.

Demikian pula dengan coding ini,
Contoh:

<ol  type="A" start="17" >
<li>Blok huruf denqan text tool</li>
<li>Klik tab karakter</li>
<li>Pilih jenis huruf pada menu pop-up.</li>
</ol>

Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal, biasanya diperlukan jika daftar yang kita buat sudah diselingi beberapa paragraph,

sehingga ketika dibuat daftar bernomor, secara default akan dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka digunakanlah atribut “start=” tersebut.

Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R, dan S.

Ada beberapa Contoh List yang akan saya tunjukan:

1. List

Dan Hasilnya seperti ini:

Source Code:

<html>
 <head>
 <title>Vertebrata</title>
 </head>
<body>
       <h1>Vertebrata</h1>
 <ul>
        <li>Ikan
 <ul>
       <li>Patin</li>
       <li>Gurami</li>
       <li>Mujair</li>
</ul>
</li>
       <li>Amfibi
<ul>
       <li>Ordo Anura
<ul>
       <li>Katak Hijau </li>
       <li>Katak Darat</li>
       <li>Katak Ungu</li>
</ul>
</li>
<li>Ordo Urodela
       <ul type="circle">
       <li>Salamander</li>
       <li>Mudpuppy</li>
</ul>
</li>
</ul>
</li>
<li>Reptil
<ul>
       <li>Buaya</li>
       <li>Ular Kobra</li>
       <li>Penyu</li>
</ul>
</li>
</ul>
</body>
</html>

2. List Kombinasi

Hasilnya:

Source Code:

<html>
<head>

     <title>Latihan 10 Macam-macam List</title>
</head>
     <body>
      <h1>Contoh Ordered List mulai nomor 17</h1>
       <ol start="17">
        <li>Mu1timedia</li>
        <li>Teknik Komputar Jaringan</li>
        <li>Rekayasa Perangkat Lunak</li>
</ol>
        <h2>Contoh Ordered List mulai abjad 17</h2>
        <ol type="A" start="17">
        <li>Ungu</li>
        <li>Marah</li>
        <li>Hijau</li>
</ol>
        <h3>Contoh Ordered list 'a'</h3>
        <ol type="25“>
<li>Violet</li>
<li>Red</li>
<li>Green</li>

</ol>
        <h4>Contoh Ordered list ‘I’ Romawi</h4>
        <01 type="I">
        <li>Kelas X</li>
        <li>Kelas XI</li>
        <li>Kelas XII</li>
</ol>
        <h4>Contoh Ordered List 'i' Romawi</h4>
<ol type="i">
        <li>Satu</li>
        <li>Dua</li>
        <li>Tiga</li>
</ol>
</body>
</html>

3. List Kombinasi

Hasilnya:

Source Codenya:

<html>
<head>
<title>Masih Latihan List Kombinasi</title>
</head>

        <title>Masih Latihan List Kombinasi</title>
        <h1>Kombinasi OL dan UL</h1>
        <ol type="1">
        <li> Daftar Makanan Tradisional:</li>
        <ul type="circle"><li>Tahu Gejrot</li></ul>
        <ul type="disc"><li>Peuyeum</li></ul>
        <ul type="square"><li>Karedok</li></ul>
</ol>
</body>
</html>

4. Definition List

Hasilnya:

Source Codenya:

<html>
       <head><title>Latihan paragraf</title></head>
<body>
       <h4>Contoh List Definisi:</h4>
<dl>
      <dt>HTML</dt>
       <dd>Hyper Text Markup Language, merupakan bahasa markup yang digunakan untuk membuat
           halaman-halaman web.</dd>
<dt>Internet Explorer</dt>

       <dd>Web browser yang merupakan bawaan dari sistem operasi Windows, digunakan untuk
           menampilkan halaman-halaman web.</dd>
</dl>
</body>
</html>

Studi kasus :

<html>
<head>
     <title>Inilah diriku</title>
     <style type="text/css">
       body{
        background-color: #129C77;
        font-family: rockwell;
       }
       p{
      line-height: 1.75em;
      font-size: 18px;
    }
    li { 
      font-family: sans-serif;
      color: orange;
    }
     </style>
  </head>
  <body>
  <h1 align="center">Biodata</h1>
</font>

 <center><img src="gambarku/aku.jpg"width="300px"height="168px"></center>

<p> Inilah aku.Saya bernama Muhamad Alfi Rizqi, Bisa dipanggil Alvi.Saya Lahir pada tanggal 25 Juni tahun 2002.Saya sekolah 
    di SMKN 4 BANDUNG jurusan RPL sekarang saya sudah kelas 11.Hobi saya adalah bersepeda keliling kota.Saya tinggal di 
 Kota Bandung,Saya sekolah menggunakan sepeda dari rumah saya setiap hari.Makanan favorit saya adalah Roti
 Sandwich.Saya mempunyai 3 saudara 2 anak laki laki kakaku,dan saya yang ketiga.Saya berasal dari SMPN Kaveleri Bandung dan
 SD saya di SDN Pindad
</p>
</center>
<p>untuk point point nya saya tulis dibawah</p>
<ul> 
 <li>Nama:Muhamad Alfi</li>
 <li>T/TL:Bandung/25 Juni 2002</li>
 <li>Gender:Laki laki</li>
 <li>Sekolah:SMKN 4 BANDUNG</li>
 <li>Jurusan:RPL</li>
 <li>Hobi:Bersepeda</li>
 <li>Makanan:Roti Sandwich</li>
</ul>  

</body>
</html>

Install Point

Search This Blog