Guida rapida a Visual Studio Code

In questo breve tutorial vi mostrerò il mio setup di Visual Studio Code e come poterlo utilizzare al meglio per migliorare il vostro workflow.

 

…appunti…

Highlighting del testo

VS Code evidenzia con colori diversi la presenza dei tag, così come più o meno ci apparivano nella developer tools del browser.

Abbreviazioni

All’interno di VS Code è presente

Navigare tra i contenuti della pagina

In questa ultima lezione vediamo come navigare tra i contenuti della pagina attraverso gli anchor tags, ovvero quegli elementi che ci permettono di creare ipertesti in una pagina web.

Fino ad ora abbiamo fatto uso degli anchor tags per spostarci da una pagina all’altra, ma cosa devo fare se intendo puntare ad una determina sezione della stessa pagina? Ipotizzate di avere un articolo particolarmente lungo e che la vostra intenzione sia quella di creare un indice ipertestuale che vi permetta di raggiungere comodamente l’inizio di ciascun paragrafo.

Per navigare tra i contenuti della pagina possiamo ricorrere all’attributo id, che è possibile applicare ad un qualsiasi tag. Grazie a questo attributo possiamo specificare il nome dell’elemento verso cui il link deve puntare. Potete quindi dichiarare la destinazione del link, specificando nell’href l’id dell’elemento.

Vediamo passo-passo come creare questo sistema in modo da comprendere meglio il funzionamento dei link interni e capire come navigare tra i contenuti della pagina.

1. Creo l’indice ipertestuale

<a href="#html-per-principianti">HTML Per principianti</a>
<a href="#guida-rapida-vscode">Guida rapida a VScode</a>
<a href="#design-di-app-figma">Design di app con Figma</a>

Osservate con attenzione i valori specificati per gli attributi href. Quello che dovrebbe risaltare subito ai vostri occhi è la presenza del carattere che precede l’ID dell’elemento a cui punta il link. Attraverso questo carattere comunichiamo al browser di non cercare risorse nella directory del sito, ma di ricercare all’interno di quella pagina un elemento che abbia quell’id.

Quindi, <a href="#html-per-principianti">HTML Per principianti</a> non è altro che un link che cercherà all’interno della pagina web un elemento che abbia specificato nell’attributo id il valore html-per-principianti.

2. Creo i contenuti

<h1 id="html-per-principianti">HTML PER PRINCIPIANTI</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis lacus. Etiam sit amet tristique est, at accumsan tortor. Nullam eget erat laoreet, accumsan libero et, maximus turpis. Morbi non nisl id arcu pellentesque dapibus vitae id metus. Donec suscipit rutrum rhoncus. Aliquam nisi tortor, porttitor quis nisl id, vulputate varius dui.</p>
<hr />

<h1 id="guida-rapida-vscode">Guida rapida a VScode</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis lacus. Etiam sit amet tristique est, at accumsan tortor. Nullam eget erat laoreet, accumsan libero et, maximus turpis. Morbi non nisl id arcu pellentesque dapibus vitae id metus. Donec suscipit rutrum rhoncus. Aliquam nisi tortor, porttitor quis nisl id, vulputate varius dui.</p>
<hr />

<h1 id="design-di-app-figma">Design di app con Figma</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis lacus. Etiam sit amet tristique est, at accumsan tortor. Nullam eget erat laoreet, accumsan libero et, maximus turpis. Morbi non nisl id arcu pellentesque dapibus vitae id metus. Donec suscipit rutrum rhoncus. Aliquam nisi tortor, porttitor quis nisl id, vulputate varius dui.</p>
<hr />

Come potete notare, ho deciso di applicare ad ogni titolo di ciascun paragrafo un attributo id. In questo modo ho impostato sui titoli i punti di destinazione dei relativi link presenti nell’indice. Ciò significa che al click sul link: Guida rapida a VScode, l’utente verrà correttamente indirizzato all’inizio del paragrafo e più precisamente in corrispondenza del titolo.

Sito Web Old School [Parte 6]

Avete creato i vostri articoli blog come suggerito nella scorsa lezione? Benissimo, adesso siete pronti per rendere il tutto molto più user friendly! Inserite sotto l’immagine thumbnail del vostro articolo un indice interattivo che permetta di raggiungere determinate sezioni della pagina. Permettere agli utenti di navigare tra i contenuti della pagina vi consentirà di avere una maggior tempo di permanenza sul sito, perché i visitatori avranno modo di raggiungere più facilmente ciò che cercano.

Ricordate che molto pagine web non sono fatte per essere lette, ma consultate. Avete pochissimo tempo per comunicare le informazioni che l’utente cerca. Se non saprà come trovarle entro pochi secondi, sceglierà di tornare su google e ricercherà quelle informazioni sul sito di un vostro competitor.

Congratulazioni! Avete completato la guida introduttiva al linguaggio HTML. Adesso siete più che pronti per entrare nel vivo dello sviluppo e conoscere gli elementi più complessi.

Nelle prossime settimane troverete online la seconda parte di questa guida intitolata HTML5 Per esperti, dove toccherete con mano tutti gli elementi legati all’ultima versione dell’HTML. Il mio consiglio nel frattempo è di approfittate di questo periodo per mettervi alla prova con i concetti che abbiamo affrontato nel corso di queste lezioni provando a creare diversi siti Web Old School e sperimentando diverse modi e approcci nella navigazione fra le pagine web o l’inserimento di risorse esterne.

Potete inoltre affinare le vostre competenze ricercando sulla rete anche altro materiale! Vi saluto postandovi qui sotto una serie di link che trattano in modo diverso gli argomenti che abbiamo affrontato nel corso di questa guida.

Vi invito inoltre ad iscrivervi alla newsletter qui sotto per ricevere la notifica via mail che vi comunicherà esclusivamente la pubblicazione della guida HTML5 Per esperti.

Ciao e alla prossima! 😀

Collegare le pagine

Quando apriamo una pagina web, una delle caratteristiche principali consiste nella possibilità di collegare pagine diverse fra loro. Il tag <a> che vedremo in questa lezione è l’ultimo elemento fondamentale che tratteremo in questa guida ed è il tag che rende possibile la navigazione fra i contenuti.

Quando parliamo di collegamenti ipertestuali di una pagina web, facciamo riferimento a quelle frasi o parole che spesso sono visualizzate con un colore diverso e che ci consentono di navigare in internet passando da un argomento all’altro.

[immagine wikipedia]

Ricordate quando abbiamo definito l’HTML? Abbiamo parlato di Hypertext Markup Language, ovvero il linguaggio che ci permette di strutturare un sito web.

Fino ad ora ci siamo concentrati molto sulla parte relativa al markup, senza approfondire quella legata all’hypertext.  Tuttavia mi preme molto dirvi che aver posticipato questo argomento non lo rende affatto secondario, anzi. Quando vi ho accennato la storia delle pagine web, avete potuto comprendere quanto fosse importante l’idea di poter collegare tanti contenuti fra loro, in modo che gli utenti potessero passare da una parte all’altra del web con estrema semplicità. Effettivamente, non potrete mai creare un sito web senza saper collegare le pagine fra loro, rendendo di conseguenza il contenuto interattivo.

Hypertext o ipertesto

L’hypertext o ipertesto non è altro che una collezione di documenti di testo che possono essere collegati attraverso l’uso di hyperlinks (collegamenti ipertestuali). È possibile creare questi collegamenti attraverso il tag <a> (anchor tag). Sul tag<a>è necessario applicare l’attributo href (hypertext reference) che ci permette di specificare l’indirizzo della risorsa verso cui navigare. Il principio di navigazione e reperimento delle risorse è identico a quanto abbiamo visto nella scorsa lezione con l’inserimento delle immagini.

Collegare una pagina attraverso un URL assoluto

Possiamo specificare nell’href di una anchor link dei percorsi assoluti per collegare le pagine provenienti da diversi siti web. Quando abbiamo definito i percorsi assoluti nell’inserimento delle immagini, facevamo riferimento a  quella sequenza di caratteri che indica l’indirizzo esatto della risorsa (http://placekitten.com/200/300). Questo tipo di percorso può essere definito con un nome ben preciso: URL (Uniform Resource Locator).

L’URL permette di reperire documenti e risorse presenti sul web attraverso un indirizzo strutturato in almeno tre parti.

[immagine che mostra le tre parti]

  • il protocollo, ovvero il metodo di accesso alla risorsa. Il protocollo nativo del web è l’http (https per le comunicazioni sicure), ma ne esistono anche altri che ci permettono ad esempio di trasferire i file (protocollo ftp) o di inoltrare le mail (protocollo mailto);
  • Il nome di dominio DNS, che ci permette di raggiungere l’indirizzo IP dell’host che ha in memoria la risorsa;
  • Il percorso verso la risorsa, che ci permette di attraversare il sito web passando fra le varie directory che lo compongono.

Prendiamo come esempio questo percorso e analizziamolo:

<a href="https://creativecode.it/html-per-principianti/presentazione-del-corso.html">
  Vai alla guida
</a>

Il contenuto dell’elemento <a>: “Vai alla guida”,  ci condurrà verso un file di nome: “presentazione-del-corso.html”. Questo file è una pagina web posizionata all’interno di una cartella chiamata html-per-principianti. Per trovare questa directory, dobbiamo metterci in contatto con l’host che ha in memoria il sito web, attraverso il nome di dominio creativecode.it. Il tutto avviene attraverso un protocollo standard di sicurezza (https) che assicura l’integrità dei dati scambiati, ecc.

Collegare una pagina attraverso un URL relativo

Naturalmente esiste la possibilità di collegare le pagine anche specificando un URL relativo. Tenete sempre conto che l’href di un link punta a un file iniziando il percorso dalla directory relativa alla pagina in cui ci troviamo.

Ammettendo quindi di avere una struttura del sito web simile a questa:

  • index.html
  • about.html

Per spostarmi dalla Hompage alla pagina “Chi sono” mi basterà scrivere in index:

<a href="about.html">Chi sono</a>

Allo stesso modo, dalla pagina Chi sono posso tornare alla homepage scrivendo:

<a href="index.html">Home</a>

A questo punto dovreste essere in grado già da soli di dare una spiegazione a questo comportamento. Ripetiamo: essendo index.html e about.html due pagine che si trovano nella stessa cartella, per puntare verso l’una o verso l’altra non abbiamo bisogno di specificare alcun passaggio di directory, perciò ci basterà indicare il nome del file.

Come esercizio provate anche voi a collegare le pagine HTML in questo modo, simulando un contenuto random con titoli e paragrafi.

Collegare le pagine ad un menu di navigazione

Ma come ci comportiamo se le pagine sono organizzate in cartelle diverse?

Analizziamo un caso reale ipotizzando di voler creare un menu di navigazione, tenendo conto di questa struttura:

  • index.html
  • pages [cartella]
    • about.html
    • contatti.html

Ammettiamo di trovarci in Homepage (index.html) e di voler creare un menu con le seguenti voci: Home, Chi sono, Contatti.

Posso scrivere il mio codice in questo modo:

<!-- Da index.html -->
<ul>
    <li><a href="./index.html">Home</a></li>
    <li><a href="pages/about.html">Chi sono</a></li>
    <li><a href="pages/contatti.html">Contatti</a></li>
</ul>

Quella che vedete in alto è la costruzione di un menu attraverso una lista html, che ha come elementi 3 anchor tags che ci permettono di navigare fra le varie pagine.

Osserviamo con particolare attenzione il link che fa riferimento all’homepage, ovvero alla pagina index, quella in cui ci troviamo.

Non notate qualcosa di strano? Effettivamente è la prima volta che ricorriamo al ./ nella definizione di un percorso. Essendo molto simili, fate attenzione a non confondere il ./ con il ../ che abbiamo già usato in precedenza per navigare a ritroso fra le directory.

Quando scriviamo un URL preceduto dai caratteri: ./ stiamo esprimendo un path relativo che obbliga il browser ad iniziare il percorso dalla cartella in cui ci troviamo.  In teoria avremmo potuto ottenere lo stesso risultato scrivendo <a href="index.html">Home</a>, tuttavia, per esperienza, vi consiglio di adottare la sintassi con ./ perché con l’approfondimento di siti più complessi, sarà piuttosto facile perdere la bussola se non si è abbastanza specifici.

Collegare gli assets

Quando scriviamo un tag <a> non dobbiamo necessariamente specificare un’altra pagina web, possiamo anche indicare un URL che punta a un’immagine, un video o un audio. In tal caso, il browser aprirà la risorsa in una nuova finestra.

Possiamo provare a verificarlo implementando la struttura vista nel paragrafo precedente in questo modo:

  • index.html
  • pages [cartella]
    • about.html
    • contatti.html
  • images [cartella]
    • html-per-principianti-cover.jpg

Immaginiamo quindi di inserire in homepage, sotto il menù di navigazione, un link che ci porta all’immagine html-per-principianti-cover.jpg.

<a href="./images/html-per-principianti.jpg">Copertina della guida HTML per principianti</a>

Provate a fare la stessa cosa anche voi iniziando a prendere confidenza con la sintassi ./ .

Altri elementi come link

Possiamo scegliere di rendere interattivi tutti gli elementi che abbiamo visto fino ad ora. Un classico esempio è quello di rendere cliccabile un’area con un’immagine e un titolo. Proviamo per esempio a creare un jumbotron old school. Il jumbotron è un web component molto comune che viene spesso utilizzato per messaggi promozionali o di marketing (trovate qui sotto un esempio).

[immagine jumbotron]

Possiamo creare il nostro jumbotron con il titolo HTML Per principianti preceduto  dall’illustrazione del corso. Aggiungeremo di seguito una breve descrizione e un link che invoglia il comunicatore ad andare alla pagina di presentazione della guida. Proviamo inoltre a rendere cliccabili anche l’immagine e il titolo, in modo che la navigazione possa risultare più immediata. Vediamo come fare…

<a href="https://creativecode.it/">
  <img src="" alt="Illustrazione HTML per principianti">
  <h3>HTML Per principianti</h3>
</a>
<hr />
<p>
  Breve descrizione del corso
</p>
<a href="https://creativecode.it/">Vai alla guida</a>

In questo modo sto utilizzando l’elemento <a> come link contenitore di <img /> e <h3> affinché entrambi possano essere collegati alla pagina di presentazione del corso.

Attributi comuni di un anchor tag

Fra gli attributi più comuni di un anchor tag, oltre l’href, ne esistono altri che ci permettono di definire meglio l’entità e il comportamento che deve assumere il browser con le risorse a cui punta il link.  

Attributo title

L’attributo title viene utilizzato per specificare un testo che descriva il senso e l’utilità del collegamento ipertestuale. Attraverso il title possiamo garantire al sito web una buona accessibilità, permettendo la visualizzazione anche alle persone che soffrono di disturbi alla vista o ai disabili. Il contenuto dell’attributo title compare anche sotto forma di etichetta quando fermiamo il cursore del mouse per qualche secondo sul link.

<a title="Guida HTML rivolta agli inesperti che desiderano imparare le basi dei linguaggi per il web"
href="https://creativecode.it/html-per-principianti">
Vai alla guida HTML Per principianti
</a>

Attributo download

L’attributo download permette di scaricare direttamente nella memoria del dispositivo su cui stiamo navigando la risorsa indicata nell’href. L’attributo download non ha bisogno di esprimere alcun valore, sarà sufficiente quindi applicarlo in questo modo:

<a href="https://crativecode.it/html-per-principianti-cover.jpg" download>Scarica la copertina della guida</a>

Attributo target

L’attributo target ci permette di specificare dove aprire il documento indicato nell’href. Attraverso di esso potremo quindi dire al browser di aprire la risorsa in una nuova finestra o di sostituire la finestra corrente con la nuova pagina. I valori più comuni utilizzati per l’attributo target sono due: _blank e _self.

Il primo apre il documento in una nuova finestra o una nuova tab, a seconda del browser con cui stiamo navigando. Il secondo apre il documento sostituendo la finestra corrente con quella nuova. L’attributo target="_self" è applicato di default a tutti gli anchor tag, quindi a meno che non sia specificato un _blank, ogni volta che colleghiamo una pagina ad un’altra rimarremo sempre sulla stessa finestra.

<a href="https://creativecode.it/html-per-principianti-cover.jpg" target="_blank">Apri la copertina in una nuova finestra</a>

Sito Web Old School [Parte 5]

A questo punto siete ad un passo dal completamento del vostro sito web old school. Potete scegliere di rendere interattiva la vostra singola pagina web creando una sezione blog in index, con i titoli dei vostri articoli più recenti separati da una linea orizzontale. Potete scegliere di mostrare sotto i titoli anche una breve descrizione dell’articolo con la data di pubblicazione attraverso uno o più tag <p> e inserire in alto un’immagine thumbnail. Cercate di inserire quanti più elementi possibile.

Create le nuove pagine articolo sfruttando il boilerplate HTML. Non preoccupatevi se non avete degli articoli o dei contenuti vostri già pronti; essendo un’esercitazione potete copiare da qualsiasi cosa vi passi per la testa (anche da questo sito, tanto per capirci), l’importante è tenere tutto in locale senza pensare di pubblicare dei contenuti copiati da altri siti, perché non sarebbe saggio!

Provate a creare una nuova directory blog nella cartella del vostro sito e posizionate all’interno 3 o 4 pagine articolo (articolo-1-febbraio-2019.html, articolo-2-febbraio-2019.html, ecc.).

Formattatele ricorrendo a tutti gli elementi che abbiamo visto nel corso della guida. In queste fasi dell’apprendimento avete bisogno di ripetere, ripetere e ripetere. Occorre del tempo per assimilare la sintassi e prendere confidenza con tutti gli elementi, perciò impegnatevi ora per risparmiare tempo in futuro!

A proposito di futuro, siamo ormai agli sgoccioli di questa guida introduttiva! Nella prossima lezione completeremo l’aspetto legato agli anchor tags parlando della navigazione dei contenuti all’interno di una singola pagina web.

Inserire le immagini

Capire come inserire le immagini vi aiuterà a comprendere il modo in cui vengono reperite le risorse esterne da importare nel documento HTML. Ricordate che una pagina web è un insieme di contenuti multimediali integrati in un singolo documento.

Una componente estremamente importante nella costruzione di una pagina HTML è la grafica, di cui le immagini sono l’elemento principale. Inserire le immagini in una pagina HTML è piuttosto semplice ma occorre avere ben chiare le idee su come scrivere un percorso in formato stringa. Iniziamo prima di tutto definendo il self-closing tag <img />.

Gli attributi dell’immagine

Per poter realmente mostrare qualcosa, occorre applicare all’elemento img degli attributi. Tali attributi ci  permettono di specificare parametri fondamentali per la visualizzazione o la formattazione. Analizziamo singolarmente gli attributi più importanti in modo da avere un’idea precisa del loro utilizzo.

SRC: l’attributo source o sorgente

L’attributo src indica il percorso o l’URL che punta all’immagine. Per inserire all’interno della vostra pagina un’immagine presa dal web, ci basta copiarne l’indirizzo. Per farlo, clicchiamo con il tasto destro sulla foto e selezioniamo Copia indirizzo immagine.

A questo punto incolliamo l’indirizzo come valore dell’attributo src.

<img src="https://placekitten.com/200/300" />

Nell’esempio stiamo caricando attraverso il tag img il percorso assoluto che punta alla foto di un gattino. 

Quando lavoriamo in locale, ci può capitare di inserire delle immagini non presenti sulla rete. Per inserire le immagini contenute nella memoria del vostro computer avete bisogno di indicare il percorso relativo che punta all’immagine.

Ricercare le risorse navigando fra le cartelle

Inserire immagini contenute nella stessa cartella di index.html

Ammettiamo di avere l’immagine gattini.jpg nella stessa cartella della homepage. Quando specifichiamo un percorso relativo, facciamo riferimento alla posizione del file index.html; perciò se volessimo mostrare l’immagine nel browser ci bastebbe scrivere:

<img src="gattini.jpg" />

Inserire immagini contenute all’interno di una sottocartella

Ma cosa facciamo se l’immagine gattini.jpg è situata all’interno di una sottocartella chiamata images? In questo caso abbiamo bisogno di specificare il percorso manualmente in questo modo:

<img src="images/gattini.jpg" />

Attraverso il comando slash ( / ) possiamo far capire al browser di spostare la ricerca della risorsa nella sottocartella images.

Secondo lo stesso criterio possiamo indicare al browser percorsi sempre più profondi specificando tutte le cartelle separate dallo slash ( / ).

<img src="images/kittens/gattini.jpg" />

Nell’esempio qui sopra vi mostro come raggiungere l’immagine gattini.jpg contenuta all’interno della cartella kittens, che è a sua volta una sottocartella di images. È più facile farlo che dirlo, non c’è dubbio!

Inserire immagini contenute in una cartella precedente

Come raggiungiamo delle immagini che sono contenute in cartelle precedenti alla nostra index? È molto semplice: per navigare a ritroso fra le cartelle ci basta specificare nel valore della source (src) due puntini di sospensione, seguiti dallo slash ( ../ ).

Immaginando di avere una struttura gerarchica del sito simile a questa:

  • Creative Code
    • gattini.jpg
    • html
      • index.html

Possiamo raggiungere l’immagine scrivendo il percorso in questo modo:

<img src="../gattini.jpg" />

Considerato che ogni percorso ha come punto di partenza la posizione della index, con i due puntini di sospensione usciamo dalla cartella html per poter puntare subito dopo alla posizione dell’immagine.

ESERCIZIO: INSERIRE le IMMAGINI INDICANDO IL PERCORSO RELATIVO

Creiamo in questo esercizio una struttura gerarchica di questo tipo:

  • Creative Code
    • html
      • index.html
    • images
      • kittens
        • gattini.jpg

Possiamo scaricare tranquillamente l’immagine dei gattini seguendo questo link. Inserite in index.html l’immagine gattini.jpg specificando il percorso corretto.

ATTENZIONE: l’errore più frequente in questi casi è quello di dimenticare l’estensione del file dopo il nome dell’immagine. Ricordate sempre di inserire le estensioni .jpg, .png o .gif a seconda del formato scaricato. Avete inserito la vostra immagine e non vedete altro che quest’icona orribile? [immagine non trovata]. Sapete già la risposta: avete scritto male il percorso o l’estensione!

alt: il testo alternativo

L’attributo alt serve a specificare un testo alternativo (alternative text). Il contenuto dell’alt può essere mostrato al posto dell’immagine quando quest’ultima non può essere visualizzata. Potete interpretare l’alt come una sorta di descrizione dell’immagine.

L’attributo alt è molto importante anche perché fornisce delle informazioni ai motori di ricerca affinché il crawler, ovvero il software che analizza il contenuto di una pagina web, possa comprendere la reale entità della foto ai fini dell’indicizzazione. Inoltre l’alt ha lo scopo di rendere il contenuto accessibile anche a coloro che soffrono di disabilità e leggono i siti web attraverso appositi screen reader.

<img src="https://placekitten.com/200/300" alt="Immagine di gattini" />

Esempio pratico di inserimento delle immagini

Riprendiamo la tabella che abbiamo realizzato nella lezione precedente e completiamola inserendo le immagini dello staff di Creative Code.

<table border="1">
  <caption>Lo Staff di Creative Code</caption>
  <colgroup>
    <col span="1" width="150px" />
    <col span="2" width="250px" />
  </colgroup>
  <thead>
    <tr>
      <th>Avatar</th>
      <th>Nome</th>
      <th>Ruolo</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><img src="https://creativecode.it/wp-content/uploads/2018/08/wordpress.jpg" alt="Avatar del founder" width="120px" height="auto" /></td>
      <td>Giulio Carlo Tiseo</td>
      <td>Founder di Creative Code</td>
    </tr>
    <tr>
      <td><img src="https://creativecode.it/wp-content/uploads/2018/08/wordpress.jpg" alt="Avatar della Copywriter" width="120px" height="auto" /></td>
      <td>Deborah Macrino</td>
      <td>Copywriter e revisione testi</td>
    </tr>
    <tr>
      <td><img src="https://creativecode.it/wp-content/uploads/2018/08/wordpress.jpg" alt="Avatar del Visual Designer" width="120px" height="auto" /></td>
      <td>Raffaello Sanso</td>
      <td>Visual Designer</td>
    </tr>
  </tbody>
</table>

Nel mio esempio ho riportato tutti percorsi assoluti che puntano direttamente alle immagini dello staff. Potete notare come ho formattato le dimensioni delle immagini attraverso gli attributi width e height. Il valore auto specificato per l’altezza, indica una dimensione dell’immagine proporzionata alla larghezza. Potreste applicare una dimensione precisa anche per height, ma fate attenzione a non provocare distorsioni dell’immagine troppo evidenti. Con il valore automatico impostato sull’altezza, invece, ho ottenuto una cella con un’immagine proporzionata.

Come esercizio potete provare a fare la stessa cosa, specificando delle immaginipartendo da un percorso relativo.

Sito Web Old School [Parte 4]

Direi che a occhio il  vostro sito web ha decisamente bisogno di immagini. In queste fasi così primordiali dello sviluppo non siamo ancora pronti per creare particolari soluzioni grafiche, ma le immagini ci aiuteranno a rendere il tutto più gradevole.

Inserite sopra il vostro nome un’immagine che vi raffiguri. Potete scegliere di inserire anche delle immagini per i loghi delle aziende o delle scuole che avete frequentato. Non dimenticate mai di fare particolare attenzione ai percorsi e alle estensioni delle immagini!

Nella prossima lezione vedremo come aggiungere dei collegamenti nelle pagine in modo da poter navigare nel nostro sito web.

Struttura della tabella

In questa lezione vedremo come creare la struttura della tabella HTML, uno degli strumenti più potenti per la raccolta di dati e informazioni.

In passato le tabelle erano sfruttate dai web masters per il design dei layout. Lo scheletro delle pagine web era rappresentato dalle tabelle, che davano modo di organizzare i contenuti in celle di grandezze diverse. Così facendo, era possibile ottenere delle pagine web ordinate e perfettamente leggibili.

La struttura della tabella può essere più o meno complessa a seconda delle necessità, percui i tag che lavorano in funzione di essa  sono diversi.

ATTENZIONE!

Considerate le tabelle come il vostro primo passo nella progettazione di layout. Anche se rispetto al passato sono cambiati gli strumenti, i siti web continuano ad essere progettati sulla base di una griglia formata da righe e colonne, esattamente come accade per le tabelle.

Non sottovalutate dunque questo argomento perché può esservi di aiuto per comprendere appieno la logica strutturale dei layout e delle pagine web, come vedremo nelle prossime guide.

I tag principali per strutturare una tabella

Vediamo come realizzare in modo efficace — passo dopo passo — la struttura della tabella HTML. Nell’esempio che vi mostrerò, ho deciso di inserire in una tabella alcuni dati dello staff di Creative Code.

1. <TABLE>: Il mega contenitore galattico

Definiamo prima di tutto l’elemento che conterrà le righe e le colonne della nostra tabella:

<table></table>

2. <THEAD>: Il blocco di colonne che prevede l’inserimento delle intestazioni o etichette della tabella

Una tabella è un raccoglitore di dati e informazioni. Nella parte alta della tabella avremo quindi una serie di intestazioni  a cui faranno riferimento i singoli dati. Creiamo dunque uno spazio adibito alle intestazioni con il tag <thead>.

<table>
  <thead></thead>
</table>

3. <TR>:  La riga all’interno della quale potremo disporre i dati

La struttura di una qualsiasi tabella è composta da righe e colonne, dove ciascuna intersezione rappresenta una cella. Dunque, prima di procedere con l’inseriemento delle intestazioni, abbiamo bisogno di creare una riga con il tag <tr> (table row) in modo tale da poter ricavare le celle di intestazione.

<table>
  <thead>
    <tr></tr>
  </thead>
</table>

4. <TH>: La cella di intestazione della tabella

A questo punto non ci resta che creare le celle di intestrazione della nostra tabella con il tag <th>.

<table>
  <thead>
    <tr>
      <th>Foto</th>
      <th>Nome</th>
      <th>Ruolo</th>
    </tr>
  </thead>
</table>

5. <TBODY>: Il blocco di righe che contiene le celle del contenuto principale della tabella

Perfetto! Abbiamo finalmente creato la nostra prima riga per le intestazioni. Adesso dobbiamo definire con il tag <tbody> lo spazio adibito ai dati da inserire subito dopo il <thead>.

<table>
  <thead>
    <tr>
      <th>Foto</th>
      <th>Nome</th>
      <th>Ruolo</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>
APPROFONDIMENTO

Non notate la somiglianza con una struttura piuttosto famigliare?

<html>
  <head>
    <title>Titolo</title>
  </head>
  <body>
    <p>Paragrafo 1</p>
    <p>Paragrafo 2</p>
  </body>
</html>

Questa che vedete sopra è la struttura di una pagina HTML ridotta ai minimi termini. Seppure si stia parlando di un’architettura apparentemente più complessa, le pagine web si rifanno in un certo senso alla struttura della tabella. Occhio, ve lo avevo detto di non sottovalutarle! 😛

6. <TD>: il dato tabellare della tabella

Il corpo della nostra tabella è stato creato, quindi non perdiamo tempo  e inseriamo subito i dati attraverso il tag <td> (table data).

<table>
  <thead>
    <tr>
      <th>Foto</th>
      <th>Nome</th>
      <th>Ruolo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[Avatar]</td>
      <td>Giulio Carlo Tiseo</td>
      <td>Founder di Creative Code</td>
    </tr>
    
    <tr>
      <td>[Avatar]</td>
      <td>Deborah Macrino</td>
      <td>Copywriter e revisione testi</td>
    </tr>
    <tr>
      <td>[Avatar]</td>
      <td>Raffaello Sanso</td>
      <td>Visual designer</td>
    </tr>
  </tbody>
</table>

Come potete notare, per ogni riga della tabella abbiamo specificato tre elementi <td> che corrispondono rispettivamente alle voci foto, nome e ruolo presenti nell’intestazione.

Adesso diamo un’occhiata al risultato della nostra tabella in codepen.

[Anteprima codepen]

Elementi avanzati per la costruzione di tabelle

Il risultato non è niente male, ma possiamo fare di meglio attraverso altri elementi come il <caption>, il <colgroup> e il <col>.

<CAPTION>

Il caption è un elemento molto semplice che ci permette di definire un titolo della tabella prima dell’elemento <thead>.

<COLGROUP>

Il <colgroup> rappresenta un raggruppamento di una o più colonne a cui possiamo attribuire una determinata formattazione.

<COL>

Il <col> è il tag che viene utilizzato per definire delle regole che impostano una formattazione generale delle colonne. I <col>  non possono essere espressi al di fuori dell’elemento <colgroup> racchiudono numero di colonne pari al valore che viene associato all’attributo span:

Esempio:

<col span="2" width="300px" />: specifica una formattazione di 300px di larghezza per due colonne.

Vediamo come possiamo applicare questi nuovi elementi alla struttura della tabella che abbiamo appena creato.

<table border="1">
  <caption>Lo Staff di Creative Code</caption>
  <colgroup>
    <col span="1" width="150px" />
    <col span="2" width="250px" />
  </colgroup>
  <thead>
    <tr>
      <th>[Avatar]</th>
      <th>Nome</th>
      <th>Ruolo</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>[Avatar]</td>
      <td>Giulio Carlo Tiseo</td>
      <td>Founder di Creative Code</td>
    </tr>
    <tr>
      <td>Immagine</td>
      <td>Deborah Macrino</td>
      <td>Copywriter e revisione testi</td>
    </tr>
    <tr>
      <td>[Avatar]</td>
      <td>Raffaello Sanso</td>
      <td>Visual Designer</td>
    </tr>
  </tbody>
</table>

Come potete osservare dal codice in alto, abbiamo definito un titolo della tabella attraverso il tag <caption>, dopodiché è stata impostata una formattazione per le colonne specificando all’interno dell’elemento <colgroup>, due self-closing tag <col />. La formattazione è resa possibile dagli attributi span e width applicati all’elemento column. Osserviamoli da vicino per comprendere esattamente il significato di questi elementi:

  • <col span="1" width="150px" />: applica la larghezza di 150px ad una colonna (la prima);
  • <col span="2" width="250px" />: imposta la larghezza di 250px alle due colonne successive (la seconda e la terza);

È stato inoltre applicato l’attributo border="1" al contenitore <table> per marcare lo spessore del bordo della tabella di 1px, in modo da rendere evidente l’effetto ottenuto con la formattazione delle colonne.

APPROFONDIMENTO: <tfoot>, colspan e rowspan

Gli elementi e gli attributi che possiamo definire nella tabella non sono finiti qui. Esistono strutture tabellari più complesse che richiedono delle formattazioni alternative. Basti pensare alle tabelle che esprimono il calcolo di una serie di oggetti che abbiamo inserito nel carrello di un ecommerce. Normalmente abbiamo una lista di elementi con un prezzo e alla fine della tabella troviamo una riga che ci mostra il totale. Il blocco di righe che contiene le celle da utilizzare in fondo alla tabella viene espresso mediante il tag <tfoot> (column summary). Vediamo in basso un esempio del suo utilizzo.

<table border="1">
  <caption>Perferiche da acquistare</caption>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Prezzo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Leopold Keyboard</td>
      <td>150 Euro</td>
    </tr>
    <tr>
      <td>Logitech Mouse</td>
      <td>22 Euro</td>
    </tr>
    <tr>
      <td>Stampante Canon</td>
      <td>100 Euro</td>
    </tr>
  </tbody>
      
  <tfoot>
    <tr>
      <td><b>Totale</b></td>
      <td><strong>272 Euro<strong></td>
    </tr>
  </tfoot>
</table>

I tag <td> e <th> possono avvalersi di attributi come il colspan e il rowspan per indicare rispettivamente il numero di colonne o il numero di righe attraverso la quale una cella può espandersi. Questa modalità permette la costruzione di tabelle più complesse. In basso osserviamo due esempi molto semplici.

ROWSPAN: Espandere una colonna su più righe.

<table border="1">
  <caption>Perferiche</caption>
  <tr>
    <th rowspan="3">Periferiche</th>
    <td>Leopold Keyboard</td>
  </tr>
  <tr>
    <td>Logitech Mouse</td>
  </tr>
  <tr>
    <td>Canon Printer</td>
  </tr>
</table>

COLSPAN: Espandere una colonna su più colonne.

<table border="1">
  <tr>
    <th colspan="3">Periferiche</th>
  </tr>
  <tr>
    <td>Leopold Keyboard</td>
    <td>Logitech Mouse</td>
    <td>Canon Printer</td>
  </tr>
</table>

ESERCIZIO SULLA STRUTTURA DELLA TABELLA HTML

Provate a creare la struttura di una tabella inserendo all’interno altri dati. Potete creare una tabella che faccia riferimento ai componenti della vostra famiglia, i vostri amici o pensare di elaborare una struttura con una serie di informazioni statistiche o di calcolo su un determinato settore. Fate pratica con i singoli elementi e sbizzarritevi nella costruzione di forme complesse.

Sito Web Old School [Parte 3]

Riprendete il sito web old school e preparatevi a creare le vostre tabelle. Essendo un sito web molto personale, può essere interessante mostrare la vostra esperienza lavorativa e il percorso di studi che avete compiuto o che state compiendo.

Create una o più tabelle che mostrino questi dati e cercate di non porvi limiti nella struttura. Inserite quante più informazioni possibili partendo dal classico carta e penna. Vi suggerisco vivamente questo tipo di approccio: il metodo carta e penna aiuta ad aprire la mente, rilassa i sensi e vi permette di elaborare soluzioni molto più creative. Alla base di un qualsiasi progetto, infatti, il foglio di carta è il layer fondamentale dal quale tutto prenderà vita.

Al termine di questo esercizio continueremo ad utilizzare la tabella dello staff di Creative Code per capire come inserire uno degli elementi fondamentali di un qualsiasi contenuto multimediale: le immagini.

Liste in HTML

In questa lezione vedrete come definire liste in HTML, ovvero lo strumento utilizzato per mostrare elenchi numerati o puntati nelle pagine web. Nello specifico, le liste HTML rappresentano uno strumento eccellente per la creazione delle voci di menù in una navbar o per la definizione di un indice interattivo.

È possibile creare liste in HTML di due tipologie: una lista ordinata con il tag <ol> e una lista non ordinata con il tag <ul>.

<ol></ol>
<ul></ul>

Le singole voci delle liste sono espresse con il tag <li>  (list item) e rappresentano il contenuto degli elementi <ol>  o <ul>.

<ol>
  <li>Elemento ordinato 1</li>
  <li>Elemento ordinato 2</li>
  <li>Elemento ordinato 3</li>
</ol>

<ul>
  <li>Elemento non ordinato 1</li>
  <li>Elemento non ordinato 2</li>
  <li>Elemento non ordinato 3</li>
</ul>

Esistono inoltre delle liste, utilizzate molto più raramente, che permettono di creare elenchi di definizione tramite il tag  <dl>(definition list). Tali elenchi sono caratterizzati da un termine, definito con il tag  <dt>(definition term) e la relativa descrizione con il tag  <dd> (definition description). Il criterio su cui si fonda questo tipo di lista è molto simile a quello delle tabelle, dove possiamo associare una descrizione ad una parola chiave.

<dl>
  <dt>Termine</dt> 
  <dd>Descrizione del termine</dd> 
</dl>

Vediamo di seguito uno snippet di codice che vi mostra degli esempi su come scrivere correttamente queste liste.

<hgroup>
  <h2>Creare liste in HTML</h2>
  <h3>Lista non ordinata</h3>
  <h4>Linguaggi per il web più comuni</h4>
</hgroup>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>Javascript</li>
  <li>PHP</li>
</ul>
<hr />
<hgroup>
  <h3>Lista ordinata</h3>
  <h4>Routine giornaliera</h4>
</hgroup>
<ol>
  <li>Mi Sveglio alle 7:00</li>
  <li>Colazione</li>
  <li>Meditazione</li>
  <li>Esamino il piano di lavorazione del settimana</li>
  <li>Pranzo</li>
  <li>Lavoro in ufficio</li>
  <li>Preparo il materiale per il giorno successivo</li>
  <li>Netflix</li>
</ol>
<hr />
<hgroup>
  <h3>Lista di definizione</h3>
  <h4>Cosa chiedo al bar</h4>
</hgroup>
<dl>
  <dt>Caffe</dt>
  <dd>Macchiato caldo in tazzina</dd>
  <dt>Croissant</dt>
  <dd>Marmellata ai frutti di bosco</dd>
  <dt>Acqua</dt>
  <dd>Minerale naturale</dd>
</dl>

Nello snippet in alto, ho creato tre liste separate da una linea orizzontale:

  1. Una lista non ordinata di linguaggi per il web;
  2. Un elenco ordinato di azioni quotidiane;
  3. La lista di una colazione che elenca una serie di termini con delle descrizioni associate.
Approfondimento

Le liste ordinate accettano degli attributi che permettono di editare l’ordinamento, il punto di inizio della lista e la tipologia del marcatore:

  • <ol reversed>,  permette di mostrare l’elenco in modo discendente;
  • <ol start="n">, dove n indica il numero a partire dal quale iniziare la numerazione;
  • <ol type="string"> dove per string si intende un valore tra 1 (classico elenco numerico), a (elenco alfabetico minuscolo), A (elenco alfabetico maiuscolo), i (elenco con numeri romani minuscoli) e I (elenco con numeri romani maiuscoli).

Sito Web Old School [Parte 2]

Esercizio 1:  Creare liste in HTML delle vostre passioni

Riprendete il vostro sito web old school e aggiornatelo in basso con un elenco che mostra ciò di cui vi occupate in ambito professionale e hobbistico. Cercate di utilizzare tutte e tre le liste in modo da poter prendere dimestichezza con la sintassi. A tal proposito, vi propongo una sfida:

Se volessi specificare un secondo elenco annidato all’interno di un list item, cosa dovrei fare?

Provate ad aggiungere questa funzionalità ai vostri elenchi e ripetete più volte i vari passaggi. Ricordate che saper creare le liste HTML nel modo corretto, vorrà dire essere in grado di strutturare menù complessi.

Nella prossima lezione, analizzeremo un altro elemento strutturale molto comune: le tabelle.

 

Elementi di blocco e di linea

Essere consapevoli già da ora della distinzione fra elemento di blocco e di linea vi aiuterà ad avere una maggiore padronanza dei tag, riuscendo a prevedere i comportamenti in visualizzazione che potrebbero essere, in certi casi, inaspettati.

Anche se in questa guida introduttiva non ci soffermeremo sugli stili e sul posizionamento dei contenuti, conoscere la formattazione predefinita dagli elementi è un argomento che interessa soprattutto chi è alle prime armi.

Elementi di blocco

Quando si è alle prese con i linguaggi informatici, esistono tanti modi per ottenere lo stesso risultato.

Ad esempio, riprendiamo il codice che abbiamo scritto nella sezione precedente e vediamo come poter ottenere lo stesso risultato utilizzando due elementi paragrafo.

Hello World! <br />
Hello Creative Code

Proviamo a scrivere i due saluti sulla stessa linea, inserendoli in due <p> separati.

<p>Hello World!</p> <p>Hello Creative Code</p>

[immagine paragraph]

Come potete notare, pur avendo scritto i due saluti sulla stessa linea, il browser manda a capo il testo senza ricorrere al tag <br />. Inoltre, se provate ad aggiungere spazi o spostare il paragrafo a capo, la posizione degli elementi nella preview non cambia.

Questo comportamento è dovuto al fatto che il tag <p> è un elemento di blocco, ovvero un tipo di contenuto che andrà ad occupare tutta l’area ad esso adiacente, da sinistra a destra. Se il contenuto non dovesse riempire tutta la riga dello schermo, allora il browser genererà automaticamente un margine invisibile che riempirà il disavanzo della pagina. Tale margine può essere ad ogni modo visualizzato attraverso la developer tools (vedi immagine).

[immagine developer tools]

Ciò vorrà dire che qualsiasi altro tag dichiarato dopo un elemento di blocco, verrà visualizzato nel browser al rigo successivo. Ovviamente questo comportamento potrà essere regolato più avanti attraverso le regole CSS, non temete. 😉

Elementi di linea

Proviamo ora ad utilizzare il tag <b> per trasformare le parole “Hello” in grassetto.

<p><b>Hello</b> World!</p>
<p><b>Hello</b> Creative Code</p>

Questo è il classico esempio di elemento di linea! Come potete osservare, il tag <b> non intacca il normale flusso del paragrafo poiché esso è un elemento che va ad allinearsi con il resto del contenuto senza occupare l’intera area.

Formattare un testo

Formattare il testo di una pagina HTML è il modo migliore per prendere dimestichezza con i tag. Non dimenticate che i testi sono i contenuti principali della pagine web; una formattazione corretta garantirà una comoda lettura dei contenuti e quindi un maggior successo della pagina.

Differenza tra formattazione e semantica

In questa lezione andremo a riportare alcuni tag che formattano un testo; definiremo quindi una sorta di regola su come dovrà essere visualizzato. È bene sapere che alcuni dei tag che troveremo, pur essendo di default molto simili, avranno uno scopo semantico diverso. Questi tag permetteranno di specificare lo scopo per cui è stato creato quel dato elemento. Un tag quindi non racchiude sempre e solo una regola di formattazione, ma può rappresentare anche il “significato” dell’elemento che compone

Formattazione di base

Nel corso delle lezioni abbiamo avuto modo di provare qualche tag per la formattazione di un testo: h1, h2, p, ecc… Tuttavia, esistono tanti altri tag che ci consentono di ampliare le possibilità di formattazione del testo. Possiamo pensare di scrivere in HTML:

  • titoli di grandezza diversa che vanno dal più grande  <h1> al più piccolo <h6>. Le dimensioni dei titoli intermedi (h2, h3, h4, h5) saranno progressivamente inferiori;
  • il testo in grassetto, che possiamo ottenere mediante l’utilizzo di due tag: <b> che sta per bold <strong> per strongly emphasized. Pur avendo di default una formattazione visivamente identica, <b> e <strong> nascondono una sottile differenza. Il tag <b> rappresenta una formattazione testuale priva di qualsiasi valore semantico, mentre il tag <strong> è utilizzato per quelle porzioni di testo che desideriamo enfatizzare fortemente. Nel primo caso quindi ci stiamo limitando ad applicare una semplice formattazione del testo, nel secondo invece intendiamo attribuire a quella formattazione un valore semantico;
  • il testo in corsivo, allo stesso modo del grassetto, può essere definito attraverso due tag visivamente simili: <i> e <em>. Il primo sta per italic, mentre il secondo per emphasized;
  • una citazione o una sezione di testo distaccata dal paragrafo, definendo il tag <blockquote>;
  • un testo pre-formattato, cioè uno elemento che riporta tutti gli spazi e ritorni a capo scritti nel codice HTML, attraverso il tag <pre>;
  • un testo monospaziatoche può essere definito con l’utilizzo del <code>. Tag come questo sono utilizzati per rappresentare l’output di un computer. Per intenderci, ogni volta che ho scritto un tag HTML in questo articolo, ho utilizzato il tag <code>;
  • apici o esponenti con il tag <sup> (superscript) oppure pedici con il tag <sub> (subscript).

Vediamo di seguito degli esempi che vi mostrano come scrivere correttamente queste tipologie di liste:

Definizione e aspetto degli elementi

Esercizio per formattare un testo in HTML

Ora che abbiamo elencato i tag principali per formattare un testo in HTML, mettiamoci subito all’opera e cerchiamo di replicare questa formattazione:

[immagine testo]

Vi consiglio di mettervi alla prova subito, senza aspettare la soluzione che vi mostrerò a breve. Prendetevi il tempo che vi serve e cercate il più possibile di realizzare una formattazione quanto più fedele possibile a quella originale. Cercate inoltre di utilizzare i tag anche per avvalorare il senso del testo; quindi fate uso anche dello <strong> e del tag <em> per contrassegnare le parti che meritano di essere enfatizzate. 

Soluzione dell’esercizio per formattare un testo in HTML

Di seguito vi mostro la soluzione dell’esercizio per formattare un testo in HTML. Il brano parla di uno dei movimenti più importanti della storia dell’arte contemporanea: il Dadaismo

<hgroup>
  <h1>Dadaismo</h1>
  <h2>L'essenza dell'anti-arte</h2>
</hgroup> 

<p>Nel suo <em>Manifesto sull'amore debole e amore amaro</em>, pubblicato nel 1920, <b>Tristan Tzara</b> fornisce <strong>istruzioni per scrivere una poesia: </strong></p>

<blockquote> <pre> Prendete un giornale. Prendete delle forbici. Scegliete da questo giornale un articolo avente la lunghezza che desiderate dare alla vostra poesia. Ritagliate l’articolo. Ritagliate poi con cura ciascuna delle parole che formano l’articolo e mettetele in un sacchetto. Agitate dolcemente. Tirate fuori ciascun ritaglio uno dopo l’altro disponendoli nell’ordine in cui sono usciti dal sacchetto. Copiate scrupolosamente. La poesia vi rassomiglierà. Ed eccovi diventato uno scrittore infinitamente originale e di una sensibilità incantevole, benché incompreso dal volgo. </pre></blockquote>

<p> Su di esso si basarono le poesia di <b>Hans Harp</b> e di altri esponenti dadaisti. Ne potevano nascere componimenti volutamente assurdi come <i>Anna Blume</i> di Schiwitters tra i cui versi d'amore si legge: "<em>Blu è il colore dei tuoi capelli gialli, rossa è la coda del tuo verde uccello</em>". </p>

Come potete vedere, l’esercizio prevedeva l’utilizzo di due grandezze di titoli (h1 e h2), comprese in un tag hgroup e una serie di altri elementi.  In questo esercizio potete percepire la differenza tra il semplice testo in grassetto e il testo fortemente enfatizzato. Quando riportiamo il nome del filosofo Tristan Tzara, il nostro scopo è quello di rendere semplicemente più evidente il nome. Quando invece desideriamo attribuire un’enfasi marcata al senso della sua opera, abbiamo utilizzato il tag <strong>.

Con il tag blockquote abbiamo inserito un blocco per la citazione, distaccato dal paragrafo. Il tag pre contenuto in blockquote, ci ha permesso invece di mantenere fede alla formattazione originale copiata/incollata nel codice HTML.

Secondo lo stesso criterio che abbiamo attuato con l’utilizzo di <b> e <strong>, i tag <i> sono stati utilizzati per andare marcare all’interno del paragrafo i titoli delle opere (es. Anna Blume). Per le citazioni contenute nelle opere – che non necessitano di un blocco distaccato dal paragrafo – è stato fatto uso di <em> (es. Blu è il colore dei tuoi capelli gialli, rossa è la coda del tuo verde uccello). 

Sito Web Old School [Parte 1]

Esercizio 1:  Formattare un testo

Prima di andare avanti, vi suggerisco di svolgere un nuovo piccolo esercizio che forse potrà essere per alcuni di voi più interessante. Come vi avevo già anticipato all’inizio del corso, al termine di questa guida introduttiva, sarete in grado di creare il vostro sito web old school. Naturalmente intendo accompagnarvi nel corso di questo processo e perciò vi suggerisco di iniziare già da ora seguendo questi semplici passi, che non devono essere vincolanti, ma solo degli spunti per permettervi di fare anche altro:

  1. Create il titolo della vostra pagina con il vostro nome o nickname;
  2. Create un titolo più piccolo dove specificate il vostro lavoro, la vostra scuola o la vostra università;
  3. Create un paragrafo dove scrivete il vostro luogo di residenza;
  4. Separate questa prima parte con una linea divisoria;
  5. Ora create un terzo paragrafo dove potete descrivere in maniera più dettagliata la vostra biografia

Quello che state realizzando è il vostro sito web old school che si rifà al layout di un noto social utilizzato dai professionisti: Linkedin.

[Immagine linkedin con blocco evidenziato]

Nella prossima lezione vedremo delle tecniche di formattazione più avanzate come le liste. Seguiremo di pari passo il progredire delle lezioni e apporteremo di volta in volta degli aggiornamenti per lo sviluppo del nostro sito web old school.

Creare una pagina web da zero

In questa lezione vi mostrerò come creare una pagina web da zero e quali sono gli strumenti di cui avete bisogno per iniziare il vostro progetto HTML.

L’editor di testo

Per creare una pagina web da zero, non è necessario avere strumenti particolarmente complessi e dispendiosi, anzi. Partiamo da questa premessa: una pagina web non è altro che un file di testo con estensione .html.

Senza perdere troppo tempo, proviamo subito a creare una pagina web da zero:

  1. Aprite l’editor di testo del vostro Sistema Operativo (blocco note per chi è su Windows);
  2. Create un titolo con il tag h1;
  3. Create un paragrafo con il tag p;
  4. Salvate con nome il file e rinominatelo in questo modo: index.html, accertandovi di aver eliminato l’estensione che l’editor imposta di default (.txt);
  5. Aprite il file html appena salvato, con un Browser.

Visual Studio Code

In pochi attimi avete realizzato una semplicissima pagina web. In teoria è possibile creare da zero interi siti con editor di testo come il blocco note. Tuttavia, esistono software specifici molto più comodi che faciliteranno estremamente il vostro lavoro. Uno fra questi è Visual Studio Code (VS Code), uno degli editor più utilizzati fra sviluppatori e artisti per via della sua incredibile efficienza e versatilità. VS Code è un editor totalmente open source che potete scaricare gratuitamente dal sito ufficiale.

Una volta scaricato VS Code, utilizzatelo per aprire il file index.html. In pochi attimi VS Code mostrerà la schermata del codice e noterete fin da subito la differenza che c’è rispetto al blocco note.

I tag vengono contrassegnati con una colorazione diversa, così come più o meno ci apparivano nella developer tools del browser. Se proviamo a scrivere un nuovo elemento, l’editor ci aiuta con una serie di suggerimenti. Inoltre, è in grado di chiudere automaticamente l’elemento con l’apposito tag, prevenendo in questo modo i classici errori di mancata chiusura.

In questa lezione non ci dilungheremo nelle grandi potenzialità che ci offre questo editor di testo. Se siete interessati ad approfondire, vi consiglio caldamente di leggere la Guida rapida a Visual Studio Code, un piccolo tutorial che vi guiderà passo passo fra le tecniche e le estensioni più interessanti di questo editor.

È bene sapere che esistono tantissimi altri editor alternativi a VS Code, non siete vincolati all’utilizzo di questo specifico strumento. A tal proposito, vi elenco quelle che sono per me delle buone alternative:

  • Atom
  • Sublime Text
  • Brackets
  • Codepen++

Fase preliminare per creare una pagina web da zero

Creare una pagina web da zero significa predisporre i files e le cartelle di cui abbiamo bisogno con criterio ed ordine. Andiamo sul desktop e creiamo una nuova cartella rinominandola: HTML Per principianti. Questa sarà la cartella del corso che riempiremo dal nostro text editor. Andiamo su VS Code e selezioniamo dalla barra delle opzioni: File, Apri Cartella… A questo punto selezioniamo la cartella appena creata dall’Esplora risorse.

Come potete notare, il vostro editor vi mostra una finestra con una sidebar che vi permette di esplorare la cartella che avete selezionato. Andate nella sidebar e selezionate l’icona per creare una nuova cartella, rinominandola _Boilerplate. A questo punto, fate click sulla cartella appena creata e questa volta selezionate l’icona per creare un Nuovo File rinominandolo: index.html.

Index è un nome standard che gli sviluppatori attribuiscono alla Homepage di un sito. Vi suggerisco di utilizzare sempre questa nomenclatura anche in futuro.

Una volta creata la index, noterete che VS Code aprirà automaticamente il file nella parte più ampia della finestra. A questo punto siete pronti per creare il vostro progetto.

Cos’è il Boilerplate HTML?

Il codice boilerplate è un testo standard di configurazione che ammette delle modifiche minime. Per creare una pagina web da zero dunque, abbiamo bisogno di scrivere una serie di dichiarazioni standard che specificano la tipologia di file e altri elementi fondamentali. Il boilerplate può essere definito come un template iniziale, ovvero un codice che possiamo riutilizzare quando creiamo una nuova pagina.

DOCTYPE

Il Boilerplate HTML iniziano sempre con un’intestazione:

<!DOCTYPE html>

Con questa riga dichiariamo il tipo di documento in modo tale che il browser possa essere in grado di interpretare la pagina secondo lo standard corretto. Nel caso specifico, la riga di codice <!DOCTYPE html> definisce una pagina scritta nella versione 5 di HTML.

Se volessimo provare a scrivere una pagina in una versione precedente, come ad esempio XHTML, avremmo dovuto scrivere il codice in questo modo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Come potete notare, in passato l’intestazione era prolissa e contorta rispetto alla versione attuale!

TAG HTML

La riga successiva nel nostro boilerplate è contraddistinta dal tag <html>. Con questo tag comunichiamo al browser che tutto ciò che è contenuto all’interno di questo elemento, deve essere interpretato come codice HTML. L’elemento <html> viene definito nel gergo tecnico come root element.

È possibile realizzare la struttura di una pagina HTML attraverso due macro-elementi: <head> e <body>

<html>
  <head></head>
  <body></body>
</html>

TAG HEAD

Il tag <head> è la parte del codice HTML in cui vengono dichiarate le informazioni relative alla pagina web. Attraverso il tag head, il browser sarà in grado di gestire la pagina grazie a tag come il <title> o il <meta charset="">, attraverso il quale sarà possibile definire la corretta codifica dei caratteri.

<head>
  <meta charset="">
  <title></title>
</head>

TAG TITLE

Il tag title comunica al browser il titolo della pagina. Ciò che viene dichiarato nel tag title viene mostrato dal browser come titolo della pagina web e ha un valore fondamentale nel rapporto che le singole pagine hanno con i motori di ricerca.

<title>HTML Boilerplate</title>

TAG META

Nella head di una pagina web è possibile dichiarare diversi meta tag. Questi elementi permettono di specificare delle informazioni aggiuntive che possiamo associare alle pagine web. Nel nostro caso, il meta character set è uno dei meta fondamentali. Attraverso di esso comunichiamo al browser di impostare la codifica dei caratteri secondo lo standard unicode UTF-8 .

Unicode è il sistema di codifica più diffuso che assegna ad ogni carattere un numero univoco. Generalmente la codifica UTF-8 ci permette di utilizzare tutti i caratteri internazionali più diffusi e quindi rappresenta la scelta ottimale se non necessitiamo di simboli particolari.

Se vi doveste trovare mai nel caso in cui i testi della vostra pagina web dovessero presentare delle inesattezze – specialmente per i caratteri accentati – probabilmente il problema sta proprio nel fatto che non avete dichiarato la codifica UTF-8 nel character set!

Qui trovare una lista con tutti i caratteri disponibili nello standard UTF-8.

<meta charset="utf-8">

In questo contesto, charset viene definito come attributo dell’elemento meta. Come abbiamo già detto, esistono diversi meta e ciascuno di essi può essere dichiarato con attributi diversi. Vediamone qualcun altro:

Meta description
<meta name="description" content="Boilerplate HTML per creare una pagina web da zero">

Il meta description comunica al browser una sintesi di ciò che viene trattato nella pagina. Così come il title, la description assume un valore rilevante soprattutto nel rapporto che c’è fra pagina e motore di ricerca. Se proviamo ad effettuare una qualsiasi ricerca su google,  il contenuto del meta description corrisponde a quella piccola parte di testo che troviamo sotto i titoli delle pagine, nei risultati della ricerca. Nel caso dello snippet scritto in alto, troveremmo la frase: “Boilerplate HTML per creare una pagina web da zero“.

Meta Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Il meta viewport è fondamentale per permettere al browser di tenere conto della grandezza del display prima di renderizzare la pagina. Non affronteremo il tema del responsive design in questa guida, tuttavia è bene tenere conto che una pagina web applica delle regole di stile variabili in base alla grandezza del display. Per far sì che queste variazioni abbiano effetto, dichiariamo attraverso questo meta che la grandezza della finestra del browser deve essere grande quanto la larghezza del display e che la scala di visualizzazione iniziale deve avere il rapporto 1:1 – quindi né zoomato, né ridotto.

TAG BODY

È l’elemento all’interno del quale lavoreremo maggiormente. Tutto ciò che vediamo nella nostra pagina web, è parte del contenuto presente in <body>. Nessuno dei tag che abbiamo visto fino ad ora nel nostro boilerplate, infatti, ha impatto sul contenuto della pagina. Se provassimo ad aprire la pagina con un body vuoto, non vedremmo nulla. Nel body dichiariamo gli elementi, i testi, le immagini e tutto ciò che rappresenta il contenuto reale della pagina web.

Ecco a voi il boilerplate completo della nostra pagina HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Boilerplate HTML per creare una pagina web da zero">
    <title>HTML Boilerplate</title>
  </head>
  <body></body>
</html>

Questo template vi permetterà di configurare correttamente le vostre pagine web. Copiate e incollatelo nel vostro editor di testo ogni volta che avete bisogno di creare una nuova pagina.

Dalla prossima lezione entreremo nel vivo della creazione e riempiremo il tag body con testi e nuovi elementi.

Gli attributi di un tag

In genere è possibile applicare nei tag HTML uno o più attributi, ovvero dei parametri addizionali che permettono di definire in modo più completo alcune caratteristiche o configurazioni dell’elemento. Attraverso gli attributi possiamo apportare degli aggiustamenti o regolare il comportamento degli elementi in modo da soddisfare gli standard di lettura degli utenti.

Come si scrivono gli attributi

Gli attributi sono definiti all’interno del tag ed è possibile dichiararli attraverso una coppia chiave valore. Vediamo la sintassi per applicare un attributo ad un tag.

<elemento attributo="valore"></elemento>

Come potete osservare gli attributi sono specificati entro le parentesi angolari che delimitano il tag di apertura.

In questo momento non potete ancora attingere ad un una vasta gamma di tag, ma nel corso delle lezioni il vostro vocabolario si arricchirà. Vi consiglio di tenere d’occhio – lezione dopo lezione – le reference delle MDN web docs che illustrano in modo chiaro ed esauriente gli attributi che possiamo applicare sui singoli elementi.

Potete fare una prova di utilizzo dell’attributo align applicandolo ad un <h1> per allineare al centro della pagina il titolo.

<h1 align="center">Gli attributi by Creative Code</h1>

In questo caso il valore center indica la posizione che deve assumere il titolo nella sua area di blocco.

Esercizio: replica la struttura della pagina

È ora di mettere in pratica le nozioni apprese nel corso di queste lezioni. Vediamo di fare pratica con i tag HTML cercando di replicare su codepen la struttura di questa pagina:

[immagine]

Esercizio sugli attributi

Vi voglio mettere ulteriormente alla prova con un altro esercizio.

Sareste in grado di replicare una rappresentazione del genere? Riuscite a capire di quale elemento si tratta?

Ricordate di consultare la MDN reference se avete dubbi sui singoli attributi da applicare all’elemento.

<!-- immagine di -->
<hr size='10' width="30">
<hr size="10" width="60">
<hr size="10" width="90">
<hr size="10" width="120">
<hr size="10" width="150">
<hr size="10" width="180">

Dai, iniziate a sperimentare con il codice e gli elementi HTML… siate creativi!

Nella prossima lezione abbandoneremo codepen.io per iniziare da zero un nostro progetto in HTML, definendo tutti i tag fondamentali che costituiscono il cosiddetto Boilerplate.