3. Lezione: Tag e attributi
Scritto da sergio il 29/04/2009 18:59:10
Abbiamo visto come l'html basi la sua sintassi sui tag che delimitano un contenuto assegnandogli un significato principalmente logico, secondo quello che vogliono le specifiche del XHtml (dove x sta per eXtended).
I tag possono pero' avere degli "attributi" per specificare meglio alcuni dettagli della loro funzione.
Ad esempio se un tag mi identifica una "sezione" del mio documento (vedremo in seguito quali tag possiamo usare), sara' buona norma assegnare a questa sezione un nome per identificarla all'interno nell'intero documento. Questa assegnazione viene fatta attraverso gli attributi del tag.
Vediamo la sintassi generica:
Code:
<tag1 attributo1="valore">Contenuto</tag1>
Diamo qualche regola generale:
- Scriviamo il codice html tutto in minuscolo (sia i tag che gli attributi)
- Mettiamo il valore degli attributi sempre tra doppi apici
Queste non sono regole che causano errori, ma si tratta semplicemente di "bello stile", molto importante quando di parla di html.
E ora la parte "pratica", riprendiamo la struttura della pagina html a cui eravamo giunti nella precedente lezione e, all'interno del corpo ("body") inseriamo 2 sezioni con un contenuto:
Code:
<html>
<head>
</head>
<body>
<div id="sezione1">
Sezione 1 del documento
</div>
<div id="sezione2">
Sezione 2 del documento
</div>
</body>
</html>
Possiamo provarla come spiegato nella 1. lezione creando un file con un qualsiasi editor di testo, salvandolo poi con estensione .htm o .html e quindi aprire il file con il browser.
Notiamo come il tag "div" circoscriva delle porzioni del documento e si possa identificare queste porzioni con l'attributo "id" del tag. Vediamo anche come il browser interpreti il tag "div" inserendo un'interruzione di riga tra le due sezioni.
[ATTENZIONE: il browser non manda a capo il contenuto per il semplice fatto che io l'ho editato su righe diverse. Potete provare a mettere tutto il codice precedente su una sola riga e salvare: otterrete lo stesso risultato.
Markup Language significa che il browser non fa nulla che non sia scritto esplicitamente tramite i tag html.]
Abbiamo quindi creato un documento con una Sezione 1 e una Sezione 2. A quale scopo serve identificare le sezioni con un nome, come e dove verranno usati questi nomi lo scoprirete piu' avanti e in particolare nei corsi di CSS e di JavaScript.
Per ora e' tutto, a presto!
Ultimo aggiornamento 11/01/2020 10:20:11