Come creare una pagina web: Guida per principianti


Come creare una pagina web

Questa guida è pensata per chi vuole sapere come creare una pagina web o, semplicemente, per chi è curioso di sapere come sono fatti i siti internet, senza volersi poi avventurare nella sua realizzazione.

Per chi volesse realizzare il proprio sito da solo, faccio presente che la difficoltà maggiore non sarà quella di fare il sito.

La parte difficile sarà quella di riuscire a renderlo visibile in internet, ovvero di farlo trovare sui motori di ricerca, e questo non si può insegnare con una semplice guida ma servono anni di studio e di esperienza in ambito SEO.

Troverete qualche approfondimento negli articoli Posizionare un sito al primo posto

e Primi su Google.

IL linguaggio HTML

L’HTML, acronimo di HyperText Markup Language (“Linguaggio di marcatura per gli Ipertesti”), non è un linguaggio di programmazione, ma un linguaggio di markup (di marcatura).

Questo permette di indicare ai browser come Internet Explorer, Firefox, Chrome o altri, come disporre gli elementi all’interno di una pagina tramite dei tag (etichette) di marcatura.

Queste etichette sono racchiuse tra parentesi angolari <title>,<h1> ed è come se fossero dei segnaposti o dei contenitori.

Ad esempio il tag <p> indica l’inizio di un paragrafo, mentre la sua fine è in indicata da questo tag </p> quindi un paragrafo completo sarà indicato così:  <p>Questo è un paragrafo</p>.

Un altro esempio sono le intestazioni <h1>Intestazione</h1> è un titolo di tipo H1, oppure <img src="http:miosito.it/immagine.jpg"> che è un segnaposto per le immagini.

Come avrete notato in quest’ultimo non c’è il tag di chiusura perché questo elemento non ha un contenuto ma solo attributi ( in questo caso il link a immagine.jpg) cioè, diciamo, che è più un segnaposto che un contenitore.

Tutti questi marcatori non servono per costruire l’aspetto grafico della pagina ma per la sua struttura “semantica”, cioè l’organizzazione degli elementi in base al proprio ruolo.

Struttura di una pagina

 

Come creare una pagina web: la struttura

Pagina web (sx) e il codice (dx)

N.B. il codice dell’immagine è stato semplificato per un migliore comprensione.

Come possiamo vedere il documento inizia con l’intestazione <!DOCTYPE html> che indica il tipo di HTML usato, in questo caso si tratta dell’HTML5 che è l’ultima versione.

Questa dichiarazione serve per dire al browser con che tipo di file avrà a che fare, in modo che esso possa gestire la pagina di conseguenza.

Poi abbiamo la seguente struttura di tag:

  • <html> è l’elemento radice di un documento HTML
  • <head> rappresenta la parte iniziale di una pagina, contenente metadati e riferimenti alle risorse utilizzate (vedremo in seguito)
  • <body> rappresenta il corpo della pagina
  • *<header> è un blocco di intestazione all’interno della pagina o di una sezione, in questo caso al suo interno abbiamo il logo ed uno dei menù di navigazione.
  • <ul> definisce un elenco puntato (come questo che stai leggendo) composto da una serie di elementi <li>
  • <ol> come sopra ma l’elenco sarà numerato
  • *<article> rappresenta una sezione autonoma, contenente principalmente (ma non solo) contenuto testuale
  • <h1>...<h6> rappresenta un titolo o un sottotitolo
  • <p> definisce un paragrafo
  • <img> permette di mostrare un’immagine, l’attributo src indica il percorso dove è situato il file da mostrare
  • *<footer> rappresenta un blocco di chiusura all’interno della pagina o di una sezione

I tag contrassegnati con * indicano che sono nuovi tag HTML5

Come possiamo vedere ogni tag ha un suo ruolo che deve essere disposto con una sua logica semantica.

Così come in un giornale abbiamo l’intestazione, i vari articoli che a sua volta hanno le loro intestazioni, il piè di pagina e così via.

Naturalmente non ci sono solo questi, ce ne sono molti altri ancora ma analizzarli tutti richiederebbe troppo tempo, e questa, ricordo, è una guida per principianti.

Come creare una pagina web con un semplice editor di testi come notepad.

Come creare una pagina web con Notepad

Proprio così, le pagine che formano un sito internet possono essere realizzate con un semplice text editor.

Provate a digitare nel blocco note il codice dell’immagine e salvatelo come prova.html,e poi provate ad aprirlo.

Avete appena creato la vostra prima pagina internet.

Certo un sito è molto più complesso, ma da qualche parte bisogna cominciare!

Comunque, nonostante sia sufficiente un semplice editor di testo, ci sono vari software che possono dare un aiuto nella compilazione del codice.

Tra quelli gratuiti c’è il validissimo Notepad++ che personalmente uso, altrimenti ci sono anche risorse a pagamento come Dreamweaver della Adobe.

Se avete creato e visualizzato in un browser la pagina prova.html, potete vedere che è privo di grafica.

Questo perché non è stato ancora incorporato un foglio di stile o CSS (Cascading Style Sheets, fogli di stile a cascata).

I file css

Finora abbiamo visto che in HTML i tag servono per dare un significato strutturale alle pagine, ma per potere dare un impaginazione a questo markup serve inserire una serie di specifiche, che prendono il nome di CSS.

Queste specifiche sono quelle che determinano  la parte grafica della pagina come la formattazione del testo, i colori di sfondo, le dimensione delle varie parti ecc…

In pratica gestiscono tutto il layout di un sito web, ovvero istruiscono i browser su come devono presentare il documento all’utente.

Queste regole vanno inserite all’interno del tag <head>  tra i tag <style> qui le specifiche </style> se scriviamo direttamente queste regole nel corpo della pagine.

Altrimenti possiamo creare un file CSS a parte e richiamarlo sempre all’interno del tag <head> in questo modo:
<link rel='stylesheet' href='percorso del file css' type='text/css'/>.

Come funzionano le regole CSS?

Come creare un pagina web: il css
Dall’immagine vediamo come è formata una regola css:

  • il selettore: indica quale elemento sarà modificato (nel caso dell’immagine tutti i link)
  • inizio dichiarazione definita da {
  • proprietà: indica cosa cambiare (nel caso dell’immagine il colore di sfondo)
  • separatore
  • valore: indica il valore da assegnare alla proprietà (nel caso dell’immagine il colore di sfondo sarà giallo)
  • separatore dichiarazione
  • fine dichiarazione definita da }

Il selettore  può essere più di uno separando ognuno con un virgola, per esempio con  a, h1 verranno coinvolti dalla dichiarazione sia i link che le intestazioni h1.

Le parentesi graffe delimitano la dichiarazione, ci possono essere più dichiarazioni separandole da un punto e virgola.

La proprietà indica cosa verrà modificato (colore, grandezza, font etc).

Il valore, non c’è bisogno di spiegarlo, è appunto il valore da assegnare alla proprietà e può essere numerico o letterale.

Aggiungete un po’ di stile alla vostra prima pagina web, come mostrato nell’immagine e guardate i risultati.

Un pò di stile con i css

Anche qui, vista la vastità dell’argomento e il fatto che questa è una guida per principianti, non andrò oltre nelle spiegazioni.

Le basi sono state spiegate sufficientemente.

Non solo HTLM

Non importa cosa venga utilizzato per creare il sito, il risultato finale sarà sempre una pagina HTML, anche se viene usato un CMS come WordPress o Joomla o qualsiasi altro linguaggio di programmazione come il PHP.

Questi non sono altro, come li chiamo io, degli “assemblatori”, cioè non fanno altro che prendere pezzi di codice HTML e assemblarli insieme, basandosi sulle regole del programma utilizzato.

Questo è possibile perché, a differenza di HTML che è un linguaggio di markup, i linguaggi PHP o simili sono linguaggi di programmazione.

Ad esempio richiamando la pagina http://miosito.it/miapagina.html il funzionamento, spiegato in maniera elementare, è il seguente:

  • Pagine scritte direttamente in HTML (sito statico): il server (dove è depositato il sito) trova il file richiesto e lo spedisce al browser richiedente così com’è stata scritta.
  • Pagine scritte in un linguaggio di programmazione o tramite CMS (sito dinamico): la pagina richiesta viene elaborata dal programma o dal CMS, assemblata e spedita al browser richiedente

Quindi nel primo caso l’utente che richiede la pagina la riceverà così come è stata scritta, senza variazioni, ed è per questo che si dice pagina statica.

Nel secondo caso, prima che la pagina sia spedita, subisce un’elaborazione che segue le regola del programma utilizzato.

In questo secondo caso, facendo un esempio banalissimo, potrei istruire il programma per fare visualizzare lo sfondo del sito con colori diversi in base al giorno.

Altro esempio, che vi sarà capitato, è quando trovate la scritta “Bentornato Mario” dopo esservi loggati in un sito.

Questo è possibile perché, dopo che vi siete loggati, il programma vi ha riconosciuto ed ha potuto personalizzare la pagina HTML generata.

Conclusioni

Bene ora avete visto come creare una pagina web.

Come avete potuto intuire questa non è guida completa ma serve solo per dare un idea di come siano realizzate le pagine di un sito web.

Se volete provare a fare un sito e siete orientati ad un approccio un po’ meno tecnico, potete provare a Creare un sito con WordPress , ma se siete intenzionati  a posizionare il sito vi consiglio di leggere prima l’articolo Realizzazione Siti Web.

Ricordo nuovamente che la parte difficile è riuscire a rendersi visibile sui motori di ricerca, e per questo il fai da te non è consigliabile.

Per approfondire

  • Html un ottimo sito per imparare questo linguaggio
  • w3schools sito (in inglese) per imparare i CSS, ricco di esempi dove puoi sperimentare direttamente il codice

 

Grazie per la lettura

 

ObiettivoSitoWeb, (rivisto: )

Link Facebook