HTML Dasar : List (7/13)

00:06:31
https://www.youtube.com/watch?v=gLHEoeupIZs

Résumé

TLDRThe video explains how to create lists in HTML using three main tags: <ol> for ordered lists, <ul> for unordered lists, and <dl> for definition lists. It covers the syntax for each type of list, including how to customize ordered lists with different numbering styles and how unordered lists can display items with various bullet styles. The video also highlights the structure of definition lists, which pair terms with their definitions. Viewers are encouraged to experiment with these tags in their HTML projects.

A retenir

  • 📋 HTML lists can be created using <ol>, <ul>, and <dl> tags.
  • 🔢 Ordered lists (<ol>) display items in a specific sequence.
  • ⚪ Unordered lists (<ul>) display items without a specific order.
  • 📖 Definition lists (<dl>) pair terms with their definitions.
  • 🔤 You can customize ordered list numbering with the 'type' attribute.
  • 🔲 Unordered lists can use different bullet styles: disk, square, circle.
  • 💡 Use <li> to define list items in both ordered and unordered lists.
  • 🖊️ Text can be made bold using <strong> or CSS.
  • 🎨 CSS can be used to further customize list appearances.
  • 🔄 Experiment with different list types in your HTML projects.

Chronologie

  • 00:00:00 - 00:06:31

    In this video, we discuss lists in HTML, which include three types: ordered lists (OL), unordered lists (UL), and definition lists (DL). An ordered list is created using the <ol> tag, which organizes items in a specific sequence, indicated by <li> tags for each list item. The default numbering is numeric, but it can be changed to letters or Roman numerals using the 'type' attribute. An unordered list, created with the <ul> tag, does not prioritize the order of items, and the default display is bullet points, which can be customized to squares or circles. Lastly, a definition list, marked by the <dl> tag, pairs terms with their definitions using <dt> for the term and <dd> for the description, ensuring each term has a corresponding definition. The video encourages experimentation with these list types and their attributes.

Carte mentale

Vidéo Q&R

  • What is an ordered list in HTML?

    An ordered list is created using the <ol> tag and displays items in a specific order, typically numbered.

  • How do you create an unordered list in HTML?

    An unordered list is created using the <ul> tag and displays items without a specific order, typically with bullet points.

  • What is a definition list in HTML?

    A definition list is created using the <dl> tag and pairs terms with their definitions, using <dt> for the term and <dd> for the description.

  • Can you change the numbering style of an ordered list?

    Yes, you can change the numbering style using the 'type' attribute in the <ol> tag.

  • What types of bullets can be used in an unordered list?

    You can use different bullet styles such as disk, square, and circle in an unordered list.

  • How do you make text bold in HTML?

    You can make text bold using the <strong> tag or by applying CSS styles.

  • Can you customize lists using CSS?

    Yes, you can customize the appearance of lists using CSS.

  • What is the purpose of the <li> tag?

    The <li> tag is used to define each item in both ordered and unordered lists.

  • How do you create a nested list in HTML?

    You can create a nested list by placing an <ol> or <ul> tag inside an <li> tag.

  • What is the default bullet style for unordered lists?

    The default bullet style for unordered lists is a solid circle.

Voir plus de résumés vidéo

Accédez instantanément à des résumés vidéo gratuits sur YouTube grâce à l'IA !
Sous-titres
id
Défilement automatique:
  • 00:00:00
    pada video kali ini yang akan kita bahas
  • 00:00:03
    adalah mengenai list pada HTML ya untuk
  • 00:00:06
    membuat list pada HTML terdapat tiga
  • 00:00:08
    buah tag yang pertama ada tag OL untuk
  • 00:00:12
    membuat list terurut OL Itu adalah order
  • 00:00:15
    list lalu yang kedua adalah unordered
  • 00:00:18
    list untuk membuat list tidak terurut
  • 00:00:20
    menggunakan tag Ul dan yang terakhir
  • 00:00:23
    adalah definition list untuk membuat
  • 00:00:26
    daftar terminologi dan definisi
  • 00:00:29
    menggunakan
  • 00:00:31
    DL yang pertama akan kita bahas adalah
  • 00:00:34
    order list atau list terurut dibuat
  • 00:00:36
    dengan menggunakan ol ya kita langsung
  • 00:00:39
    Coba saja saya buka kode editor saya
  • 00:00:42
    menggunakan sublim text di sini Saya
  • 00:00:43
    sudah membuat folder latihan 5 seperti
  • 00:00:47
    video-video sebelumnya lalu di dalam
  • 00:00:49
    folder latihan 5 ini saya membuat file
  • 00:00:51
    yang namanya
  • 00:00:54
    list.html dalam file html-nya saya juga
  • 00:00:56
    sudah membuat struktur html dasar dan
  • 00:00:59
    saya akan mencoba membuat sebuah list
  • 00:01:02
    terurut misalnya saya akan membuat list
  • 00:01:06
    apa yang akan saya lakukan besok hari
  • 00:01:09
    setelah saya bangun pagi misalkan saya
  • 00:01:10
    akan membuat sebuah tag menggunakan
  • 00:01:14
    h3an to do list ya ini saya akan buat
  • 00:01:20
    ordered list atau list terurut
  • 00:01:22
    menggunakan tag OL tag OL ini akan
  • 00:01:25
    memberitahu html bahwa saya akan membuat
  • 00:01:27
    sebuah list terurut di mana Di di
  • 00:01:30
    dalamnya ada tag yang harus kita tulis
  • 00:01:32
    adalah Li yaitu list item misalnya saya
  • 00:01:36
    akan bangun
  • 00:01:40
    pagi lalu
  • 00:01:44
    sarapan lalu tidur lagi misalnya
  • 00:01:48
    ya Nah list terurut ini atau OL dibuat
  • 00:01:52
    dengan memperhatikan urutan dari item
  • 00:01:54
    yang ada di dalamnya jadi kalau itemnya
  • 00:01:56
    tertukar posisi berarti makna dari list
  • 00:01:59
    ini
  • 00:02:00
    berubah ya kita lihat di slide ya
  • 00:02:03
    sintaksnya kita bisa membuat itemnya
  • 00:02:06
    sebanyak
  • 00:02:06
    mungkin kalau kita lihat hasilnya kita
  • 00:02:09
    buka di browser ini adalah hasilnya jadi
  • 00:02:12
    defaultnya kalau kita gunakan OL
  • 00:02:14
    urutannya berbentuk angka 1 2 3 dan
  • 00:02:18
    seterusnya kalau kita mau merubah urutan
  • 00:02:20
    ini tidak menggunakan angka misalkan mau
  • 00:02:23
    menggunakan huruf AC kita bisa gunakan
  • 00:02:26
    atribut tipe kalau defaultnya ada adalah
  • 00:02:30
    tipenya satu Jika kita ingin menggunakan
  • 00:02:32
    huruf a bc kapital menggunakan a besar
  • 00:02:37
    huruf kecil menggunakan a kecil
  • 00:02:39
    fromomawi besar menggunakan I besar ini
  • 00:02:41
    I besar fromomawi kecil menggunakan i
  • 00:02:44
    kecil kita coba misalnya Saya mau
  • 00:02:46
    mengganti tipenya a besar ya Jadi nanti
  • 00:02:50
    1 2 3-nya akan berubah menjadi
  • 00:02:53
    ABC dan kalau saya ganti menjadi i kecil
  • 00:02:57
    huruf kapitalnya akan berubah menjadi
  • 00:03:00
    I I2 dan i3 list yang kedua adalah
  • 00:03:04
    unordered list tag-nya adalah Ul di mana
  • 00:03:07
    di dalamnya kita bisa simpan Li sama
  • 00:03:10
    seperti yang sebelumnya jika menggunakan
  • 00:03:12
    Ul artinya urutan dari list itemnya itu
  • 00:03:16
    tidak berpengaruh misalnya saya punya
  • 00:03:18
    list satu
  • 00:03:20
    lagi ya Jadi ini adalah makanan-makanan
  • 00:03:24
    yang akan saya makan saat
  • 00:03:26
    sarapan nasi goreng misalnya ya
  • 00:03:33
    mie goreng dan yang
  • 00:03:38
    terakhir telur dadar pada saat
  • 00:03:41
    menggunakan Ul atau list tidak terurut
  • 00:03:43
    itu urutan dari itemnya tidak
  • 00:03:45
    berpengaruh jadi saya mau makan yang
  • 00:03:47
    mana duluan itu tidak akan mempengaruhi
  • 00:03:49
    list saya ya nah ini kalau kita lihat
  • 00:03:51
    hasilnya secara default html
  • 00:03:54
    menampilkannya menggunakan titik seperti
  • 00:03:57
    ini atau bullets ya Jika ingin
  • 00:03:59
    menggunakan yang lain html punya tiga
  • 00:04:01
    buah tipe ada disk Square dan circle
  • 00:04:05
    misalnya kita ganti dengan Square maka
  • 00:04:09
    lingkaran ini akan berubah menjadi kotak
  • 00:04:13
    ya Dan kalau kita ganti menjadi
  • 00:04:19
    circle berubah menjadi lingkaran tapi
  • 00:04:23
    tidak penuh seperti jadi berlubang
  • 00:04:26
    lingkarannya itu adalah contoh
  • 00:04:28
    penggunaan Ul
  • 00:04:31
    yang terakhir adalah definition list
  • 00:04:34
    atau DL Nah di sini agak berbeda dari
  • 00:04:37
    dua list sebelumnya digunakan untuk
  • 00:04:40
    membuat terminologi dan deskripsi jadi
  • 00:04:43
    Isinya
  • 00:04:44
    berpasangan yang pertama kita bungkus
  • 00:04:46
    dengan DL atau definition listnya daftar
  • 00:04:49
    definisi lalu di dalamnya ada dua buah
  • 00:04:52
    tag yang harus ditulis yang pertama
  • 00:04:54
    terminologinya atau termnya apa
  • 00:04:56
    definition term lalu di bawahnya ya apa
  • 00:05:00
    ya Jadi kalau kalian punya tiga buah
  • 00:05:02
    term maka kalian juga harus punya tiga
  • 00:05:04
    buah
  • 00:05:05
    description kalau saya bisa kasih
  • 00:05:09
    contoh Saya punya H3 lagi pemprograman
  • 00:05:13
    web web
  • 00:05:15
    1 itu kita
  • 00:05:18
    belajar beberapa hal misalnya saya punya
  • 00:05:20
    list dt-nya saya kita tulis
  • 00:05:26
    html deskripsinya kita tulis hyper text
  • 00:05:29
    markup language lalu terminologi yang
  • 00:05:32
    kedua adalah CSS di mana definisinya
  • 00:05:35
    adalah cascading style sheet Jadi kalau
  • 00:05:38
    DL harus berpasangan antara DT dan DD
  • 00:05:42
    hasilnya kita lihat seperti ini jadi
  • 00:05:46
    otomatis baris keduanya itu ditambahkan
  • 00:05:48
    indentasi oleh html-nya ya kalau kita
  • 00:05:51
    mau membuat C htmlnya ini menjadi
  • 00:05:53
    bercetak tebal kita bisa gunakan html
  • 00:05:56
    atau nanti lebih tepatnya kita gunakan
  • 00:05:58
    CSS pakai html pun B bisa menggunakan
  • 00:06:00
    tag
  • 00:06:01
    strong seperti yang sudah kita coba
  • 00:06:03
    kemarin ya
  • 00:06:06
    hasilnya berubah menjadi bercetak tebal
  • 00:06:10
    e jadi itu adalah tiga buah list yang
  • 00:06:13
    dimiliki oleh html silakan dicoba-coba
  • 00:06:15
    silakan bereksperimen dengan mengganti
  • 00:06:17
    tipenya ee walaupun nanti tipe ini bisa
  • 00:06:20
    kalian ubah juga menggunakan CSS ya jadi
  • 00:06:24
    Sekian dulu terima kasih atas
  • 00:06:26
    perhatiannya saya sandik kagali sampai
  • 00:06:28
    ketemu lagi
Tags
  • HTML
  • ordered list
  • unordered list
  • definition list
  • <ol>
  • <ul>
  • <dl>
  • list item
  • CSS
  • customization