HTML 5
Parte seconda

ELEMENTI INLINE

Quando sono inseriti non danno origine a una nuova riga e possono contenere solo testo o altri elementi inline.

<p>Questo tasto è<b>grassetto</b></p> 

La parte delimitata dai tag <b>...</b> non sarà posta su una nuova riga.

Esempi come questo:

<b><p>Testo in grassetto</p></b> 

sono tollerati dai browser, ma non reggono al giudizio della validazione in quanto un elemento inline non può contenerne uno di tipo blocco.

span

L’elemento <span> è una generico elemento inline che definisce una porzione di testo. Non è prevista lacuna formattazione di default.

<p>Questa <span style="“font-wieight: bold”">parola</span> è in grassetto.</p>

FORMATTAZIONE

Esistono una serie di elementi inline che definiscono la funzione di una porzione di testo.

• <em> Testo enfatizzato
• <strong> Testo importante
• <dfn> Definizione
• <code> Codice
• <samp> Esempio di output
• <kbd> Imput da tastiera
• <var> Variabile

In HTML5 è compito del foglio di stile definire il formato di questi elementi.

INTERATTIVITÀ

a

Il tag <a> definisce un collegamento ipertestuale, che viene utilizzato per collegare una risorsa internet.

• L'attributo più importante dell'elemento <a> è l'attributo href, che indica la destinazione del collegamento.
• Il collegamento può essere un URL assoluta o un URL relativa
  • In un URL Assoluta l'indirizzo inizia sempre con il nome host che deve essere preceduto dalla doppia barra (//www.google.com)
  • Se il browser non trova il nome host considererà l'url come relativa e completerà l'indirizzo generando un'URL assoluta.
  • Se l'URL relativa inizia con la barra semplice (/) come punto di riferimento per il calcolo sarà presa la cartella iniziale del sito (root) e quindi verrà aggiunto solo il nome host
  • In caso contrario il calcolo verrà fatta partendo dalla cartella in cui si trova la pagina cliccata.
  • All'URL posso aggiungere un segnalibro (anchor) che mi fa saltare ad un determinato punto di una pagina. Il segno dell'anchor è il cancelletto (#), va aggiunto alla fine dell'URL e va scorrere la pagina al punto in cui viene visualizzato l'elemento che ha come l'attributo id corrispondente.
• Per impostazione predefinita, i collegamenti verranno visualizzati come segue in tutti i browser:
  • Un collegamento non visitato è sottolineato e blu
  • Un link visitati è sottolineato e viola
  • Un collegamento attivo è sottolineato e rosso

<a href="#su-di-me" >Su di me</a> 
<a class="btn btn-primary" href="https://github.com/magicbruno" target="_blank">
    magicbruno su GitHub
</a>

form

Il tag <form> viene utilizzato per creare un modulo HTML per l'input dell'utente.

• L'elemento <form> può contenere uno o più dei seguenti elementi del modulo:
  • <input>
  • <textarea>
  • <button>
  • <select>
  • <option>
  • <optgroup>
  • <fieldset>
  • <label>
  • <button>

	<form action="demo_form.asp" method="get">
		<label>Nome</label>
		<input type="text" name="nome"><br />
		<label>Cognome</label>
		<input type="text" name="cognome"><br />
		<input type="submit" value="Invia">
	</form>

input

Il tag <input> specifica un campo di input in cui l'utente può inserire i dati.

• Gli elementi <input> vengono utilizzati all'interno di un elemento <form>
• La funzione di imput cambia a secondo del valore definito dall'attributo type:
  • button,
  • checkbox,
  • color,
  • date,
  • datetime,
  • datetime-local,
  • email,
  • file,
  • hidden,
  • image,
  • month,
  • number,
  • password,
  • radio,
  • range,
  • reset,
  • search,
  • submit,
  • tel,
  • text,
  • time,
  • url,
  • week 

	<form action="demo_form.asp" method="get">
		<label>Nome</label>
		<input type="text" name="nome"><br />
		<label>Cognome</label>
		<input type="text" name="cognome"><br />
		<input type="submit" value="Invia">
	</form>

textarea

Il tag <textarea> definisce un controllo di input di testo multilinea.

• Un'area di testo può contenere un numero illimitato di caratteri.
• Per default il testo viene reso in un font a larghezza fissa (di solito Courier).

<textarea rows="5" maxlength="500"> 
    Testo contenuto nella casella editabile 
</textarea>

button

Il tag <button> definisce un pulsante cliccabile.

• Contrariamente che per l'elemento input all'interno di un elemento <button> Posso inserire qualsiasi tipo di contenuto.
• Browser diversi utilizzano diversi tipi di default per l'elemento <button>
• <button> supporta l'attributo type che può assumere i valori: button, submit e reset, gli stessi usati quando l'elemento <input> viene usato come pulsante e con lo stesso significato

<button type="button">Cliccami!</button>

select

L'elemento <select> viene utilizzato per creare un elenco a discesa.

• I tag <option> all'interno dell'elemento <select> definiscono le opzioni disponibili nella lista. <select>

	<select>
		<option value="volvo">Volvo</option>
		<option value="saab">Saab</option>
		<option value="mercedes">Mercedes</option>
		<option value="audi">Audi</option>
	</select>

ELEMENTI MULTIMEDIALI

img

Il tag <img> definisce un'immagine in una pagina HTML.

• Il tag <img> ha due attributi obbligatori: src e alt.
• Le immagini non sono tecnicamente inserite in una pagina HTML, ma collegate attraverso l'URL, l'indirizzo univoco la identifica. Il tag <img> crea lo spazio di per l'immagine caricata.

<img src="smiley.gif" alt="Smiley face" height="42" width="42" /> 
<img src="https://unsplash.it/1280/720?random" alt="Immagine caricata da unsplash.it" /> 

video

Il tag <video> consente di inserire un video in una pagina WEB, ad esempio un clip filmato o un video in streaming.

• Attualmente sono tre i formati video supportati dall'elemento <video>:
  • MP4 (Internet Explorer, Chrome, Safari, Firefox su Windows),
  • WebM (Chrome, Firefox, Opera)
  • Ogg (Chrome, Firefox, Opera).

	<video controls>
		<source src="movie.mp4" type="video/mp4">
		<source src="movie.ogg" type="video/ogg">
		Il tuo browser non supporta il tag video.
	</video>

audio

Il tag <audio> consente di inserire una risorsa audio in una pagina WEB, ad esempio una clip audioo un audio in streaming.

• Attualmente sono tre i formati audio supportati dall'elemento <audio>:
  • MP3 (Internet Explorer, Chrome, Safari, Firefox su Windows),
  • Wav(Chrome, Firefox, Opera. Safari) e
  • Ogg (Chrome, Firefox, Opera).

	<audio controls>
		<source src="horse.ogg" type="audio/ogg">
		<source src="horse.mp3" type="audio/mpeg">
		Il tuo browser non supporta il tag audio. 
	</audio>

canvas

Il tag HTML5 <canvas> viene usato per disegnare la grafica, al volo, tramite scripting (di solito Javascript). L'elemento <canvas> non ha capacità di disegno proprie (è solo un contenitore per la grafica). È necessario utilizzare uno script per disegnare effettivamente la grafica.

&nnnn;

• Per rappresentare i caratteri non codificabili con lo standard ASCII si è introdotta una codifica particola detta entity.
• Un entity è così composta:

• Quando il parser HTML incontra una parola che inizia con & legge i successivi caratteri fino ad in contrare ”;” e tenta di interpretare il tutto come un carattere secondo la tabella di codici definita dal W3C.
• Elenco completo delle entity: https://dev.w3.org/html5/html-author/charref

<!-- commento -->

• Un strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi:
• Un commento è un’indicazione significativa per il webmaster, ma invisibile al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi.
• La sintassi è la seguente:

<!-- questo è un commento -->

CSS

I FOGLI DI STILE 

HTML serve ad informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici.

• I fogli di stile (Cascading Style Sheets) definiscono come i vari elementi che compongono un documento verranno mostrati su un media specifico (schermo, stampante, dispositivo mobile).
• CSS è il linguaggio che usa il web designer per realizzare un interfaccia.
• La prima fase di un design è la progettazione.

Progettazione WEB e concetto di accessibilità

ACCESSIBILITÀ 

• Consentire l’accesso a tutti gli utenti indipendentemente dal dispositivo che usano.
• Consentire l’accesso a tutti gli utenti indipendentemente dalla loro abilità.
• Tenere conto dei dispositivi che supportano gli utenti diversamente abili.
• Con legge 9 gennaio 2004 n.4 e i successivi decreti attuativi è obbligatorio per i siti Web della Pubblica Amministrazione e della aziende private che lavorano con la Pubblica Amministrazione seguire precise regole di accessibilità. http://www.webaccessibile.org/

TECNICHE RESPONSIVE

• Progettare interfacce diverse che consentano di mostrare con efficienza le stesse informazioni su dispositivi diversi.
• Utilizzare specifiche tecniche CSS per mostrare lo stesso contenuto HTML in maniera diversa sui diversi dispositivi sulla base di quanto progettato.

DEVICE PIXEL RATIO

• Il device pixel ratio è il rapporto tra le dimensioni fisiche (in pixel) dello schermo di un dispositivo e le sue dimensioni logiche, le dimensioni usate, cioè, per visualizzare gli oggetti sullo schermo.
• Se visualizzo la pagina di facebook su uno schermo desk top di 1920 per 1080 ottengo una visualizzazione perfetta:
• Se uno smartphone 1920x1080 (ad esempio un Samsung Note III) avesse la stessa pixel ratio otterrei una pagina assolutamente illegibile:
• Quindi uso delle dimensione logicheutilizzo le dimensioni logiche. In altri termini.
  • Su un desktop da 23 pollici uso 96 pixel per ogni pollice
  • Su un samsung Note III uso circa 400 pixel per ogni pollice.

ESEMPI DI PIXEL RATIO

Modello	Dimensioni fisiche	Dimensioni logiche	Pixel ratio
APPLE IPAD	1536 x 2048	768 x 1024	2.0
APPLE IPHONE 6	750 x 1254	375 x 627	2.0
NOKIA LUMIA 520	448 x 746	320 x 533	1.4
SAMSUNG GALAXY NOTE III	1080 x 1920	360 x 640	3.0
LG G4	1440 x 2560	360 x 640	4.0

TIPI DI DISPOSITIVO DI RIFERIMENTO

Tipi	Dimensioni
Smartphone, Smartphone orizzontali, Tablet piccoli verticali	<768px
Tablet verticali, Tablet piccoli verticali, Tablet piccoli orizzontali	≥768px < 992px
Tablet orizzontali, Lap top a media risoluzione, Net book	≥992px < 1200px
Desktop, Lap top ad alta risoluzione	≥1200px

COME SI COLLEGA UN FOGLIO DI STILE A UNA PAGINA WEB

Un foglio di stile può essere esterno e interno:

• È esterno un foglio di stile definito in un file separato dal documento.
• Un foglio di stile si dice interno quando il suo codice è compreso in quello del documento.

FOGLI COLLEGATI

Uso dell'elemento <link>

• La dichiarazione va sempre collocata all'interno della sezione <head> del documento:

	<html> 
		<head> 
			. . . . 
			<link rel="stylesheet" type="text/css" href="stile.css"> 
		</head> 
	<body>
    . . . .

• L'elemento <link> presenta una serie di attributi di cui è importante spiegare significato e funzione:
  • rel descrive il tipo di relazione tra il documento e il file collegato. È sempre obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet.
  • href serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio.
  • type identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css.
  • media con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Attributo opzionale.

FOGLI INCORPORATI

I fogli incorporati sono quelli inseriti direttamente nel documento HTML tramite l'elemento <style>. Anche in questo caso la dichiarazione va posta all'interno della sezione <head>:

	<html>    
		<head>        
			<title>Inserire i fogli di stile in un documento</title>     
			<style type="text/css">           
				body {                   
					background: #FFFFCC;           
				}      
			</style>     
		</head> 
		<body>
        ..........

STILI IN LINEA

• L'ultimo modo per formattare un elemento con un foglio di stile consiste nell'uso dell'attributo 'style'.
• Esso fa parte della collezione di attributi HTML definita Common: si tratta di quegli attributi applicabili a tutti gli elementi.
• La dichiarazione avviene a livello dei singoli tag contenuti nella pagina e per questo si parla di fogli di stile in linea. La sintassi generica è la seguente: <elemento style="regole_di_stile">

COME SONO COSTRUITE LE REGOLE

Un foglio di stile è costituito da una serie di regole che stabiliscono come un gruppo di elementi html (identificati da un selettore) viene reso su un media.

selettore {
    proprietà1: valore; 
    proprietà2: valore;
}

}

• selettore: definisce a quali elementi si applicano le regole che seguono
• {...} Parentesi graffe: racchiudono l'elenco delle regole 
• Regola: è composta dal nome di una proprietà e da un valore: color:#333333;
• proprietà: indica l'elemento visuale che viene modificato
• : [due punti]: è l'operatore che collega la proprietà al valore che le viene assegnato.
• valore: determina quale sarà l'aspetto dell'elemento per quanto riguarda la caratteristica controllata dalla proprietà a cui è stato assegnato.

MPORTANZA DELLA SINTASSI

• Un linguaggio è l’insieme di regole (sintassi, ortografia, punteggiatura) che fa si che il codice (istruzioni) che scrivo siano correttamente interpretate dal computer
• In CSS l’elemento sintattico principale è la punteggiatura: h2{ color:#333333; font-weight: bold; font-size: 40px; }
• Se sbaglio il nome di una proprietà o un valore, semplicemente la regola verrà ignorata
• Se sbaglio o tralascio la punteggiatura potrebbe non essere interpretato l’intero codice. Se tralascio, ad esempio, la parentesi graffa chiusa, tutto il codice che segue non verrà interpretato.

• I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera attribuire lo stile.

 ELEMENTO

• Inserendo un selettore senza prefisso si identifica un elemento HTML.
• Se si inseriscono più selettori separati da virgola il gruppo di regole viene attribuito ad ogni selettore 

body, html { 
	height: 100%; 
} 
body { 
	font-family: 'Open Sans', sans-serif; 
	font-size: 16px; 
	font-weight: 300; 
	color: #333333; 
	background-color: #ffffff; 
} 
h1, h2, h3, h4, h5, h6 { 
	font-weight:700; 
} 

CLASSE

• Un selettore preceduto da un punto identifica una classe.
• Una classe è un nome che identifica un gruppo di regole di stile.
• Gli elementi della pagina che contengono quel nome nell’attributo class seguono le regole di stile che la classe identifica 

.red { 
	color: #dd0000; 
} 
.text-center { 
	text-align:center; 
} 
.text-right { 
	text-align:right; 
} 

ATTRIBUTO

• Un selettore compreso tra parentesi quadre rappresenta un attributo.
• Esistono varie sintassi .
  • [target] Seleziona tutti gli elementi con un attributo target
  • [target="_blank"] Seleziona tutti gli elementi con target="_blank"
  • [title~="flower"] Seleziona tutti gli elementi con un attributo title che continene la parola "flower"
  • a[href^="https"] Seleziona tutti gli elementi <a> il cui attributo href inizia con "https"
  • a[href$=".pdf"] Seleziona tutti gli elementi <a> il cui attributo href termina con ".pdf"
  • a[href*="w3schools"] Seleziona tutti gli elementi <a> il cui attributo href contiene la stringa "w3schools"

/* Seleziona tutti gli elementi che  hanno l'attributo title*/ 
[title]{  
	background-color:#ffffdd;  
}  

/* Seleziona tutti gli elementi a in cui l'attributo href inizia con #*/ 
a[href^="#"]{  
    text-decoration: underline; 
    color: darkmagenta; 
}

ID

Un selettore preceduto da # identifica una elemento con un determinato id.

/* Seleziona l'elemento con attributo  id="main" */ 
#main { 
	font-family:'Times New Roman', Times, serif; 
	font-size: 20px; 
}

PSEUDO SELETTORI

PSEUDO CLASSI

La pseudo classe è un specifica del selettore. La sintassi è: selettore:pseudo-classe . Usando le pseudo-classi posso attribuire un particolare aspetto ad un elemento quando si trova in un determinato stato. Esempi:

• :hover indica lo stato di un elemento quando il puntatore del mouse passa sopra all’elemento stesso
• :focus indica lo stato di un elemento quando ha il «il focus»
• :nth-child(n) indica un elemento quando è l’ennesimo figlio del suo parent.

/* Seleziona ogni elemento a contenuto in un elemento li  a sua volta contenuto in un elemento ul che sta dentro un nav con classe indice quando il cursore del mouse e  sopra l'elemento*/ 
nav.indice ul li a:hover { 
	color: #dd0000; 
} 

/* Vengono selezionati il secondo e il terzo figlio  ci ogni elemento con classe header-col ccontenuto in un elemento con classe header-main*/ 
.header-main .header-col:nth-child(2),  
.header-main .header-col:nth-child(3) { 
	height:40%; 
	text-align: right; 
} 

PSEUDO ELEMENTI

Lo pseudo elemento è un specifica del selettore. La sintassi è: selettore::pseudo-elemento. Usando gli pseudo-elementi posso attribuire un particolare aspetto ad un parte dell'elemento senza che la struttura HTML la differenzi. Esempi:

• ::after e ::before consentono di inserire contenuto dopo o prima l'elemento identificato dal selettore
• ::first-line consente di modificare l'aspetto della prima riga di testo di un elemento
• ::first-letter consente di modificare l'aspetto della prima lettera di un elemento
• ::selection determina l'aspetto della porzione di testo selezionata dell'utente

Nota bene Tutti i maggiori browser, per il momento, supportano sia la sintassi con doppi due punti selettore::pseudo-elemento che la sintassi con i due punti singoli selettore:pseudo-elemento mentre Microsoft Internet Explorer 8 non supporta la sintassi con i doppi due punti.

SELETTORI COMPOSTI

UNIONE DI SELETTORI

Quando viene seguito senza separatori da un selettore di classe, di id, di attributo o di pseudoclasse, vengono selezionati solo gli elementi che soddisfano ad entrambi i criteri. Esempi:

• nav.indice: elementi nav il cui attributo class contiene indice
• div#main: la div con id uguale a main
• input[type=‘text‘]: tutti gli elementi input con l’attributo type uguale a text

nav.indice { 
	width:95%; 
	position:static; 
	text-align: left; 
	transform: translate(0,0);
	margin: 40px auto 10px; 
} 

SELEZIONARE UN ELEMENTO CHE È DENTRO UN ALTRO ELEMENTO

nav.indice ol li a { 
	color: #000; 
}

Seleziona tutti gli elementi <a> che sono dentro un elemento <li> che a suo volta è dentro un elemento <ol> che è dentro un elemento <nav> con classe indice. 

SELEZIONARE UN ELEMENTO CHE È FIGLIO DI UN ALTRO ELEMENTO

nav.indice > ol > li a { 
	color: #000; 
}

Seleziona tutti gli elementi <a> che sono dentro un elemento <li> che è figlio di un elemento <ul> che è figlio di un elemento <nav> con classe indice. In questo modo viene stilizzata solo la lista di primo livello, le sottoliste annidate dentro gli elementi <li> sono escluse.

ELENCO COMPLETO DEI SELETTORI

Dettagli: http://www.w3schools.com/cssref/css_selectors.asp

PROPRIETÀ CSS

FONT E TESTO

font-family

• La famiglia di font di un testo viene impostato con la proprietà font-family
• La proprietà font-family può contenere diversi nomi dei font. Se il browser non supporta la prima font, cercherà la successiva, e così via.
• Il tipo di carattere preferito sarà il promo della lista, e la famiglia generica, l'ultima e verrà utilizzata se nessun altra font è disponibile.
• Nota : Se il nome di una famiglia di font è più di una parola, deve essere tra virgolette, come: "Times New Roman".
• L'elenco delle font è separato da virgole:

body {
    font-family: "Times New Roman", Times, serif;
}

font-style

• La proprietà font-style è principalmente utilizzato per specificare il testo corsivo.
• Tre valori possibili:
  • normal - Il testo viene visualizzato normalmente
  • italic - Il testo viene mostrato in corsivo
  • oblique - Simile al corsivo

p.normal {
    font-style: normal;
}
p.italic {
    font-style: italic;
}
p.oblique {
    font-style: oblique;
}

font-size

La proprietà font-size è determina il corpo del font. Posso assegnare: •

• una misura – 16px, 1.2em
• una percentuale – 100%
• una parola riservata – small, large

Le misure più utilizzate sono i pixel (suffisso px) e em (suffisso em). Nel primo caso viene indicata una misura assoluta (l'altezza che ha, in pixel, il carattere sullo schermo). L'unità di misura em è relativa alla dimensione di default che è stata assegnata al carattere.

p {
    font-size: 18px;
}
h1 {
    font-size: 2.4em; /* Equivalente a (2.4 * 18) 43px */
}

font-weight

La proprietà font-weight è determina il peso del font. Posso assegnare:

• una misura  da 100 a  900
• una parola riservata: bold, normal, lighter, bolder

p {
    font-weight: normal;
}
strong {
    font-weight: 900;
}

font-variant

La proprietà font-variant è determina se il font è reso in maiuscoletto. Posso assegnare:

• normal
• small-caps

p {
    font-variant: normal;
}
h1 {
    font-variant : small-caps;
}

color

La proprietà color è determina il colore del testo. Posso assegnare:

• Il nome di un colore come red
• Un valore esadecimale (usando il prefisso #) come #ff0000
• Le funzioni rgb e rgba come rgb(255,0,0)

body {
    color: #333333;
}
h1 {
    color : darkblue;
}

text-align

La proprietà text-align è determina l'allineamento del testo. Posso assegnare i valori left, right, center e justified.

h1 {
    text-align: center;
}
h2 {
    text-align: left;
}

text-decoration

La proprietà text-decoration aggiunge o elimina la sottolineatura e altre decorazioni. Posso assegnare i valori none, underline, overline e line-through.

.errore {
    text-decoration: line-through;
}
a {
    text-decoration: none;
}

text-transform

La proprietà text-transform determina se il testo viene reso in maiuscolo, minuscolo o normale. Posso assegnare i valori none, lowercase, uppercase e capitalize.

.h1 {
    text-transform: upercase;
}
.lowercase {
    text-transform: lowercase;
}

text-indentation

La proprietà text-indentation determina l'ammontare del rientro della prima riga del testo. Posso assegnare una misura (px, em, % ecc).

p{
    text-indentation: 30px;
}

letter-spacing

La proprietà letter-spacing determina l'ammontare dello spazio tra i caratteri. Posso assegnare una misura (normalmente pixel) . 0 indica la distanza normale, una misura positiva aumenta, una negativa diminuisce.

h1{
    letter-spacing: 3px;
}

line-height

La proprietà line-height determina l'interlinea utilizzata per il testo Posso assegnare:

• una misura assoluta (es. 20px)
• una misura relativa al corpo del carattere (es: 1.4 )

h1{
    line-height: 1.1;
}

text-direction

La proprietà text-direction determina la direzione di scrittura Posso assegnare rtl (right to left) o ltr (left to right):

body{
    text-direction: rtl;
}

word-spacing

La proprietà word-spacing determina l'ammontare dello spazio tra le parole. Posso assegnare una misura (normalmente pixel) . 0 indica la distanza normale, una misura positiva aumenta, una negativa diminuisce.

h1{
    word-spacing: -2px;
}

text-shadow

La proprietà text-shadow aggiunge un ombreggiatura al testo. Posso assegnare tre misure e un colore:

h1{
    text-shadow: 2px 2px 5px red;
}

crea un ombra spostata a destra di 2px, in basso di 2px, sfumata per 5px di colore red.