Struttura base di una pagina HTML
In questo capitoletto vedremo quali elementi compongono la struttura base di un documento Html e li useremo per costruire le fondamenta della nostra prima pagina web.
Software richiesto: editor di testo (non word processor)
1. I tag
Un documento Html per essere elaborato correttamente dal browser deve avere una struttura “scheletro” di base fissa, l’equivalente delle fondamenta per la costruzione di una casa. Con il nostro editor aperto creiamo un nuovo documento e cominciamo scrivendo il tag più importante per la nostra pagina:
<html></html>
In Html i tag si differenziano dal resto del documento per il fatto che sono parole racchiuse tra i segni di maggiore e minore ( < e > ) e quasi tutti necessitano di un tag di chiusura, che altro non è che una ripetzione dello stesso tag preceduto da uno slash ( / ). In questo modo stiamo indicando al documento che tutto ciò che si trova tra <html> e </html> sarà processato come linguaggio Html.
2. Mente e Corpo
Definito il linguaggio il passo successivo è dividere le informazioni contenute in due gruppi, quelle che saranno visibili all’utente e quelle che non saranno visibili all’utente finale, in Html raggruppiamo le informazioni non visibili all’utente nel tag <head> (testa) e quelle visibili nel tag <body> (corpo), quindi scriviamo questi tag nel nostro documento seguendo la sintassi che abbiamo usato per il primo:
<html> <head></head> <body></body> </html>
Nota: l’indentazione è una tecnica di scrittura nel quale si sfruttano spazi vuoti prima di alcune frasi per dargli una specie di ordine gerarchico.
Questo schema di scrittura del codice, che sfrutta tabulazioni per indentare e allineare il testo è il più utilizzato tra gli sviluppatori in quanto permette una rapida consultazione del documento.
Per informazioni visibili all’utente si intende testi, titoli, immagini e oggetti di questo tipo; mentre per informazioni non visibili all’utente ci riferiamo a link per fogli di stile o script esterni, parole chiave per i motori di ricerca e informazioni sul documento.
3. Il “Title” del documento
All’interno di esiste un tag per il quale il discorso del non essere visibile all’utente vale a metà. Si tratta del tag <title> che ci permette di dare un titolo al nostro documento, questo titolo non sarà visibile nel corpo del nostro documento, ma sarà visibile ai motori di ricerca e nella barra superiore di tutti i browser. Essendo un tag che permette sia all’utente che ai motori di ricerca di individuare la pagina, sarebbe sempre meglio evitare di pubblicare sul web pagine prive di tag <title> o con un contenuto non appropriato, nel caso del sito di un’attività la cosa migliore sarebbe mettere il nome del suddetto seguito da una brevissima descrizione.
Inseriamo un tag di titolo allo scheletro Html che abbiamo appena creato:A questo punto salviamo il file con un nome che abbia come estensione .html (per esempio: prova.html) e apriamolo all’interno di un browser per vedere i risultati, se tutto è andato bene senza problemi (e sarebbe difficile averne ora!) vi troverete di fronte ad una pagina completamente bianca con il titolo visualizzato nella parte superiore della finestra del browser.
<html> <head> <title>La mia prima pagina Html</title> </head> <body></body> </html>
Ecco come appare il tag Title nella nostra pagina
A questo punto per velocizzare la creazione delle prossime pagine che realizzeremo vi consiglio di partire sempre da questo file con lo “scheletro” Html di base.
Scrivi un commento