Informatica 1 Anno

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

Informatica 1 Anno

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Informatica 1 Anno

Caricato da

Copyright:

Formati disponibili

HTML

testo collegato ad un altro → LINK

1. Primo tag di ogni pagina: <html>

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

NON chiudere con il simbolo > !

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

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

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

Commenti→ VISIBILI SOLO A CHI GUARDA I CODICI DEI SITI

<tr> →riga della testa

<th> → contiene le etichette delle colonne

<td>= riga del corpo

NB: se il colore è semplice, non ci sono

Colorare lo sfondo dietro il testo:

Preparo il CSS per il paragrafo

Modifico l’HTML del paragrafo

Inserisco nel CSS

Metto il tag delle

NB: quando il nome di un font è

Si ragiona in px=pixel per il font

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

Forma abbreviata per scrivere:

em→ calcola automaticamente in relazione alla dimensione del font

Nascondere l’overflow ci sono 2 modi:

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

Se voglio valori diversi per ogni lato (senso orario)

Aggiungere bordi ai div, cornici all’immagine

Anche: Groove red/ double red

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

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

Hover: cambia sfondo momentaneamente quando si

Focus: Active: permette agli elementi di essere

POSSO RAGGRUPPARLI COME SOPRA IN H1, H2

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

Comment→ per ricordare cosa disegno:

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

stroke→ colore della linea

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

per colorare dentro le figure→ fill()

FUORI DALLA FUNCTION: var

Shortcuts→a posto di scrivere certe codici

Interazioni con il mouse

Fattori if→ "fare qualcosa solo in determinate condizioni"

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

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

1. inserisco una variabile

Se ci sono più casi

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

Loop for nidificati

Potrebbero piacerti anche