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.

Primi passi con il linguaggio HTML

In questa lezione muoviamo i primi passi con il linguaggio HTML e iniziamo a scrivere le prime righe di codice per creare un nuova pagina web.

HTML sta per Hypertext Markup Language, ovvero un linguaggio che fa uso di marcatori per descrivere gli elementi strutturali di una pagina.

Il termine markup o marcatura  era utilizzato in ambiente tipografico per marcare delle parti di testo su cui apportare correzioni e migliorie.

La tecnica di scrittura di un documento scritto in HTML è piuttosto simile e consiste nel contrassegnare gli elementi della pagina con dei marcatori che attribuiscono ulteriori informazioni ai contenuti.

Qualsiasi browser che interpreta il linguaggio HTML è perciò in grado di tradurre ogni singola linea di codice convertendola in un elemento strutturale della pagina.

Ipotizziamo di far leggere al browser il seguente codice:

<!DOCTYPE html>
<html>
  <head> 
    <title>Pagina Saluto</title> 
  </head> 
  <body> 
    <p>Ciao Mondo!</p> 
  </body> 
</html>

Osservate questo codice senza concentrarvi troppo sulla sintassi e andate alla ricerca di quelle parole o frasi che riuscite a capire. Questo piccolo esercizio può essere utile per permettervi di prendere visivamente confidenza  con una struttura HTML – seppure si tratta di una struttura molto minimal.

Avete trovato le frasi “Pagina Saluto” e “Ciao Mondo” nel codice? Effettivamente, ciò che ho scritto nello snippet in alto verrà interpretato dal browser come una pagina intitolata Pagina Saluto, con all’interno un paragrafo che dice:”Ciao Mondo!“.

In questa e nelle prossime lezioni, vedrete come arrivare gradualmente ad un risultato simile comprendendo esattamente il significato di ciascun elemento.

I tag HTML

Osservando il codice in alto con maggiore attenzione, possiamo notare la presenza di parole speciali circondate da parentesi angolari (es. <body>). Questo tipo di sintassi serve a definire gli elementi HTML attraverso l’utilizzo di speciali marcatori che chiamiamo tag.

I tag hanno lo scopo di descrivere la funzione strutturale e semantica dei contenuti, di modo che il browser possa capire se mostrare un paragrafo, un titolo, una lista, ecc…

Un elemento HTML è composto in genere da:

  1. tag di apertura
  2. contenuto del tag
  3. tag di chiusura

Un esempio di tag HTML che mostra un testo in formato titolo è:

<h1>Titolo di un paragrafo</h1>

Allo stesso modo possiamo specificare un tag che contenga del testo da inserire in un paragrafo in questo modo:

<p>Testo del paragrafo</p>

Ogni tag può specificare come proprio contenuto, altri tag. Come vedremo anche più avanti, questa tecnica di scrittura è molto intuitiva e garantisce un’ottima leggibilità.

<hgroup>
  <h1>Titolo</h1>
  <h2>Sottotitolo</h2>
</hgroup>

Quello che vedete nell’esempio è un tag HTML usato per la creazione di un gruppo di intestazioni (hgroup sta per heading group). Osserviamo che l’elemento <hgroup> ha al suo interno una coppia di tag che definiscono due titoli di formato diverso (il primo più grande, il secondo più piccolo).

Per il momento è bene non entrate troppo nel merito dei singoli tag, l’importante è che abbiate chiara l’idea di come si compone un elemento HTML. Prima di iniziare a prendere dimestichezza  con la sintassi…

Ricapitoliamo:

I contenuti di una pagina web sono espressi attraverso una serie di elementi standard contrassegnati da tag. Ciascun elemento mostra un certo contenuto o raggruppa una serie di altri elementi specificando un tag  di <apertura> e un tag di  </chiusura>.

Facciamo pratica con i tag HTML

Proviamo a creare i primi tag HTML andando su codepen.io, un sito molto comodo che ci permette di effettuare dei rapidi test. Dimentichiamo per un attimo la struttura che abbiamo visto all’inizio della lezione e cerchiamo di concentrarci solo sulla parte visibile della pagina, ovvero quella che normalmente va scritta all’interno dell’elemento <body>.

Selezioniamo dal menu la voce create e creiamo un nuovo pen. Questa schermata è l’equivalente di una pagina web vuota. I tre riquadri in alto fanno riferimento ai tre linguaggi che il browser legge ed interpreta per creare una pagina web (HTML, CSS, Javascript), mentre la schermata bianca in basso mostra un’anteprima della pagina che si aggiornerà ad ogni nostro cambiamento.

Mettiamo da parte le schermate CSS e Javascript e focalizziamoci sull’area di lavoro del codice HTML. Non ci resta che provare a scrivere subito qualcosa!

[immagine hello world]

Come vedete, codepen è piuttosto reattivo e mostra nella preview la copia di ciò che abbiamo digitato nel riquadro dell’HTML. Tutto sembra funzionare correttamente e il browser interpreta il nostro testo come contenuto puro, ovvero una stringa completamente priva di formattazione. Proviamo ora ad andare a capo e aggiungere altro testo.

[immagine hello creativecode]

Possiamo notare che in questo caso la risposta del browser nella preview non corrisponde esattamente a quanto abbiamo scritto nell’HTML, lasciando “Hello Creative Code!” sulla stessa riga di “Hello World!”. Questo accade perché ciò che abbiamo specificato nell’HTML oltre ad essere un contenuto senza formattazione, è anche privo di qualsiasi indicazione circa il layout che vorremmo avere. In questo caso abbiamo bisogno di un elemento che dica al browser di interrompere la riga e andare a capo. Il tag che svolge questo compito è il <br /> (break row).

Proviamo ad aggiungere l’interruzione di riga fra “Hello World!” e “Hello Creative Code”. In questo caso il browser interpreta correttamente la marcatura e stampa “Hello Creative Code” al rigo successivo.

Self-Closing Tag

Come potete notare, il <br /> viene specificato con un solo tag e non attraverso un’apertura ed una chiusura come abbiamo visto nella prima parte della lezione per <hgroup>, <h1> e <p>. Questo accade perché esistono degli elementi che non necessitano di alcun contenuto e che da soli hanno un valore  e un significato strutturale. I tag privi di contenuto prendono il nome di self-closing e sono scritti in questa forma: <tag />, oppure più semplicemente <tag>. Un altro esempio di self-closing tag è l’hr, un elemento che consente di tracciare una linea orizzontale per separare visivamente un testo da un altro.

Commentare il codice

Una pagina web piuttosto ricca può essere lunga diverse centinaia di righe di comando. Questa lunghezza può portare confusione e non permette una buona gestione della pagina nel corso del tempo.

Immaginate di dover riprendere dopo diverso tempo una pagina HTML di 1000 righe per correggere il percorso di un’immagine. Solitamente i designer inseriscono i commenti per tenere traccia delle modifiche, dei punti più importanti del documento o per descrivere la funzione di un particolare elemento. 

Inserire i commenti aiuta inoltre tutta la community a rendere leggibile il codice. Non dimenticate che l’HTML è un linguaggio open source! Lavorate affinché il vostro codice possa essere letto, interpretato e utilizzato come fonte di ispirazione anche da altri designer come voi.

<!-- Titolo del mio sito web -->
<h1>creativecode.it</h1>

<!-- Paragrafo principale -->
<p>Affina le tue capacità creative attraverso l’apprendimento delle tecnologie per il web.</p>

<!-- Paragrafo secondario -->
<p>Impara a progettare applicazioni interattive seguendo un approccio lineare, incentrato sul tuo reale apprendimento.</p>

Come potete osservare dall’esempio in alto, ho commentato il mio codice descrivendo la funzione dei singoli elementi HTML. Per scrivere un commento nel codice viene utilizzata questa sintassi: <!-- qui va il commento --> che non va ad incidere in alcun modo sul lato di visualizzazione del mio sito web.

Gli standard del Web

Nelle scorse lezioni avete imparato cosa c’è dietro internet e dietro un sito web, in questa lezione scoprirete chi decide quali sono gli standard ed i linguaggi per lo sviluppo web.

Internet è un’infrastruttura in costante evoluzione. Esiste una vasta community composta da varie organizzazioni che lavorano quotidianamente per decidere come dovrà essere in futuro la rete, cosa dovrà offrire e in che modo dovrà porsi rispetto agli utenti. Ciascun designer, sviluppatore o creativo, basa il proprio lavoro su una serie di linguaggi standardizzati. Tali standard sono frutto di varie evoluzioni che nell’arco degli anni si sono succedute per dar modo all’utenza di vivere internet sulla base delle necessità più comuni.

Breve storia dell’HTML

World Wide Web

La rete che conosciamo oggi nasce da un progetto iniziato negli anni Novanta da un noto ricercatore informatico di nome Tim Berners-Lee. Assieme al belga Robert Cailliau ha inventato il www: il “World Wide Web“,  ispirandosi ad un software di nome Enquire.

Enquire era un programma che si avvaleva di ipertesti e che aveva come obiettivo quello di consentire ai ricercatori di scambiarsi informazioni. Nel 1989, Tim Berners-Lee decise di adattare l’idea di Enquire ad Internet.

Il progetto HTML

Proprio in quel periodo il nostro Tim creò un linguaggio che permettesse di formattare dei documenti testuali con dei marcatori. Con questo linguaggio era possibile creare collegamenti fra testi, situati in server localizzati in punti lontani dal computer locale. L’idea era quella di navigare in una fitta rete di informazioni. Il linguaggio di cui stiamo parlando è l’Hypertext Markup Language (HTML).

Berners-Lee sottopose il progetto alla IETF (Internet Engeneering Task Force): un’organizzazione che, come tante altre, lavora per migliorare le potenzialità di internet attraverso dei gruppi di lavoro. A tal proposito, nacque l’HTML Working Group, un gruppo formato da tecnici, specialisti e ricercatori che lavoravano attivamente per sviluppare il progetto dell’HTML.

L’organizzazione denominata W3C (World Wide Web Consortium) istituita dallo stesso Berners-Lee, assorbì in poco tempo l’HTML Working Group, allo scopo di creare uno standard completo per le web technologies.

Nel corso di questi anni la w3c ha reso l’HTML il linguaggio fondamentale della rete, rilasciando nel corso degli anni vari sviluppi e versioni che hanno trasformato il modo di navigare in internet e di progettare i siti web.

La rivoluzione chiamata HTML5

Dopo anni di stallo, nel 2006 il vecchio Tim Barners-Lee si rese conto dell’importanza di un progetto fondato dai membri di Mozilla Firefox, Apple e Opera Software: il progetto denominato WHATWG.

La mission della WHATWG era quella di sviluppare e promuovere nuove tecnologie che potessero estendere le potenzialità del web. Berners-Lee propose dunque l’istituzione di un nuovo gruppo di lavoro alla W3C che avrebbe dovuto collaborare con la WHATWG. Assieme lavorarono ad una nuova, epocale specifica dell’HTML: un progetto chiamato HTML5, cioè l’attuale standard per lo sviluppo della struttura di un sito.

Affrontare le evoluzioni della rete

La W3C indica quali sono i linguaggi standard che sviluppatori e artisti potranno utilizzare per il loro progetto web.

Tenete ben presente che gli standard non sono immutabili e ciò che imparerete, un giorno, potrà essere messo in discussione. I bisogni dell’utenza evolvono e gli sviluppatori devono essere pronti alle grandi mutazioni che potranno essere apportate nel corso degli anni.

Il consiglio che posso darvi è di ricercare sempre le applicazioni moderne senza perdere mai la bussola del vostro apprendimento. Cercate di avere sempre e solo l’idea dell’orizzonte senza bruciare le tappe, perché sarà più facile arrivarci gradualmente. Studiare gli standard del web vi consentirà di avere una solida base per le sperimentazioni del futuro.

Nella prossima lezione inizieremo finalmente a sporcarci le mani con il codice HTML e capirete come creare correttamente i primi elementi di una pagina web.

Vedere il codice di un sito web

Vedere il codice di un sito web è una delle pratiche più comuni fra i designer. Tutti i browser moderni offrono la possibilità di analizzare la struttura di una pagina web in due modi: dal codice sorgente o attraverso i Developer Tools.

Vedere il codice di un sito attraverso la sorgente della pagina

Proviamo ad andare sul sito creativecode.it…
A questo punto, come avete avuto modo di vedere nelle scorse lezioni, il server ci invia una serie di files HTML, CSS e Javascript.

Man mano che il browser scarica dati dal server, andrà a montare la struttura del documento HTML assieme al foglio di stile ed i vari script. Al termine del processo vedremo il rendering completo della pagina.

A questo punto, possiamo decidere di visualizzare tutto il codice che compone la homepage.

  • Clicchiamo con il tasto destro del mouse su un punto qualsiasi della pagina;
  • Selezioniamo la voce “Visualizza sorgente pagina” (CTRL + U);

La finestra che si aprirà corrisponde letteralmente alla radiografia della pagina web. Testi, immagini, video, bottoni, form e tutto quello che possiamo trovare navigando in una pagina, deve essere scritto qui.

  • Cerchiamo nel codice il titolo della guida che è in evidenza su Creative Code attivando la funzione di ricerca del Browser con CTRL+F;

Chrome ci evidenzia in giallo la stringa ricercata. Questa stringa, nel contesto del codice, non è nient’altro che il contenuto di un elemento HTML che descrive il formato di un titolo.

Anche se analizzeremo nelle prossime lezioni la sintassi degli elementi HTML, possiamo già osservarne la forma attraverso i Developer Tools

Vedere il codice di un sito con l’ispeziona elemento di Google

I Developer Tools sono gli strumenti che gli sviluppatori utilizzano in fase di implementazione di un sito web.

Accediamo alla Chrome Developer Tools facendo nuovamente click con il tasto destro del mouse sulla pagina e selezioniamo questa volta l’opzione Ispeziona.

Quello che appare in basso è il pannello degli elementi della Developer Tools. Possiamo notare fin da subito delle affinità con la scheda che ci mostrava il codice sorgente della pagina.

Se proviamo a portare il cursore su alcune righe di codice, possiamo riscontrare tuttavia delle differenze con la visualizzazione cruda e scarna del codice sorgente. In base alla riga evidenziata con il passaggio del mouse, il browser mostra un riquadro nella pagina che è relativo al contenuto descritto da quella porzione di codice.

Vedere il codice di un sito web attraverso questo sistema è una necessità per i designer, perché permette di analizzare attentamente il sito e di effettuare delle prove di editing che accelerano il flusso di lavoro.

Developer Tools: Il Cursore di Selezione

Possiamo vedere il codice di un sito dalla developer tools in modo ancora più efficiente, utilizzando l’apposito cursore di selezione. Questo speciale cursore può essere attivato facendo click sulla prima icona a sinistra del pannello. Con questo strumento non facciamo altro che invertire la funzione del mouse in modo da poter evidenziare l’elemento dalla pagina alla relativa riga di codice.

Editare il contenuto dalla Developer Tools

Adesso non ci resta che provare a modificare la pagina a nostro piacimento! Selezioniamo il titolo di una guida sul sito di Creative Code di modo che il browser possa mostrarci la relativa riga di codice. A questo punto possiamo modificare il contenuto di questo elemento facendo doppio click sul titolo mostrato nella finestra dei Developer Tools.

[immagine]

Come vedete, adesso siete liberi di modificare il titolo originale della guida. Non dimenticate di millantare cotale prodezza mostrando il risultato ad amici e parenti, rimarranno quasi sicuramente shockati da ciò che hanno appena visto! 😀

Ovviamente non è cosi semplice modificare i contenuti di una pagina. 😛 Sapreste spiegare il perché? Pesateci per un attimo, non è così strano se si conosce il reale funzionamento di un sito web.

Ci siete arrivati?

È abbastanza scontato, non possiamo pensare che questo genere di intervento sul codice possa realmente influire nella versione reale del sito fintanto che le modifiche sono state effettuate dal browser e quindi lato client.  Perciò, pur essendo liberi di manipolare i dati in nostro possesso, non possiamo inviare tali modifiche al server.

Ciò che vediamo nel browser, effettivamente, non è che una copia di dati scaricati dal server e montati nel nostro browser. Dalla nostra finestra siamo liberi di fare ciò che vogliamo con il sito web perché tutte le modifiche che possiamo fare saranno visibili solo nella nostra copia del sito.

Tutta la magia svanirà quando invieremo una nuova richiesta al server, aggiornando la pagina. Le nostre modifiche saranno perse e… il trucco svelato (shh, potete anche non dirlo a nessuno).

Nella prossima lezione parleremo del linguaggio HTML e scopriremo le evoluzioni che ha compiuto nell’arco degli anni, allo scopo di conoscere le figure e le organizzazioni principali che dettano la linea su come deve o dovrà essere internet. 

Da cosa è composta una pagina web

In questo articolo vedremo da cosa è composta una pagina web, così che possiate conoscere i linguaggi da imparare per sviluppare un sito web da zero.

Cosa scarichiamo dai server dopo la richiesta?

Come abbiamo visto nell’articolo precedente, i dati fondamentali che scarichiamo dal server sono di tre tipologie: HTML, CSS, Javascript.

Il documento scritto secondo lo standard HTML5 rappresenta il file più importante di un sito. Senza di esso infatti, non è possibile dar luogo ad alcuna pagina web perché sarebbe priva della struttura che permette la visualizzazione dei contenuti nel browser.

HTML: Cosa deve contenere il sito web?

L’HTML è il documento chiave di un sito web ed è il responsabile della struttura. Attraverso di esso creiamo i reparti e i contenuti del nostro spazio sulla rete. Con l’HTML possiamo definire testi, immagini, audio e video all’interno di spazi o blocchi visualizzabili attraverso il browser. Possiamo inoltre creare relazioni fra questi elementi attraverso l’inclusione di bottoni e link ipertestuali che ci permettono di navigare fra i vari contenuti o le diverse pagine.

Tutti gli elementi di cui abbiamo bisogno, li definiamo quindi nel documento HTML.

CSS: Come deve essere il sito web?

Il CSS è responsabile dello stile di una pagina. Immaginando di aver già creato la struttura HTML del sito web, la prima cosa che vorrete fare sarà senz’altro rendere maggiormente presentabili i vostri contenuti. Questo passaggio è possibile collegando le pagine HTML con i fogli di stile CSS, che consistono grossomodo in un lungo elenco di istruzioni utili a definire gli elementi stilistici della pagina. Attraverso i CSS includiamo le fonts, realizziamo il layout della pagina e formattiamo i contenuti consentendo  la totale accessibilità delle informazioni sui diversi dispositivi (desktop, tablet, mobile, smartwatch, ecc…).

Javascript: Cosa deve fare il sito web?

Il Javascript è responsabile della maggior parte dei sistemi interattivi di un sito web ed è la parte più avvincente quando si studia programmazione. Immaginiamo il Javascript come l’addetto alla gestione di tutti quei sistemi e componenti che rispondono a dei segnali per dar luogo degli effetti. Il Javascript permette ad un sito web di essere avanzato dal punto di vista interattivo. Pensiamo ad un e-commerce che ad ogni click effettuato sul bottone “Aggiungi”, aggiornerà la lista della spesa mostrandoci il totale nella sidebar del carrello, oppure immaginiamo l’astronave di Arkanoid che si sposterà lungo l’asse x dello schermo attraverso il movimento del mouse.

Questo è tutto! Un sito web completo è composto da nient’altro che questi tre elementi. In questa guida ci concentreremo molto sugli aspetti relativi all’HTML e non affronteremo gli altri due linguaggi che saranno oggetto delle prossime guide

A questo punto avete bisogno di prendere confidenza con il linguaggio. Vi consiglio di non gettarvi subito a capofitto nel coding ma cominciando ad osservare una pagina web sbirciando il codice sorgente o facendo uso degli strumenti speciali che il browser mette a disposizione degli sviluppatori, come vedremo nei prossimi articoli.