Membuat list dengan HTML




Assalamu'alaikum teman-teman KWP semua, Salam sejahtera bagi kita semua, semoga Tuhan Yang Maha Esa memberikan kita kesehatan untuk bisa membaca dan memahami artikel yang saya buat ini😊🙏. Meskipun saya sendiri dalam keadaan galau karena habis diputusin sama doi tapi saya tetap harus memberikan materi terbaik saya mengenai Learning Web Development, karena dengan menulis hal-hal yang bermanfaat bagi orang lain merupakan penyemangat tersendiri bagi diri kita... hehehehe 😅😅... Udah curhatnya...


Oke kita langsung aja masuk kedalam pembahasan materinya yaitu tentang List HTML. Apa itu List? List adalah sekelompok daftar yang disusun secara rapi dalam bentuk angka, huruf, angka romawi, icon list, dan lainnya yang bisa diurutkan. Nah, jadi kalian bisa tau tuh apa itu List.


Nah, karena disini kita akan buat list menggunakan HTML jadi kita akan membuat rangkaian code HTMLnya.

Oke langsung aja kita ngoding yah,

List pertama yang akan kita buat adalah Order List. Apa itu Order List? Order List adalah List dalam bentuk angka. Jadi yang pertama kita akan membuat Order List. Oke langsung aja kita ngodingnya.

  1. Silahkan siapkan bahan-bahannya, Klik disini untuk melihatkan bahan yang harus disiapkan untuk ngoding HTML.
  2. Start Apache pada XAMPP kalian dan buka Sublime Text kalian atau text editor kalian yang lain juga bisa sih..... 
  3. Silahkan ketikkan Code HTML dibawah ini.
<html>
<head>
<title>List HTML</title>
</head>
<body>
<h1>Membuat List dengan HTML</h1>
<p>
<b>Daftar Hari:</b><br>
<ol>
<li>Senin</li>
<li>Selasa</li>
<li>Rabu</li>
<li>Kamis</li>
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ol>
</p>
</body>
</html>

        Jika sudah silahkan jalankan dibrowser kalian. Maka tampilannya akan seperti dibawah ini


Selanjutnya kita akan membuat List dengan menentukan typenya. Nah, disini saya akan menggunakan beberapa type List yaitu Type List angka, angka romawi, huruf besar, dan huruf kecil.
  1. Silahkan ketikkan code HTML dibawah ini
<html>
<head>
<title>Type List HTML</title>
</head>
<body>
<h1>Type List HTML</h1>
<p>
<b>Daftar Hari:</b><br>
<ol type="1">
<li>senin</li>
<li>selasa</li>
</ol>
<ol type="i">
<li>Senin</li>
<li>Selasa</li>
</ol>
<ol type="A">
<li>Rabu</li>
<li>Kamis</li>
</ol>
<ol type="a">
<li>Jum'at</li>
<li>Sabtu</li>
</ol>
</p>
</body>
</html>

Keterangan: <ol type="1"> adalah type default dari List HTML, meskipun tidak diberi type pada tag ol nya, list tersebut akan tetap menjadi list dalam bentuk angka.

    Jika dijalankan di browser maka hasilnya akan seperti dibawah ini





Yang ke tiga kita akan membuat List HTML Unordered List. Unordered List adalah List HTML dalam bentuk Icon List. Ada beberapa type Unordered List yaitu Square, disc, circle. Supaya kalian tidak bingung silahkan kalian ketikkan Code HTML dibawah ini.

<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h1>Membuat Unordered List</h1>
<p>
<b>Daftar Hari:</b><br>
<ul type="disc">
<li>Senin</li>
<li>Selasa</li>
</ul>
<ul type="square">
<li>Rabu</li>
<li>Kamis</li>
</ul>
<ul type="circle">
<li>Jum'at</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul>
</p>
</body>
</html>

Keterangan: List Type Disc merupakan list type default, meskipun tidak menggunakan type pada tagnya ul nya akan tetap dalam bentuk disc karena type default tag ul adalah disc.


    Jika dijalankan dibrowser maka hasilnya seperti gambar dibawah ini




Oke, teman-teman
Semoga artikel saya ini bermanfaat bagi kalian semua🙏🙏.

Jika ada kekurangan, kesalahan, dan pertanyaan pada artikel saya ini silahkan berkomentar dibawah yah😊🙏.


Terimakasih,


Semangat Otodidak 💪💪




Komentar

Posting Komentar

Postingan Terpopuler

Cara ngoding HTML di Android

Gambar
  Assalamu'alaikum teman-teman, salam sejahtera bagi kita semua. Banyak diantara kita bertanya-tanya, apakah bisa kita ngoding di android? Jawabannya pasti bisa, karena sudah banyak aplikasi legal yang tersebar di app store atau playstore di Android kalian. Karena saya bukan user atau pengguna android untuk ngoding jadi saya full ngoding di komputer atau laptop saja. Sebenernya ngoding diandroid bisa juga sih, cuman ram android saya 2GB dan sekarang sudah kepenuhan jadi saya tidak bisa pakai android untuk ngoding, karena banyak file penting di handphone saya, hehehehehe... Mungkin saya hanya share pengalaman saya aja nih, karena waktu itu saya juga pernah menjadi programmer yang menggunakan android ya, meskipun cuman ngoding HTML aja sih, apa salahnya jika saya ingin berbagi ilmu buat kalian yang mau ngoding HTML di android.  Yang pernah saya coding di android itu bukan HTML aja sih, CSS dan JavaScript pernah, karena HTML, CSS, JavaScript itu tidak perlu banyak bahan, hanya pe...
Baca selengkapnya

Tulisan berjalan dan menampilkan video dari youtube ke website menggunakan HTML

Gambar
 Assalamu'alaikum sahabat KWP semua🙏😊, Salam sejahtera bagi kita semua, Semoga kita tetap dalam lindungan Tuhan Yang Maha Esa. Driartikel kali ini saya ingin memberikan kalian sebuah materi yaitu tentang Tulisan berjalan dan cara menampilkan video dari youtube ke website milik kita menggunakan HTML. Pastinya kalian pernah melihat tulisan-tulisan berjalan pada sebuah website yah dan juga ada video dari youtube yang ditampilkan pada sebuah website. Untuk tulisan berjalan pada website biasanya para Programmer menyebutnya Marquee , Karena tulisan yang berjalan itu pastinya menggunakan tag Marquee untuk membuat tulisan tersebut berjalan.  Pertama kita akan membuat tulisan yang berjalan dari kanan ke kiri atau Marquee Default . Silahkan ketikkan Code HTML dibawah ini pada Text Editor kalian  <html> <head> <title>Marquee</title> </head> <body> <h1>Marquee</h1> <p> <marquee>Tulisan Ini Berjalan</marquee> </p...
Baca selengkapnya

Perkenalan

Gambar
  Assalamu'alaikum Warahmatullahi Wabarokatuh Perkenalkan nama saya Muhammad Ibnu Zein. Dinisi saya sebagai pendiri Forum Koding Web Programming. Dimana forum tersebut adalah tempat untuk mempelajari tentang Web Developing dari awal. Di postingan pertama saya diblog ini saya hanya memperkenalkan saya dan yang akan dibahas di blog ini saja. Diblog ini saya akan menyampaikan berbagai macam materi tentang dunia Web Developing yang terpenting adalah Start up pertama kali kita mulai belajar tentang Web Developing.  Ada pun materi terpenting yang akan saya bahas di blog ini adalah: 1. HTML Dasar 2. CSS Dasar 3. Praktek Pembuatan Website berbasis HTML & CSS 4. PHP Dasar 5. JavaScript Dasar 6. Mysql Database 7. Tambahan info materi tentang Web Developing.
Baca selengkapnya