Ottobre 17th, 2008 at 4:31pm
Come scrivere i tag del codice sorgente html
|
La struttura di un tag
I tag sono elementi chiave, etichette o marcatori che utilizziamo per far comprendere al browser come deve raffigurare un testo espresso in un linguaggio markup.l’HTML utilizza i tag per modificare l’aspetto dei caratteri del testo, per creare un certo tipo di impaginazione, per creare collegamenti con altri testi, per creare link ed arrichire il testo con elementi fotografici e multimediali. In ogni pagina che vogliamo creare per il nostro sito web, dobbiamo inserire una serie di marcatori, chiamati TAG, a cui affidiamo la visualizzazione della nostra pagina, i TAG hanno differenti nomi a seconda della funzione per cui vengono usati. I tag dobbiamo inserirli tra parentesi uncinate <TAG>, la chiusura del tag viene indicata inserendo una / (slash ) e perciò per chiuderlo dobbiamo usare la scritta </TAG>. Il contenuto che ci interessa, dobbiamo inserirlo tra l’apertura e la chiusura del tag medesimo.
Seguendo questa forma:
<TAG attributi>il contenuto che desideriamo</TAG>
Questo è un esempio, di una sintassi che ci serve per disporre un testo giustificato al centro:
<P align=”center”>testo desiderato</P>
da questo esempio capiamo che la struttura di un attributo è uguale a; attributo=”valore”
Quindi la struttura da scrivere per un tag diventerà:
<TAG attributo_1=”valore1″ attributo_2=”valore2″>contenuto</TAG>
Esistono dei tag senza contenuto, ad esempio quelli che indicano la posizione delle immagini, questi tag non hanno neanche bisogno di essere chiusi.
Quindi il codice sintassi da scrivere sarà:
<TAG attributi>
Eccovi un esempio per l’inserimento di un immagine con estensione .jpg
<IMG widht=”100″ height=”30″ src=”immagine.jpg” alt=”immagine”>
come potete notare questo tag non lo chiudiamo. Questo particolare tipo di tag viene chiamato empty, in italiano vuoto
.
Molto spesso dovremmo usare una caratteristica importante che ci concede di fare il codice HTML, e cioé annidare i vari TAG uno dentro l’altro.
Eccovi un esempio:
<TAG1 attributi>contenuto 1<TAG2>contenuto 2</TAG2></TAG1>
In base a questo concetto possiamo creare un teso con queste caratteristiche:
<P align=”right”>testo 1<P align=”left”>testo 2</P></P>
in questo caso nella nostra pagina il browser farebbe apparire 2 righe, di cui nella prima la scritta testo1 la vedremmo sulla destra dello schermo, e nella seconda riga vedremmo la scritta testo2 sulla sinistra dello schermo.
Con la possibilità di annidare i TAG possiamo fare delle formattazioni successive al testo che vogliamo inserire.
In pratica l’apertura e la chiusura di un tag si trovano sulo stesso livello, mentre il contenuto inserito viene spostato verso la destra del tab: questo non è solamente un fattore visivo, ma la condizione di apertura e chiusura del tag viene mantenuta anche se scriviamo in verticale il documento.
Con questa procedura chiamata indentazione, il codice HTML risulta più facilmente leggibile.
Se guardate questi due esempi vedete che riportano allo stesso risultato, ma il secondo ci permette di seguire meglio la sintassi del documento, già in un breve codice, immaginatevi se fosse l’intera pagina che dobbiamo creare a dover essere scritta su una sola riga, che difficoltà ci creerebbe.
confrontate:
<P align=”right”>testo 1<P align=”left”>testo 2</P></P>
con:
<P align=”right”>
testo 1
<P align=”left”>
testo 2
</P>
</P> |
Qualsiasi browser questi due codici sorgente li legge come se fossero uguali, ma per chi deve scriverli la struttura del secondo rimane molto più facile da seguire.
Un sistema valido, per fare in modo di riuscire a interpretare meglio il nostro codice è quello di inserire dei commenti nei punti più importanti della nostra pagina, i commenti sono indicazioni utili a chi scrive la pagina, ma il browser non li legge. questa operazione ci permetterà di seguire più facilmente il codice, anche in caso di scritture molto lunghe e complicate.
Per inserire un commento dovremmo scriverlo in questo modo:
<!– questo è un commento –>
questa scritta ci permette di dare dei titoli a vari punti della pagina che stiamo scrivendo.
Per esempio:
<!– menu –>
<!– introduzione –>
<!– tabulato –>
La stessa scrittura la possiamo mettere anche alla fine del tratto interessato dal commento.
Per esempio:
<!– finemenu –>
Nel prosimo post inizieremo a vedere la struttura della pagina
Se avete dei problemi e volete consultarci Mail
Questi consigli sono offerti dal Computer Club Di Salis Piermario, in Corso Saracco 80,
tel: 0143 835236
|
|