Qualche altro elemento di HTML

Per gli studenti del cMOOC -Laboratorio di Tecnologie Internet per la Scuola- #ltis13

[Andreas Formiconi] Vediamo qualcosa sull'HTML,

su alcuni tag, alcune situazioni semplici ma che possono capitare tipicamente.

Andiamo - faccio l'esempio in Blogger per vedere un effetto particolare

che nell'editore di WordPress non ho - non si vede.

Nuovo post.

Prove con HTML.

Vediamo: scrivo una riga

ne scrivo un'altra

e decido che questa la voglio evidenziare mettendola in grassetto - "bold" in inglese.

Vado avanti. No, mi viene in mente che prima voglio mettere una descrizione

ma non in grassetto.

Come mai? Sono andato sopra.

Eh no, ma eredito il grassetto. Non era quello che intendevo.

Questi sono degli inconvenienti abbastanza tipici degli editori di testo.

Poi a seconda dei casi, una persona più o meno smaliziata, beh, ne viene a capo,

in questo caso facilmente:

basta qui ritornare nella condizione iniziale

per cui tutto ciò che scriverò sopra viene così.

Ma non sempre: a volte può capitare di ingrullire con queste cose.

Quindi che cosa succeda effettivamente dentro all'editore, uno non lo sa.

Ma in questo caso dove in realtà sappiamo che tutto parte da una sorgente,

codificata in un modo che tutti conoscono, cioè lo standard HTML,

c'è la possibilità di vedere esattamente che cosa succede.

E io riesco a vedere chiaramente quali sono gli elementi

che si sono portati dietro una certa caratteristica o meno.

Se io lavoro in HTML, questo problema non ce l'ho

perché sono io che determino la presenza o meno dei tag:

quindi se io scrivo qui così la mia riga,

questa viene già pulita e non c'è questo problema.

Vediamo ora un esempio un po' più interessante.

Proviamo a inserire in modo visuale un elenco,

che è una cosa che può capitare, diciamo, abbastanza spesso.

Son carini questi sistemi.

Inserisco la prima riga,

inserisco una seconda riga,

poi una terza riga.

No, non voglio più una quarta riga.

Come mi sbarazzo di questo?

Ma, qui, per esempio, ribattendo, ritorno un'altra volta,

lui torna, assume che sia una dichiarazione di cessato interesse per l'elenco.

Supponiamo ora che io però voglia inserire un sottoelenco,

al posto per esempio della seconda riga,

cioè la seconda riga dovrebbe diventare a sua volta un elenco.

Come si fa?

Poi intanto cancello questo, e poi vorrei ripartire con l'elenco.

Mi può venire in mente che questo si realizzi ripigiando un'altra volta su "elenco numerato".

No, non è così che funziona, evidentemente.

Cioè questo tasto dell'elenco funziona come un "toggle",

come un interruttore aperto/chiuso, sì/no,

cioè un modo elenco sì, un no.

Anzi, facendo così mi ha addirittura spezzato l'elenco in due elenchi separati:

peggio mi sento.

"Undo" - "undo".

Torniamo al punto di prima.

Concludo che non si possono fare gli elenchi - i sottoelenchi, scusate - in un post in Blogger.

Ma posso però tentare di lavorare con HTML.

Bene, vediamo: così intanto imparo com'è fatto un elenco in HTML.

C'è un tag di apertura che viene richiuso in fondo all'elenco e evidentemente lo delimita:

"ol" sta per "ordered list", cioè una lista ordinata di elementi, numerata.

Poi ogni riga, ogni elemento dell'elenco, è determinato da un tag "li"

- racchiuso da un tag "li" e "/li".

Beh, è molto semplice fare gli elenchi, quindi.

Quindi io potrei, qui, tranquillamente scrivere un'altra cosa...

e poi andare a vedere: benissimo.

Naturalmente questa è una schifezza, ora non ci serve, si elimina.

Bene, allora, per motivi didattici di chiarezza, isoliamo

- non è necessario fare questo, io lo fo perché sia più chiara la descrizione che vi sto facendo.

Guardate, se io torno nell'editore non è cambiato niente:

l'editore ignora quegli spazi.

A noi servono - ah, li ha tolti, io ce li rimetto perché mi servono.

Li toglie e quindi...

E poi mi riordino anche diversamente qui,

me lo dispongo, questo, così.

Non fa niente, ecco.

Vediamo un po' come lui la vive questa cosa.

Benissimo.

Ah, ci ha anche lasciato qualche cosa.

Io mi ostino e ci rimetto questi spazi, che voglio sia chiaro.

Stiamo lavorando sulla seconda riga che era chiusa da questi due tag.

Qui che faccio?

Eh ma io qui dentro ci annido un altro elenco:

"ol", che andrò a chiudere - "/ol" - e poi ci metto i miei elementi "li" "/li".

Siccome sono pigro me lo copio e - Control V, V - me lo copio più volte

- tre volte, anche qui - e dentro ci metto il testo che voglio.

Cioè potrei mettere "prima riga sottoelenco".

E sono pigro: Control C, Control V, Control V, e qui, "seconda" e "terza".

Vediamo il risultato:

ecco quà: Prima riga e l'elenco successivo è diventato un sottoelenco a sua volta.

E così si possono fare - aggiungere tante altre caratteristiche.

Infine vediamo una terza cosa,

una terza cosa che apparentemente nell'editore visuale non si può introdurre,

ovvero una tabella.

Come si fa quando non si sa qualcosa, nella fattispecie di HTML,

o comunque di codice di qualsiasi tipo che possa servire nel Web?

Un'ottima fonte è la W3 School.

W3 School, che fa capo al consorzio W3

che si occupa sostanzialmente degli standard del Web:

standard aperti, standard che quindi stanno in armonia con la libertà di espressione.

Non vi fate intimorire da tutte le cose che uno potrebbe approfondire

ma non è assolutamente il nostro caso.

"Learn HTML".

Bene, intanto si vede com'è costruito un documento HTML minimale,

con delle dichiarazioni iniziali e una chiusura.

Qui c'è un titolo, un paragrafo.

Ma noi andiamo diritto - questo lo potete esplorare per conto vostro -

"Tables", "Tabelle": andiamo qui.

Ah, proprio qualcosa del genere mi sarebbe piaciuto introdurre.

Esempio: "Try it Yourself" - bene, proviamo.

Due finestre ci offre:

una intitolata "Source Code"; lì, il codice sorgente.

L'altra, il risultato.

Quindi ciò che io vedo a destra, qui, il risultato, è determinato da come ho scritto il codice a sinistra.

È così che si aggeggia con il codice, si cerca di riconoscere qualche cosa,

anche i programmatori, i softwaristi, i coders più esperti fanno così.

Vediamo nel nostro testo:

"Each table starts with a "table" tag" -

ogni tabella inizia con un tag "table".

Allora qui ci sono dichiarazioni iniziali.

Ecco:"Each table starts with a "table" tag".

Bene, allora queste scritte -

"Each table row starts with a "tr" tag".

Ogni riga - "row", riga - della tabella inizia con un tag "tr".

Ogni dato della tabella inizia con un tag "td", e sono qui.

Queste sono racchiuse - queste tre scritte sono racchiuse da un tag "p" chiuso con "/p":

il paragrafo, l'unità, diciamo, fondamentale di un testo.

Scendiamo: questa ha l'aria di essere un titolo.

Infatti, "one column", troviamo H4.

Ci prudono le mani: che è questo 4?

Vediamo: cambiamolo in 1.

Non succede niente - eh, ma c'è questo tasto.

Cambio il codice, invio il codice, per vedere il risultato. Ecco.

Allora H1, H2, H3, H4 sono titoli di livello diverso.

Benissimo. Questo è esagerato, vediamo se riesco a tornare alla situazione iniziale,

H4. Invio. Perfetto.

Questo è un numero incorniciato, ma guardando le tabelle sottostanti,

capisco che è la tabella minimale.

Andiamo a vedere com'è codificata, sotto al titolo "One column"

- "One column" - bene, vedo subito il tag "table".

C'è addirittura un attributo.

Poi vedo che c'è il tag "tr", chiuso,

che mi determina evidentemente l'unica riga che c'è in questa tabella.

E all'interno di questa riga, c'è il tag "td", poi richiuso,

che mi determina l'unico elemento di questa riga,

quindi viene una tabella banale fatta da una sola riga con un solo elemento,

però è codificata come una tabella,

e poi si chiude la tabella.

Ci incuriosisce questo "border".

Cambiamolo: sarà il bordo, facciamolo esagerato.

È molto utile fare esempi esagerati perché servono a capire con certezza quello che succede.

Lo invio.

Ah, è venuto in effetti un bordo esagerato, per forza: l'ho moltiplicato per 100.

Ora, magari posso sceglierne uno che mi piaccia:

per esempio 3 forse mi va bene.

Mi sembra un bordo più - mi piace, vabbene.

Allora andiamo a vedere l'ultima, dopo "Two rows and three columns",

una tabella di due righe e tre colonne.

Eccola qua.

Inizia "table border="3"".

Ma voglio farla subito così che ci ho preso gusto

Ci dovrei riconoscere due righe.

In effetti apre con tag "tr" la prima riga - "row" -

la chiude, apre la seconda, la chiude.

Torno e nella prima riga ci trovo tre elementi, 100, 200 e 300. Vero.

Nella seconda, 400, 500 e 600: vero.

Allora cominciamo a fare ciò che interessa a me:

Pippo, Topolino. Vediamo: perfetto.

Chi mi ferma più?

Ora vorrei tornare a scrivere la tabella nel mio post, ma visto che ho sotto il naso un testo

che si elabora bene con un editore di testo,

perché non copiare pari-pari questo testo,

andare nel mio blog, metterlo - porlo in modo testo,

copiarci dentro il tutto, vedere subito cosa viene.

E ora qui diventa un gioco da ragazzi,

cioè diventa un gioco.

Posso fare qualsiasi cosa:

copio per esempio una riga e poi la posso riprodurre; vediamo:

Ecco qua. Il limite, a questo punto, è solo la fantasia e la voglia di esplorare.