immagini & colori in html · width e height sono i due attributi fondamentali per definire la...
TRANSCRIPT
Immagini & Colori
in HTML
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 HEIGHT
Sono 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 img
height > 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 ASSOLUTO
QUANDO 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