Il sito per imparare gratuitamente a fare pagine Web

La Struttura HTML














Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



Andrea Bianchi © www.web-link.it  Primi Passi in HTML 4.01 - Ver. 2.7.0 - Settembre 2011
 

La struttura di un documento HTML è composta da due sezioni ben distinte: una parte iniziale denominata testa <head> ed una parte centrale denominata corpo <body>

Nella testa (head) vanno inseriti quei comandi che inviano informazioni al server (lo spazio web in rete) meta comandi, titolo, ecc. o quel codice che deve essere letto con una certa priorità: script, fogli di style, ecc. tutte cose che a voi al momento interessano poco.
Nel corpo (body) tutto il resto. Anche questi elementi, necessitano del relativo elemento di chiusura: </head> e </body>

Riassumendo: una struttura HTML tipo 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>

Per il momento all'interno di <head> non metteremo nulla, si vedrà più avanti cosa inserire, adopereremo quindi soltanto la zona <body>. Avrete notato una riga di codice iniziale di cui non abbiamo parlato, si tratta di DOCTYPE Questa prima riga chiamata "prologo" ha il compito di informare il browser che si tratta di un documento html relativo a determinate specifiche dettate dal W3C, in questo caso versione 4.01 Transitional, potrebbe essere omessa ma diventa molto importante se vogliamo rispettare le regole ed ottenere una validazione. Essa predispone gli attuali browser ad una corretta interpretazione del codice contenuto nella pagina.

Create col vostro editor la struttura sopra descritta e portatevi col cursore all'interno degli elementi (tags) <body> ... </body>. Inseriremo del testo, per farlo useremo l'elemento <p> che significa: paragrafo, andremo a scrivere un qualsiasi testo, per esempio: "Ecco la mia prima pagina in html destinata al web.". Facciamo in modo di chiudere anche l'elemento <p> con il relativo </p>. Se tutto è stato fatto correttamente dovremo avere una struttura di questo genere:

<!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>

Non importa come avete disposto le frasi del testo, potete lasciare più spazi vuoti fra una parola e l'altra o ritornare a capo quante volte volete col tasto invio, nessuna importanza; il browser ignorerà il vostro modo di scrivere limitandosi a leggere ed interpretare soltanto quello che avete scritto, più avanti si vedrà come lasciare più spazi vuoti o come andare a capo.

A questo punto non resta che salvare il tutto. Se il vostro editor non è specifico per html, fate in modo di salvare in formato ascii, cioè testo puro (txt).

Assegnategli un nome: quello che preferite, e salvatelo nel vostro PC, trattandosi della pagina iniziale sarebbe meglio chiamarla fin da subito index.html (tutto minuscolo e con html finale) perchè è questo il nome esatto che di solito il server in rete va a ricercare come pagina iniziale del sito quando si digita il solo url. (voi digitate www.web-link.it ed il server richiama www.web-link.it/index.html automaticamente)

Se non avete un editor specifico che salva direttamente in html con molta probabilità il vostro file avrà un estensione di tipo .txt, ovvio direte voi, dal momento che è stato scritto con un normale editor per testi.

Rinominate questo file in modo che abbia come estensione html altrimenti il browser non riuscirà a capire che dentro ci sono i tags in html e non potrà interpretarlo nel modo corretto.

A proposito di questa operazione per rinominare il file dovrei fare alcune precisazioni: l'operazione in se è molto semplice, basta un clik sul nome ma chi adopera Windows potrebbe non vedere l'estensione finale del file così salvato. Questo perchè windows non è impostato per farvi vedere le estensioni dei files ma soltanto i loro nomi, in questo caso rinominarlo servirebbe a poco dal momento che si aggiungerebbe html al nome lasciando però di fatto il file in formato txt.

  Mi rendo conto che non sia molto semplice capire quello che ho appena detto se siete dei principianti del PC in senso generale. Per chi avesse problemi nel fare questa operazione vi rimando a questo esempio che credo potrà chiarire meglio.

Incredibile ma questa operazione del rinomina potrebbe essere la cosa più difficile da fare 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 una cosa fatta in quella maniera?
Se si, avete sbagliato rubrica, questa è infatti dedicata a chi vuole sapere come fare le pagine web e non come farle fare ai vari editors visuali :-)

Per essere la prima lezione introduttiva, credo possa bastare, esercitatevi, soltanto dopo aver compreso questo meccanismo ed aver acquisito quel 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.



Andrea Bianchi