Social Coding 010

SOCIAL CODING LEZIONE 010

0X04 HTML La struttura di una pagina Web

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

SOCIAL CODING DUE MODI DI VEDERE L’HTML Atom “File” “Open”
prova.html Chrome CTRL + o prova.html

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..

SOCIAL CODING STRUTTURA RICORSIVA DEI TAG .. ma è possibile
inserire anche altri tag: <nometag> contenuto <altrotag> altro contenuto </altrotag> </nometag>

UN DOCUMENTO HTML..

.. È UNA STRUTTURA AD ALBERO..

.. ROVESCIATO html head body …

SOCIAL CODING PARAGRAFO Contenuto del paragrafo CORSIVO
, GRASSETTO Ciao mondo, mi chiamo Maurizio.

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 /> !!!

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 speciﬁci.

SOCIAL CODING COLLEGAMENTI (LINK) Deﬁniscono degli elementi che, se cliccati,
mostrano un’altra pagina web Clicca <a href=“https://www.facebook.com” title=“HomePage Facebook”> qui </a> per accedere alla homepage di Facebook.

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

IDENTIFICARE IL CONTENUTO ID e classi

SOCIAL CODING ID VS CLASSI Un ID è un attributo
che identiﬁca 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.

SOCIAL CODING ID E CLASSI Questo testo
è il titolo dell’articolo. Non ci sono altri titoli dell’articolo in pagina. Questo è un titolo semplice. Questo è un titolo ed è da mostrare in evidenza.

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.

0X05 CSS Unicorni e arcobaleni!

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>

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.

<lista di regole di stile> } La lista di selettori è separata dal carattere “,” (virgola) p, .titolo, .sezione p a { <lista di regole di stile> }

<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;

HAPPY HACKING

Social Coding 010

Social Coding 010

Maurizio De Magnis

More Decks by Maurizio De Magnis

Other Decks in Education

Featured

Transcript

SOCIAL CODING LEZIONE 010

0X04 HTML La struttura di una pagina Web

SOCIAL CODING USARE UNA SHELL PER SCARICARE IL CONTENUTO DI

SOCIAL CODING DUE MODI DI VEDERE L’HTML Atom “File” “Open”

SOCIAL CODING HTML > TAGS Un documento HTML è una

SOCIAL CODING STRUTTURA RICORSIVA DEI TAG .. ma è possibile

UN DOCUMENTO HTML..

.. È UNA STRUTTURA AD ALBERO..

.. ROVESCIATO html head body …

SOCIAL CODING PARAGRAFO <P> <p> Contenuto del paragrafo </p> CORSIVO

SOCIAL CODING ALCUNI TAG SONO SENZA CONTENUTO! I tag senza

ATTRIBUTI HTML <nometag attributo1=“valore1” attributo2=“valore”> … </nometag> Alcuni tag possono

SOCIAL CODING COLLEGAMENTI (LINK) Deﬁniscono degli elementi che, se cliccati,

SOCIAL CODING IMMAGINI <img src=“https://lh3.googleusercontent.com/41xc5QV3BLcsoC267ibm- Oj4CLOIJcE_s7fmpdhEBq4aEGO1hzGgPj71W_zR_fD9ArQ=s671-fcrop64=1,0c88087cf6d8f344” alt=“Nyan nyan nyan nyan

IDENTIFICARE IL CONTENUTO ID e classi

SOCIAL CODING ID VS CLASSI Un ID è un attributo

SOCIAL CODING ID E CLASSI <p id=“titolo-articolo” class=“titolo”> Questo testo

SOCIAL CODING A COSA SERVONO ID E CLASSI? CSS ID

0X05 CSS Unicorni e arcobaleni!

SOCIAL CODING ASSOCIARE UN CSS AD UN DOCUMENTO HTML <html>

SOCIAL CODING SELETTORI E REGOLE DI STILE <lista selettori> {

SOCIAL CODING SELETTORI E REGOLE DI STILE <lista selettori> {

SOCIAL CODING SELETTORI E REGOLE DI STILE <lista selettori> {

HAPPY HACKING