Dovete imparare il PHP, dopo aver imparato i fondamenti di HTML

L’HTML è un linguaggio client di visualizzazione. Ovvero le istruzioni presenti interpretate dal browser sul vostro client (computer, smartphone, tablet, …) vi permetteranno di visualizzare la pagina graficamente in un modo piacevole.
Permette di visualizzare immagini, link, testo (font), utilizzare tabelle, …
Difficilmente viene percepito come un linguaggio e difficilmente si programma in html. Si utilizzano tool che nascondono la programmazione html, si parla di videoscrittura, così come con Word.

Ma se avete bisogno di un linguaggio server di programmazione inserito nell’html?
Ovvero immaginate di aver bisogno di chiedere informazioni a chi legge le vostre pagine html e con quelle informazioni fare delle operazioni.
Ad es. Google (motore di ricerca) come funziona?
E’ una pagina html con una semplice finestrella< ed un bottone. Introducendo le chiavi e schiacciando il bottone dite ad un server (o più server) cerca nel tuo archivio e trova i risultati più attinenti alle mie chiavi e fammi vedere il tutto.

Il linguaggio più naturale per questo tipo di programmazione è il PHP.

L’html prevede le form (la possibilità di fare le finistrelle) ma i dati inseriti verranno poi gestiti da un linguaggio di programmazione server e qui entra in gioco il php.

Ad es.

<form action=”action.php” method=”POST”>
<p>Il tuo Nome: <input type=”text” name=”nome” value=”” /></p>
<p>La tua età: <input type=”text” name=”eta” value =”” /></p>
<p><input type=”submit”></p>

significa: crea due finestrelle dove l’utente può introdurre del testo. Nella prima l’utente potrà inserire il suo nome e verrà scritto nella variabile nome, nella seconda l’utente potrà scrivere la sua età e verrà scritta nella variabile eta quando l’utente avrà pigiato il bottone invia (submit tradotto in italiano) ed il tutto sarà passato al programma php contenuto nel file action.php

Il tuo Nome:

La tua età:

Questo action.php

<html>
<p>Ciao <strong><?php echo htmlspecialchars($_POST[‘nome’]); ?></strong>.</p>
<p>La tua età è di <strong><?php echo (int)$_POST[‘eta’]; ?></strong> anni.</p>
<p>Se li hai già compiuti quest’anno allora sei nato nel <strong><?php echo 2016-(int)$_POST[‘eta’]; ?></strong> altrimenti nel <strong><?php echo 2016-(int)$_POST[‘eta’]-1; ?></strong>.</p>
</html>

Ovvero nell’html i comandi php sono del tipo <?php …..?>
echo
è come print un comando per “stampare” il contenuto di una variabile.
Il server (web) esegue i contenuti delle righe php, stampa i risultati delle variabili ed invia il file html al nostro browser che lo visualizzerà.

Nello stesso modo potrebbe compiere qualsiasi attività sul server o su altri server come estrarre dati da un database, eseguire applicazioni, …

Queste sono le basi per capire come funziona internet e la rete di computer interconnessi che si nascondono dietro.

Corso di introduzione all’html che feci nel 2014 per le mie figlie

C’erano già germi di Codescuola.it prima della sua creazione. Questo un corso di introduzione all’html che feci nel 2014 ad uso e consumo delle mie figlie.

Le mie figlie (10 e 12 le più grandi) sanno utilizzare poco il computer (hanno imparato l’utilizzo a scuola), lo usano quasi solo per ricerche scolastiche, non posseggono smartphone o tablet.
Non sono interessato ad insegnare loro come si utilizza un computer, lo impareranno. Mi piacerebbe che capissero cosa si nasconde dietro un computer e quindi dietro un qualsiasi oggetto delle vita quotidiana. Mi piacerebbe capissero l’importanza delle comunicazioni tra computer, internet.

Per iniziare a comprendere cosa si nasconde dietro bisogna imparare i rudimenti di un linguaggio di programmazione. Meglio se il linguaggio è nato con internet e con i browser in modo tale da riuscire a visualizzare quello che si sta facendo. Ho deciso perciò di iniziare con HTML il linguaggio fondamentale di internet, un linguaggio di visualizzazione.

Il file: un file HTML è un file di testo con estensioni .htm o .html
Usando un programma per editare testo (ad esempio notepad, blocco note in italiano, su Windows) salviamo un file senza niente in esercizio.htm [per un editor più attuale vi ricordo l’articolo relativo a Atom].
Vedrete che il sistema operativo lo riconosce (tramite l’estensione) come un file html sapendo così che se lo mandate in esecuzione (doppio click in Windows) dovrà aprire il browser e far vedere all’interno i comandi da voi introdotti.

I tag: come tutti i linguaggi anche l’html ha delle regole, i tag.
introducendo all’inizio <html>
e alla fine </html>
con <html> dichiariamo qui inizia l’html
Con </html> qui finisce l’html
I tag <…> sono sempre di inzio, i tag </…> di fine

Ed ora?
Scrivete quello che volete!
Ecco il contenuto del mio file esercizio.htm 😉

<html>
Scrivete quello che volete!
</html>

In Windows doppio click su esercizio.htm e magia, si apre il browser ed in una pagine nuova possiamo leggere Scrivete quello che volete!

Ora andate a capo e scrivete Questa è la seconda riga e provate a visualizzare
la modifica. NON VA A CAPO!
Esatto: c’è un tag speciale per andare a capo: <br />

<html>
Scrivete quello che volete!<br />
Questa è la seconda riga
</html>

In teoria potreste già scrivere in vostro primo romanzo html, diciamo che per essere dei veri raffinati bisognerebbe utilizzare anche i tag di inizio e fine paragrafo <p>…</p>, i tag di grasseto <strong>…</strong>, i tag di corsivo <em>…</em>
Ad esempio

<html>
<p>
Scrivete quello che volete!<br />
Questa è la seconda riga<br />
Questo è evidenziato in <strong>grassetto</strong><br />
Questo è evidenziato in <em>italico</em><br />
</p>
</html>

Se farete degli errori nello scrivere i tag il browser non riuscirà ad interpretarli correttamente e cercherà di farvi vedere quello che ha capito.
Ad es.

<html>
<p>
Questo è un errore molto comune <strong>grassetto<strong> perché ho chiuso il grassetto con il tag di apertura
</p>
</html>

Dovreste già capire perché esistono programmi che vi aiutano a scrivere pagine html ma ora conoscete la base di quello che si nasconde dietro.
Ora gli ultimi due tag complessi che hanno segnato la rivoluzione internet.

Il LINK: <a href=”il link”>il testo che cliccato porterà al link indicato</a>
Ad esempio: <a href=”http://www.pivari.com”>questo è il mio sito</a>

<html>
<p>
<a href=”http://www.pivari.com”>questo è il mio sito</a>
</p>
</html>

Il link sembra sempre una magia ma è proprio un comando semplice: clicca sul testo indicato ed andrai a vedere un’altra pagina html (nello stesso o in un altro sito)

Caricare le immagini: <img src=”l’immagine da caricare” />
Ad esempio
<img
src=”http://www.pivari.com/wp-content/uploads/2014/01/pivari-logo.gif” />
caricherà il logo di Pivari.com

Combinando link ed immagine possimo fare in modo che cliccando l’immagine si vada a vedere una pagina
<a href=”http://www.pivari.com”><img
src=”http://www.pivari.com/wp-content/uploads/2014/01/pivari-logo.gif” /></a>

Questo il nostro esercizio.htm FINALE

<html>
<p>
<a href=”http://www.pivari.com”><img
src=”http://www.pivari.com/wp-content/uploads/2014/01/pivari-logo.gif” /></a><br />
Scrivete quello che volete!<br />
Questa è la seconda riga<br />
Questo è evidenziato in <strong>grassetto</strong><br />
Questo è evidenziato in <em>italico</em><br />
<a href=”http://www.pivari.com”>questo è il mio sito</a><br />
Questo è un errore <strong>grassetto<strong> perché ho chiuso il grassetto con
il tag di apertura
</p>
</html>

Dovreste vedere


Scrivete quello che volete!
Questa è la seconda riga
Questo è evidenziato in grassetto
Questo è evidenziato in italico
questo è il mio sito
Questo è un errore grassetto perché ho chiuso il grassetto con
il tag di apertura