Tutorial HTML: Come Inserire Immagini – Lezione 3

Bentornati al Corso base di Html!

Nella precedente lezione abbiamo visto la struttura ed il funzionamento del paragrafo all’interno della nostra pagina web, dove abbiamo inserito un semplice elemento di testo al suo interno.

Ma una pagina web non è tale se non gli si affianca anche il comparto grafico con immagini.

Per questo, in questa lezione, vi mostrerò come poter inserire immagini all’interno della vostra pagina web.

COME INSERIRE IMMAGINI NEL FILE HTML

Iniziamo aprendo l’editor html che abbiamo scelto nella lezione precedente insieme alla pagina creata ed posizionatevi con il cursore nel punto punto in cui dovrà essere inserita l’immagine, utilizzando questo TAG o elemento,

<img src=“xxx.yyy“>

Dove xxx è il nome della vostra immagine e yyy la sua estensione.

Le immagini consentite dal linguaggio html sono solo di tipo: .gif .jpg e .png qualsiasi altro formato non va adoperato perchè c’è il rischio che non sia visualizzato da tutti i vari browser.

Ecco un esempio di formattazione:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
</head>
  <body>
<p align="center">Ecco la mia prima pagina in html destinata al web.</p>
<img src=xxx.yyy>
</body>
</html>

TIPI DI FILE E I LORO UTILIZZI

Si adoperano quelle di tipo gif quando servono immagini animate o che abbiano delle zone di trasparenza (quelle che lasciano vedere lo sfondo), mentre per tutti gli altri casi è preferibile adoperare quelle di tipo jpg che, essendo un formato compresso, risulta essere più leggero e di conseguenza veloce da caricare non appesantendo troppo la pagina (un aspetto quest’ultimo da non trascurare mai quando si adoperano immagini).

Ricordatevi che grandi dimensioni significa anche peso esagerato che si traduce in lunghi tempi di attesa.

Sulla rete un’immagine da centinaia di Kb spesso induce il visitatore ad abbandonare il sito prima ancora che questa sia stata completamente visualizzata: ricordatevi anche che, nonostante le attuali linee telefoniche superveloci (ADSL-Fibra etc), ci sono ancora molti utenti che accedono alla rete con modem che viaggiano a velocità modeste. Fate dunque in modo da evitare immagini pesanti ed anzi, al contrario, preoccupatevi che queste siano sempre le più “leggere possibili” Operazione da fare con un programma di grafica (per esempio photoshop).

Il formato .png è quello nato per ultimo più per problemi legali derivati dall’uso del formato gif che non per reali esigenze tecniche, è adoperato forse meno pur risultando migliore dal punto di vista qualitativo. Browser obsoleti, come IE6, non vedono le immagini di tipo .png

La Sintassi

In questa guida che tratta le basi è sufficiente capire il meccanismo e la gerarchia. Per quanto riguarda su quali attributi utilizzare e come combinarli dipenderà soltanto dalla vostra creatività.

Attenzione: A livello di sintassi, nell’Html il segno di uguale = e le doppie virgolette “xxx“ che devono essere scritte senza spazi vuoti, è tassativo ed e buona regola abituarsi fin da subito dato che tutti gli attributi che andremo ad affrontare ed imparare fanno uso di queste regole.

Sicuramente avrete provato a digitare del testo ma vi siete accorti che a differenza dei normali editor di testo, ogni volta che volete tornare a capo, non basta la semplice pressione del tasto invio.

Nelle pagine web per tornare a capo si fa uso dell’elemento   senza tag di chiusura oppure semplicemente chiudendo il paragrafo in corso testo paragrafo ed aprendone un’altro nuovo paragrafo.

Sicuramente avrete notato che inserendo più spazi vuoti fra una parola e l’altra il risultato non cambia, questo perchè nell’html gli spazi in più vengono ignorati per lasciare il posto ad un solo spazio.

Più avanti, quando parleremo del Design e de la cosmesi del testo, vedremo come fare questa ed altre operazioni che in html hanno regole ben precise e del tutto diverse da quelle usate per una normale scrittura di testi.

Per questa lezione credo possa bastare… Avete imparato a creare una pagina web e ad introdurvi del testo.

Nella prossima lezione vedremo COME INSERIRE LE IMMAGINI!

Intanto Buon studio e Buona giornata a tutti!

Vai alla lezione 3 - Come inserire immagini in pagine html