Liste, immagini e link

Oltre a formattare il testo, è anche possibile utilizzare HTML per inserire elementi più complessi, come liste ed immagini.

Gestire le liste

In HTML esistono due tipi di liste, quelle "puntate" (dette unordered list) e quelle "numerate" (dette ordered list). Queste vengono denotate dai tag <ul> e <ol, rispettivamente. All'interno di questi tag vanno inseriti alcuni elementi della lista, usando il tag <li> (list-item).

Ad esempio il codice

<ul>
  <li>Primo elemento</li>
  <li>Secondo elemento</li>
  <li>Terzo elemento</li>
</ul>

genera la lista

Primo elemento
Secondo elemento
Terzo elemento

Si modifichi il proprio documento per inserire una lista all'interno del testo.

Inserire immagini

Per capire come funziona il tag per inserire immagini, è essenziale osservare che i tag HTML possono avere degli attributi, come si era già visto (senza commentarlo) nel caso del tag meta,

<meta charset="utf-8">

In questo caso, charset="utf-8" è un attributo del tag, che specifica una qualche sua caratteristica. Useremo gli attributi ampiamente nei prossimi esercizi

Per inserire immagini nella pagina, si usa il tag <img>, seguito da vari attributi tra cui essenziale sono src=" " dove dentro le virgolette si scrive il nome del file che contiene l'immagine, e alt=" ", dove dentro le virgolette si mette una descrizione della immagine a parole, che sarà usata dai browser non grafici. Attenzione! In HTML5 il tag alt è obbligatorio, e va sempre inserito.

I formati possibili sono .gif (Graphic Image Format) e .jpg (Joint Photographic Experts Group), o .png (Portable Network Graphics), che supporta immagini con trasparenza, e .svg, che si usa per immagini vettoriali.

Può essere utile inserire esplicitamente la dimensione dell'immagine in pixel tramite gli attributi width e height. Ad esempio

  <img src="miaimmagine.png" width=50 height=120 />

Questo permette al browser di preparare lo spazio per l'immagine nella pagina anche prima di caricala via rete, rendendo la generazione della pagina a schermo più efficiente. Se le dimensioni reali dell'immagine sono diverse, questa verrà ridimensionata.

Si scarichi un'immagine dal web, e la si carichi usando scp all'interno della propria public_html. A quel punto, si inserisca all'interno della propria pagina.

Inserire collegamenti

Per collegare pagine diverse, possiamo usare il tag a. Come prima operazione, si crei una seconda pagina (ad esempio di nome pagina2.html). Ci si può inserire qualunque contenuto, sfruttando quanto fatto in precedenza.

Il tag <a href="..."<> (anchor) specifica che ad una data frase o immagine va collegato ad un altro elemento, esterno o interno al server web. Dal browser si può dare un debito comando per proseguire la navigazione andando sul nuovo elemento, oppure per scaricare questo nuovo elemento sul proprio disco fisso (Spesso Shift+mouse-click).

Nel caso di hyperlink esterno l'argomento dell'attributo href è un URL, invece per un hyperlink interno è o un nome di file, o una #etichetta all'interno della stessa pagina, definita usando l'attributo name="etichetta" su un qualunque tag. Il percorso del file va indicato relativamente al file corrente.

Gli hyperlinks sono di solito evidenziati perchè sottolineati, e spesso il cursore prende una forma particolare quando si posiziona su un collegamento (manina invece di freccia), e nella barra inferiore della finestra appare di solito l'URL a cui punta il collegamento.

Il file può contenere di tutto (suoni, immagini, films,...), e il browser farà del suo meglio per presentarlo.

Un esempio pratico: il seguente codice

Clicca <a href="http://www.google.com/">qui</a> per visitare l'home page di Google.

genera il seguente link cliccabile:

Clicca qui per visitare l'home page di Google.

Si inserisca nella pagina principale un link per accedere alla seconda pagina create in precedenza, ed uno per tornare indietro.