20 ottobre 2008

CREARE SITI:
inoltriamoci nell'HTML


Per andare a capo

Il risultato della prima prova può indurci a credere che basti cambiare suffisso nel nome del documento (da prova1.txt a prova1.html) per ottenere quanto voluto.

Facciamo un'altra prova per toglierci subito ogni illusione.

Modifichiamo prova1.txt con Blocco note scrivendo una frase con molti spazi tra parole e su almeno due righe. Salviamolo sia come .txt che come .html.




La sorpresa ce l'abbiamo quando apriamo il nuovo documento prova1.html cliccando sulla sua icona:


Visto! Le sequenze di spazi e anche le andate a capo sono state sostituite da un singolo spazio. Perché?

Il motivo è semplice: il browser, che ha anche il compito, tra altre cose, di interpretare e presentare i documenti HTML, riceve un documento con suffisso .html e quindi lo traduce come se fosse scritto in HTML. E in HTML si può inserire solo uno spazio e occorre indicare l'andata a capo con un preciso comando, assente nel nostro testo.

Occupiamoci dell'andata a capo (degli spazi multipli ci occuperemo in altro momento).

Per andare a capo è possibile usare due elementi del linguaggio:

Con il primo (br per break) si interrompe la riga andando a capo all'interno dello stesso paragrafo, con il secondo (p per paragrafo) si delimita un intero paragrafo, quindi con andata a capo all'inizio e alla fine.
Facciamo un esempio, creando un secondo documento, prova2.txt e salvandolo anche come prova2.html.



L'apertura di prova2.html evidenzia il risultato ottenuto.



Un semplice documento completo

Anche se un browser interpreta qualsiasi documento di testo archiviato con il suffisso .html come un documento HTML, è buona prassi strutturare il documento secondo alcune semplici regole (e con un po' d'ordine, non strettamente necessario, per facilitarne la lettura). Come nell'esempio di figura:

L'intero documento è l'elemento html, delimitato dai marcatori html e /html. Esso comprende due elementi:

  1. l'intestazione, delimitata dai marcatori head e /head

  2. il corpo, delimitato dai marcatori body e /body

L'intestazione, a sua volta, comprende l'elemento titolo, delimitato da title e /title.

Il corpo contiene alcuni elementi paragrafo e, all'interno di uno di questi, un elemento di interruzione.

Si osservi che:


  • esistono elementi pieni (all'interno c'è del testo o altri elementi), caratterizzati da un marcatore iniziale e uno finale. Per esempio html (e /html), head, title, body, p

  • esistono elementi (per ora ne abbiamo visto solo uno, ma ce ne sono altri) vuoti, come br /

  • i marcatori sono individuati da < >.

  • abbiamo scritto in maniera ordinata, ma avremmo potuto scrivere tutto in un'unica stringa senza interruzioni. Il browser fa caso solo ai marcatori.

Il risultato nella finestra del browser è il seguente:


Notiamo subito che la barra superiore del browser riporta quanto scritto nell'elemento title. Il resto si spiega da solo.

Fin qui i risultati sembrano molto modesti. Caratteri piccoli e neri (tutti in Times New Roman). Sfondo bianco. Non si riesce a ottenere niente di meglio?

Lo vedremo nel prossimo post sull'argomento.

***


INDICE


Nessun commento: