Tag ol dalam html artinya. Bagaimana cara mengatur item daftar secara horizontal? Mengubah penanda tag dengan CSS

HTML bahasa markup hypertext memiliki tag

Sintaks tag

Barang 1

Barang #2

Barang #3

...

Kode ini diubah menjadi daftar berpoin di situs:

Barang 1
Barang #2
Barang #3

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

Lampiran daftar-dalam-daftar diperbolehkan

Sebagai contoh

Barang 1

Item # 2-1

Butir #2-2

Item # 2-3

Barang #3

...

Tandai atribut dan properti

Atribut tag yang banyak digunakan

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:

Barang 1

Barang #2

Barang 1
Barang #2

3.type = "persegi" - penanda dalam bentuk persegi

Sebagai contoh:

Barang 1

Barang #2

Dan inilah tampilannya di halaman:

Barang 1
Barang #2

Di CSS, tipe marker ditentukan menggunakan atribut list-style-type:

...

Mari kita pertimbangkan nilai apa yang dapat diambil oleh tipe-daftar:

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

Atribut dapat ditetapkan sebagai tag itu sendiri

... Saat menyetel atribut ke tag

Kodenya terlihat seperti ini:

Barang 1

Barang #2

Barang #3

Barang 1
Barang #2
Barang #3

Mengubah penanda tag
menggunakan CSS

Daftar Butir Item yang Dibuat oleh Tag

Barang 1

Barang #2

Barang #3

Dan inilah tampilannya di halaman:

Barang 1
Barang #2
Barang #3

C menggunakan CSS kita dapat menentukan jenis tampilan penanda lainnya. Tetapi Anda harus ingat bahwa saat mengatur gaya apa pun untuk tag

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:

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

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 —

ditandai dengan penanda,
daftar bernomor —
1. 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
2. (dari Item Daftar Bahasa Inggris).
- 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 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	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).

Microsoft
Google
apel

3. Daftar definisi

Daftar Definisi dibuat menggunakan tag

Kotak daftar definisi memiliki gaya browser default berikut:

Untuk tag

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
1. gugus kalimat
2. gugus kalimat
3. gugus kalimat
  1. gugus kalimat
  2. gugus kalimat
  3. gugus kalimat
4. 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

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
jeda baris
Daftar, dan daftar item
Judul
Penguasa horisontal

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,
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:

Bulka

roti

Pada layar browser, kode ini akan terlihat seperti ini:

Bulka
Pai
roti
Pai

Jika kita hanya mengganti tag ul dengan tag ol, kita mendapatkan daftar bernomor:

Bulka

roti

Sekarang terlihat seperti ini:

Bulka
Pai
roti
Pai

Tidak ada yang melarang bersarang satu daftar ke yang lain, membentuk daftar bersarang dengan sublist:

Gergaji

Obeng
1. Lurus
2. Menyeberang

Mengebor

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

Menandai

Item untuk daftar bernomor ditentukan menggunakan tag

, 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
- 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

Spesifikasi	Status
Standar Hidup HTML WHATWG (WHATWG)	Standar hidup
HTML 4.01 (W3C)	Rekomendasi
HTML5 (W3C)	Rekomendasi
HTML 5.1 (W3C)	Rekomendasi

Saya mengunduh file tetapi tidak terbuka atau cara membuka file yang tidak dikenal

Cara mengubah nada dering di iPhone

Mengkalibrasi layar ponsel Android (sensor layar sentuh)

Cara membersihkan komputer Anda dari file yang tidak perlu