2.1 Introduzione ai tag
HTML-documentsIl markup si basa sui tag . Che cos'è un tag ?
I tag sono stati inventati negli anni '70 in modo che le persone potessero aggiungere informazioni di servizio ai documenti per i programmi che elaborano questi documenti.
Tag- questa è una parola chiave (funzionale), molto spesso in inglese, che è stata racchiusa tra parentesi angolari (più e meno caratteri) in modo che i programmi non confondano tag e parole ordinarie in inglese.
Il tag può anche contenere varie informazioni di servizio che possono essere utili al programma che elabora il documento.
Testo di esempio con un tag:
<a href="http://codegym.cc/about">
Link to something interesting
</a>In questo esempio, vediamo il testo, il tag "a", così come le informazioni sul servizio - gli attributi del tag. Di seguito imparerai di più su di loro.
2.2 Tipi di tag: apertura, chiusura, tag vuoto
I tag sono di diversi tipi. Innanzitutto, sono singoli e doppi. I più comuni sono i tag accoppiati . E come probabilmente hai già intuito, vanno sempre in coppia. Sono anche chiamati apertura e chiusura.
Il tag di apertura è solo una parola chiave tra parentesi triangolari. Esempio:
<h1>Il tag di chiusura è simile al tag di apertura, ma la parola chiave è preceduta da una barra. Esempio:
</h1>Il tag di apertura può contenere informazioni sul servizio - attributi, quello di chiusura - no . Il tag iniziale è sempre il primo di una coppia. Il tag di chiusura NON può andare prima nel testo, e poi il tag di apertura. Questo HTML-documentnon sarà valido.
I tag singoli non hanno un tag di chiusura. L'elenco di tali tag è definito da HTML-standard. Esempi di tali tag:
<br>- interruzione di linea;<img>- immagine.
A proposito, un tag accoppiato, se non contiene informazioni all'interno, può essere scritto in forma abbreviata . Esempio:
<h1/>Questo non è un singolo tag, ma un tag di coppia vuoto. È come sia tag chiusi che aperti allo stesso tempo. Differisce dal tag chiuso in quanto la barra è alla fine (prima della seconda parentesi triangolare).
2.3 Albero dei tag
E informazioni più importanti sui tag accoppiati. Possono essercene molti in un documento e possono essere nidificati. Cosa significa? Ciò significa che qualsiasi testo all'interno HTML-documentpuò essere incorniciato (avvolto) con tag, anche se contiene altri tag. Esempio:
<html>
plain text
<a href="http://codegym.cc/about">
Link to something interesting
</a>
some other text
</html>In parole povere, nel testo html può verificarsi una sequenza di tag:
<h1> <h2> </h2> </h1>Ma non può essere:
<h1> <h2> </h1> </h2>Se il tag di inizio <h2>è all'interno di una <h1>coppia di tag, anche il tag di fine corrispondente </h2>deve trovarsi all'interno di una <h1>coppia di tag.
Pertanto, tutti i tag del documento formano una sorta di albero dei tag . Prima viene il tag di primo livello che avvolge l'intero documento, di solito chiamato <html>, ha coppie di tag figlio, hanno il loro e così via.
In realtà, il programma che elabora un documento con tag lo vede esattamente così: come un albero di tag con del testo all'interno.
2.4 Attributi
Le informazioni sui tag non sarebbero complete se non si parlasse di attributi. I singoli tag e i tag iniziali dei tag accoppiati possono avere . Questi attributi contengono informazioni utili sul contenuto del tag.
Un tag può contenere diversi attributi e hanno la seguente forma generale:
<tag name1="value1" name2="value2">Ogni attributo è specificato come coppia di Namee meaning. Ci può essere qualsiasi numero di attributi.
«<»Ma un programmatore esperto porrà immediatamente la domanda: cosa fare se è necessario utilizzare un testo contenente caratteri o «>»virgolette come valore di attributo ?
| Nome simbolo | Simbolo | Voce HTML |
|---|---|---|
| virgolette doppie | " | " |
| E commerciale | & | & |
| Meno di simbolo | < | < |
| Più simbolo | > | > |
| Spazio | ||
| singola citazione | ' | ' |