Imparare l’HTML: i primi passi da compiere con il linguaggio standard del web
Alla fine degli anni 80 l’informatico britannico Tim Berners-Lee sviluppò i componenti di base del World Wide Web. In quanto allora impiegato presso l’Organizzazione Europea per la Ricerca Nucleare (CERN) egli si stava dedicando principalmente ad un progetto interno che aveva lo scopo di rendere possibile lo scambio transnazionale di informazioni in rete tra i vari laboratori del CERN, che si trovavano in parte su territorio francese e in parte su territorio svizzero. Come base per l’infrastruttura di rete pianificata, Berners-Lee, utilizzò l’ipertesto, ovvero un formato testuale che trasmette informazioni tramite rimandi (link ipertestuali) e che viene scritto con il linguaggio di markup. Il risultato fu il Hypertext Markup Language, o HTML in breve.
Circa tre decenni dopo, assieme ad altri componenti come il protocollo di trasferimento HTTP, l’URL, i browser e i server web, l’HTML rappresenta le fondamenta del networking mondiale e digitale; il che rende l’apprendimento di questo linguaggio web un must per ogni sviluppatore. Per facilitarvi la comprensione del principio del linguaggio di markup e dunque iniziare ad utilizzarlo, abbiamo riassunto in questo tutorial HTML i fondamentali e i consigli più importanti per chi vuole cominciare.
Che cose l’HTML?
L’HTML si annovera tra i linguaggi leggibili dalle macchine, definiti anche linguaggi computistici, che permettono l’interazione tra i computer e gli uomini. Questo linguaggio rende possibile la definizione e la strutturazione di elementi tipici di un documento focalizzato sul testo, come intestazioni, capoversi, liste, tabelle o grafici, i quali vengono contraddistinti al suo interno. La rappresentazione visiva avviene tramite un browser a scelta, il quale interpreta le righe di codice sorgente, in modo da sapere in che modo devono essere riprodotti i singoli elementi. In aggiunta il codice HTML può contenere indicazioni sotto forma di meta informazioni, come ad esempio riguardo all’autore.
Come linguaggio di markup l’HTML viene usato oggigiorno perlopiù solamente nella sua funzione descrittiva, mentre il design viene definito con l’utilizzo di linguaggi di fogli di stile, come il CSS (Cascading Style Sheets). Agli albori del web era comunque cosa comune che gli adattamenti visivi avvenissero tramite HTML.
L’HTML si è sviluppato dal metalinguaggio SGML (Standard Generalized Markup Language), oggi sempre meno utilizzato, che è uno standard ISO riconosciuto (8879:1986). La dicitura degli elementi SGML si trova anche nell’HTML. Solitamente tali diciture vengono marcate tramite coppie di tag, che consistono di start tag <> e di end tag </>, anche se per alcuni elementi l’end tag non è necessario; inoltre esistono alcuni elementi vuoti come l’interruzione di riga <br>. Oltre ai tag ci sono altre caratteristiche dell’HTML che agiscono sulla stessa falsariga:
- Document Type Declaration: informazioni della versione HTML utilizzata, come ad esempio <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- Utilizzo di componenti sotto forma di caratteri: alcune componenti vengono utilizzate per delle unità che si ripetono, come ad esempio < per “<” o & per “&”.
- Marcatura dei commenti: i commenti vengono aggiunti nell’HTML secondo questo modello <!—commento>.
- Attributi: le caratteristiche complementari dei tag vengono aggiunte secondo modello <attributo tag=”valore”>.
Quale software è necessario per scrivere in codice HTML?
La prima domanda che è lecito porsi in questa breve panoramica sull’HTML è: con quale software conviene scrivere? Ma a questa domanda è praticamente impossibile dare una risposta onnicomprensiva. Da un lato i requisiti di programma sono praticamente inesistenti, perciò un semplice text editor, presente in ogni sistema operativo, basta e avanza. D’altro canto l’utilizzo di programmi specifici per HTML offre chiare semplificazioni durante la scrittura. Ma quanto sono adatte le diverse opzioni durante la fase di apprendimento dell’HTML?
Semplici text editor
Per scrivere un codice HTML non necessitate di alcun software particolarmente esigente. Un semplice editor come l’editor di Windows, conosciuto anche come Notepad, o il TextEdit dei computer Mac (nella modalità di testo in chiaro), basta come base su cui lavorare. E nonostante con tali programmi manchi la possibilità di modificare il layout del testo, si tratta comunque di una mansione che non fa direttamente parte delle formattazioni HTML. Da un punto di vista teorico anche i programmi per l’elaborazione testuale come Microsoft Word o OpenOffice Writer possono essere ugualmente utilizzati, ma, se siete nella fase di studio dell’HTML, sarà difficile approfittare delle funzioni aggiuntive che essi mettono a disposizione. In alcuni casi le funzioni superflue possono anzi avere l’effetto contrario e frenare il processo di apprendimento.
Per muovere i primi passi durante l’apprendimento dei fondamentali dell’HTML vi basterà utilizzare un semplice text editor, che troverete già installato in qualunque sistema operativo stiate utilizzando.
HTML Editor
Al fianco dei semplici editor e di programmi di elaborazione testuale più complicati, esistono anche degli editor specifici dotati di appositi aiuti: questi programmi, ad esempio, mettono in risalto le distinzioni sintattiche con l’aiuto di diversi colori, fornendovi così un’eccezionale panoramica su tutto il codice che avete messo per iscritto. Inoltre vi evidenziano eventuali errori sintattici che avete commesso. Un altro standard di questi programmi è la funzione di completamento automatico, la quale sottoporrà alla vostra attenzione delle proposte di estensione ovvero di completamento del codice durante la scrittura dei tag HTML e ad esempio completerà automaticamente il vostro end tag. In aggiunta, spesso gli editor HTML dispongono di una funzione di anteprima, con la quale, ogniqualvolta lo desideriate, premendo semplicemente un pulsante, potrete esaminare il risultato provvisorio delle vostre righe di codice. Un editor per gli utenti Windows che valga la pena di provare è Notepad++, gratuito e con licenza GPL; mentre un’alternativa gratuita per chi utilizza sistemi compatibili con UNIX è Vim.
Editor HTML con rappresentazione in tempo reale
Un’altra tipologia di editor che disponga di tutte le amenità e che sia integrato in praticamente tutti i siti web pronti all’uso e nei sistemi di content management, sono gli editor HTML con rappresentazione in tempo reale, meglio conosciuti come editor WYSIWYG. L’acronimo rimanda al concetto che sta alla base di questi programmi, ovvero “What You See Is What You Get”, traducibile in italiano come “ciò che vedi, è ciò che avrai”. Questi editor sono stati sviluppati specificamente per la produzione di codici HTML e richiedono tra l’altro solo poche conoscenze sul linguaggio di markup. Come in un programma di elaborazione di testi, anche con un editor strutturerete il vostro testo con il supporto di tasti preimpostati nel menu, senza dover quindi immettere manualmente neanche un singolo tag HTML. I tag corrispondenti alle vostre esigenze vengono difatti generati direttamente dall’editor WYSIWYG in secondo piano. Ma per l’apprendimento del linguaggio di codifica HTML alcuni editor sono davvero del tutto inadatti, come ad esempio è il caso di BlueGriffon, indipendentemente dal fatto che vi rendano possibile di guardare in tempo reale il codice prodotto o meno.
Impostare la prima pagina HTML
Il primo passo del tutorial HTML è quello di realizzare una pagina iniziale molto facile, che sarà poi visualizzabile direttamente sul browser. Tuttavia, questa non sarà ancora una pagina HTML valida, costruita secondo gli standard definiti, piuttosto una pagina di prova pura. Per la realizzazione di questa prima pagina, così come per tutti i successivi esempi HTML di questo tutorial è stato utilizzato il già accennato Notepad++ come editor. Doveste utilizzare un altro programma, il procedimento potrebbe allora discostarsi leggermente dai passaggi indicati in seguito.
Come prima cosa aprite l’editor e salvate il nuovo file con il nome test. Come formato file scegliete “Hypertext Markup Language file”, cosicché in seguito anche il browser sappia che si tratta di una pagina HTML. Se avete invece scelto di servirvi di un editor più semplice, allora in questo caso dovreste scegliere “Tutti i file” (Codifica: UTF-8) e utilizzare l’estensione HTML direttamente nel campo nome del file, in modo da salvare il file con il nome di test.html.
Il file appena creato dovrebbe apparire con l’icona del browser da voi utilizzato. Cliccandoci due volte sarete già in grado di aprire la pagine, ma poiché manca qualunque tipo di contenuto, tutto ciò che vedrete è una pagina completamente bianca. Come prossimo passaggio aggiungete dunque un breve testo esemplificativo come “Questa è la mia prima pagina HTML”, salvate il documento e aprite nuovamente il file test.html. Il risultato dovrebbe essere lo stesso di quello mostrato qui a seguito, anche se chiaramente in italiano:
HTML: le basi della strutturazione del testo
In questo modo avete già impostato con successo la vostra prima pagina web; e tutto ciò senza aver dovuto far ricorso ad alcun tipo di markup HTML. Ma se in un secondo momento provate ad inserire, nella stessa maniera, un testo strutturato con titoli e capoversi, vi renderete conto che senza i tag non si va da nessuna parte. Le formattazioni apportate, ad esempio tramite un programma di elaborazione testi, scompariranno nella visualizzazione tramite browser: le impaginazioni verranno cancellate automaticamente, più spazi bianchi accorpati, e così via. La soluzione è quella di contrassegnare i diversi elementi di testo come tali grazie all’utilizzo degli elementi strutturali; ovvero fare il passaggio verso il mondo HTML.
Stabilire i capoversi con il tag
Per formare i paragrafi avrete bisogno del tag <p>, che rimanda alla parola inglese “paragraph”. Lo start tag segna l’inizio, mentre l’end tag terminerà il paragrafo in questione. Nel mezzo delle due marcature si troverà il testo da separare. In tutte le versioni HTML, salvo l’XHTML, il tag di chiusura è opzionale, ciononostante l’utilizzo di tale indicazione è sinonimo di buon stile ed è particolarmente raccomandabile durante la fase di apprendimento dell’HTML. Potete provare a separare i capoversi direttamente nella pagina di prova realizzata, inserendo un ulteriore paragrafo e separandoli come appena spiegato:
<p>This is my first webpage!</p>
<p>This is the second paragraph of my first webpage.</p>Consiglio: il capoverso introdotto manualmente serve solamente ad una migliore chiarezza. Potete benissimo scrivere i due elementi <p> in una singola riga uno dopo l’altro.
Inserire i titoli: il tag
Altrettanto importanti per una struttura ordinata dei vostri testi per pagine web, sono le intestazioni. Con HTML non solo avete la possibilità di contraddistinguerli tutti in una volta, ma inoltre può essere impostata una gerarchia chiara per tutti i titoli utilizzati. A questo scopo avete a disposizione i tag da <h11> fino a <h6>, dove <h1> rappresenta il titolo principale della pagina web in questione. Questo tag andrebbe utilizzato non più di una volta a pagine, differentemente da <h2> e dai seguenti.
È importante che manteniate la sequenza gerarchica corretta e che non saltiate indiscriminatamente dall’una all’altra; in questo modo sia i motori di ricerca che i lettori saranno in grado di comprendere la struttura del testo in base alle intestazioni. Per la nostra pagina di prova aggiungiamo a mo’ di esempio un titolo principale come anche un primo sottotitolo:
<h1>Main heading: my first webpage</h1>
<p>This is my first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my first webpage.</p>Consiglio: Poiché il documento HTML ottenuto fino ad ora è una variante semplificata senza meta informazioni, alcuni browser come Firefox potrebbero non mostrare le lettere accentate o altri caratteri correttamente. Per fare la prova dovreste come prima cosa tentare su Google Chrome o, in alternativa, utilizzare la dicitura HTML corrispettiva. Nell’esempio qui utilizzato dovrete sostituire “è” con è.
Mettere in evidenza parole o passaggi con il corsivo o il grassetto: , , e
Tra i fondamentali più importanti dell’HTML c’è anche la possibilità di evidenziare singoli ritagli di testo o parole. In questo modo potete indirizzare il focus del lettore in maniera mirata a degli elementi testuali importanti da un punto di vista contenutistico o funzionale e aiutare così il lettore a coglierli con maggiore facilità.
Con i tag <i> e <em> rendete il testo selezionato in corsivo al fine di distinguere le frasi come pensieri o di espressioni tecniche. Tuttavia l’utilizzo del corsivo tende a frenare il flusso di lettura, per questo motivo è buona cosa utilizzare entrambi i tag con moderazione. Ancora più importanti sono gli elementi <b> e <strong>, che mettono in grassetto parole o porzioni di testo. Con il tag <b> favorite alcuni contenuti sui quali l’utente farà consapevolmente particolare attenzione. Al contrario la marcatura <strong> è prevista per elementi testuali particolarmente importanti da un punto di vista contenutistico.
Per una spiegazione più concreta dei tag di marcatura, ampliamo un po’ il nostro codice HTML:
<h1>Main heading: <i>my first webpage</i></h1>
<p>This is my<strong>first</strong>first webpage!</p>
<h2>Second heading</h2>
<p>This is the second paragraph of my <em>first webpage</em>.</p>
<p><b>Note</b>:Typical example for the<b>-tag.</p>Consiglio: per far sì che l’esempio del codice HTML nel passaggio testuale aggiunto non compaia nel testo in chiaro, abbiamo sostituito le parentesi angolari “<” e “>” con la dicitura HTML corrispondente < e >. Anche qui va ricordato l’utilizzo delle diciture HTML per gli accenti.
Fare degli elenchi: liste punto per punto con i tag , e
Le liste della spesa non sono le uniche liste che possono rendervi la vita più semplice, esse risultano un mezzo di grande utilità anche per rendere alcuni paragrafi più distesi e ottimizzare in questo modo la leggibilità. Con HTML potete realizzare degli elenchi per il vostro progetto web sia con numerazione ordinata sia senza. Per un elenco non ordinato va utilizzato il tag <ul> (derivante dall’inglese “unordered list”), mentre la variante più ordinata la si può ottenere con il tag <ol> (“ordered list”). I singoli punti di un elenco vengono invece definiti con il tag <li>; il quale funziona solo in combinazione con uno dei due tipi di liste. Potete provare il funzionamento delle liste HTML con il seguente codice:
<ul>
<li>first unordered-list item</li>
<li>second unordered-list item</li>
<li>third unordered-list item</li>
</ul>Il risultato dovrebbe assomigliare a questo:
Per un elenco non ordinato va utilizzato il tag Se invece desiderate trasformare l’elenco disordinato in una lista numericamente ordinata, vi basterà scambiare il tag:
<ol>
<li>first ordered-list item</li>
<li>second ordered-list item </li>
<li>third ordered-list item </li>
</ol>Una volta fatto, sul browser compariranno i numeri al posto dei cosiddetti “bullet points”, ovvero i cerchi neri pieni di cui sopra:
Per un elenco ordinato va utilizzato il tag Riportare i dati in maniera strutturata con l’aiuto di tabelle: , e
Per molti anni la prassi è stata quella di utilizzare tabelle HTML non solo per la presentazione pratica di dati complessi, ma anche per la strutturazione dell’intero layout di una pagina web o di testi divisi in più colonne. Con l’ascesa del CSS questo ruolo aggiuntivo è passato sempre più in secondo piano, così che le tabelle oggigiorno vengono utilizzate esclusivamente nella loro funzione standard per la quale erano state pensate, ovvero l’analisi di dati. Perciò ogni tabella si forma di almeno questi tre componenti:
- <table>: lo start e l’end tag <table> definiscono l’inizio e la fine di una tabella HTML. Questo comando di per sé non porta a nulla, poiché il browser non è in grado di procedere se non gli vengono indicate il numero di righe e di colonne.
- <tr>: con l’elemento <tr>, che deriva dal termine inglese “table row”, aggiungerete una riga alla tabella. Per quanto riguarda il numero di righe, non c’è alcun limite massimo.
- <td>: una volta che avrete inserito anche le colonne avrete la struttura di base della vostra tabella. Il tag necessario per fare ciò è <td> (dall’inglese “table data”), che logicamente è sempre sottomesso al tag <tr>, poiché vi devono essere una o più righe di dati per far sì che questa/e possa/no essere divisa/e in più celle dati. Il contenuto dei campi dati va posizionato tra l’elemento d’apertura <td> e quello di chiusura </td>.
Trattandosi di una struttura un po’ complicata da capire, vi mostriamo come si crea una prima, facile tabella HTML, composta di una singola riga e due colonne:
<table>
<tr>
<td>first data field</td>
<td>second data field</td>
</tr>
</table>L’anteprima derivante dal codice HTML appena riportato fa sembrare che si sia verificato un errore e che la tabella non abbia funzionato come desiderato. Bisogna sì riconoscere che si sono definite due colonne e che si tratta di una tabella, ma la spiegazione sta nel fatto che di norma le celle delle tabelle HTML non hanno alcuna bordatura visiva. Per inserire un bordo all’estremità delle caselle si deve ampliare il tag <table> con l’attributo border e con il valore 1:
<table border="1">
<tr>
<td>first data field</td>
<td>second data field</td>
</tr>
</table>Riaprendo ora il documento HTML nel vostro browser di utilizzo, vedrete il layout della tabella, esattamente come siete soliti vederlo navigando.
Consiglio: HTML5 non supporta più l’attributo border, rendendo quindi la bordatura delle celle un compito spettante al CSS.
L’HTML offre d’altronde anche la possibilità, di evidenziare titoli per colonna. Per fare questo è necessario adottare il tag <thread> nella colonna in questione e sostituire il marcaggio <td> delle singole celle dati, con il tag <th>. Una tabella esemplificativa con quattro righe così come tre colonne, inclusiva di titoli, può essere realizzata grazie al seguente codice HTML:
<table border="1">
<thead>
<tr>
<th>Column heading 1</th>
<th>Column heading 2</th>
<th>Column heading 3</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
L’impalcatura HTML di base: così appare la struttura di una pagina web
In questa sezione del nostro tutorial HTML trattiamo la struttura generale di una pagina web. Infatti i documenti HTML non contengono solo testi, link e altri contenuti collegati come foto o video, ma anche le già citate meta informazioni, le quali appunto informano il browser, ma anche i crawler dei motori di ricerca, su come vadano lette le pagine. Se un utente visita un sito web, alcuni di questi dati aggiuntivi non sono affatto visibili, altri solo nella barra del titolo della finestra del browser, nella tab, nella cronologia o come titolo nelle immissioni dei motori di ricerca.
Il codice di base di una pagina HTML, ridotta alle componenti minime, appare così:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Here you can find all information about the HTML basic framework">
<title>Learn HTML: The basic framework</title>
</head>
<body>
</body>
</html>I dati si compongono di tre campi: DOCTYPE, head e body. Il primo componente, trattandosi del Document Type Defintion (definizione del tipo di documento), è l’unico che deve stare prima del tag <html>, all’interno del quale vanno comunicati gli utilizzi interpretativi, lo standard di riferimento utilizzato ad esempio durante la produzione del documento; che in questo caso sarà HTML5. Questo tipo di documento è riconosciuto da ogni browser; inoltre permette sia l’utilizzo dell’attuale HTML5 come anche di codici HTML più vecchi, per questo motivo dovrebbe essere utilizzato di norma ed in modo particolare durante lo studio del linguaggio HTML.
Nel campo seguente, ovvero <head>, riportate i dati di intestazione del vostro file HTML. Di questi fanno parte ad esempio la codifica dei caratteri (meta charset), che il browser deve utilizzare, la meta description (meta name = “description”) rilevante per i motori di ricerca o il titolo del sito web (title), che apparirà nell’intestazione del browser. Inoltre potete aggiungere molti altri meta dati, come le informazioni aggiunte nel nostro esempio, che sono sì opzionali, ma grazie alle quali è possibile favorire l’ottenimento di una buona valutazione nei motori di ricerca.
Invece i dati <title> sono un’eccezione, rappresentando l’unico elemento obbligatorio di una pagina HTML. Nella testata andrete tra l’altro ad aggiungere anche il richiamo al vostro file CSS, con il quale progettate il design della vostra pagina web. Nella sezione <body> è contenuto tutto ciò che alla fine verrà visualizzato nel browser dell’utente.
Consiglio: i tag per la struttura HTML di base sono opzionali e possono, perciò, essere tralasciati da un punto di vista teorico. In questo caso il browser creerà i tag <html>, <head> e <body> automaticamente e vi assegnerà i rispettivi elementi. Ma è buona prassi occuparsi personalmente di queste indicazioni. Inoltre, la classificazione facilita la leggibilità del documento, che, soprattutto per i novizi dell’HTML, è un vantaggio da non sottovalutare.
Integrare immagini, foto e grafiche sulle vostre pagine web
I testi sono indiscutibilmente la componente più importante delle pagine HTML generiche. Tuttavia gli stimoli visivi, sotto forma di immagini, foto e grafiche, hanno anch’essi un’influenza notevole sull’esperienza dell’utente e risultano perciò irrinunciabili per un’immissione sul web azzeccata. È comune l’utilizzo dei tre seguenti formati, supportati da tutti i browser:
- JPG: per foto e grafiche simili a foto con forti contrasti e una grande molteplicità di colori si è soliti utilizzare il formato JPG. Questo, infatti, può riprodurre fino a 16 milioni di colori e file molto compressi, tuttavia provocando una perdita di qualità.
- PNG: grafiche e loghi li potete salvare nel formato PNG, capace di riprodurre da 256 (PNG8) fino a 16,7 milioni di colori (PNG24). Diversamente dal formato JPG, il PNG comprime senza abbassare la qualità, per questo motivo i file sono però più pesanti.
- GIF: i file GIF possono riprodurre un massimo di 256 colori, ma sono tuttavia molto richiesti nello sviluppo web, poiché con essi si possono riprodurre con facilità piccole animazioni, elementi di navigazione o semplici grafiche.
Indipendentemente dal formato, l’immissione di un’immagine sulla pagina web desiderata avviene con il tag <img> (“image”, “immagine” in inglese). Inoltre è necessario specificare la posizione dell’immagine, poiché altrimenti il browser non sarà in grado di trovarlo e dunque di mostrare l’immagine. A questo scopo avrete bisogno dell’attributo src (“source”, “fonte” in inglese), così come del percorso del file immagine relativo. Il modo più semplice per farlo è la creazione di una sottocartella con il nome “immagini” all’interno della cartella del progetto del vostro sito web, ovvero quella dove avete salvato il vostro documento HTML, e salvarvi all’interno tutte le immagini che volete utilizzare.
Il nostro file di esempio per questo tutorial HTML porta il nome di grafica1.png e si trova nella cartella dal nome “immagini”. Il codice per l’integrazione facile di questa fantomatica grafica è il seguente:
<img src="images/graphic1.png" />Per le immagini esistono tuttavia anche ulteriori attributi, il cui utilizzo è raccomandabile per ovvi motivi. Tali attributi sono le specifiche rispetto alla larghezza (width) e all’altezza (height) dell’immagine. Grazie a questi valori il browser è in grado di posizionare un metacarattere della giusta grandezza durante il caricamento, così da veicolare la foto correttamente. Così il browser può rappresentare parallelamente ulteriori contenuti nella finestra, senza che il processo di caricamento dei file immagine debba necessariamente essere concluso, ma che, anzi, al contrario riduce il tempo di caricamento generale della pagina web.
Inoltre c’è anche l’attributo alt, con il quale potete definire un testo alternativo per l’immagine. Per svariati motivi è assolutamente necessario, nonché obbligatorio, che tale attributo faccia parte del vostro repertorio di fondamentali di HTML, poiché tramite esso si può:
- Rendere la pagina senza barriere, offrendo un’alternativa agli utenti con problemi di vista o in caso di problemi di caricamento del file immagine;
- Aiutare i crawler dei motori di ricerca nella categorizzazione dell’immagine, la quale sarà poi un valore aggiunto dal punto di vista contenutistico;
L’espansione del codice conseguente a questo attributo appare pressappoco così:
<img src="images/graphic1.png" width="960" height="274" alt="Learn HTML: this is how the embedded sample graphic 'click here' appears:" />Consiglio: i valori utilizzati in questo caso per la larghezza (960) e l’altezza (274) corrispondono alla grandezza originale della grafica usata come esempio. Il browser calcola di norma la grandezza automaticamente in pixel.
Collegare pagine e contenuti: il ruolo fondamentale dei collegamenti ipertestuali
Gli hyperlink, meglio conosciuti con il loro diminutivo “link”, sono il motivo per l’incomparabile successo del World Wide Web. Senza questa sorta di richiamo elettronico, che porta gli utenti da una pagina all’altra o ad iniziare un’azione come può essere ad esempio un download, il grado di collegamento, come quello offerto dal web, non sarebbe proprio possibile. Bisogna però differenziare tra tre diversi tipi di link:
- Link interni: i collegamenti interni servono alla strutturazione di un intero sito web e mostrano la via all’utente. Con i link interni è possibile dunque realizzare diverse strutture. Con una struttura lineare l’utente seguirà una sorta di percorso guidato pagina dopo pagina, mentre con una struttura ad albero potrà navigare da una pagina di partenza a diverse sottopagine. È inoltre possibile disporre collegamenti all’interno di una singola pagina, con il cui aiuto l’utente potrà saltare, ad esempio, dalla fine della pagina all’inizio.
- Link esterni: per link esterni si intende solitamente quei collegamenti, che portano ad un altro progetto web. Questo tipo di richiamo vi servirà per offrire un valore aggiunto ai vostri utenti, ovvero a consigliare un’altra offerta web. Dovreste tuttavia fare attenzione a non includere troppi link esterni su una stessa pagina assicurandovi che questi siano comunque affidabili. Altrimenti dovrete mettere in conto una valutazione negativa da parte dei motori di ricerca.
- Altri link: non tutti i link richiamano dei documenti HTML. In base allo scopo, cliccare su un determinato link può anche portare ad un download, aprire il client di posta elettronica o aprire un lettore PDF.
Link interni: collegare singole pagine del vostro sito web
Mentre è probabile che in un secondo momento godrete sempre più dei frutti del vostro studio del linguaggio HTML, per concepire e sviluppare una struttura complessa di link per la vostra presenza web, per quanto riguarda questo minicorso di HTML, è necessario innanzitutto partire dalla semplice messa in connessione di due pagine interne. Perché questo sia possibile è necessario che abbiate già creato un altro documento HTML oltre a test.html. Fate ben attenzione che a questo secondo documento dovrete dare un nome diverso, ad esempio paginadidestinazione.html, e che si trovi nella stessa directory della pagina di prova.
Per la produzione di un link necessitate del tag <a> (che sta per “anchor”, “ancora”), che tuttavia serve solo a fornire le informazioni riguardanti al collegamento. Per questo motivo non può stare da solo, ma ha sempre bisogno dell’attributo href (che sta per hyper reference), per specificare la pagina di destinazione del link. Il testo del link, che il browser di norma mostra evidenziato in blu, lo dovete scrivere tra lo start tag e l’end tag <a>. Aggiungete un link interno, all’interno del quale andrà inserita la seguente stringa:
<a href="targetpage.html">Jump to target page</a>Se avete inserito il link correttamente, cliccando su di esso dovrebbe aprirsi una pagina vuota, poiché vuoto è anche il documento paginadidestinazione.html. Per questo motivo il prossimo passaggio sarà quello di inserire all’interno di questo documento un altro collegamento, che, cliccandoci sopra, vi riporterà alla pagina di partenza.
<a href="test.html">Back to previous page</a>
Consiglio: nel caso in cui la pagina da linkare non dovesse trovarsi nella directory principale, indicate semplicemente il percorso corretto della sottocartella; ad esempio sottocartella/paginadidestinazione.html. Per tornare indietro dovreste utilizzare questo codice <a href=”../test.html”>.
Link esterni: come richiamare i contenuti di altre presenze web
Se volete aggiungere alle vostre pagine un link esterno, non avrete né bisogno di un tag diverso da quelle per i collegamenti interni, né dovrete sapere in quale directory è salvata la pagina da collegare. Il richiamo di contenuti esterni prevede unicamente l’indicazione dell’URL completo, questo conterrà automaticamente tutte le informazioni necessarie. Poiché il contenuto collegato non si trova sul proprio server web, non avrete in alcun modo possibilità di influenzare la funzionalità di un link esterno, per questo motivo dovreste tenerlo regolarmente sotto controllo.
È inoltre consigliabile impegnarsi nella formulazione di un link testuale espressivo, poiché il metacarattere “qui”, come capita spesso di trovare, è privo di informazione e non aiuta i visitatori a capire cosa si nasconda dietro al link. Provate un collegamento esterno con il seguente codice, che crea un collegamento con la nostra Digital Guide:
<p>HTML tutorial and numerous guides on the topic of websites, hosting, and much more at
<a href="https://www.ionos.com/digitalguide">IONOS Digital Guide</a>
</p>Con un normale link esterno allontanate il visitatore dal vostro stesso progetto web. Teoricamente basterebbe un click sul pulsante “indietro” per tornare alla vostra pagina, tuttavia questa opzione non viene spesso presa in considerazione. Nella pratica però c’è invece la possibilità di aprire la pagina collegata direttamente in una nuova e separata tab o finestra, senza che quindi la vostra pagina venga chiusa cliccando sul link: l’attributo target definisce dove deve venire aperto un documento collegato. Specificando il valore _blank si fa sì che il contenuto richiamato venga aperto in una nuova finestra, o meglio in una nuova tab. Il codice necessario è:
<a href="https://www.ionos.com/digitalguide" target="_blank">IONOS Digital Guide</a>Sul rettilineo d’arrivo: mettere la propria pagina HTML online
I siti d’esempio che vi abbiamo offerto in questo tutorial possono essere facilmente aperti nel vostro computer, ma se invece inoltrate gli URL delle pagine ad altre persone, ad esempio per mostrare i risultati ottenuti, queste non riusciranno a farci nulla. Il motivo di ciò è da trovarsi nel fatto che i documenti HTML, le immagini eventualmente collegate e quant’altro, sono salvate localmente nel vostro PC e perciò non possono essere consegnate al browser che ne sta facendo richiesta. Per far sì che il mondo possa prendere parte alla vostra creazione, dovete come prima cosa registrare il vostro progetto web in rete e occuparvi di trovare la struttura di hosting necessaria. Il primo passo è dunque quello di trovare un dominio adatto per la propria immissione sul web e registrarlo. Questa registrazione la potete effettuare con ogni provider; anche noi di IONOS vi offriamo l’opzione di registrare di un dominio. Il secondo passo è chiaramente quello di provvedere una base adatta per il vostro progetto web, il che sta a significare o impostare e configurare un proprio server o affittarne uno da un provider di web hosting. In quanto provider, anche quest’ultima opzione fa parte dell’offerta di IONOS: con noi non dovrete preoccuparvi della scelta, dell’impostazione o della manutenzione del software del server, bensì vi basterà scegliere semplicemente il pacchetto di spazio web desiderato, che vi garantisca lo spazio di archiviazione necessario per i documenti del vostro progetto. Come ultimo passaggio, per caricare le vostre pagine sullo spazio web affittato, avete solitamente bisogno di un programma FTP. Con l’aiuto di questo client potete scambiare i dati con l’FTP del provider. Alcune delle opzioni migliori le abbiamo riassunte per voi in questo articolo. Guide e dati dettagliati per l’accesso al server FTP li otterrete direttamente dal provider che avete scelto. Consiglio: durante il caricamento sul server FTP la struttura della directory deve rimanere inalterata. Vale dunque la pena di mettercisi d’impegno sin dall’inizio.
CSS e JavaScript: ecco perché è sempre necessario iniziare con HTML
Durante tutto questo tutorial abbiamo ribadito più volte che l’HTML crea le fondamenta per ogni pagina web, il compito del design nello sviluppo web moderno spetta invece ad altri linguaggi di programmazione: oggigiorno quali colori debbano avere i singoli elementi, quale layout stia alla base di una pagina, la dimensione e il font di determinati passaggi di un testo, di titoli, ed altri elementi testuali, tutte queste cose vengono definite esclusivamente con la lingua di foglio di stile Cascading Style Sheets (CSS).
La suddivisione rigorosa tra contenuto e design facilita l’analisi e la cura di progetti web di grandi dimensioni. Contestualmente all’apprendimento del linguaggio di programmazione HTML è assolutamente raccomandato in seguito di cimentarsi con il CSS, così da poter garantire alle pagine HTML create di proprio pugno anche l’aspetto desiderato.
Un altro componente molto apprezzato dei siti web moderni è JavaScript. Con l’aiuto del linguaggio di programmazione ampliate le vostre pagine HTML ad elementi dinamici, attraverso le quali i vostri visitatori potranno interagire con la pagina. Alcuni esempi di ciò sono gallerie immagine, menu di navigazione dinamici o il ricaricamento di dati esterni. Sia per JavaScript che per CSS trovate online numerose stringhe di codice già pronte, che potete integrare all’interno del vostro documento, senza dover necessariamente scrivere nel dato linguaggio di programmazione. Ma prima ancora dovrete tuttavia aver sviluppato una comprensione di base per entrambi i linguaggi web, così da poter implementare correttamente queste stringhe di codice e in modo da riuscire a ricercare la soluzione nel caso in cui insorgano dei problemi.