Sei sulla pagina 1di 18

HTML

Inventore: Tim Berners-Lee (che ha inventato anche http= HyperText Transfer Protocol)

HTML= HyperText Markup Language  Linguaggio Markup= usa i tag per intervenire su un contenuto

testo collegato ad un altro → LINK


html= linguaggio markup: basato sui tag (=elemento
che inizia con < e finisce con >)

1. Primo tag di ogni pagina: <html>


ultimo tag di ogni pagina: </html>
2. <head></head> → tag attraverso il quale il
browser riesce a creare la pagina
i) <meta></meta> → fornisce + info al
browser su come fare la pagina
ii) <title></title> →titolo della pagina

3. <body></body> → qui c’è tutto quello che


vedo nella pagina web
(1) <h1></h1> → titoli NEL BODY
ci sono 6 tag per i titoli: da <h1> a <h6>
(2) <p></p>→ paragrafi

NB: in HTML il browser ignora l’andare a capo (es. per una poesia) e altri spazi →BISOGNA SEGNALARLO
 <br> (break) alla fine di ogni riga
Nb: non c’è un tag di fine
Aggiungere enfasi→<em> </em>= italics (corsivo)
Si possono combinare
Grassetto: <strong></strong>
Fare una lista:
 <ul> </ul> → questa SUDDIVIDES SOLAMENTE
 <li> </li>=aggiunge i pallini
 <ol> </ol>= aggiunge i numeri

Aggiungere immagine

NON chiudere con il simbolo > !


NB: IMMAGINI SOLO DA INTERNET, specificando l'URL Si chiude alla fine finito il tag
della img
 <img src= “…"
 <alt> aggiunge descrizione all'immagine es per i cechi
 <width> regola la grandezza dell'immagine sulla pagina
 <height> non sempre bene metterla
Link in HTML
Tag dei link= <a></a> → ci va il testo del link

 Per inserire un link inserisco un attributo → href="…"

 target="_blank"→ apre link in un'altra pagina


 linkare immagini: copiare tutta la struttura dei html dentro il tag <a></a>
Sommari: tra il <a> e nel href= metto l'id di un <h2>
es:

1. <li><a href="">History of the web</a></li>


2. <h2 id="web-history">History of the web</h2>
3. <li><a href="#web-history">History of the web</a></li>

1
1

2
1

Commenti→ VISIBILI SOLO A CHI GUARDA I CODICI DEI SITI


<! -- …… -- >

Es:
Tabelle
<thead> → indica che la prima riga è il titolo

<tr> →riga della testa


Testa

<th> → contiene le etichette delle colonne

RISULTATO:

<td>= riga del corpo


Corpo

RISULTATO:
CSS
Cambiare colore dei font:

NB: se il colore è semplice, non ci sono


problemi ma quando inizio a volere
colori più complicati es verde erba,
devo usare SPETTRO RGB

Colorare lo sfondo dietro il testo:


Allineamento/decorazione testo
 text-align: …
 text-decoration: underline→ sottolinea
 text-decoration: none→ toglie la sottolineatura dai link

Tag id
Se voglio cambiare solo il colore di un determinato titolo/paragrafo?
Devo dare un’identità ad un paragrafo/titolo

Preparo il CSS per il paragrafo


da modificare
1

Modifico l’HTML del paragrafo


aggiungedo il tag id= “…”

Inserisco nel CSS


#nomedell’id e i vari
3
dettagli

Tag class
Per cambiare/assegnare la stessa caratteristica a più elementi

Metto il tag delle


classi a tutti i
paragrafi
Vado in <style> e
inserisco il nome
delle classi
Font
Tag: font-family: …

NB: quando il nome di un font è


generico, NON si mettono le “” MA
quando è SPECIFICO, SI METTONO

Dimensioni font

Si ragiona in px=pixel per il font


del body

Si ragiona in em per il font dei titoli. Non è


impostabile perché li proporziona il browser.
Io posso solo scegliere di quanto ingrandirlo
rispetto al font

Stile Font
 font-weight: bold→ grassetto
 font-weight: italic; →corsivo
 font-weight: …

Forma abbreviata per scrivere:

Cambio interlinea

calcolato in pixel

em→ calcola automaticamente in relazione alla dimensione del font


Tag <span>→ raggruppa testo→ cambio solo determinate parole

Tag <div> = raggruppa elementi => spesso si usano per organizzare/suddividere una pagina
Larghezza del testo in div
Altezza testo→ NB: il testo esce dai confini del background

Nascondere l’overflow ci sono 2 modi:


Nasconde l’overflow ma non permette di leggere la parte nascosta

Nasconde l’overflow e crea una barra di scorrimento in modo da


poter leggere tutto il testo
The Box model

Se voglio valori diversi per ogni lato (senso orario)

sopra dx sotto sx
Per centrare tutti gli altri div

Aggiungere bordi ai div, cornici all’immagine

Anche: Groove red/ double red

RISULTATO

padding: … → Tra bordi e colori di sfondo aggiunge spazio


Per muovere

Per far si che gli elementi si spostino con lo scorrere della pagina→ cambiare da position: absolute a
position: fixed

Immagini circondate da testo:

Il piè di pagina e per far sì che non si restringa= clear: both

Caratteristica ad una classe

Raggruppare titoli con nuova regola CSS


Pseudo classi→ selezionare elementi che non fa parte della struttura web o che comunque non posso
esprimere con altri selettori

Hover: cambia sfondo momentaneamente quando si


è sopra un link con il mouse

Focus: Active: permette agli elementi di essere


attivati

POSSO RAGGRUPPARLI COME SOPRA IN H1, H2

Specificità
- Id: + specifico di una classe
- classe: + specifica di un elemento

se due selettori sono ugualmente specifici, prevale quello inserito più in basso=> se voglio che un selettore
"vinca sull'altro, lo taglio e lo incollo sotto
JAVA
Cerchi→ ellipse(200, 200, 300, 350)
primo numero: left/right => x da 0 a 400
Secondo: up/down => y da 0 a 400
Terzo: wide/thin
Quarto: tall/short

Rettangoli→ rect(175, 345, 50, 50);


NB:X e Y controllano gli spigoli del quadrato, non il centro

Comment→ per ricordare cosa disegno:


//face
//mouth

Linea→line();
primo numero: inizio della linea
secondo numero inclinazione
terzo numero: fine
quarto numero: inclinazione

NB:ATTENZIONE ALL'ORDINE delle figure perchè ogni immagine


si sovrappone l'una sull'altra

stroke→ colore della linea


strokeWeight→ spessore linea
noStroke(toglie i bordi)

Colorare:
Per lo sfondo→ background();//rgb
primo parametro: rosso
secondo: verde
terzo: verde

NB: SE SPOSTO IL BACKGROUND: MI COLORA SOPRA LA FIGURA

per colorare dentro le figure→ fill()


Variabili
eyeSize = 20; => il valore di eyesize è 20
NB: posso scrivere anche “var eyeSize = 20”

Altre variabili
var x = 200 => sposta la posizione di un determinato oggetto

Per spostare un altro elemento, sempre in relazione all'oggetto principale, sul valore di x, scrivo "x - 50"

Animazioni
uso la variazione: var x per far muovere qualcosa, es macchina
draw= → e si apre una funzione che ripeterà tutti i codici inseriti

FUORI DALLA FUNCTION: var


DENTRO LA FUNCTION: tutti i dati del disegno e il codice della variabile
*= moltiplica /= divide

Shortcuts→a posto di scrivere certe codici


es: x= x+1 => x+=1
y= y-2 => y-=2

oppure eyesize++;

Interazioni con il mouse


da scrivere sempre dentro il "draw function"

Fattori if→ "fare qualcosa solo in determinate condizioni"

Se, in questo caso, voglio far si che la palla rimbalzi


nel mio schermo, metto questi valori if

Fanno sì che la palla, in determinate condizioni, faccia


quello che le dico

Valori booleani

1. inserisco una variabile


2. Inserisco un valore if che permette alla mia
condizione di realizzarsi in valore alla variabile
inserita. Dato che questo if è sempre vero, il disegno
si realizzerà. Cambiando la variabile, rischio di non
avere più le condizioni adeguate
Operatori logici: quando voglio che due condizioni siano tali in determinate situazioni

Else→ altrimenti
Posso usarlo per sostituire un if

Se ci sono più casi


While Loop

For Loop→ modo diverso e più semplice di scrivere un while

Start= dove voglio che inizi How long= quanto voglio che si ripeta Change= cambia I fattori y (nel caso di es)

Loop for nidificati