HTML5 e CSS3: La guida completa per lo sviluppatore WEB

Breve intro a html, cosa significa, chi lo inventò e a cosa serve

Se non hai un editor oppure vuoi installare un editor  IDE  gratis, come NETBEANS,

Passa alla sezione 22 dove viene spiegato come installare NETBEANS e configurarlo

Visual code. Installare estensioni e  configurazione html css

Se volete provare netbeans

Vedremo che cos'è una pagina web, come il browser la richiede al server e come guardare il suo sorgente

Creare una pagina web da zero e la struttra base di un file  html5

Aggiungere commenti ad una pagina html

Il tag <meta> ci permette di aggiungere dei metadati ad una pagina html. Se ha l'attributo name, si riferisce

al documento ed è applicabile a tutta la pagina. Valori di esempio dell'attributo name: description, title, author

Lo possiamo utlizzare anche per indicare il charset della pagina con l'attributo charset

Il tag style di una pagina html, ci permette di inserire delle regole di CSS per gli elementi della pagina.

Sarebbe meglio aggiungere sempre il CSS in un file separato.

Dobbiamo tenere conto che il css inserito con il tag style potrà modificare solo gli elementi della pagina

dove è inserito.

Il tag <script> Ci permette di inserire dello script esterno alla pagina, indicando la URI con l'attributo src, oppure

del javascript che verrebbe solo utilizzato in quella pagina

Aggiungere javascript ad una pagina web. Tag script

Possiamo formattare un elemento individualmente attraverso l'attributo style.

Le proprietà css date all'elemento con style, hanno priorità sulle stesse proprietà dichiarate

a livello di pagina o fogli di stile esterni

Studieremo che cos'è un tag o elemento html e come definirli

Studieremo gli attributi degli elementi html5 e come definirli

Elementi semantici . main, section, article, header, footer

Elementi semantici . Conclusioni

Creare una pagina web per un C.V

Gli elementi di tipo block si prendono il 100% della larghezza della pagina e mandano a capo gli elementi che vengono dopo, lasciando un margine sia in alto che in basso

Gli elementi di tipo inline hanno la larghezza del contenuo dentro loro. Non mandano a capo gli elementi che vengono dopo:

Testo, <span>, <a>, <img>, <i>,<em>,<li> ecct

Anche se sarebbe meglio utilizzare dei fogli di stile esterni per formattare un elemento, a volte siamo costretti

ad utilizzare l'attributo style ( se non abbiamo acceso al filesystem), ad esempio in un CMS come wordpress o Joomla.

Le proprietà css inserite con l'attributo style hanno un livello più alto di proprietà del CSS del tag <style> o esterno

Il tag <style> ci permette di formattare con CSS gli elementi di una pagina.

Queste proprietà css inserite, avranno effetto solo nella pagina in cui vengono inserite

e sovrascrivono le stesse proprietà definite in un foglio di stile esterno

I fogli di stile esterni si aggiungono ad una pagina usando il tag <link> e indichiamo la URL dove si trova

il file con l'attributo href. La url può essere assoluta o relativa alla cartella della pagina web. Possiamo indicare con l'attributo media, su quale media vogliamo che abbia effetto il css aggiunto. Può essere, ad esempio, all ( valore predefinito) oppure un media query come width, height, orientazione portrait o landscape, ecct.

Vedi https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

In questa lezione vedremo come selezionare gli elementi html con i fogli di stile per dargli

una formattazione specifica.

Si seleziona un o vari elementi usando il nome dell'elemento.

p{} selezionerebbe solo gli elementi p presenti nella pagina. p , div, <section> {} selezionerebbe

tutti gli elementi di tipo p, div e section

Possiamo formattare elementi comuni utilizzando il selettore class e ID.

Esempio :

<div class="highlight"></div>

<p class="highlight"></p>

Posso selezionare ambi i tag della forma seguenti:

.highlight{

}

Se uso un id, per identificare univocamente un elemento, posso selezionarlo così:

#idElement{} , dove idElement sarebbe l'id dell'elemento: <p id="idElement"></p>

Possiamo selezionare, per formattare con CSS, i figli di un elemento della forma seguente:

elementopadre > figlio : div > p{}, seleziona solo gli elementi p che sono figli diretti di div.

elementopadre figlio : div p {} , seleziona tutti gli elementi p all'interno di DIV, cioè tutti i discendenti

Vedremo come gli stile a cascata convergono e la stessa proprietà

per un elemento prevale se messa nel tag style, altrimenti se inserita per ultima.

Se c'è !importan dopo una proprietà, questa segnalazione avrà la proprità

Vedremo come se aggiungiamo una classe ad un elemento, le sue proprietà css hanno priorità

sull'elemento. Se aggiungiamo un id e diamo delle proprietà css, queste proprietà

avranno priorità più alta di classe ed elemento

Andate sul tab download per scaricare gli esercizi

Il bordo di un elemento si indica con la proprietà css border. Allo stesso modo che per padding e margin

si può indicare nel modo seguenti:

p {

border: 10px;

}

p {

border: 10px 15px ;

}

p {

border: 10px 15px 10px ;

}

p {

border: 10px 15px 10px 10px ;

}

p {

border-top: 10px ;

border-right:15px;

border-left:10px;

border-bottom: 10px ;

}

Padding indica lo spazio tra il testo e il bordo dell'elemento. Lo possiamo indicare con la proprietà

css padding:

div {

padding: 10px;
}

Se do due valori, la prima sarebbe per top-bottom e la seconda left-right:

div {

padding: 10px 15px;
}

Se do tre valori, la prima sarebbe per top, la seconda per left-right e l'ultima per bottom

div {

padding: 10px 15px 15px;
}

Oppure posso dare tutt'e 4

div {

padding: 10px 15px 15px 10px;
}

posso indicare il padding individualmente usando padding-top, padding-right, padding-left e padding-bottom:

p{

padding-top: 5px;

padding-right: 15px;

padding-bottom: 5px;

padding-left:15px;

}

La proprietà margin ci indica quanto margine c'è tra il blocco dell'elemento e gli elementi attorno a lui sui quattro i lati.

Le proprietà si indica come per padding:

p {

margin: 10px;

}

p {

margin: 10px 15px ;

}

p {

margin: 10px 15px 10px ;

}

p {

margin: 10px 15px 10px 10px ;

}

p {

margin-top: 10px ;

margin-right:15px;

margin-left:10px;

margin-bottom: 10px ;

}

Un modo per far sìcchè gli angoli di un elemento vengano arrotondati è utilizzare

la proprietà del CSS3 border-radius :

Per indicare gli angoli, si usa come per il padding, margin e border: top right bottom left:

div {

border-radius:15px

}

Se vogliamo dare un radio ad un bordo in particolare, usiamo:

div{

border-top-left-radius :15px;

border-top-right-radius :15px;

border-bottom-right-radius :15px;

border-bottom-left-radius :15px;

}

Per dare colore a un test usiamo la proprietà color .

Il valore della proprietà color lo passiamo dare in esadecimale usando #codiceesadecimalecolore,

con il nome del colore:red, blue, brown ecct, oppure in rgb o rgba se vogliamo dare anche l'opacità del colore. Vediamo un esempio:

p {

color: red; /* dà colore rosso al testo di un paragrafo*/

}

p {

color:#FF0000; /* dà colore rosso al testo di un paragrafo*/

}

p {

color:rgb(255,0,0); /* dà colore rosso al testo di un paragrafo*/

}

p {

color:rgb(255,0,0, 1); /* dà colore rosso al testo di un paragrafo*/

}

Possiamo indicare la dimensione del testo con CSS usando la proprietà font-size.

La dimensione la possiamo dare con una valore assoluto, di solito indicato in pixel, px, oppure

relativo alla dimensione predefinita o ereditata dall'elemento padre, con la percentuale: % oppure in em.

esempio:

p{

font-size : 16px

}

div {

font-size: 120%;

}

Se indico la percentual in em:

div {

font-size: 1.2 em;

}

Possiamo allineare il testo usando la proprietà css text-align, dove possiamo indicare sinistra,

destra, centro e giustificato: left, right, center, justify.

div {

text-align: left;

}

Possiamo definire l'altezza della linea del testo con la proprietà: line-height e il valore in px oppure in percentuale. Per transformare tutto il testo in UPPERCASE, LOWERCASE oppure mettere in maiuscolo solo la prima lettera di ogni parola, usiamo la proprietà css text-transform. Vediamo un esempio di ciascuno:

p {

line-height: 25px;

text-transform: uppercase /* posso metter LOWERCASE | CAPITALIZE*/

}

Le famiglie generiche di font più generale sono le Sans, Sans-serif e monospace.

Dentro ad ognuna di loro possiamo trovare delle sottofamiglie come Tahoma, Arial, Helvetica, Times new Roman ecct.

Indichiamo il font con il la proprietà in specifico font-family, oppure con la proprietà generale font.

body{

font-family: Tahoma, Helvetica, Sans-serif;

}

oppure

body{

font : 12px Tahoma, Helvetica, Sans-serif;

}

p{

font :italic 12px Tahoma, Helvetica, Sans-serif; /*indico font-variant , size e poi family

}

p{

font :12px/25px Tahoma, Helvetica, Sans-serif; /*indico size/line-height*/

}

Vedremo come utilizzare in font di google ed altri font che si possono scaricare gratuitamente o a pagamento