Struttura di un file Html

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Html

Nella lezione precedente si è parlato di come avviene una comunicazione attraverso varie componenti di Internet, ora ci accingiamo a creare una pagina Web secondo le specifiche dell'Html.

Per creare un file Html è sufficiente creare un file di testo col Blocco note e salvarlo con un nome qualunque, magari meglio se indicativo, con estensione .html o preferibilmente .htm, a causa del mancato supporto da parte di sistemi obsoleti di file con estensione superiore a tre caratteri.

Salvare il file come Tutti i File [*.*] nella root (lezione precedente) che si intende utilizzare per il proprio sito.

Esempio: salviamo il file iniziale come default.htm oppure index.htm (nomi preferiti per una homepage) nella cartella myweb sul Desktop o nella cartella Documenti.

Fatto questo, troveremo nella root un file con l'icona col simbolo del browser che utilizziamo come predefinito.

Aprendo il file troveremo una pagina vuota. Per visualizzare il codice sorgente abbiamo due possibilità: 1 tasto destro sulla pagina e selezionare la vice HTML, 2 selezionare la voce HTML dal menu Visualizza.

Aperto il Blocco note possiamo iniziare a scrivere il codice. E' indifferente scrivere il codice Html in maiuscolo o in minuscolo; per questa guida si è scelto di scrivere i Tag in minuscolo.

Iniziamo con la dichiarazione del tipo di documento, il !doctype: 

<!doctype html public "-//w3c//dtd html 4.0//en">
Questo codice risulterà a prima vista incomprensibile, ma più avanti con la pratica risulterà semplice anche ricordarlo, tuttavia la dichiarazione è opzionale.

Esaminiamolo: !doctype indica la dichiarazione del tipo di documento, public indica una pagina di un possibile ente o possessore non statale o governativo, l'alternativa è private. il simbolo - (trattino) indica una pagina non certificate ISO, w3c indica l'organizzazione mondiale del World Wide Web, dtd html 4.0 indica la versione ultima riconosciuta dell'Html, en (english) indica che il documento è scritto con Tag in inglese, quindi è fissa!

Creiamo ora la struttura Html per creare una pagina corretta: 
<!doctype html public "-//w3c//dtd html 4.0//en">
<html lang="it">
 <head>
  <title>La mia prima pagina Web</title>
 </head>
<body>

<!-- Questo è un commento, questo codice non verrà interpretato dal browser -->

<!--

Questo è un commento su più righe

I commenti sono molto importanti per tenere ordine nel codice, ad esempio è possibile scriverci cose del tipo:

QUESTO CODICE SERVE PER "QUESTA COSA" E VA AGGIORNATO OGNI DUE GIORNI

o cose del genere!!!

-->

</body>
</html>
Questa parte è di fondamentale importanza, prego di prestare la massima attenzione, ci accingiamo a spiegare la struttura di una pagina Html. Per visualizzare sulla pagina le modifiche al codice è sufficiente "aggiornare", cliccando l'apposito tasto sulla barra degli strumenti del browser o dalla tastiera con l'utilizzo del tasto F5.

Il Tag <html> indica l'apertura della pagina e lang="it" indica che il contenuto della pagina è in italiano.

Ci troviamo subito di fronte ad un concetto interessante, la differenza tra Tag e attributi. Abbiamo spiegato nella lezione precedente cos'è un Tag, ovvero un comando Html che può essere vuoto o avere una chiusura, (ad esempio </html>), un attirbuto invece è una proprietà attribuibile ad uno o più Tag che può avere un valore, come nell'esempio, oppure agire da solo senza necessitare di un valore.

L'attributo lang="it" è comunque facoltativo. Invito il lettore ad una seconda lettura di questa lezione più avanti dopo aver terminato il manuale, molti concetti risulteranno più chiari con l'aiuto di esempi pratici.

Il Tag <head> è fondamentale nella struttura di un documento, indica l'intestazione della pagina ed è possibile includervi codice che deve essere eseguito prima del caricamento completo della pagina.

Il Tag <title> permette di inserire un titolo nell'apposita barra blu del browser in alto, per intenderci sulla stessa orizzontale dove ci sono i pulsantini per chiudere, minimizzare o iconizzare una finestra.

Il <body> rappresenta il corpo della pagina, ovvero da qui inizia la progettazione fisica.

Quest'ultimo presenta una vasta serie di attributi, esaminiamo quelli che ci serviranno per la maggiore:

Atributo Descrizione
bgcolor Colore di sfondo della pagina, assume un valore letterale (white), esadecimale (#FFFFFF) o RGB (255,255,255)
background Permette di inserire un'immagine di sfondo nella pagina, richiamando, ad esempio, il file "sfondo.jpg" oppure "sfondo.gif"
text Permette di definire il colore del testo per tutta la pagina
link Permette di definire il colore dei link per tutta la pagina
alink Permette di definire il colore dei link attivi per tutta la pagina
vlink Permette di definire il colore dei link già visitati per tutta la pagina
topmargin Permette di definire la distanza tra il bordo superiore della pagina dagli elementi che contiene, utilizzando un valore numerico
leftmargin Permette di definire la distanza tra il bordo sinistro della pagina dagli elementi che contiene, utilizzando un valore numerico
rightmargin Permette di definire la distanza tra il bordo destro della pagina dagli elementi che contiene, utilizzando un valore numerico
bottommargin Permette di definire la distanza tra il bordo inferiore della pagina dagli elementi che contiene, utilizzando un valore numerico
onLoad Permette di far verificare un evento al caricamento della pagina
onContextMenu Col valore "return false;" inibisce l'utilizzo del tasto destro del mouse sulla pagina
scroll Permette di agire sulle barre di scorrimento, col valore "Yes" le lascia li dove sono (predefinito), col valore "No" le elimina e col valore "Auto" le visualizza solo se la pagina è abbastanza lunga da richiederle
style Permette di definire uno stile per lo sfondo o per le caratteristiche della pagina non attribuibili ai singoli elementi (vedi guida ai Css)

Nota: nessuno di questi attributi è obbligatorio, servono solo a rendere il sito meglio formattato ed accattivante, lascio alla fantasia ed alle conoscenze del lettore la possibilità di implementarli nel codice e di verificarne gli effetti.

Vediamo un esempio di come si utilizzano gli attributi, esempio generico che tornerà utile per tutti i Tag Html: 
<tag attributo="valore" attributo="valore">
Per testare quanto imparato prego i lettori di effettuare la seguente prova: creare un file col nome default.htm e di impostare il colore di sfondo nero, il colore del testo bianco (nomi dei colori in inglese), distanza dal bordo destro "50", inibire l'utilizzo del tasto destro del mouse e nascondere le barre di scorrimento solo se non necessarie.

Dalla prossima lezione ci renderemo conto al 100% della validità di questo esempio.

I più cliccati della sezione Html

:: Impedire ad un testo di andare a capo in Html (32.979)

:: Le tabelle Html (31.000)

:: Formattazione del testo in Html (25.042)

:: Referenze dei Tag Html (18.963)

:: Creare tabelle con i bordi curvi (17.800)

:: Guida XHTML (16.237)

:: Inserire un'icona nella barra degli indirizzi di MSIE (13.525)

:: Inserire le immagini in una pagina Html (10.901)

:: Sovrapporre un'immagine ad un layer senza posizionamento assoluto (10.705)

:: Ritorno a capo nei button di form Html (9.528)
IN EVIDENZA
Introduzione ad Ajax ed Asp con Jscri... Creare un sito responsive Pagamenti online con PayPal e PHP HTTP 500 internal server error Stringhe di connessione via ODBC e Ol...
DOWNLOAD
Grafica Internet Manutenzione PC Multimedia Sicurezza Ufficio Webmaster