HTML5 e CSS3: La guida completa per lo sviluppatore WEB
4.1 (83 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
708 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML5 e CSS3: La guida completa per lo sviluppatore WEB to your Wishlist.

Add to Wishlist

HTML5 e CSS3: La guida completa per lo sviluppatore WEB

HTML e CSS per strutturare il tuo sito web da solo, in modo semantico e ottimizzato per i motori di ricerca.
4.1 (83 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
708 students enrolled
Created by Hidran Arias
Last updated 3/2017
Italian
Current price: $10 Original price: $195 Discount: 95% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 11.5 hours on-demand video
  • 8 Articles
  • 14 Supplemental Resources
  • 30 Coding exercises
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Strutturare una pagina web senza bisogno di framework
Utilizzare le intestazioni come h1, h2, h3 in modo corretto per ogni sezione della pagina web
Utilizzare le liste ordinate, non ordinate e di definizioni
Creare form utilizzando i fieldset, input, select e i nuovi tag html5
Capire le differenze tra <i> e <cite>, <strong> e <b>,e altri tag di formattazione
Capire e usare i tag di tipo block e i tag di tipo inline
Uso del tag audio e video
Creare e formattare tabelle html
Utilizzare CSS per formattare gli elementi di una pagina web
View Curriculum
Requirements
  • Usare un PC o MAC
  • Usare un browser qualunque
  • Avere Internet per scaricare gli editor ma non indispensabile
Description

Costruire una pagina web da zero usando i TAG HTML5 e le proprietà CSS più importanti come font, margin, padding, background, border senza bisogno di un editor visuale. Indispensabile per Web Designer e Programmatori Backend e tutti quelli che devono "sporcarsi" le mani con HTML .

Impara ad usare in modo corretto tutti i TAG HTML che ti servono per lo sviluppo Web, ottimizzazione per i motori di ricerca, SEO, velocità di caricamento e per il Web Semantico.

Diventa uno Sviluppatore Web con questa Guida Completa di HTML5.

  1. Le intestazioni e come usarle: h1, h2, h3..h6
  2. I Nuovi Tag Semantici: head, section, article ,footer,hgroup, side, e main
  3. Domina alla perfezione le tabelle table come un foglio excel: thead, tbodytfoot, row , td e th.
  4. Impara ad utilizzare le liste ul,ol e dd. Usale per creare dei menù verticali e orizzontali
  5. Impara le differenze tra elementi di tipo block e di tipo inline
  6. Come usare i paragrafi usando i tag p, pre e address
  7. Usa correttamente i form con tutti i suoi elementi : fieldset, input, textarea e come formattarli con i fogli di stile
  8. La guida HTML sempre alla portata delle tue mani mentre sviluppi.

Non una semplice carrellata ma una Guida Pratica con degli esempi Pratici.

Questo corso non è una semplice carrellata sui diversi TAG HTML ma una spiegazione pratica e concisa dei TAG html più utilizzati per lo sviluppo WEB.

Cosa imparerete e com'è strutturato il Corso

Imparerete a utilizzare un editor di testo per scrivere HTML come notepad, NOTEPAD++, ECLIPSE, APTANA e NETBEANS.

Vedremo come scrivere del codice HTML e vedere in tempo reale le modifiche nel browser.

Ogni lezione ha degli esempi pratici e spiegazioni concise per cominciare a creare pagine web immediatamente e in modo corretto. Avrete a disposizione il codice sorgente.

Cominceremo dalla semplice pagina scheletro HTML5 e andremo ad aggiungere gli elementi e attributi che servono a costruire un vero e proprio sito web.

Come aggiungere fogli di stile CSS esterni e inline, aggiungere i meta tag, il titolo della pagina. i javascript.

Vedremo tutti gli elementi visibili al navigatore nell'elemento body

Imparerete ad usare i tag giusti per la struttura del vostro sito, i tag per la formattazione, i tag semantici, gli attributi più importanti di ogni tag e come utilizzarli nei fogli di stile CSS.

Per ogni TAG spiegato c'è sempre, anche se non è un corso di CSS, la spiegazione di come utilizzare le principali regole CSS per layout e formattazione.

Alla fine di questo corso sarete capace di costruire una pagina web da zero, ottimizzarla per il SEO usando correttamente le intestazioni, il titolo e i meta tag.

Saprete usare correttamente mente i tag di formattazione e imparerete ad utilizzare le regole CSS più importanti: font, color, padding, margin, border, background per cambiare l'aspetto di una pagina web



Who is the target audience?
  • Gli aspiranti a Web Designer
  • Programmatori backend che comunque devono scrivere e capire html
  • Project managers e DevOps per capire di cosa si parla quando si parla di HTML e web
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 124 Lectures Collapse All 124 Lectures 11:34:51
+
Introduzione e struttura del corso
3 Lectures 08:35

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

Se hai bisogno di un editor html
00:07

Note e appunti del corso
00:09
+
Struttura di una pagina html
10 Lectures 44:46

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

Introduzione a html
01:29

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

Che cos'è una pagina web o html
07:58

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

Che cos'è un tag o elemento html
06:08

Vedremo alcuni esempi di tag html che non hanno bisogno della chiusura come br, hr

Tag html autochiudenti
03:35

Studieremo gli attributi degli elementi html5 e come definirli

Che cos'è un attributo di un elemento html 5
08:25

In questa lezione creeremo la struttura base di un documento html5.

Vedremo la dichiarazione del tipo di documento ,<!doctype>,

l'elemento radice html, l'elemento delle intestazioni, <head>, il titolo della pagina, <title>

e il corpo della pagina web:<body>

<!doctype html>

<html>

<head>

<title>Titolo della pagina</title>

</head>

<body>

Qui vanno gli elementi visibili della pagina

</body>

</html>

Preview 07:17

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

Preview 01:58

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

I tag <style> e <script>
04:28

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

Fogli di stile inline e conclusione sulla struttura di base di una pagina html6
03:24

Con questo esercizio impareremo ad aggiungere un tag meta a una pagina web
Aggiungere un tag meta con il name
1 question

L'obbiettivo dell'esercizio è quello di aggiungere un tag script per collegare un file javascript
Aggiungere un tag script che colleghi un file javascript
1 question

Questo esercizio ha come obiettivo imparare ad aggiungere il tag title ad una pagina web
Aggiungiamo un titolo alla nostra pagina WEB
1 question

Download esercizi pratici della sezione
00:04
+
Differenza tra elementi inline ed elementi di tipo block
2 Lectures 16:18

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

Elementi html di tipo block
08:08

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

Elementi html di tipo inline
08:10
+
Introduzione a i fogli di stile a cascata :CSS
5 Lectures 24:13
Nota sull'utilizzo del CSS nella spiegazione dei tag html
00:36

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

Introduzione ai fogli di stile: Uso dell'attributo style per formattare tag
03:47

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

Uso del tag style per formattare una singola pagina html
03:40

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

Fogli di stile esterni
06:16

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

Preview 09:54

Vediamo come utilizzare l'attributo style per cambiare le proprietà css di un elemento
Aggiungere l'attributo style al tag body
1 question

Con questo esercizio vedremo come formattare elementi di una pagina con i fogli di stile usando il tag
Formattare gli elementi di una pagina utilizzando il tag style
1 question
+
Selettori CSS
3 Lectures 14:52

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>

Selettori di tipo ID e CLASS
08:11

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

Selettori di tipo discendenti e figli: siblings, children
03:34

Facciamo un riassunto dei selettori CSS visti nelle lezioni precedenti

Selettori CSS: Conclusioni
03:07
+
Priorità dell'applicazione dei fogli di stile
5 Lectures 13:12

Vediamo come usare i media query, @media, per  condizionare

delle proprietà del CSS alle caratteristiche del dispositivo, ad esempio, la dimensione dello schermo: screen

Priorità delle proprietà CSS: i media query
03:07

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à

Preview 04:13

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

Priorità delle proprietà CSS: class e id
03:31

Priorità delle proprietà CSS: Conclusioni
02:19

Vediamo come aggiungere delle proprietà CSS ad un elemento che abbia un id
Aggiungere delle proprietà CSS ad un elemento html che abbia un certo ID
1 question

Vediamo come Selezionare tutti gli elementi discendenti di un elemento html per poterli formattare
Selezionare tutti gli elementi discendenti di un elemento html
1 question

Aggiungere delle proprietà css a tutti i div di una pagina web
Aggiungere del css a tutti i div di una pagina web
1 question

Andate sul tab download per scaricare gli esercizi

Download esercizi pratici della sezione
00:02
+
CSS: Formattazione del testo
5 Lectures 21:12

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;

}

Preview 04:39

Vediamo come impostare la dimensione del testo usando la proprietà font-size
Impostare la dimensione del testo
1 question

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;

}

Allineamento del testo: text-align
03:07

Per allineare un testo, si usa la proprietà text-align cui valore possono essere : center, left, right e justify
Allineare un testo.
1 question

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

}

Colori del testo
08:31

Vediamo come impostare il colore de testo usando la proprietà css color.
Impostare il colore del testo ad un elemento
1 question

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

}

Altezza del testo e trasformazione: line-height, text-transform
04:52

L'altezza della linea del testo s'imposta con line-height e la trasformazione in maiuscolo minuscolo con text-transform
Impostare altezza del testo e trasformare tutto il testo in maiusculo
1 question

Download esercizi pratici della sezione
00:03
+
Font, font-family e font-face
3 Lectures 30:08

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

}

Preview 13:53

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

Google font ed altri font esterni
11:34

Scaricare font in locale e aggiungerli con @font-face
04:41

Utilizzando la proprietà font-family oppure font. si può impostare un font al documento
Aggiungere una famiglia di font ad una pagina html
1 question
+
CSS: Padding , Margin e Border
4 Lectures 16:19

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 ;

}

Aggiungere bordo ad un elemento: border
06:41

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;

}

Preview 03:28

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 ;

}

Aggiungere margine ad un elemento: margin
03:41

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;

}

Aggiungere bordi arrotondati ad un elemento: border-radius
02:29
+
CSS. Background: Aggiungere immagine di sfondo e colori di sfondo:
4 Lectures 17:39

Per aggiungere un'immgine di sfondo ad un elemento di una pagina web, utlizziamo la proprietà

background-image:

DIV {

background-image: url ('percorso/della/immagine');

}

possiamo indicare se si deve ripetere lungo l'asse X ,Y oppure che non si ripeta, con la proprietà background-repeat :

DIV {

background-image: url ('percorso/della/immagine');

background-repeat: no-repeat ; /* oppure repeat-x o repeat-y*/

}

Preview 06:51

Se vogliamo indicare più di una immgine di sfondo, separiamo le url delle immagine da virgola

e poi anche la proprietà di background-repeat si deve separare da virgola altrimenti si applicherà a tutte:


DIV {

background-image: url ('percorso/della/immagine'), url ('percorso/della/seconda/immagine') ;

}

Aggiungere più di una immagine di sfondo ad un elemento
04:10

Oltre a una immagine di sfondo, possiamo aggiungere una colore di sfondo ad un elemento di una pagina html5 con la proprietà css background-color:

div.red {

background-color: red;

}

Gli stessi tipi di valore che abbiamo visto per il colore di primo piano, color, si usano anche per il background color:


div.red {

background-color: #ff0000;

}

oppure {


div.red {

background-color: rgb(255,255,0);

}


Aggiungere un colore di sfondo e decidere fino a dove coprire: background-clip
03:21

Possiamo usare la scorciatoia background per impostare tutti i valori di sfondo di un elemento html5:

body {

background: green url('percorso/immagine') repeat-x;

}

Definire tutte le proprietà di sfondo con la proprietà background
03:17
19 More Sections
About the Instructor
Hidran Arias
4.4 Average rating
438 Reviews
3,995 Students
13 Courses
Software Engineer

I'm a cuban living in the beautiful city of Turin, Italy. I have a university degree in computer sciences in the field of automation engineering. I am a software engineer since 2002 and since then I have worked for different italian companies developing web applications with the latest technogies, most of them open sources, such as PHP, MYSQL, ORACLE, CSS, HTML, NODEJS, MONGODB and javascript libraries such as EXTJS, SENCHATOUCH, JQUERY, ANGULARJS.

When I am not programming, I am learning new languages,currently German and Arabic. Currently I speak SPANISH, my mother tongue, ITALIAN,almost my second mother tongue, ENGLISH, FRENCH and PORTUGUESE.

Playing GUITAR is one of my hobbies and passions and I dedicate it as much time as for languages and computer.

People say I am an easy talker, always ready to help people and I love teaching what I know and mainly new technologies. I try to keep always up to date not only by teaching but also by learning and taking courses such as the ones found here in UDEMY .