Langsung ke konten utama

Belajar HTML dasar bersama part 9 : Mengenal dan cara membuat Tag OL dan UL list pada HTML

  


tulisan kali ini kita akan mencoba apa yang namanya tag OL dan UL dan LI dalam HTML, apa fungsi dari ketiga tag tersebut, dan bagaimana cara memakainya dalam HMTL dan bagaimana hasil dari ketiga tag tersebut, dan sebelum memulain saya mohon izin untuk mengucapkan

Alhamdulillah atas segala nikmat yang di berikan kepada saya dan juga nikmat yang mana saya masih bisa membuat, menulis, dan berbagi lagi sesuatu yang saya tahu

di blog ini dengan kalian kawan. untuk kesempatan kali ini kita akan mencoba tag OL dan UL list pada kode HTML, yang mana untuk kedua tag tersebut berfungsi untuk

membuat list pada kode HTML. dan sebenarnya nih kawan saya tiba-tiba saja ingat dengan kedua tag ini bahwa tag ini juga akan selalu dipakai nanti 

di setiap session pembuatan applikasi berbasis website. padahal saya sudah lupa kawan. hehehehe.


oke lah kita langsung saja buka notepad++ nya dan kita langsung copy paste pada lembaran baru notepad++ nya.

- kita terlebih dahulu akan mencoba tag UL dan kemudian ketik atau copy paste kode berikut ini kawan


<html>

<head>

<title>Website Pertama</title>

</head>

<body>

<p>Belajar Bersama HTML tentang Tag UL dan OL

<p>Ini contoh tag UL list nama malaikat

<ul>

<li>Malaikat Jibril</li>

<li>Malaikat Mikail</li>

<li>Malaikat Isrofil</li>

<li>Malaikat Izroil</li>

<li>Malaikat Rokib dan Atid</li>

</ul>

</p>

</p>

</body>

</html>

1. dari kode diatas maka akan menghasilkan seperti di bawah ini.


- dari dengan melihat hasil diatas, kita bisa menerka dan menyimpulkan bahwa fugnsi Tag UL (Unordered List) adalah membuat list yang tidak berurutan. dan tag

LI (List) itu yang membuat isi listnya.

- dan sekarang kita coba dengan tag OL dan ketik atau copy paste kode berikut

<html>

<head>

<title>Website Pertama</title>

</head>

<body>

<p>Belajar Bersama HTML tentang Tag UL dan OL

<p>Ini contoh tag UL list nama malaikat

<ul>

<li>Malaikat Jibril</li>

<li>Malaikat Mikail</li>

<li>Malaikat Isrofil</li>

<li>Malaikat Izroil</li>

<li>Malaikat Rokib dan Atid</li>

</ul>

</p>

<p> Ini Contoh Tag OL list nama Nabi

<ol>

<li>Nabi Adam A.S.</li>

<li>Nabi Idris A.S.</li>

<li>Nabi Nuh A.S.</li>

<li>Nabi Hud A.S.</li>

<li>Nabi Saleh A.S.</li>

</ol>

</p>

</p>

</body>

</html>

2.  dari kode diatas maka akan menghasilkan seperti di bawah ini.


- hasil diatas tersebut bisa memberikan kita suatu penilaian terhadap fugnsi OL (Ordered List) bahwa tag OL ini adalah tag yang berfungsi untuk mebuat list yang

berurutan.


dari penjabaran diatas mudah-mudahan bisa cepat dicerna oleh kita semua, dan saya yakin tulisan diatas tidak ribet kan. 

oke untuk tutorial kali ini sampai disini dulu, kita lanjut di next tutorial kawan

bagi yang males mau ngetik silahkan download disini

 salam sobat semua


#html #free #share #dekstop #windows #gratis #study #belajar #pemrograman #websites #web #websites #list #order #ordered

 

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

   warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan Salam sobat semua Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian  baca tutorial sebelumnya tentang adobe photshop disini. kal...
Posting Komentar
Baca selengkapnya

Install Notepad ++

Install Notepad ++ Salam semuanya sobat Pada kesempatan kali ini saya ingin menyimpan tata cara instal notepad ++ dan filenya. Agar tidak usah mencari di blog lain hehehehe. Fungsi notepad ++ ini sangatlah banyak dan sering saya gunakan untuk keperluan sehari-hari seperti koding php, html, perl dan lain-lain. Bagi saya tools kecil ini sangat bermanfaat. Dan siapa tahu juga bermanfaat buat kalian semua pembaca. Oke langsung saja download aplikasi notepad ++ nya disini Kemudian ekstrak filenya dan klik file exe installernya dua kali, sehingga akan tampil serperti pada gambar, dan kemudian pilih english saja dan klik ok. Kemudian klik next seperti pada gambar  Kemudian klik i agree Dan kemudian klik next saja kalo ingin letak folder installer atau pemasangannya di defaultkan oleh kita.  Kalau ingin dipindah, tinggal klik browse saja dan kemudian pilih letak foldernya  Kemudian ada beberapa pilihan atau opsi. Ikuti seperti gambar ya hehehehe: D  Dan yang terkahir seles...
Posting Komentar
Baca selengkapnya