La struttura di un documento HTML è composta da un contenitore <html> e due sezioni ben distinte: una parte iniziale denominata testa <head> ed una parte centrale denominata corpo <body>
Nella testa (head) vanno inseriti solo quei comandi che inviano informazioni al server (lo spazio web in rete), quali: meta comandi, titolo, e tutto il codice che deve essere letto con una certa priorità: script, dichiarazioni di style, ecc. ecc. tutte cose che a voi in questo momento interessano poco.
Nel corpo (body) va inserito tutto il resto. Tutti questi elementi necessitano del relativo elemento di chiusura: </html>, </head> e </body>
Riassumendo: una struttura tipo in HTML potrebbe essere questa:
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> |
| <html> |
| <head> |
| codice per il server: meta comandi, script, fogli di style, ecc. |
| </head> |
| <body> |
| Codice da visualizzare: testo, immagini, moduli, ecc. |
| </body> |
| </html> |
Ogni volta che ci saranno esempi di codice li troverete all’interno di box colorati come quello sopra, per facilitarne la comprensione useremo box a sfondo giallo per tutto quello che riguarda il codice HTML, box a sfondo verde per tutto quello che riguarda il codice CSS (poi vi dirò di cosa si tratta) ed infine, a sfondo grigio, i risultati degli esempi prodotti dal codice html e/o css.
codice HTML
codice CSS
risultato degli esempi
Per il momento all’interno di <head> non metteremo nulla, si vedrà più avanti cosa inserire, adopereremo quindi soltanto la zona <body>. Avrete notato la prima riga di codice di cui non abbiamo parlato, si tratta di DOCTYPE Questa prima riga è chiamata anche “prologo” ha il compito di informare il browser che si tratta di un documento html relativo a determinate specifiche dettate dal W3C(organo che regola il web), in questo caso versione 4.01 Transitional, potrebbe anche essere omessa ma diventa indispensabile se vogliamo rispettare le regole ed ottenere un codice valido. Essa predispone gli attuali browser ad una corretta interpretazione del codice contenuto nella pagina, non serve impararla a memoria, anche perchè è difficile da ricordare, la si copia e incolla da qui e la si passa poi da una pagina all’altra, se fate uso di un editor specifico per html sarà l’editor stesso a metterla ogni volta che deciderete di creare una nuova pagina.
Col vostro editor ricreate la struttura descritta sopra, fatto questo portatevi col cursore all’interno degli elementi (tags) <body> … </body>. Trattandosi del corpo della pagina è lì che andremo ad inserire del testo, per farlo useremo l’elemento <p> che significa: paragrafo, scriveremo un qualsiasi testo, per esempio: “Ecco la mia prima pagina in html destinata al web.”. Facciamo in modo di chiudere l’elemento <p> con il relativo </p> che decreta la fine del paragrafo e se tutto è stato fatto correttamente dovremo avere una struttura come questa:
| <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> |
| <html> |
| <head> |
| </head> |
| <body> |
| <p>Ecco la mia prima pagina in html destinata al web.</p> |
| </body> |
| </html> |
Digitando il testo potete lasciare più spazi vuoti fra una parola e l’altra o ritornare a capo quante volte volete col tasto invio, non avrà alcun effetto a video, il browser ignorerà gli spazi vuoti se più di uno consecutivamente ed i ritorni a capo ottenuti dalla pressione del tasto invio. Più avanti si vedrà come fare sia per gli spazi che per i ritorni a capo.
A questo punto la nostra prima pagina web è pronta, un po’ scarna è vero, niente colori, niente tipo di font o sfondo, ha soltanto quella semplice frase ma anche così è a tutti gli effetti una vera e propria pagina web, per esserlo davvero manca un piccolo passaggio, dovrà essere salvata nel PC in modo corretto, cioè assegnandogli un nome di vostra preferenza ma con estensione obbligatoriamente di tipo .htm o .html
Se avete usato un editor specifico per html nessun problema, gli date il nome che preferite e sarà l’editor stesso ad aggiungere l’estensione .html trattandosi della pagina iniziale sarebbe meglio chiamarla fin da subito index.html (tutto minuscolo e con html finale) perchè è questo il nome riservato che di solito viene usato per la pagina iniziale. Fatto questo potete passare alla lezione successiva.
Se avete usato un editor per testi questo salverà assegnando al nome scelto un estensione .txt e cambiarlo in html potrebbe non essere facile a causa di un settaggio dello stesso windows che impedisce di vedere le estensioni dei nomi dei files, non vedendole non è possibile cancellarle né rinominarle.
Se sapete come rinominare un file nel vostro PC, trattandosi della pagina iniziale vi basta chiamarla index.html (tutto minuscolo e con html finale). Fatto questo potete passare alla lezione successiva. diversamente bisogna imparare a rinominare il file da txt ad html.
Chi adopera un PC con Windows deve sapere che tutti i files nel computer oltre al nome hanno una loro estensione, questa varia a seconda del tipo di file, sia questo una immagine grafica, un testo, un brano musicale, o qualsiasi altra cosa. L’estensione serve per informare il sistema operativo di quale tipo di file si tratta e di conseguenza con quale programma deve essere aperto e gestito.
Procediamo per gradi, salvate il tutto in formato ascii, cioè testo puro (txt) senza particolari formattazioni, abbiamo detto che trattandosi della pagina iniziale sarebbe meglio chiamarla index.html (tutto minuscolo e con html finale) salvatela nel vostro PC.
Mi rendo conto che se siete dei principianti in senso generale non sia molto semplice capire quello che ho appena detto. Se avete problemi nell’eseguire questa operazione di rinomina leggete queste istruzioni che chiariranno meglio.
Incredibile ma vero, questa operazione del rinomina file rischia di essere la cosa più difficile da fare di tutta la rubrica e non c’entra nulla con HTML. Consapevole che se avessimo adoperato un editor visuale non ci sarebbe stato bisogno di niente altro che non fosse stato scrivere: questa è la mia prima pagina web e salvare…
Preferivate fare una cosa del genere?
Se si, vi informo che avete sbagliato rubrica, questa è dedicata a chi vuole sapere come fare pagine web avendone il pieno controllo e non come farsele fare dai vari editors visuali 🙂
Per essere la prima lezione introduttiva, credo possa bastare, esercitatevi, soltanto dopo aver compreso questo meccanismo ed aver acquisito un minimo di familiarità con la creazione ed il salvataggio dei files in formato html potrete passare alle lezioni successive.
Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.