 |
     
 |
|
|
|
| ||||
|
|
Il documento HTML (che possiamo chiamare semplicemente document) può essere un file con estensione html o htm presente su un server web, oppure può essere un documento dinamico, non presente da nessuna parte, ma inviato ad un browser da un programma presente su un server web o con questo in relazione, in risposta a specifiche richieste dell'utente. In tutti i casi la struttura del "documento" è sempre la stessa. Il documento HTML è formato da due componenti:
L'innerHTML dell'elemento HTML è composto da due elementi figli (figli o child in quanto contenuti al proprio interno, e che, ovviamente, fra di loro sono fratelli o sibling). Citiamo i nomi in inglese (child, sibling, document, innerText, ecc.) non a caso, in quanto si utilizzeranno negli script per manipolare gli elementi (in particolare gli elementi XML). Questi due elementi figli di document sono: l'elemento HEAD e l'elemento BODY. Prendiamo il contenuto dell'elemento BODY, che abbiamo inserito nell'esempio delle lezioni precedenti, che riportiamo per comodità di seguito: <body>
<h1>
DHTML Tutorial
</h1>
<p align="center" class="Autore">
Tizio Caio
</p>
<h2 align="right">
Introduzione
</h2>
<p>
HTML è l'acronimo (la parole è formata
dalle iniziali) di "
<strong>
HyperText Markup Language
</strong>
", che possiamo tradurre con
<strong>
"Linguaggio
</strong>
basato sui
<strong>
marcatori per ipertesti".
</strong>
</p>
<p>
Sono quindi tre i termini che
costituiscono il nome HTML:
linguaggio, marcatori ed ipertesti.
</p>
<h3>
1) Linguaggio
</h3>
<p>
L'HTML è ovviamente un linguaggio
per computer,
non certo un linguaggio umano, come
l'italiano o l'inglese.
E' un linguaggio che serve
<strong>
per dare istruzioni
ad un computer
</strong>,
per dirgli di fare delle cose.
Le istruzioni per il computer sono
scritte in testo normale o ascii,
riconoscibile da qualunque computer.
</p>
</body>
Vediamo come l'elemento body ha un suo innerHTML che contiene molti elementi figli (child). Un elemento H1, che ha come innerText la stringa: "DHTML Tutorial" Poi un elemento P, che ha come innerText la stringa "Tizio Caio" ed ha due attributi align="center" e class="autore". Un elemento H2, che ha come innerText la stringa "introduzione" e un attributo align="right". Vediamo ancora il prossimo elemento, che è un altro elemento P che contiene al proprio interno degli altri elementi chiamati STRONG. Vediamolo bene nella seguente tabella:
<p>
HTML è l'acronimo
(la parole è formata
dalle iniziali) di "
<strong>
HyperText Markup Language
</strong>
", che possiamo tradurre con
<strong>
"Linguaggio
</strong>
basato sui
<strong>
marcatori per ipertesti".
</strong>
</p>
Vedete che l'elemento P ha, oltre ad un innerText, anche un innerHTML. L'innerText è il seguente:
Eventuali tag non sono quindi considerati, o se lo fossero non verrebero interpretati come tag HTML ma come semplici caratteri di testo. L'inner HTML comprende invece gli elementi figli, che danno nel codice:
E nel browser: HTML è l'acronimo (la parole è formata dalle iniziali) di " HyperText Markup Language ", che possiamo tradurre con "Linguaggio basato sui marcatori per ipertesti". Vi ricordo che " è il codice per far apparire nel browser le virgolette. Se inserite direttamente potrebbero dar luogo a caratteri diversi in sistemi operativi non Microsoft. Gli elementi STRONG entro P sono elementi figli (children) di P, e volendo nipoti di document. Il primo elemento STRONG ha come innerText la stringa "HyperText Markup Language". Non avendo tag HTML al proprio interno, l'innerHTML coincide con l'innerText. Se vogliamo, possiamo definire come elemento ogni parte di un testo, anche le singole lettere. A tal fine possiamo usare il tag chiamato <SPAN> (spanna o pezzo), che definisce un pezzo di un testo anche interno ad un paragrafo, senza eseguire nessuna formattazione. Quindi noi potremmo avere un elemento paragrafo, che contiene la frase: "questo è HTML", nel quale ogni lettera è un elemento figlio di P:
<P>
<SPAN>Q</SPAN><SPAN>u</SPAN>
<SPAN>e</SPAN><SPAN>s</SPAN>
<SPAN>t</SPAN><SPAN>o</SPAN>
<SPAN>´</SPAN>
<SPAN>H</SPAN><SPAN>T</SPAN>
<SPAN>M</SPAN><SPAN>L</SPAN>
</P>
Abbiamo inserito un segno di a capo (che equivale ad uno spazio) dopo l'elemento o e dopo il codice della e acuta (é), in modo da far apparire la scritta con gli spazi giusti: Questo é HTML. Vediamo come appare un documento che ha per innerHTML dell'elemento BODY gli elementi della tabella precedente. Aprite notepad e scrivete (o copiate o incollate) il codice precedente, inserendolo entro il tag body, che a sua volta deve stare entro il tag HTML. Nel browser dovreste vedere il semplice innerText di P (in quanto l'elemento span non ha nessun effetto sulla formattazione):
Quindi ogni lettera di P (Paragrafo) è un elemento. In un documento HTML possiamo definire come elemento qualunque cosa. Nel documento dell'esempio abbiamo un elemento P che ha 11 elementi figli di tipo SPAN. Nella prossima lezione vedremo come identificare gli elementi HTML.
|
Per informazioni e commenti: asm@asm-settimo.it - Note sul copyright
statistiche accessi al sito (dal 2 luglio 2003)
Statistiche
complessive con il sito Centro di Competenza sul SUAP (dal 5/6/1999)
|
