Lezione 1
Bentornato nel web!
Web = network di computer collegati tra loro. Dal 2014 esistono più di un miliardo di siti.
Per cosa usiamo i siti web?
Prima li usavano i ricercatori per condividere le proprie ricerche (es: ricerca della collisione di particelle ad alta energia), ora vengono usati invece per quasi tutto (social network, siti di fotografie, siti di viaggi, giornali online).
Che cos'è il web?
Insieme di computer tra loro collegati che possiedono siti web. Quando un computer è collegato al web ed emette un sito web viene definito server.
- HTML (per elaborare il contenuto del sito)
- CSS (per dargli un aspetto)
- JavaScript (per renderlo interattivo)
HTML+CSS+JS= sito web.
Come vede un sito di questo tipo un utente?
Per navigare si utilizza un’applicazione dedicata (Chrome, Firefox, Internet Explorer), definiti browser: cercano di mostrare i siti nello stesso modo, ma in realtà sono differenti; appaiono a volte dei bugs che ci segnalano un problema e ci invitano ad usare un altro sito. L’applicazione dedicata non è però sufficiente, perché servono anche i clients (i dispositivi attraverso i quali possiamo consultare i siti web: computer, tablet, telefono ecc), che possono avere caratteristiche diverse (dimensioni, con o senza tastiera, colori); i siti devono cercare di funzionare correttamente con ogni tipo di dispositivo.
Lezione 2
Nozioni di base di HTML
HTML → elaborare il contenuto del sito
CSS → layout
JavaScript → il sito diventa interattivo
Browsers: clients (devices)
Ogni pagina web inizia con la scritta <!DOCTYPE html>: il browser segnala che la pagina è scritta in un html moderno e non datato e poco appropriato. L’HTML è un linguaggio di tipo “mark up” → è basato tutto sui tag. Tag: elemento che inizia con una parentesi angolata < e finisce con un’altra parentesi angolata >. Il primo tag di ogni pagina è sempre <html> (uguale all’ultimo tag, ad eccezione dell’aggiunta del simbolo / </html>. Il tag html deve contenere tutti i tag che costituiscono la pagina → ce n’è uno all’inizio e uno alla fine. Molti dei tag html si scrivono in coppia, ma non tutti. Sotto il tag di html si trova sempre un tag <head>, che contiene i tag attraverso i quali il browser riesce a creare la pagina, ma non contiene nulla di ciò che l’utente vede effettivamente. Segue il tag <meta> che fornisce al browser maggiori informazioni su come creare la pagina (es: se stai utilizzando caratteri comuni come quelli dell’inglese e non difficili come quelli dell’arabo, il tag meta dovrà essere uguale a “utf-8”). Poi c’è il tag <title>, che il browser utilizza per il titolo della pagina mostrato nella barra in alto di una pagina web. Segue il tag </head> per poi proseguire con il tag dove avverrà ogni cosa: il tag <body> </body> tra i quali si aggiunge il corpo. A tag <body> segue il tag <h1> </h1> per aggiungere il titolo, che scriveremo tra i 2 tag di apertura e di chiusura.
<!DOCTYPE html>
<html>
<head>: tag sotto cui con altri tag il browser crea pagine
<meta utf-8> (caratteri latini)
<title> All about rabbits! </title>
</head>
<body>
<h1> All about rabbits! </h1> : per titoli
<h2> … </h2> : per sezioni meno importanti
<p> → paragrafo </p>
<br> → per andare a capo
</body>
</html> → tag finale
Riempire lo scheletro
Per i titoli si possono utilizzare 6 tag:
- <h1>: per il titolo più importante della pagina
- <h2>: per aggiungere i titoli di altre sezioni (leggermente meno importanti)
- <h3>
- <h4>
- <h5>
- <h6>: per il titolo meno importante
Per creare un paragrafo si utilizza il tag <p> </p>. Problema: andare a capo. In html il browser ignora gli accapo e gli spazi, per crearli bisogna utilizzare il tag <br> (=break), di cui non esiste un tag conclusivo, poiché non contiene alcun contenuto → non ha bisogno di un riferimento che la concluda.
Lezione 3
Suggerimento rapido: tag HTML
Il tag di chiusura viene sempre dopo il contenuto del tag → si dice al browser che si vuole che il tag finisca. Il contenuto di un tag HTML è ciò che sta tra il tag di apertura e il tag di chiusura - questo è ciò che intendiamo quando diciamo “dentro” un tag. Il contenuto di un tag può essere testo normale o un mix di altri tag.
Dove dovrebbero stare i tag?
Qualsiasi contenuto visibile sulla pagina web deve stare tra il tag <body> di apertura e il tag </body> di chiusura. I tag <h1> e <p> sono i contenuti del tag <body>, quindi si dice che stanno “dentro” al tag <body>. In effetti, questi tag devono stare dentro il tag <body>.
Lezione 5
HTML: enfasi del testo
<em> sta per enfasi: lo si usa per indicare dove metteremmo l’enfasi se stessimo parlando → corsivo. Per il grassetto: <strong></strong>. I tag <em> e <strong> possono anche essere combinati per un grassetto corsivo.
Lezione 7
HTML: liste
<ul></ul> tag per le liste. L=lista, U=unordered
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.