Social Coding 010

0x04 HTML
0x05 CSS

Transcript

1. SOCIAL CODING LEZIONE 010
2. 0X04 HTML La struttura di una pagina Web
3. SOCIAL CODING USARE UNA SHELL PER SCARICARE IL CONTENUTO DI UNA PAGINA pwd ls mkdir social-coding ls cd social-coding mkdir test ls cd test curl -k -L https://social-coding-it.github.io/ genesis/ --output prova.html
4. SOCIAL CODING DUE MODI DI VEDERE L’HTML Atom “File” “Open” prova.html Chrome CTRL + o prova.html
5. SOCIAL CODING HTML > TAGS Un documento HTML è una collezione di tag. <nometag> contenuto del tag </nometag> <nometag> apertura di un tag </nometag> chiusura di un tag Nel contenuto è possibile inserire un testo..
6. SOCIAL CODING STRUTTURA RICORSIVA DEI TAG .. ma è possibile inserire anche altri tag: <nometag> contenuto <altrotag> altro contenuto </altrotag> </nometag>
7. UN DOCUMENTO HTML..
8. .. È UNA STRUTTURA AD ALBERO..
9. .. ROVESCIATO html head body …
10. SOCIAL CODING PARAGRAFO <P> <p> Contenuto del paragrafo </p> CORSIVO <I>, GRASSETTO <B> <p> Ciao <i>mondo</i>, mi chiamo <b>Maurizio</b>. </p>
11. SOCIAL CODING ALCUNI TAG SONO SENZA CONTENUTO! I tag senza contenuto non hanno i classici tag di apertura e di chiusura come: <nometag> </nometag> ma solo un tag di dichiarazione “compatto”: <nometag /> <BR /> !!!
12. ATTRIBUTI HTML <nometag attributo1=“valore1” attributo2=“valore”> … </nometag> Alcuni tag possono essere arricchiti da attributi, ovvero coppie (chiave, valore) che dotano il tag di comportamenti specifici.
13. SOCIAL CODING COLLEGAMENTI (LINK) Definiscono degli elementi che, se cliccati, mostrano un’altra pagina web <p> Clicca <a href=“https://www.facebook.com” title=“HomePage Facebook”> qui </a> per accedere alla homepage di Facebook. </p>
14. SOCIAL CODING IMMAGINI <img src=“https://lh3.googleusercontent.com/41xc5QV3BLcsoC267ibm- Oj4CLOIJcE_s7fmpdhEBq4aEGO1hzGgPj71W_zR_fD9ArQ=s671-fcrop64=1,0c88087cf6d8f344” alt=“Nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan nyan.” /> https://youtu.be/QH2-TGUlwu4
15. IDENTIFICARE IL CONTENUTO ID e classi
16. SOCIAL CODING ID VS CLASSI Un ID è un attributo che identifica univocamente un elemento all’interno della stessa pagina. Una classe è un attributo che può essere associato a più elementi. Ogni elemento può avere zero o un ID e zero o più classi.
17. SOCIAL CODING ID E CLASSI <p id=“titolo-articolo” class=“titolo”> Questo testo è il titolo dell’articolo. Non ci sono altri titoli dell’articolo in pagina. </p> <p class=“titolo”> Questo è un titolo semplice. </p> <p class=“titolo in-evidenza”> Questo è un titolo ed è da mostrare in evidenza. </p>
18. SOCIAL CODING A COSA SERVONO ID E CLASSI? CSS ID e classi vengono usati nei selettori per associare uno specifico stile di visualizzazione solo a un insieme specifico di elementi HTML. JavaScript ID e classi vengono utilizzati per leggere e aggiornare solo uno specifico contenuto della pagina.
19. 0X05 CSS Unicorni e arcobaleni!
20. SOCIAL CODING ASSOCIARE UN CSS AD UN DOCUMENTO HTML <html> <head> <link rel=“stylesheet” type=“text/css” href=“mio-file.css” /> </head> <body> … </body> </html>
21. SOCIAL CODING SELETTORI E REGOLE DI STILE <lista selettori> { <lista di regole di stile> } Selettore Significato Tipo di selettore p tutti i paragrafi della pagina tag (p) #titolo-articolo l’elemento con ID “titolo-articolo” ID (#titolo-articolo) .titolo gli elementi che contengono la classe “titolo” classe (.titolo) p.titolo solo i paragrafi che contengono la classe “titolo” tag (p) con classe (.titolo) #titolo-articolo b gli elementi di tipo grassetto che si trovano all’interno dell’elemento con ID tag (b) contenuto dentro un elemento con ID (#titolo-articolo) Un selettore è un metodo per indirizzare un insieme di elementi HTML.
22. SOCIAL CODING SELETTORI E REGOLE DI STILE <lista selettori> { <lista di regole di stile> } La lista di selettori è separata dal carattere “,” (virgola) p, .titolo, .sezione p a { <lista di regole di stile> }
23. SOCIAL CODING SELETTORI E REGOLE DI STILE <lista selettori> { <lista di regole di stile> } Ogni regola di stile occupa una riga e termina con il “;” (punto e virgola) p { color: red; font-size: 14px; text-align: center; } Una regola di stile si scrive nella forma: attributo: valore;
24. HAPPY HACKING