Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
vuoi
o PayPal
tutte le volte che vuoi
Specifiche dei delimitatori
Il delimitatore STAGO (Start of TAG Open) è rappresentato dal carattere "<".
Il delimitatore ETAGO (End of TAG Open) è rappresentato dal carattere "<\”".
Il delimitatore TAGC (TAG Close) è rappresentato dal carattere ">".
Document Type Definition
Nella DTD vengono specificate delle regole per verificare la correttezza strutturale del documento creato. Questo tipo di definizione permette di dichiarare un modello per una classe di documenti utilizzando dei costrutti di markup. La dichiarazione può essere esterna o interna al documento di riferimento. È la dichiarazione DTD del documento HTML che usualmente viene indicata prima che venga scritto il documento vero e proprio.
Elementi
La struttura generica di una dichiarazione è: <!ELEMENT NOME ST ET CONTENTMODEL>. In questo esempio si può notare che vengono definiti alcuni elementi tipici di HTML4. È importante notare che "“-"
“indicano l’obbligatorietà di apertura e chiusura dei tag dell’elemento associato. Alla fine si aggiunge il content modelseguito dalla relativa molteplicità (‘?’ = 0 o 1; ‘*’ = 0 o più; ‘+’ = 1 o più).e rappresentano content model rispettivamente di qualsiasi elemento, nessun elemento edANY, EMPTY #PCDATAelementi gestiti e parsati dal browser. 7I separatori ‘,’ e ‘|’ indicano rispettivamente e ordinate.AND OREsempio:La seconda tabella non è valida in quanto l’elemento è inserito dopoTFOOT TBODYviolando l’ordine nella dichiarazione nella prima riga del DTD.
AttributiPer dichiarare la lista di attributi possibili per ognielemento si utilizza che comprende nome,ATTLISTtipo e valore di default per gli attributi dichiarati.N.B. CDATA è un tipo di attributo a caratteri, non parsato dal browser ma definito esternamente.N.B. È possibile utilizzare
come tipo anche un’entità definita. I valori di default possono essere (determinato internamente dall’applicazione), #IMPLIED #REQUIRED (obbligatorio) e (si tratta di un valore preciso). #FIXED
Entità
Le entità in SGML sono delle macro, quindi delle definizioni riutilizzabili sia nel DTD che nel documento vero e proprio. Si definiscono, ad esempio:
Tutti quei caratteri utilizzati nel markup possono essere richiamati tramite entity name o entity number:
- < : oppure < <
- > : oppure > >
- & : oppure & &
- “ : oppure " "
- ‘ : oppure ' '
Esempi di utilizzo errato di HTML
Nell’esempio errato lo sviluppatore ha voluto utilizzare i tag e in modo da indicare un testo di maggiore dimensione rispetto all’altro. L’utilizzo corretto invece si nota nel terzo frammento di codice in cui e sono utilizzati per definire una gerarchia mediante il tag hgroup.
Un altro esempio di uso errato di HTML è l'utilizzo dei tag di tabella per poter separare paragrafi diversi ignorando la logica semantica del documento a favore di quella presentazionale.
Strumenti di stile utilizzati in HTML: Esistono degli elementi HTML che fungono da container o divisori che non sono associati a nessun significato semantico, ma hanno scopo di presentazione, stile o scripting.
Gli elementi <div> (tipo block-level) e <span> (inline) sono utilizzati per raggruppare altri elementi e renderli target quando si utilizzano script o layout, anche mediante gli attributi id e class.
Per modificare gli stili grafici si utilizza un foglio di stile oppure inserire degli stili inline.
Struttura di un documento HTML: Un elemento fondamentale, che costituisce un elemento DTD di SGML (nelle versioni precedenti ad HTML5), è il <!DOCTYPE html> inserito come primo tag all'interno del documento HTML. Eventuali definizioni di doctype possono essere:
in forma chiave-valore.
meta: Elemento meta è possibile inserire il charset, cioè il set di caratteri da utilizzare (in HTML5 è suggerito sempre UTF-8). È inoltre spesso consigliato di inserire anche autore e descrizione come definizione metadati, in modo da migliorare il posizionamento nei motori di ricerca (Search Engine Optimization).
Una viewport è una "finestra virtuale" (larghezza visualizzata della pagina web) in cui sono visualizzate le pagine web, definita in base al dispositivo di utilizzo. Anche questo attributo può essere incluso nel tag meta.
Un altro attributo associato all'elemento meta è http-equiv che ha lo scopo di specificare alcuni header HTTP nel documento HTML: si tratta di header utilizzati prima o durante il rendering della pagina.
Corpo di un documento
Tutta la parte visibile della pagina è racchiusa all'interno dell'elemento body.
Gli elementi di base gerarchizzati più comuni sono
con l'elemento ul. Esempio di formattazione del testo utilizzando tag HTML: ```htmlGli header (h1, h2, h3, h4, h5, h6) costituiscono tutti elementi di blocco.
I browser presentano delle definizioni di default per gli header e per i paragrafi in termini di dimensione e fontweight. I motori di ricerca inoltre indicizzano le pagine web anche con riferimento a questi elementi di blocco.
Ulteriori elementi fondamentali che forniscono informazioni interne al testo sono enfasi e importanza, definiti rispettivamente con gli elementi em e strong. Sono elementi semantici e spesso confusi con gli elementi i e b> che sono elementi presentazionali, anche se HTML5 ha ridefinito anch'essi come elementi semantici.
Attenzione: non bisogna utilizzare questi due tag come indicazione di testo corsivo e grassetto ma solo in modo semantico; la parte presentazionale verrà rimandata al CSS.
Liste ordinate e non ordinate
In HTML le liste possono essere di due tipologie:
- Ordinate, ordered list realizzate con l'elemento ol;
- Non ordinate, unordered list realizzate con l'elemento ul.
- Ogni elemento della lista è indicato con gli elementi <li>
- Le liste e i relativi elementi sono elementi semantici da poter successivamente renderizzare con CSS. (per esempio, che semanticamente è una lista di link).
Collegamenti ipertestuali
I collegamenti ipertestuali vengono realizzati con l'elemento inline <a> anche se è possibile realizzare anche il wrapping di elementi block-level. In particolare, è l'attributo href a specificare l'URL di destinazione; gli indirizzi possono essere assoluti (quindi dovranno essere specificati per intero) o relativi, e possono includere anche dei frammenti identificati con #.
Attenzione: per convenzione URL, i frammenti fanno riferimento al valore stringa inserito come attributo id.
Altri attributi significativi sono:
- target: specifica la descrizione visibile del link quando ci si posiziona con il mouse;
- title: indica di aprire
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo
