Corso di html per le 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 file senza niente in esercizio.htm
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=”https://www.pivari.com”>questo è il mio sito</a>

<html>
<p>
<a href=”https://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=”https://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=”https://www.pivari.com”><img
src=”https://www.pivari.com/wp-content/uploads/2014/01/pivari-logo.gif” /></a>

Questo il nostro esercizio.htm FINALE

<html>
<p>
<a href=”https://www.pivari.com”><img
src=”https://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=”https://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