Struttura dell' elemento HTML (completa)



prima c'è il nome del tag img

poi ci sono gli attributi con i valori

<img src="images/yoyoma.jpg" width="455" height="304" alt="Yo Yo Ma suona il Violoncello" />

attributi specifici : legati al tag. Esempio per una immagine: width e height specificano le dimensioni con cui mostrare l'immagine, alt è il testo alternativo.


ci sono alcuni attributi che possiamo mettere su tutti i tag

es. title è un titolo che possiamo mettere in un qualsiasi elemento html per descriverne il contenuto. Per esempio il valore dell'attributo title viene mostrato quando viene lasciato il mouse sopra l'elemento.



posso identificare un tag con un nome specifico con
l'attributo id. Si tratta di uno dei principali attributi html che ha il fondamentale compito di consentire di legare l'HTML alle regole CSS!


due regole

1) l'attributo id deve essere senza spazi !

2) l'attributo id specificato (es un solo elemento con id="navbar") deve essere unico nella pagina !


<!-- il paragrafo che segue è identificato come "importante -->
 <p id="importante"> il mio paragrafo </p>
 
<!-- l'elemento div che segue comprende la testata (Header) del mio sito -->
<div id="header">
 .....
</div>
 
<!-- questo elenco non numerato rappresenta la barra di navigazione (navbar) del mio sito-->
 
 <ul id="navbar">
 <li>home</li>
 <li>musica</li>
 <li>cinema</li>
 <li>fotografia</li>
 </ul>




"regola / comando CSS"

formato testo !

strutturato in tre parti, tre componenti

 selettore {proprietà:valore;
 proprietà2:valore2;
 }

esempio facile

 h2#sottotitolo {background-color:#454545;
 color:#d76b23;
 }



esempio complesso

 h2#sottotitolo {background-color:#454545;
 color:#d76b23;
 font-family:Arial;
 text-size:40px;
 border-bottom:2px solid black;
 text-shadow:2px 2px 2px #fff;
 line-height:60px;
}