STUDIO TECNOLOGIE WEB:

CSS:
Css si usa per cambiare gli elementi di una pagina web:
 Type selector: viene applicata a tutte le istanze dell’elemento specificato
hr { width: 50%; } (imposta le horizontal line a 50%)
 Universal selector: viene applicato a tutti gli elementi della pagina
*{ text-align: center; }

Nel caso si utilizzino type selector, si può assegnare la stessa priorità a più tipi di elementi, in questo modo:
h2, p { font-style: italic; color: blue; }

Esempio:

I selettori sono inseriti nel contenitore style all’interno del blocco head. È possibile scriverlo anche nel body,
ma la convenzione vuole che sia scritto nell’head.
In style possono essere aggiunti attributi, se questo non viene fatto, il codice da per sottointeso la seguente
forma: <style type=”text/css”>.

Costruzione generica di un selettore:

Class selector: permette di selezionare elementi che hanno un determinato valore nel loro attributo class.
......
.red { background-color: tomato; }
......
<div class =”red”> Tomato Background </div>
……

Anche in questo caso, più class selector con gli stessi attributi possono essere separati da virgole.

ID selector: simile al class, permette di selezionere un elemento che ha un determinato valore nell’attributo
ID, è usato in combinazione con i link e JavaScript.
#id-value { property1: value; property2: value; …… }

Se si vuole appplicare un CSS a del testo che non coincide con altri elementi HTML si devono usare gli
elementi span o div
Se si vuole modificare una parte di un blocco di testo si usa span. Se invece si vuole modificare un intero
blocco si deve usare div. Esempio:
Si possono usare più selettori di classe come valori dello stesso attributo di classe, e vale il principle of
locality, ovvero, le regole locali hanno la precedenza su quelle globali
<span class=”white orange-background”> ….. </span>

Style attribute e container: uno style atrtibute permette di inserire una coppia proprietà/valore
direttamente nel codice di un dato elemento (sconsigliato):
<h2 style=”text-decoration:underline;”>...</h2>

Invece lo style container funziona nel seguente modo:

<style>
.....
</style>
Se il numero di regole CSS è grande è consigliato usare un file esterno. Il file va rinominato con l’estensione
.css e possono includere commenti tra i simboli /* */.
Per includerlo si usa: <link rel=”stylesheet” href=”name of file”>

Di seguito diversi esempi su diversi utilizzi del rgb:

Ogni elemento HTML può essere considerato come un box. Ognu box ha un bordo, uno spazio detto
padding all’interno e un margine all’esterno. (border-width, padding, margin).
Essi possono essere modulati in questo modo: .label { border: solid; padding: 20px; margin: 20px; }
Al posto dei px posso usare anche le percentuali, che aumentano o diminuiscono in concomitanza al
container

L’elemento Figure: un elemento figure può contenere testo, codice, grafici, immagini, tabelle, etc... mentre
l’elemento figcaption permette di inserire una didascalia:

Organizational elements:
lo scopo di questi contenitori è quello di raggruppare i contenuti delle pagine web in modo che possano
essere facilmente manipolati tramite CSS e JavaScript. Tra questi troviamo:
 Section
 Article
 Aside
 Nav
 Header
 Footer

Section: usato per raggruppare elementi, solitamente contiene titolo e/o paragrafi:
Article: è usato per raggruppare una o più section formando un blocco indipendente dal resto della pagina

Aside: è usato per raggruppare del contenuto collegato al resto della pagina ma con delle restrizioni,
solitamente collocato in posizione laterale, nell’esempio seguente sulla destra:

Nav: solitamente contiene link ad altre pagine, oppure altre parti della pagina corrente, al suo interno è
presente l’elemento a che implementa un link grazie all’attributo href, se il valore di href inizia con # si fa
riferimento alla pagina corrente, il target è un elemento avente il valore ID uguale a quello che segue #:

Header: è utilizzato per tenere insieme uno o più titoli (h1-h6), solitamente si usa con section o article
Footer: è usato per tenere insieme le informazioni che si possono trovare a piè di pagina

Tables: per creare una tabella si usa l’elemento table, al suo interno si inserisce un elemento tr per ogni
riga, e dentro ogni tr, td, per ogni cella. Dentro ogni td, il contenuto della cella.
È importante ricordare che il contenuto di una cella può essere qualsiasi cosa
Pseudo-Class selector: è un selettore di classe che si applica solo a determinate istanze, per esempio, se
volessi modificare il colori di sfondo solo della prima riga di una tabella o l’ultimo elemento di una lista:
tr:first-of-type {background-color: palegreen; }

A volte all’interno di una tabella alcune celle sono fuse tra loro, per ottenere una cella che si estende per
più di una colonna si aggiunge colspan all’elemento td
Per ottenere una cella che si estende per più di una riga si usa rowspan nello stesso modo, esempio:
<td colspan=”2”> ..... </td>

Se uso table nello style, posso usare un elemento con div e farlo comportare come una tabella, in questo
modo:
Se volessi controllare dall’esterno dimensioni e posizioni degli elementi che compongono la tabella, dovrei
usare position e properties.

Oltre ad absolute, posso usare relative, assegnandolo alla proprietà position. Impostando il relative
positioning si possono usare gli stessi valori di absolute, che però farà riferimento alla posizione
dell’elemento.

Responsive Web Design: è la scrittura di codice che genera pagine web che si adattano dinamicamente alle
differenti dimensioni dello schermo su cui sono visualizzate ed al suo orientamento.
Si parla di resolution switching quando si fornisce una lista di differenti versioni della stessa immagine in
cui altezza e larghezza variano ma il rapporto tra le due misure rimane uguale.
 L’attributo srcset fornisce una lista di coppie nome e ampiezza (in pixel) di un immagine
 L’attributo sizes contiene una lista di coppie di valori che aiuta il browser a scegliere il file
appropriato tra quelli in srcset. Ogni coppia è composta da una condizione sull’ampiezza e dalla
larghezza dello slot in cui viene mostrata l’immagine
 L’attributo src contiene il file da caricare se il browser non riconosce i precedenti

Esempio:
Un procedimento simile si può utilizzare per qualsiasi elemento.

Iframe: è usato per creare all’interno della pagina web un’area all’interno della quale inserire un web
document ovvero un document dotato di url (cioe un’altra pagina web o immagine).

Prima dell’HTML5 era necessario installare dei plug-in per riprodurre un file audio, ormai non è più così,
dato che tutti i browser includono un player che può essere avviato dall’elemento audio.
 Src specifica percorso e nome del file
 Controls dice al browser di mostrare una barra di controllo (start, pausa, controllo volume)
 Preload indica se caricare il file al caricamento della pagina (audio), se caricare solo i metadata
(metadata) o se aspettare che l’utente usi il player (none)
 Autoplay dice al player di far partire il file al caricamento della pagina, loop specifica che la
riproduzione deve essere continua

Non tutti i formati sono supportati dai vari browser perciò è possibile fornire più versioni dello stesso file
tra cui il browser sceglierà.
Esempio:

Per quanto riguarda i video il ragionamento è analogo, ma si aggiungono gli attributi width e height
specificando le dimensioni del box. Anche in questo caso è possibile fornire più formati.

È possibile inserire un’immagine di sfondo per l’intera pagina o per singoli contenitori con la proprietà
background-image in questo modo:

JAVASCRIPT: