- 4,5 dari 5 berdasarkan 2 suara

Seringkali, informasi tertentu di situs web perlu disajikan dalam bentuk daftar.

Daftar memungkinkan Anda mengatur dan mensistematisasikan berbagai informasi dan menyajikannya kepada pengunjung dalam bentuk yang nyaman.

Daftar dalam HTML hadir dalam tiga jenis: daftar berpoin, daftar bernomor, dan daftar definisi. Mari kita lihat cara membuatnya secara berurutan.

Daftar berpoin.

Jenis daftar ini paling sering digunakan. Daftar berpoin dalam HTML dibuat menggunakan tag

• . Dalam hal ini, penanda ditambahkan di seberang setiap item daftar; secara default, penanda berbentuk lingkaran. Menggunakan tag, sebuah wadah dibuat, di dalamnya terdapat elemen daftar: .

  Kode daftar berpoin akan terlihat seperti ini:

  • Pilihan ini adalah
  • Pilihan ini
  • Pilihan semacam ini

  Anda juga dapat mencoba membuat halaman HTML menggunakan kode ini, hasilnya adalah daftar berikut:

  

  Seperti yang Anda lihat, setiap elemen daftar ditempatkan pada baris baru, dengan indentasi tertentu dibuat di kiri, atas dan bawah. Setiap item daftar dimulai dengan penanda; penanda dapat berupa lingkaran terisi (digunakan secara default), lingkaran, atau persegi. Di tag

  Terdapat atribut type, yang digunakan untuk mengatur gaya penanda. Atribut ini mempunyai arti sebagai berikut:
  • cakram - lingkaran;
  • lingkaran - lingkaran;
  • persegi - persegi.

  Nilai disk adalah nilai default.

  Contoh pembuatan daftar berpoin dengan penanda lingkaran:

  • Pilihan ini adalah
  • Pilihan ini
  • Pilihan semacam ini

  Hasilnya, daftarnya akan berbentuk sebagai berikut:

  

  Membuat daftar berpoin dengan penanda persegi:

  • Pilihan ini adalah
  • Pilihan ini
  • Pilihan semacam ini

  Daftarnya akan terlihat seperti:

  

  Atribut type dapat diterapkan ke lebih dari sekedar tag

  , tetapi juga pada tag
  • . Dengan cara ini Anda dapat membuat daftar dengan berbagai poin.
    • Pilihan ini adalah
    • Pilihan ini
    • Pilihan semacam ini

    Hasilnya adalah sebagai berikut:

    

    Daftar bernomor.

    Daftar bernomor dalam HTML adalah daftar di mana setiap item memiliki nomor seri, daftar bernomor dibuat menggunakan tag

    dan bersarang di tag-nya

    1. 1. Garis pertama
       2. Baris kedua
       3. Baris ketiga

       Daftarnya terlihat seperti ini:

       

       Secara default, penomoran menggunakan angka Arab. Tapi tagnya

       Terdapat atribut type, yang nilainya dapat Anda buat penomoran dalam huruf besar (type="A") atau huruf kecil (type="a") dalam huruf latin, angka Romawi di atas (type="I" ) dan register yang lebih rendah (type="i" ).

       Di bawah ini adalah versi singkat dari kode dan jenis penomoran yang mungkin ada dalam satu kasus atau lainnya.

       Tampilan daftar:

       Tampilan daftar:

       

       Penomoran dalam huruf kecil alfabet Latin:

       Tampilan daftar:

       

       Tampilan daftar:

       

       Tampilan daftar:

       

       Daftar definisi dalam HTML.

       Jenis daftar khusus adalah daftar definisi. Perbedaannya adalah setiap elemen daftar terdiri dari dua elemen, istilah dan teks yang mengungkapkan maknanya. Daftar ini dibuat menggunakan tag

       . Menandai

       membuat wadah untuk daftar, tag

       menetapkan istilah dan tag

       deskripsi atau definisi suatu istilah.

       Daftar ini ditulis sebagai berikut:

       Istilah 1

       Definisi 1

       Istilah 2

       Definisi istilah 2

       Istilah 3

       Definisi 3

       Hasilnya adalah daftar berikut:

       

       Seperti yang Anda lihat, ini menciptakan lekukan yang sesuai untuk teks istilah dan definisi.

       Daftar bertingkat atau bertingkat dalam HTML.

       Terkadang perlu untuk menyusun daftar lain dalam satu elemen dari jenis daftar tertentu. Dalam HTML, dimungkinkan untuk menyematkan beberapa daftar tanpa batas ke dalam elemen daftar lainnya.

       Misalnya, inilah kode yang menyusun daftar bernomor di dalam item daftar berpoin.

       • Pilihan ini adalah
         1. Garis pertama
         2. Baris kedua
         3. Baris ketiga
       • Pilihan ini
         1. Garis pertama
         2. Baris kedua
         3. Baris ketiga
       • Pilihan semacam ini
         1. Garis pertama
         2. Baris kedua
         3. Baris ketiga

       Daftar berpoin memungkinkan Anda memecah teks besar menjadi blok-blok terpisah, yang masing-masing dimulai dengan poin - biasanya titik kecil. Hal ini menarik perhatian pembaca ke teks dan meningkatkan keterbacaannya.

       Dengan elemen

       Fitur-fitur berikut terkait:
       • di tempat di mana hal itu terjadi
         , browser secara otomatis menambahkan jeda baris;
         • daftar memiliki indentasi di bagian atas dan bawah;
         • Secara default, penanda ditampilkan sebagai lingkaran terisi;
         • Setiap elemen daftar digeser ke kanan relatif terhadap teks utama.

         Gambar 1 menunjukkan hasil contoh, yang mengilustrasikan fitur daftar berpoin di atas.

         Beras. 1. Tampilan daftar poin

         Jenis penanda

         Penanda dapat mengambil salah satu dari tiga bentuk: lingkaran terisi (default), lingkaran terbuka, dan persegi. Untuk memilih tipe penanda, gunakan properti tipe gaya daftar atau properti gaya daftar universal (contoh 1). Nilai-nilai berikut berlaku:

         • disk - spidol dalam bentuk lingkaran berisi;
         • lingkaran - penanda dalam bentuk lingkaran terbuka;
         • persegi - penanda persegi.

         Contoh 1: Mengubah tampilan penanda

         • Sepulki
         • Sepulcaria
         • Perpisahan

         Contoh ini menunjukkan cara membuat daftar poin menggunakan kotak kecil berwarna solid sebagai ikon poin. Meskipun jumlah nilai dibatasi hingga tiga, bukan berarti kami hanya memiliki tiga jenis penanda yang kami miliki. Ada banyak karakter khusus yang berhasil berperan sebagai ikon penanda. Kencangkan langsung ke

       • Ini tidak akan berhasil, jadi Anda harus mengatasinya. Untuk melakukan ini, sembunyikan penanda daftar menggunakan properti gaya daftar dengan nilai none dan di teks sebelum konten
       • Kami menambahkan karakter kami sendiri menggunakan elemen semu ::before. Dalam contoh 2, sebuah segitiga bertindak sebagai penanda.

         Contoh 2: Menggunakan::sebelum

         • Sepulki
         • Sepulcaria
         • Perpisahan

         Hasil dari contoh ini ditunjukkan pada Gambar. 2. Karena menggunakan properti gaya daftar dengan nilai none tidak menghilangkan penanda sama sekali, tetapi hanya menyembunyikannya dari pandangan, daftar tampak bergeser ke kanan. Untuk menghilangkan fitur ini, contoh menambahkan properti indentasi teks dengan nilai negatif. Tugasnya adalah memindahkan teks ke kiri satu karakter.

         

         Beras. 2. Penanda sewenang-wenang dalam daftar

         Karakter tidak harus dalam format heksadesimal; karakter dapat disisipkan langsung ke dalam teks. Hal utama adalah menyimpan dokumen dalam pengkodean UTF-8 dan editor mendukungnya. Karakter itu sendiri dan kodenya dapat diambil, misalnya, dari LibreOffice Writer (Gbr. 3).

         

         Beras. 3. Memilih simbol di LibreOffice

         Daftar dengan spidol yang digambar tangan

         Gaya memungkinkan Anda menyetel gambar apa pun yang sesuai sebagai penanda melalui properti gambar gaya daftar. Nilainya adalah jalur relatif atau absolut ke file grafik, seperti yang ditunjukkan pada contoh 3.

         Contoh 3: Menggunakan Gambar sebagai Penanda

         • Sepulki
         • Sepulcaria
         • Perpisahan

         Yang terbaik adalah memilih gambar kecil agar tidak mengubah elemen daftar menjadi keterangan. Pada Gambar. Gambar 4 menunjukkan hasil contoh penggunaan gambar kecil sebagai penanda.

         

         Beras. 4. Menggambar sebagai penanda

         Menggunakan list-style-image memiliki beberapa kelemahan:

         • polanya tidak bisa digerakkan ke atas atau ke bawah;
         • Posisi gambar relatif terhadap teks mungkin berbeda di berbagai browser.

         Kekurangan ini dapat dihindari dengan menggunakan properti background, yang mengatur gambar latar belakang. Untuk setiap elemen daftar

       • kami menghapus penanda asli dan mengatur gambar latar belakang tanpa mengulanginya. Dan agar teks tidak muncul di atas gambar, kita geser ke kanan menggunakan padding-kiri (contoh 4).

         Contoh 4: Menggunakan latar belakang

         Ul ( margin-kiri: -1em; ) li ( gaya daftar: tidak ada; latar belakang: url(images/bullet.png) tanpa pengulangan 0 2px; padding-kiri: 20px; )

         Posisi teks dan poin

         Ada dua cara untuk menempatkan penanda relatif terhadap teks: penanda dipindahkan ke luar batas elemen daftar atau dililitkan di sekitar teks (Gbr. 5).

         di dalam	di luar

         Beras. 5. Penempatan penanda relatif terhadap teks

         Untuk mengontrol posisi penanda, gunakan properti posisi gaya daftar. Ini memiliki dua arti: di luar - poin ditempatkan di luar blok teks (ini adalah nilai default) dan di dalam - poin adalah bagian dari blok teks dan ditampilkan dalam item daftar (contoh 5).

         Contoh 5: Mengubah posisi penanda

         • Sebelum memulai, periksa apakah peralatan yang disertakan dengan kit 3BM sudah disertakan.
         • Jika satu atau lebih perangkat periferal hilang, sebaiknya segera hubungi staf teknis CC.
         • Setelah memeriksa area kerja Anda secara visual, Anda dapat menyalakan listrik ke 3BM dengan hati-hati.

         Hasil dari contoh ini ditunjukkan pada Gambar. 6.

         

         HTML mendukung tiga tipe daftar yang berbeda, yang masing-masing memiliki tipe daftarnya sendiri:

         • – daftar bernomor (menggunakan angka atau huruf), yang setiap unsurnya mempunyai nomor urut (huruf);
           1. – daftar berpoin (tidak bernomor), di samping setiap elemen yang diberi penanda (bukan karakter numerik atau alfabet yang menunjukkan nomor seri);

              • – daftar definisi terdiri dari pasangan nama/nilai, termasuk istilah dan definisi.

              Daftar bernomor

              Dalam daftar bernomor, browser secara otomatis memasukkan nomor elemen secara berurutan, dimulai dengan nilai tertentu (biasanya 1). Ini memungkinkan Anda untuk menyisipkan dan menghapus item daftar tanpa mengganggu penomorannya, karena nomor yang tersisa akan dihitung ulang secara otomatis.
              Daftar bernomor dibuat menggunakan elemen blok

              (dari Daftar Urutan Bahasa Inggris - daftar bernomor). Di sebelah wadah
              untuk setiap item daftar, sebuah elemen ditempatkan
              1. (dari Item Daftar Bahasa Inggris - item daftar). Standarnya adalah daftar bernomor dengan angka Arab.
                 Menandai
                 memiliki sintaks berikut:
                 1. elemen 1
                 2. elemen 2
                 3. elemen 3

                 Item daftar bernomor harus berisi beberapa item daftar, seperti yang diperlihatkan dalam contoh berikut:

                 Contoh: Daftar Bernomor

                 • Cobalah sendiri "

                 Petunjuk langkah demi langkah

                 1. Dapatkan kuncinya
                 2. Masukkan kunci ke dalam gembok
                 3. Putar kunci dua putaran
                 4. Keluarkan kunci dari lubangnya
                 5. Buka pintunya

                 Petunjuk langkah demi langkah

                 1. Dapatkan kuncinya
                 2. Masukkan kunci ke dalam gembok
                 3. Putar kunci dua putaran
                 4. Keluarkan kunci dari lubangnya
                 5. Buka pintunya

                 Terkadang ketika melihat kode HTML yang ada Anda akan menemukan argumen tersebut jenis dalam elemen

                 , yang digunakan untuk menunjukkan jenis penomoran (huruf, angka Romawi dan Arab, dll). Sintaksis:

                 Di sini: ketik – daftar simbol:

                 • A - huruf latin kapital (A, B, C...);
                 • a - huruf latin kecil (a, b, c...);
                 • I - angka Romawi besar (I, II, III...);
                 • i - angka romawi kecil (i, ii, iii...);
                 • 1 - Angka Arab (1, 2, 3 . . .) (digunakan secara default).

                 Jika Anda ingin daftar dimulai dengan angka selain 1, Anda harus menentukannya menggunakan atribut awal menandai

                 .
                 Contoh berikut memperlihatkan daftar bernomor dengan angka Romawi besar dan nilai awal XLIX:

                 Penomoran juga dapat dimulai menggunakan atribut nilai, yang ditambahkan ke elemen

                 1. dengan cara berikut:

                 7. Dalam hal ini, penomoran urut daftar akan terputus dan mulai saat ini penomoran akan dimulai lagi, dalam hal ini dari tujuh.

                    Contoh penggunaan atribut nilai menandai

                 8. , yang memungkinkan Anda mengubah jumlah elemen daftar tertentu:

                    Dalam contoh ini, "Item Daftar Pertama" akan menjadi nomor 1, "Item Daftar Kedua" akan menjadi nomor 7, dan "Item Daftar Ketiga" akan menjadi nomor 8.

                    Memformat Daftar Bernomor dengan CSS

                    Untuk mengubah nomor daftar Anda harus menggunakan properti tipe gaya daftar Lembar gaya CSS:

                    Gaya daftar bernomor

                    Contoh	Arti	Keterangan
                    a, b, c	alfa rendah	Huruf kecil
                    A, B, C	alfa atas	Huruf kapital
                    aku, ii, aku aku aku	Romawi rendah	Angka Romawi dengan huruf kecil
                    Saya, II, III	Romawi Atas	Angka Romawi dengan huruf kapital

                    Contoh: Menerapkan Properti CSS tipe gaya daftar

                    Daftar berpoin

                    Daftar berpoin pada dasarnya mirip dengan daftar bernomor, hanya saja daftar tersebut tidak berisi penomoran item secara berurutan. Daftar berpoin dibuat menggunakan elemen blok

                    (dari Daftar Tidak Berurutan Bahasa Inggris - daftar tidak bernomor). Setiap elemen daftar, seperti dalam daftar bernomor, dimulai dengan sebuah tag
                    • . Browser mengindentasi setiap item daftar dan secara otomatis menampilkan poin-poin.
                      Menandai
                      memiliki sintaks berikut:
                      • Poin pertama
                      • Poin kedua
                      • Poin ketiga

                      Dalam contoh berikut, Anda dapat melihat bahwa, secara default, penanda kecil berbentuk lingkaran terisi ditambahkan sebelum setiap item daftar:

                      Di dalam tag

                      • Tidak perlu menempatkan teks saja; dapat diterima untuk menempatkan elemen konten streaming apa pun (tautan, paragraf, gambar, dll.)

                        Daftar Bersarang

                        Daftar apa pun dapat disarangkan ke dalam daftar lain. Di dalam sebuah elemen
                      • Dibolehkan membuat daftar bertingkat atau daftar tingkat kedua. Untuk menyusun daftar, jelaskan daftar baru di dalam elemen
                      • daftar yang sudah ada. Saat Anda menyarangkan satu daftar poin ke daftar lainnya, browser secara otomatis mengubah gaya poin untuk daftar tingkat kedua. Daftar apa pun dapat disarangkan ke dalam daftar lain. Contoh berikut menunjukkan struktur daftar berpoin yang disarangkan dalam item kedua dari daftar bernomor.

                        Contoh: Daftar Bersarang

                        • Cobalah sendiri "
                        • Senin
                          1. Kirim email
                          2. Kunjungan ke editor
                             • Memilih tema
                             • Desain dekoratif
                             • Laporan akhir
                          3. Melihat pesan di malam hari
                        • Selasa
                          1. Revisi jadwal
                          2. Kirim gambar
                        • Rabu...
                        • Senin
                          1. Kirim email
                          2. Kunjungan ke editor
                             • Memilih tema
                             • Desain dekoratif
                             • Laporan akhir
                          3. Melihat pesan di malam hari
                        • Selasa
                          1. Revisi jadwal
                          2. Kirim gambar
                        • Rabu...

                        Memformat Daftar Berpoin

                        Untuk mengubah tampilan penanda daftar, Anda harus menggunakan properti tipe gaya daftar Lembar gaya CSS:

                        Contoh berikut memperlihatkan gaya daftar berpoin yang berbeda:

                        Contoh: Gaya Daftar Poin

                        • Cobalah sendiri "
                        • Kopi
                        • Kopi
                        • Kopi
                        • Kopi

                        Cakram:

                        • Kopi
                        • susu

                        Lingkaran:

                        • Kopi
                        • susu

                        Persegi:

                        • Kopi
                        • susu

                        Tidak ada:

                        • Kopi
                        • susu

                        Penanda grafis.

                        Dalam HTML dimungkinkan untuk membuat daftar dengan penanda grafis. Jika penanda daftar berbentuk lingkaran atau kotak standar adalah satu hal, dan lain lagi jika pengembang sendiri yang memilih penanda sesuai dengan desain halaman. Untuk mempercantik item daftar, gambar kecil sering digunakan.
                        Untuk mengganti penanda biasa dengan penanda grafis, ganti propertinya tipe gaya daftar per properti gambar gaya daftar dan tunjukkan URL gambar:

                        Contoh: Penanda Grafis

                        • Cobalah sendiri "

                        lambang Zodiak

                        • Taurus
                        • Gemini

                        lambang Zodiak

                        • Aries
                        • Taurus
                        • Gemini

                        Daftar definisi (deskripsi)

                        Daftar definisi sangat berguna untuk membuat, misalnya, kamus istilah pribadi Anda. Setiap item daftar definisi memiliki dua bagian: istilah dan definisinya.
                        Anda memasukkan seluruh daftar ke dalam sebuah elemen

                        (dari Daftar Definisi Bahasa Inggris - daftar definisi). Ini termasuk tag

                        (dari Istilah Definisi Bahasa Inggris - kata tertentu, istilah) dan

                        (dari Deskripsi Definisi Bahasa Inggris - deskripsi istilah yang didefinisikan).
                        Daftar definisi sering digunakan dalam publikasi ilmiah, teknis dan pendidikan, menggunakannya untuk menyusun glosarium, kamus, buku referensi, dll.

                        Struktur umum daftar uraiannya adalah sebagai berikut:

                        Istilah pertama

                        Deskripsi istilah pertama

                        Istilah kedua

                        Deskripsi istilah kedua

                        Contoh berikut menunjukkan satu kemungkinan penggunaan daftar definisi:

                        Contoh: Daftar Definisi

                        • Cobalah sendiri "

                        World Wide Web - dari bahasa Inggris. World Wide Web (WWW) adalah sistem terdistribusi yang menyediakan akses ke dokumen terkait yang terletak di komputer berbeda yang terhubung ke Internet. Internet adalah sekumpulan jaringan yang menggunakan protokol pertukaran tunggal untuk mengirimkan informasi. Situs web adalah sekumpulan halaman web individual yang saling berhubungan melalui tautan dan desain yang seragam.

                        Web di Seluruh Dunia

                        - dari bahasa Inggris World Wide Web (WWW) adalah sistem terdistribusi yang menyediakan akses ke dokumen terkait yang terletak di komputer berbeda yang terhubung ke Internet.

                        Internet

                        — sekumpulan jaringan yang menggunakan protokol pertukaran tunggal untuk mengirimkan informasi.

                        Situs web

                        - sekumpulan halaman web individual yang saling berhubungan melalui tautan dan desain yang seragam.

                        Secara default, teks istilah ditekan ke tepi kiri jendela browser, dan deskripsi istilah terletak di bawah dan digeser ke kanan.

                        Dengan menggunakan daftar HTML, Anda dapat membuat menu untuk situs Anda dengan item dan sub-item yang berbeda. Dengan menggunakan daftar, konten (peta) situs dibuat, yang sangat nyaman bagi mesin pencari.

                        Jadi, ada tag "" - tag tersebut menentukan daftar berpoin.
                        Tag "" – mendefinisikan item, yaitu elemen daftar berpoin.

                        Pertama, mari buat daftar sederhana yang terdiri dari beberapa item:

                        <html> <kepala > <judul > Daftar poin HTML sederhanajudul > kepala > <tubuh > <jalan > <li> Satuli> <li> Duali> <li> Tigali> <li> Empatli> jalan > tubuh > html>

                        • Tiga

                        Untuk penandaan html, Anda dapat mengatur beberapa jenis yang tertulis di dalamnya
                        tanda pertama"

                        "V mengetik=" "

                        Mari kita buat daftar di mana alih-alih titik akan ada lingkaran kecil (titik tertusuk). Tipe ini disebut " lingkaran"

                        <html> <kepala > <judul > Daftar poin HTMLjudul > kepala > <tubuh > <tipe ul= "lingkaran"> <li> Satuli> <li> Duali> <li> Tigali> <li> Empatli> jalan > tubuh > html>
                        • Empat

                        Sekarang, alih-alih tipe "lingkaran", mari kita atur "tipe" persegi" (kotak)

                        <html> <kepala > <judul > Daftar poin HTMLjudul > kepala > <tubuh > <tipe ul= "persegi"> <li> einli> <li> zweili> <li> dreili> <li> vierli> jalan > tubuh > html>

                        Pelajaran CSS mencakup bekerja dengan daftar secara detail, dari mana Anda dapat mempelajari cara mengatur warna untuk item dan teks di dalamnya, serta cara mengatur jenis penanda itu sendiri (tidak hanya berupa persegi
                        atau titik - bisa berupa simbol apa pun).

                        
                        

                        Daftar bernomor html

                        Daftar tidak hanya dapat diberi label, tetapi juga diberi nomor, karena terkadang hal ini diperlukan. Ini bisa berupa angka (1, 2, 3...) Dan huruf alfabet Inggris dalam huruf kecil dan besar. Pertimbangkan semua yang dijelaskan di atas.

                        Untuk mengatur penomoran, tag "" digunakan.
                        Jenisnya ditentukan di dalam tag pertama.

                        Penomoran berdasarkan angka (dari satu)

                        <html> <kepala > <judul > HTML daftar bernomorjudul > kepala > <tubuh > <o> <li> Sekalili> <li> Duali> <li> Tigali> <li> Empatli> o> tubuh > html>
                        1. Empat

                        Jika Anda ingin penomoran dimulai dari nol (nol) atau dari tiga, misalnya, maka Anda perlu menulis tag di bagian pertama mulai=" " dan nomor yang diperlukan.

                        <html> <kepala > <judul > HTML daftar bernomorjudul > kepala > <tubuh > <ol mulai= "0" > <li> nolli> <li> satuli> <li> duali> <li> tigali> o> tubuh > html>

                        Sekarang mari kita lihat cara mengatur "penomoran huruf".

                        Dalam huruf kecil:

                        <html> <kepala > <judul > Daftar bernomor htmljudul > kepala > <tubuh > <tipe lama= "A"> <li> Air raksali> <li> Venusli> <li> Bumili> <li> Marsli> o> tubuh > html>
                        1. Air raksa
                        2. Venus
                        3. Bumi

                        Dalam huruf besar:

                        <html> <kepala > <judul > Daftar HTML bernomorjudul > kepala > <tubuh > <tipe lama= "A"> <li> Jupiterli> <li> Saturnusli> <li> Uranusli> <li> Neptunusli> <li><b> Plutob>li> o> tubuh > html>
                        1. Jupiter
                        2. Saturnus
                        3. Neptunus
                        4. Pluto

                        Selain daftar biasa di html, Anda dapat membuat daftar bertingkat, yaitu subbagian untuk item tertentu. Untuk melakukan ini, setelah tag dan judul "

                        • judul "masukkan daftar lain lalu tutup dengan tag kedua"
                        "
                        <html> <kepala > <judul > HTML daftar bertingkatjudul > kepala > <tubuh > <tipe ul= "persegi" > <li> Biolali> <li> Gitar<jalan > <li> klasikli> <li> gitar ritmeli> <li> gitar elektrikli> jalan > li> <li> Drumli> <li> Dudochkali> jalan > tubuh > html>
                        • Biola
                        • Gitar
                          • klasik
                          • gitar ritme
                          • gitar elektrik
                        • Drum
                        • Dudochka

                        Pelajaran selanjutnya akan membahas cara membuat menu sederhana berdasarkan pengetahuan yang diperoleh dari pelajaran ini.

                        Selamat tinggal!

                        Dalam artikel ini, Anda akan mempelajari semua kemungkinan daftar, memahami cara membuat daftar bernomor, dan tag master yang akan membantu Anda mengubah daftar berpoin sederhana menjadi lebih menarik dan terlihat dengan poin-poin yang berubah-ubah. Setelah menyelesaikan pelajaran, Anda akan memahami di mana daftar digunakan dan dalam keadaan apa daftar tersebut dapat digunakan.

                        Artikel ini adalah yang ketiga dalam kursus singkat tentang dasar-dasar HTML. Sebelum membaca pelajaran ini, saya sarankan untuk membaca dua pelajaran sebelumnya:

                        Artikel ini baru saja dimulai, dan Anda sudah dapat melihat penggunaan daftar poin standar. Di website saya tampilannya cukup sederhana: di sebelah kiri ada lekukan kecil dengan garis dan spidol persegi. Nanti di artikel kita akan melihat secara detail apa saja jenis-jenis spidol, cara membuat angka, dan juga cara membuat spidol sendiri.

                        Pada setiap bagian artikel, pembuatan daftar tertentu akan disertai dengan penjelasan detail untuk memasukkan daftar tertentu.

                        1. Daftar berpoin dalam HTML

                        Jenis daftar ini digunakan untuk membuat daftar dalam teks sekumpulan elemen yang memiliki kesamaan makna. Ini bisa berupa daftar link yang terkait dengan topik yang sama, penjelasan rinci untuk setiap bagian teks. Tapi mari kita lihat seperti apa daftar poin dalam kode:

                        Dan ini tampilannya di browser:

                        Beras. 1.1. Tampilan standar daftar tak berurutan berpoin HTML di browser

                        1.1 Poin standar untuk daftar poin

                        Pada gambar di atas (Gambar 1.1.) Anda dapat melihat lingkaran di awal setiap item menu. Ini adalah penandanya. Secara default, ini muncul sebagai lingkaran penuh di browser. Ada beberapa jenis penanda dalam HTML: lingkaran terisi, lingkaran kosong, dan persegi. Mereka tidak memerlukan CSS atau gambar pihak ketiga apa pun:

                        1.2 Daftar penanda berbentuk lingkaran kosong

                        Anda tahu nilai atributnya, tapi sekarang mari kita lihat cara membuat daftar poin HTML dalam kode. Dari tabel di atas, kami memilih nilai kedua "lingkaran" untuk atribut type dan menetapkannya ke daftar poin kami:

                        <html> <kepala > <judul > Contoh daftar berpoin dengan penanda lingkaran kosong</judul> </kepala> <tubuh > <hal> Bintang:</p> <ul ketik = "lingkaran" > <li> Sirius</li> <li> Arcturus</li> <li> polusi</li> <li> Betelgeuse</li> <li> Matahari</li> </ul> </tubuh> </html>

                        Mari kita segera lihat bagaimana tampilan kode ini di browser:

                        Beras. 1.2. Tampilan penanda daftar sebagai lingkaran di browser

                        1.3 Daftar penanda berbentuk persegi

                        Mari kita lihat juga contoh terakhir dengan penanda persegi untuk daftar HTML:

                        Perhatikan penandanya, itu menjadi persegi:

                        Beras. 1.3. Tampilan penanda daftar sebagai persegi di browser

                        Catatan penting: Metode ini tidak lagi digunakan untuk membuat gaya daftar berpoin. Ada pemisahan yang jelas antara CSS (baca apa itu CSS) dan HTML. HTML untuk markup dan CSS untuk membuat tampilan menarik.

                        Kode yang berisi atribut ini ketika menentukan jenis dokumen saat ini sebagai HTML5 (""), akan memberikan error saat validasi. Jika Anda belum pernah mendengar apa itu validasi, maka inilah tempat yang tepat untuk Anda.

                        Kesalahannya adalah sebagai berikut:

                        Beras. 1.4. Kesalahan pada validator saat menggunakan atribut "type" pada daftar

                        Kami telah memilah daftar poinnya. Sekarang mari beralih ke daftar bernomor, lalu pertimbangkan daftar bersarang dan beberapa contoh siap pakai yang paling sering digunakan di situs nyata.

                        2. Daftar bernomor dalam HTML

                        Berbeda dengan jenis daftar sebelumnya, daftar bernomor memiliki satu fitur penting: daftar diberi nomor secara otomatis. Ini berguna ketika Anda perlu memberi nomor pada daftar yang besar. Melakukannya secara manual akan memakan banyak waktu dan Anda masih bisa kebingungan. Daftar bernomor ditentukan menggunakan tag. Seperti apa dalam praktiknya:

                        Contoh daftar bernomor:

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

                        <html> <kepala > <judul > Contoh daftar bernomor standar</judul> </kepala> <tubuh > <hal> Dari satu sampai lima:</p> <o> <li> Pertama</li> <li> Kedua</li> <li> Ketiga</li> <li> Keempat</li> <li> Kelima</li> </ol> </tubuh> </html>

                        Ini adalah tampilan daftar bernomor dengan pengaturan browser standar:

                        Beras. 2.1. Daftar bernomor di browser dengan pengaturan standar

                        Seperti pendahulunya (daftar peluru), ia memiliki gaya tersendiri dalam menampilkan angka. Penomoran biasa bukan satu-satunya jenis poin untuk daftar bernomor dalam HTML.

                        2.1 Poin standar untuk daftar bernomor

                        Di sini kita mempunyai pilihan bukan dari tiga jenis penanda, tetapi dari lima:

                        Nama penanda	nilai atribut "tipe".	Daftar Contoh
                        Penanda berupa angka arab	1	Bulu tangkis Baseball
                        Penanda berupa huruf latin kecil	A	Chomolungma Chogori Kanchenjunga
                        Penanda berupa huruf latin kapital	A	Puncak Turun gang tantrum Gila
                        Penanda angka Romawi huruf kecil	Saya	Laut Filipina Laut arab laut karang
                        Penanda angka Romawi huruf besar	SAYA	Merah Hijau Biru

                        2.2 Penomoran sendiri dalam daftar HTML

                        Selain keluaran biasa dari daftar bernomor, kita juga dapat memulai penomoran dari nomor mana saja. Untuk melakukan ini, Anda perlu mengatur atribut tambahan "mulai" . Penomoran ini berfungsi pada semua jenis penanda untuk daftar bernomor. Seperti apa dalam praktiknya:

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

                        <html> <kepala > <judul > Penomoran khusus untuk daftar bernomor</judul> </kepala> <tubuh > <hal> Kami mulai memberi nomor dari dua belas:</p> <ol ketik = "a" mulai = "12" > <li> Dua belas</li> <li> Tigabelas</li> <li> Empat belas</li> <li> Limabelas</li> <li> Enambelas</li> </ol> </tubuh> </html>

                        Berikut tampilannya di situs sebenarnya:

                        Beras. 2.2. Penomoran dari nomor sembarang dalam daftar bernomor

                        Pada gambar di atas, daftarnya kita beri nomor mulai dari dua belas, sambil membuat penanda berupa huruf latin kecil. Sekarang, menurut saya, sudah jelas bagaimana menggunakan atribut ini dalam proyek Anda.

                        Nah, sekarang mari beralih ke daftar HTML bersarang.

                        3. Cara membuat daftar bertingkat (bersarang) dalam HTML

                        Daftar bertingkat digunakan di situs untuk membuat menu. Menu ini paling sering muncul dalam bentuk menu drop-down ke bawah (pelajaran tentang) atau menu drop-down ke kiri atau kanan. Menu tersebut memungkinkan Anda menyimpan elemen menu lainnya dalam bentuk yang ringkas.

                        Dengan menggunakan model mobil sebagai contoh, kita akan membuat daftar bertingkat dalam HTML:

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

                        <html> <kepala > <judul > Daftar Poin Bersarang HTML</judul> </kepala> <tubuh > <jalan > <li> Citroen<jalan > <li> Berlingo</li> <li> C1</li> <li> C2</li> <li> C3 Picasso</li> <li> C4 Agung Picasso</li> </ul> </li> <li> KIA</li> <li> Toyota</li> <li> Audi</li> <li> Lexus</li> </ul> </tubuh> </html>

                        Perhatikan tampilan daftar multi-level di browser:

                        Beras. 3.1. Contoh daftar bertingkat dalam HTML

                        Kami membuat daftar bertingkat menggunakan poin (tag

                        ). Daftar multi-level dengan model Citroen muncul dengan penanda lain. Daftar utama telah mengisi poin-poin, dan daftar tingkat ke-2 memiliki lingkaran kosong. Namun, seperti yang Anda ingat, dengan menggunakan atribut “type” kita dapat mendefinisikan ulang penanda (lebih baik disetel ).

                        Namun kita dapat menggabungkan daftar bertingkat dengan daftar bernomor dan berpoin seperti ini:

                        1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

                        <html> <kepala > <judul > Daftar bernomor, berpoin, dan bertingkat dalam HTML</judul> </kepala> <tubuh > <jalan > <li> Kelompok tulip pertama<o> <li> Kelas satu<jalan > <li> Tulip awal yang sederhana</li> </ul> </li> <li> Kelas kedua<jalan > <li> Tulip terry</li> </ul> </li> </ol> </li> </ul> </tubuh> </html>

                        Pada contoh di atas kita memiliki sarang ganda (2 level). Pertama, daftar dua kelas tulip disertakan; Kemudian daftar berpoin disarangkan dalam masing-masing item dalam daftar bernomor.

                        Mari kita lihat tampilannya di browser:

                        Beras. 3.2. Contoh daftar bernomor bertingkat hingga daftar berpoin di browser

                        4. Materi bermanfaat tentang daftar HTML

                        Ini adalah informasi yang memerlukan pemahaman tentang properti CSS. Untuk melakukan ini, saya sarankan mempelajari pelajaran berikut: . Semua contoh akan langsung disertakan dengan kode sumber dan dibagi menjadi tab HTML (struktur), CSS (gaya) dan Hasil (hasil).

                        4.1 Cara membuat daftar HTML menjadi string

                        Mengonversi daftar HTML menjadi string mungkin diperlukan saat membuat menu horizontal. Ini sangat mudah dilakukan:

                        4.2 Cara membuat daftar HTML tanpa ikon

                        Properti tipe gaya daftar di CSS bertanggung jawab untuk ini (detail lebih lanjut):

                        4.3 Cara memusatkan daftar dalam HTML

                        Item daftar adalah elemen blok, sehingga perlu dipusatkan menggunakan padding. Namun ada satu poin penting - kita harus secara eksplisit menentukan lebar agar penyelarasan berfungsi:

                        4.4 Cara membuat daftar dalam HTML dengan gambar

                        Hanya satu properti CSS, list-style-image , sudah cukup. Di dalam url, tentukan alamat sebelum ikon. Saya hanya ingin mencatat bahwa lebih baik segera memilih gambar kecil, karena ketinggian garis daftar bergantung padanya:

                        4.5 Daftar berpoin HTML poin Anda

                        Dalam hal ini, Anda perlu menghubungkan ikon font terlebih dahulu (misalnya, FontAwesome ). Kemudian Anda dapat membuat ikon apa pun selain penanda standar:

                        4.6 Cara membuat daftar dalam HTML dalam beberapa kolom

                        Untuk membuat daftar dalam beberapa kolom, kita akan menggunakan properti jumlah kolom CSS (properti ini hanya didukung di browser berikut: IE 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). Anda juga perlu mengatur tinggi daftar untuk melihat pembagian menjadi beberapa kolom:

                        5. Berlatih bekerja dengan daftar

                        Dalam video di bawah ini Anda dapat melihat semua pekerjaan dengan daftar HTML dalam praktiknya:

                        Untuk mengkonsolidasikan informasi yang diterima, saya sarankan melakukan semua langkah secara manual. Cobalah poin-poin berbeda untuk daftar, buat daftar bernomor, lalu lanjutkan ke daftar bertingkat (bersarang) dan bereksperimenlah dengannya.

                        Di sinilah kita menyelesaikan daftarnya dan melanjutkan ke pelajaran berikutnya tentang gambar.

                        Berlatih lebih banyak!

                        Pelajaran 3. Cara membuat daftar dalam HTML 4.91 /5 (98.26%) 23 suara