Prima che Internet entrasse nelle nostre vite, così come lo conosciamo oggi, la maggior parte delle informazioni che potevamo reperire derivavano dalle notizie riportate dai media e da quelle presenti sui quotidiani cartacei e sulle riviste specializzate.
Oggi l’informazione corre sul Web sfruttando la miriade di siti e social esistenti che, come un classico giornale che si rispetti, presentano una struttura ben definita. Una struttura che non si discosta tanto da quella adottata per redarre le pagine di un giornale fatto di “carta e ossa”.
La maggior parte degli articoli presenti nelle pagine dei quotidiani sono strutturati allo stesso modo di quelli che vengono pubblicati in rete. Per quale motivo? Perché mantenere una struttura semplice e ben definita consente al lettore di capire meglio quello che l’autore vuole comunicargli.
Da questo capirete come sia importante per uno sviluppatore di siti Web riuscire a strutturare al meglio le pagine che andrà a costruire.
Indice dei contenuti:
- Com’è strutturata una pagina Web
- Come editare una pagina Web
- Come visualizzare una pagina Web nel browser
Com’è strutturata una pagina Web
Immagina una pagina Web come se fosse un quotidiano. Quando la guardi vedi un titolo, un testo e delle immagini. L’insieme di questi elementi, che poi possono essere composti da altri (come un sottotitolo, dei video, delle annotazioni, etc.) formano la struttura del contenuto.
Anche altri documenti cartacei, come i moduli , possono essere perfettamente riprodotti sotto forma di pagina Web, così come le pagine che crei quando utilizzi programmi di videoscrittura come Word di Microsoft oppure Writer di Libre Office.
Come editare una pagina Web
Per fare in modo che un browser Web interpreti la struttura di un documento o di un testo scritto su un foglio di carta, devi utilizzare il linguaggio HTML (HyperTest Markup Language).
In questo post ti farò vedere come deve essere editata una pagina Web per essere correttamente letta dal browser. Per scrivere le righe di codice ci serviremo del classico blocco note di Windows o di una uguale alternativa.
Lo screenshot che vedi sotto è un documento di prova.
Questo è il codice HTML impiegato per creare una pagina Web che presenta gli stessi contenuti del documento visto sopra.
Come puoi notare sono presenti degli elementi racchiusi all’interno di parentesi angolari che prendono il nome di tag. Ogni elemento è costituito da un tag di apertura e uno di chiusura. Il tag di chiusura è quello che comprende il carattere della barra (slash).
- Il tag
<html>indica che il codice che segue è in HTML; - il tag
<body>indica che il contenuto che viene inserito fino al tag di chiusura</body>deve essere mostrato nella finestra principale del browser; - il testo inserito all’interno del tag di apertura
<h1>e il tag di chiusura</h1>viene interpretato come il titolo della pagina; - il testo inserito tra i tag
<h2>...</h2>viene interpretato come il sottotitolo della pagina; - il testo inserito all’interno dei tag
<p>...</p>rappresenta il paragrafo del testo; - il tag
</html>indica la fine del codice HTML.
Adesso digita questo codice, rispettando gli spazi, all’interno del tuo editor di testo preferito e alla fine salva il documento cliccando su File ⇒ Salva con nome. Non devi però salvare il nome come un normale file di testo, ma salvalo in questo modo: pagina web.html
Come visualizzare una pagina Web nel browser
Adesso che hai salvato la tua prima pagina Web devi provare a vedere come la mostrerà il browser. Apri la cartelle dove hai salvato il file. Clicca con il destro del mouse sul file e scegli la voce Apri con, per scegliere il browser, o fai doppio click per visualizzarla con il browser predefinito.
Lascia un commento