Eccoci alla seconda per così dire lezione. Qui scriverò alcuni dei più importanti tag dell’html. Abbiamo stabilito che l’html è un semplice linguaggio. Impariamo a scriverlo.

CODICE
<b>testo in grassetto</b>
oppure
<strong>testo in grassetto</strong>
CODICE
<i>testo in corsivo</i>
oppure
<em>testo in corsivo</em>
CODICE
<u>testo sottolineato</u>
CODICE
<s>testo sbarrato</s>
CODICE
<br>  per andare a capo di una riga

CODICE

<p>paragrafo di testo</p>
Uno dei più importanti attributi che si possono aggiungere al tag p è quello per l’allineamento del testo, ovvero l’atributo align che ha come valori i seguenti:
left, (sinistra)
right, (destra)
center, (centro)
justify (giustificato)Praticamente il testo può essere allineato a sinistra, a destra, può essere centrato e giustificato. Per inserire l’attributo align si procede così.

CODICE
<p align=”center”>Testo testo testo testo</p>

CODICE

<img src=”LINKIMMAGGINE”>
Come si può notare bisogna fare un discorsino più approfondito per il tag img. Il tag img non ha un suo corrispondente tag di chiusura, ovvero non è

CODICE
<img>Link immagine</img>


L’immagine non può essere presa direttamente dal vostro harddisk, ma deve essere caricata su internet.
Cito i tre più famosi fra i servizi di hosting per immagini gratuiti che sono:

E’ consigliato l’utilizzo di immagini con queste tre estensioni: JPG, GIF, PNG.

Ci sono diversi valori che si possono dare al tag img. Alcuni fra i più importanti sono:

width, (larghezza dell’img)
height, (altezza dell’img)
alt, (titolo dell’immagine)

In pratica siamo in grado di dare all’immagine un’altezza, una larghezza e un titolo.
La larghezza e l’altezza non devono necessariamente corrispondere a quelle reali, possono essere ridotte o ampliate. Si consiglia di non aumentarle troppo in quanto l’immagine risulterebbe sgranata. Se si diminuiscono ricordate che il tempo di caricamento sarà uguale.
Ad esempio se io metto a un wallpaper 800 x 600 px le misure 100×100 px il caricamento dell’immagine resta invariato, poiché le dimensioni dell’immagine sono le stesse.
Il titolo dell’immagine, invece, compare quando ci soffermiamo con il cursore su essa.

In width e height non si deve inserire l’unità di misura ma solo il numero.
Le unità di misura sono nel nostro caso i pixel.
Ad esempio si dovrà fare … width=”100″ height=”100″ … non … width=”100px” height=”100px”…

Per inserire gli attributi all’immagine si procede così:

CODICE
<img src=”LINK” width=”misura” height=”misura” alt=”titolo immagine”>

CODICE
<a href=”www.google.it”>Google</a>

Questo è il codice per inserire un link in una pagina internet.
Gli attributi maggiormente usati sono:
alt, (titolo)
target, (indica dove si deve aprire la pagina)L’attributo alt l’abbiamo già visto. L’attributo target ha valori differenti io vi cito il più usato che è il _blank . Serve per far aprire la pagina in un altra finestra e non nella stessa che state visualizzando.

In pratica il codice sarà così:
CODICE
<a href=”www.google.it” alt=”Google” target=”_blank”>Google</a>

Fra
CODICE
<a…..> e </a>
si deve sempre inserire un testo.

Per usare un’immagine come collegamento, invece che il semplice testo si fa così:

CODICE

<a href=”urlsito” target=”_blank” alt=”titolo sito”><img src=”linkimmagine” alt=”titolo immagine” width=”misura” height=”misura”></a>
Praticamente fra CODICE
<a…..> e </a>
si inserisce il codice dell’immagine e non il testo. Solitamente i browser mettono un bordo predefinito all’immagine che viene utilizzata come collegamento. Per togliere il bordo, a mio parere antiestetico, si procede in questo modo:

CODICE

<a href=”urlsito” target=”_blank” alt=”titolo”><img src=”linkimmagine” alt=”titolo immagine” width=”misura” height=”misura” border=”0″></a>
Abbiamo inserito l’attributo border al tag img e gli abbiamo assegnato 0 come valore. In questo caso il bordo è stato tolto.

Related Posts