HTML bahasa markup hypertext memiliki tag
- digunakan untuk membuat daftar berpoin. Ini didukung oleh semua orang browser modern dan memungkinkan Anda untuk menampilkan item dalam urutan yang tidak perlu penomoran. Misalnya, sangat sering menampilkan item menu dan segala sesuatu yang terkait dengan daftar di halaman: piring, produk, peralatan, peralatan, dan banyak lagi yang perlu dicantumkan tanpa menunjukkan prioritas item ini atau itu.
- Barang 1
- Barang #2
- Barang #3
- ...
- Barang 1
- Barang #2
- Barang #3
- Barang 1
-
- Item # 2-1
- Butir #2-2
- Item # 2-3
- Barang #3
- ...
- Barang 1
- Barang #2
- Barang 1
- Barang #2
- Barang 1
- Barang #2
- Barang 1
- Barang #2
- ...
- disc - penanda dalam bentuk lingkaran (contoh ada di atas)
- lingkaran - penanda berupa lingkaran transparan (contoh ada di atas)
- persegi - penanda dalam bentuk persegi (contohnya ada di atas)
- desimal - penanda dalam bentuk daftar bernomor dalam angka Arab: 1, 2, 3, ...
- desimal-depan-nol - penanda dalam bentuk daftar bernomor dalam angka Arab dengan nol di depan: 01, 02, 03, ...
- romawi bawah - penanda dalam bentuk daftar bernomor dalam alfabet Romawi dalam huruf kecil: i, ii, iii, iv, v
- upper-roman - peluru dalam bentuk daftar bernomor dalam alfabet Romawi dalam huruf besar: I, II, III, IV, V
- lower-latin - penanda dalam bentuk daftar dalam alfabet Latin dalam huruf kecil: a, b, c, d, ...
- atas-latin - penanda dalam bentuk daftar dalam alfabet Latin dalam huruf kapital: A, B, C, D, ...
- lower-greek - penanda dalam bentuk daftar dalam alfabet Yunani dalam huruf kecil
- upper-greek - penanda dalam bentuk daftar dalam alfabet Yunani dalam huruf kapital
- ... Saat menyetel atribut ke tag
- semua item daftar akan ditampilkan seperti yang ditunjukkan oleh atribut. Tapi kita bisa mengatur tampilan kita sendiri ke elemen ini atau itu. Contoh pada gambar:
- Barang 1
- Barang #2
- Barang #3
- Barang 1
- Barang #2
- Barang #3
- Barang 1
- Barang #2
- Barang #3
- Barang 1
- Barang #2
- Barang #3
- A - huruf latin kapital;
- a - huruf kecil Latin;
- I - angka Romawi kapital;
- i - angka Romawi huruf kecil;
- 1 - angka Arab
- 1 item dalam daftar bernomor
- 2 item dalam daftar bernomor
- 3 item dalam daftar bernomor
- 1 item dalam daftar bernomor
- 2 item dalam daftar bernomor
- 3 item dalam daftar bernomor
- 1 item dalam daftar bernomor
- 2 item dalam daftar bernomor
- 3 item dalam daftar bernomor
- 1 item dalam daftar bernomor
- 2 item dalam daftar bernomor
- 3 item dalam daftar bernomor
- 1 item dalam daftar bernomor
- 2 item dalam daftar bernomor
- 3 item dalam daftar bernomor
- 1 item dalam daftar bernomor
- 2 item dalam daftar bernomor
- 3 item dalam daftar bernomor
- 1 item dalam daftar bernomor
- 2 item dalam daftar bernomor
- 3 item dalam daftar bernomor
- 1 item dalam daftar bernomor
- 2 item dalam daftar bernomor
- 3 item dalam daftar bernomor
- 1 item dalam daftar bernomor
- 2 item dalam daftar bernomor
- 3 item dalam daftar bernomor
- ditandai dengan penanda,
daftar bernomor —- - setiap elemen dari daftar
- ditandai dengan angka,
daftar definisi- - terdiri dari pasangan suku- —
- definisi.
Setiap daftar adalah wadah yang berisi item daftar atau pasangan istilah-definisi. Item daftar berperilaku seperti elemen blok, menumpuk satu di bawah yang lain dan mengambil seluruh lebar blok kontainer. Setiap item daftar memiliki kotak tambahan di samping yang tidak berpartisipasi dalam tata letak.
Menghasilkan Daftar HTML
1. Daftar berpoin
Daftar berpoin adalah daftar yang tidak berurutan (dari English Unordered List)... Dibuat menggunakan tag berpasangan
... Penanda item daftar adalah label, misalnya, lingkaran yang diisi.Browser menambahkan pemformatan berikut ke kotak daftar secara default:
Setiap item daftar dibuat menggunakan tag pasangan
- (dari Item Daftar Bahasa Inggris).
- tersedia.
- Microsoft
- apel
Beras. 1. Daftar berpoin
2. Daftar bernomor
Daftar bernomor dibuat menggunakan tag berpasangan. Setiap item daftar juga dibuat menggunakan elemen
- ditandai dengan angka,
- ... Browser memberi nomor elemen secara otomatis, dan jika Anda menghapus satu atau lebih elemen dari daftar tersebut, sisa angka akan dihitung ulang secara otomatis.
Kotak daftar juga memiliki gaya peramban default:
- atribut value tersedia, yang memungkinkan Anda mengubah nomor default untuk item daftar yang dipilih. Misalnya, jika untuk item pertama dalam daftar yang Anda atur
- , maka sisa penomoran akan dihitung ulang relatif terhadap nilai baru.
Untuk tag
- atribut berikut tersedia:
- Microsoft
- apel
- dan
- tersedia.
- Direktur:
- Petr Tochilin
- Pemeran:
- Andrey Gaidulyan
- Alexey Gavrilov
- Vitaly Gogunsky
- Mariya Kozhevnikova
Beras. 3. Daftar definisi
4. Daftar bersarang
Seringkali kemampuan daftar sederhana tidak cukup, misalnya, saat membuat daftar isi, Anda tidak dapat 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 yang berbeda dengan indentasi yang 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 berbasis satu baru untuk setiap daftar bersarang. Untuk membuat penomoran bersarang, Anda perlu menggunakan properti berikut:
counter-reset mengatur ulang satu atau lebih penghitung, menetapkan nilai untuk mengatur ulang;
counter-increment menentukan nilai counter increment, mis. dengan langkah apa setiap item berikutnya akan diberi nomor;
konten adalah konten yang dihasilkan, dalam hal ini bertanggung jawab untuk menampilkan nomor sebelum setiap item dalam daftar.Ol (/ * hapus penomoran standar * / list-style: none; / * Identifikasi penghitung dan beri nama li. Nilai penghitung tidak ditentukan - secara default adalah 0 * / counter-reset: li;) li: sebelumnya (/ * Kami mendefinisikan elemen yang akan diberi nomor - li. Elemen semu sebelum menentukan bahwa konten yang disisipkan menggunakan properti konten akan ditempatkan sebelum item daftar. Ini juga menetapkan nilai kenaikan penghitung (default adalah 1). * / Counter-increment: li; / * Properti konten menampilkan jumlah penghitung item daftar () berarti teks yang dihasilkan adalah nilai dari semua penghitung dengan nama itu. Periode yang dikutip menambahkan periode pemisah antara angka, dan titik dengan spasi ditambahkan sebelum konten setiap item daftar * / konten: penghitung (li, ".") ".";)
Beras. 5. Daftar bernomor bertingkat
Tabel 1. Atribut Tag
Atribut Deskripsi, nilai yang diterima terbalik Atribut terbalik menentukan tampilan daftar dalam urutan terbalik (misalnya, 9, 8, 7 ...). Mulailah Atribut awal menentukan nilai awal, dari mana penomoran akan dimulai, misalnya, konstruksi - item pertama akan diberi nomor seri "10". Anda juga dapat mengatur jenis penomoran secara bersamaan, misalnya,
- .
Tipe Atribut type menentukan jenis penanda yang akan digunakan dalam daftar (sebagai huruf atau angka). Nilai yang diterima:
1 - nilai default, penomoran desimal.
A - penomoran daftar di Sesuai abjad, huruf kapital(A,B,C,D).
a - penomoran daftar dalam urutan abjad, huruf kecil (a, b, c, d).
I - penomoran dalam angka kapital Romawi (I, II, III, IV).
i - penomoran dalam angka huruf kecil Romawi (i, ii, iii, iv).3. Daftar definisi
Daftar Definisi dibuat menggunakan tag
Kotak daftar definisi memiliki gaya browser default berikut:
Untuk tag
- ,
- Paragraf
- jeda baris
- Daftar, dan daftar item
- Judul
- Penguasa horisontal
- Bulka
- Pai
- roti
- Pai
- Bulka
- Pai
- roti
- Pai
- Bulka
- Pai
- roti
- Pai
- Bulka
- Pai
- roti
- Pai
- Gergaji
- Obeng
- Lurus
- Menyeberang
- Mengebor
- , yang, selain teks, dapat menyertakan elemen HTML lainnya (daftar, gambar, judul, paragraf, dll.). Secara default, daftar berpoin ditampilkan di halaman web sebagai daftar yang dimulai dengan lingkaran hitam kecil. Browser menambahkan margin kecil ke kiri saat menampilkan item daftar.
Catatan: jika untuk
- terapan properti CSS, maka elemen
- mewarisi sifat-sifat ini.
Nasihat: Untuk mengubah tipe marker, gunakan properti CSS tipe list-style atau properti list-style-image untuk mengganti penanda dengan gambar. Untuk membuat daftar bernomor gunakan tag
- .
- ... ...
Sintaksis
Tag akhir
Yg dibutuhkan.
Atribut
compact Tidak digunakan lagi dalam HTML5 Mengurangi indentasi dan spasi baris. type HTML5 Mengatur tampilan penanda daftar.Tersedia untuk barang ini atribut global dan perkembangan.
Gaya default
Sebagian besar browser akan merender elemen
- dengan berikut ini nilai CSS bawaan:
- Kopi
- teh
- Biji cokelat
Ul (display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px;)
Perbedaan antara HTML 4.01 dan HTML5
Atribut kompak dan tipe tidak didukung di HTML5.
Contoh penggunaan:
Daftar HTML tidak berurutan:
Contoh HTML:
Cobalah sendiriSpesifikasi (edit)
Spesifikasi Status Standar Hidup HTML WHATWG (WHATWG) Standar hidup HTML 4.01 (W3C) Rekomendasi HTML5 (W3C) Rekomendasi HTML 5.1 (W3C) Rekomendasi Dukungan peramban
Cobalah sendiri - Contoh
Cara membuat daftar dimulai dengan angka selain 1.
- mewarisi sifat-sifat ini.
Kodenya terlihat seperti ini:
Mengubah penanda tag
- menggunakan CSS
Daftar Butir Item yang Dibuat oleh Tag
- , dapat ditandai dengan gambar arbitrer. CSS digunakan untuk mengubah jenis penanda. Sebagai contoh
Dan inilah tampilannya di halaman:
C menggunakan CSS kita dapat menentukan jenis tampilan penanda lainnya. Tetapi Anda harus ingat bahwa saat mengatur gaya apa pun untuk tag
- , ini berlaku untuk semua elemen daftar.
Halo pembaca yang budiman! Hari ini, sebagai kelanjutan dari rangkaian artikel di bawah judul "Dasar-dasar html", saya ingin memperkenalkan Anda dengan algoritme untuk membuat daftar html dengan bantuan tag ul dan li (daftar tidak berurutan), ol dan li (daftar bernomor), dl, dt, dd (daftar definisi).
Sekarang saya akan terus memperkenalkan Anda dengan tag html yang paling sering digunakan yang digunakan untuk membuat daftar di halaman situs. Jika ada yang belum mengetahui apa itu pasti setelah mendapatkan informasi di bawah ini, dia akan langsung mengerti tentang apa itu, karena bentuk penyajian materi ini sangat umum.
Daftar bullet HTML - tag ul dan li
Daftar bullet akan ditentukan oleh tag ul. Item daftar terletak di antara tag ul pembuka dan penutup, yang isinya masing-masing harus, pada gilirannya, ditempatkan di antara tag li pembuka dan penutup. Segera, saya perhatikan bahwa tag ul dipasangkan (adanya tag pembuka dan penutup), serta blok, yaitu membentuk wadah yang berisi elemen (string) yang dibentuk setiap kali oleh tag li. Dengan demikian, tag li dipasangkan dan huruf kecil.
Bawaan penampilan penanda diwakili oleh lingkaran penuh. Namun, Anda dapat mengubah tampilannya dengan menerapkan atribut type, yang memiliki nilai sebagai berikut: disc, circle, square. Nilai disk (yang menentukan tampilan penanda lingkaran yang diisi) adalah default. Artinya, jika atribut type tidak ditentukan, maka tampilan marker akan terlihat seperti lingkaran yang terisi. Jika kita menambahkan atribut ini ke tag ul, kita mendapatkan opsi berikut:
Secara alami, setiap penanda elemen individu Anda dapat menyesuaikan daftar berpoin dengan menentukan nilai yang sesuai untuk atribut type.
Daftar HTML bernomor - tag ol dan li
Sekarang mari kita lihat bagaimana daftar bernomor dibentuk menggunakan tag ol (tag blok dan berpasangan, mirip dengan ul). Tag li juga bertindak sebagai tag yang mendefinisikan elemen dari daftar html bernomor. Daftar bernomor adalah kumpulan item bernomor. Jenis penomoran ditentukan oleh atribut type, yang dapat mengambil nilai berikut:
Anda juga dapat memberikan daftar bernomor di mana item diberi nomor dalam urutan terbalik, misalnya: 3, 2, 1. Ini dilakukan dengan menggunakan atribut cadangan dari tag ol.
Dimungkinkan juga untuk memulai daftar berpoin dengan nomor lain selain 1. Untuk melakukan ini, Anda dapat menggunakan atribut start, dan sama sekali tidak masalah nilai atribut type apa yang ditetapkan. Lihat contoh penggunaan atribut name dalam hubungannya dengan nilai yang berbeda untuk atribut type (1 dan I):
Daftar definisi HTML - tag dl, dd, dt
Jenis lain dari daftar html adalah daftar definisi. Itu terbentuk sebagai berikut. Isi daftar ini diapit di antara tag dl pembuka dan penutup yang membentuk wadah. Tag dt mendefinisikan istilah, dan dd adalah deskripsi istilah itu.
Seperti yang Anda lihat, isi tag dt, yang merupakan istilah, digeser ke kiri, dan konten tag dd, yang merupakan definisi istilah ini, ditulis dengan huruf miring. Semua ini dicapai melalui penggunaan berbagai gaya css, yang pasti akan kita bicarakan di publikasi mendatang.
Omong-omong, realitas modern seperti itu bahasa html tidak dapat dilihat secara terpisah, jadi agar tidak ketinggalan materi penting ini, berlangganan pembaruan blog melalui umpan RSS atau email. Ini menyimpulkan topik artikel hari ini, jika Anda menerima informasi yang perlu, jangan menolak untuk menggunakan tombol media sosial.
daftar HTML digunakan untuk mengelompokkan potongan-potongan informasi yang terkait bersama-sama. Ada tiga jenis daftar:
daftar berpoin —
- - setiap elemen dari daftar
Mari kita lanjutkan percakapan kita tentang awal mula html. Pada artikel ini, saya ingin berbicara tentang cara membuat paragraf, daftar, dan judul dalam teks. Dan juga, tentang tag tunggal
dan
.Saya sangat menyarankan Anda untuk membaca pelajaran pertama dalam seri ini, serta artikel pengantar tentang memulai belajar html bagi mereka yang belum terbiasa dengannya.
Kami sekarang akan melanjutkan studi kami tentang tag. Saya akan berasumsi bahwa pembaca sudah akrab dengan materi artikel di atas.
Seperti biasa, rencana kerja:
Paragraf
Teks hampir selalu terdiri dari paragraf. Paragraf adalah unsur teks yang mengandung gagasan yang utuh.
V paragraf html, seperti yang dapat dinilai dari judul, ditunjukkan oleh. Huruf "p" diambil dari kata "paragraf", yang berarti "paragraf".
Mari kita pertimbangkan sebuah contoh:
Teks paragraf pertama. Ini berisi pemikiran. Tapi pikiran itu berakhir.
Pikiran lain telah dimulai dan kami menulisnya di paragraf lain.
Seperti yang Anda lihat, penerapan paragraf sangat sederhana dan tidak memerlukan komentar khusus. Jika kita melihat kode ini di browser, kita akan melihat dua baris dengan satu baris kosong di antaranya. Dalam teks-teks Rusia, merupakan kebiasaan untuk memisahkan paragraf bukan dengan baris kosong, tetapi dengan menggeser baris pertama ke kanan. Tetapi di Internet hanya pemformatan seperti itu yang sering digunakan, oleh karena itu sering juga ditinggalkan dalam teks berbahasa Rusia. Namun, jika perilaku ini tidak sesuai dengan Anda, Anda dapat mengubahnya menggunakan CSS.
jeda baris
Terkadang Anda perlu menerjemahkan satu baris tanpa mengakhiri pemikiran, tanpa menutup paragraf. Artinya, pergi saja ke garis baru... Ada satu tag untuk ini
... Berikut adalah contoh penerapannya:Angin berjalan riang
Dan perahu itu mendesak
Dia berlari ke dirinya sendiri dalam ombak
Dengan layar terangkat.Fragmen puisi karya A.S. Pushkin membantu kami mengilustrasikan tindakan tag
... Saya sengaja menempatkan dua baris terakhir dari kuatrain ini dalam satu baris kode untuk menunjukkan bahwa baris dibungkus pada baris baru bukan karena kami menempatkan jeda baris, tetapi karena kami menempatkan tag
... Tag ini sangat sederhana dan tidak membutuhkan penjelasan yang detail, maka disinilah kita akan selesai membahasnya.Daftar,
- ol>dan daftar item
Terkadang Anda perlu membuat daftar sesuatu dalam teks. Tiga tag digunakan untuk tujuan ini: ul, ol, li. Semua tag ini adalah tag penampung, tetapi tag selalu ada di salah satu wadah atau, dan tidak masuk akal di luarnya. Kontainer ul digunakan ketika kita tidak peduli dengan urutan item yang terdaftar, dan kita tidak ingin fokus pada urutan pengirimannya. Tag ol, di sisi lain, berfokus pada urutan elemen dengan secara otomatis memberi nomor setiap baris. Mari kita pertimbangkan sebuah contoh:
Pada layar browser, kode ini akan terlihat seperti ini:
Jika kita hanya mengganti tag ul dengan tag ol, kita mendapatkan daftar bernomor:
Sekarang terlihat seperti ini:
Tidak ada yang melarang bersarang satu daftar ke yang lain, membentuk daftar bersarang dengan sublist:
Instrumen:
Anda perlu sedikit bereksperimen dengan daftar ini agar terbiasa menggunakannya. Ada jenis daftar lain, tetapi jarang digunakan, jadi saya tidak akan membicarakannya sekarang. Mungkin di artikel lain.
Tentu saja, seperti yang lainnya, tampilan elemen ini dapat diubah tanpa bisa dikenali dengan CSS.
Judul
Tentu saja, paragraf membantu dalam menyusun dokumen. Tetapi untuk memecah teks besar menjadi bagian-bagian logis yang lebih kecil, Anda dapat memberi teks masing-masing. Setiap bagian dapat berisi lebih banyak subbagian, dengan judul tingkat yang lebih rendah, dan seterusnya. Untuk mengatur judul, gunakan tag
, di mana "x" adalah angka dari 1 hingga 6. Semakin tinggi angkanya, semakin rendah judulnya. Artinya, heading tingkat atas adalah h1, dan heading paling bawah adalah h6. Secara default, teks dalam judul ini ditampilkan dalam font besar dengan indentasi. Teks ini ditampilkan di seluruh baris, yaitu tag hx berbasis blok. Tag h1 memiliki font terbesar, dan tag h6 memiliki font terkecil. Sebagai aturan, ada satu, maksimum - dua tag h1 tingkat atas pada halaman. Saat level berkurang, jumlah tag meningkat. Tetapi jarang seorang webmaster dapat memecah teks sedemikian rupa sehingga ia membutuhkan 5 atau 6 judul. Bahkan level 4 jarang digunakan. Kurangi bicara, perbanyak bekerja!
Elemen
- (dari bahasa Inggris "daftar tidak berurutan" - "daftar tidak berurutan") membuat daftar tidak berurutan (tidak berurutan). Biasanya elemen
- itu digunakan untuk membuat daftar seperti itu, di mana mengubah urutan item dalam daftar ini tidak secara signifikan mengubah arti daftar.
Menandai
- mengacu pada elemen blok, sehingga akan mengambil seluruh lebar yang tersedia untuknya, dan ukuran tingginya akan tergantung pada jumlah konten.
Item untuk daftar bernomor ditentukan menggunakan tag
Sintaks tag
Kode ini diubah menjadi daftar berpoin di situs:
Menandai
- membutuhkan penggunaan wajib tag akhir
Tag berpasangan digunakan untuk membentuk item daftar. Di antara tag pembuka dan penutup terdapat kata, frasa, paragraf, gambar, potongan kode, dan banyak lagi, yang merupakan isi dari daftar berpoin.
Apa yang bisa menjadi isi dari daftar berpoin?Ini bisa berupa berbagai teks, termasuk satu kata, frasa dan paragraf, gambar, daftar bersarang, potongan kode php, dan banyak lagi yang membutuhkan pelabelan sederhana.
Setiap item daftar berpoin diindentasi 40 piksel ke kanan secara default. Menggunakan gaya CSS kita dapat mengubah tampilan dari daftar ini atas kebijaksanaan Anda sendiri. Menandai
- berbasis blok, sehingga menempati seluruh area yang tersedia, dibatasi oleh tepi layar, bingkai tabel, atau elemen halaman lainnya.
Lampiran daftar-dalam-daftar diperbolehkan
Sebagai contoh
Tandai atribut dan properti
Atribut tag yang banyak digunakan
- adalah atribut tipe yang menunjukkan bagaimana penanda daftar akan terlihat. Dapat mengambil nilai-nilai berikut:
1. ketik = "disk" - penanda dalam bentuk lingkaran yang diisi (nilai ini adalah default). Contoh disk tepat di atas.
2. ketik = "lingkaran" - penanda berbentuk lingkaran transparan
Sebagai contoh:
3.type = "persegi" - penanda dalam bentuk persegi
Sebagai contoh:
Dan inilah tampilannya di halaman:
Di CSS, tipe marker ditentukan menggunakan atribut list-style-type:
Mari kita pertimbangkan nilai apa yang dapat diambil oleh tipe-daftar:
Atribut dapat ditetapkan sebagai tag itu sendiri
- dan tag