Elenchi ordinati in HTML
Utilizzando gli elenchi ordinati in HTML
Gli elenchi ordinati in HTML possono essere utilizzati in più modi. I seguenti quattro esempi dimostreranno alcuni dei loro scenari di utilizzo:
Esempio n. 1: semplice utilizzo degli elenchi ordinati
In questo esempio, impareremo a creare un semplice elenco ordinato in HTML. Per fare ciò, dovrai passare attraverso lo script HTML mostrato nella seguente immagine:
Gli elenchi ordinati in HTML possono essere creati utilizzando il tag "ol". Una volta applicato questo tag, menzioni tutti gli elementi di questo elenco ordinato racchiudendoli all'interno del tag "Li". In questo esempio, creiamo un elenco ordinato di tre corsi. Pertanto, utilizziamo il tag "OL" seguito dai tre tag "LI" in questo script.
Quindi, dopo aver salvato questo script ed averlo eseguito all'interno del nostro browser, la seguente pagina web viene visualizzata sul nostro schermo. Puoi vedere che i nostri corsi specificati sono visualizzati sotto forma di un elenco ordinato in questa pagina web.
Esempio n. 2: elenchi ordinati con lettere maiuscole
Non è necessario avere solo l'elenco ordinato dei numeri. Possiamo anche avere gli elenchi ordinati di alfabeti. Lo script HTML mostrato nella seguente immagine dimostrerà come creare un elenco ordinato con le lettere maiuscole in HTML.
In questo script HTML, visualizziamo le tre diverse direzioni sotto forma di un elenco ordinato. Tuttavia, questa volta, vogliamo un elenco ordinato delle lettere maiuscole. Pertanto, utilizziamo un attributo "Tipo" aggiuntivo con il tag "OL" per menzionare il tipo esatto dell'elenco ordinato. Equalizziamo questo attributo a "A" per la creazione di un elenco ordinato con gli alfabeti maiuscole. Quindi, menzioniamo semplicemente tutti gli elementi di questo elenco ordinato con il tag "LI".
Il nostro elenco ordinato con gli alfabeti maiuscole è mostrato nella seguente immagine:
Nota: Se si sostituisce "A" nella sceneggiatura precedente con "A", "I", "I" o "1", la nostra lista ordinata avrà lettere di piccole dimensioni, numeri romani maiuschi, numeri rompi minuscoli o numeri, rispettivamente. Tuttavia, per impostazione predefinita, un elenco ordinato in HTML comprende numeri. Pertanto, non è necessario menzionare specificamente il tipo "1" in questo caso.
Esempio n. 3: elenchi ordinati con un punto di partenza casuale
A volte, non vuoi che la tua lista ordinata inizi con "1". Piuttosto, vuoi avere un punto di partenza casuale per questo. Per fare ciò, è possibile utilizzare lo script HTML mostrato nella seguente immagine:
In questo script, vogliamo che la nostra lista ordinata inizi dal numero "10". Pertanto, utilizziamo l'attributo "Start" con il tag "OL" e lo uguale a "10". Quindi, menzioniamo i tre diversi elementi con il tag "Li".
La nostra lista ordinata con un punto di partenza di nostra scelta diversa da "1" è mostrata nella seguente immagine:
Esempio n. 4: elenchi ordinati nidificati
In questo esempio, impareremo a creare gli elenchi ordinati nidificati, i.e. Elenchi ordinati all'interno di un elenco ordinato in HTML. Lo script HTML per questo scopo è mostrato nella seguente immagine:
In questo esempio, vogliamo avere un elenco ordinato esterno delle diverse bevande. All'interno di ogni categoria, volevamo avere gli elenchi ordinati interni per menzionare le diverse bevande appartenenti a ciascuna di queste categorie. Pertanto, abbiamo nidificato di conseguenza i tag "OL" e "Li" nello script HTML mostrato nell'immagine precedente.
La seguente pagina Web mostra il nostro elenco ordinato nidificato in HTML:
Conclusione
Questo tutorial è discutere l'uso delle liste ordinate in HTML. Ti abbiamo dato una breve introduzione degli elenchi ordinati in HTML seguiti da alcuni esempi che dovevano portare più chiarezza a questo concetto. Dopo aver compreso bene questi esempi, sarai in grado di utilizzare gli elenchi ordinati in HTML in modo abbastanza efficace.