Programmazione Web · Programmazione Web Documento HTML e testo ... per mantenere la coerenza...
23
Transcript of Programmazione Web · Programmazione Web Documento HTML e testo ... per mantenere la coerenza...
HTML e CSS
HTML - HyperText Markup LanguageCSS - Cascade Style Sheet
HTML: dichiara la struttura del documento, gli elementi contenuti, quali testi, immagini, link, elenchi, tabelle, ecc.
CSS: definisce lo stile (o gli stili) da applicare agli elementi (colori, posizioni, dimensioni, ecc)
HTML e CSS
Prima del CSS:● documenti HTML molto più lunghi● elementi semantici e tipografici mescolati
(confusione)● per mantenere la coerenza grafica tra le pagine
di un sito bisognava copiare gli stili in ogni documento
·
HTML e CSS
Dopo il CSS:● formattazione (stile) degli elementi in documenti
separati dai contenuti● documenti adattabili a diversi media, cambiando
il CSS (schermo, tablet, smartphone)● miglioramento dell’accessibilità (sintesi vocale,
screen reader)
·
HTML e CSS
… e JavaScript?
Struttura di un documento HTML
elementi base dell’HTML sono i tag, delle etichette comprese tra i simboli minore < e maggiore >
es: <strong> <a> <body> <html>
tag di apertura: <strong>tag di chiusura: </strong>
uso dell’elemento strong:<strong>testo da evidenziare…</strong>
·
Tag
1.<html> 2. <head> 3. <title>Prima pagina</title> 4. … 5. </head> 6. <body> 7. Questa è una pagina HTML! 8. </body> 9.</html>
·
Struttura documento HTML
● Scaricare l’ultima versione di Chrome● Scaricare SublimeText● Creare il primo documento html e visualizzarlo nel
browser
Esercizio
Codifica Unicode: <meta charset="UTF-8"> (nell’head)
Definizione HTML5:
<!DOCTYPE html> (inizio documento)
Mappa caratteri e DOCTYPE
Headers,paragrafi e testo
<h1>Titolo della pagina (h1)</h1><h2>Parte I (h2)</h2><h3>Capitolo 1 (h3)</h3><h4>Titolo 1 (h4)</h4><h5>Sottotitolo 1 (h5)</h5><h6>Titolo di sesto livello (h6)</h6>
Headers Elemento Significato % dimensione
<h1></h1>
Intestazione di livello 1
200%
<h2></h2>
Intestazione di livello 2
150%
<h3></h3>
Intestazione di livello 3
115%
<h4></h4>
Intestazione di livello 4
100%
<h5></h5>
Intestazione di livello 5
83%
<h6></h6>
Intestazione di livello 6
67%
Headers
Paragrafi e testoParagrafo <p>...</p>
Interruzione riga <br>
Linea orizzontale <hr>
Testo in evidenza <strong>...</strong> o <b>...</b>
Testo speciale <em>...</em> o <i>...</i>
Testo preformattato <pre>...</pre>
Id, ClasseDiv e Span
Sono parametri utilizzati dal CSS per formattare la pagina.Ogni elemento HTML può venir associato un id o una classe.La classe indica un nome generico (più elementi possono far parte della stessa classe).L’id indica un nome specifico (un solo elemento).esempi:
<h2 id=”laterale”>Titolo di colonna</h2><p class=”verde”>Paragrafo di colore verde</p>
Id e classe
div: contenitore generico di elementi utilizzato per strutturare il layout della pagina.esempio:
<div> <h1>Titolo pagina</h1> <h2>Sottotitolo</h2>
</div><div>
<h3>Titolo articolo</h3> <p>Paragrafo1</p> <p>Paragrafo2</p> <p>Paragrafo3</p> </div>
Contenitori div e span
span: elemento in linea che consente di alterare graficamente una parte del testo.esempio:<p>Il nostro negozio si trova in <span>Viale Mazzini 24, Trieste</span></p>
In questo modo potremmo identificare il testo messo tra span e formattarlo diversamente.
Contenitori div e span
I contenitori visti nelle pagine precedenti possono essere utilizzati con i e classe per ottimizzare il loro scopo.
<div id =”intestazione”> <h1>Titolo pagina</h1> <h2>Sottotitolo</h2>
</div><div id=”corpo”>
<h3>Titolo articolo</h3> <p>Paragrafo1</p> <p>Paragrafo2</p> <p>Paragrafo3</p> </div>
Contenitori, id e classi
<p>Il nostro negozio si trova in <span class=”indirizzo”>Viale Mazzini 24, Trieste</span></p>
