Gli elementi dell’(X)HTML

La struttura di una pagina web attraverso il linguaggio (X)HTML

Scopo di questa lezione è capire il funzionamento del linguaggio (X)HTML, per muovere i primi passi nella costruzione di una pagina web. In particolare andremo a esaminare i seguenti argomenti: • Il funzionamento delle marcature (X)HTML e l’inserimento degli elementi fondamentali di base. • La visualizzazione e l’interpretazione delle pagine Web da parte dei browser.

In questa lezione pertanto si analizzeranno solamente i principi e gli elementi fondamentali dell’(X)HTML, che verranno approfonditi nei moduli successivi del corso. Gli Editor di Testo Per creare una pagina web in (X)HTML, da visualizzare tramite browser, non è necessario avere un proprio sito web e nemmeno una connessione internet: quello di cui abbiamo bisogno è invece un editor di testo. Un editor di testo ci permetterà di creare facilmente una struttura (X)HTML che i browser potranno leggere e interpretare con facilità.

Trai gli editor di testo, che tutti conosciamo e già abbiamo sui nostri computer, troviamo ad esempio il “Blocco Note” (o Notepad) in ambito Windows e “Text Edit” in ambito Mac. Anche solo con questi strumenti base è possibile creare una prima pagina web di prova. Attenzione! Programmi come Microsoft Word, Wordpad, Open Office Writes non sono adatti come Editor (X)HTML dal momento che inseriscono automaticamente degli elementi di formattazione non compatibili con la marcatura HTML. Documenti realizzati con questi software difficilmente verranno letti e interpretati correttamente dai browser.

Un’avvertenza per chi utilizza TextEdit Per utilizzare TextEdit correttamente, come editor (X)HTML, ci sono alcuni passaggi in più da eseguire. Durante il salvataggio di un file (X)HTML il programma TextEdit inserisce automaticamente degli elementi di formattazione non compatibili con la marcatura (X)HTML. Questo perché Textedit, anche se indicato come possibile Editor (X)HTML, è principalmente un programma di tipologia word processor.

I passaggi da compiere sono i seguenti: Una volta avviato Textedit bisogna selezionare le "preferenze" dal menù. Nella sezione relativa al formato dei nuovi documenti bisogna attivare il pulsante "solo testo". Nella sezione di salvataggio bisogna togliere la spunta alla sezione ".txt per file di solo testo". Infine nella sezione "rich text" bisogna attivare l'opzione "ignora i comandi RTF nei documenti HTML".

Per vedere se le modifiche sono state definitivamente apportate in relazione alla creazione di ogni file, si deve realizzare un nuovo file html. Al momento del salvataggio, se le impostazioni sulle preferenze sono state modificate correttamente, dovrebbe comparire una finestra di dialogo in cui scegliere il nome del file per poi salvarlo. A questo punto è necessario digitare manualmente il nome del file seguito dall'estensione .html. Confermando il primo step di salvataggio potrebbe apparire un secondo box di dialogo in cui bisognerà confermare nuovamente la scelta di salvare un file con estensione .html.

Come usare un editor di testo come editor (X)HTML Per prima cosa bisogna avviare un editor di testo, un software già presente in ogni sistema operativo. Prendiamo in considerazione per il momento il programma Notepad (o Blocco Note) di Windows. Avviamo quindi il nostro editor e salviamo subito il nuovo documento assegnandogli un nome e specificando come estensione del file l’html. Il nostro nuovo documento .html salvato potrà avere pertanto il seguente nome: prova.html

Affinché sia possibile dare un aspetto e un funzionamento specifico agli elementi che inseriremo nel documento (testi, immagini, collegamenti ipertestuali, ecc.), sarà necessario usare la sintassi e il markup proprio del linguaggio (X)HTML. Il nostro obiettivo è infatti quello di creare una pagina con un dato aspetto e soprattutto funzionante: senza la sintassi dell’HTML i nostri testi saranno sempre tutti uguali, le immagini non potranno essere visualizzate e nessun link potrà mai funzionare. Inserire del semplice testo nel nuovo documento di Blocco Note (o TextEdit), salvandolo con un’estensione .html non costituisce un’operazione sufficiente a far visualizzare al browser quello che noi

vogliamo poiché non abbiamo ancora indicato la struttura del contenuto del nostro documento.

Il Markup dell’HTML

Cos’è il Markup Se vogliamo che la nostra pagina web abbia un certo aspetto e uno specifico funzionamento dobbiamo usare i cosiddetti tag dell’(X)HTML in cui racchiudere tutti gli elementi che vogliamo far apparire sulle pagine web. Un tag (X)HTML è strutturato nel modo seguente:

<tag>elemento racchiuso</tag>

Il tag specifica il ruolo e l’aspetto che l’elemento racchiuso dovrà avere nella visualizzazione tramite browser. I browser legge il tag e quindi può imprentare correttamente l’elemento da esso racchiuso. Ogni browser sa anche che tutti i tag, <tag> </tag> non devono essere visualizzati in finestra: solo ciò che essi contengono deve essere mostrato agli utenti. Pertanto esistono tag diversi a seconda dell’aspetto e delle funzioni che i vari elementi possono avere.

I Tag Principali della Struttura (X)HTML I contenuti di ogni documento (X)HTML sono racchiusi tra due tag principali: in questo modo il documento con tutti i suoi contenuti può essere interpretato correttamente come documento (X)HTML. Pertanto nella struttura di ogni pagina (X)HTML avremo un tag di apertura e uno di chiusura: tag di apertura - <html> tag di chiusura - </html>

Tra questi due tag è racchiusa l’intera struttura del documento (X)HTML. Ogni elemento, salvo alcune eccezioni, per avere un dato aspetto e una specifica funzione è sempre racchiuso da un tag di apertura e un tag di chiusura. Se il tag di chiusura è semplicemente una keyword dell’(X)HTML racchiusa tra parentesi uncinate, il tag di chiusura presenta davanti alla keyword uno slash: </tag di chiusura>

Le keyword sono elementi specifici della sintassi del linguaggio (X)HTML per determinare in che modo l’elemento racchiuso dovrà essere interpretato. Ora che abbiamo definito i tag dell’(X)HTML vediamo quali tipologie di keyword possiamo utilizzare per definire i nostri elementi. Alcune di queste keyword sono obbligatorie e il loro utilizzo è importante per determinare il corretto funzionamento delle pagine web.

Le Keyword di Base Oltre alla keyword html che con il suo tag di chiusura e di apertura racchiude tutti i contenuti di un documento (X)HTML, ogni documento, alla base di una pagina web, è generalmente diviso in due sezioni: • L’intestazione (head) del documento, che contiene le informazioni descrittive sul documento stesso, come il nome della pagina, l’autore, i contenuti principali, gli stili applicati, i file JavaScript collegati, ecc. I contenuti della sezione head non vengono visualizzati nella finestra del browser.

• Il corpo (body) del documento, che contiene il contenuto che compare nella finestra del browser. Queste due sezioni dovranno essere inserite tra i tag html di chiusura e apertura del documento. Pertanto nel nostro nuovo documento .html creato con Blocco Note o TextEdit possiamo inserire la seguente struttura: <html> <head></head> <body></body> </html>

Aggiungiamo un’altra keyword alla nostra struttura, rappresentata dal tag title che serve a racchiudere quello che sarà il nome della nostra pagina. <html> <head><title> Pagina di Prova </title></head> <body></body> </html> Attraverso il tag title non inseriamo il titolo della nostra pagina web, visualizzabile dagli utenti, ma il nome con cui il browser distinguerà quella data pagina all’interno dei vari documenti che compongono un

sito. Il title delle pagine serve anche ai motori di ricerca, come Google, per reperire le pagine proprio attraverso i loro contenuti. Pertanto il title di una pagina web dovrebbe sempre rispecchiare la funzione e i contenuti di tale pagina all’interno di un determinato sito. La sezione body: keyword di testo e intestazioni Le keyword di testo costituiscono dei marcatori semantici dell’(X)HTML che ci permettono di inserire elementi di testo dotati di una particolare formattazione. L’obiettivo del linguaggio (X)HTML è di fornire infatti i significati e la struttura ai contenuti: ogni tag di contenuto pertanto avrà uno

specifico aspetto di base, che potrà essere modificato attraverso gli stili CSS. Supponiamo di voler inserire un titolo per la nostra pagina, visibile agli utenti della rete. Per fare in modo che tale titolo appaia in evidenza possiamo utilizzare degli specifici tag dell’(X)HTML destinati proprio a definire la formattazione dei titoli. In questi tag la lettera h rappresenta un’abbreviazione per il termine heading, lett. “intestazione”. Il tag <h1> </h1> ci permette di formattare come titolo di primo livello il testo racchiuso.

<h1> Questo è il titolo principale della mia prima pagina web </h1> Si parla di primo livello perché ovviamente possiamo creare più livelli di importanza per la creazione dei titoli. Magari in una pagina vogliamo inserire un titolo, mettendolo bene in evidenza, e poi magari degli altri sottotitoli meno evidenti a una prima occhiata. L’(X)HTML ci mette a disposizione sei livelli di intestazioni, che mostrano titoli con un livello decrescente di grandezza dall’h1 all’h6: <h1>Titolo di livello 1</h1> <h2> Titolo di livello 2</h2> <h3> Titolo di livello 3</h3>

<h4> Titolo di livello 4</h4> <h5> Titolo di livello 5</h5> <h6> Titolo di livello 6</h6>

Elementi a livello di blocco ed elementi in linea Possiamo operare una distinzione in due categorie degli elementi (X)HTML e quindi di tutti i tag destinati a essere usati nella sezione body del nostro documento: • Elementi a livello di blocco • Elementi in linea

Gli elementi a livello di blocco (block-level elements) racchiudono dei contenuti che vengono mostrati uno dopo l’altro e non in una sequenza lineare. Ad esempio, se inserisco nel documento di prova due elementi di intestazione, h1 e h2, che rappresentano appunto degli elementi a livello di blocco, i titoli racchiusi al loro interno verranno mostrati uno sotto all’altro e non uno di seguito all’altro. <h1>Titolo principale</h1> <h2>Sottotitolo</h2>

Un altro elemento a livello di blocco, fondamentale in una struttura (X)HTML, è quello rappresentato dal tag <p> dove la p sta per Paragrafo. I tag p vengono utilizzati proprio per creare e organizzare diversi paragrafi di testo all’interno di una pagina web.

V X

<h1>Titolo principale</h1> <h2>Sottotitolo</h2> <p>Primo Paragrafo</p> <p>Secondo Paragrafo</p> I browser trattano gli elementi a livello di blocco come se si trovassero all’interno di riquadri e pertanto li visualizzano uno sotto l’altro.

Ogni elemento inizia su una nuova linea e viene automaticamente aggiunto dello spazio sopra e sotto l’intero elemento. Pertanto se noi creiamo una sintassi sbagliata, come quella riportata di seguito, inserendo un elemento a livello di blocco in un altro elemento a livello di blocco, il risultato mostrerà sempre due elementi separati, l’uno sotto l’altro. <h1>Titolo Principale</h1> <h2>Sottotitolo</h2> <p>Primo Paragrafo<p>Secondo Paragrafo<p></p>

Se invece osserviamo un testo racchiuso dal tag (em), vediamo che questo non si trova su una nuova linea ma in sequenza all’interno del testo di cui deve far parte: gli elementi in linea si trovano spesso inseriti all’interno degli elementi a livello di blocco. Questo perché l’elemento di enfasi (em) è un elemento in linea che rimane all’interno del corpo del testo di pertinenza.

Questo tag serve a racchiudere quelle parti di testo che vogliamo far risaltare in corsivo. <h1>Titolo Principale</h1> <h2>Sottotitolo con una parte <em> enfatizzata</em></h2>

Lo stesso discorso vale per l’elemento in linea img che permette di inserire in un documento (X)HTML un’immagine a nostra scelta. L’immagine può essere inserita all’interno di un elemento a livello di blocco e comparire al suo interno. Ovviamente la sua visualizzazione dipenderà anche dalle sue dimensioni. <html> <head><title>Pagina di prova</title> </head> <body> <h1>titolo della pagina</h1>

<p>un paragrafo<img src="../blue_rose.gif" alt="una rosa blu" /></p> </body> </html> Nel linguaggio di marcatura (X)HTML la differenziazione tra elementi a livello di blocco ed elementi in linea è importante, dal momento che determina quali altri elementi potranno essere contenuti in essi. Inoltre, come avremo modo di vedere nel prosieguo del corso, gli elementi a livello di blocco e in linea sono trattati diversamente nell’applicazione dei file CSS.

Principali Elementi a Livello di Blocco

Principali Elementi in Linea

h1-h6 img p em div span ol a ul br dl i table b address object hr button blockquote input

pre label footer select audio textarea video tt

Stili predefiniti di Visualizzazione (Default styles) Finora abbiamo indicato come il linguaggio (X)HTML controlli la struttura di un documento e non il suo aspetto: in realtà però abbiamo visto che i vari elementi vengono visualizzati con un aspetto diverso, in base alla loro tipologia.

Ad esempio nella nostra visualizzazione tramite browser vediamo come appaia una gerarchia visiva tra la titolatura di primo livello e quella di secondo livello, che ha decisamente delle dimensioni inferiori. Come fa il browser a determinare e a visualizzare tale differenza? Come fa a capire come i tag h1 e h2 devono apparire? E i paragrafi? Per rendere in un certo modo l’aspetto dei tag i browser usano dei fogli di stile integrati. Tutti i browser hanno già i loro fogli di stile prestabiliti che descrivono la resa standard di tutti gli elementi (X)HTML. Tale resa prestabilita è simile in tutti i browser, anche se possono esserci alcune differenziazioni, determinate proprio dal tipo di browser usato dagli utenti.

Il funzionamento degli elementi vuoti e degli attributi Finora abbiamo considerato la marcatura soprattutto in connessione agli elementi di testo delle pagine web. Tuttavia alcuni elementi non contengono del testo, dal momento che vengono usati per fornire delle indicazioni sulla rappresentazione di determinati elementi. Tali elementi sono definiti vuoti. L’elemento in linea immagine (img) rientra in questa categoria. Quest’ultimo comanda al browser di prendere un determinato file grafico da un server e di inserirlo in una sequenza di testo, in un punto preciso.

Quando un sito è online i contenuti che ne fanno parte si trovano su un server che deve pertanto fornire l’immagine richiesta, al momento del caricamento della pagina. Il tag immagine di base non ha un contenuto e non ha un tag di chiusura: <img quale immagine? /> Per specificare quale immagine è legata all’elemento vuoto img bisogna utilizzare un attributo (X)HTML. L’attributo non è un elemento autonomo ma funziona solo se inserito all’interno di un tag (X)HTML.

L’attributo src (abbreviazione per source) serve a indicare quale immagine il server dovrà fornire nella visualizzazione di una data pagina. <img src="quale immagine?" /> L’attributo src fornisce in questo modo la posizione dell’immagine attraverso un URL: ovviamente sarà indispensabile specificare l’URL esatto affinché l’immagine possa essere visualizzata. <img src="http://www.nomesito.it/images/foto1.jpg" />

La sintassi chiave per l’utilizzo degli attributi è pertanto la seguente: <elemento nome dell’attributo="valore"> Nell’utilizzo degli attributi è importante ricordare le seguenti indicazioni: • Gli attributi si mettono dopo il nome dell’elemento solamente con una tag di apertura (non hanno un tag di chiusura). • A un singolo elemento possono essere associati diversi attributi, separati con gli spazi nel tag di apertura. Il loro ordinamento non è importante. • Gli attributi hanno dei valori che seguono i segni dell’uguale.

• Il valore di un attributo può essere rappresentato da un numero, una parola, una stringa di testo o l’URL. • Bisogna inserire il valore sempre all’interno delle doppie virgolette. Sebbene le doppie virgolette non siano richieste per tutti i valori presenti in HTML, in XHTML sono invece sempre necessarie. • Alcuni attributi, come src e alt, sono richiesti per l’inserimento di elementi img. L’attributo src fornisce il nome del file di immagine da inserire mentre alt fornisce il testo che deve essere visualizzato insieme all’immagine se questa non è disponibile. Es. <img src="macchina.jpg" alt="modello di macchina Lamborghini" />

• I nomi degli attributi disponibili sono già definiti nelle specifiche del linguaggio (X)HTML. Non possono essere creati autonomamente nuovi attributi. Di seguito sono elencati i principali attributi dell’(X)HTML: src, alt, href, target, id, class. Nel prosieguo del corso analizzeremo di tutti il ruolo specifico. Oltre all’elemento img abbiamo altri elementi vuoti come ad esempio: le interruzioni di riga (br), le linee orizzontali (hr) e altri elementi che forniscono informazioni su un documento ma non toccano il contenuto visualizzato.

E’ importante ricordare che la sintassi per gli elementi vuoti è leggermente differente tra l’HTML e l’XHTML. In HTML, gli elementi vuoti non usano alcun tag o segno di chiusura ma sono indicati da un singolo tag di apertura, come ad esempio <br>, inserito nel testo dove si vuole far comparire una linea di interruzione. <p>un paragrafo<br>di contenuto</p> In XHTML tutti gli elementi, compresi quelli vuoti, devono sempre essere “chiusi” tramite uno specifico tag o un segno di chiusura.

In particolare poi gli elementi vuoti vengono chiusi o terminati aggiungendo uno slash preceduto da uno spazio prima della parentesi di chiusura. <p>un paragrafo<br />di contenuto</p>

Ulteriori elementi per la marcatura del testo Ora che abbiamo analizzato i principi della marcatura vediamo quali sono i principali tag che ci permettono di diversificare il testo a seconda delle nostre esigenze. Abbiamo già visto i tag di intestazione e i tag paragrafo, ma ne esistono molti altri utili a formattare i testi delle nostre pagine web.

Nei passaggi successivi verranno presentati i principali elementi, a livello di blocco e in linea, per descrivere in maniera accurata il contenuto testuale della nostra pagina. Elementi a livello di blocco Le seguenti marcature sono fondamentali per conferire diversi livelli di importanza al nostro testo: • p – paragrafi • h1, h2, h3, h4, h5, h6 – titoli • blockquote – riferimenti estesi • pre – testo preformattato

• address – indirizzi ed elementi di contatto • li, ul, ol, dl, dt, dd – liste Paragrafi

<p>…</p> I paragrafi indicati dall’inserimento delle tag seguenti possono contenere testo, immagini e altri elementi in linea ma non possono contenere altri elementi di blocco.

Titoli <h1>…</h1> Come già sappiamo esistono finora sei elementi (X)HTML (da h1 a h6) per differenziare le titolature presenti in una pagina web e stabilirne la gerarchia. Citazioni

<blockquote>…</blockquote> Se la pagina web presenta dei riferimenti estesi, come ad esempio una lunga citazione ripresa da un’altra fonte, che va a occupare più di quattro linee del documento, bisogna riportarla tra i tag blockquote indicati.

Testi preformattati <pre>…</pre> I browser ignorano gli spazi bianchi e gli invii presenti nel documento di origine. Se ad esempio nel nostro editor (X)HTML riportiamo due paragrafi su una stessa linea, il browser continuerà sempre a considerarli come elementi a livello di blocco e li visualizzerà uno sotto l’altro. In (X)HTML scrivere così … <h1>titolo della pagina</h1> <p>un paragrafo di contenuto</p> <p>un secondo paragrafo di contenuto</p>

è uguale a scrivere così: <h1>titolo della pagina</h1> <p>un paragrafo di contenuto</p><p>un secondo paragrafo di contenuto</p> In alcuni casi tuttavia l’inserimento di spazi bianchi è importante per conferire un maggiore significato e rilevanza al testo. A questo scopo abbiamo l’elemento di testo preformattato che serve a rendere nella visualizzazione finale alcune parti di testo esattamente come le abbiamo formattate in origine.

Il testo preformattato viene visualizzato in maniera standard con un font particolare in cui tutti i caratteri sono della stessa ampiezza, come ad esempio nel Courier. Elementi di Contatto

<address>…</address> L’elemento address serve per fornire le informazioni di contatto per l’autore o gli autori del documento, indicando nomi di persona, siti web ecc.. Questo elemento viene generalmente posizionato all’inizio o alla fine del documento oppure a racchiudere un’ampia parte di questo. L’elemento indirizzo non viene utilizzato per tutti i tipi di indirizzo.

Ad esempio non viene impiegato per identificare dei recapiti fisici, come ad esempio una città, un numero di telefono o una via. Il contenuto dell’elemento a livello di blocco address avrà una formattazione diversa in grado di far risaltare il contenuto Liste

In alcuni casi è necessario particolareggiare le informazioni presenti piuttosto che dividerle in paragrafi. Pertanto è possibile inserire nella nostra struttura delle liste. E’ possibile scegliere diversi tipi di liste a seconda delle necessità: Liste non ordinate: raggruppano oggetti e contenuti del testo senza

un ordine particolare. Liste ordinate: raggruppano gli oggetti in una precisa sequenza.

Liste di definizione: raggruppano specifici termini e definizioni. Tutti gli elementi relativi alle liste sono elementi a livello di blocco. Pertanto questi inizieranno sempre su una nuova linea. Liste non ordinate

<ul>…</ul> Le liste senza ordine, identificate attraverso la marcatura riportata che racchiude ogni oggetto della lista, compaiono per convenzione nel browser con un simbolo a forma di “proiettile”, posto accanto ad ogni elemento della lista. Questa visualizzazione può sempre essere modificata successivamente con un foglio di stile.

Il tag di apertura viene posto appena prima del primo oggetto della lista mentre quello di chiusura subito dopo l’ultimo. Inoltre ogni oggetto della lista deve essere etichettato come un normale oggetto di lista (<li>…</li>). Esempio <ul> <li>primo elemento della lista</li> <li>secondo elemento della lista</li> <li>terzo elemento della lista</li> </ul>

Il tag ul apre e chiude la lista: gli elementi rappresentano i singoli componenti della lista. Nell’esempio riportato è stata utilizzata una sintassi XHTML con un tag di chiusura per ogni elemento di lista. Liste ordinate

<ol>…</ol> Le liste ordinate servono per raccogliere gli oggetti secondo un ordine particolare. Questa tipologia di lista viene utilizzata ad esempio per raggruppare le varie fasi di un processo che devono essere riportate ed eseguite proprio in un ordine specifico. Per quanto riguarda la marcatura, queste liste funzionano come le liste senza ordine. Al posto dei “proiettili” o punti elenco, nella

visualizzazione del browser gli oggetti di questa lista vengono affiancati automaticamente da un numero. Se desideriamo che la nostra lista inizi con un numero preciso, diverso da 1, dobbiamo utilizzare l’attributo start (es. start="6") all’interno dell’elemento ol, come nell’esempio seguente: <ol start="6"> <li>primo elemento della lista</li> <li>secondo elemento della lista</li> <li>terzo elemento della lista</li> </ol>

Liste di definizione <dl>…</dl> Queste liste sono utilizzate per raggruppare dei termini con la loro definizione. L’intera lista viene etichettata con i tag riportati sopra. Il contenuto di questa lista viene etichettato secondo il numero dei termini contenuti e secondo la loro definizione, rispettivamente con i tag <dt>…</dt> e <dd>...</dd> Esempio: <dl> <dt>Ornitorinco</dt> <dd>L’ornitorinco è un mammifero semi-acquatico che vive nella parte orientale dell’Australia</dd>

<dt>Kiwi</dt> <dd>I Kiwi sono degli uccelli inadatti al volo, endemici della Nuova Zelanda</dd> </dl>

L’elemento dl può racchiudere solamente gli elementi dt e dl.

Non è possibile inserire elementi a livello di blocco (come titoli o paragrafi) nei termini etichettati come dt ma le definizioni marcate con dt possono racchiudere ogni tipo di contenuto in linea. Elementi di testo in linea Di seguito si riporta la sintassi per la gestione dell’elemento in linea <br>. <br> - sintassi propria dell’HTML <br /> sintassi propria dell’XHTML

Tutti gli elementi visti finora iniziano automaticamente su nuove linee. Tuttavia a volte è necessario aggiungere un’interruzione di riga per andare a capo in un punto preciso del nostro testo. L’elemento br è un elemento vuoto dal momento che non presenta alcun contenuto. Es. <p> Questo è un paragrafo con <br />un’interruzione di riga </p>

Molti degli elementi di testo (X)HTML sono elementi in linea. Questo tipologia di elementi può essere suddivisa in due principali categorie: • Elementi semantici • Elementi di presentazione Gli elementi semantici evidenziano il “significato” del testo (acronimi, evidenziazioni di alcune parti ecc.) mentre gli elementi di presentazione forniscono una descrizione dello stile del testo (sottolineature, tipologia dei font, ecc.)

Nel web design odierno gli elementi di presentazione vengono usati raramente dal momento che le informazioni sullo stile di una pagina web sono considerate separatamente dalle marcature. Tuttavia è opportuno conoscere comunque tali elementi dal momento che ogni web designer può incontrarli nell’aggiornamento di siti web realizzati negli anni passati. • Elementi in linea semantici

Questi elementi descrivono il significato del testo racchiuso tra le marcature. Il loro aspetto dipenderà poi dal foglio di stile applicato. Di seguito si riportano in elenco i principali elementi in linea semantici: em – testo evidenziato in corsivo

strong – testo evidenziato in maniera più decisa rispetto all’elemento em. q – breve citazione in linea cite – citazione, riferimento a un altro documento abbr – serve ad inserire un abbreviazione acronym – serve ad inserire una sigla (questo tag non è più supportato nella specifiche dell’HTML5: al posto dell’acronym si consiglia l’utilizzo del tag abbr). del – testo cancellato. Indica una modifica apportata al documento. ins – Indica l’inserimento di una parte di testo all’interno di un documento.

<em>Testo enfatizzato</em><br /> <strong>Testo rafforzato</strong><br /> <abbr>HTML</abbr><br /> <ins>testo aggiunto</ins><br /> <del>testo cancellato</del><br />

• Elementi di presentazione in linea Questi elementi forniscono le istruzioni per la composizione del testo racchiuso tra le specifiche etichettature. La seguente lista riporta alcuni degli elementi più utilizzati di questa categoria: big – aumenta leggermente le dimensioni del testo racchiuso small – diminuisce le dimensioni del testo racchiuso center – allinea centralmente il testo racchiuso font – specifica la dimensione, il colore e la tipologia del font. sub – mette in pedice il testo racchiuso sup – mette in apice il testo racchiuso

Elementi generici (div e span) <div>… </div> e <span> … </span> Si tratta di elementi generici che possono essere personalizzati per descrivere uno specifico contenuto a seconda delle esigenze. Sono utilizzati entrambi come elementi “contenitori” per l’organizzazione dei vari contenuti presenti in una pagina web. L’elemento div (abbreviazione per “divisione”) viene usato per indicare un elemento generico a livello di blocco, utilizzato per costruire il layout delle pagine web.

L’elemento span viene invece utilizzato per indicare un elemento in linea generico e pertanto non introduce interruzioni di riga. Dal momento che gli elementi span sono elementi in linea possono contenere solo del testo o altri elementi in linea, al contrario dei div che invece possono contenere anche elementi a livello di blocco. Questi due elementi generici sono utilizzati come strumenti primari nella realizzazione delle pagine web, dal momento che permettono di descrivere accuratamente i contenuti e offrono una moltitudine di possibilità per aggiungere regole di stile, come avremo modo di vedere nel prosieguo del corso.

Elementi di identificazione Gli elementi di identificazione hanno funzioni specifiche e vengono spesso utilizzati come attributi per qualificare gli elementi generici che abbiamo appena visto. Pertanto la sintassi per il loro utilizzo è quella che abbiamo già visto per l’utilizzo degli attributi. L’attributo id L’identificatore id è utilizzato per indicare un unico elemento all’interno di un documento (X)HTML. Il valore dell’id deve pertanto essere usato una sola volta nel documento. Tale elemento è utile per assegnare un nome unico ad un dato contenuto della nostra pagina.

L’id viene spesso utilizzato per identificare le sezioni principali di contenuto di una pagina come nell’esempio seguente: <div id="main"> (elementi principali del contenuto) </div> <div id="menu"> (elenco di collegamenti ipertestuali) </div> Non possiamo inserire nessun altro id con valore “main”

Non possiamo quindi avere, ad esempio, la seguente situazione. <div id="main"> Contenuto del div </div> <div id="main"> Contenuto del div </div>

L’attributo class L’attributo class viene utilizzato per raggruppare elementi simili tra loro. Al contrario dell’attributo id, diversi elementi possono condividere uno stesso valore di class. Rendendo diversi elementi parte di una stessa classe, si può applicare a tutti uno stesso stile, scrivendo una sola regola. Stessi elementi possono inoltre avere un attributo class e un id ed è possibile raggrupparli allo stesso tempo in più di una classe. <div id="header" class="rosso"> Contenuto del div </div> <div id="footer" class="rosso">

Contenuto del div </div>

Aggiungere collegamenti ipertestuali (link) In questa sezione esamineremo i modi per inserire nella nostra pagina web quei collegamenti (link) ad altre pagine del nostro sito o ad altri siti web. Chi naviga in rete conosce senz’altro quelle parti di testo sottolineate che indicano dove cliccare. Uno specifico elemento ci permette di creare questo tipo di collegamento: l’ancora (a).

L’elemento ancora <a>…</a> La parte di testo racchiusa da queste marcature diventa un collegamento ipertestuale. L’elemento è un elemento vuoto, pertanto affinchè possa funzionare dovrà essere definito attraverso degli attributi. • L’attributo href (hypertext reference)

Serve a comunicare al browser la direzione del link, dove quindi il collegamento deve reindirizzare l’utente. Questo attributo pertanto fornisce un URL, che deve sempre apparire tra doppie virgolette.

Abbiamo due modi per specificare un URL: URL assoluto (Absolute URL) Fornisce l’URL completo del documento, comprensivo del protocollo (http://), del dominio e del percorso. Questo tipo di URL va utilizzato per indicare un documento nel web, fuori dal sito in cui si trova la pagina con il collegamento. URL relativo (Relative URL) Descrive solamente il percorso, relativo al documento corrente, per raggiungere una data pagina. Non necessita il protocollo o il nome del dominio ma solamente il percorso.

Questo tipo di URL può essere utilizzato quando si crea un link per un altro documento presente nel proprio sito, su uno stesso server.

Creare dei Collegamenti Ipertestuali Creare un collegamento ad una pagina in rete Per creare un collegamento ad una specifica pagina vista in rete è necessario creare un link esterno, in grado di condurre l’utente ad una pagina fuori dal proprio sito o server. Gli elementi da utilizzare per creare questo collegamento sono sempre l’ancora (a) e l’attributo href, contenente l’URL completo della pagina di cui abbiamo bisogno.

L’elemento e l’attributo in questione andranno trattati esattamente come abbiamo visto finora, con la sintassi che già conosciamo. <a href=http://www.altrosito.it/paginacorsi> Link cliccabile </a> Creare un collegamento all’interno del proprio sito Le pagine all’interno di uno stesso sito sono ovviamente sempre collegate tra loro. Pertanto l’utilizzo di questa tipologia di link è senz’altro importante. In questo caso bisogna utilizzare un URL relativo, senza l’inserimento del protocollo e del dominio. Senza il protocollo il browser cercherà la pagina nello stesso server mentre il percorso gli dirà dove cercare esattamente il file.

<a href=categorie/paginacorsi.html> Link cliccabile </a> Creare collegamenti all’interno di una stessa directory Per creare un collegamento ad un file in una stessa directory bisognerà indicarne solamente il nome. Quando l’URL fornisce solo il nome di un file, il browser compie la sua ricerca all’interno di una stessa directory. <a href="paginacorsi.html"> Link cliccabile </a>

All’interno di un sito web composto da diverse cartelle di contenuto è perfettamente plausibile voler creare un collegamento tra due pagine inserite in una stessa directory. Creare collegamenti ad una directory inferiore Se il file a cui punta il collegamento è nello stesso sito ma in una directory diversa bisognerà fornire al browser il nome di percorso presente nell’URL. Diverse directory vengono indicate separate attraverso gli slash (/). Pertanto la nostra ancora (a) comunicherà al browser di cercare nella stessa directory un’altra directory, di cui attraverso l’attributo href abbiamo indicato il nome e, all’interno di questa, uno specifico file.

<a href="directory_inferiore/nomefile.html"> clicca qui</a> Creare collegamenti ad una directory superiore Diversa sarà la sintassi per creare un collegamento diretto ad un file in un directory superiore. In questo caso il percorso che bisogna indicare è preceduto da un doppio punto e da uno slash (../). In questo modo il browser cercherà il file specifico in una directory di livello superiore. Es. <a href="../index.html">clicca qui</a>

Nel caso si debba salire di due directory anziché di una, l’elemento ../ dovrà essere ripetuto una seconda volta. Aprire i collegamenti in una nuova finestra E’ possibile fare in modo che i collegamenti realizzati vengano aperti in una nuova finestra del browser. In questo modo i visitatori di una pagina web possono vedere il contenuto del link e visualizzare allo stesso tempo i contenuti di partenza. In questo caso si userà l’attributo target insieme all’elemento ancora (a) per indicare al browser di aprire una nuova scheda o finestra per la visualizzazione del link. Il valore del target va in questo caso impostato come _blank.

Es. <a href="documents/index.html" target="_blank">clicca qui</a> Creare un link ad una casella di posta (link mailto) In questo caso è possibile creare un link diretto ad un indirizzo di posta specifico. Cliccando su questo link il browser aprirà automaticamente un nuovo messaggio di posta diretto all’indirizzo prestabilito attraverso il nostro collegamento. Es. <a href=mailto:giorgio.rossi@yahoo.it">Clicca qui per inviarmi una email</a>

Gestire l’URL per l’inserimento delle immagini Le informazioni analizzate finora in relazione all’URL valgono anche per stabilire dei collegamenti a specifici file grafici. L’attributo src per le immagini funziona come l’attributo href. Dal momento che è più comune utilizzare delle immagini provenienti dallo stesso server, l’attributo src viene spesso associato ad un URL relativo. Relativo rispetto a cosa? Ovviamente sempre rispetto alla posizione del file che contiene l’immagine e alla posizione dell’immagine stessa all’interno dei contenuti del sito. Es. <img src="images/rosa.gif" alt="una rosa" />

L’URL riportato comunica al browser di cercare nella directory corrente la sotto-directory images, in cui trovare l’immagine specifica (ad es. rosa.gif).

L’attributo alt delle immagini Ogni elemento img dovrebbe contenere anche un attributo alt per presentare una breve descrizione dell’immagine nel caso in cui questa non possa essere visualizzata. <img src="images/rosa.jpg" alt="una rosa rossa" />

Fornire dimensioni alle immagini Per definire le dimensioni di un’immagine possiamo usare i seguenti attributi (X)HTML: width="numero di pixel" height="numero di pixel" Questi attributi comunicano al browser le dimensioni della nostra immagine in numeri di pixel. Es. <img src="images/rosa.jpg" alt="una rosa rossa" width="300" height="200" />

Questi due attributi non servono a indicare le dimensioni di partenza della nostra immagine ma quelle che vogliamo che essa assuma nella visualizzazione tramite browser. Supponiamo di avere un’immagine con le seguenti dimensioni:300x200. Magari vogliamo che nella nostra pagina l’immagine occupi molto meno spazio: per questo motivo possiamo usare gli attributi width e height, per comunicare al browser di rimpicciolire (o ingrandire) l’immagine.

Attenzione! Ovviamente nel comunicare le nuove dimensioni dovremo stare attenti alle proporzioni originali dell’immagine, per evitarne la deformazione durante la visualizzazione.

Diverse tipologie di immagini Le immagini compaiono nelle pagine web in due modi: come immagini in linea con il testo, oppure come sfondo di elementi o di intere pagine (X)HTML. Le immagini sullo sfondo possono essere aggiunte e gestite attraverso i fogli di stile e pertanto verranno trattate nell’unità successiva. Le immagini in linea possono invece essere inserite attraverso l’utilizzo dell’elemento (X)HTML img con diverse modalità: • Come immagini semplici o statiche.

• Come immagini link. • Come immagini-mappa (imagemap) – un’immagine singola che contiene molteplici link diretti ad altri documenti. Vedremo come realizzare questi elementi grafici nell’unità didattica dedicata all’utilizzo di Photoshop. L’elemento img comunica al browser il punto dove inserire l’immagine, sempre in linea con il testo. L’elemento img viene considerato anche come un “elemento di rimpiazzo” dal momento che viene sostituito da un file esterno quando la pagina viene visualizzata. Questo fatto lo rende un elemento differente dagli elementi di testo analizzati, che presentano il loro contenuto nella fonte (X)HTML.

Per determinare un allineamento specifico dell’immagine all’interno di una pagina andranno utilizzati sempre i fogli di stile. Le immagini inserite senza l’aggiunta di file CSS verranno sempre visualizzate dal browser con un allineamento standard, in linea con il testo.

FINE LEZIONE