martedì 31 maggio 2011

HTML: Lezione 13 Le immagini

Lez 13 Le immagini

Per inserire un immagine, dobbiamo usare il tag <img>

Scriveremo:

<img src = “indirizzoimmagine.jpg”>, se vogliamo usare un link ad un immagine in posizione relativa.

<img src=”http://www.immagine.jpg”>, se vogliamo usare un link ad un immagine in posizione assoluta.

Notiamo che questo tag non ha bisogno di chiusura.

Le immagini che possiamo inserire in una pagina web, sono essenzialmente di tre tipi:

jpg, png o gif.

Aggiungendo gli attributi width e height, possiamo modificare altezza o larghezza delle immagini.

<img src= “miaimmagine.png width”= “100” height =”250”>.

Attenzione: gli attributi altezza e larghezza modificano le dimensioni dell'immagine, ma non il suo peso, quindi se abbiamo foto molto pesanti, il browser ci metterà un po' a caricarle. È bene, quindi, ridimensionare le foto più grandi, prima di utilizzarle. Molti programmini, come Fotosizer, permettono di farlo.

L'attributo alt, indica al browser il testo alternativo, da mostrare se, per qualsiasi motivo, non si riesce a caricare l'immagine.

<img src= “miaimmagine.gif” alt=”immagine personale”>

Se la descrizione dell'immagine è molto lunga, possiamo utilizzare l'attributo longdesc, al posto di alt.

Per far sì che, passando col mouse sull'immagine compaia un testo di spiegazione, possiamo usare l'attributo title:

<img src= “miaimmagine.jpg” title= “questa è l'immagine”>

Possiamo aggiungere dei bordi all'immagini o toglierli, impostando il valore border a 0 (è il caso, ad esempio, di un'immagine che si trasforma in link, che in automatico diventa bordata di blu:

<img src= “miaimmagine.gif” border=”1”>

Per aggiungere spazio sopra e sotto l'immagine, possiamo usare il tag Vspace, e per aggiungerlo a destra e sinistra Hspace.

<img src = “immagineconbordi.jpg” Vspace= “40” Hspace = “20”>.

Con questi attributi, non è possibile dare spazi diversi a destra e a sinistra dell'immagine.

Possiamo inserire l'immagine all'interno di un contesto e allinearla con l'attributo align:

Align= “default” allinea l'immagine usando gli attributi di default del browser.

Align= “left” allinea l'immagine al margine sinistro.

Align= “right” allinea l'immagine al margine destro.
Align= “top” allinea l'immagine alla parte superiore nella parte sinistra.

Align= “middle” allinea l'immagine al centro con il testo intorno.

Align= “bottom” allinea ll'immagine alla parte inferiore con il testo intorno.

Align= “center” allinea l'immagine al centro

Per avere un'idea di come si dispone il testo intorno all'immagine puoi visitare il sito http://www.pagetutor.com/align/index.html

HTML: Lezione 11 I link (II parte)

Lez 12 I link II parte

I link, di default, sono di colore blu e di quando è visitato diventa di colore viola, però è possibile cambiare questi attributi.

Gli attributi dei link possono essere modificati in tutta la pagina, aggiungendo il valore al tag body:

<body link="#3300FF" vlink="#990066" alink="#CC0000">

Questo codice significa che il link è celeste (link = “”), quelli visitati saranno di colore viola (vlink = “”), e al passaggio del mouse diventeranno rossi (alink= “”). Questo per tutti i link che andremo ad inserire nella nostra pagina. Provare per credere!

Se invece vogliamo cambiare il colore di un solo font, basterà applicare il tag font dopo <a>.

Ad esempio:

<a href= “indirizzo.html><font color= “#FF3300”> Il mio link </font></a>

Infine se scriviamo:

<a target="_blank" href="http://www.ilmiosito.it">visita il mio sito</a>

Target=”_blank”, vuol dire che il nostro link si aprirà in una nuova finestra, lasciando intatta quella su cui ci troviamo.

Se scriviamo:

<a title="Corsi di informatica" href="http://www.lezioninformatica.blogspot.it" target="_blank" >Visita Lezioni di informatica</a>

L'attributo title riporta un testo che spiega di cosa si occupa il link a cui stiamo accedendo. Prima di cliccarci sopra, possiamo portare il mouse sul link e aspettare, dopo qualche secondo comparirà il testo esplicativo.

HTML: Lezione 11 I link (I parte)

Lez 11 I link prima parte

La particolarità delle pagine web è proprio quella di essere collegate tra di loro da link. Ogni elemento di una pagina web può essere un link, basta solo racchiuderlo tra gli appositi tag. Quindi può essere un link una frase, ad esempio, o un'immagine o un menù.

Il tag da utilizzare sarà:

<a href=”risorsarsacuipuntare.html”> Questo è un link </a>

Il risultato sarà una scritta su cui cliccare e che porterà alla pagina risorsacuipuntare.html (sempre che una pagina html con questo nome sia stata opportunamente creata).

Se la pagina a cui puntare è del tipo: pagina.zip, pagina.exe, verrà chiesto all'utente di scaricare il file in questione, se invece punta ad un'immagine verrà visualizzata sul proprio browser.

Se invece l'indirizzo è <a href="mailto:indirizzoemil@nomesito.it"> Manda una e-mail</a>, si aprirà il client di posta predefinito (come Outlook o Windows mail) del vostro pc con l'indirizzo email già scritto nella barra del destinatario.

I link possono avere un percorso relativo o un percorso assoluto, riportare a pagine interne al nostro sito o ad esterne.

Se vogliamo che il link punti ad un sito esterno dovremmo scrivere il percorso completo del sito completo di http, ad esempio:

<a href=”http://facebook.com> Link a facebook </a>, rimanda al sito di facebook

Il link:

<a href=”http://lezioninformatica.blogspot.com/2011/04/html-lezione-4-creare-le-tabelle-i.html”> creare tabelle html </a> , rimanda esattamente alla pagina in cui si parla delle tabelle.

Possiamo, quindi usare dei percorsi assoluti (quelli utilizzati qui sopra) anche per indicare le pagine del nostro stesso sito web.

In realtà, per navigare all'interno della propria pagina web è preferibile utilizzare dei percorsi relativi.

Se la pagina collegata al link si trova nella stessa cartella in cui scriveremo il link basterà scrivere: <a href=”nomepagina.html”> link nella stessa cartella </a>

Se invece la pagina si trova in una sottodirectory dovremmo scrivere il percorso dal punto in cui ci troviamo, ad esempio : <a href=”cartella/sottocartella/file.html> Link in cui siamo scesi di due sottocartelle </a>

Se invece dobbiamo salire di una cartella rispetto a dove ci troviamo : <a href=”../file.html>, di due cartelle : <a href=”../../file.html> e così via.

Allo stesso modo possiamo salire e scendere di una cartella : <a href=”../scendo/file.html”>

Una cosa da ricordare è che le maiuscole e le minuscole fanno la differenza, quando si scrive il nome del file non bisogna lasciare spazi vuoti ma scrivere ad esempio file_con_più_parole.html.

Infine, possiamo creare delle ancore all'interno della pagina stessa. Le ancore sono dei link che rimandano ad un contenuto della stessa pagina. Prendete ad esempio la pagina di un manuale che, nella parte superiore ha l'elenco dei titoli dei vari paragrafi e, cliccandoci sopra, ti porta direttamente a quel paragrafo.

Il link viene scritto:

<a href="#ancora1">Primo paragrafo</a>

La destinazione del link sarà racchiusa dal tag:

<a name="ancora1">In questo paragrafo parleremo di ….</a>

Alla prossima.....

giovedì 26 maggio 2011

HTML: lezione 10 Gli elenchi

Lez. 10 Gli elenchi

Gli elenchi possono essere ordinati (quindi numerati) o no (contrassegnati da punti).

Per creare elenchi ordinati dobbiamo utilizzare il tag <ol>. Ogni elemento della lista sarà contrassegnato dal tag <li>

Quindi avremo:

<ol>

<li> Primo elemento

<li> Secondo elemento

</ol>

Nota bene: i tag li non vengono chiusi.

Di defaul utilizzando il tag <ol> viene utilizzata la notazione numerica, se vogliamo cambiarla dovremmo aggiungere l'attributo type, così : <old type =”I”>

Quindi avremo:

type=”1” per i numeri arabi
type=”a” per le lettere minuscole
type = “A” per le lettere maiuscole
type = “i” per i numeri romani in minuscolo
type = “I” per i numeri romani in maiuscolo

Aggiungendo <ol start = “6”> , ad esempio imponi che il primo numero della lista sia un cinque. Se il type un numero romano comincerà dal simbolo V

Gli elenchi non ordinati sono contrassegnati dal tag <ul>

Quindi:

<ul>

<li>Primo elemento

<li> Secondo elemento

</ul>

Anche qui si può inserire il type:

type= “disc” per un cerchio pieno
type= “circle” per un cerchio vuoto
type= “square” per un quadrato pieno

Apriamo un editor di testo e scriviamo:

<html>

<head>

<title> Gli elenchi </title>

</head>

<body>

<h1> Questo è il mio elenco</h1>

<li>Primo elemento

<li> <p>elemento interno</p>

</ul>

<li> Secondo elemento

</ul>

<li> <font color = "red">Terzo elemento

<li> Quarto elemento</font>

</ul>

</body>

</html>

Il risultato sarà:

Questo è il mio elenco

Primo elemento
- elemento interno
Secondo elemento

Terzo elemento
Quarto elemento

Alla prossima.....

sabato 21 maggio 2011

HTML: Lezione 9 Il testo (III Parte)

Il testo III parte

Il tag <font> è quello che ci permette di modificare il tipo di carattere, la grandezza, il colore ecc...

Bisogna ricordare che esso è un tag deprecato dal W3C, ma noi stiamo imparando l'HTML ed è giusto sapere che questo tag esiste.

Di default il nostro browser visualizza sempre il font Times new Roman, quindi dobbiamo dirgli che tipo di font vogliamo che venga visualizzato per quella frase. Anche qui valgono le regole già dette nella lez. 7, ovvero che se vogliamo utilizzare un font particolare è meglio crearlo come immagine, altrimenti se la macchina client non ha quel font installato la vedrà diversamente da come volevamo.

Gli attributi da assegnare a font sono quindi:

Face = nome del font

<font face = Arial> testo in Arial</font>

color = colore testo

<font color = “#ff63cde”> testo in violetto </font>

<font color =”violet”>testo in violetto </font>

Anche qui possiamo usare il nome o l'esadecimale del colore.

Size =grandezza del font

La grandezza del font può essere espressa con un numero da 1 a 7:

<font size=7”> testo più grande</font>

oppure con un numero relativo rispetto alla grandezza del font di base, ed in questo caso aggiungiamo un più o un meno:

<font size= “+3”> testo più grande di 3 rispetto al testo base </font>

Il testo base di default è 3, se non gli abbiamo assegnato un altro valore

Detto questo apriamo la tabella creata nella quarta lezione e divertiamoci a formattare il testo (le modifiche al fiale originale sono evidenziate in grassetto)

<html>

<head>

<title> Il testo formattato</title>

</head>

<body basefont="4">

<tr><td colspan="2"><h1>Prima riga larga quanto due celle</h1></td><tr>

<tr>

<td rowspan= "2"><font size="-2"> prima cella seconda riga alta due righe</font></td>

<td> <font color ="red">seconda cella seconda riga la metà</font></td>

<tr>

<td><font size ="5"> terza cella seconda riga la metà</font></td>

</tr>

</table>

</body>

</html>

Il risultato sarà qualcosa di questo tipo :

Prima riga larga quanto due celle
prima cella seconda riga alta due righe	seconda cella seconda riga la metà
	terza cella seconda riga la metà

Alla prosssima....

martedì 17 maggio 2011

Algoritmi interativi: I primi n numeri di Fibonacci

package algoritmi_iterativi;

/**
* Generare i primi n numeri della successione di FIbonacci
* @author linformatico
* @version 1.0- Maggio 2010
*
*/
public class Fibonacci {
private int nuovo;
private int ultimo;
private int penultimo;
private int numeriDaAddizionare;

public Fibonacci (int n){
numeriDaAddizionare = n;
penultimo= 0;
ultimo = 1;
}

public int getPenultimo (){
return penultimo;
}

public int getUltimo (){
return ultimo;
}

public void successivo (){
int i=2;
while ( i <= numeriDaAddizionare) {
nuovo = ultimo + penultimo;
System.out.println ("Il numero successivo è : " + nuovo);
penultimo = ultimo;
ultimo = nuovo;
i++;
}
}

public static void main(String[] args) {
final int SEQUENZA = 10;
Fibonacci serie = new Fibonacci (SEQUENZA);
System.out.println("Il primo numero della serie di Fibonacci è : " + serie.getPenultimo());
System.out.println ("Il secondo numero della serie di FIbonacci è : " + serie.getUltimo());
serie.successivo();

}

}

sabato 14 maggio 2011

Filezilla e Aruba: ip not allowed

Se state cercando di connettervi al vostro sito Aruba tramite ftp Filezilla e non vi riuscite perché vi viene mostrato l'errore Ip not address allowed, non preoccupatevi. Si tratta di un'impostazione di Aruba che filtra gli indirizzi ip che accedono al sito web.

Basterà andare sulla pagina di Aruba e accedere col proprio nome utente e password.

Nella schermata iniziale vi verrà mostrato il link : FiIltro accessi ip.

Entrateci e in alto a destra vedrete il vostro indirizzo ip. Copiatelo e aggiungetelo agli indirizzi.

Una volta cliccato su Aggiungi e scritto correttamente il captcha (le lettere visibili nell'immagine in basso) cliccate su Salva e provate a riconnettervi con Aruba.

Adesso dovreste riuscire ad entrare nel vostro sito.

Attenzione: se usate un indirizzo ip dinamico, questo cambierà ad ogni riavvio del pc e dovrete ripete la procedura ogni volta, quindi il mio consiglio è di utilizzare un indirizzo statico.

Adesso sto cercando di capire come togliere definitivamente il filtro Accessi da Aruba, appena lo scopro ve lo faccio sapere.

Spero di esservi stata utile.

HTML: Lezione 8 Il testo (II Parte)

Il testo e i contenitori

Il testo può essere racchiuso in appositi “contenitori” che lo rendono più ordinato e leggibile.

Titolo:

Il nostro testo può essere racchiuso tra i tag che lo identificano come titolo. I tag titolo sono 6 e si distinguono a seconda della grandezza che danno al testo. Si va dal più piccolo <h6> al più grande <h1>. Il tag titolo dà al testo il grassetto e lascia una riga vuota tra sé e il resto del testo all’interno della pagina.

Il tag titolo riveste un’importanza fondamentale per i motori di ricerca che utilizzano questa informazione per estrapolare le informazioni sul contenuto di una pagina.

Paragrafo:

Con il tag

<p> Questo è un paragrafo </p>

Con questo tag si racchiude un paragrafo di testo. Esso lascia una riga vuota dopo il tag di chiusura e una prima del tag di apertura.

Blocco di testo:

Il tag <div> manda la frase a capo ma a differenza di <p> non lascia righe vuote.

In alternativa per andare a capo dopo la fine della riga è possibile usare il tag <br />. Con due <br /> uno dopo l’altro abbiamo lo stesso effetto dopo il tag </p> ovvero lascia una riga vuota.

Infine abbiamo l’elemento <span> che racchiude un blocco di testo che non va a capo ma può essere utile per associare una parte di testo ad uno stile con i CSS. LO span è un elemento inline (vedi http://basic.html.it/guide/lezione/15/classificazione-di-elementi-e-tag-xhtml/)

All’interno dei tag contenitore è possibile inserire il tag align, ad esempio <p align =”justify”> o <div align =”center”> anche se l’uso di questi tag è deprecato ed è sostituibile con i fogli di stile.

Facciamo un esempio:

Apriamo il nostro editor di testo e scriviamo

<htm>

<head>

<title> I contenitori HTML</title>

</head>

<body>

<h1 align="center"> I CONTENITORI IN HTML</h1>

<p align="left"> Questo è il primo paragrafo del mio testo</p>

<div align="right">Questo è il mio primo blocco di testo formattato a destra</div>

<div><b>Questo è il mio secondo blocco di testo in grassetto</b>

</div>

<p>

<i><font color ="#990066" face="Arial">Secondo paragrafo in Arial e viola</font><br/>

Sono andato a capo all'interno del secondo paragrafo e dopo di me lascio due righe vuote <br/><br/><br/>

Dopo riprendo a scrivere</i>

</p>

</body>

</html>

Il risultato sarà una cosa del tipo:

I CONTENITORI IN HTML

Questo è il primo paragrafo del mio testo

Questo è il mio primo blocco di testo formattato a destra

Questo è il mio secondo blocco di testo in grassetto

Secondo paragrafo in Arial e viola

Sono andato a capo all'interno del secondo paragrafo e dopo di me lascio due righe vuote

Dopo riprendo a scrivere

Alla prossima....

martedì 3 maggio 2011

HTML: Lezione 7 Il testo (I parte)

Il testo

Quando scriviamo testo in un sito web è bene ricordare che esso verrà visualizzato sul pc dell’utente a seconda che egli abbia o meno gli stessi font installati sul proprio computer. Quindi se usiamo un font particolare, molto probabilmente il nostro utente non potrà visualizzarlo e lo trasformerà in uno dei font installati sul proprio pc. Quindi è inutile ricorrere a scritte troppo elaborate, se proprio lo vogliamo fare (per un logo o per il titolo della pagina) possiamo elaborare la scritta come immagine ed inserirla in questo maniera.

Vediamo i tag:

aggiungendo in <body test=""> possiamo dare un colore a tutto il testo, se non viene impostato allora sarà nero, per default.

Con il tag <basefont ="">, inserito all’interno dell’head, possiamo dare degli attributi generali al testo della pagina.

<basefont face="arial,verdana,courier" size="5" color ="#FFFFFF"> .

Vediamo cosa significa questa scritta:

Size = grandezza testo tra 1 e 7;

color = colore del testo;

face = tipo di carattere

(Questi attributi non hanno effetto sul testo contenuto in una tabella, anche se come tag è deprecato)

Fondamentali per la nostra pagina web sono i link, ovvero i collegamenti tra una pagina e l'altra. Se vogliamo far diventare la nostra frase un link dobbiamo aggiungere il tag <a href>

<a href="indirizzolink"> Clicca qui per visitare questa pagina</a>

Il nostro testo può essere formattato come solitamente facciamo con programmi come Open Office o Microsoft Word. Vediamo alcuni tag:

<b> testo in grassetto </b>
<i> testo i ncorsivo </i>
<u> testo sottolineato </u>
<strike> testo sbarrato </strike>
<sup> apice </sup>
<sub> pedice </sub>

Adesso apriamo il file salvato durante la creazione della prima tabella e diamogli un po’ di formattazione e salviamo il file come tabella formattata.html (le modifiche sono evidenziate in grassetto):

<html>

<head>

<title> La mia tabella</title>

<basefont size="7">

</head>

<body bgcolor="#000000" text="white">

Questa è la mia tabella

<tr><td colspan="2" align= "center">Prima riga larga quanto due celle</td><tr>

<tr>

<td rowspan= "2"><b> prima cella</b> seconda riga alta due righe</td>

<td> <b>seconda cella</b> seconda riga la <i>metà</i></td>

<tr>

<td><b> terza cella</b> seconda riga la <i>metà</i></td>

</tr>

</table>

</body>

</html>

Il risultato sarà una pagina con sfondo nero e scritte in bianco.

Alla prossima....

lunedì 2 maggio 2011

HTML: Lez 6 Lo sfondo

Lo sfondo

Come abbiamo già visto per le tabelle, è possibile applicare un colore di sfondo o un'immagine alla nostra pagina.

Gli attributi disponibili sono gli stessi visti per le tabelle, solo che verranno inseriti all'interno del tag body:

<body bgcolor=””> = seguito dal nome inglese del colore o il numero esadecimale corrispondente al colore. Ad es. se vogliamo il colore rosso possiamo scrivere <body bgcolor="red"> oppure <body bgcolor="#FF0000">

Il modo in cui i colori verranno visualizzati dal visitatore della nostra pagina web dipende dalla risoluzione dello suo schermo che va da 256 a 65.536 colori.

Per essere sicuri che il visitatore del nostro sito web veda i colori così come vorremmo è possibile attenersi alla tavola di colori web safe, per essere perlomeno certi che i colori siano visibili allo stesso modo anche dai monitor più vecchi (anche se oggigiorno sono sempre meno le persone che hanno un monitor a 256 colori). La lista dei colori web safe si può trovare alla pagina www.coloriwebsafe.it.

<body background="immagine.jpg"> = diamo alla pagina un'immagine di sfondo.

<body bgproperties="fixed"> = lo sfondo rimarrà fisso anche se l'utente scorre la pagina

<body leftmargin="0"> = se non vogliamo che vi sia del margine tra la pagina e il bordo

sinistro della finestra del browser

<body rightmargin="0"> = se non vogliamo che vi sia del margine tra la pagina e il bordo

sinistro della finestra del browser

E' bene ricordare che questi tag sono deprecati dal W3C e che è consigliato l'uso di questi attributi in un foglio di stile, piuttosto.

Alla prossima....