Cara membuat daftar berpoin di html. Daftar berpoin. Materi yang berguna tentang daftar HTML

Ada dua jenis daftar dalam HTML: bernomor dan tidak bernomor. Ciptaan mereka hampir sama. Bahkan tagnya berbeda satu karakter. Anda juga dapat membuat yang dapat menyertakan nomor dan penanda.

Daftar ini dapat diubah sesuka Anda. Itu semua tergantung pada imajinasi Anda. Pertama, kita akan melihat daftar standar, sama seperti di editor Word, dan kemudian kita akan memperbaikinya dan mendesainnya hingga tidak bisa dikenali lagi.

Daftar Bernomor HTML

Nomor biasa dapat dibuat menggunakan tag berikut:

Item daftar pertama

Item daftar kedua

Item ketiga dalam daftar

Daftar sederhana terlihat seperti ini

Menurut standar, setiap item daftar harus berada di dalam tag li pembuka dan penutup. Namun jika tidak diberi tag penutup, hasilnya akan sama persis. Prosesornya cukup pintar. Selama konversi daftar, itu mem-parsing tag pembuka. Jika dia melihat yang baru

, lalu secara otomatis menempatkannya di depannya

Dengan demikian, daftar dapat dibuat seperti gambar di bawah ini.

Namun dari sudut pandang para profesional, ini tidak benar.

Daftar tak bernomor (atau poin) dibuat dengan cara yang sama, hanya saja alih-alih menggunakan tag ol, ul ditulis.

Tidak ada angka atau huruf yang ada hanya berbagai simbol yang disebut spidol.

Daftar bernomor multi-level HTML

Banyak pengguna yang tertarik dengan peluang ini. Oleh karena itu, perlu dicatat bahwa daftar bernomor HTML apa pun dapat dibuat bertingkat. Level tambahan mungkin sama atau diberi label.

Untuk membuat daftar yang ditunjukkan pada contoh di atas, Anda perlu menulis yang berikut ini.

Harap dicatat bahwa dalam kode ini, tidak seperti contoh pertama, atribut type ditambahkan. Berkat itu, Anda dapat menentukan jenis pengurutan untuk daftar bernomor dan berpoin.

Untuk yang bernomor kami menunjukkan alfabet atau jenis angka, dan untuk kasus lain - jenis penanda.

Jika Anda menggunakan tag HTML khusus, daftar bernomor bisa menjadi apa pun yang Anda inginkan.

Anda dapat menentukan atribut type dengan nilai apa pun dari tabel. Atau di kelas gaya css, tentukan tipe gaya daftar dengan tipe pengurutan yang diinginkan.

Penerjemahan nilai cukup sederhana. Pengetahuan dasar bahasa Inggris sudah cukup. Tetapi bahkan jika Anda tidak dapat menerjemahkan kata "lingkaran", "persegi", dll., Anda dapat memahami secara visual apa hasilnya ketika menentukan nilai-nilai ini dalam atribut type.

Untuk daftar bernomor, gunakan opsi berikut:

1 - angka Arab;
A - huruf kapital;
a - huruf Latin kecil;
I - angka Romawi kapital;
i - angka Romawi huruf kecil.

Defaultnya selalu berupa daftar dengan Artinya, jika Anda tidak menentukan apa pun, sama saja dengan type="1".

Selain itu, daftar bernomor dapat dimulai dari posisi mana pun yang diinginkan. Secara default, output dimulai dari 1. Namun jika diinginkan, Anda dapat memulai setidaknya dari seratus. Untuk melakukan ini, Anda perlu menentukan atribut awal dengan nilai apa pun.

Selain itu, Anda dapat menarik kesimpulan dalam urutan terbalik. Untuk melakukan ini, Anda perlu menulis terbalik.

Desain daftar

Daftar bernomor HTML dapat dirancang dengan sangat indah sehingga Anda mungkin tidak langsung menyadari bahwa ini adalah daftar biasa dan bukan gambar yang dibuat di Photoshop.

Berikut adalah contoh daftar yang indah.

Seperti yang dapat dilihat dari contoh, Anda dapat mengubah tampilan penomoran dan elemen itu sendiri.

Anda dapat membuat daftar reguler seperti ini.

Dalam gaya css Anda perlu menentukan desain untuk tag ol. Harap dicatat bahwa dalam hal ini pengaturan akan diterapkan ke semua daftar di seluruh situs tempat file gaya ini digunakan.

Pertama mari kita pertimbangkan opsi dengan desain daftar bulat. Kembali ke kode daftar. Daftar bulat kelas ditunjukkan di sana. Ini adalah kelas yang perlu Anda otaki untuk menciptakan keindahan seperti itu. Anda dapat memberi nama kelas apa pun yang Anda inginkan.

Sekarang mari kita lihat desain persegi.

Gayanya sangat mirip. Perbedaannya adalah dalam kasus pertama, elemen dibulatkan menggunakan kemampuan CSS.

Seorang desainer tata letak profesional harus mengantisipasi dan memahami bahwa tidak semua pengguna menggunakan komputer modern. Tidak semua orang menginstal Windows 7, 8, 10. Ada persentase pengguna yang masih menggunakan Windows XP dan menggunakan browser Internet Explorer versi lama.

Biasanya, hampir semua peningkatan desain modern pada elemen tidak didukung olehnya. Bagi pengguna, tampaknya tidak ada pekerjaan yang dilakukan sama sekali pada desain situs. Bahwa segalanya telah menjauh. Elemen bertabrakan satu sama lain. Untuk menghindari hal ini, Anda perlu mempertimbangkan semua opsi.

Beberapa webmaster menutup mata terhadap mereka karena pangsa pasar modern mereka semakin mengecil. Namun bagi seorang profesional, setiap pengunjung itu penting, apalagi jika itu adalah situs komersial.

Buatlah sesuatu yang cocok untuk semua orang atau pertimbangkan semua variasi browser.

Daftar bernomor adalah kumpulan elemen dengan nomor serinya. Jenis dan tipe penomoran tergantung pada parameter elemen

Angka Arab (1, 2, 3, ...);
Angka arab dengan awalan nol untuk bilangan kurang dari sepuluh (01, 02, 03, ...,10);
huruf latin kapital (A, B, C, ...);
huruf latin kecil (a, b, c,…);
angka romawi huruf besar (I, II, III, ...);
angka romawi huruf kecil (i, ii, iii, ...);
penomoran Armenia;
Penomoran Georgia.

Dari sudut pandang praktis, prinsip menampilkan item dalam daftar berpoin dapat diterapkan dengan cara yang mirip dengan daftar bernomor. Namun mengingat kita berurusan dengan enumerasi, ada beberapa fitur yang akan dibahas lebih lanjut.

Penomoran daftar

Diperbolehkan memulai daftar dari nomor berapa pun; atribut awal elemen digunakan untuk tujuan ini

. Nilainya adalah bilangan bulat positif apa pun. Tidak masalah jenis penomoran apa yang ditetapkan, meskipun huruf Latin digunakan sebagai daftar. Jika atribut awal dan nilai diterapkan ke daftar pada saat yang sama, maka atribut nilai akan diutamakan dan penomoran ditampilkan dari angka yang ditentukan oleh nilai, seperti yang ditunjukkan pada Contoh 1.

Contoh 1: Mengubah penomoran daftar

Daftar

Anda harus menjaga tempat kerja Anda dengan baik.
Sesuaikan pencahayaan ruangan sehingga sumber cahaya terletak di samping atau di belakang operator.
Untuk menghindari komplikasi medis, disarankan memilih kursi dengan dudukan empuk.

Elemen pertama dari daftar dalam contoh ini akan dimulai dengan angka Romawi IV, karena atribut start="4" ditentukan, kemudian muncul nomor V, dan elemen terakhir keluar dari urutan dan diberi nomor X (Gambar 1).

Beras. 1. Angka Romawi dalam daftar

Menulis angka

Secara default, daftar bernomor memiliki tampilan tertentu: pertama ada angka, lalu titik, dan setelah itu teks ditampilkan dengan dipisahkan spasi. Bentuk penulisan ini bersifat visual dan nyaman, namun beberapa pengembang lebih suka melihat cara berbeda dalam merancang penomoran daftar. Yakni, agar alih-alih titik ada tanda kurung tutup, seperti terlihat pada Gambar. 2 atau sesuatu yang serupa.

Beras. 2. Tampilan daftar bernomor dengan tanda kurung

Gaya memungkinkan Anda mengubah jenis penomoran daftar menggunakan properti konten dan penghitung kenaikan. Pertama, pemilih ol perlu disetel ke counter-reset : item , ini diperlukan agar penomoran di setiap daftar baru dimulai dari awal. Jika tidak, penomoran akan berlanjut dan bukannya 1,2,3 Anda akan melihat 5,6,7. Nilai item adalah pengidentifikasi unik untuk penghitung, kami memilihnya sendiri. Selanjutnya, Anda perlu menyembunyikan penanda asli melalui properti gaya list-style-type dengan nilai none .

Properti content biasanya bekerja bersama dengan elemen semu ::after dan ::before. Jadi, konstruksi li::before mengatakan bahwa beberapa konten harus ditambahkan sebelum setiap elemen daftar (contoh 2).

Contoh 2. Membuat penomoran Anda sendiri

Li::sebelum ( isi: counter(item) ") "; /* Menambahkan tanda kurung pada angka */ counter-inrice: item; /* Menetapkan nama penghitung */ )

Properti konten dengan nilai counter(item) menampilkan angka; Dengan menambahkan tanda kurung, seperti yang ditunjukkan dalam contoh ini, kita mendapatkan jenis penomoran yang diperlukan. counter-increte diperlukan untuk menambah nomor daftar sebanyak satu. Perhatikan bahwa pengidentifikasi yang sama, bernama item , digunakan di seluruh bagian. Kode terakhir ditunjukkan pada Contoh 3.

Contoh 3: Mengubah tampilan daftar

Daftar

Pertama
Kedua
Ketiga
Keempat

Dengan menggunakan metode di atas, Anda dapat membuat semua jenis daftar bernomor, misalnya, memasukkan angka dalam tanda kurung siku, dalam hal ini hanya satu baris yang akan berubah gayanya.

Isi: "[" counter(item) "] ";

Daftar dengan huruf Rusia

Ada daftar bernomor dengan huruf Latin, tetapi tidak ada huruf Rusia untuk daftar tersebut. Mereka dapat ditambahkan secara artifisial menggunakan teknik di atas. Karena penomoran dilakukan melalui gaya, daftarnya sendiri tetap asli, hanya kelas yang dipilih yang ditambahkan ke dalamnya, sebut saja cyrilic (contoh 4).

Contoh 4: Kode untuk membuat daftar

Satu
Dua
Tiga

Menambahkan huruf dilakukan menggunakan elemen semu ::before dan properti konten. Karena setiap baris harus memiliki hurufnya sendiri, kita akan menggunakan kelas semu :nth-child(1) , dengan nomor huruf ditulis dalam tanda kurung. Huruf pertama tentu saja adalah A, huruf kedua adalah B, huruf ketiga adalah C, dan seterusnya. Seluruh himpunan ini ditambahkan ke pemilih li sebagai berikut (contoh 5).

Contoh 5: Menggunakan kelas semu: anak ke-n

Sirilik li:nth-child(1)::before ( isi: "a)"; ) .cyrilic li:nth-child(2)::before ( konten: "b)"; ) .cyrilic li:nth-child(3)::before ( konten: "at)"; )

Dalam contoh ini, setiap huruf diikuti tanda kurung, semua huruf menggunakan huruf kecil. Anda dapat menentukan jenis penomoran daftar Anda sendiri, misalnya dapat berisi huruf kapital dengan titik, dengan satu atau dua tanda kurung, atau huruf saja. Berbeda dengan penomoran standar, kita bebas melakukan apapun yang kita inginkan di sini. Daftar sepuluh huruf seharusnya cukup untuk hampir semua situasi, tetapi jika ini tiba-tiba ternyata tidak cukup, tidak ada yang menghalangi kami untuk memperluas daftar kami dengan memasukkan setidaknya semua huruf alfabet Rusia.

Kami akhirnya menyesuaikan perataan dan posisi huruf, secara opsional menentukan ukuran font, warna dan parameter lainnya (contoh 6).

Contoh 6. Daftar dengan huruf Rusia

Daftar

Borscht
Potongan daging tombak
Kulebyaka
Jamur dalam krim asam
Pancake dengan kaviar
kvass

Hasil dari contoh ini ditunjukkan pada Gambar. 3.

Dalam bahasa markup HTML, ada 3 jenis daftar - daftar berurutan (bernomor), tidak berurutan (tidak bernomor), dan daftar definisi.

Untuk membuat daftar seperti itu, Anda memerlukan 2 jenis elemen: 'ul' (kependekan dari daftar tidak berurutan, yaitu daftar tidak berurutan) dan 'li' (elemen daftar). Segala sesuatu yang tertulis di dalam 'li' ditandai dengan spidol.

Kemunculan daftar tersebut dapat dikontrol dengan menentukan jenis penanda.

Jenis penanda

Ada atribut tipe khusus yang ditempatkan di kedua elemen daftar. Ini adalah jenis penanda Anda. Hanya ada 3 jenis: lingkaran, cakram, dan persegi:

Bergantung pada tempat Anda menentukan jenis penanda, Anda dapat mengubahnya untuk seluruh daftar atau untuk elemen tertentu.

Daftar pesanan

Untuk membuat daftar, Anda juga memerlukan 2 elemen: 'ol' dan 'li' (elemen daftar). Penanda diganti dengan angka dengan titik. Contoh daftar sederhana:

elemen pertama
elemen kedua
elemen terakhir

Anda dapat mengontrol tampilan daftar yang diurutkan dengan menentukan jenis penomoran yang berbeda.

Jenis penomoran

Ada atribut tipe khusus yang ditempatkan di elemen 'ol' atau 'li'. Ini adalah tipe daftar Anda. Total ada 5 jenis:

Tergantung di mana Anda menentukan jenis penomoran, Anda dapat mengubahnya untuk seluruh daftar atau untuk elemen tertentu.

Daftar definisi

Daftar definisi telah dikembangkan untuk entri kamus.

Ada wadah umum 'dl'. Di dalamnya terdapat 'dt' (termin definisi) dan 'dd' (deskripsi definisi). Contoh paling sederhana:

Departemen pemasaran: Departemen ini bergerak dalam bidang promosi barang dan jasa
Departemen Keuangan: Departemen ini menangani semua transaksi keuangan

Semua elemen dari semua daftar adalah elemen blok. Namun hanya elemen inline yang dapat ditempatkan di dalam elemen 'dt'. Anda dapat memasukkan apapun yang Anda inginkan ke dalam elemen 'dd' dan 'li'. Dari sinilah daftar bersarang berasal.

Bersarang (daftar campuran)

Ini adalah daftar bertingkat, di dalamnya terdapat hierarki. Seringkali daftar seperti itu digunakan saat membuat peta situs. Contoh:

BERITA HARI INI: Hari ini hujan
Akan turun hujan sepanjang hari
BERITA MALAM INI

Akan turun hujan di malam hari
Besok hari baru akan dimulai
BERITA MALAM INI: Akan turun hujan di malam hari
Besok hari baru akan dimulai

daftar HTML digunakan untuk mengelompokkan informasi terkait. Ada tiga jenis daftar:

daftar berpoin —
- setiap elemen daftar
ditandai dengan spidol,
daftar bernomor —
- setiap elemen daftar
ditandai dengan nomor
daftar definisi- - terdiri dari pasangan suku
—
definisi.
Setiap daftar adalah wadah di mana elemen daftar atau pasangan definisi istilah berada. Elemen daftar berperilaku seperti elemen blok, ditumpuk di bawah satu sama lain dan menempati seluruh lebar blok kontainer. Setiap item daftar memiliki blok tambahan yang terletak di samping, yang tidak berpartisipasi dalam tata letak.

Membuat Daftar HTML

1. Daftar berpoin

Daftar berpoin adalah daftar yang tidak berurutan (dari Daftar Tidak Berurutan Bahasa Inggris). Dibuat menggunakan tag berpasangan
. Penanda elemen daftar adalah label, misalnya lingkaran terisi.
Browser secara default menambahkan format berikut ke blok daftar:
Setiap elemen daftar dibuat menggunakan tag berpasangan
(dari Item Daftar Bahasa Inggris).

tersedia .

Microsoft

Google

apel

Beras. 1. Daftar berpoin
2. Daftar bernomor

Daftar bernomor dibuat menggunakan tag berpasangan. Setiap item daftar juga dibuat menggunakan elemen
. Browser memberi nomor pada elemen secara otomatis, dan jika Anda menghapus satu atau lebih elemen dari daftar tersebut, nomor yang tersisa akan dihitung ulang secara otomatis.
Blok daftar juga memiliki gaya browser default:
Atribut nilai tersedia, yang memungkinkan Anda mengubah nomor default untuk item daftar yang dipilih. Misalnya, jika untuk item pertama dalam daftar yang Anda tetapkan
, maka sisa penomoran akan dihitung ulang relatif terhadap nilai baru.
Untuk tanda
Atribut berikut tersedia:
Tabel 1. Atribut tag

Atribut Deskripsi, nilai yang diterima
terbalik Atribut reversed menyebabkan daftar ditampilkan dalam urutan terbalik (misalnya, 9, 8, 7...).
awal Atribut start menentukan nilai awal dari mana penomoran akan dimulai, misalnya konstruksi
item pertama akan diberi nomor seri "10". Anda juga dapat menentukan jenis penomoran secara bersamaan, misalnya,
.

jenis Atribut type menentukan tipe penanda yang akan digunakan dalam daftar (huruf atau angka). Nilai yang diterima:
1 — nilai default, penomoran desimal.
A — penomoran daftar sesuai abjad, huruf kapital (A, B, C, D).
a — daftar penomoran menurut abjad, huruf kecil (a, b, c, d).
I - penomoran dengan angka kapital Romawi (I, II, III, IV).
i — penomoran dengan angka Romawi kecil (i, ii, iii, iv).

Microsoft

Google

apel

Beras. 2. Daftar bernomor
3. Daftar definisi

Daftar definisi dibuat menggunakan tag
. Untuk menambahkan istilah, gunakan tag
, dan untuk memasukkan definisi - tag
.

Blok daftar definisi memiliki gaya browser default berikut:
Untuk tag
,
Dan
tersedia .

Direktur:

Peter Tochilin

Pemeran:

Andrey Gaidulyan

Alexei Gavrilov

Vitaly Gogunsky

Mariya Kozhevnikova

Beras. 3. Daftar definisi
4. Daftar bersarang

Seringkali, kemampuan daftar sederhana saja tidak cukup, misalnya, saat membuat daftar isi, tidak ada cara untuk melakukannya tanpa item bersarang. Markup untuk daftar bersarang adalah sebagai berikut:

Paragraf 1.

Poin 2.

Subayat 2.1.

Subayat 2.2.

Subayat 2.2.1.

Subayat 2.2.2.

Subayat 2.3.

Poin 3.

Beras. 4. Daftar bersarang
5. Daftar bernomor bertingkat

Daftar bertingkat digunakan untuk menampilkan item daftar pada tingkat berbeda dengan lekukan berbeda. Markup untuk daftar bernomor bertingkat adalah sebagai berikut:

gugus kalimat

gugus kalimat

gugus kalimat

gugus kalimat

gugus kalimat

gugus kalimat

gugus kalimat

gugus kalimat

gugus kalimat

gugus kalimat

gugus kalimat

Markup default ini akan membuat penomoran baru untuk setiap daftar bertumpuk, dimulai dengan satu. Untuk membuat penomoran bertingkat, Anda perlu menggunakan properti berikut:
counter-reset me-reset satu atau lebih counter, menentukan nilai yang akan direset;
kenaikan tandingan menentukan nilai kenaikan tandingan, mis. berapa kenaikan setiap item berikutnya akan diberi nomor;
konten - konten yang dihasilkan, dalam hal ini bertanggung jawab untuk menampilkan nomor sebelum setiap item daftar.
Ol ( /* hapus penomoran standar */ gaya daftar: tidak ada; /* Identifikasi penghitung dan beri nama li. Nilai penghitung tidak ditentukan - secara default adalah 0 */ counter-reset: li; ) li :before ( /* Kita mendefinisikan elemen yang akan diberi nomor - li. Elemen semu sebelum menunjukkan bahwa konten yang disisipkan menggunakan properti konten akan ditempatkan sebelum item daftar. Di sini kita juga mengatur nilai kenaikan penghitung (default adalah 1). */ kontra-kenaikan: li; / * Properti konten menampilkan jumlah item daftar. counters() berarti teks yang dihasilkan mewakili nilai semua penghitung dengan nama itu. Tanda titik dalam tanda kutip menambahkan titik pemisah antar angka, dan titik dengan spasi ditambahkan sebelum konten setiap item daftar */ content: counters(li,".") "."; )
Beras. 5. Daftar bernomor bertingkat

Pembaruan terakhir: 04/08/2016

Daftar definisi adalah daftar yang berisi istilah dan definisi istilah tersebut. Dan mungkin ada banyak pasangan definisi istilah dalam daftar. Tag digunakan untuk membuat daftar definisi
Dan
. Elemen daftar ditempatkan di dalam tag ini.

Setiap elemen daftar terdiri dari istilah dan definisi. Istilah ini ditempatkan di tag
Dan
(dt adalah kependekan dari "istilah definisi"), dan definisinya ada dalam tag
Dan
(dd adalah kependekan dari "deskripsi definisi")

Mari kita pertimbangkan daftar definisi paling sederhana:
Daftar dalam HTML5

Ontologi

Cabang filsafat yang mempelajari prinsip-prinsip dasar keberadaan

Epistemologi

Disiplin filosofis berkaitan dengan penelitian, kritik dan teori pengetahuan

Hubungan produksi

Himpunan hubungan antar manusia yang berkembang dalam proses produksi sosial, pertukaran, dan distribusi barang dan jasa material.

Atribut	Deskripsi, nilai yang diterima
terbalik	Atribut reversed menyebabkan daftar ditampilkan dalam urutan terbalik (misalnya, 9, 8, 7...).
awal	Atribut start menentukan nilai awal dari mana penomoran akan dimulai, misalnya konstruksi item pertama akan diberi nomor seri "10". Anda juga dapat menentukan jenis penomoran secara bersamaan, misalnya, .
jenis	Atribut type menentukan tipe penanda yang akan digunakan dalam daftar (huruf atau angka). Nilai yang diterima: 1 — nilai default, penomoran desimal. A — penomoran daftar sesuai abjad, huruf kapital (A, B, C, D). a — daftar penomoran menurut abjad, huruf kecil (a, b, c, d). I - penomoran dengan angka kapital Romawi (I, II, III, IV). i — penomoran dengan angka Romawi kecil (i, ii, iii, iv).