Archivi categoria: HTML5

HTML5 Base – 5.5 – Link grafici

In questa lezione vi mostro come rendere cliccabile una immagine per trasformarla in un collegamento.

Non sempre un link deve essere basato sul testo: ad esempio può essere necessario usare una immagine e renderla cliccabile (come un pulsante) per raggiungere la nostra destinazione.

Link grafici

Possiamo trasformare una immagine in un pulsante, racchiudendo il tag <img> all’interno del tag dei collegamenti <a>:

<a href="destinazione"> <img src="foto.jpg"> </a>

In questo modo, l’immagine diventa cliccabile e vi porterà alla destinazione del collegamento.

Video

HTML5 Base – 5.4 – Testo alternativo

In questa lezione vi parlo di come rendere accessibile il vostro sito usando un testo alternativo per le immagini.

Se volete rendere il vostro sito alla portata di tutti, comprese persone che presentano disabilità visive, dovete inserire un testo alternativo per ciascuna immagine di ogni pagina.

Testo alternativo

Il testo alternativo va inserito come valore dell’attributo alt, all’interno del tag <img>:

<img src"foto.jpg" alt="descrizione della foto">

Le persone che hanno disabilità visive possono usare un programma speciale che, anziché mostrare le immagini, va a leggere le descrizioni che esse contengono.

Video

HTML5 Base – 5.3 – Dimensioni dell’immagine

In questa lezione vi spiego come si impostano le dimensioni di una immagine.

Normalmente le immagini vengono inserite sulla pagina mediante il tag <img>, che avete già visto.

Se non specifichiamo nulla, le immagini vengono visualizzate con la loro dimensione nativa, ovvero con i loro valori predefiniti di larghezza e altezza, tuttavia è possibile specificare la loro dimensione direttamente nel tag HTML con cui le inserite.

width e height

Per impostare la larghezza di una immagine, possiamo usare l’attributo width:

<img src="foto.jpg" width="200">

Il valore dell’attributo width è un numero che indica la larghezza dell’immagine espressa in pixel.

Per impostare l’altezza di una immagine, usiamo l’attributo height:

<img src="foto.jpg" height="200">

Anche il valore dell’attributo height è un numero inteso come pixel.

Nota: sebbene sia possibile impostare la dimensione delle immagini da HTML (come avete visto), si consiglia di usare sempre i CSS per questo tipo di formattazione.

Video

HTML5 Base – 5.1 – Il tag IMG

In questa lezione vi spiego come inserire immagini nella vostra pagina web.

I file immagine

Nelle pagine web potete inserire file di tipo immagine, ovvero file con le seguenti estensioni:

  • .JPG o .JPEG
  • .GIF
  • .PNG

Per inserire una immagine nella pagina, dovete averla in una qualche cartella del vostro sito, oppure deve essere presente su un altro sito, ma dovete conoscere il suo indirizzo.

<img>

Il tag  <img> serve per inserire una immagine nella pagina. Come per il tag <br>, anche questo è autoconclusivo, non occorre chiuderlo.

Il tag <img> vuole l’attributo src per sapere dove si trova l’immagine da visualizzare:

<img src="percorso immagine">
immagini
Esempio di immagine

Per inserire una immagine, potete usare un percorso relativo (se l’immagine è nel vostro sito) o assoluto (se si trova su un sito esterno).

Video

HTML5 Base – 4.7 – Collegamenti verso file

In questa lezione vi mostro come creare un collegamento verso destinazioni diverse da una pagina web.

Tipi di destinazione

Ad un link potete assegnare una destinazione diversa da una pagina, ad esempio:

  • un documento (es: di Word o un PDF)
  • una immagine (es: GIF, JPEG)
  • un archivio (es: ZIP)

Quando la destinazione del vostro link è diversa da una pagina, basta indicare nell’attributo href il nome del file destinazione, compresa l’estensione:

href=”file.est”

Video

HTML5 Base – 4.6 – Il target

In questa lezione vi parlo di dove viene aperta la destinazione dei vostri link.

target

Il target di un link è un attributo del tag <a> che permette di scegliere dove andiamo ad aprire la destinazione.

L’attributo target può avere uno dei seguenti valori:

  • _blank = il link si apre in una nuova finestra
  • _self = il link si apre nella stessa finestra (default)

Altri valori prevedono l’uso dei Frame: in questo corso non parlo dei frame perché sono caduti in disuso.

Video

HTML5 Base – 4.5 – Collegamenti interni

In questa lezione vi illustro come funzionano i collegamenti interni ad una pagina web.

I link interni

Non tutti i collegamenti del tag <a> puntano necessariamente ad un’altra pagina: esistono dei casi in cui avete bisogno di rimanere nella stessa pagina in cui siete ma spostandovi verso l’alto o verso il basso, in un punto preciso.

Per fare questo, si inserisce nel codice in corrispondenza della destinazione, ovvero nel punto in cui volete fissare la visualizzazione della pagina, un punto di ancoraggio.

Il punto di ancoraggio si inserisce sempre usando il tag <a>, ma in modo diverso:

<a name="nome">

L’attributo name indica il nome della vostra ancora: inizio, fine, articolo1, ecc.

Il passo successivo è quello di dire al collegamento che non vogliamo uscire verso un’altra pagina, ma vogliamo raggiungere l’ancora posizionata dentro questa.

<a href="#nome">testo del collegamento</a>

Video

HTML5 Base – 4.3 – Percorsi assoluti e relativi

In questa lezione vi spiego quali percorsi potete usare per i vostri collegamenti.

Tipi di percorso

Un collegamento deve portare ad una sola destinazione: per poterlo fare, dobbiamo indicare al link dove si trova tale destinazione.

Si trova sul sito stesso della pagina di origine? Si trova nella stessa cartella? O si trova in un’altro sito?

Se si trova su un sito web esterno, si utilizza un percorso assoluto.

Se si trova sullo stesso sito web, possiamo usare un percorso relativo.

Percorsi assoluti

In un percorso assoluto si comunica al browser di andare a prendere la destinazione partendo direttamente dal dominio (es: www.miosito.it), muovendosi poi verso la posizione del file che si vuole raggiungere.

Per fare un’esempio pratico, basato sulla vita reale, è come se io volessi incontrare una persona basandomi sul suo indirizzo:

  1. per prima cosa mi reco nella città dove si trova
  2. poi cerco la via
  3. quindi il numero civico
  4. infine cerco il cognome sul citofono

Questo metodo funziona per qualsiasi indirizzo voglio usare, basta cercare la città dove abita la persona ed è fatta.

Esempio:

http://www.miosito.it/pippo/pluto.html

Dove:

  • http: indica il tipo di protocollo usato (in questo caso il protocollo di trasferimento di ipertesti)
  • www.miosito.it indica il dominio che identifica un server web sulla rete
  • pippo indica la cartella del sito in cui è contenuta la pagina di destinazione
  • pluto.html è il nome della pagina che rappresenta la destinazione

Il link finale sarà così composto:

<a href="http://www.miosito.it/pippo/pluto.html">Testo del collegamento</a>

Percorsi relativi

In un percorso relativo dobbiamo spiegare al browser quale strada dovrà seguire per poter andare a raggiungere la pagina web destinazione, partendo dal punto in cui si trova quella di partenza.

Per riferirmi all’esempio descritto sopra, cosa potrebbe succedere se volessi incontrare una persona che abita nella mia stessa via, usando il metodo descritto per il percorso assoluto?

Dovrei di nuovo uscire dalla città per poi rientrarci: inutile, no?

Se la persona abita nella mia stessa via, mi segno soltanto il numero civico e:

  1. esco di casa
  2. vado al palazzo di destinazione
  3. cerco il cognome sul citofono.

Ovviamente questo procedimento non va bene se la persona si trova in un’altro paese.

Facciamo ora un esempio.

Il nostro sito contiene la seguente struttura:

www.sito.it:

  • homepage.html
  • cartella1/
    • partenza.html
    • topolino.html
    • sottocartella/
      • pluto.html
  • cartella2/
      pippo.html

Immaginiamo di essere sulla pagina partenza.html e di voler raggiungere una delle altre pagine con questo collegamento:

<a href="">Vai alla destinazione</a>

Caso 1 – Destinazione = topolino.html

La pagina di destinazione del collegamento è nella stessa cartella che ospita la pagina di origine (cartella1).

Non mi muovo da lì, perché la pagina partenza vede perfettamente la pagina topolino (sono nella stessa cartella), quindi mi basta chiamare la pagina di destinazione col suo nome:

<a href="topolino.html">Vai alla destinazione</a>

Caso 2 – Destinazione = pluto.html

La pagina di destinazione del collegamento non è nella stessa cartella ma è immediatamente raggiungibile entrando in una cartella che riusciamo a vedere e scrivendo il nome della pagina:

<a href="sottocartella/pluto.html">Vai alla destinazione</a>

Caso 3 – Destinazione = homepage.html

La pagina di destinazione del collegamento è immediatamente fuori dalla cartella che ospita la pagina di origine (cartella1).

Se la pagina non è nella stessa cartella, devo “uscire” da dove mi trovo ora usando:

../

e poi digito il nome del file:

<a href="../homepage.html">Vai alla destinazione</a>

Caso 4 – Destinazione = pippo.html

La pagina di destinazione del collegamento non è nella stessa cartella (quindi usciamo con ../), ma non riusciamo ancora a vederla, perché si trova in un’altra cartella.

Scriviamo quindi il nome della cartella e, quindi, il nome del file:

<a href="../cartella2/pippo.html">Vai alla destinazione</a>

Video