Prepara i tuoi esami
Studia grazie alle numerose risorse presenti su Docsity
Ottieni i punti per scaricare
Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium
Guide e consigli
Prepara i tuoi esami
Studia grazie alle numerose risorse presenti su Docsity
Cerca documenti
Prepara i tuoi esami con i documenti condivisi da studenti come te su Docsity
Cerca documenti Store
I migliori documenti in vendita da studenti che hanno completato gli studi
Video Corsi
Preparati con lezioni e prove svolte basate sui programmi universitari!
Quiz
Rispondi a reali domande d’esame e scopri la tua preparazione
Ottieni i punti per scaricare
Guadagna punti aiutando altri studenti oppure acquistali con un piano Premium
Community
Chiedi alla community
Chiedi aiuto alla community e sciogli i tuoi dubbi legati allo studio
Classifica università
Scopri le migliori università del tuo paese secondo gli utenti Docsity
Guide Gratuite
I nostri eBook salva studente
Scarica gratuitamente le nostre guide sulle tecniche di studio, metodi per gestire l'ansia, dritte per la tesi realizzati da tutor Docsity
HTML5 E CSS Riassunto, Dispense di Elementi di Informatica
Materiale di corso riassunto HTML5 ( per umanisti)
Tipologia: Dispense
2017/2018
In offerta
Offerta a tempo limitato
Caricato il 06/06/2018
rawdha_bouguerra 🇮🇹
4.3
(22)13 documenti
1 / 124
In offerta
Documenti correlati
Anteprima parziale del testo
Scarica HTML5 E CSS Riassunto e più Dispense in PDF di Elementi di Informatica solo su Docsity! HTML E CSS HTTP://DIVEINTOHTML5.INFO/ HTTP://WWW.W3SCHOOLS.COM/HTML/ HTTP://WWW.HTML.IT/GUIDE/GUIDA-HTML/ HYPERTEXT MARKUP LANGUAGE (HTML) • Linguaggio per formattare documenti ipertestuali • Esempio: • Documento à curriculum • Documento ipertestuale à il curriculum contiene dei link • Documento ipertestuale strutturato à il curriculum ha un titolo • E’ uno standard del W3C • World Wide Web Consortium - organizzazione internazionale di standardizzazione fondata nel 1994 • E’ lo standard più utilizzato per la creazione di pagine web visualizzabili attraverso i browser • Esempi di browser: Internet Explorer, Chrome, Firefox, Opera etc. STRUTTURA DI UNA PAGINA HTML • Ogni pagina HTML ha una struttura “ad albero” • Tutti gli elementi sono contenuti nell’elemento “HTML” • Lo standard definisce delle linee guida su come questi elementi devono essere visualizzati su un browser • Quali sono i nomi e i tag degli elementi definiti dallo standard HTML? • Tanti! Noi ne vedremo alcuni, ma potete trovare la lista completa qua: • https://developer.mozilla.org/en- US/docs/Web/Guide/HTML/HTML5/HTML5_element_list ESEMPIO Elemento “HTML”: contiene tutti gli altri elementi della pagina <!doctype html> <html> <head> <title>Hello world</title> </head> <body> <h1>Prova</h1> <p>Ciao questa e’ una prova</p> <a href=http://www.google.it>link</a> </body> </html> prova.html Elemento “head”: contiene i metadati nell’intestazione della pagina Elemento “paragraph”: Definisce un paragrafo Elemento “header”: Definisce un titolo: header1, 2, 3 fino a 6 Elemento “anchor”: Definisce un collegamento ipertestuale ESEMPIO: STRUTTURA HTML HEAD BODY Hello World TITLE ProvaH1 Ciao questa e’ una provaP linkA IL BROWSER • Quando digitiamo www.google.it nella barra degli indirizzi 1. Viene risolto il nome (www.google.it) in un indirizzo IP (ad es. 173.194.44.23) 2. Viene aperta una connessione TCP con il server sulla porta 80 3. Viene scaricata la pagina HTML principali (tipicamente index.html) 4. Vengono scaricate eventuali altre pagine o allegati contenute nella pagina 5. Viene interpretato il codice HTML e visualizzato su una finestra (rendering) ESEMPIO
GIOV icone x
© G & https://ww.google.it
mi mocs:
e
Italia
Goo0g
Cerca con Google Mi sento fortunato
Elements Resources | Network | Sources Timeline Profiles | Audits | Console
Name Status ; Size Time
paro Method Stati a ipiaise Content__|Latency | 'MElME sssmsì aszmsi iis 1390) 166) 104) 222
www.google.it 200 08 196ms __
<> GET OK text/html Other 132 KB 140ms
v1_800b6037.png cet 200 mwww.qgoogle.it:227 08 365ms
ssl.gstatic.com/gb/images OK Image/pnI. | parser 52.4 KB 90ms
photo.jpg GET 200 n mww.google.it:227 1.7 KB 394 ms
Ih4.googleusercontent.com/-wSQZmoE ok Image/IPe9 | parser LOKB 393 ms
«AIRRSTOWUW2kO-cGlwZmCZ-N8 cer 200 text/i mww.google.it:229 08 323ms
(E /xjs/_/js/k=xjs.s.en_US.ZFNDGIDES8KM. 0K tijavas.. Script. 372 KB 192 ms e»
photo,jpg Da 200 n uww.qoogle.it:227 08 522 ms
Ih4.googleusercontent.com/-wS5QZmoE OK “mage/pe9 Parser 1.6 KB 327 ms
logo11w.png 200 vavw.qoogle.it:227 OB 522 ms
e ss] i
LL /images/srpr CEL 0K inaoe pro) Parser 13.7 KB 322ms
AItRSTNxOmOYZGmZgUnaqrrlha3€ cet 200 www.google.it:46 47.3 KB 475ms
www.gstatic.com/0g/_/js/k=0g.0g.en_! ok text/jnas.. | script 142 KB 240ms
tia.png GET 200 Ls IRSTOWUW2kO-+ LOKB 407 ms
www.google.com/textinputassistant OK Image/PR9. | script 3878 407 ms »
rs=AItRSTOWUW2kO-cG1wZmCZ-N8 cet 200 ca = 1] 08 238ms
EI /4/_/js/k=xjs.s.en_US.ZINDGIDE8KM. OK Pext/ÎavaS... | Script 290KB 143 ms nd
STORIA • Come è nato lo standard? • “I'd like to propose a new, optional HTML tag: IMG…” (http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html) • Standard tutt’ora in fase di definizione: diverse versioni • Al tempo i browser erano: Midas, Xbm, Xpm, Mosaic • La prima pagna web creata (1990): • http://info.cern.ch/hypertext/WWW/TheProject.html • Ancora si visualizza sui nostri browser (anche da cellulare!) • Nel frattempo… STORIA: HTML • Nelle prime pagine web, stile e struttura erano mischiati • Esempio: <font size="3" color="red">Testo di prova</font> • Deprecato! • Successivamente si sono volute separare le parti: • HTML: struttura e contenuto • CSS: stile e formattazione • Perchè? • Codice più facile e mantenibile • Più facilità di adattamento a diversi dispositivi • Miglioramento “semantico” MOLTI BROWSER… • IE, Safari, Firefox, Chrome … • Browser mobile per smartphone e tablet • Browser televisori e console CHE CAMBIANO NEL
TEMPO...
Usage share of web browsers
o |
2
— Internet Explorer
—— Firefox
8 ——_ Chrome
—— Safari
—— Opera
—— Mobile
e
3
2
-
E
8
2
©
® e |
8
2
a
° |
© -|
2009 2010 2011 2012 2013 2014
Year
Source: StatCounter
src: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
CAOS! SOLUZIONI • Tanti browser, dispositivi, versioni dello standard diverse… • Come fare a visualizzare come vogliamo noi una pagina HTML? • Il problema è complicato ma ci sono delle soluzioni e accorgimenti che vedremo • Iniziamo definendo il doctype… DOCTYPE • Prima riga di ogni pagina (moderna) HTML • Definisce il tipo di standard da usare Doctype Standard <!DOCTYPE html> HTML5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Transitional ecc. I browser al loro interno contengono tutti gli standard e passano da uno all’altro a seconda della pagina visualizzata Usiamo questo!
La mia pagina personale
Ciao benvenuto nella mia pagina personale.
ES E M pP I o I miei interessi sono:
® Mangiare
* Bere
* Dormire
1.<!doctype html>
2 <html>
<head>
<title>La mia pagina personale</title>
3
4
5 </head>
6 <body>
7 <h1>La mia pagina personale</h1>
8 <p>Ciao benvenuto nella mia pagina personale.</p>
9 <p>I miei interessi sono:</p>
10 <ul>
11 <li>Mangiare</li>
12 <li>Bere</li>
13 <li>Dormire</li>
14 </ul>
15 </body>
16 </html>
AGGIUNGIAMO UNA IMMAGINE Tag: IMG attributo fondamentale • SRC: percorso dell’immagine (relativo o assoluto con URL) Normalmente le immagini hanno formati GIF, PNG (lossless) e JPEG (lossy)
La mia pagina personale
INSERIRE
UN’IMMAGINE
Ciao benvenuto nella mia pagina personale.
1 <!doctype html> I mici interessi sono:
2 <html> + Mangiare
* Bere
<head> * Domnire
<title>La mia pagina personale</title>
3
4
5 </head>
6 <body> Chiusura facoltativa
7 <h1>La mia pagina personale</h1> in HTML5
8 .
9
<img src="images/homer.png" />
<p>Ciao benvenuto nella mia pagina personale.</p>
10 <p>I miei interessi sono:</p>
11 <ul>
12 <li>Mangiare</li>
13 <li>Bere</li>
14 <li>Dormire</li>
15 </ul>
16 </body>
17 </html>
ESEMPIO. La mia pagina personale
9 <p>Ciao benvenuto nella mia pagina personale.</p>
10 <p>I miei interessi sono:</p>
11 <ul>
12 <li>Mangiare</li>
13 <li>Bere</li>
14 <li>Dormire</li>
15 </ul>
16 <table>
17 <thead>
18 <tr>
19 <th>Nome esame</th>
20 <th>Voto</th>
21 <th>Data</th>
22 </tr> Pr
23 </thead>|
24 <tbody> Ciao benvenuto nella mia pagina personale.
25 <tr>
26 <td>Esame 1</td> I miei interessi sono:
27 <td>18</td>
28 <td>1/1/2014</td> * Mangiare
29 </tr> * Bere
30 <tr> * Dormire
31 <td>Esame 2</td>
32 <td>30</td> Nome esame Voto Data
3 anti Esame 1 18° 1/1/2014
35 </tbody> Esame 2 30. 1/2/2014
36 </table>
37. </body>
38 </html>
COLLEGAMENTI IPERTESTUALI Creati attraverso il tag anchor <a> su cui si imposta mediante l’attributo href (hypertext reference) l’URL a cui vuole andare Esempio <a href=http://www.google.it>Fai click qua per andare su google</a> chiamati anche hyperlink, hypertext anchor o link URL URL: Uniform Resource Locator serve a definire come reperire una risorsa (ad es una pagina web) http://www.sito.com/prova/file.html protocollo o schema Nome o indirizzo IP Percorso (path) della risorsa URL RELATIVI E ASSOLUTI <a href=“images/homer.jpg”> <a href=“http://www.miosito.com/images/homer.jpg”> percorso relativo percorso assoluto index.html images à homer.jpg Stesso funzionamento! I percorsi relativi pero’ sono più corti ed i siti più portabili in domini diversi NELLA NOSTRA PAGINA… Link interni Named anchor Hyperlink per email IL PROTOCOLLO HTTP Client Server dammi una pagina WEB Eccola! Esempio semplificato RISPOSTE HTTP: STATUS CODES Status Descrizione 1xx Informativo 2xx Successo 3xx Redirezione 4xx Errore Client 5xx Errore Server Ogni risposta ha un numero di 3 cifre che identifica l’esito della richiesta VEDIAMOLO IN PRATICA!
© > Cf https://www.google.it
+Lorenzo Gmai
Google
Italia
© Elements Resources | Network | Sources Timeline Profiles ’Audits’Console
Name
Size Time
Status
Path | Method Text Type Initiator Content Latency Timeline a o 2
www.google.it 200 08 136ms
Pe e ok CT TI 133 KB 128ms ®
v1_b444d4f7.png 200 . www.qoogle.it:227 54.2 KB 107 ms Dn
Lal ssl.gstatic.com/gb/images ee OK Image/PRI. | Parser 52.2 KB 87ms
a) rs=AIRRSTPnjDm4Dmck2HC0IFAmICVI 7 200 rextviavas.. Eetuegooge.it229 08 64ms a
2) Jxjs/_/js/k=xjs.s.en_US.TjBJu_Jvix0.0/1 OK Javas--- | Script 369 KB 30ms «.
photo.jpg 200 www.aoogle.it:227 3.6KB = 293ms e
n ih4.googleusercontent.com/-wsQzmoE | SET oK {mage/jPe9 . parser 10KB 189ms ——
-_] logo11w.png 200 . www.qoogle.it:227 08 159ms
cn ,
| /images/sror GET 0K image/png L... 13.7 KB 66ms ed
VEDIAMOLO IN PRATICA! Esempio di richiesta inviata a google quando scriviamo www.google.it nella barra degli indirizzi I FORM Ogni form ha degli attributi: action che indica dove saranno inviati i dati del form method che indica come saranno inviati i dati (GET o POST) target che indica dove sarà visualizzata la risposta (nuova finestra, stessa finestra etc) Gli attributi hanno dei valori di default (valori pre stabiliti se non vengono specificati) Premendo un pulsante è possibile fare il submit di un form, ovvero mandarne i dati al server I FORM <form name="input" action=”pagina.asp" method="get"> Nome: <input type="text" name="firstname"><br> Cognome: <input type="text" name="lastname"> Password: <input type="password" name="pwd"> <input type="radio" name="sex" value="male">Maschio<br> <input type="radio" name="sex" value="female">Femmina <input type="checkbox" name="vehicle" value="Bike">Ho una bici<br> <input type="checkbox" name="vehicle" value="Car">Ho una macchina <input type="submit" value=”Invia"> </form> I COMMENTI Spesso è utile commentare il proprio codice per leggibilità e mantenibilità <!-- questo e’ un commento --> Quando ci sono molti elementi e molto annidati, spesso si commenta la chiusura di un elemento HTML5: VIDEO • Prima i video erano in flash/quicktime • Servivano plugin di terze parti • Nuovo tag <video> • Permette di includere lo stesso video con diversi codec lonava prima...
Prima dobbiamo capire come funz
HHLS3SSI44H3/DHILM 4100] 40) MISA MI MGHOLLBHES315n00]
I COOKIES: IL PROBLEMA • Ogni volta che apriamo una nuova pagina, il nostro browser si dimentica tutto login OK vai sulla mia bacheca no, chi sei? HTML5: LOCAL STORAGE • Permette di immagazzinare dati nel browser • I dati possono essere parecchi (piccolo database) • A differenza dei cookies, i dati non vengono inviati ad ogni richiesta HTML5: ALTRE NOVITA’ • Offline web application • Quali documenti servono a far funzionare l’applicazione offline? • Il browser li scarica e fa funzionare il sito anche offline • Molto utile, ad es. google docs • Geolocation • Il browser puo’ scoprire la tua posizione (se gli dai il permesso) • History, Webworkers etc • Gestione della storia, processi javascript in background HEAD • L’elemento head contiene informazioni sulla pagina non visualizzabili direttamente • Spesso si parla di meta-informazioni (informazioni che descrivono i dati della pagina html) • Esempi sono il titolo della pagina (già visto) • Informazioni sulle keywords, sull’autore della pagina o sul programma utilizzato per creare la pagina stessa • Informazioni per i motori di ricerca • Informazioni per la codifica CSS • CSS = Cascading Style Sheets o Fogli di stile • Semplici file di testo separati dalla pagina HTML ma collegati ad esse mediante link • oppure regole scritte all’interno della pagina • Serve a definire la formattazione di una pagina web • Ad esempio cambiare il colore di una scritta • Allineare il testo a sinistra • Impostare margini • Funzionalità evolute: trasparenze, bordi arrotondati etc • La stessa pagina si puo’ vedere in modi diversi su media diversi • Ad esempio quello che vediamo sul monitor puo’ essere diverso da quello che stampiamo CSS: VERSIONI • CSS1: 1996 – scarsa diffusione • CSS2: 2004 – molto più diffusi, introducono il media type • CSS 2.1 2011 • CSS3: in fase di definizione REGOLA CSS • Per modificare lo stile di un documento possiamo modificarne delle proprietà • ad esempio “la scritta deve essere rossa” • Una regola CSS è definita con la sintassi proprietà: valore • ad esempio “color: red” • Per ogni proprietà esiste un set di valori definibili • Le proprietà si possono riferire a tutti gli elementi del documento, solo ad alcuni o solo ad uno • Elementi diversi hanno proprietà diverse • Le proprietà hanno dei valori di default definite dallo User Agent (ad es. Chrome) APPLICHIAMO LA NOSTRA PRIMA REGOLA Nel blocco “head” inseriamo: <style type="text/css"> h1 { color:red; font-size: 70px; } </style> h1 { color: red; font-size: 70px; } Selettore: a quali elementi si devono applicare le regole? Ad es. a TUTTI gli elementi “h1” Proprietà:valore Proprietà definite da noi Proprietà di default dello User Agent SELETTORI Selettore Si applica a: h1 A tutti gli elementi h1 .rosso A tutti gli elementi con la classe “rosso” #desc All’elemento che ha come ID “desc” h1.rosso Agli elementi h1 con classe “rosso” h1#desc All’elemento h1 che ha come ID desc * A tutti gli elementi ANCORA SUI SELETTORI • elem1 elem3 {propriety: value; } • Applica la regola all’elemento “elem3” che è figlio indiretto di elem1 • elem1 > elem2 {propriety: value; } • Applica la regola all’elemento “elem2” che è figlio diretto di elem1 • elem[attr_name] • Si applica all’elemento elem che ha l’attributo “attr name” • Esistono altri selettori che non vedremo Elem1 Elem2 Elem3 Elem4 CASCADING STYLE SHEETS • Una regola più specifica vince su una regola meno specifica • h1 {color: red; } e h1#miotitolo {color: green;} Il titolo con ID “miotitolo” avrà colore verde • A parità di specificità vince la regola letta per ultimo • Le regole dell’autore della pagina hanno priorità maggiore di quelle definite dallo User Agent • Ereditarietà: le proprietà di un elemento “genitore” vengono passate agli elementi figli CSS
© style_v2.css |
1 .header |
2 background: green;
ui!
HTML
9 <link rel="stylesheet" type="text/css" href="style_v2.css">
10 </head>
11 <body>
12
13 <div class="header">
14 <h1>La mia pagina personale</h1>
15 <img src="images/homer.png" />
16 <p>Ciao benvenuto nella mia pagina personale.</p>
17 <h4>Indice</h4>
18 <a href="#interessi">Interessi</a>
19 <a href="#esami">Esami</a>
20 </div>
I COLORI • Nei CSS i colori possono essere specificati in due modi: • Con un nome, ad es. color: black • I browser riconoscono 147 nomi di colori • Con il loro codice esadecimale ad es. color #00000 • Ogni colore può essere rappresentato con tre valori per le sue componenti RGB (red green blue) • Ogni valore è un numero tra 0 e 255 • 0 = componente assente • 255 = massimo valore • Questi numeri sono rappresentati attraverso la codifica esadecimale LA CODIFICA ESADECIMALE Decimale Esadecimale 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 10 A 11 B 12 C 13 D 14 E 15 F • Sistema per la rappresentazione dei numeri utilizzando i numeri da 0-9 e le lettere A-F • Ogni carattere esadecimale può rappresentare un numero da 0 a 15 • Due caratteri esadecimali rappresentano un numero tra 0 e 255 (un byte) • 0xA8 = 10 * 161 + 8 * 160 = 168 dec • 0xAF = 10 * 161 + 15 * 160 = 175 dec I COLORI
Color Code Generator
Saturation:
Value:
#55313B
33.3
http://hexcolorgenerator.com/
LE UNITÀ DI MISURA • Come facciamo ad impostare il font più grande o più piccolo? • font-size: 16px; // pixel • font-size: 1cm; // centimetri o millimetri • font-size 1em; // misura tipografica • font-size: 150%; // misura relativa MODIFICHIAMO LA PAGINA 1. Cambiamo lo sfondo dell’header da verde in arancione usando il relativo codice esadecimale 2. inseriamo uno sfondo grigio per la pagina 1. proprietà background-color 3. Modifichiamo il carattere del titolo per essere più grande e colorato
La mia pagina personale
| Elements | Resources Network —Soug eline Profiles
<html> Y Styles
» <head>..</head>
Y<body> element.style
» <div class="header">..</div>
<hr>
><a name="interessi">..</a>
»<ul>..</Ul>
»<p>..</p>
»<table>..</table> .
<a name="esami"> : 20px 2px 10px 30px}
</a>
</body>
</html> div { user agent stylesheet
: block;
» Metrics
I BORDI proprietà esempio border-width thin, medium, thick border-style none, dotted, dashed … border-radius 10px à bordi arrotondati border-color red, #aabbcc e tanti altri! Scorciatoia: border: dashed 10px red La mia pagina personale
Dr
| Elements | Resources Network Sources Timeline Profiles Audits Console
» Computed Style O Show inherited
"<html> ei
. v Styles + sk Hr
» <head>..</head> element.style {
}
Matched CSS Rules
-header { style v3.css:1
1 M#FF4500;
» 77px 10px 19px 109px;
> b20px 2px 10px 3px;
</a> :|25px solid #f0f000;
I FONT html { font-family: Times, Georgia, serif } famiglie di font (typeface)singoli font (font face) Se non trovo il primo, vado a cercare il secondo etc ALTRE PROPRIETÀ proprietà esempi font-size small, x-large, 20px font-style italic, oblique, normal font-variant small-caps font-weight bold, lighter, bolder Scorciatoia font-family: serif; font-weight: bold; font-size: 24px ; font: bold 24px serif;= I WEBFONTS • Problema: non tutti i browser visualizzano tutti i font Soluzione: facciamo scaricare i font all’utente dal web! • Questi fonts si chiamano “web fonts” e sono disponibili in più formati (ttf, otf etc) https://www.google.com/fonts Webfont che possiamo importare da google LE TABELLE
border-collapse: collapse | separate;
File Edit View History
|_] CSS Reference - CSS border-collapse Pr...
The border-collapse CSS property
With the default (separate) value
[Banana]|Yellow
Pea (Green
With the collapse value
[Banana] Yellow
Pea [Green
LE TABELLE table-layout: auto| fixed; auto: larghezza automatica della tabella in base alla larghezza delle colonne fixed: larghezza fissa della tabella LAYOUT DELLA NOSTRA PAGINA • Prime pagine web avevano un layout tabellare • Problematiche: • Le tabelle servono per …le tabelle! • Si scontra con il SEO • Problemi per la visualizzazione su dispositivi mobili “Tables should not be used as layout aids.” (HTML5 spec)