Lezioni di informatica: aprile 2011

giovedì 28 aprile 2011

HTML: Lezione 5 Creare le tabelle (II Parte)

All’interno del tag <table>, le nostre tabelle, è possibile creare colonne e righe a seconda delle nostre esigenze.

Il tag per creare le righe è <tr>

Il tag per creare le colonne è <td>

Le righe e le celle di una tabella possono contenere i vari attributi visti nella scorsa lezione, quindi è possibile assegnargli una larghezza o un’altezza (height, width) , l’allineamento (align, valign), il colore di sfondo (bgcolor), lo spazio tra le celle (cellspacing) ecc…

Quando diamo un attributo all’interno del tag table diamo questa caratteristica a tutta la tabella. Quando lo diamo solo ad una riga o ad una cella vale solo per questa.

Alcuni attributi utilizzati solo dal tag <td> sono:

Nowrap : non manda a capo il testo
Rowspan : unisce le righe, quindi la riga ad es col numero 2 è alta il doppio delle altre righe
Colspan : unisce le celle, la cella ad es col numero 2 è larga il doppio delle altre celle

Facciamo un esempio:

Apriamo il nostro editor di testo e scriviamo

<html>

<head>

<title> La mia prima tabella</title>

<meta name ="robots" content ="index, follow">

<meta name= "keywords" content ="tabella, creare tabelle in html, html, corso html">

<meta name ="description" content ="la mia prima tabella html">

<meta name = "author" content ="IlmioNome">

</head>

<body>

<table align ="center" border="1" bgcolor="red" cellspacing="0">

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

<tr>

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

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

<tr>

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

</tr>

</table>

</body>

</html>

Avremo ottenuto una tabella del genere:

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à

Adesso divertiti ad applicare attributi alla vostra tabella.

Alla prossima....

HTML: Lezione 4 Creare le tabelle (I Parte)

Creare le Tabelle:

La cosa più importante da capire, quando vuole realizzare un sito in html, è la creazione delle tabelle. Le tabelle (quelle che comunemente usiamo con programmi di scrittura come Microsoft Word o Open Office), ci aiutano a disporre gli elementi di una pagina web, e sono le tabelle, le righe e le celle a rendere tutto così ordinato.

Una tabella viene creata con il tag:

<table></table>

All’interno di questo comando possiamo inserire i vari attributi:

· Width : larghezza della tabella. Questa misura si può esprimere in px (pixel) o in % percentuale rispetto alla pagina o alla tabella superiore.

· Height : altezza della tabella. Questa misura si può esprimere in px (pixel) o in % percentuale rispetto alla pagina o alla tabella superiore.

· Align: allineamento della tabella rispetto alla pagina. Le possibilità sono : right, left o center.

· Border : impostiamo il bordo della tabella. Qui possiamo inserire un numero che ci indica lo spessore del bordo. Con 0 il bordo è invisibile.

· Bordercolor: il colore del bordo, seguito da un numero esadecimale #rrggbb che indica il colore desiderato “white”

· Bordercolordark : il volore dell’ombra del bordo indicato con #rrggbb oppure dal nome del colore es “red”

· Bordercolorlight: indica il colore più chiaro per creare cornici 3D, indicato con #rrggbb oppure dal nome del colore es “red”

· Bgcolor : colore dello sfondo, seguito da un numero esadecimale #rrggbb che indica il colore desiderato “white”

· Background = immagine inserita nella tabella. Il tag è seguito dall’indirizzo dell’immagine da inserire es “images/logo.gif”

· Cellpadding : spazio tra il bordo della cella e il contenuto al suo interno, indicato con un numero

· Cellspacing : distanza tra le celle,normalmente viene creato di 1 px quindi se non si vogliono spazi è bene scriverlo esplicitamente con il numero 0.

· Nowrap : non manda il testo a capo anche se il contenuto supera la finestra del browser.

· Valign: indica l’allineamento verticale del contenuto della cella. Questo può essere: top, middle, bottom

· Frame : indica quali lati della tabella saranno visualizzati

o Void : nessun bordo sarà visualizzato

o above: solo il lato superiore

o below: solo il lato inferiore

o hsides: solo nei lati superiore e inferiore

o vsides: solo a sinistra e a destra

o lhs: solo nel lato sinistro (left-hand side)

· Rules : personalizza la visualizzazione dei bordi fra le righe

none: non visualizza il bordo da nessuna parte. È il valore di default
groups: i bordi separano i gruppi
rows: i bordi separano le righe
cols:i bordi separano le colonne
all: i bordi separano tanto le righe quanto le colonne

Alla prossima….

HTML: Lezione 3 I metatag

All’interno dei tag head abbiamo visto che può essere inserito il tag:

<title> = il titolo che la pagina del browser visualizza sulla barra in alto.

Oltre al title è possibile inserire il tag riferiti ai metatag, ovvero quel codice che dice agli spider dei motori di ricerca cosa deve indicizzare all’interno del proprio sito web, e cosa no.

Questi tag, spesso ignorati, sono molto importanti per una corretta localizzazione del proprio sito nelle pagine dei più importanti motori di ricerca.

Vediamo alcuni esempi:

<meta name="robots" content="index,follow">

Questo tag indica ai motori di ricerca che è vogliamo che la nostra pagina sia indicizzata.

Altri attributi sono noindex (chiede agli spider dei motori di ricerca di ignorare la pagina), follow (indica al motore di ricerca di seguire anche i link della pagina per aggiungere anch’essi al database), nofollow (indicizza solo la pagina corrente e non i link ad essa associati).

Un altro tag importante è

<meta name="keywords" content="parola,parola,parola,parola">

All’interno di content verranno elencate alcune parole chiave della propria pagina web che aiuteranno i motori di ricerca a capire di cosa tratta il nostro sito.

Un altro ancora :

<meta name="description" content=" Descrizione della pagina web.">
Descrizione del sito

<META http-equiv="REFRESH" content="10; url=http://lezioninformatica.blogspot.com/2011/04/html-lezione-3-i-metatag.html">

Refresh indica al browser che la pagina si ricaricherà da sola dopo un tot di secondi. Nel caso impostato da me dopo 10 secondi. Di solito questo accorgimento viene usato quando il sito ha cambiato indirizzo e vogliamo reindirizzare l’utente alla nuova pagina (avete presente: tra 10 secondi verrai automaticamente reindirizzato alla pagina del sito se non vuoi attendere oltre clicca qui?)

<META name="AUTHOR" content="Linformatico">

Il nome di chi ha creato la pagina (nel caso fossimo abbastanza vanitosi)

Alla prossima...

mercoledì 27 aprile 2011

Come impostare FileZilla con Aruba

Come impostare FileZilla per un sito ospitato su Aruba

Scaricare FileZilla dal sito http://filezilla-project.org/

Una volta installato e aperto il programma andare su File-Gestione siti.

Cliccare su nuovo sito.

Riempire i campi nome (il nome del sito)

In host mettere l’indirizzo del sito www.ilmiosito.it.........................

In porta scrivere 21

In tipo di accesso mettere Normale

In utente il nome utente che ti viene data da aruba 000000@aruba.it

In password la password che ti viene data da Aruba

Fare Ok e ti verrà creata la nuova connessione a cui dovrai collegarti per aggiornare il tuo sito web

HTML: Lezione 2

Una pagina Html ha bisogno di tre tag fondamentali:

<html> = indica che stiamo creando una pagina html , è il primo tag da scrivere e l’ultimo da chiudere

<head> = testo non visibile sulla pagina html ma che ci serve per importare codice diverso (ad esempi javascript e css), per dare un titolo alla pagina o inserire metatag, ovvero delle parole che serviranno ai motori di ricerca per trovare il nostro sito

<body> = letteralmente è il corpo della nostra pagina, tutto ciò che viene inserito qui sarà

visualizzato sul browser

Quindi avremo una struttura di questo tipo:

<html>

<head>

</head>

<body>

</body>

</html>

Possiamo cominciare a creare la nostra prima pagina html.

Apriamo un editor di testo (blocco note va bene) e scriviamo questo codice:

<html>

<head>

<title>Prima pagina</title>

</head>

<body>

La mia prima pagina html

</body>

</html>

Per avere una migliore leggibilità del proprio codice è bene imparare ad usare il tasto tab del proprio pc, in modo da avere bene chiaro in quale tag ci troviamo al momento.

Un altro aspetto importante per la leggibilità è la scrittura dei commenti:

Salvate il file con il nome primo esercizio.html e provate ad aprirlo.

Ecco creata la nostra prima pagina html.

Alla prossima...

HTML: Lezione 1

HTML è l'acronimo di Hypertext Markup Language.

Una cosa da non confondere è questo linguaggio con altri linguaggi di programmazione (Java, C++, Pascal , PHP, Asp). HTML non è un linguaggio di programmazione ma un linguaggio di contrassegno, ovvero, un linguaggio supportato dai browser per poter disporre e visualizzare

degli elementi all’interno di una pagina.

Infatti, con l’Html non è possibile creare cicli, scelte e niente di ciò che possiamo fare con un linguaggio di programmazione, ma possiamo solo dare degli attributi al testo, inserire immagini e collegamenti ecc..

Tutti i “comandi” HTML verranno impostati con degli appositi marcatori che chiameremo “tag”.

Molti tag dovranno essere aperti e poi chiusi, altri non avranno bisogno della chiusura.

Si può scrivere HTML con qualsiasi editor di testo (ad esempio il blocco note di Windows) , l’importante è che si abbia l’accortezza di salvare il file con l’estensione html invece che txt.

È possibile anche usare degli HTML editor , i cosiddetti WYSIWYG ("What You See Is What You Get"), che rappresentano visivamente Il codice html.

Quando si utilizzano questi programmi è importante, comunque, controllare come il nostro codice verrà visualizzato dai vari browser, che spesso è totalmente diverso da quello visualizzato nell’HTML editor.

I tag saranno inseriti in questa maniera <tag> e la chiusura del tag sarà scritta con uno slash (la barretta /), così : </tag>

Esempio:

<font size =”12px”> Esempio</font>

Questo esempio imposta la grandezza della scritta a 12 pixel.

Quindi il codice sarà scritto:

<tag attributo = “ “> testo</tag>

L’attributo , da notare, verrà scritto tra virgolette.

Alcuni tag, come vedremo, potranno contenere più di un attributo.

Alla prossima….

martedì 26 aprile 2011

Corso base: taglia e incolla

Taglia e incolla

Ci son tre modi per tagliare e incollare un file o una cartella. Il taglia, a differenza del copia, è distruttivo, il file verrà cancellato dalla posizione originale.

1. Usare il tasto destro del mouse
Posizionandoci sul file da tagliare, cliccare col tasto destro del mouse e, quindi su taglia.

Spostandoci dove vogliamo copiare il file cliccare ancora col tasto destro e su incolla.

2. Usare la tastiera
Il copia equivale a la combinazione dei tasti CTRL+X

L’incolla, invece è CTRL+V

3. Dal menù degli strumenti

Questa terza operazione si può fare solo all’interno di una cartella.

Posizioniamoci sul file da copiare, e poi su modifica, nella barra degli strumenti e su taglia

Spostandoci dove vogliamo copiare il file da modifica scegliere incolla.

I tre metodi possono essere utilizzati in combinazione e non necessariamente nell’ordine dato.

sabato 23 aprile 2011

Algoritmi base: il minimo tra tre valori

import javax.swing.JOptionPane;

/**
* Trova il minimo tra tre numeri
* @author iltuonome
* @version 13 settembre 2010
*
*/
public class Minimo_3_valori {

private int primo;
private int secondo;
private int terzo;
private int minimo;

/**
* Inserisce tre variabili
* @param n primo numero
* @param n2 secondo numero
* @param n3 terzo numero
*/
public Minimo_3_valori (int n, int n2, int n3){
primo = n;
secondo = n2;
terzo = n3;

}

public int getMinimo(){

if (primo < secondo){
if (primo < terzo) minimo = primo;
else minimo = terzo;
} else {
if (secondo < terzo ) minimo = secondo;
else minimo = terzo;
}
return minimo;
}

public static void main(String[] args) {
String input = JOptionPane.showInputDialog ("Inserire un numero :");
String input2 = JOptionPane.showInputDialog ("Inserire un numero : ");
String input3 = JOptionPane.showInputDialog ("Inserire un numero : ");
int n = Integer.parseInt(input);
int n2 =Integer.parseInt (input2);
int n3 = Integer.parseInt (input3);
Minimo_3_valori nuovo = new Minimo_3_valori (n, n2 ,n3);
int min = nuovo.getMinimo();
System.out.print("Il minimo dei tre valori è : " + min );
System.exit(0);
}

}

Algoritmi base: scambio tra due valori

import javax.swing.JOptionPane;
/**
* Scambiare i valori di due variabili
* @author iltuonome
*@ version 13/09/2010
*/
public class Scambio {

private int a;
private int b;
private int t;

/**
* Assegna due valori e pone la variabile temporanea a 0
* @param unvalore
*/
public Scambio (int unvalore, int unvalore2){
a = unvalore;
b = unvalore2;
t = 0;

}

/**
* Scambia i valori delle due variabili
*/
public void change (){
t = a;
a = b;
b = t;

}
public int getA(){
return a;
}

public int getB (){
return b;
}

/**
* Collauda la classe
* @param args
*/
public static void main(String[] args) {

String input = JOptionPane.showInputDialog("Inserisci un numero intero :");
String input2 =JOptionPane.showInputDialog("Inserisci un numero intero : ");
int a = Integer.parseInt(input);
int b = Integer.parseInt(input2);
Scambio nuovo = new Scambio (a, b);
System.out.println ("Il valore di a è : " + nuovo.getA());
System.out.println ("Il valore di b è : " + nuovo.getB());
nuovo.change();
System.out.println ("Il valore di a dopo lo scambio è : " + nuovo.getA());
System.out.println ("Il valore di b dopo lo scambio è : " + nuovo.getB());
System.exit(0);

}

}

Corso base: copia e incolla

Copia e incolla

Ci son tre modi per copiare e incollare un file o una cartella

1. Usare il tasto destro del mouse
Posizionandoci sul file da copiare, cliccare col tasto destro del mouse e, quindi su copia.

Spostandoci dove vogliamo copiare il file cliccare ancora col tasto destro e su incolla.

2. Usare la tastiera
Il copia equivale a la combinazione dei tasti CTRL+C

L’incolla, invece è CTRL+V

3. Dal menù degli strumenti

Questa terza operazione si può fare solo all’interno di una cartella.

Posizioniamoci sul file da copiare, e poi su modifica, nella barra degli strumenti e su copia

Spostandoci dove vogliamo copiare il file da modifica scegliere incolla.

I tre metodi possono essere utilizzati in combinazione e non necessariamente nell’ordine dato.

Java: Lezione 2

Cominciamo a creare il nostro primo programma.

Esso sarà Hello world, il primo e il più semplice programma realizzabile in un linguaggio di programmazione (se avete già imparato altri linguaggi vi sarà sicuramente capitato di crearne uno).

Apriamo il nostro ambiente di sviluppo Eclipse.

La prima schermata vi chiederà di decidere in quale cartella vogliamo salvare i nostri lavori (di default Eclipse usa la cartella workspace). Prendiamo nota del percorso perché sarà qui che ritroveremo il nostro programma (e ci sarà molto utile quando utilizzeremo il prompt dei comandi per avviare il programma).

A questo punto ci ritroveremo una schermata di questo tipo:

A sinistra troveremo le nostre cartelle e i nostri file, al centro invece avremo l’editor di testo (per maggiori informazioni su come personalizzare la schermata vedi le lezioni su Eclipse che caricherò prestissimo).

Da file- new, scegliamo new java project

In Project name scriviamo prima lezione, il resto lo lasciamo così com’è e clicchiamo su next, ed infine su finish.

A sinistra nella finestra Package Explorer troveremo la nostra cartella prima lezione. Clicchiamoci col tasto destro e scegliamo new- class. In name scriviamo HelloWorld (attenzione: java è case sensitive, distingue tra le maiuscole e le minuscole). Spuntiamo anche la voce public static void main.

Infine clicchiamo su finish

Avremo questo codice:

public class HelloWorld {

/**

* @param args

public static void main(String[] args) {

// TODO Auto-generated method stub

}

Noi ci aggiungeremo:

System.out.println ("Hello, World");

Subito sotto il codice :

public static void main(String[] args)

Adesso ci basterà cliccare su Run (nella barra dei menù o sul tastino verde). Eclipse ci chiederà di lanciare il programma HelloWorld. Clicchiamo su ok e sulla console in basso ci comparirà la scritta Hello, World.

Il nostro primo programma è terminato.

Spieghiamo un po’ ciò che abbiamo scritto.

Il comando System.out.println richiama l’oggetto out della classe System. Adesso non vi sarà molto chiaro ma vi basta sapere che System.out.println serve a stampare a video e vi stamperà ciò che si trovaa tra le parentesi.

Notate che Hello World è scritto tra virgolette, e questo è il modo per scrivere una stringa.

Infine troviamo il punto e virgola, attenzione a non dimenticarlo al termine di ogni istruzione.

public static void main(String[] args) è il metodo che ci permette di testare i nostri programmi, cosa significa esattamente lo capiremo più in là

Qui di seguito riporto il codice completo

public class HelloWorld {

/**

* @param args

public static void main(String[] args) {

// Stampa la scritta Hello World

System.out.println ("Hello, World");

}

La scritta dopo // è un commento. Commentate i vostri programmi, altrimenti non saprete più a cosa si riferisce il vostro codice.

Per esercizio: sotituite ta le parentesi tonde questi valori (“7+8”), (7+8), (7+”8”).

Cosa visualizzano?

Alla prossima….