Pagina aggiornata... Lunedì, 08 gennaio 2024 * Tempo di caricamento 0.14 secondi
Link navigazione : Home telaioHome ~ Tutorial ~ Html » Immagini...

..:: Immagini ::..

Gif... clip... pixel... sfondi... paesaggi... ovvero immagini ^_^
Piccole, grandi, animate o statiche sono un po' il cuore del web e come tutto quello
che vediamo in una pagina web hanno bisogno di essere messe online, ovvero postate
in una pagina e di un codice per essere visualizzate.

Anche la più piccola delle gif, ha un codice composto dall'indirizzo internet (url)
della pagina che la ospita e dei tag specifici a seconda dell'uso che se ne deve fare

Piccolo esempio...

<img border="0" src="http://url pagina/nome_immagine.gif" width="xx" height="xx" alt="Descrizione immagine">

- Vediamo i parametri del codice

<img : apertura tag

border="0" : parametro utilissimo quando le immagini si utilizzano per rappresentare i link
al posto del testo, affinché non siano bordate con il blu tipico dei link

src="http://url pagina/nome_immagine.gif" : indirizzo internet (url) che ospita la gif/immagine

width="xx" height="xx" : misura altezza e larghezza della gif/immagine

alt="Descrizione immagine" : parametro che permetterà la comprensione del contenuto
ai disabili, utilissimo per i motori di ricerca e evita un errore codice dal w3c^^

> : chiusura tag

Sono tanti i siti che offrono gratuitamente raccolte di immagini
per ogni genere, ci basterà salvarle nel nostro pc.

- Poggiare il mouse sull'immagine che vogliamo salvare, cliccare sul tasto destro, nel box che
si aprirà cliccare su "Salva immagine con nome" si aprirà una finestra con il contenuto del nostro pc,
scegliere e aprire con un doppio clik la cartella nella quale salvare, cliccare su "Salva"

Quando le vorremo usare nel nostro spazio le dovremo "hostare" ovvero metterle online affinché
abbiano un indirizzo web (url) per farle visualizzare, ecco alcuni spazi che offrono questo servizio
Imageshack || Flickr || Photobucket|| Postimage

Come in tutti gli spazi che offrono hosting occorrerà fare una registrazione
con nome utente e password da memorizzare così da poter accedere nello spazio che
ci viene messo a disposizione ogni volta che ci occorre, nella maggior parte dei casi avremo
anche la possibilità di creare delle cartelle per suddividere le varie immagini

- Per caricare/hostare le immagini entriamo nella nostra area utente, in genere troviamo un box
che ci permetterà di selezionarle attraverso la funzione "Sfoglia" direttamente dal nostro pc
scegliamo l'immagine da hostare e clicchiamo su "Apri" e in breve avremo l'indirizzo url che ci occorre

N.B.: Riscrivendo questa guida, mi sono accorta che molti degli spazi che offrivano questo servizio
sono stati chiusi, quelli rimasti offrono un servizio gratuito solo per un tempo determinato quindi,
il mio consiglio è hostare le immagini sul proprio spazio web, Altervista ad esempio concede
tantissimo spazio gratuito sia per il sito che per le immagini che ci serviranno, se invece utilizzate
un servizio a pagamento tipo Aruba lo spazio è illimitato perciò non avrete nessun problema



Vediamo ora quali sono i parametri necessari e utili che servono per visualizzare nel migliore
dei modi le immagini e alcune idee su come si possono utilizzare per rendere piacevole il nostro spazio

- Come abbiamo già visto, il primo parametro da aggiungere assolutamente necessario
per la validazione del codice con il W3C, è alt="Descrizione immagine" una piccola nota su cosa
rappresenta l'immagine, possiamo lasciare vuoto alt="" in caso di un logo o di una piccola gif
che precede un link, se ci si poggia sopra il mouse si potrà leggere cosa abbiamo scritto

Ciao ^_^ sono una gif di esempio <img border="0" src="http://url pagina/nome_immagine.gif" width="xx" height="xx" alt="Ciao ^_^ sono una gif di esempio">


* Se vogliamo inserire un indicazione specifica possiamo utilizzare il parametro title=""
lasceremo il parametro alt="" vuoto, e ovviamente anche in questo caso poggiando
il mouse sulla gif si leggerà cosa è stato scritto

<img border="0" src="http://url pagina/nome_immagine.gif" width="xx" height="xx" title="...ciao sono una gif prova!" alt="">


* Per arricchire un testo con le immagini, possiamo utilizzare i parametri di posizione:
align="left" align="right" align="top" align="bottom"
con il parametro left la gif/immagine si visualizzerà a sinistra del testo e a destra utilizzando right,
in alto con align="top" ma non sarà armonioso, la gif/immagine risulta "mescolata" con il testo
invece con align="bottom" ovvero in basso, l'effetto sarà più gradevole

<img border="0" src="http://url pagina/nome_immagine.gif" width="xx" height="xx" alt="Descrizione immagine"
align="left o right o texttop o absmiddle o absbottom">

Ed ecco degli esempi di come si visualizzeranno insieme al testo

Gif a sinistra ^_^ Prova gif align="left"

Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
Gif a destra ^_^ Prova gif align="right"

Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla


Prova gif align="top"

Gif in alto ^_^ Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla


Prova gif align="bottom"
Gif in basso ^_^ Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla



Con il parametro background possiamo utilizzare le immagini come sfondo
per le nostre pagine e per i contenitori table e div, per lo sfondo di una pagina possiamo inserire
il parametro nei css/foglio di style, opzione consigliata se ci occorre per le pagine di un sito
o direttamente nel tag <body> se stiamo preparando dei gadget

Parametro nello style, da inserire tra i tag <head< e </head>

<style type="text/css">
body {background-image: url('url pagina/nome_immagine.gif');}
</style>

Parametro nel <body>

<body background="url pagina/nome_immagine.gif">

N.B.: Consulta anche la guida || Sfondo Pagina ||

Sfondo per un contenitore Div

<div style="background-image:url('url pagina/nome_immagine.gif');height:xxpx; width:xxpx"></div>

Sfondo per una Table

<table style="background-image:url('url pagina/nome_immagine.gif')" border="1" width="xx">
<tr>
<td>&nbsp;</td>
</tr>
</table>

N.B.: Consulta anche la guida || Table sfondo ||

Una gif al posto del testo in un link,
molto utilizzati per postare banner pubblicitari spazi web^^

<a href="http://url pagina da linkare"><img border="0" src="http://url pagina/nome_immagine.gif" width="xx" height="xx" alt="Descrizione immagine"></a>

Ecco un piccolo esempio... Cliccate!

Gif & co... - Penelope ^_^

Immagini e javascript con il parametro: onmouseover="alert('Testo')"
Al clik su un'immagine si aprirà un piccolo box con un messaggio personalizzato^^

Passate con il mouse sulla gif...

<a onmouseover="alert('Testo messaggio')">
<img border="0" src="http://url pagina/nome_immagine.gif" width="xx" height="xx" alt="Descrizione immagine"></a>


Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^




92.5%
Voti totali: 8
Rating... 5





Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* Gif...

  


~ Pagina visitata da 2754 utenti


 H: 
Buon Inverno !





* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥

..:: Basi ::..



..:: html ::..








..:: Script page ::..




..:: Script gadget ::..




Accessori e gadget del telaio...


..: Spazio web...


Realizzare e gestire un sito web
con l'hosting free più famoso...



Gif  & co... Penelope ♥


Pagina Facebook
del telaio...




 

I vostri messaggi...

Lula
15/02/2024 15:32:39
Ciao cara come stai? Spero bene sono passata per un saluto veloce ♥
ೡ Scritto in... Iframe
 
Grazia
07/02/2024 07:45:12
Ciao Penny cara, mentre continuo l'interminabile lavoro per il mio sitino nuovo, sono passata a lasciarti un salutino veloce ♥ Spero sia tutto ok :) Cerco di fare, nei limiti delle mie possibilità, molte cose in contemporanea, avendo tante passioni (a proposito, grazie del tuo voto alla mia poesia su Instagram ♥ ) e quindi sono come te sempre di corsa, ma le amiche vengono prima di tutto. Un abbraccio e mille complimenti come sempre!
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
27/01/2024 08:50:44
Ciao Penny cara, sono passata per un salutino e per augurarti buon sabato ♥ Mentre lavoro con SharepointDesigner al nuovo spazio che ti dicevo di recente, un giro di saluti tra le amiche fa sempre piacere. Bacioni ♥
ೡ Scritto in... Il telaio di Penelope...
 
Penelope
21/01/2024 23:01:40
Cara Grazia WordPress è sicuramente la scelta migliore che si possa fare per avere uno spazio professionale semplice da gestire, conosco la piattaforma piuttosto bene e so che è anche molto versatile, per il mio telaio però preferisco un sito tradizionale mi piace trafficare con i codici ^_^ Un abbraccio forte a te
ೡ Scritto in... Iframe
 
Grazia
21/01/2024 08:21:23
Buongiorno e buona domenica Penelope! ❤️ Sai, io adoro come te i siti statici, ma per quel che riguarda gli spazi che personalmente costruisco con WordPress, sono tutti realizzati con software esterni acquistati di editing tecnico-grafico, nel mio caso non utilizzo le basi pronte fornite da Altervista, ma decido ogni singolo componente (anche la struttura interna delle pagine ecc.). Avevo bisogno di un blog per argomentare e WordPress era la scelta più professionale a disposizione! È sempre un piacere passare a trovarti, un abbraccio forte forte a te e ai ragazzi ed a presto
ೡ Scritto in... Iframe
 
Penelope
20/01/2024 22:57:04
Grazie carissima Grazia i tuoi complimenti sono davvero graditi, gli iframe sono una grande risorsa web e capire come utilizzarli al meglio può essere molto utile, spero ^_^ ho provato ad utilizzare WordPress con Altervista ma non fanno per me i cms, preferisco un sito indipendente da codici preimpostati Un abbraccio forte
ೡ Scritto in... Iframe
 
Grazia
19/01/2024 16:27:52
I nostri adorati iframe... :) Complimenti per la chiarezza, mi è piaciuto molto come hai descritto i vari passaggi, sei stata come sempre bravissima! Chi utilizza WordPress (ad es. su Altervista) ha la comodità di un blog e la possibilità anche di caricare pagine web complete, per questo lo adoro, c'è pure l'accesso FTP alla cartella dei contenuti, volendo...♥ Ma i siti prettamente statici hanno sempre il loro fascino....un abbraccio carissima!
ೡ Scritto in... Iframe
 
Grazia
12/01/2024 16:39:08
Buon pomeriggio, carissima Penelope, sono passata per lasciarti un salutino, io tutto bene, grazie di essere passata nel Taccuino! in questi giorni mi sto dedicando a tante attività creative/manuali e di scrittura...ad ogni modo spero che anche a te sia tutto ok! Passare qui è sempre un piacere. Un abbraccio forte ed alla prossima ♥
ೡ ...commentario
 
Lula
11/01/2024 10:50:29
Ciao carissima Penny, auguri di buone feste passate. Spero tu le abbia trascorse con serenità e in salute! io dietro ai fornelli e ai bimbi. ma sono felice^^ anche se un po' stanca e con la schiena a pezzi ^^Un abbraccio!!!
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
03/01/2024 10:40:42
Ciao carissima Penny, auguri di buon anno a te e ai ragazzi anche qui :) Sono venuta a prendere una giffina per la grafica nuova del Taccuino ♥ Grazie mille un abbraccio forte
ೡ Scritto in... Il telaio di Penelope...
 

Referer...



Gestisci le opzioni di privacy