martedì 21 giugno 2011

CSS III Lezione: il testo

Lezione 3 : i CSS

Vediamo alcune proprietà per formattare il testo:

Per allineare il testo useremo:

text-align : center; \* testo al centro*\
text-align : left; \* testo a sinistra *\
text-align : right; \* testo a destra *\
text-align : justify; \* testo giustificato *\

Il grassetto e il corsivo del nostro testo sarà applicato con:

font-style: italic \* se vogliamo scrivere il testo in corsivo*\

a font-style è possibile associare:

italic
normal
oblique
inherit

font-weight: bold \* se vogliamo scrivere testo in grassetto *\

Le proprietà di font-weigth sono:

normal
bold
bolder
lighter
inherit

Per il testo sottolineato:

text-decoration: underline; \*testo sottolineato*\

Le proprietà di text-decoration sono:

overline (linea sopra il testo)
underline (sottolineato)
line-through (sbarrato)
blink (lampeggiante -non IE)
none (nessuno)

Per decidere di quanto il testo deve rientrare:

text-indent: 10px

text-indent: 10%

Per lo spazio tra i caratteri:

letter-spacing: 6px;

Per indicare la famiglia di font che il browser utilizzerà per la pagina bisogna utilizzare il tag:

font-family: Arial, verdana, Sans-serif;

La dimensione del font:

font-size: 30px;
font-size: 30pt;
font-size: 30%;
font-size: 8em;

Cosa cambia tra le misure? Il pixel è il formato video, mentre il point il formato di stampa, l'em e la percentuale sono misure relative (a differenza delle prime due che sono misure assolute), ad esempio se l'em è 1, e abbiamo dichiarato il font base a 12 px, il font con l'em sarà del 150% in più ovvero di 18 px, la percentuale è simile all'em.

I tag font possono essere raggruppati:

         p {
                
                font-weight: bold;
                font-size: 18px;
                font-family: Verdana, Arial,Sans-serif;
      font-style: italic; 

        }

Può essere riscritta come:

p {

font:bold, small-caps,italic, 18px ,Arial;

}

Con l'ordine:

font-weigth, font-variant (questo attributo ha solo due varianti small-caps, che trasforma tutte le lettere maiuscole in una dimensione minore come fossero lettere minuscole, e normal), font-style, font-size, font-family.

lunedì 20 giugno 2011

CSS: II Lezione La sintassi

CSS: Lezione 2 La sintassi

Nei css, esterni o interni alla classe, abbiamo visto che è possibile ridefinire le caratteristiche di alcuni tag html (nella lezione precedente abbiamo modificato il tag h1), ma possiamo anche ridefinire altre classi ed apllicarle ad un contenitore.

Ad esempio, se nell'<head> scriviamo:

<style type=" text/css">

.miaclasse {

font-family: Verdana, Arial,Sans-serif;

color: red;

font-size: 11px;

text-align: center;

}

</style>

E nel body scriviamo:

<p class= “miaclasse”> Questo testo è arial e in rosso e allineato al centro </p>

Attenzione: la classe è preceduta da un punto e può essere riutilizzata per più contenitori.

Invece se scriviamo:

<style type ="text/css">

#mioid {

font-family: Verdana, Arial,Sans-serif;

color: red;

font-size: 11px;

text-align: center;

}

</style>

Abbiamo creato un id. Qual'è la differenza con la classe, direte voi?

L'id può essere applicato ad un solo elemento, la classe a più di uno. Solitamente questo è utilizzato col tag <div>, ma nessuno vieta di utilizzarlo con qualche altro contenitore htm.

Per richiamarlo all'interno del body si scrive:

<div id= “mioid”> Questo contenitore è rosso, in Arial e allineato al centro </div>

Facciamo un esempio:

<html>

<head>

<title> Primi esercizi con Css</title>

<style type="text/css">

.miaclasse {

font-family: Verdana, Arial,Sans-serif;

color: red;

font-size: 16px;

text-align: center;

}

#mioid {

font-family: Verdana, Arial,Sans-serif;

color: #990066;

font-size: 11px;

text-align: rigth;

}

H1 {

color: #009900;

font-size: 22px;

text-align: center;

font-style: italic;

}

</style>

</head>

<body>

<H1> Questo è il titolo della pagina</H1>

<div id = "mioid">

<ul>

<li> Primo elemento </li>

<li> Secondo elemento </li>

</ul>

</div>

<div class ="miaclasse"> Documento creato da: </div>

<p class = "miaclasse"> Firma</p>

</body>

</html>

Il risultato:

Primi esercizi con Css

Questo è il titolo della pagina

Primo elemento
Secondo elemento

Documento creato da:

Firma

martedì 14 giugno 2011

CSS: I lezione

I CSS: Lezione I

I css, detti anche fogli di stile, sono nati con il preciso compito di occuparsi della formattazione di una pagina web, cosa che prima era demandata al linguaggio html.

Oggi, i contenitori vengono sempre creati con i tag html mentre per la formattazione il loro uso è deprecato a favore dei fogli di stile.

Formattare un testo in css vuol dire anche creare un codice che può essere utilizzato per un intero sito web senza che si debba modificare a mano ogni singola pagina.

I css, Cascading Style Sheets, possono essere utilizzati in tre modi:

Come fogli di stile in linea
come fogli di stile incorporati
come fogli di stile esterni

Fogli di stile in linea

In questo caso non ci spostiamo molto da quello che è l'utilizzo dell'html, infatti le proprietà verranno dichiarate nel contenitore (ricordiamo che esso può essere ad esempio un paragrafo <p> o <div> o <span>), e avrà effetto solo ed esclusivamente su questo contenitore.

Ad esempio:

<div style = “font-size: 8px; color: red”> testo in rosso </div>

Come avrai già notato gli attributi vengono seguiti dai due punti invece che dall'uguale, questa è una prima differenza nella sintassi dei Css.

Fogli di stile incorporati

Le proprietà vengono inserite nell'head della pagina html e hanno effetto su tutta la pagina, non sul tutto il sito web, utilizzando il tag <style type= “text/css”>

Ad esempio:

<html>

<head>

<style type = “text/css”>

body {background-color: red;}

       </style>
 </head>

Nota che:

Sono utilizzate le parentesi graffe
Al posto dell'uguale utilizziamo i due punti
Gli argomenti sono separati dal punto e virgola invece della virgola
Non vi sono le virgolette

Una migliore indentazione sarebbe:

<html>

<head>

<style type = “text/css”>

H1 {

font-size: 13px;

font-family: Arial;

color: red;

}

</style>

</head>

Con gli argomenti uno sotto l'altro.

In questo caso tutti gli elementi racchiusi tra i tag H1 avranno il colore rosso, font Arial e grandezza 13.

Fogli di stile esterni

All'interno dell'head viene richiamato un foglio si stile esterno alla pagina:

<html>

<head>

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

</head>

Stando ben attenti a inserire il percorso corretto in cui si trova il foglio di stile, in questo modo potremo applicare la stessa formattazione a tutte le nostre pagine web, basta inserire questa dicitura nell'head delle pagine in cui vogliamo utilizzarlo.

Vedremo meglio la sintassi dei css nelle prossime lezioni....

HTML: Lezione 15 I Form (II parte)

Lez 15 i Forms II parte

Vediamo gli attributi che possiamo utilizzare con ogni campo.

<input type= text”>

size: larghezza del campo, a seconda di questo attributo si definisce la quantità di dati che visualizzeremo.
Maxlength: massima quantità di dati che possiamo immettere
name: nome interno al campo, che il programma che preleverà i dati
value: valore di default.
align: l'allineamento del field. Puoi scegliere tra : top, middle, bottom, right, left.

Gli stessi attributi si possono applicare ai field password, che sono sempre campi di testo, quello che cambia e che la password immessa non è visibile sul monitor.

Per la textarea, invece abbiamo gli attributi:

<textarea> Questa è l'area di testo </texarea >

cols e rows, ovvero il numero massimo di righe e di colonne del campo.
Name= aggiungere un nome interno al field
wrap = questo attributo può essere, wrap = “off “(il testo è visto come una lunga serie senza gli a capo), wrap = “virtual” (il testo va a capo, ma quando viene inviato diventa una riga unica, 2wrap=physical “il testo va a capo e quando viene inviato rimane così com'è, con tutti gli a capo).

La checkbox, permette di selezionare più scelte, a differenza dei bottoni radio, per cui ne vale solo una.

Name= nome del campo, utili per il programma che riceverà le informazioni.
Value= indica quale opzione è stata scelta, e quindi, ciò che verrà inviato al programma ricevente.
Align= il solito allineamento.
Se aggiungiamo l'attributo checked="checked", vuol dire che stiamo scegliendo questa opzione come standard.

Inutile dire che questi attributi valgono anche per il type = radio, ovvero per i bottoni radio.

I menù a discesa, permettono anch'essi la scelta tra varie opzioni, funziona come i bottoni radio o la checkbox.

Il tag è :

<select>

<option value= “primascelta”> primo </option>

<option value = “secondascelta”> secondo </option>

</select>

Gli attributi di select sono:

name = nome del menù a discesa. Viene scritto select .
Size = quante scelte sono visibili nello stesso momento, di default è una.
Multiple = è presente la scelta multipla.

Gli attributi di option

value =cosa verrà inviato al programma ricevente.

Selected = la voce selezionata di default.

I bottoni di invio < input type = “submit”>, hanno come attributi

name = il nome del bottone
value = il nome visualizzato sul bottone
align = allineamento
tabindex = ordine in cui i campi verranno attivati.

Il tasto reset <input type = “reset”> ha come attributi:

name = il nome del bottone
value = il nome visualizzato
align = l'allineamento
tabindex = ordine in cui i campi verranno attivati.

Gli attributi dell' <input type =”image”> sono:

name = il nome dell'immagine
src = l'indirizzo dell'immagine
align = l'allineamento
border = il bordo intorno all'immagine
height = l'altezza dell'immagine
width = la larghezza dell'immagine
vspace = lo spazio bianco sopra e sotto l'immagine
hspace = lo spazio a destra e sinistra dell'immagine
tabindex = ordine in cui i campi verranno attivati

Facciamo un esempio:

<html>

<title> Il mio form </title>

<body>

<form name = "Contattaci" method ="post" action="http://www.miodominio.com/myformhandler.cgi" >

<fieldset>

<p align = "center">

<legend > dati utente :</legend>

<input type = "text" name = "nome" value = "Il tuo Nome">

<input type = "text" name = "cognome" value = "Il tuo Cognome">

</p>

<p align ="center">

<label > Scrivici: <br/>

<textarea cols ="60" rows="10" wrpa ="physycal">

Scrivi qui il tuo messaggio

</textarea>

</p>

</fieldset>

<p align = "center">

<label> Password: <input type ="password"></label><br/>

<label> Linguaggio di programmazione preferito: <br />

<select>

<option>Java</option>

<option>C++</option>

<option> Php </option>

<option> Altro </option>

</select>

</label><br/>

<label> Linguaggi conosciuti: <br />

<select multiple ="multiple" size ="5">

<option>Java</option>

<option>C++</option>

<option> Php </option>

<option> Html</option>

<option> Css </option>

</select>

<p>

<fieldset>

<p align = "center">

<label> Accetti termini e condizioni?

<input type= "radio" name = "option1" checked = "checked"> Si

<input type = "radio" name= "option2" > No

</label>

</filedset><br />

<input type ="submit" name ="invia" value="Invia" align ="center">

</p>

</form>

</body>

</html>

Il risultato sarà:

HTML: Lezione 14 I Form (I parte)

Lez 14 I forms I parte

I forms sono semplicemente dei moduli che ci permettono di interagire con l'utente. In realtà, per lavorare su questo tipo di elementi abbiamo bisogno, oltre che della pagina che verrà visualizzata dall'utente anche di una pagina secondaria che verrà creata con un linguaggio più complesso come asp o php, ad esempio.

Quindi sono dei form quei moduli che ci permettono di iscriverci ad un sito web o di fare una ricerca all'interno di un sito.

Dato che questo è un corso di html, ci occuperemo solo della parte grafica di questi elementi.

L'inizio e la fine di un form viene indicata dal tag

<form>

</form>

Per dare un nome al form utilizziamo l'attributo name:

<form name=”mandaci un'email>

Con action, indichiamo l'indirizzo a cui inviare il form.

<form name= “mandaci un'email” action= “mailto:lezioninformatica@gmail.com”>

Infine, dobbiamo indicare se il metodo di invio è di tipo post o get.

<form name= “mandaci un'email” method= “post” action= “mailto:lezioninformatica@gmail.com”>

Il metodo get è indicato quando devono essere inviati pochi parametri e per lo più testuali, dato che questi vengono passati come indirizzo alla pagina che li riceverà.

Quindi nell'url di risposta avremo tutti i dati dopo il punto interrogativo:

<form name="datiUtenti" action="paginadirisposta.php"method="GET">

paginadirisposta.php?nome=Mario&cognome=Rossi&datiInviati=messaggio+ di+ prova

Il metodo post, invece, è indicato se abbiamo una gran mole di dati e se dobbiamo passare dei dati sensibili come una password, infatti esso non usa la barra degli indirizzi, ma contatta la pagina che deve gestire i dati e poi li invia direttamente ad essa

<form name="datiUtenti" action="paginadirisposta.php"method="POST">

All'interno di un form, indichiamo con fieldtest delle aree in cui andremo a suddividere il nostro form

<form>

<fieldset>

<legend> dati utente</legend>

</fieldset>

<fieldset>

<legend>dati di fatturazione</legend>

</fieldset>

<fieldset>

<legend>termini e condizioni</legend>

</fieldset>

</form>

Avremo:

Abbiamo creato un form con tre sezioni e con il tag <legend>, gli abbiamo assegnato un nome.

Se vogliamo dare un etichetta ad un campo, dobbiamo usare il tag <label>

Vediamo come creare i campi.

Essi possono essere di testo, dei bottoni, una checkbox, ecc....

Per crearli dobbiamo scrivere: <input type = text>, ad esempio se vogliamo creare un campo di testo.

<form>

<fieldset>

<legend> dati utente</legend>

</fieldset>

<label> Nome: <input type= “text”></label>

<input type=”text”><label> : Cognome </label>

</form>

Il risultato sarà:

Vediamo i vari tipi di campi:

<input type=”text”> = inserisce una riga di testo
<textarea> più righe di testo </texarea>
<input type= “password”> = inserisce il campo per una password
<input type=”checkbox” name = “option” value=”Accetto”> Accetto termini e condizioni = consente la scelta di più opzioni spuntando una casella
<input type= “radio” name = “option” value=”Accetto”> Accetto termini e condizioni = come checkbox, con la differenza che si può spuntare solo una casella
<select>
<option>Privato</option>
<option>Partita iva</option>
</select>

= con option e select creiamo dei menù a discesa. Questi contengono tante opzioni, quanti option ci sono tra il campo select.

<input type= “submit” value= “invia”> = bottone di invio
<input type= “submit” value= “cancella”> = riporta i tutto ai valori di default
<input type= “image” src =”immagine.jpg” value= “invia”> = hanno lo stesso effetto dei valori di invio ma con la differenza che viene visualizzata un'immagine al posto del bottone

Nota che qui il tag input non ha bisogno di chiusura.

Vedremo che questi tag possono essere formattati a piacere.

Alla prossima....