Ciao, cari lettori del sito del blog. Oggi, sotto questo titolo, voglio parlare delle varie liste Html che possono essere create in base ai tag UL, OL, LI e DL appositamente progettati per questo. Con l'aiuto di una coppia di UL e LI, vengono creati elenchi puntati, con l'aiuto di elenchi numerati OL e LI e, con l'aiuto degli elementi DL, DT e DD, vengono creati i cosiddetti elenchi di definizioni. Considereremo anche brevemente i principi della creazione di strutture nidificate.
Voglio ricordarti che siamo già riusciti a parlare delle basi del layout moderno e tabulare (). Inoltre, abbiamo toccato le basi, beh, abbiamo imparato.
Elenchi puntati basati su tag UL e LI
Il tag UL viene utilizzato per creare elenchi puntati e il tag OL viene utilizzato per creare elenchi numerati. Questi tag sono accoppiati e bloccano i tag, proprio come l'elemento LI.
Voci di elenco separate si trovano tra i tag di apertura e chiusura, che a loro volta sono racchiusi nell'elemento LI di apertura e chiusura. Nella parte superiore e inferiore degli elenchi Html, il browser aggiunge un rientro di una riga, simile al rientro creato dal tag paragrafo.
Vediamo, ad esempio, una versione etichettata che potrebbe assomigliare a questa:
- Prima linea
- Secondo
- Ultimo elemento
All'interno dei tag UL di apertura e chiusura possono essere inseriti solo elementi LI, e già all'interno di questi elementi (paragrafi) è possibile inserire qualsiasi contenuto (testo, immagini, intestazioni, paragrafi, collegamenti e anche altri elenchi).
Quelli. L'UL serve solo per organizzare un elenco puntato (non ordinato) e tutto ciò che vedrai su una pagina web al suo interno viene implementato utilizzando il contenuto degli elementi LI.
Per UL, puoi modificare l'aspetto del marcatore impostando valori diversi per l'attributo "Tipo" al suo interno. Se "Tipo" (gestione dell'aspetto dei marker) per l'elemento UL non è specificato, verrà visualizzato il tipo di marker predefinito (il disco è un cerchio riempito del colore del testo):
- — cerchio pieno (predefinito);
- - cerchio vuoto;
- - quadrato
Negli esempi precedenti, abbiamo scritto l'attributo "Type" nell'elemento UL, utilizzando questo tipo di marker per tutti gli articoli. Ma l'attributo "Tipo" può anche essere scritto per ogni singolo tag LI, impostando il proprio tipo di marcatore per questo elemento.
Un esempio di elenco puntato con diversi tipi di punto elenco per ogni elemento:
- Indicatore del disco pieno
- Marcatore a forma di disco non ombreggiato
- Quadrato
Elenchi numerati in HTML basati su tag OL
Per creare un elenco numerato, vengono utilizzati i tag OL, all'interno dei quali, ancora una volta, si troveranno gli elementi LI. OL e LI, come ho già detto, sono a livello di blocco (cioè tendono a occupare tutto lo spazio a loro disposizione in larghezza) e nulla può essere posizionato all'interno di OL ad eccezione degli elementi LI.
Si scopre che OL e UL sono tag di servizio necessari solo per indicare al browser che tipo di elenco stiamo formando (puntato o numerato). Nel caso di uno numerato, a sinistra di ogni elemento non vedremo un marcatore, ma un numero e un punto dietro di esso:
- Prima linea
- Secondo comma
- Terza riga
Come accennato in precedenza, gli elementi UL, OL e LI hanno la capacità di utilizzare l'attributo TYPE. Ti consente di impostare il tipo di indicatore o di specificare con quali numeri o lettere verranno numerati gli elementi dell'elenco. Per un elenco ordinato, i parametri di questo attributo possono assumere i seguenti valori:
- — la numerazione sarà effettuata con numeri arabi ordinari (la stessa opzione sarà utilizzata di default, in assenza dell'attributo “Tipo”);
- - lettere maiuscole come numerazione;
- - minuscolo;
- - numeri romani maiuscoli;
- - numeri romani minuscoli;
Un esempio di elenco numerato con diversi tipi di numerazione per ogni elemento:
- numerati in grandi numeri romani
- Numerazione in minuscole lettere latine
- Numerazione con numeri romani piccoli
Quando si creano elenchi numerati, è anche possibile iniziare la numerazione non da uno, ma dal numero specificato nell'attributo START. Per esempio:
- Il primo elemento il cui numero è specificato nel tag OL dall'attributo start="23"
- L'elemento successivo, con un numero uno in più
- Un altro in più
Per OL, puoi anche iniziare una nuova numerazione da qualsiasi valore, partendo da qualsiasi articolo, scrivendo l'attributo VALUE con il numero richiesto nella LI di apertura di questo articolo. Per esempio:
- Primo articolo numero uno
- Questo elemento riceverà il numero specificato nell'attributo value="32"
- Articolo con un numero elevato
Stile dell'aspetto degli elenchi nei CSS (fogli di stile)
Ma, di regola, ora l'aspetto dei marker viene impostato non tramite l'attributo TYPE, ma , per il quale vengono scritte le proprietà corrispondenti.
Qui darò solo un esempio di vari marcatori per elenchi non ordinati, il cui aspetto è impostato tramite un file separato con fogli di stile sovrapposti.
- Primo punto
- Secondo
- Scorso
Ma ne parleremo nei prossimi articoli. Ecco come viene impostato l'aspetto dei marcatori per UL su questo blog. Le immagini vengono utilizzate come indicatori: per elementi ordinari di un elenco non numerato — , per elementi nidificati di un elenco non numerato — .
Liste speciali e annidate in codice HTML
Il terzo e ultimo tipo è chiamato "liste di definizione" e vengono impostati utilizzando tre tag: DL, DT e DD. Il DL dice al browser che seguirà un elenco di definizioni.
Tipicamente, questo tipo viene utilizzato (o doveva essere utilizzato) per scrivere voci di dizionario costituite da termini (inclusi nei tag DT) e loro descrizioni (inclusi nei tag DD).
- Primo termine
- Descrizione
- Secondo termine
- La sua descrizione
Se guardi l'esempio sopra, noterai che l'elemento DD (descrizione del termine) è spostato (40px) rispetto all'elemento DT (il termine stesso).
In generale, DL, DT e DD sono tag di blocco e solo il contenuto con tag inline può essere inserito all'interno dell'elemento DT (si scopre che gli elementi di blocco di intestazioni e paragrafi non possono essere utilizzati all'interno di DT). E all'interno dei tag DD, puoi inserire qualsiasi elemento, sia inline che block.
elenco annidato in Html viene creato per analogia con uno semplice, ma all'interno dell'elenco principale alcune voci sono nuovamente racchiuse nel tag UL o OL di apertura e chiusura.
Si noti che la LI di chiusura dell'elemento in cui verrà creato l'elemento nidificato viene posizionata solo dopo l'intero codice dell'elenco nidificato (questo è molto importante per la sua corretta visualizzazione sulla pagina web). L'elenco nidificato potrebbe assomigliare a questo:
- Il primo paragrafo del principale numerato
- Secondo comma
- Primo elemento di etichettato annidato
- Secondo
- Il terzo e ultimo punto del segnato
- Il terzo elemento del numerato
Buona fortuna a te! A presto sul sito delle pagine del blog
Potresti essere interessato
Come inserire un collegamento e un'immagine (foto) in HTML - tag IMG e A Seleziona, Opzione, Area di testo, Etichetta, Set di campi, Legenda - Tag HTML del modulo dell'elenco a discesa e del campo di testo 
Moduli HTML per il sito: tag Form, Input e Select, Option, Textarea, Label e altri per la creazione di elementi di moduli Web 
Come vengono impostati i colori nel codice Html e CSS, selezione delle sfumature RGB nelle tabelle, risultati Yandex e altri programmi 
Incorpora e oggetti: tag HTML per la visualizzazione di contenuti multimediali (video, flash, audio) su pagine Web 
Tag e attributi delle intestazioni H1-H6, riga orizzontale Hr, interruzione riga Br e paragrafo P secondo lo standard Html 4.01 
Tabelle in HTML: tag Table, Tr e Td, nonché Colspan, Cellpadding, Cellspacing e Rowspan per crearli 
Che cos'è Html Hypertext Markup Language e come elencare tutti i tag nel validatore W3C 
Font (Faccia, Dimensione e Colore), Blockquote e Pre tag: formattazione del testo obsoleta in puro HTML (senza usare CSS) 
Iframe e Frame: cosa sono e come utilizzare al meglio i frame in Html 
Img - Tag HTML per inserire un'immagine (Src), allinearla e avvolgerla con il testo (align) e impostare uno sfondo (background)
In HTML, un intero insieme di tag è responsabile dell'organizzazione degli elenchi, la cui organizzazione deve rispettare determinate regole di strutturazione dei dati.
Lo standard della quinta versione di html supporta 3 tipi di elenchi: elenchi numerati, elenchi puntati ed elenchi di definizioni. Fornisce inoltre la possibilità di nidificare gli elenchi l'uno nell'altro, creando elenchi nidificati a più livelli.
elenco numerato
elenco numeratoè un insieme di elementi (voci di elenco) che hanno una certa sequenza. Ciascun elemento in un elenco numerato ha un indicatore univoco che indica l'ordine dell'elemento rispetto ad altri elementi nell'elenco. Per impostazione predefinita, gli indicatori delle voci di elenco numerate sono numeri. Il primo elemento va sotto il numero 1, il secondo sotto il numero 2 e così via.
Gli esempi più comuni di elenchi numerati sono le ricette per cucinare vari piatti. Poiché ogni ricetta è una lista numerata, con una chiara sequenza di azioni.
Per creare elenchi numerati in HTML, utilizzare il tag
- , all'interno del quale si trovano gli elementi della lista con i dati. Ogni voce dell'elenco è identificata da un tag.
- :
Elenco numerato:
- Caffè
- Tè
- Latte
nota: tag
- può contenere solo tag come elementi figlio
- , ovvero l'intero contenuto dell'elenco numerato deve essere inserito all'interno degli elementi
- . Etichetta
- , a sua volta, non ha restrizioni sul contenuto, quindi puoi inserire paragrafi, immagini, collegamenti, tabelle, altri elenchi, ecc.
elenco puntato
elenco puntato- questi sono non ordinati, cioè elenchi di elementi non ordinati, la cui sequenza non ha importanza. Tutti gli elementi dell'elenco puntato hanno gli stessi punti elenco, per impostazione predefinita vengono visualizzati come piccoli cerchi neri.
Il tag HTML viene utilizzato per creare elenchi puntati.
- , all'interno del quale si trovano gli elementi della lista stessa (come nel caso delle liste numerate, viene utilizzato il tag
- , che contiene tutti i contenuti visualizzati dell'elenco):
Elenco puntato:
- Caffè
- Tè
- Latte
Tipi di marcatori
I tipi di punti elenco in un elenco numerato possono essere modificati utilizzando l'attributo type. Questo attributo supporta cinque tipi di indicatori:
Gli elenchi puntati non hanno un attributo type, quindi non puoi modificare il tipo di punto elenco in un elenco puntato utilizzando HTML. Per modificare il tipo di marker, in questo caso, puoi utilizzare la proprietà CSS tipo list-style-type, con la quale, oltre al valore di default, puoi selezionare altre due tipologie di marker: circle o square.
Modifica dei marcatori per gli elenchi:
Titolo della pagina Elenco numerato con attributo type="a":
- Mele
- Banane
- Limoni
Elenco numerato con attributo type="I":
- Mele
- Banane
- Limoni
Tipi di indicatori di elenchi puntati:
- Mele
- Banane
- Limoni
- Mele
- Banane
- Limoni
La proprietà CSS tipo stile elenco, oltre ai tipi di punti elenco per elenchi puntati, ha molti tipi diversi di punti elenco per elenchi numerati. Ma non sempre cambiare un tipo standard di pennarello a un altro è sufficiente per progettare magnificamente l'elenco. Per progettare elenchi, è meglio utilizzare CSS, che consente non solo di modificare l'aspetto del marker, ma anche di sostituire i marker con immagini, controllarne la posizione e controllare il rientro. Puoi vedere come fare tutto questo.
lista orizzontale
Se stai utilizzando un elenco HTML per creare un menu orizzontale, dovrai disporre gli elementi dell'elenco uno accanto all'altro sulla stessa riga. Non puoi farlo con HTML, quindi dovrai usare CSS.
Per creare un elenco orizzontale, devi impostare la proprietà di visualizzazione CSS degli elementi dell'elenco su inline o inline-block , a seconda delle altre proprietà che intendi utilizzare.
Titolo della pagina elenco numerato
- Mele
- Banane
- Limoni
Elenco puntato:
- Mele
- Banane
- Limoni
Dopodiché, tutti gli elementi dell'elenco si allineeranno su una riga. Tieni presente che i punti elenco scompariranno dagli elementi dell'elenco e non ci sarà nemmeno uno spazio tra di essi, ma il rientro a sinistra dell'elenco rimarrà.
Come trasformare un elenco orizzontale in un menu orizzontale, puoi vedere.
Uno dei tipi di elenchi implementati in HTML è l'elenco puntato. In caso contrario, le liste di questo tipo sono dette non ordinate o non ordinate. Il cognome viene spesso utilizzato come traduzione formale del nome del tag corrispondente.
- , con l'aiuto di quali elenchi di questo tipo sono organizzati in documenti HTML (UL - Unordered List, unordered list).
- (LI - Voce di elenco, voce di elenco). Etichetta
- non necessita di un corrispondente tag di chiusura, sebbene la sua presenza in linea di principio non sia vietata. I browser in genere avviano ogni nuovo elemento dell'elenco su una nuova riga durante la visualizzazione di un documento.
Le informazioni di cui sopra sono sufficienti per costruire un elenco puntato elementare. Ecco un esempio di un documento HTML che utilizza un elenco puntato, il cui rendering del browser è mostrato in Fig. 2.1.
Esempio di elenco puntato Segni zodiacali:
- Ariete
- Toro
- Gemelli
- Vergine
- bilancia
- Scorpione
- Sagittario
- Capricorno
- Acquario
- Pesci
Riso. 2.1. Visualizzazione nel browser di un elenco puntato
Si noti che oltre alle voci dell'elenco contrassegnate con il tag
- , potrebbero essere presenti altri elementi HTML. Nell'esempio sopra, uno di questi elementi è il testo normale, che non è un elemento di un elenco, ma svolge il ruolo di intestazione.
Nota
In alcuni libri di testo sul linguaggio HTML, c'è un'indicazione che il tag contenitore dovrebbe essere usato per impostare il titolo dell'elenco.
(LH - Intestazione elenco, intestazione elenco). Questo tag non è attualmente riconosciuto da nessuno dei browser più comuni e non fa parte della specifica HTML. Pertanto, il suo utilizzo diventa privo di significato, sebbene non porti a errori. In etichetta
- si possono specificare due parametri: COMPACT e TYPE.
- .
Esempio di registrazione:
- .
Nota
I browser interpretano l'indicazione del tipo di indicatore per una singola voce di elenco in modo diverso. Il browser Netscape cambia l'aspetto del marker per questo e per tutti quelli successivi fino a quando non si incontra la successiva ridefinizione dell'aspetto del marker. Internet Explorer cambia solo l'aspetto dell'indicatore per questo elemento.
Elenca i marcatori grafici
È possibile utilizzare immagini grafiche come indicatori di elenco, ampiamente utilizzati per creare documenti HTML accattivanti e dal design accattivante. In realtà, questa possibilità non è fornita direttamente dal linguaggio HTML, ma è implementata in modo alquanto artificiale. Ciò non significa che non sia raccomandato o riprovevole farlo, ma solo che qui non verranno utilizzati costrutti di linguaggio HTML speciali.
Per comprendere l'idea, è necessario comprendere come vengono implementati gli elenchi nelle pagine HTML. Si scopre che il tag elenco
- (oltre ai tag di elenco di altri tipi, discussi di seguito) esegue l'unico compito: indica al browser che tutte le informazioni che si trovano dopo questo tag devono essere visualizzate con uno spostamento a destra (rientro) di una certa quantità. tag
- Il puntamento a singole voci di elenco fornisce indicatori di voci di elenco standard.
Se abbiamo bisogno di costruire un elenco con marcatori grafici, allora possiamo fare a meno dei tag
- . Sarà sufficiente inserire l'immagine grafica desiderata prima di ogni elemento della lista. L'unico compito che deve essere risolto in questo caso è separare gli elementi dell'elenco l'uno dall'altro. Puoi usare i tag di paragrafo per questo.
O avanzamento riga forzato
. Un esempio di implementazione di un elenco con marcatori grafici, la cui visualizzazione è mostrata in fig. 2.2 è mostrato di seguito:che verrà trasmesso una sola volta. Anche la dimensione di un file contenente un'immagine piccola è estremamente ridotta.
Nota
I metodi per creare elenchi con marcatori grafici sono discussi a turno nel Capitolo 8.
Usando gli elenchi html, puoi creare un menu per il tuo sito con diversi elementi e sotto-voci. Con l'aiuto di elenchi, viene creato il contenuto (mappa) del sito, che è molto conveniente per i motori di ricerca.
E quindi, ci sono i tag "" - definiscono un elenco puntato.
Tag "" - definiscono gli elementi, ovvero gli elementi di un elenco puntato.Per prima cosa, creiamo un semplice elenco di diversi elementi:
<html > <testa > <titolo > Elenco puntato HTML semplicetitolo > testa > <corpo > <ul > <li > Unoli > <li > Dueli > <li > Treli > <li > quattroli > ul > corpo > html >- Tre
Per i contrassegni html, puoi impostare alcuni tipi che sono scritti all'interno
primo tag "- " in digita = ""
- quattro
- quattro
- Mercurio
- Venere
- terra
- Giove
- Saturno
- Nettuno
- Plutone
- title "inserisci un altro elenco e poi chiudilo con un secondo tag"
Creiamo un elenco in cui al posto dei punti ci saranno dei piccoli cerchi (punti perforati). Questo tipo si chiama " cerchio"
<html > <testa > <titolo > Elenco puntato HTMLtitolo > testa > <corpo > <ultipo= "cerchio"> <li > Unoli > <li > Dueli > <li > Treli > <li > quattroli > ul > corpo > html >Ora invece del tipo "cerchio" imposteremo il tipo " quadrato" (piazze)
<html > <testa > <titolo > Elenco puntato HTMLtitolo > testa > <corpo > <ultipo= "quadrato"> <li > einli > <li > zweili > <li > dreili > <li > vierli > ul > corpo > html >Nelle lezioni CSS, viene discusso in dettaglio il lavoro con gli elenchi, da cui puoi imparare come impostare i colori per gli elementi e il testo in essi, nonché come impostare il tipo di marcatore stesso (può essere non solo un quadrato
o punto: può essere quasi qualsiasi carattere).elenchi numerati html Gli elenchi non solo possono essere contrassegnati, ma anche numerati, come a volte è necessario. Possono essere numeri (1, 2, 3...) e lettere dell'alfabeto inglese in minuscolo e maiuscolo. Considera tutto quanto sopra.
Per impostare la numerazione vengono utilizzati i tag "".
All'interno del primo tag, il tipo è impostato.Numerazione per numeri (da uno)
<html > <testa > <titolo > elenco numerato htmltitolo > testa > <corpo > <ol > <li > Una voltali > <li > Dueli > <li > Treli > <li > quattroli > ol > corpo > html >Se vuoi che la numerazione parta da zero (zero) o da tre, ad esempio, allora devi scrivere nel primo tag inizio="" e il numero corretto.
<html > <testa > <titolo > elenco numerato htmltitolo > testa > <corpo > <vecchio inizio= "0" > <li > zeroli > <li > unoli > <li > Dueli > <li > treli > ol > corpo > html >Vediamo ora come impostare la "numerazione delle lettere".
Minuscolo:
<html > <testa > <titolo > elenchi numerati htmltitolo > testa > <corpo > <oltipo= "un"> <li > Mercurioli > <li > Venereli > <li > terrali > <li > Marteli > ol > corpo > html >Maiuscolo:
<html > <testa > <titolo > Elenchi HTML numeratititolo > testa > <corpo > <oltipo= "UN"> <li > Gioveli > <li > Saturnoli > <li > Uranoli > <li > Nettunoli > <li ><b> Plutoneb>li > ol > corpo > html >Oltre ai soliti elenchi in html, puoi creare elenchi a più livelli, ovvero sottosezioni per determinati elementi. Per fare ciò, dopo il tag e il nome "
"
<html >
<testa >
<titolo > elenco a strati htmltitolo >
testa >
<corpo >
<ultipo= "quadrato" >
<li > Violinoli >
<li > Chitarra<ul >
<li > classicoli >
<li > chitarra ritmicali >
<li > chitarra elettricali >
ul >
li >
<li > batteriali >
<li > tuboli >
ul >
corpo >
html >
- Violino
- Chitarra
- classico
- chitarra ritmica
- chitarra elettrica
- batteria
- tubo
- . Allo stesso tempo, viene aggiunto un marker di fronte a ciascun elemento dell'elenco, per impostazione predefinita è un marker a forma di cerchio. Con l'aiuto dei tag viene creato un contenitore, all'interno del quale si trovano gli elementi della lista: .
Il codice dell'elenco puntato sarebbe simile a questo:
- Opzione come questa
- Questa opzione
- Una specie di opzione
Puoi provare a creare una pagina HTML usando questo codice e come risultato otterrai il seguente elenco:
Come puoi vedere, ogni elemento dell'elenco si trova su una nuova riga, con alcuni rientri creati a sinistra, in alto e in basso. Ciascun elemento nell'elenco inizia con un punto elenco, che può essere un cerchio pieno (utilizzato per impostazione predefinita), un cerchio o un quadrato. Etichetta
- esiste un attributo di tipo, con l'aiuto del quale viene impostato lo stile del marcatore. Questo attributo ha i seguenti valori:
- disco - cerchio;
- cerchio - cerchio;
- quadrato - quadrato.
- Opzione come questa
- Questa opzione
- Una specie di opzione
- Opzione come questa
- Questa opzione
- Una specie di opzione
- . In questo modo, puoi creare un elenco con una varietà di marcatori.
- Opzione come questa
- Questa opzione
- Una specie di opzione
Il risultato sarà il seguente:
Liste numerate.
Gli elenchi numerati in HTML sono elenchi in cui ogni articolo ha un numero di serie, gli elenchi numerati vengono creati utilizzando il tag
- e annidato nei suoi tag
-
- Prima linea
- Seconda linea
- terza riga
Tale elenco si presenta così:
La numerazione predefinita è numeri arabi. Ma l'etichetta
- esiste un attributo di tipo, con l'aiuto dei valori di cui la numerazione può essere fatta con lettere latine maiuscole (tipo="A") o minuscole (tipo="a"), numeri romani in alto (tipo= "I") e registro inferiore (type="i" ).
- . Etichetta
- crea un contenitore per l'elenco, tag
- imposta il termine e il tag
- descrizione o definizione di un termine.
Questo elenco è scritto come segue:
- Termine 1
- Definizione del termine 1
- termine 2
- Definizione del termine 2
- termine 3
- Definizione del termine 3
Ciò risulterà nel seguente elenco:
Come puoi vedere, questo crea rientri appropriati per il termine e il testo della definizione.
Elenchi annidati o multilivello in HTML.
A volte è necessario annidare un altro elenco in un elemento di un certo tipo di elenco. HTML ha la capacità di annidare elenchi indefinitamente all'interno di elementi di altri elenchi.
Ad esempio, ecco il codice che annida gli elenchi numerati all'interno degli elementi dell'elenco puntato.
- Opzione come questa
- Prima linea
- Seconda linea
- terza riga
- Questa opzione
- Prima linea
- Seconda linea
- terza riga
- Una specie di opzione
- Prima linea
- Seconda linea
- terza riga
Di seguito sono riportate le versioni abbreviate del codice e il tipo di numerazione che può essere in un caso o nell'altro.
Visualizzazione elenco:
Visualizzazione elenco:
Numerazione in lettere minuscole dell'alfabeto latino:
Visualizzazione elenco:
Visualizzazione elenco:
Visualizzazione elenco:
Elenco delle definizioni in HTML.
Gli elenchi di definizioni sono un tipo speciale di elenchi. Differiscono in quanto ogni elemento dell'elenco è costituito da due elementi, un termine e un testo che ne rivela il significato. Questi elenchi vengono creati utilizzando i tag
Il valore del disco viene utilizzato per impostazione predefinita.
Un esempio di creazione di un elenco puntato con indicatori circolari:
Di conseguenza, l'elenco assumerà la seguente forma:
Creazione di un elenco puntato con indicatori quadrati:
L'elenco sarà simile a:
L'attributo type può essere applicato a più di un semplice tag
- , ma anche al tag
La prossima lezione esaminerà la creazione di un menu semplice basato sulle conoscenze acquisite da questa lezione.
- 4,5 su 5 sulla base di 2 voti
Molto spesso, alcune informazioni sul sito devono essere presentate sotto forma di elenchi.
Gli elenchi consentono di organizzare e sistematizzare varie informazioni e presentarle al visitatore in una forma conveniente.
Gli elenchi in HTML sono di tre tipi: elenchi puntati, elenchi numerati ed elenchi di definizioni. Vediamo come crearli in ordine.
Elenco segnato.
Questo tipo di elenco è il più utilizzato. L'elenco puntato in HTML viene creato utilizzando i tag
- Il puntamento a singole voci di elenco fornisce indicatori di voci di elenco standard.
Il parametro COMPACT viene scritto senza un valore e viene utilizzato per indicare al browser che l'elenco indicato deve essere visualizzato in forma compatta. Ad esempio, è possibile ridurre il carattere o la spaziatura tra le righe di un elenco, ecc.
Nota
Attualmente, la presenza del parametro COMPACT nel tag
- non pregiudica la visualizzazione delle liste da parte dei principali browser. Pertanto, l'uso di questo parametro è privo di significato, soprattutto perché il suo utilizzo non è raccomandato dalla specifica HTML 4.0.
Il parametro TYPE può assumere i seguenti valori: disco, cerchio e quadrato. Questo parametro viene utilizzato per forzare l'aspetto degli indicatori di elenco. L'aspetto esatto dell'indicatore dipenderà dal browser in uso. Le opzioni di visualizzazione tipiche sono le seguenti:
TIPO = disco - i marker vengono visualizzati come cerchi pieni; TIPO = cerchio - i marcatori vengono visualizzati come cerchi vuoti; TIPO = quadrato - gli indicatori vengono visualizzati come quadrati pieni. Esempio di registrazione:
- .
Il valore predefinito è TIPO = disco. Per gli elenchi puntati nidificati, il valore predefinito è disco al primo livello, cerchio al secondo livello e quadrato al terzo livello. Questo è esattamente ciò che viene fatto nelle ultime versioni dei browser Netscape e Internet Explorer. Tieni presente che altri browser potrebbero visualizzare gli indicatori in modo diverso. Ad esempio, nella specifica HTML 4.0, il tipo di indicatore visualizzato quando TYPE = square è specificato come un contorno quadrato.
Il parametro TYPE con gli stessi valori può essere utilizzato per specificare il tipo di marker per le singole voci dell'elenco. A tale scopo, è possibile specificare il parametro TYPE con il valore corrispondente nel tag dell'elemento list
- .
In un elenco puntato, per evidenziarne gli elementi, vengono utilizzati caratteri speciali, chiamati indicatori di elenco (spesso chiamati bullets, che è il suono formale del termine inglese bullet). L'aspetto degli indicatori di elenco è determinato dal browser e, durante la creazione di elenchi nidificati, i browser diversificano automaticamente l'aspetto degli indicatori di diversi livelli di nidificazione.
tag
- e
Per creare un elenco puntato, è necessario utilizzare un tag contenitore, all'interno del quale si trovano tutti gli elementi dell'elenco. I tag di apertura e chiusura dell'elenco forniscono un'interruzione di riga prima e dopo l'elenco, separando così l'elenco dal contenuto principale del documento, quindi non è necessario utilizzare i tag di paragrafo qui.
.Ciascun elemento dell'elenco deve iniziare con un tag
- , che contiene tutti i contenuti visualizzati dell'elenco):
