Inserimento di un'immagine all'interno di pagine web:

La modalità classica per inserire un'immagine all'interno di un sito web è metterla attraverso l'utilizzo del tag corrispondente nell'html. La prima cosa da fare è avere l'immagine salvata sul nostro computer, quindi potremmo ad esempio scaricarla da Google immagini e dovrà necessariamente essere di dimensione esatta altrimenti va scontornata con l'utilizzo di programmi di fotoritocco come Gimp.

es: Sergio Castellitto -> size: 296x454 -> visualizza immagine -> tasto destro del mouse -> salva come:

Andremo, quindi a salvare l'immagine scelta dentro la cartella del sito su cui stiamo lavorando.
                
Per inserire l'immagine attraverso l'utilizzo dei codici html, ci serviremo del programma Coffe Cup.
La sintassi per inserire una immagine è:

<img src="http://miosito.it/miaImmagine.gif" alt="testo" />

 

I formati ammessi per il web sono sostanzialmente tre:

 

1) GIF: (Graphic Interchange Format)Questo formato consente di rappresentare anche semplici animazioni(Gif animate), esse hanno una tavolozza che non supera i 256 colori, per questo vengono utilizzate spesso per grafici o icone.

 

2) JPG (JPEG): È l’acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica.

3) PNG: (Portable Network Graphic) Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è invece proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno. PNG permette sia di rappresentare immagini di qualità fotografica, sia di ottimizzare i colori in modo simile a GIF.

 

 Sarà, quindi inutile provare a inserire un file “.psd” (formato nativo di Photoshop) all’interno della vostra pagina HTML: con grande probabilità il browser non caricherà il file (dovete infatti prima convertire il file in uno dei formati sopra-indicati).

È importante, dunque cercare sempre di ottimizzare i file evitando di caricare immagini troppo pesanti; Bisogna evitare anche di sovraccaricare una pagina con troppe immagini. Un peso eccessivo rende le pagine lente da caricare e questo può diventare un problema sia per gli utenti che fruiscono il sito web, sia per i motori di ricerca.

Dal momento che il browser normalmente non sa quali siano le dimensioni dell’immagine, finché questa non sia caricata completamente, è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine: in questo modo si evita di vedere la pagina costruirsi man mano che viene caricata, poiché stiamo dando al browser un’idea dell’ingombro. Per esempio:

 

<img src="logo.gif" width="224" height="69" />

 

Infine l’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto: l’attributo alt è di estrema utilità per rendere il sito accessibile a tutti gli utenti: i disabili che non sono in grado di vedere nitidamente le immagini sullo schermo potrebbero avere delle difficoltà, nel caso in cui l’attributo alt non sia specificato.

Disporre le Immagini in un contesto: 

Se inserita in un testo, normalmente un'immagine è allineata con il testo.
Per esempio:

  <p>HTML.it è il primo sito italiano sul web publishing <img src=”logo.gif” width=”224″ height=”69″ border=”0″> con centinaia di esempi e guide esplicative </p> 

In questo modo il risultato sarà semplicemente di ritrovare l'immagine inserita, allineata con il testo stesso:

 HTML.it è il primo sito italiano sul web publishing con centinaia di esempi e guide esplicative.

Abbiamo tuttavia la possibilità di allineare l'immagine utilizzando l'attributo align. Vediamo di seguito come vengono utilizzati gli attributi align=”left” e align=”right”:

Esempio di immagine allineata a sinistra:

 <p><img src=”logo.gif” width=”224″height=”69″border=”1″align=”left”>
HTML.it èil primo sito italianosul web publishing, con centinaia di esempi e guide esplicative</p>ù

Vedremo qualcosa del genere:

  HTML.it è il primo sito italiano sul web publishing, con centinaia di esempi e guide esplicative.

 

Esempio con immagine allineata a destra:

<p> <img src=”logo.gif” width=”224″ height=”69″ border=”1″ align=”right”>
HTML.it è il primo sito italiano sul web publishing, con centinaia di esempi e guide esplicative </p> 

Vedremo qualcosa del genere:
 
 HTML.it è il primo sito italiano sul web publishing, con centinaiadi esempi e guide esplicative.

Altri valori possibili sono:

Valore di align	Visualizzazione
bottom	allinea la prima riga di testo sulla sinistra nella parte bassa dell’immagine (è così di default).
middle	allinea la prima riga di testo sulla sinistra al centro dell’immagine.
top	allinea la prima riga di testo sulla sinistra nel lato superiore dell’immagine.

 
Da notare che, mentre align=”left” e align=”right”, sono utili per spostare l’immagine a sinistra o a destra, gli altri valori servono piuttosto per disporre le posizioni verticali di testo e immagini.
Infine con hspace (horizontal space, cioè “spazio orizzontale”) e vspace (vertical space, cioè “spazio veritcale”) possiamo impostare lo spazio (in pixel) che deve essere lasciata tra l’immagine e cioè che la circonda.

Nel caso di hspace, impostiamo uno spazio orizzontale da ambo i lati dell'immagine:


<img src=”logo.gif” width=”224″ height=”69″ hspace=”20″> 

Nel caso di vspace, impostiamo lo spazio verticale sempre da ambo i lati dell'immagine:

<img src=”logo.gif” width=”224″ height=”69″ vspace=”20″> 

mettere il sito online: caricamento FTP

Guida: https://docs.google.com/document/d/1nXeyO7X_pO6sXn2xbVOqoeoxen_eb-w1bOQ0mHLmXa4/edit

tutorial gimp

http://www.youtube.com/playlist?list=PL6EEF28543AA54B9E

http://www.unixmen.com/30-great-tutorials-for-gimp/

http://www.makeuseof.com/tag/top-10-beginner-level-video-tutorials-learn-gimp-fast/

http://www.fotocomefare.com/39-tutorial-gimp-italiano/

I fogli di stile CSS

A cosa servono? 
I fogli di stile (Cascadin Style Sheets) servono per gestire il layout di una pagina, cioè la sua presentazione - i colori dello sfondo e dei testi, le immagini di sfondo, il posizionamento delle colonne e  di altri elementi sulla pagina, ecc.

Come si creano?
Per gestire il layout con i fogli di stile non scriviamo tutto nello stesso file, ma dobbiamo creare uno nuovo, che poi colleghiamo con il file html a cui si riferisce.

Se usiamo il programma Coffeecup HTML Editor, a seconda della versione o apriamo Nuovo foglio di stile, o New blank page e cancelliamo tutto, dopo di che lo nominiamo con  .css.

Come collegarli al file html?

Siccome noi usiamo fogli di stile esterni, per farli riconoscere dal file .html, nella <head> dobbiamo inserire la seguente informazione:

<head>

  

<link href="stile.css" rel="stylesheet" type="text/css">

 </head>

In tale modo il file .html riconosce il proprio file .css

Selettori di base dentro i fogli di stile:

Dentro i fogli di stile si può lavorare su tre tipi di selettori:

1. tag semplice (selettore di elementi) - è il più semplice dei selettori. È costituito dal nome di uno specifico elemento HTML. Serve a selezionare tutti gli elementi di quel tipo presenti in un documento.

 - sintassi -  selettore{attributo: valore;}

esempio: 

p {background-color: yellow;}  - che serve per fare lo sfondo dei paragrafi giallo

È possibile nei CSS raggruppare diversi selettori al fine di semplificare il codice. I selettori raggruppati vanno separati da una virgola:

h1, h2, h3 {background: white;} - cosi tutti e tre gli elementi hanno uno sfondo bianco

2. id – ha la sintassi abbastanza semplice - basta far precedere il nome dal simbolo di cancelletto #:

Se, per esempio, nel file html abbiamo presente il seguente elemento :

<h1 id="titolo">...</h1>

Gli assegnamo il colore blu con la regola:

#titolo {color: blue;}

3.classi

Il Linguaggio HTML

Il linguaggio html è un linguaggio di markup e non di programmazione. Esso dà indicazioni su informazioni come, per esempio, il colore o il formato delle scritte, la posizione degli elementi all’interno della pagina. Il browser ha la funzione di leggere il linguaggio html, interpretarlo e visualizzare la pagina nel modo corretto.

Il Tag (lezione 5): il concetto chiave del linguaggio html è il tag (o marcatore), a cui viene affidata la visualizzzazione. I tag html possono rappresentare oggetti (come ad esempio le immagini) o servire a suddividere la pagina in aree (come i "div"). 

I tag vanno inseriti tra parentesi angolari (<tag>) e la chiusura del tag viene indicata con un "/" (slash)

Il contenuto va inserito tra l'apertura e la chiusura del tag. Esempio: <tag>contenuto</tag>.

I tag principali sono:
<br/> (shift + invio)---> è il tag che consente di andare a capo

<strong> ----> è il tag che permette di evidenziare una o più parole in grassetto

<a href="la pagina a cui riconduce il link">contenuto (la parola cliccabile)</a> ---> è il tag del link

  Questo è il tag del link. Come vediamo tale tag si compone di 2 parti: la prima ci dice a quale pagina riconduce quel link. La seconda, invece, indica il contenuto del link.                                  

La struttura della pagina (lezione 8): il documento html presenta una dichiarazione iniziale ed è suddiviso in due sezioni: Head e Body. l'Head contiene tutte quelle informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto ed interpretato. Nel body invece è racchiuso il contenuto vero e proprio del documento. E' qui che andremo a scrivere. 

Esempio di documento html: 

     

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html>
<head>
   <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
   <title>HTML.it</title>
</head>
<body>
   <!– Scriveremo qui –>
>
   Qui il nostro contenuto

</body>
</html> 

Editare un documento html: Un documento html, essendo un file di testo, può essere editato e modificato con strumenti come il "blocco note". Per agevolare e facilitare il lavoro di editing esistono però programmi più avanzati come Coffee Cup. 

Per creare un file con Coffee Cup: aprire il programma, clickare su file, clickare su "new blank page".

Per salvare un file con Coffee Cup: clickare su file, clickare su "save as", salvarlo in una cartella. E' importante ricordare che tutti i file che servono per la costruzione del nostro sito vanno racchiusi all'interno della stessa cartella.