AngelodiluceInternet

Corso HTML,avatar,gif,sfondi, ,icone, programmi free ,aforismi,poesie,Karaoke
 
IndiceCalendarioFAQCercaLista UtentiGruppiRegistratiAccedi
Cerca
 
 

Risultati secondo:
 
Rechercher Ricerca avanzata
Argomenti simili
calendario
Contavisite
Migliori postatori
Angelodiluce
 
Valentina
 
raffaeled3
 
Luca
 
Lady
 
Eleonora
 
Stella
 
leona
 
Lia
 
michela2
 
Chi è in linea
In totale ci sono 3 utenti in linea: 0 Registrati, 0 Nascosti e 3 Ospiti

Nessuno

Il numero massimo di utenti online contemporaneamente è stato 158 il Lun Dic 10, 2012 9:48 pm
Statistiche
Abbiamo 38 membri registrati
L'ultimo utente registrato è Cristiano71

I nostri membri hanno inviato un totale di 653 messaggi in 646 argomenti
traduttore
PAGERANK
Page Rank Checker Button
Partner



Condividere | 
 

 Le Immagini

Vedere l'argomento precedente Vedere l'argomento seguente Andare in basso 
AutoreMessaggio
Angelodiluce
Admin
avatar

Messaggi : 925
Data d'iscrizione : 19.06.10

MessaggioTitolo: Le Immagini   Sab Giu 19, 2010 6:09 am

Aprite il vostro editor, qualunque esso sia, e richiamate la pagina che avevate creato, quella della lezione precedente per intenderci. Posizionate il cursore nel punto in cui dovrà essere inserita l'immagine, questo il TAG o elemento, da adoperare:
Codice:
<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 rischia di non essere visto da tutti i browser.

Si adoperano quelle di tipo gif quando servono immagini animate o che abbiano delle zone in trasparenza (quelle che lasciano vedere lo sfondo), mentre per tutti gli altri casi è preferibile adoperare quelle di tipo jpg che essendo questo un formato compresso risulta essere molto più 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 superveloci (ADSL) ci sono ancora molti utenti che accedono alla rete con modem analogici da 56 Kb, fate dunque in modo da evitare immagini pesanti ed anzi, al contrario, preoccupatevi che queste siano le più "leggere possibili".

Il formato .png nato per ultimo più per problemi legali che non per reali esigenze tecniche è adoperato meno frequentemente in quanto non risulta poi così "ottimale", ma questo è un modesto parere per altro del tutto personale.

Passiamo ad inserire la nostra prima immagine. Supponiamo che questa si chiami tuo.gif, sarà inserita nel listato in questa maniera:

Codice:
<!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="tuogif">
  </body>
</html>
Notate la sintassi del comando img che è leggermente diversa da quella adoperata per inserire il testo con

Il tag per le immagini non ha infatti il relativo tag di chiusura, non serve quindi mettere . Noterete anche che dopo la parola chiave: img, che indica appunto "immagine", c'è un: "src" che significa: source, ovvero sorgente, cioè quale immagine deve essere visualizzata. Questo nome va inserito all'interno dei doppi apici ed è praticamente il nome dell'immagine stessa. Tutto chiaro?

Perfetto, se adesso salvate il vostro file htm sovvrascrivendo quello che avevate richiamato e lo andate a visualizzare nel browser, noterete che l'immagine non c'è; o meglio c'è qualcosa di nuovo ma non si vede. Dovreste avere questo: Come mai?

Perchè vi serve un'immagine che si chiami "tuo.gif" e che si trovi nella stessa cartella dove avete il file html, praticamente dove c'è questo file html che avete appena modificato e salvato.

Vi consiglio di lasciare perdere l'immagine web-link.gif che adopero io e di procurarvi una qualsiasi immagine vostra, quella che preferite, a patto che sia in uno dei tre formati descritti sopra: gif, jpg o png e mettetela nella stessa cartella dove avete il file html, cambiate il nome all'interno di src=" " inserendo il nome esatto della vostra immagine, fate attenzione a maiuscole e minuscole perchè sul web ci sono delle differenze. Fatto?

Adesso portatevi una riga sotto il tag che è servito per inserire l'immagine e scrivete adoperando un altro paragrafo: La mia prima pagina web ha finalmente anche la sua prima immagine.

Se avete fatto tutto quanto correttamente la vostra pagina comincia a prendere consistenza, con la stessa procedura potete inserire tutti i testi e tutte le immagini che vorrete, ricordatevi sempre il discorso del peso, di non superare mai certe dimensioni. Tante piccole immagini vengono sommate e potrebbero creare lo stesso problema di una sola immagine da molti kb. Per evitare questo, se le immagini sono molte, conviene suddividere in più pagine e richiamare poi queste altre pagine con i links, oggetto della prossima lezione.

Prima di proseguire vediamo cosa potremo aggiungere al tag:

Codice:
<img src="tua.gif">


Se la nostra immagine non si trovasse nella stessa cartella dove c'è il file che la richiama, dovremo necessariamente specificare il suo "path" cioè il percorso che identifica la sua posizione all'interno del nostro PC, questo potrebbe essere anche un URL valido, cioè un indirizzo web di un sito Internet che la contiene, in questo caso però l'immagine sarà visibile soltanto nel momento in cui sarete collegati alla rete internet.

Questi alcuni possibili percorsi:



Codice:
<img src="nome_cartella/weblink.gif">
<img src="http:/[Devi essere iscritto e connesso per vedere questo link] .it/qqq.gif">
<img src="../nome_cartella/qqqq.gif">
Se specifichiamo le dimensioni dell'immagine aiuteremo il browser a visualizzare tutta la pagina con molta più rapidità, per cui è buona regola inserire sempre queste informazioni. Per farlo si adoperano i due termini in lingua inglese width ed height per larghezza ed altezza:

Codice:
<img src="  .gif" width="125" height="35">
I numeri 125 e 35 sono i pixel, l'unità di misura delle immagini, rispettivamente: width 125 px per la larghezza, e height 35 px per l'altezza. E' anche possibile specificare se l'immagine deve avere un bordo e di quale spessore, per ottenere questo si adopera l'attributo: border dove è ammesso anche il valore zero nel caso in cui non si volesse visualizzare alcun bordo. Impostarlo a zero risulta particolarmente utile nel caso di immagini usate come link, cioè all'interno del tag href dove questo bordo risulterebbe visibile con lo stesso colore impostato per i links.

Attenzione: se non viene specificato alcun border, nel senso che l'attributo viene omesso, sarà assunto per default un bordo impostato ad 1 e spesso oltre che fastidioso risulta non voluto. Per questo motivo conviene inserirlo sempre.

Codice:
<img src="  .gif" width="125" height="35"border="0">
Avrete certamente notato che tutti i vari attributi restano all'interno delle parentesi angolari, e non c'è un preciso ordine da rispettare, potrebbero essere messi anche in ordine diverso da quello che ho adoperato io a patto che ne sia rispettata la corretta sintassi e per sintassi si intende il segno di = uguale e le virgolette " ", anzi i doppi apici " ".

Ci sono molti altri attributi che potrebbero essere inseriti allo stesso modo, vi elenco quelli che secondo me si adoperano più spesso, rimandandovi alla guida HTML nel caso vi servisse conoscere l'elenco completo:

alt="descrizione dell'immagine". L'attributo alt (alternativa alla grafica) permette di specificare un testo per quei browser non grafici. Viene adoperato per descrivere l'immagine e non va confuso con title spiegato sotto. Il testo apparirà nel caso in cui l'immagine non venisse caricata, per questo motivo l'attributo ALT diventa obbligatorio ai fini di una validazione del W3C.




title="nome dell'immagine". L'attributo Title (titolo), permette di specificare un testo che descriva l'immagine, simile ad alt viene interpretato correttamente a prescindere se l'immagine grafica sia visibile o meno. Portate il cursore del mouse sull'immagine per leggere il suo titolo.




align="valore". L'attributo align permette di specificare il tipo di allineamento dell'immagine rispetto alla riga di testo successiva, i valori ammessi sono: left, right, top, middle, baseline e bottom. I due valori principali: left e right (sinistro e destro) fanno si che l'immagine diventi di tipo flottante.




hspace e vspace="valore in pixel". L'attributo VSPACE così come l'attributo HSPACE vengono adoperati nelle immagini flottanti, cioè quelle immagini allineate con left e right, servono ad impostare rispettivamente degli spazi verticali ed orizzontali (Vertical Space ed Horizontal Space) fra il testo e l'immagine stessa ed anche fra l'immagine e la sua cornice.

Questo un esempio di un richiamo ad un'immagine adoperando tutti gli attributi fino ad ora descritti.

[Devi essere iscritto e connesso per vedere questa immagine]
Da notare che fra un attributo e l'altro si lascia uno spazio vuoto.

Nota: il nome dell'immagine deve essere scritto esattamente come è realmente, rispettando cioè eventuali maiuscole/minuscole o spazi vuoti, questi ultimi andrebbero sempre evitati e se proprio necessari sostituiti magari dal simbolo underscore _ Tutta questa attenzione perchè a differenza di windows che non farebbe alcuna distinzione fra una maiuscola ed una minuscola inserita nel nome di un file, sul server web, una volta trasferito il lavoro, l'immagine di nome Web-link.gif sarà considerata un'immagine diversa dalla stessa immagine che si chiamasse invece .gif

Una delle prime difficoltà che si incontrano quando si vogliono inserire delle immagini in una pagina web è il loro posizionamento preciso all'interno della pagina, gli attributi di allineamento visti sopra non bastano, sono riferiti al testo che di solito accompagna le immagini. Per posizionare una immagine si può fare uso di contenitori vuoti
...
ai quali assegnare un tipo di allineamento: left, right, center o adoperando i css specificare le coordinate per posizionarlo in modo assolutamente preciso.


[Devi essere iscritto e connesso per vedere questa immagine]
Tornare in alto Andare in basso
Vedi il profilo dell'utente http://angelodiluceinternet.forum-ativo.com
 
Le Immagini
Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto 
Pagina 1 di 1
 Argomenti simili
-
» IMMAGINI SULLE ROUTINE SCOLASTICHE
» storia e geografia semplici con immagini
» Immagini divertenti
» AGATA NEI SUOI VARI COLORI
» BUON COMPLEANNO KIKKA

Permessi di questa sezione del forum:Non puoi rispondere agli argomenti in questo forum
AngelodiluceInternet :: Lezioni di HTML-
Andare verso: