I contenuti del sito

Visita anche Risorse per i webmaster
archivio di risorse per la creazione di pagine web
Sommario:
Questa pagina è parte della guida Come creare un sito da zero

Ora che avete imparato a creare le pagine, vediamo come inserire i vari contenuti..

Le immagini

Per prima cosa, dovete creare una cartella, all'interno della cartella del sito, in cui mettere tutte le immagini che utilizzerete. Anzi, meglio ancora se create due cartelle, naturalmente con nomi diversi, per esempio una cartella "img" e una cartella "immagini". Nella prima potete mettere tutte le immagini che fanno parte della grafica del sito e nella seconda metterete le immagini che servono per i contenuti. Ricordatevi che l'ordine e la precisione sono indispensabili per un buon lavoro.
Tutte le immagini, prima di essere caricate, devono essere ridimensionate e compresse. La dimensione, in pixel, dovrà essere quella sufficiente e necessaria al risultato che si vuole ottenere, tenendo conto, naturalmente, delle diverse risoluzioni degli schermi. È inutile caricare immagini troppo grandi e pesanti. Oltre a ciò le immagini devono essere sempre compresse. La compressione è importante per la velocità di caricamento, per l'indicizzazione e per risparmiare spazio di archivio. Se fatta con un buon programma, non incide sulla qualità.

Senza scaricare nulla, ci sono ottimi programmi online, per esempio:
"https://tinypng.com.



Dovete effettuare la compressione su tutte le immagini piccole e grandi.

Quando le immagini saranno pronte e messe nella loro cartella, dovrete collegarle alla pagina nella quale devono apparire.
La stringa da usare è la seguente :

<img src="URLimmagine" alt="Descrizione" title="Titolo" width="" height="">

Se volete aggiungere un collegamento, diventa:

<a href="URLcollegamento" target="_blank"><img src="URLimmagine" alt="Descrizione" title="Titolo" width="" height=""><a />

Il tag "alt" serve ad inserire la descrizione dell'immagine per i motori di ricerca.

Il tag "title" serve ad inserire il titolo dell'immagine ed ha anch'esso importanza per i motori di ricerca, se pur minore.

Il tag  target="_blank" fa aprire il link in una nuova scheda del browser. Se non volete questo, potete toglierlo.

È consigliato indicare le dimensioni originali dell'immagine (width e height) per migliorare la velocità di caricamento. Da notare che il valore di queste dimensioni deve essere solo numerale (es: width="400", senza px) e non serve a ridimensionare le immagini, ma solo ad indicarne le dimensioni al caricamento. Da non confondere con le regole di stile inline (es: style="width: 400px) che servono ad indicare la dimensione voluta per l'anteprima.

Importante: scrivete il nome delle immagini in lettere minuscole e senza spazi vuoti. Se il nome contiene più parole, queste possono essere separate da trattini. Es: gita-al-mare.jpg

Per una semplice galleria di immagini, potete consultare la guida: Semplice galleria di immagini con lightbox

AGGIORNAMENTO: le direttive di Google raccomandano l'utilizzo di nuovi formati di immagini per migliorare la velocità di caricamento delle pagine.
Il formato più innovativo è il formato AVIF.
Per garantire la visualizzazione delle immagini anche su browser meno evoluti, si utilizza questo metodo:
<picture>
  <source srcset="img/image.avif" type="image/avif">
  <img src="img/image.jpg" alt="" width="" height="">
</picture>


In questo modo, l'immagine AVIF verrà utilizzata solo dai browser che supportano il formato. Gli altri browser utilizzeranno l'immagine jpg.
Naturalmente, dovete inserire il corretto percorso delle immagini.

Possibile aggiungere una didascalia utilizzando i tag figure e figcaption, in questo modo:
<figure>
   <picture>
      <source srcset="img/image.avif" type="image/avif">
      <img src="img/image.jpg" alt="descrizione" width="" height=""
   </picture>
   <figcaption>
        Didascalia
   </figcaption>
</figure>


NOTA: per covertire le immagini in formato AVIF ci sono dei tool online come quello che indico sotto.

Conversione immagini in formato avif


Leggi suggerimenti per le immagini anche su Velocità e performance di un sito web.
SUGGERIMENTO: Chi vuole implementare funzionalità particolari, come il cambio di immagine al passaggio del mouse, trova la soluzione specifica nella guida:
Soluzioni CSS della sezione Risorse per webmaster, alla voce "Cambio immagine onmouseover usando picture source per formato avif".

Tag "Alt" e tag "Title" approfondimento:

Tutti e due i tag hanno una loro funzione e il consiglio è di implementarli entrambi.
Il tag Alt, specialmente, è fondamentale per l'indicizzazione e va sempre inserito. Descrive l'immagine in funzione del contesto e serve a mostrare un testo alternativo qualora l'immagine non venisse visualizzata.Viene utilizzato anche dagli screen-reader dei browser per le persone ipovedenti, tramite i quali viene letto ad alta voce. Il numero dei caratteri contenuti nel tag Alt non deve essere maggiore di 300. Il consiglio è di utilizzare una descrizione breve.
Il tag Title dovrebbe contenere il titolo dell'immagine a cui è attribuito e la sua importanza ai fini dell'indicizzazione non è chiara.
Molti sostengono l'equivalenza dei due tag e consigliano di inserire il medesimo contenuto in entrambi. Come ho detto, la questione è controversa. Una motivazione valida per inserirli tutti e due è data dal fatto che alcuni browser leggono il tag ALT e altri leggono il tag TITLE. La lettura dei tag, sempre a livello di browser, permette di visualizzare il contenuto del tag stesso in un tooltip quando si passa il mouse sopra l'immagine.
Omettendo i tag, qualora l'immagine non venisse visualizzata, in alcuni browser apparirebbe, al suo posto, una antiestetica casellina bianca.

Esempio di implementazione:

<img src =" URLimmagine " alt ="Contenuto del tag alt" title="Contenuto del tag title"/>

Il testo e il font

La prima cosa da dire è che l'HTML è un linguaggio e come tale ha una sua ortografia. Per scrivere correttamente in HTML senza commettere errori, la cosa più semplice è utilizzare un editor. Potete scaricarlo, o utilizzarlo online, ma la cosa importante è che sia aggiornato. Personalmente, utilizzo questo editor professionale:
https://github.com/froala/wysiwyg-editor



Utilizzabile anche online:
https://www.froala.com/online-html-editor



Se volete, potete scaricare la mia versione da desktop ottimizzata per l'uso.

Potete trovare alcune indicazioni sulla scrittura leggendo la guida: Scrivere in html.

La dimensione del font può essere stabilita in pixel, o in em, o in rem (o anche in percentuale semplice). I pixel sono una dimensione assoluta, mentre em e rem sono dimensioni relative e consentono di stabilire relazioni tra le dimensioni dei contenitori. Dopo aver stabilito il tipo di font (leggi anche: Il font), una buona soluzione può essere quella di impostare, nel foglio di stile, la dimensione di base del testo, fissa, in pixel, nel body.

Es: body {font-size: 16px}

Per poi definire, se necessario, le dimensioni del testo per i contenitori specifici utilizzando em, o rem.

Es: div {font-size: 2.0em;}, oppure: div {font-size: 2.0rem}

Differenza tra px, em e rem

Utilizzando gli em, la dimensione del font dell'elemento figlio viene calcolata in rapporto alla dimensione del font del contenitore genitore più prossimo e non in rapporto a quella dell'elemento contenitore di base. Tale dimensione, quindi, subirà variazioni secondo il grado di annidamento dei vari elementi.
I rem hanno le stesse caratteristiche degli em, ma fanno sempre riferimento al valore dell'elemento root (HTML, body). La dimensione del font (dipendentemente dal valore dato) rimane, quindi, costante negli elementi annidati, perchè il valore del font-size non viene calcolato sulla base della dimensione ereditata dal suo genitore, ma viene calcolato sulla base delle dimensioni del font dell'elemento di base.

Proviamo a chiarire meglio:
Il pixel (px) è un'unità di misurazione fissa, semplice, assoluta ed è impostato secondo la risoluzione dello schermo. Un pixel corrisponde ad uno dei pixel sullo schermo

1em è un’unità di misura relativa rispetto al font-size corrente, se il font-size impostato per il body è uguale a 16px, allora 1em è uguale a 16px.
Se diamo al font-size di un div il valore 1.2em, la dimensione del testo aumenta in percentuale rispetto al valore di 16px impostato nel body.
Se questo div ha un div figlio senza valore font-size impostato, il div figlio eredita il font-size dal div genitore.
Se diamo anche al font-size del div figlio il valore 1.2em, la dimensione del testo del div figlio aumenta in percentuale rispetto al font-size del div genitore.
Il risultato è simile a questo:

testo  - dimensione testo body (16px)
testo - dimensione testo div genitore (1.2em)
testo - dimensione testo div figlio (1.2em)

Cioè, la dimensione del testo del div genitore è più piccola di quella del div figlio pur essendo il valore di entrambi, separatamente impostato, uguale a "font-size:1.2rem".

Anche 1rem è un’unità di misura relativa rispetto al font-size corrente, se il font-size impostato nel body è uguale a 16px, allora 1rem è uguale a 16px.
Se diamo al font-size di un div il valore 1.2rem, la dimensione del testo aumenta in percentuale rispetto al valore di 16px impostato nel body.
Ma ....
Se questo div ha un div figlio senza valore font-size impostato, il div figlio eredita il font-size dal body e non dal div genitore.
Se diamo anche al font-size del div figlio il valore 1.2em, la dimensione del testo del div figlio aumenta in percentuale rispetto al font-size del body.
Il risultato è questo:

testo - dimensione testo body (16px)
testo - dimensione testo div genitore (1.2rem)
testo - dimensione testo div figlio (1.2rem)

Cioè, sia il div genitore che il div figlio hanno la stessa dimensione del testo con il valore di entrambi, separatamente impostato, uguale a "font-size:1.2rem".

VW e VH

1vw si intende 1% della larghezza dello schermo.
1vh si intende 1% dell'altezza dello schermo.

Vengono utilizzati soprattutto per i grandi contenitori.

I link

I link (collegamenti) si inseriscono usando questa stringa:

<a href="https://www.lachiavenelpozzo.com">La chiave nel pozzo</a>

Naturalmente sostituirete i dati del mio sito con i vostri.
È importante, però, anche aggiungere alcuni tag quando si tratta di link che portano a pagine esterne, che non si trovano nel dominio del vostro sito, ma in un altro dominio. Vediamoli:

Il tag target="_blank" ordina al browser di aprire il collegamento in una nuova scheda. Questo è importante al fine di non allontanare il visitatore dal sito.
Il tag rel="nofollow noopener noreferrer" assembla tre comandi insieme. Esaminiamoli:

Il comando "nofollow"  comunica ai motori di ricerca di non seguire quel determinato  link. È consigliato utilizzarlo per tutti i link in uscita esclusi quelli verso siti autorevoli📌, perchè se i motori di ricerca (Google in primis)  dovessero sospettare che sul vostro sito possa esserci un "commercio" di link al  fine di influenzare la serp, potreste essere pesantemente penalizzati.
Il comando "noopener" serve a proteggere i link in uscita in cui è inserito il target=”_blank”, per evitare il phishing (per info sul phishing: Wikipedia)📌📌.
Il comando "noreferrer" indica ai motori di ricerca di non trasmettere i dati relativi alla fonte dalla quale deriva il collegamento. Inviando traffico dal proprio sito ad un altro attraverso un link, si da la possibilità di identificare anche il sito di origine (cioè il nostro) e questo favorisce il fenomeno dei “Ghost”📌📌📌.
NOTA: aggiungere il tag noreferrer ai link dei servizi di affiliazione potrebbe impedire il tracciamento dei dati necessari ai conteggi.
ATTENZIONE: per il punteggio delle prestazioni, Google richiede che il testo dei link sia descrittivo. Esempio:
Link sbagliato:
<a href="">Click</a>
Link corretto:
<a href="">Titolo pagina di arrivo</a>



📌Per siti autorevoli si intendono i siti di grande e affermata reputazione, linkando i quali non penalizzate il vostro sito, ma, anzi, gli conferite valore e guadagnate in posizionamento. Qui trovate la lista dei siti web più autorevoli:
http://www.alexa.com/topsites.


📌📌Il rel noopener viene aggiunto a quei link che vengono aperti in nuove finestre del browser.
Il rischio sta nel fatto che una pagina aperta in una nuova scheda del browser, utilizzando il target=”_blank”, possa essere utilizzata per sostituire la pagina del sito originale con un’altra identica al fine di rubare dati sensibili.
Questa tecnica viene chiamata Reverse Tabnabbing.
Il rel noopener indica al browser di navigare verso la risorsa di destinazione senza concedere a questa l'accesso alla pagina di origine.
Ciò è particolarmente utile quando si aprono collegamenti non attendibili.

📌📌📌Un referrer è la fonte della pagina da cui, tramite collegamento, un utente arriva su una pagina web appartenente ad un altro sito. Il referrer può essere modificato da persone che vogliono aumentare il traffico su determinati siti. Ciò si chiama "referrer spam" ed è, naturalmente, un'attività illegale che deve essere ostacolata.
I referrer spammer di nuova versione vengono chiamati "Ghost", perchè non si trovano realmente nel sito "vittima", ma, semplicemente, utilizzano l'ID di monitoraggio di Google Analytics, inserendolo in pagine estranee.
Oltre ad utilizzare il tag sopra indicato, in rete trovate molte guide utili per la configurazione di Google Analytics contro i Ghost.

Segnalare link esterni

Ricordate che i lnk esterni vanno sempre segnalati affinchè il visitatore sappia che sta lasciando il vostro sito sotto la sua responsabiltà.
Esistono diversi modi per farlo utilizzando piccole icone.
Per semplicità, potete anche usare un simbolo unicode tipo questo: ⧉ o ↗ che si implementano con il loro codice, rispettivamente &boxbox; e &nearr;

Ecco un esempio di link esterno:

<a href="https://www.lachiavenelpozzo.com" target="_blank"  rel="no-follow noopener noreferrer">La chiave nel pozzo</a>&boxbox;

Oppure, potete aggiungere un'immagine usando le regole di stile.
Esempio con link a Google:
<style>
a[class="icon"]::after {
content:url(img.png);
margin-left: 4px;
}
</style>

<a class="icon" href="https://google.com" target="_blank">Google</a>

Al posto di "img.png", nella regola di stile, metterete il percorso dell'icona prescelta.
Risultato con la mia icona: Google

Scarica icone vari colori
Versione con icona svg

I link ai file specifici

Come linkare un pdf, o un file zip? Niente di più semplice. Basta scrivere così:

<a href="titolo.pdf">Titolo</a>
<a href="titolo.zip">Titolo</a>

Il pdf verrà aperto dall'applicazione indicata dall'utente nel suo browser, mentre il file zip verrà scaricato.

Se volete far aprire una pagina specifica del file pdf, scrivete così:

<a href="titolo.pdf#page=4">Titolo</a>

Il link per il download di un file generico è questo:

<a href="titolo.jpg" download>Download</a>

Naturalmente, potete cambiare l'estensione del file.

NOTA: affinchè un file possa essere scaricato, dovrà materialmente trovarsi all'interno dello stesso dominio

Regole valide online

Il link con il cancelletto non porta a nulla e, cliccando, si resta nella stessa pagina. Si utilizza quando è necessario aggiungere un finto collegamento.
<a href="#">....</a>
Il link con lo slash indirizza alla pagina index del sito.
<a href="/">....</a>

Leggi anche la sezione "Il percorso dei file" nella guida La struttura del sito

Link come pulsanti

Per creare link come pulsanti, utilizzate questi codici. Il primo apre la pagina nella stessa scheda del browser, il secondo la apre in una nuova scheda.
I pulsanti possono essere personalizzati con regole di stile.
<button type="button" style="cursor:pointer" onclick="window.location.href='https://lachiavenelpozzo.com';">click</button>

<button type="button" style="cursor:pointer" onClick="window.open('https://lachiavenelpozzo.com');">click</button>

Nella "Risorse per i webmaster" puoi trovare moltissime risorse in più da scaricare.

Elenco argomenti di questa guida:
Altro di interesse
Torna alla pagina principale:Creare un sito da zero ->>
Continua con: Come includere contenuti tramite file esterni