Blog for Learning

This blog contains lesson material, material summary, questions and answers, definitions, types and examples, and others.

Advertisement

Powered by Blogger.

Visitors

Flag Counter

Pages

Learning HTML: 3 Types of Lists in HTML You Need to Know

How to make a list in HTML
A list is an element used to display information in the form of alist . Usually used to make menus.
There are three types of lists in HTML:
  1. The Ordered List is an ordered list;
  2. The Unordered List is a list that is not sorted;
  3. Descriptiona List is a list that contains definitions.
Let's discuss them one by one…

1. How to Make an Ordered List in HTML

An ordered list is an ordered list. This list is marked with a number or letter in front of it as a sign that this list is sorted.
Ordered lists are tagged <ol>This tag has a child in the form of a tag to create an item list, namely <li> (list item) .
Example:
<!DOCTYPE html>
<html>
<head>
    <title>Membuat List Ordered</title>
</head>

<body>
    <h3>10 distro linux yang sering digunakan di Indonesia</h3>
    <ol>
        <li>Ubuntu</li>
        <li>Mint</li>
        <li>BlankOn</li>
        <li>Fedora</li>
        <li>Debian</li>
        <li>CentOS</li>
        <li>OpenSUSE</li>
        <li>ElementaryOS</li>
        <li>BackTrack</li>
        <li>Kali Linux</li>
    </ol>
</body>
</html>
The result:

10 Linux distributions that are often used in Indonesia

  1. Ubuntu
  2. Mint
  3. BlankOn
  4. Fedora
  5. Debian
  6. CentOS
  7. OpenSUSE
  8. ElementaryOS
  9. BackTrack
  10. Kali Linux

The list above is sorted by numbers from 1up to 10.
So what if we wanted to use the letters as abc or roman numerals such as IIIIII?
Easy…
To make something like that, we can use attributes typein tags ol.
Example:
<!DOCTYPE html>
<html>
<head>
    <title>Ordered List dengan Atribut Type</title>
</head>

<body>
   <h3>List dengan type alfabet</h3>
       <ol type='a'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
   <h3>List dengan type alfabet kapital (huruf besar)</h3>
       <ol type='A'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
   <h3>List dengan type romawi</h3>
       <ol type='i'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
   <h3>List dengan type romawi kapital</h3>
       <ol type='I'>
           <li>Gunakan Linux</li>
           <li>Jadilah Kreatif</li>
           <li>Berani Berbeda</li>
       </ol>
</body>
</html>
The result:

List with alphabet type

  1. Use Linux
  2. Be creative
  3. Dare to be Different

List with capital alphabet type (uppercase)

  1. Use Linux
  2. Be creative
  3. Dare to be Different

List with Roman type

  1. Use Linux
  2. Be creative
  3. Dare to be Different

List with Roman type capital

  1. Use Linux
  2. Be creative
  3. Dare to be Different

2. How to make an Unordered List in HTML

While for lists that are not sorted, usually use symbols.
How to make it using tags <ul> (unordered list) . He also has the same child as <ul>.
Example:
<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h3>Daftar bahasa pemrograman</h3>
  <ul>
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
</body>
</html>
The result:

List of programming languages

  • C
  • C ++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

By default the symbol used by the unordered list is a small circle (disc) . We can also replace it like an ordered list using attributes type.
Example:
<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h3>Type = square</h3>
  <ul type="square">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
  <h3>Type = disc</h3>
  <ul type="disc">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
  <h3>Type = none</h3>
  <ul type="none">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
  <h3>Type = circle</h3>
  <ul type="circle">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Ruby</li>
    <li>Perl</li>
  </ul>
</body>
</html>
The result:

Type = square

  • C
  • C ++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Type = disc

  • C
  • C ++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Type = none

  • C
  • C ++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Type = circle

  • C
  • C ++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Besides using the type list above, we can also use images.
Example:
<ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico);">
  <li>C</li>
  <li>C++</li>
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Ruby</li>
  <li>Perl</li>
</ul>
The result:

  • C
  • C ++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

In the example above, we use inline CSS to replace the symbols used in the list with icon images.
style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico);"

3. How to Make a Description List in HTML

This list is used to display descriptions / explanations. Examples are like a dictionary.
The tag to create a description list is <dl> (data list) . In this tag there are tags <dt> (data term) and <dd> (data description) .
Example:
<!DOCTYPE html>
<html>
<head>
  <title>Description List</title>
</head>

<body>
  <dl>
    <dt>Kopi</dt>
    <dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd>
<dt>Kopi Black Magic</dt>
    <dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
<dt>White Coffee</dt>
    <dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
<dt>Kopi++</dt>
    <dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
</dl>
</body>
</html>
The result:

List in the List (Nested List)

A list can also be created on a list, for example we want to combine an ordered list with an unordered list.
How, the list inside is written in the tag <li>.
Example:
<!DOCTYPE html>
<html>
<head>
    <title>List di dalam List</title>
</head>

<body>
   <h3>Distro Linux dan Keluarganya</h3>
       <ol>
           <li>Debian
             <ul><li>Ubuntu</li>
                 <li>Mint</li>
                 <li>elementaryOS</li>
             </ul>
           </li>
           <li>RedHat
             <ul><li>Fedora</li>
             </ul>
           </li>
           <li>Slackware</li>
       </ol>
</body>
</html>
The result:

Linux distributions and their families

  1. Debian
    • Ubuntu
    • Mint
    • elementaryOS
  2. RedHat
    • Fedora
  3. Slackware

0 Komentar untuk "Learning HTML: 3 Types of Lists in HTML You Need to Know"

Silahkan berkomentar sesuai artikel

 
Template By Kunci Dunia
Back To Top