HTML e CSS corso base Autore Sebastiano Maugeri

HTML e CSS corso base Autore: Sebastiano Maugeri

Internet • È la principale rete mondiale di computer ad accesso pubblico • Utilizza un protocollo di comunicazione denominato TCP/IP, indipendente da specifiche hardware e software proprietarie. • Il protocollo TCP/IP è diviso in cinque livelli (Applicazione, Trasporto, Rete, Collegamento e Fisico)

Indirizzi IP • Ad ogni computer collegato alla rete viene associato un indirizzo IP, una «targa» che identifica univocamente il computer sulla rete. • I vari livelli del protocollo TCP/IP permettono quindi lo scambio di informazioni tra i computer presenti sulla rete. • Il livello di applicazione permette, tra le altre cose, la consultazione delle pagine web gestendo le sessioni di lavoro tra il browser ed il server web.

Domini Internet e DNS • Gli indirizzi IP sono difficili da ricordare e identificano al più una sola macchina sulla rete. • Su una singola macchina possono essere presenti centinaia di siti web. • Per superare queste limitazioni è stato creato un meccanismo di traduzione che, partendo da un nome a dominio, restituisce l’indirizzo IP ad esso associato. • Questo meccanismo è denominato Domain Name System.

Livelli dei nomi a dominio • Prendiamo ad esempio il dominio: www. nomesito. it – www. nomesito. it è un dominio di terzo livello. – nomesito. it è un dominio di secondo livello. –. it è il dominio di primo livello • Di norma noi registriamo domini di secondo livello. • I domini possono essere geografici (. it, . us, etc. ) o globali (. com, . net, . org).

Client / Server • Client: computer o applicazione che richiede un determinato servizio. • Server: computer che offre uno o più servizi. Un programma di Posta Elettronica come Outlook è un client perché si collega ad un server di posta che gli permette di scaricare i messaggi ricevuti nella propria casella di posta. Alla stessa maniera un browser (Internet Explorer, Chrome, etc. ) è un client perché si collega ad un server web per scaricare delle pagine HTML.

Il protocollo http • Il protocollo http permette il trasferimento delle pagine html da un server web ad un client web (browser). • http = hyper text transfer protocol • È un protocollo stateless. Ad ogni richiesta del client corrisponde una risposta del server, ma il server non è in grado di mantenere lo stato tra una richiesta ed un’altra.

Il protocollo https • Il protocollo https permette il trasferimento delle pagine html da un server web ad un client (browser). • https: hyper text transfer protocol over SSL (Secure Socket Layer). Rispetto al protocollo http, tutte le informazioni che viaggiano sulla rete vengono trasmesse utilizzando un meccanismo di crittografia che impedisce la visualizzazione in chiaro delle informazioni trasmesse a computer che non siano il server ed il client.

Il protocollo ftp • Il protocollo ftp permette il trasferimento di file tra un computer client ed un server. • Il servizio ftp permette l’accesso al client previa autorizzazione (in alcuni casi l’accesso può essere anche anonimo). • Il trasferimento dei file può essere bidirezionale (dal client verso il server: upload, dal server verso il client: download). • E’ il meccanismo più utilizzato per il trasferimento delle pagine html su un server web.

I browser più utilizzati I browser sono i client che permettono di richiedere le pagine HTML e di renderizzarle (mostrare la pagina sotto forma di ipertesto). I browser più comuni: • Firefox • Chrome • Internet Explorer • Opera • Safari Il primo browser, il protocollo http e il linguaggio html sono stati sviluppati da Tim Berners-Lee che è considerato il padre del world wide web.

Hyper Text Markup Language (HTML) • È il linguaggio utilizzato per la formattazione e l’impaginazione di documenti ipertestuali. • I documenti ipertestuali nel formato HTML disponibili nel world wide web (www) vengono denominati pagine web. • Il linguaggio ha subito negli anni notevoli cambiamenti che hanno aggiunto numerose funzionalità al linguaggio. La versione attuale del linguaggio è html 5.

Quali strumenti utilizzare? • Le pagine html sono documenti di testo in formato ascii. Per editarli è sufficiente un editor di testo come notepad. • Esistono dei software appositi che permettono di editare le pagine html utilizzando un editor WYSIWYG (quello che vedi è quello che ottieni). Il limite di questi strumenti è che spesso creano codice sporco difficile da utilizzare per lo sviluppo di applicazioni web. • Durante questo corso utilizzeremo un software denominato Notepad++ • Per la visualizzazione delle pagine utilizzeremo il browser Chrome (Google).

La struttura di una pagina HTML • Doctype – Permette di specificare la versione del linguaggio HTML utilizzato nella pagina. • Header – Raggruppa tutti i tag che sono utili per definire come deve comportarsi la pagina, quale nome (title) deve avere la pagina, quali stili devono essere caricati, offrire informazioni aggiuntive per i motori di ricerca, etc. • Body – Raggruppa tutti i tag che riguardano la formattazione del documento.

Le pagine HTML Ogni pagina html deve essere memorizzata sotto forma di file di testo all’interno di una o più cartelle. Dato che dobbiamo sapere qual è la pagina iniziale da mostrare al visitatore quando accede al sito la prima volta (senza specificare il nome della pagina), è necessario definire un nome standard da utilizzare per riconoscere la «home page» . Di solito questa pagina si chiama index. htm, ma il nome può cambiare in funzione del server web su cui pubblicheremo le nostre pagine.

I tag HTML La sintassi di un tag HTML (o elemento HTML) è la seguente: <html> Un tag viene cioè identificato dal simbolo <, da una parola chiave (in questo caso html) e dal simbolo > Spesso i tag possono contenere altri tag al loro interno, in questo caso si deve utilizzare un tag di apertura e uno di chiusura. Ad esempio: <html> <body> </html> I tag di chiusura vengono identificati attraverso il prefisso / che precede il nome del tag. Alcuni tag non possono contenere altri tag al loro interno. In questi casi il tag di chiusura sparisce e si utilizza la sintassi seguente:

Gli attributi I tag possono contenere al loro interno degli attributi. Nel tag anchor l’attributo href specifica qual è la pagina a cui collegare il codice html presente all’interno dell’anchor: <a href="Esempio. htm">Esempio</a> • Esempio è il contenuto del tag anchor (si trova tra i tag di apertura e di chiusura del tag <a> • href è l’attributo del tag anchor che specifica quale nuova pagina aprire nel momento in cui si clicca su Esempio.

Testo ed immagini • Il linguaggio HTML è un linguaggio per la creazione di ipertesti. • Sappiamo che la formattazione di questi testi può essere definita attraverso l’uso di opportuni tag HTML, che possono contenere a loro volta degli attributi. • Iniziamo adesso a scoprire quali sono i tag più utilizzati per la formattazione del testo e delle immagini.

Intestazioni (h 1. . . h 6) • Un testo può essere organizzato su diversi livelli. • h 1 rappresenta il livello massimo di intestazione, h 6 il livello più basso. • Osserveremo che, by default, i browser mostrano i render dei sei livelli di intestazione in modo diverso. Il livello h 1 viene rappresentato con un testo di maggiore dimensione e, mano che si scende più in basso, la dimensione del testo diminuisce. Il modo con cui questi elementi vengono renderizzati può essere modificato attraverso i CSS. • È importante osservare che i motori di ricerca danno una diversa importanza ai contenuti presenti sui vari livelli di intestazione. Un testo presente su h 1 avrà un posizionamento più favorevole di un testo presente su h 6 o su un tag differente.

Paragrafi e nuova riga • Un testo può contenere diversi paragrafi. Il tag <p> permette di definire l’inizio e la fine di un paragrafo. <p>Questo è un paragrafo</p> <p>Questo è un altro paragrafo</p> • Per gestire eventuali ritorni a capo all’interno di un paragrafo è possibile utilizzare il tag <br />. <p>Questo è un paragrafo Questa è la seconda riga dello stesso paragrafo</p> Nel testo, il tag <br /> causerà un ritorno a capo subito prima della parola «Questa» .

Grassetto Per il grassetto è possibile utilizzare il tag <b>. Ad esempio: <b>Questo testo viene visualizzato in grassetto</b> Il tag <strong> permette di ottenere il medesimo effetto. <strong>Questo testo viene visualizzato in grassetto</strong> C’è però una differenza sostanziale tra i due tag. Il primo è un tag di stile, il secondo è un tag semantico. <strong> indica che il testo all’interno del tag è più importante rispetto al resto del testo.

Corsivo e sottolineato Per il corsivo è possibile utilizzare il tag <i> o il tag <em>. <i>Questo testo viene visualizzato in corsivo</i> Come per il grassetto, il tag <i> è un tag di stile mentre <em> è un tag semantico. <em> corrisponde a «emphasised» (enfatizzato). Il sottolineato si può ottenere utilizzando il tag <u>. Il testo contenuto all’interno dei tag di apertura e chiusura viene visualizzato con una sottolineatura.

Apici e pedici Apici: Questo testo viene visualizzato in ^apice Pedici: Questo testo viene visualizzato in _pedice <sup> sta per superscript element <sub> sta per subscript element

Tag di tipo block e di tipo inline Esistono due grandi tipologie di tag: • tag inline • tag block-level I tag inline sono tutti quelli che non interrompono il flusso di pagina. Tra quelli che abbiamo visto finora sono tag inline i tag <b>, <strong>, <i>, <em>, <u>. I tag block-level sono tutti quelli che interrompono il flusso della pagina. Tra quelli che abbiamo visto finora sono tag block i tag <h 1>. . <h 6>, <p>. Un tag inline può contenere solo altri tag inline. Tra i tag block l’unico tag che non può contenere altri tag block al suo interno è il tag <p>.

Il tag <div> • Il tag <div> è un generico tag di tipo block • Dal punto di vista semantico il tag <div> non ha alcun significato. • Il tag <div> può contenere altri tag di tipo block o inline, tra cui lo stesso tag <div>. • Vedremo in seguito che utilizzando gli stili si potrà cambiare il modo con cui questo tag viene renderizzato nel browser.

Il tag <span> • Il tag <span> è un generico tag di tipo inline • Come per il tag <div>, il tag <span> non ha alcun significato dal punto di vista semantico • Il tag <span> può contenere altri tag di tipo inline ma nessun tag di tipo block, tra cui lo stesso tag <span>. • Vedremo in seguito che utilizzando gli stili si potrà cambiare il modo con cui questo tag viene renderizzato nel browser.

Gli elenchi ordinati (1) Gli elenchi ordinati sono una serie progressiva ed ordinata di elementi. Ogni elemento ha come prefisso un numero o una lettera. Per creare un elenco ordinato è necessario l’uso contestuale di due diversi tag: un tag <ol> (ordered list) che identifica l’inizio della serie di elementi, una serie di tag <li> (list item) che identificano l’inizio e la fine del singolo elemento. Esempio: <ol> <li>Primo elemento</li> <li>Secondo elemento</li> <li>Terzo elemento</li> </ol> Il risultato ottenuto sarà quindi: 1. 2. 3. Primo elemento Secondo elemento Terzo elemento

Gli elenchi ordinati (2) Per impostazione predefinita gli elenchi ordinati utilizzano come stile di enumerazione i numeri, ma è possibile modificare questo comportamento attraverso l’uso dell’attributo type. Ad esempio utilizzando: <ol type="a"> verrà visualizzato un elenco ordinato mediante lettere dell’alfabeto minuscolo. Valore dell’attributo type Risultato type="1" Numeri arabi (predefinito) type="a" Alfabeto minuscolo type="A" Alfabeto maiuscolo type="i" Numeri romani minuscoli type="I" Numeri romani maiuscoli

Gli elenchi non ordinati (1) Gli elenchi non ordinati vengono identificati dal tag <ul> (unordered list). Gli elementi dell’elenco sono individuati, come nel caso delle liste ordinate, da tag <li> (list item). Esempio: <ul> <li>Primo elemento</li> <li>Secondo elemento</li> <li>Terzo elemento</li> </ul> Il risultato ottenuto sarà quindi: • • • Primo elemento Secondo elemento Terzo elemento

Gli elenchi non ordinati (2) Per impostazione predefinita gli elenchi non ordinati utilizzano come stile di enumerazione un pallino, ma è possibile modificare questo comportamento attraverso l’uso dell’attributo type. Valore dell’attributo type Risultato type="disc" Pallino pieno (predefinito) type="circle" Cerchio vuoto type="square" Quadrato pieno Gli elenchi ordinati e non possono essere annidati tra di loro. Nel caso di elenchi non ordinati lo stile di enumerazione cambia in funzione del livello di annidamento.

Liste di definizione Vengono individuate dal tag <dl>. Gli elementi dell’elenco vengono individuati da due differenti tag: <dt> (definition term), <dd> (definition description). Esempio: <dl> <dt>A</dt> <dd>è la prima lettera dell’alfabeto</dd> <dt>Z</dt> <dd>è l’ultima lettera dell’alfabeto</dd> </dl>

Il tag <a> (hyperlink) Un ipertesto è un insieme di documenti (pagine) messi in relazione tra loro. La caratteristica principale di un ipertesto è che la lettura può avvenire anche in modo non lineare. Solitamente si clicca su alcune parole per accedere ad un nuovo documento. Il tag che permette di associare una porzione di documento (una o più parole, un’immagine, etc) con un altro documento è il tag <a>. Il collegamento creato tramite tag <a> è definito collegamento ipertestuale. Esempio di utilizzo del tag <a>: Vai alla <a href="altra_pagina. html">seconda pagina</a> Per ottenere un collegamento ipertestuale funzionante è necessario specificare un valore per l’attributo href. Questo valore è il nome della pagina da collegare alla porzione di codice identificata dal tag <a>. Altra_pagina. html è il nome della pagina che viene caricata dal browser nel momento in cui si clicca sul collegamento ipertestuale.

Il tag <a> (placeholder) Il tag <a> può svolgere due compiti: • Può essere usato come hyperlink se viene specificato un valore per l’attributo href • Può essere usato come anchor (placeholder per altri hyperlink). Un placeholder permette di specificare un collegamento che riporta ad uno specifico punto dello stesso documento (o di un altro documento). È estremamente comodo per la creazione dell’indice di un documento. Esempio: Vai al <a href="#Cap 1">Capitolo 1</a> Vai al <a href="#Cap 2">Capitolo 2</a>. . . <h 1>Questo è il <a name="Cap 1">Capitolo 1</a></h 1> <p>Testo del capitolo 1. . . </>

L’attributo target (1) L’attributo target del tag <a> permette di definire la finestra di destinazione del caricamento del documento. Ad esempio: <a href="file. html" target="_blank">Apri file</a> Il tag <a> aprirà il documento file. html su una nuova finestra (o su un nuovo tab, a seconda delle impostazioni del browser).

L’attributo target (2) L’attributo target può contenere i seguenti valori: • _self : la stessa finestra (valore predefinito) • _blank : una nuova finestra (o tab) • _parent : apre la pagina sul livello superiore rispetto al frameset attuale. • _top : In caso di utilizzo di frame, apre il collegamento sull’intera pagina, rimuovendo di fatto il frameset.

Percorsi relativi Come abbiamo visto in precedenza, l’attributo href contiene il link alla nuova pagina da visualizzare. L’attributo href conteneva semplicemente il nome della pagina perché si ipotizzava che la nuova pagina da visualizzare si trovava nella stessa cartella della pagina su cui era presente il collegamento. Non è sempre così. Ipotizzando una struttura di cartelle del tipo: index. html cartella 1pagina. A. html cartella 2pagina. B. html Se vogliamo aggiungere un collegamento dalla pagina index. html alla pagina. A. html, il valore da impostare sull’attributo href deve essere: <a href="cartella 1pagina. A. html">Vai a Pagina A</a> Per un collegamento dalla pagina. A. html alla pagina. B. html si dovrà invece tornare indietro di una cartella (. . ): <a href=". . /cartella 2/pagina. B. html">Vai a Pagina B</a> Questi collegamenti contengono tutti percorsi relativi, perché non partono dalla radice del sito web (il primo carattere del collegamento è diverso da /).

Percorsi assoluti (1) Un percorso assoluto sarà del tipo: <a href="/Cartella 1/Pagina. A. html">Vai a pagina A</a> I percorsi assoluti possono essere utilizzati esclusivamente quando le nostre pagine risiedono su un server web. Il tag <a> ci consente di collegare la nostra pagina ad una pagina presente su un altro sito web. Ad esempio, se vogliamo collegare la nostra pagina al sito web www. sitoweb. it, ci basta impostare l’attributo href come segue: <a href="http: //www. sitoweb. it">Vai al sito</a>

Percorsi assoluti (2) Nel valore dell’attributo href, prima del nome del sito, notiamo la presenza del prefisso http: //. Questo prefisso è indispensabile se si vuole collegare la pagina ad un nuovo sito. Serve a far capire al browser che la restante parte del valore inserito nell’attributo riguarda un sito differente da quello in cui si trova la pagina in cui ci troviamo. Rimuovendo il prefisso http: // il browser proverebbe a caricare la pagina presente nella cartella www. sitoweb. it, sullo stesso livello della pagina su cui si trova il collegamento.

Le tabelle (1) • Comode per la rappresentazione dei dati in modo tabellare • In passato venivano usate per strutturare il layout della pagina • Per aggiungere una tabella in un documento html è necessario conoscere almeno tre tag: <table>, <tr>, <td>.

Le tabelle (2) <table> Permette di definire l’inizio e la fine della tabella <tr> Permette di definire l’inizio della riga <td> Permette di definire l’inizio della colonna

Le tabelle (3) Esempio: <table> <tr> <td>Riga </tr> </table> 1, Colonna 1</td> 1, Colonna 2</td> 2, Colonna 1</td> 2, Colonna 2</td>

Le tabelle (4) Possiamo aggiungere ulteriori tag per specificare quali porzioni delle tabelle rappresentano la testata <thead>, il corpo della tabella <tbody> e il footer: <tfoot>. Vedremo in seguito che questi elementi possono essere stilizzati in modo differente grazie agli stili.

Le tabelle (5) <table> <caption>Tabella 1</caption> <thead> <tr> <th>Testata, Colonna 1</th> <th>Testata, Colonna 2</th> </tr> </thead> <tbody> <tr> <td>Riga 1, Colonna 1</td> <td>Riga 1, Colonna 2</td> </tr> <td>Riga 2, Colonna 1</td> <td>Riga 2, Colonna 2</td> </tr> </tbody> <tfoot> <tr> <td>Footer, Colonna 1</td> <td>Footer, Colonna 2</td> </tr> </tfoot> </table>

DOCTYPE HTML (1) • Permette di specificare la versione del linguaggio HTML utilizzato nella stesura della pagina. • Non è indispensabile ma i browser lo utilizzano per capire come renderizzare il codice html della pagina, se manca può determinare effetti indesiderati. • Il linguaggio HTML si è evoluto nel tempo ed esistono diverse versioni, ogni versione viene identificata da una diversa DOCTYPE. • Ad oggi la versione di HTML maggiormente utilizzata per lo sviluppo di nuovi siti è la 5. Standardizzata ad ottobre 2014 dal W 3 C ma supportata da tutti i browser già da diversi anni.

DOCTYPE HTML (2) Esempi di DOCTYPE: DOCTYPE Versione HTML/XHTML <!DOCTYPE html> HTML 5 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN" "http: //www. w 3. org/TR/html 4/strict. dtd"> HTML 4. 01 Strict <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -transitional. dtd"> XHTML 1. 0 Transitional L’elenco completo dei DOCTYPE HTML è disponibile sul sito del W 3 C: http: //www. w 3. org/QA/2002/04/valid-dtd-list. html

I tag dell’head (1) • In precedenza abbiamo osservato che le pagine html sono divise in due sezioni: head e body. • Alcuni tag html possono essere utilizzati esclusivamente all’interno della sezione head e altri esclusivamente nella sezione body (la stragrande maggioranza).

I tag dell’head (2) <title>Titolo della pagina</title> Permette di specificare il titolo della pagina. Il testo contenuto all’interno del tag viene solitamente visualizzato nella barra del titolo del browser e nella barra delle applicazioni quando viene minimizzato (dipende dal S. O. e dal browser utilizzato). <meta /> Permette di specificare dei metadati

I tag dell’head (3) <link /> Solitamente usato per collegare un foglio di stile esterno alla pagina (li vedremo in seguito) <style /> Specifica un foglio di stile per il documento (inserito direttamente al suo interno)

I tag dell’head (4) <script /> Permette di includere script nel documento (solitamente javascript). <base /> Permette di specificare i valori base per la destinazione (target) dei collegamenti dell’intera pagina.

I tag del body (1) • La maggior parte dei tag html vanno inseriti nella sezione body del documento. • Alcuni li abbiamo già osservati in precedenza, altri li scopriremo nella parte restante del corso. • Occorre sempre ricordare che lo scopo principale dei tag non è quello di definire lo stile di visualizzazione ma di dare un significato all’informazione in essi contenuta.

I tag del body (2) <blockquote>Citazione. . . </blockquote> Permette di specificare una porzione di codice come citazione. Attraverso l’attributo cite è possibile specificare il riferimento alla citazione (deve essere una URL completa). È di tipo Block. <pre>Testo</pre> Il testo contenuto viene visualizzato con un font non proporzionato ed esattamente come è stato scritto nel documento html. È di tipo Block.

I tag del body (3) <q>testo citazione</q> Citazione breve, anche in questo caso è possibile utilizzare l’attributo cite per fornire la fonte. È un tag di tipo inline. <code>porzione di codice</code> Visualizza con un font monospaced il testo presente al suo interno. Solitamente usato per mostrare una porzione di codice.

I tag del body (4) <del>Testo cancellato</del> Permette di mostrare un testo «cancellato» . Il testo viene visualizzato barrato. È un tag inline. <ins>Testo inserito</ins> Permette di mostrare un testo inserito. Il testo viene visualizzato sottolineato. È un tag inline.

I tag del body (5) <hr /> Inserisce una linea orizzontale. <img /> Permette di visualizzare un’immagine all’interno del documento. Il collegamento all’immagine avviene attraverso l’attributo src.

Moduli (form) • Il linguaggio HTML permette di definire degli elementi per acquisire l’input dei dati da parte degli utenti. • L’HTML non è però in grado di processare tali input (ricordiamoci che è un linguaggio di markup e non di scripting) • Per processare l’input degli utenti è necessario l’uso di un linguaggio di scripting lato client (javascript) o di un’applicazione server side (php, asp. net, jsp, coldfusion, etc. ).

Input di tipo text <input type="text" name="nomecampo" /> Il tag input è un tag che viene renderizzato in modi differenti a seconda del valore impostato nell’attributo type. Se il valore di type è text, viene visualizzato un campo di input di tipo testuale. In questo tipo di campi di input l’utente può inserire una stringa alfanumerica (lettere, numeri, etc). L’attributo name permette di specificare un identificativo per il campo, in modo da permettere il recupero dell’informazione una volta effettuato l’inoltro dei dati.

Checkbox (1) <input type="checkbox" name="nomecampo"/> Se il valore di type è checkbox, viene visualizzata una casellina quadrata su cui è possibile applicare un segno di spunta con un clic. Per applicare il segno di spunta come impostazione predefinita, è possibile usare l’attributo checked, impostandone il valore a checked: <input type="checkbox" checked="checked" />

Checkbox (2) • Checkbox è normalmente usato permettere la scelta di n opzioni da un elenco. Ogni voce dell’elenco può essere selezionata in modo indipendente dalle altre voci. È quindi possibile operare delle scelte multiple.

Radio <input type="radio" name="gruppo" id="v 1"/> <input type="radio" name="gruppo" id="v 2"/> <input type="radio" name="gruppo" id="v 3"/> Se il valore di type è radio, viene visualizzata una casella a forma di cerchio che può contenere un puntino al suo interno. La differenza tra il radio button e la checkbox è che la checkbox viene utilizzata quando si vuole dare la possibilità di scegliere una sola voce da un elenco di voci. Attraverso l’attributo name è possibile definire quali voci fanno parte di questo elenco.

Select (1) <select name="nomecampo"> <option value="1" selected="selected">Prima</option> <option value="2">Seconda</option> <option value="3">Terza</option> </select> Il tag select permette di definire un menù di opzioni. L’attributo selected permette di specificare una scelta come predefinita. Il tag select viene renderizzato come un menù a tendina che mostra l’opzione selezionata seguita da un triangolo nero che indica la possibilità di espandere il menù.

Select (2) In alcuni casi è necessario raggruppare le opzioni per tipologia. Il tag <optgroup> permette di raggruppare le opzioni e di specificare una label per ogni gruppo. <select id="nomecampo"> <optgroup label="Primo gruppo"> <option value="1">Prima</option> <option value="2">Seconda</option> </optgroup> <optgroup label="Secondo gruppo"> <option value="3">Terza</option> </optgroup> </select>

Select (3) In alcuni casi può essere utile dare la possibilità all’utente di effettuare scelte multiple. L’attributo multiple modifica il comportamento del tag select in modo da permettere la selezione di più scelte attraverso l’uso del tasto control (CTRL). L’attributo size permette inoltre di specificare il numero di voci che possono essere visualizzate contemporaneamente.

Etichettare i controlli <label for="ctrl">Cognome</label> <input type="text" id="ctrl" name="nomecampo" /> Il tag <label> permette di aggiungere una label ad uno specifico controllo. Grazie all’attributo for è possibile associare la label al controllo indicandone il nome. Nell’esempio il tag input di tipo text con id ctrl è stato associato alla label contenente il testo Cognome impostando nell’attributo for il valore ctrl. Cliccare sul tag <label> equivale a cliccare sul tag <input>, cliccando su <label> infatti il tag <input> acquisisce il focus (il cursore si posiziona su <input>).

Input di tipo button <input type="button" name="btn" value="Clicca qui" /> Il tag <input> può essere di tipo button, in tal caso questo viene renderizzato come un pulsante. I «button» sono pulsanti su cui non è definito un comportamento specifico. Solitamente viene aggiunto del codice client side (javascript) che viene eseguito quando si clicca sul bottone.

Input di tipo submit <input type="submit" name="btn" value="Aggiorna" /> Anche in questo caso il tag <input> viene renderizzato come un pulsante. In questo caso il pulsante esegue il postback dei dati contenuti nel form, verso la destinazione specificata dal tag <form> che contiene il pulsante e gli altri controlli di input. Osserviamo che, in entrambe le tipologie di pulsante, la label del pulsante coincide con il valore che impostiamo nell’attributo <value>.

Input di tipo reset <input type="reset" name="clear" value="Pulisci" /> Il tag input di tipo reset permettono di reinizializzare il valore dei campi con i loro valori predefiniti.

Tag <form> (1) Il tag <form> non viene renderizzato a video, ma è fondamentale perché ci permette di specificare verso quale pagina devono essere inoltrati i dati inseriti nei nostri controlli e in quale modo devono essere trasferiti. L’attributo action permette di specificare il nome della pagina verso cui vogliamo inoltrare le informazioni, l’attributo method permette di specificare il modo con cui queste informazioni vengono passate (post, get).

Tag <form> (2) Esempio: <form action="Pagina. Ricevente. html" method="post"> <label for="ctrl">Cognome</label> <input type="text" id="ctrl" name="ctrl" /> <input type="submit" name="btn" value="Invia" /> <input type="reset" name="clear" value="Pulisci" /> <input type="button" name="generic" value="niente" /> </form>

Input di tipo image <input type="image" name="btn" src="img. jpg" /> Si comporta come un input di tipo submit. Sul browser viene visualizzata l’immagine specificata attraverso l’attributo src (lo stesso del tag <img>).

Tag <button> (1) • Presente solo a partire dalla versione HTML 4 • Permette un maggiore controllo nella definizione del suo aspetto grazie alla possibilità di inserire del codice html all’interno del bottone. • Anche nel tag <button> è possibile specificare, attraverso l’attributo type, quale deve essere il comportamento del bottone (button, reset, submit).

Tag <button> (2) Esempio: <button type="submit" name="button"> <img src="image. jpg" /> </button> Da osservare che, rispetto al tag <input> di tipo image che mostra solo l’immagine, il tag button viene renderizzato come un bottone che contiene al suo interno l’immagine specificata. Il modo con cui il bottone viene renderizzato è funzione del browser utilizzato.

I tag <fieldset> e <legend> Il tag <fieldset> permette di raggruppare un insieme di tag di input all’interno di una specifica area. Il tag <legend> permette di specificare una label per quest’area. Il tag viene renderizzato come un riquadro che contiene tutti gli elementi inseriti al suo interno. La label viene visualizzata in alto. <fieldset> <legend>Testo della label</legend> <label for="ctrl">Cognome</label> <input type="text" id="ctrl" name="ctrl" /> <input type="submit" name="btn" value="Invia" /> </fieldset>

Il tag <textarea> <textarea name="ctrl" cols="50" rows="10"></textarea> Il tag <textarea> rappresenta un controllo di input multiriga di tipo testuale. Gli attributi cols e rows permettono di specificare la dimensione del controllo in larghezza e in altezza. Se il testo supera le dimensioni specificate, il controllo mostra una barra di scorrimento.

Definire il layout della pagina Nelle prime versioni del linguaggio HTML, gli elementi che servivano a specificare l’aspetto della pagina venivano inseriti direttamente all’interno del codice HTML. Esistevano infatti dei tag e degli attributi, oggi obsoleti, che permettevano di specificare la formattazione di ogni tag o di un gruppo di tag. Il linguaggio HTML si è evoluto nel tempo in modo da separare le informazioni (dati) dalla loro formattazione (layout).

L’uso delle tabelle per definire il layout Le prime versioni dell’HTML erano prive di strumenti avanzati per definire il layout della pagina. I designer utilizzavano le tabelle, spesso inserite all’interno di altre tabelle (nidificazione), per creare dei layout gradevoli per i visitatori del sito. Questo modo di operare aveva dei costi elevati in termini di: • Pulizia del codice • Usabilità del sito nel caso di utenti diversamente abili • Peso in termini di kb della pagina • Inadeguatezza del codice per la visualizzazione su dispositivi diversi dai computer desktop

Utilizzare i fogli di stile per il layout Per tentare di separare il codice HTML dalla sua rappresentazione grafica (layout), nel 1996 il W 3 C introdusse i fogli di stile o Cascading Style Sheet (CSS). La prima versione realmente utilizzata nei browser è stata però la v. 2. 1 (CSS 2. 1). I primi browser in grado di supportare i CSS furono Internet Explorer 5, Firefox, Opera 7.

Uso degli stili come attributo dei tag È possibile specificare lo stile di un tag HTML utilizzando l’attributo style. Ad esempio: <div style="background-color: #cc 9999; font-family: Arial; "> Testo in Arial su sfondo rosso! </div> Lo stile viene correttamente applicato al tag <div> ma per ricreare lo stesso effetto su un altro tag, sulla stessa o su un’altra pagina, siamo costretti a riscrivere tutto il codice per ogni tag <div> presente sulla pagina.

Il tag style Per superare questo limite i CSS introducono il concetto di selettore, un meccanismo per associare uno stile predefinito ad uno o più controlli presenti sulla pagina. Il primo selettore che vedremo è il selettore class. Il codice della pagina precedente, utilizzando l’attributo class diventa: <div class=“mio. Stile"> Testo in Arial su sfondo rosso! </div> Adesso dobbiamo imparare a definire lo stile «mio. Stile» , prima utilizzando il tag style e, dopo, utilizzando i fogli di stile.

Uso e limite del tag style Teoricamente è possibile aggiungere un tag <style> nidificato all’interno del tag <head>, questo permette di specificare, all’interno della pagina, un elenco di stili da utilizzare per gli elementi del codice HTML contenuto nella pagina. È una soluzione che separa il codice html dallo stile, ma ci obbliga a ripetere, per ogni pagina l’elenco degli stili.

Uso degli stili all’interno della pagina L’esempio visto in precedenza utilizzando il tag <style>: <html> <head> <style>. mio. Stile{ background-color: #cc 9999; font-family: Arial; } </style> </head> <body> <div class="mio. Stile"> Testo in Arial su sfondo rosso! </div> </body> </html>

Uso degli stili esterni (1) A questo punto non ci resta che trovare un modo per trasferire questi stili dal codice della pagina HTML verso un documento esterno. Per fare questo è sufficiente creare un nuovo file con estensione. css (es. stile. css) contenente il seguente codice: . mio. Stile { background-color: #cc 9999; font-family: Arial; }

Uso degli stili esterni (2) Il codice della pagina HTML deve diventare quindi: <html> <head> <link href="stile. css" type="text/css" rel="stylesheet" /> </head> <body> <div class="mio. Stile"> Testo in Arial su sfondo rosso! </div> </body> </html>

CSS – Sintassi e commenti Tipicamente un foglio di stile è costituito da una serie di regole che verranno poi applicate agli elementi della nostra pagina html. Per identificare gli elementi a cui applicare le regole vengono utilizzati dei selettori. È possibile individuare gli elementi attraverso il nome del tag (selettore di tipo), mediante l’attributo class (selettore di classe: . ) o mediante l’attributo id (selettore di ID: #). Osserviamo quindi l’esempio presente nella pagina successiva.

Esempio CSS body{ background-color: white; font-size: 14 px; color: #000; } h 1{ color: green; } #Contenitore{ margin: 20 px auto; width: 900 px; }. mio. Stile{ background-color: #cc 9999; font-family: Arial; }

Selettore di tipo (1) body identifica le regole da applicare per il tag body. Osserviamo che le parentesi graffe delimitano il blocco di regole da applicare all’elemento identificato dal selettore. Nell’esempio il selettore di tipo utilizzato identifica il tag body, quindi le regole verranno applicate al tag body presente nella pagina HTML. Nello specifico il colore di sfondo della pagina sarà bianco, le dimensioni del font saranno pari a 14 px (14 pixel, il colore del testo sarà nero) selettore { proprietà: valore; }

Selettore di tipo (2) Nel codice dell’esempio troviamo, il selettore di tipo riferito al tag h 1. Com’è ovvio, le regole/proprietà descritte all’interno delle parentesi graffe, saranno riferite a tutti i tag h 1 presenti sulla pagina. N. B. Nelle versioni precedenti ad HTML 5, era possibile specificare un solo tag h 1 per pagina. Da HTML 5 in poi è possibile specificare un tag h 1 per ogni sezione.

Selettore di ID Il selettore #Contenitore permette di specificare delle regole per il tag che ha come identificativo univoco il valore Contenitore. Il tag dovrà quindi essere del tipo: <div id="Contenitore">esempio</div> È importante osservare che non possono esistere, nella medesima pagina, due tag che contengono lo stesso valore per l’attributo ID.

Selettore di classe Lo abbiamo usato in precedenza. Il selettore di classe ci permette di associare le regole a tutti gli elementi della pagina che hanno, come valore dell’attributo class, il valore specificato nel selettore. Nell’esempio il selettore . mio. Stile ci permette di associare le regole a tutti gli elementi che hanno l’attributo class impostato al valore mio. Stile A differenza del tag ID, più elementi della stessa pagina possono avere lo stesso valore impostato per l’attributo class. Il selettore di classe ci viene quindi utile quando dobbiamo utilizzare più volte delle regole all’interno della nostra pagina.

Selettore universale * Il selettore universale * permette di impostare delle regole che valgono per tutti gli elementi della pagina. Ad esempio: * { color: red; } permette di impostare in rosso il colore di tutti gli elementi della pagina HTML.

Struttura ad albero dell’HTML (1) Osserviamo la pagina HTML: <html>. . . <body> <h 1>Ciao mondo!</h 1> <p>Esempio di <a href="Pagina. html">collegamento</a></p> </body> </html>

Struttura ad albero dell’HTML (2) La struttura della pagina può essere vista come un albero costituito dai seguenti elementi: Dove il tag a è il figlio del tag p, che ha sua volta è figlio del tag body, etc. Alla stessa maniera body è il padre del tag p che a sua volta è padre del tag a.

Combinare i selettori (1) Osserviamo il seguente codice: <h 1> Benvenuti nel nostro <a href="Link 1. html">Sito</a> </h 1> <p> Clicca su questo <a href="Link 2. html">collegamento</a> per maggiori informazioni </p>

Combinare i selettori (2) Vediamo come poter impostare il verde come colore del testo del primo link ed il rosso come colore del testo del secondo link. Utilizzando il selettore di classe l’operazione è semplice, basta aggiungere le due classi e impostare le proprietà attraverso il css. Aggiungiamo quindi le due classi

Combinare i selettori (3) <h 2> Benvenuti nel nostro <a href="Link 1. html" class="verde">Sito</a> </h 2> <p> Clicca su questo <a href="Link 2. html" class="rosso">collegamento</a> per maggiori informazioni </p> Il nostro css sarà: . verde { color: green; }. rosso { color: red; }

Combinare i selettori (4) Se volessimo evitare l’uso dei selettori è possibile utilizzare l’albero dell’HTML per identificare gli elementi. Sappiamo che il primo tag a è figlio di h 1 ed il secondo tag a è figlio di p. Il codice css da utilizzare sarà quindi: h 2 a { color: green; } p a { color: red; }

Combinare i selettori (5) Se diversi tag condividono buona parte delle stesse proprietà, è possibile raggruppare la definizione dei tag utilizzando la sintassi: selettore 1, selettore 2, . . . , selettore. N { elenco di proprietà } Ad esempio: h 1, p, div { color: red; } Imposta a rosso il colore dei tag h 1, p e div presenti nella pagina a cui collegheremo questo css. Le proprietà per cui differiscono potranno poi essere impostate utilizzando il formato a singolo selettore visto in precedenza.

Proprietà Vedremo in seguito un elenco di proprietà da utilizzare per formattare i testi, per definire i colori, per impostare le immagini di sfondo, etc. È importante osservare che durante questo corso non verranno mostrate tutte le possibili proprietà da utilizzare nei css. Lo scopo che si prefigge il corso è quello di descrivere le basi del linguaggio HTML e dei CSS e di fornire le tecniche per la creazione di pagine HTML che utilizzano gli stili in modo efficace.

Formattazione del testo (1) font-family Permette di specificare il font da utilizzare per il testo (Arial, Times New Roman, etc). I CSS 3 hanno aggiunto le specifiche necessarie per il trasferimento, verso il browser dell’utente, di font diversi da quelli base. Prima era infatti necessario limitarsi all’uso di alcuni font presenti su tutti i computer.

Formattazione del testo (2) font-size Permette di specificare la dimensione del testo. Le unità di misura più utilizzate sono: • px (pixel) • pt (punti, va usato per la stampa) • em (em-height, è una unità di misura relativa)

Formattazione del testo (3) color Permette di specificare il colore del testo. È possibile specificare alcuni dei colori utilizzando il loro nome (green, red, blue, etc. ), ma esistono altri modi per indicare con precisione il colore che vogliamo utilizzare. La notazione esadecimale #RRGGBB in cui abbiamo la possibilità di specificare i livelli dei colori base da utilizzare per ottenere il colore desiderato (RR = rosso, GG = verde, BB = blu). Il valore viene espresso in formato esadecimale (con cifre che vanno da 0 ad F, dove F corrisponde a 15 nella notazione decimale).

Formattazione del testo (4) Esiste una forma abbreviata: #RGB dove per identificare il colore si utilizza un numero esadecimale per ogni colore base. Esiste inoltre la notazione decimale in cui ogni colore viene specificato attraverso una terna di valori che vanno da 0 a 255 o da 0% a 100%. color: rgb(0. . 255, 0. . 255) color: rgb(0. . 100%, 0. . 100%)

Formattazione del testo (5) font-weight Permette di specificare se il testo è in grassetto o normale. font-style Permette di specificare lo stile del font (italic, oblique, etc).

Formattazione del testo (6) text-decoration Permette di specificare una eventuale «decorazione» del testo. Alcuni dei possibili valori sono: underline, line-through, overline. text-transform Permette di modificare la visualizzazione del testo. Alcuni dei suoi possibili valori sono: capitalize (iniziale di ogni parola maiuscola, uppercase (tutto in maiuscolo), lowercase (tutto in minuscolo).

CSS box model L’insieme delle regole che definiscono l’aspetto estetico degli elementi di tipo block è detto CSS box model. Gli elementi di tipo block hanno: • Dimensione (width, height) • Padding (distanza dal bordo) • Bordo • Margine (distanza tra il bordo e gli altri elementi)

CSS box model

CSS box model <div class="blocco">Esempio</div>. blocco{ /* per definire le dimensioni dell’elemento */ width: 300 px; height: 200 px; /* padding */ padding-top: 10 px; padding-bottom: 10 px; padding-left: 20 px; padding-right: 20 px; /* per definire il tipo, le dimensioni ed il colore del bordo */ border-top: solid 5 px red; border-bottom: solid 5 px red; border-left: solid 5 px red; border-right: solid 5 px red; /* per definire le dimensioni del margine */ margin: 20 px; }

CSS box model E’ importante osservare che la larghezza totale impegnata è data da: Larghezza dell’elemento + padding left + padding right + border left + border right + margin left + margin right (nell’esempio la larghezza totale è pari a 390 pixel) L’altezza totale impegnata è data da: Altezza dell’elemento + padding top + padding bottom + border top + border bottom + margin top + margin bottom (nell’esempio la l’altezza totale è pari a 270 pixel).

Margin e padding (1) Esistono diversi modi per specificare le misure nelle proprietà margin e padding. • margin-left: valore; (ripetuto per ogni lato) • margin: top right bottom left; • margin: valore; (imposta lo stesso valore per ogni lato) • margin: valore 1 valore 2 (imposta valore 1 per top e bottom e valore 2 per left e right)

Margin e padding (2) Esempi: margin: 20 px; Imposta a 20 px il margine di tutti i lati margin: 10 px 15 px 20 px 25 px; Imposta a 10 px il top, a 15 px il right, a 20 px il bottom, a 25 px il left. margin: 10 px 20 px; Imposta a 10 px il top ed il bottom, a 20 px il left ed il right margin-left: 20 px; Imposta a 20 px il margine sinistro • La stessa logica può essere applicata per il padding. • I margin possono avere valori negativi, ciò non vale per border e padding.

Border Per il border valgono regole differenti. È sempre possibile specificare il valore di un singolo lato aggiungendo -left, -right, -top, -bottom, ma non è possibile specificare misure diverse usando la forma compatta. Questo perché nella proprietà border dobbiamo poter specificare altri parametri. Il primo rappresenta il tipo di bordo (solid, dotted, etc), il secondo la dimensione del bordo, il terzo il colore del bordo.

Impostare le immagini di sfondo Gli elementi possono avere anche delle immagini di sfondo, queste possono essere specificate direttamente a livello di CSS utilizzando la proprietà background-image: url(‘nome. Immagine. png’); L’immagine verrà visualizzata parzialmente in funzione delle dimensioni dell’elemento su cui verrà applicata. È possibile inoltre definire la posizione dell’immagine rispetto all’elemento di cui è il background (background-position) e definire la ripetizione dell’immagine (se ripetere l’immagine in altezza e in larghezza, se ripeterla solo in larghezza o solo in altezza o se mostrarla solo una volta).

Dimensioni relative ed assolute Gli elementi possono avere dimensioni assolute (ad esempio 300 px) o dimensioni relative (ad esempio 50%). Se definiamo un elemento con una dimensione relativa, la sua dimensione in pixel sarà funzione dell’elemento che lo contiene. Un elemento la cui proprietà width sia pari a 50%, contenuto in un altro elemento la cui proprietà width è pari a 500 px, avrà una dimensione in pixel pari a 250 px (il 50% del suo contenitore).

Creare layout con i div Sappiamo che gli elementi possono contenere immagini di sfondo, avere delle dimensioni ben precise, un bordo, un margine e un padding. Sappiamo anche gli elementi di tipo block, come i div, occupano tutta la larghezza della finestra perché, anche quando hanno una larghezza limitata, mandano «a capo» gli elementi precedenti e quelli successivi. Vediamo come possiamo mettere affiancati due o più div, mantenendone le caratteristiche tipiche degli elementi di tipo block.

Posizionare gli elementi: float e clear Prendiamo ad esempio questo codice: <div class="left">Sinistra</div> <div class="right">Destra</div> Senza uno specifico css, questi due elementi verranno mostrati su due diverse righe. Utilizzando il seguente css invece gli elementi verranno mostrati a sinistra e a destra, sulla stessa riga. . left { float: left; }. right { float: right; }

float Gli elementi il cui float è impostato a left o right si posizionano a destra o a sinistra (rispetto al loro contenitore) e permettono agli altri elementi che seguono di posizionarsi di fianco a loro. Questo permette l’organizzazione della pagina su diversi elementi, anche se acquisire padronanza con il floating richiede un po’ di tempo e di esperienza.

clear Gli elementi che seguono un elemento impostato come float continuano a posizionarsi sulla sinistra (o sulla destra) dell’elemento. Per impedire che questo comportamento prosegua all’infinito è possibile aggiungere un elemento di tipo block che abbia la proprietà clear impostata a both. <div class="clearfix"></div>. clearfix { clear: both; /* both, left o right */ }

Posizionamento assoluto e relativo Fino ad ora abbiamo visto che gli elementi seguono sempre il flusso della pagina. Scrivendo questo codice: <h 1>Titolo</h 1> <p>Testo</p> <img src="img. png" /> h 1 verrà sempre visualizzato prima di p e p prima dell’immagine. Questo comportamento può essere alterato. Alcuni elementi possono essere posizionati in modo relativo o in modo assoluto.

Posizionamento assoluto position: absolute; Le proprietà top, bottom, left e right sono riferite all’intera pagina e rappresentano la distanza tra l’elemento e la relativa posizione identificata dalla proprietà.

Posizionamento relativo position: relative; Le proprietà top, bottom, left e right sono riferite all’elemento contenitore e rappresentano la distanza tra l’elemento e la relativa posizione identificata dalla proprietà. Il comportamento di top, right, bottom, left è diverso rispetto ai posizionamenti assoluti e l’elemento mantiene una sorta di «segnaposto» nella sua posizione naturale.

Posizionare gli elementi su più livelli z-index: valore; Permette di specificare l’ordine di sovrapposizione degli elementi. Se due elementi sono sovrapposti, l’elemento che ha il valore di z -index maggiore verrà visualizzato, mentre l’elemento con z-index minore verrà nascosto (parzialmente o totalmente in funzione delle dimensioni degli elementi)

Pseudo-classe (1) Una pseudo classe non definisce la presentazione di un elemento ma solo di un suo particolare stato. La sintassi è la seguente: selettore: pseudo-classe { proprietà }; Nelle versioni più recenti del linguaggi HTML può essere associata a tutti i tipi di selettore.

Pseudo-classe (2) Pseudo-classi per i link: – – : link : visited : hover : active Altre pseudo-classi: – : focus – : first-child I CSS 3 hanno introdotto diverse nuove pseudo classi.

Font Le versioni più vecchie del linguaggio html e dei css non consentivano l’utilizzo di font diversi da quelli installati sulla macchina dell’utente che visitava il sito. Questo ci costringeva a dover scegliere un numero limitato di font per il nostro sito. Fondamentalmente la scelta era tra queste famiglie di font: monospace, sans-serif e serif. La differenza tra un font sans-serif e serif:

Font • Per la maggior parte dei browser, il font predefinito per il tipo serif è il Times mentre il font predefinito per il tipo sans-serif è l’Arial. • Se vogliamo possiamo specificare direttamente il nome di un font, ad esempio il font «verdana» e, volendo, possiamo anche specificare un elenco di font da utilizzare (se il primo non è presente viene utilizzato il secondo): font-family: verdana, sans-serif;

Font L’utente che non ha sulla sua macchina il font verdana andrebbe a visualizzare il sito in modo differente rispetto a come lo vediamo noi. Per ovviare a questo problema, abbiamo diverse soluzioni. Una di queste è l’uso dei «Web Safe Fonts» di cui trovate l’elenco qui: www. w 3 schools. com/cssref/css_websafe_fonts. asp Il grado di compatibilità può essere verificato qui: https: //www. cssfontstack. com/

Font Un altro modo per ovviare al problema dell’assenza del font desiderato sul computer dell’utente è quello di utilizzare il font embedding. Sul sito: https: //fonts. google. com/ troviamo una vasta scelta di font da poter utilizzare nei nostri siti web in modo estremamente semplice (il sito fornisce anche la porzione di CSS necessaria per il font embedding)

Font Se abbiamo un font e lo vogliamo incorporare senza utilizzare dei servizi esterni possiamo usare il seguente codice: @font-face { font-family: my. Font; src: url(file_con_il_font. woff); } div { font-family: my. Font; } I formati supportati dalla maggior parte dei browser sono TTF/OTF e WOFF. Per avere maggiori informazioni sulla compatibilità è possibile usare il sito caniuse. com

CSS sizing – font-size Quando abbiamo definito la dimensione del font di un carattere, finora abbiamo utilizzato sempre l’unità di misura px (pixel). Esistono però altre unità di misura che possiamo utilizzare: %, em e pt. • font-size: 100%; // Corrisponde alla dimensione di 16 px • font-size: 1 em; // Corrisponde alla dimensione di 16 px • Font-size: 12 pt; // Corrisponde alla dimensione di 16 px

CSS sizing – font-size Cosa cambia se utilizzo le unità di misura % ed em al posto di px? Nelle impostazioni del browser è possibile specificare la dimensione del carattere (solitamente: molto piccola, media, grande, molto grande), ma questa impostazione si applica solo ai caratteri in cui il font-size è stato specificato in % ed em. N. B. Non stiamo parlando della possibilità di effettuare il zoom della pagina, ma di queste impostazioni:

CSS sizing – font-size (esercizio) <!DOCTYPE html> <head> <style>. Font. PX{ font-size: 16 px; }. Font. Percentuale{ font-size: 100%; }. Font. EM{ font-size: 1 em; }. Font. PT{ font-size: 12 pt; } </style> </head> <body> <p class="Font. PX">Dimensione font specificata in px</p> <p class="Font. Percentuale">Dimensione font specificata in %</p> <p class="Font. EM">Dimensione font specificata in em</p> <p class="Font. PT">Dimensione font specificata in pt</p> </body>

CSS sizing – font-size Un’altra caratteristica dell’uso delle unità di misura % ed em è che le impostazioni precedenti vengono «ereditate» , ciò significa che se impostiamo il font-size di un testo a 2 em (32 px) e poi impostiamo il font su body a 2 em, la dimensione del font del testo sarà complessivamente di 4 em. Osserviamo questo comportamento nel prossimo esercizio.

CSS sizing – font-size (esercizio) <!DOCTYPE html> <head> <style> body{ font-size: 2 em; }. Font. PX{ font-size: 16 px; }. Font. Percentuale{ font-size: 100%; }. Font. EM{ font-size: 1 em; }. Font. PT{ font-size: 12 pt; } </style> </head> <body> <p class="Font. PX">Dimensione font specificata in px</p> <p class="Font. Percentuale">Dimensione font specificata in %</p> <p class="Font. EM">Dimensione font specificata in em</p> <p class="Font. PT">Dimensione font specificata in pt</p> </body>

CSS sizing – font-size Se vogliamo impedire il propagarsi delle impostazioni precedenti (nell’esempio il valore impostato su body si propagava su . Font. Percentuale e. Font. EM) possiamo utilizzare l’unità di misura rem (la r sta per root). N. B. se utilizziamo l’unità di misura rem, la dimensione del font viene comunque influenzata dalle modifiche effettuiamo sulle impostazioni del browser.

Favicon Molti siti visualizzano un’icona specifica nella tab in cui sono stati aperti. Questa icona è denominata «favicon» o favourite icon. Il nome deriva dal fatto che, nelle versioni più vecchie dei browser, questa icona veniva visualizzata esclusivamente nella barra dei preferiti.

Favicon Esiste un tool estremamente comodo per la creazione di favicon da utilizzare nei nostri siti: https: //www. favicon. cc/ Ma esistono anche diversi programmi che consentono la creazione di icone direttamente da windows (o mac). Uno dei più famosi è Microangelo.

Favicon (esercizio) Ipotizziamo di avere realizzato la nostra icona e di averla memorizzata nella cartella Images del nostro sito. Per consentire la corretta visualizzazione dell’icona nella tab, è sufficiente inserire questa porzione di codice all’interno del tag head: <head> <link rel="icon" href="/Images/favicon. ico" /> … </head>

Tips & Tricks • display: block / inline / none • Uso della posizione del background per gli effetti di rollover delle immagini

Le versioni del linguaggio HTML • Linguaggio sviluppato verso la fine degli anni ‘ 80 da Tim Berners-Lee al CERN di Ginevra insieme al protocollo http. • Fino alla versione 4. 01 del 1999 il W 3 C ha di fatto standardizzato le modifiche al linguaggio proposte durante la «guerra dei browser» . • Nel gennaio 2000 viene presentato XHTML 1. 0, aggiornato successivamente ad XHTML 1. 1. • Nel 2004 alcune aziende tra cui Apple, Mozilla Foundation e Opera software si riuniscono e creano il WHATWG (Web Hypertext Application Technology Working Group) e cominciano lo sviluppo di una nuova versione del linguaggio HTML. Questa versione prenderà il nome di HTML 5.

La pubblicazione di un sito web • Si utilizza il servizio ftp fornito da chi ci vende il servizio di hosting del dominio che abbiamo acquistato. Il fornitore deve offrire anche le credenziali di accesso (username e password) da configurare sul client ftp. • Il client ftp è un software che permette di interagire con il servizio ftp. • Uno dei client ftp più utilizzati è filezilla, molti strumenti di sviluppo professionali integrano comunque dei propri client ftp che rendono agevole la pubblicazione dei contenuti. • Solitamente la pubblicazione consiste nella duplicazione dei contenuti realizzati sulla nostra cartella / sito web verso una particolare cartella a cui possiamo accedere utilizzando il nostro client ftp.

Documentazione disponibile sul web Documentazione ufficiale sul linguaggio HTML e i CSS: • http: //www. w 3. org/html/ • http: //www. w 3. org/Style/CSS/

FINE