immagini & colori in html immagini e coloristesso file con un ipotetico testo di...
TRANSCRIPT
Immagini & Coloriin HTML
Immagini e Colori
Inserimento di un’immaginePrima dell’avvento del World Wide Web la parte multimediale di internet era quasi inesistente, predominava il grigio.
Il documento HTML anche se ben realizzato ha l’indubbio pregio di presentare informazioni aggiornabili a basso costo in modo chiaro e accessibile.
Uno dei suoi punti di forza è la possibilità di utilizzare la GRAFICA.
Il TAG per inserire immagini è <IMG>;
NON RICHIEDE NECESSARIAMENTE UN TAG DI CHIUSURA,
NECESSITA DI ALMENO UN ATTRIBUTO CHE COMUNICHI AL BROWSER DOVE SI TROVA L’IMMAGINE.
<IMG SRC=”PERCORSO/NOME_IMMAGINE.estensione del file”>
PERCORSO= si intende la cartella dove sono riposte le immagini che si intendono usare, si può omettere nel caso in cui il documento HTML e l’immagine si trovano nella stessa directory.
IMMAGINE CON PERCORSO RELATIVO
Cartella contenente l’immagine e il file HTML
Fiera dell’Est
l’immagine è rinominata duesoldi, è un JPG e si trova all’interno della cartella Fiera dell’Est insieme al file HTML rinominato fiera.html
.jpg
Il file HTML è così composto
IMMAGINE CON PERCORSO ASSOLUTO
In genere il Web Designer per lavorare al meglio dispone le immagini in più directory rinominandole a seconda di dove intenderà inserire le immagini all’interno della pagina web.
NON INSERIRE UNA CARTELLA IMMAGINI E COME NON RINOMINARE IL PRIMO FILE INDEX.HTML E’ UN ERRORE!
2 Esempi
La directory è all’interno della stessa medesima del file html e in questo caso è chiamata images.
All’interno della cartella troviamo un’immagine che in questo caso è un png.
.png
<html> <head> <title>Fiera</title> </head> <body>
<p>Alla fiera dell'est</p><br> <p>per due soldi</p><br>
<img src="duesoldi.jpg">
<p>un topolino mio padre comprò.</p>
<img src="images/topolino.png">
</body> </html>
in questa riga è presente un carattere speciale che vedremo più avanti
Percorso Relativo
Percorso Assoluto
WIDTH E HEIGHTSono i due attributi fondamentali per definire la LARGHEZZA e l’ALTEZZA di un’immagine.
Le immagini nei siti web moderni sono praticamente fondamentali e rendono il sito che stiamo visualizzando più accattivante e di design.
Molti utenti però ancora oggi preferiscono navigare su internet in semplice modalità di sola lettura, per velocizzare il caricamento da parte del Browser Web del solo testo.
Anche per questo scopo esiste un attributo da inserire all’interno del TAG <IMG> che permette di “etichettare” la vostra immagine all’interno della pagina HTML, ovvero aggiunge una descrizione; il TAG alt.
widht > larghezza imgheight > altezza img
<img src=”images/topolino.png ; width=”50” ; height=”50” ; alt=”testo alternativo all’immagine altrimenti visibile come toolip”>il “testo alternativo all’immagine altrimenti visibile come toolip” è quel testo che compare quando non viene visualizzata l’immagine dal browser, utile per far capire all’utente che li voi avete posizionato un’immagine e nel suo caso non si è ancora caricata.
Toolip è inteso come etichetta.
Questo simbolo compare nell’url del browser quando in un sito web è disponibile la sola lettura.
Le immagini in genere di default possiedono un bordo blu che viene evidenziato quando l’immagine è anche linkata.
E’ comunque possibile aggiungere un bordo più spesso come una sorta di cornice aggiungendo l’elemento border=numero
<img src=”images/topolino.png ; width=”50” ; height=”50” ; alt=”testo alternativo all’immagine altrimenti visibile come toolip” border=”10”>
<html> <head> <title>Fiera</title> </head> <body>
<p>Alla fiera dell'est</p><br> <p>per due soldi</p><br>
<img src="duesoldi.jpg">
<p>un topolino mio padre comprò.</p>
<img src="images/topolino.png" ; width="50" ; heght="50" ; alt="testo alternatio all'immagine altrimenti visibile come toolip" ; border="10">
</body> </html>
Il risultato è che l’immagine topolino.png si è rimpicciolita di 50 x 50 pixel, con un bordo di 10 x 10 pixel e al passaggio del mouse in modalità sola lettura apparirà la descrizione “testo alternativo all’immagine altrimanti visibile come toolip”.
POSIZIONAMENTO ASSOLUTOQUANDO SISTEMIAMO UN’IMMAGINE ALL’INTERNO DEL NOSTRO FILE HTML, OVUNQUE ALL’INTERNO DEL NOSTRO IPERTESTO ESSE VENGA SISTEMATA, COMUNQUE IL BROWSER WEB DI DEFAULT LA POSIZIONERA’ A PARTIRE DALLA SUA SINISTRA.
COME FARE DUNQUE A SISTEMARE PIU’ IMMAGINI ALL’INTERNO DELLO STESSO FILE CON UN IPOTETICO TESTO DI ACCOMPAGNAMENTO?
SI UTILIZZA IL TAG DI STILE DEL POSIZIONAMENTO ASSOLUTO DOVE GLI ELEMENTI:
TOP = L’IMMAGINE SI SPOSTA DALL’ALTO VERSO IL BASSO
LEFT = L’IMMAGINE SI MUOVE DA SINISTRA VERSO DESTRA
<div style="position:absolute; top:400px ; left:500px"><img src="images/lambo.png" height="50" ; widht="50" ; border="0"></div>
Tag per il posizionamento assoluto dell’immagine
TOP E LEFT SONO CALCOLATI IN PIXEL (PX)
UN MONITOR MODERNO MISURA: 1920 x 1080 pixel
TOP=”400px”
LEFT=”500px”
L’immagine di default viene sistemata all’estrema sinistra della pagina html.
CON IL POSITION ABSOLUTE MOLTO SPESSO BISOGNA ANDARE PER TENTATIVI, ESISTONO ALTRI ELEMENTI TAG DA INSERIRE ALL’INTERNO DI <IMG>
QUESTO ATTRIBUTO SI CHIAMA ALING OVVERO ALLINEA L’IMMAGINE IN AUTOMATICO SENZA DEFINIRE I PIXEL, COMPRESA IN UN PARAGRAFO DI TESTO.
SONO 5 I VALORI POSSIBILI DA INSERIRE NELL’ELEMENTO ALING=”VALORE”
LEFT : L’IMMAGINE SI TROVA A SINISTRA, IL TESTO SCORRE A DESTRA;
RIGHT : L’IMMAGINE SI TROVA A DESTRA, IL TESTO SCORRE A SINISTRA;
TOP : IL BORDO SUPERIORE DELL’IMMAGINE è ALLINEATO AL BORDO SUPERIORE DEL TESTO;
MIDDLE : IL TESTO SI TROVA IN CORRISPONDENZA DELLA META’ DEL VALORE HEIGHT (PIù DIFFICILE A SPIEGARE CHE DA IMPLEMENTARE);
BOTTOM : IL BORDO INFERIORE DELL’IMMAGINE è ALLINEATO AL BORDO INFERIORE DEL TESTO.
ESEMPIO:
<h4>Immagine con allineamento automatico (align="top"):</h4> <p>Testo<img src="img/bentley.jpg" alt="Bentley" width="300" height="100 align="top" > Testo</p>
IMMAGINE CON LINK
LINK DEL SITO PRIMA DELL’IMMAGINE
<a href="https://www.bentleymotors.com/en.html"> <img src="img/bentley.jpg" alt="Bentley" width="1366" height="477"></a>
IMMAGINE RESPONSIVE
IL METODO RESPONSIVE è OGGI IL PIù COMUNE USATO DAI WEB DESIGNER, UTILE PER RENDERE LE IMMAGINI DISPONIBILI SU QUALSIASI DISPOSITIVO MODERNO COME:
SMARTPHONE (in genere da 3.5’’ a 5.5’’) TABLET ( da 4’’ a 9’’) MONITOR PC CURVI 1920 x 1080 ( 25’’ + -) MONITOR PC 1920 x 1080 ( 23’’ + -) MONITOR PC ‘’quadrato’’ 1280x1024 ( dipende)
PER RENDERE L’IMMAGINE RESPONSIVE SI INSERISCE UN IPERTESTO “PREFABBRICATO” JAVA ALL’INTERNO DELL’ HEAD PERCHE’ è UN ELEMENTO CHE RIGUARDA LE IMMAGINI DELLA PAGINA HTML MA NON SI VEDE UNA VOLTA APERTE LE DAL BROWSER.
ESEMPIO:
IMMAGINE SITO WEB VISIONE STANDARD
IMMAGINE SENZA IPERTESTO RESPONSIVE
QUANDO SI APPLICA L’IPERTESTO PER IL RESPONSIVE DESIGN L’IMMAGINE SI ADATTA AL DISPOSITIVO IN USO
<html> <head> <title>Prova Link Immagine</title>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
<h1>IMMAGINE RESPONSIVE</h1> <p>L'immagine si adatta al dispositivo</p> <br><br><br>
<img class="img-responsive" src="img/bentley.jpg" alt="Bentley" width="1366" height="477">
</body> </html>
script prefabbricato per responsive all’interno dell’head
html che identifica quale immagine deve diventare responsive
I COLORI
I siti web moderni utilizzano un aspetto minimal.
Spesso si vedono siti web dove vengono utilizzati uno o due colori per il testo ed i link.
I testi troppo colorati nel mondo del web moderno non sono più di moda, esclusione fatta per loghi e intestazioni.
Esistono diversi modi per definire i colori all’interno delle pagine web, testi, sfondi, link visitato e non visitato.
Si possono usare anche i Fogli di Stile ovvero i CSS (Cascading Style Sheet) per stabilire i colori senza doverli riprogrammare per ogni pagina. (Anticipazione)
Come visto in precedenza per il FONT si può programmare il colore del testo.
E’ anche possibile programmare altri colori in un unico comando inserito nel <BODY>, senza doverlo più ripetere per tutti gli altri comandi.
<html> <head> <title> Prova CSS </title> <head>
<body; text=”black”; bgcolor="white" link=”blue”; vlink=”red”; alink=”purple”> <h2>Prova Testo</h2> <p>Clicca</p> <a href="....inserire link…(copia incolla dall’url) " >qui</a> </body> </html>
Esempio colori testo-sfondo-link
<body; text=”black”; bgcolor="white" link=”blue”; vlink=”red”; alink=”purple”>
Tag di riferimento
COLORE DEL TESTO
COLORE DELLO SFONDO
COLORE DEL LINK NON VISITATO
COLORE DEL LINK VISITATO
COLORE DEL LINK AL PASSAGGIO DEL MOUSE
<FONT FACE=”ARIAL”> <FONT COLOR=”BLACK”> <FONT SIZE=”7”>
CARATTERE COLORE DEL TESTO DIMENSIONE CARATTERE
<body bgcolor="gray">
IMPOSTARE UN COLORE DI SFONDO CON IL TAG BGCOLOR
I COLORI NEL WEB SONO DISPONIBILI IN TRE VERSIONI, IN INGLESE DOVE SE NE HANNO A DISPOSIZIONE SOLO 16, IN VERSIONE TRIPLETTA ESADECIMALE OPPURE DECIMALE.
I 16 COLORI “ATTIVI” SUL WEB (SI POSSONO SCRIVERE SOLO IN INGLESE PER CONVENZIONE), SONO:
BLUE BLACK FUCHSIA GRAY GREEN LIME MAROON NAVY OLIVE PURPLE RED SILVER TEAL YELLOW
IL 16° è OVVIAMENTE WHITE CHE ANCHE SE NON SPECIFICATO DI DEFAUTL UNA PAGINA WEB E’ SEMPRE BIANCA.
I COLORI DECIMALI CI PERMETTONO DI AVERE PIU’ POSSIBILITA’ CROMATICHE
TUTTI I COLORI DECIMALI VANNO PRECEDUTI DAL SIMBOLO CANCELLETTO #
QUI I PIù COMUNI:
BLU:
AZURE #F0FFFF
LIGHTBLUE #ADD8E6
SKYBLUE #87CEEB
AQUA #00FFFF
DARKTURQUOISE #00CED1
BLUE #0000FF
DARKBLUE #00008B NAVY #0000B0
VERDE:
GREENYELLOW #ADFF2F
LIGHTGREE #90EE90
DARKSEAGREEN #8FBC8F
OLIVE #808000
AQUAMARINE #7FFFD4
GREEN #008000
DARKGREEN #006400
ROSA E ROSSI:
PINK #FFC0CB
LIGHTPINK #FFB6C1
ORANGE #FFA500
DARKORANGE #FF8C00
CORAL #FF750
HOTPINK #FF69B4
TOMATO #FF6347
ORANGERED #FF4500
DEEPPINK #FF1493
FUCHSIA - MAGENTA #FF00FF
RED #FF0000
SALMON #FA8072
LIGHTCORAL #F08080
VIOLET #EE82EE
DARKSALMON #E9967A
DARKMAGENTA #8B008B
PURPLE #800080
MAROON #800000
GIALLI:
IVORY #FFFFF0
LIGHTYELLOW #FFFFE0
YELLOW #FFFF00
FLORALWHITE #FFFAF0
LRMONCHIFFON #FFFACD
GOLD #FFD700
BEIGE E MARRONI:
SNOW #FFFAFA
SEASHELL #FFF5EE
ANTIQUEWHITE #FAEBD7
BEIGE #F5F5DC
WHEAT #F5DEB3
SANDYBROWN #F4A460
GOLDENROD #DAA520
CHOCOLATE #D2691E
PERU #CD853F
BROWN #A52A2A
SIENNA #A0522D
BIANCHI E GRIGI:
WHITE #FFFFFF
GHOSTWHITE #F8F8FF
WHITESMOKE #F8F8FF
LIGHTGREY #D3D3D3
SILVER #C0C0C0
DARKGRAY #A9A9A9
GRAY #808080
BLACK #000000