Swappa : Utenti / Corso rapido HTML: Struttura

 :: Corso rapido HTML: Struttura ::

Struttura di un file HTML

Il codice sorgente di una pagina web si estende tra i due tag di apertura e chiusura <HTML> e </HTML>, che segnalano al browser di considerare il testo che delimitano come istruzioni HTML e non come testo. Il codice si divide ora in due sezioni:

l' intestazione, compresa tra i tag <HEAD> e </HEAD>. Contiene una serie di informazioni che non vengono visualizzate nella finestra di navigazione, ma che descrivono alcune caratteristiche della pagina e quali script o fogli di stile devono essere importati. Tra le caratteristiche ci sono ovviamente il titolo, l'autore, la descrizione e i meta tag (o parole chiave), molto utili per l'indicizzazione nei motori di ricerca;
il corpo della pagina, contenuto tra i tag <BODY> e </BODY>, dove viene scritto ciò che verrà effettivamente visualizzato nel browser: testo, collegamenti a immagini o indirizzi web, e via dicendo.

Riassumendo, avremo questa struttura:

<HTML>

<HEAD>

</HEAD>

<BODY>

Corpo della pagina.

</BODY>

</HTML>

Da notare come l'annidamento dei tag <HEAD> e <BODY> sia evidenziato con un diverso allineamento rispetto al tag in cui è contenuto (<HTML>). Questo sistema si chiama indentazione e rende i sorgenti molto più leggibili a noi umani (al browser non gliene frega niente: per lui le istruzioni potrebbero stare tutte sulla stessa riga). Altra segnalazione: l'HTML non fa distinzione tra caratteri maiuscoli o minuscoli, quindi per lui <BODY> <body> o <BOdy> sono la stessa identica cosa. Per convenzione si tende a scriverli maiuscoli per renderli più evidenti nel codice.

Intestazione

Dei possibili tag che si possono includere nell'intestazione di un file HTML, riportiamo solo <TITLE>, con cui si definisce il titolo della pagina web, visualizzato nella barra del titolo della finestra del browser. Questo tag richiede un'istruzione di apertura e una di chiusura, per cui la sintassi corretta è:
<TITLE> Titolo_della_pagina </TITLE>

Corpo della pagina

Il corpo principale del documento HTML è la sezione in cui vengono specificati tutti i contenuti da visualizzare nel browser: testi, immagini, collegamenti ipertestuali e via dicendo.

E' possibile indicare alcune caratteristiche generali della pagina scrivendole direttamente come attributo del tag <BODY> iniziale. Se ad esempio volessimo impostare un colore di sfondo alla pagina, potremo utilizzare l'attributo BGCOLOR, secondo la seguente sintassi:
<BODY BGCOLOR="#codice_del_colore">
, dove il codice_del_colore andrà scritto utilizzando la notazione esadecimale. Per esempio, il codice FFFFFF equivale al bianco, il codice 000000 al nero, il codice FF0000 al rosso e così via. Per impostare uno sfondo rosso alla pagina dovrò perciò scrivere:
<BODY BGCOLOR="#FF0000">

Per conoscere i valori esadecimali dei vari colori, potete andare su questa pagina.

Esercizio di ripasso

Forza, creiamo una benedetta pagina HTML! Aprite un qualsiasi editor di testi - perfino Blocco Note di Windows può andar bene! - e riscrivete il codice in blu riportato qui sotto:

<HTML>

<HEAD>

<TITLE> Red Passion </TITLE>

</HEAD>

<BODY BGCOLOR=”#FF0000”>

Una pagina molto bella e decisamente utile.

</BODY>

</HTML>

Bastano queste poche righe perché la pagina sia formalmente pronta.
Ora salvatela, seguendo questa procedura:

aprite il menu File e fate clic su Salva con Nome;
nella finestra di salvataggio, scegliete la posizione in cui salvare il file;
nella stessa finestra, assegnategli un nome scrivendolo nella casella Nome file. E' necessario specificare (scrivendola per esteso) l'estensione .html o .htm;
fate clic sul pulsante Salva e il gioco è fatto.

Alcune considerazioni sul salvataggio:

la prima pagina di un sito (la home page) viene di solito chiamata index.html o home.html, così da poter essere facilmente riconosciuta. Inoltre, proprio grazie al suo nome standard, potrà essere omessa dall'indirizzo; ad esempio scrivendo http://www.cazzomene.it/index.html o http://www.cazzomene.it si aprirà la stessa fantastica pagina;
quando si assegna un nome al file occorre fare attenzione alla differenza tra maiuscole e minuscole;
bisogna fare attenzione alla posizione in cui si salvano le pagine HTML e i file di immagini: la posizione dei file è di fondamentale importanza nel momento in cui si impostano i rispettivi collegamenti ipertestuali (i link).

Dopo aver salvato la pagina, è possibile aprirla con il browser per verificarne l'aspetto facendo doppio clic sull'icona del file. Se invece si desidera riaprirla con l'editor, basta selezionare il file col tasto destro, evidenziare la voce Apri con dal menu contestuale, e quindi cliccare sull'icona dell'editor testuale.

Lezione Precedente: Nozioni di Base | Prossima Lezione: Testi e ipertesti ?

Guide