Il Sito per imparare gratuitamente a fare pagine Web

Oggi: Lunedì 08 Settembre 2008   Ore: 09:59
 
Home · XHTML con Style · Primi Passi · Guida HTML · Guida CSS · Guida PHP · F.A.Q. · Scripting · Applets · Grafica Web · Forum · Comunicazioni Scrivimi
 
  Web-Link
Fai una libera donazione, qualsiasi cifra
Libera Donazione
  Struttura
web-link
·<!DOCTYPE>
· <HTML>
· <HEAD>
· <BODY>
· <BASE>
· <LINK>
· <META>
·<STYLE>
·<TITLE>
·<SCRIPT>
·background
·bgcolor
·bgproperties
·link
·vlink
·alink
·text
·margini
·colori
web-link
 Formattazione
web-link
·<BASEFONT>     
·<BR>
·<CENTER>
·<COMMENT>
·<DIV>
·<SPAN>
·<FONT>
·<HR>
·<HX>
·<MARQUEE>
·<P>
·<PRE>
·<B>
·<I>
·<U>
·color
·face
·size
web-link
  Tabelle
web-link
·<TABLE>
·<TR>
·<TD>
·<TH>
·<CAPTION>
·<COL>
·<COLGROUP>
·<TBODY>
·<TFOOT>
·<THEAD>
·align
·background
·bgcolor
·border
·bordercolor
·bordercolordark
·bordercolorlight
·cellpadding
·cellspacing
·colspan
·frame
·height
·nowrap
·rowspan
·rules
·valign
·width
web-link
  Elenchi
web-link
· <DIR>
· <DL>
·<MENU>
· <OL>
· <UL>
· <LI>
· <DT>
· <DD>
·compact
·type
·start
web-link
  Links
web-link
·<a>
·name
·href
·mailto
·target
web-link
  Audio
web-link
· <bgsound>
·<embed>
·loop
·autostart
web-link
Guida ai vari elementi che compongono il linguaggio HTML.
web-link
 

html






Elenchi

Spesso su una pagina web si ha la necessità di descrivere voci o altro sottoforma di elenchi, html offre questa possibilità con il tag <LI> (voce dell'elenco) che in abbinamento con uno degli altri tags permette di ottenere un prodotto finale molto simile a quello che offrono programmi di videoscrittura.

<LI>

Elemento voce dell'elenco, da solo serve a poco, deve essere combinato con altri elementi descritti sotto.

<DIR>...</DIR>

L'elemento <DIR> può essere utilizzato per un elenco di voci disposte su colonne, per default la larghezza è di 24 caratteri, al suo interno si adopera <LI> come voce dell'elenco.

<DIR>
<LI>WebLink
<LI>CSS
<LI>META
<LI>FAQ
</DIR>
Questo il risultato:
  • WebLink
  • CSS
  • META
  • FAQ



  •  

    <DL>...</DL>

    L'elemento <DL> accetta al suo interno gli elementi <DT> e <DD> come voci dell'elenco. L'elemento <DT> riserva un terzo dello schermo per la voce descritta, mentre il restante è assegnato all'elemento <DD> che porta la descrizione una riga sotto.

    <DL>
    <DT>WebLink<DD>Tutto per la tua home page
    <DT>CSS       <DD>Cascading Style Sheets
    <DT>META   <DD>Comandi Speciali
    <DT>FAQ     <DD>Le domande frequenti
    </DL>
    Questo il risultato:
    Web-Link
    Tutto per la tua home page
    CSS
    Cascading Style Sheets
    META
    Comandi Speciali
    FAQ
    Le domande frequenti
     

    E' possibile ridurre lo spazio fra le righe nel caso in cui l'elenco fosse molto lungo, per fare questo si adopera l'attributo COMPACT nel tag <DL>

    <DL COMPACT>
    Questo il risultato:
    WebLink
    Tutto per la tua home page
    CSS
    Cascading Style Sheets
    META
    Comandi Speciali
    FAQ
    Le domande frequenti



     

    <MENU>...</MENU>

    L'elemento <MENU> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione compatta di un elenco puntato. Personalmente non vedo molte differenze con l'elemento <DIR>

    <MENU>
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </MENU>
    Questo il risultato:
  • WebLink
  • CSS
  • META
  • FAQ



  •  

    <OL>...</OL>

    L'elemento <OL> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione ordinata e numerata di un elenco puntato.

    <OL>
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </OL>
    Questo il risultato:
    1. WebLink
    2. CSS
    3. META
    4. FAQ
     

    Anche <OL> accetta l'attributo COMPACT per una visualizzazione più compatta. Per default la numerazione segue 1, 2 , 3, e così via ma grazie all'attributo TYPE si possono cambiare le voci dell'elenco in uno dei seguenti modi:
    TYPE=A Lettere maiuscole, ad esempio : A , B, C, ...
    TYPE=a Lettere minuscole, ad esempio : a, b, c, ...
    TYPE=I Numerazione romana maiuscola, ad esempio: I, II, III, ...
    TYPE=i Numerazione romana minuscola, ad esempio: i, ii, iii, ...
    TYPE=l I numeri come da default: 1, 2, 3, ...

    <OL TYPE="a">
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </OL>
    Questo il risultato:
    1. WebLink
    2. CSS
    3. META
    4. FAQ
     

    Nel caso in cui si volesse partire da un qualsiasi numero diverso da "1", o da una lettera diversa da "a", sarà sufficiente fare uso dell'attributo START impostando il numero da cui iniziare l'incremento.

    <OL START="3">
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </OL>
    Questo il risultato:
    1. WebLink
    2. CSS
    3. META
    4. FAQ

    Vediamo un esempio anche nel caso in cui si adoperino le lettere. Dovendo iniziare dalla lettera "C" ed essendo questa la terza lettera dell'alfabeto, si dovrà inserire il numero "3":

    <OL TYPE="a" START="3">
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </OL>
    Questo il risultato:
    1. WebLink
    2. CSS
    3. META
    4. FAQ



     

    <UL>...</UL>

    L'elemento <UL> prevede al suo interno l'elemento <LI> come voce dell'elenco. Serve per una visualizzazione non ordinata di un elenco puntato.

    <UL>
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </UL>
    Questo il risultato:
    • WebLink
    • CSS
    • META
    • FAQ
     

    Anche <UL> accetta l'attributo COMPACT per una visualizzazione più compatta. A questo tipo di elenco sono assegnati dei simboli che variano man mano che ci si sposta di livello, i simboli adoperati sono: disco solido, cerchio, quadrato. Volendo si possono cambiare, è sufficiente specificarlo nell'attributo TYPE:
    TYPE=disc disco solido
    TYPE=circle cerchietto
    TYPE=square quadrato

    <UL TYPE="circle">
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </UL>
    Questo il risultato:
    • WebLink
    • CSS
    • META
    • FAQ

    Nel caso in cui ci fosse la necessità di cambiare segno, si potrà farlo con l'attributo TYPE anche dall'interno dei vari TAGS <UL>.

    <UL TYPE="square">
    <LI>WebLink
    <LI>CSS
    <LI>META
    <LI>FAQ
    </UL>
    Questo il risultato:
    • WebLink
    • CSS
    • META
    • FAQ










      Potete fare domande e discutere l'argomento sul Forum



    web-link
      Immagini
    web-link
    ·<IMG>
    ·<MAP>
    ·<AREA>
    ·align
    ·alt
    ·border
    ·ismap
    ·lowsrc
    ·src
    ·vspace
    ·hspace
    ·width
    ·height
    ·usemap
    web-link
      Frames
    web-link
    ·<frameset>
    ·<frame>
    ·<noframe>
    ·rows
    ·col
    ·src
    ·name
    ·marginwidth
    ·marginheight
    ·scrolling
    ·noresize
    ·frameborder
    ·framespacing
    web-link
      Iframe
    web-link
    · <iframe>
    ·src
    ·width
    ·height
    ·scrolling
    ·frameborder
    ·marginwidth
    ·marginheight
    ·vspace
    ·hspace
    ·align
    ·name
    web-link
      Forms
    web-link
    ·<form>
    ·action
    ·method
    ·enctype
    ·<input>
    ·align
    ·checked
    ·maxlength
    ·name
    ·size
    ·src
    ·value
    ·type
    ·<option>
    ·<select>
    ·<textarea>
    ·button
    ·checkbox
    ·file
    ·hidden
    ·image
    ·password
    ·radio
    ·reset
    ·submit
    ·text
    ·textarea
    web-link
      Java & JS
    web-link
    ·<APPLETS>
    ·<SCRIPT>
    ·onAbort
    ·onBlur
    ·onChange
    ·onClick
    ·onError
    ·onFocus
    ·onLoad
    ·onMouseOut
    ·onMouseOver
    ·onReset
    ·onSelect
    ·OnSubmit
    ·OnUnload
    web-link
      Download
    web-link
    · Primi Passi
    · Guida HTML
    · Guida CSS
    · Guida XHTML
    web-link
     
    · Home Page Home Page · Aggiungi ai preferiti Aggiungi ai preferiti · Segnala ad un amico Segnala il sito ai tuoi amici ·
     

    Valid CSS!
    Valid HTML 4.01!

    Questa pagina è esclusiva proprietà di © Web-Link © Andrea Bianchi 1997 ~ 2008
    Vietata la copia e la distribuzione, anche parziale, senza la previa autorizzazione scritta di Web-Link