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.3 (51 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.
475 students enrolled
$19
$195
90% off
Take This Course
  • Lectures 115
  • Exercises 21 coding exercises
  • Length 11 hours
  • Skill Level All Levels
  • Languages Italian
  • Includes Coding Exercises New!
    Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2015 Italian

Course 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



What are the requirements?

  • Usare un PC o MAC
  • Usare un browser qualunque
  • Avere Internet per scaricare gli editor ma non indispensabile

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduzione e struttura del corso
Introduzione e struttura del corso.
Preview
08:19
Article

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

Section 2: Struttura di una pagina html
05:01

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>

01:58

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

04:28

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

03:24

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

1 question
Con questo esercizio impareremo ad aggiungere un tag meta a una pagina web
1 question
L'obbiettivo dell'esercizio è quello di aggiungere un tag script per collegare un file javascript
1 question
Questo esercizio ha come obiettivo imparare ad aggiungere il tag title ad una pagina web
Download esercizi pratici della sezione
Article
Section 3: Elementi di formattazione
Nota sull'utilizzo del CSS nella spiegazione dei tag html
Article
05:05

In questa lezioni impareremo i primi elementi di formattazione html, che troviamo anche in programmi come word.

Il tag <b> ci serve a mettere un testo in grassetto:

<b> Questo testo è grassetto</b> verrebbe fuori così: Questo testo è grassetto

<i> Questo testo è italico </i> Questo testo è italico


06:05

Vediamo la differenza tra <i> e <em>, tra <b> e <strong> e come formattare coi fogli di stile questi elementi

Section 4: Entità e simboli html
Entità html . Spazio, segno minore di, segno maggiori di
03:49
Simboli html e charset
08:32
Section 5: Elementi di tipo BLOCK, INLINE e INLINE-BLOCK
07:17

Gli elementi di tipo block , blocco, occupano tutto lo spazio disponibile dell'elemento padre.

Normalmente i browser li rappresentano lasciando una riga sopra e una riga sotto, quindi un elemento block aggiunto dopo un altro elemento, andrebbe a capo e occuperebbe tutta la larghezza disponibile.

L'elemento DIV è un classico elemento di tipo block. Ci serve per creare delle divisioni in una pagina web o per

raggruppare elementi simili per poterli formattare con i fogli di stile. Usatelo se non avete un altro tag semantico come section, article, aside .

03:03

Gli elementi di tipo INLINE, occupano solo lo spazio dell'elemento contenuto tra il tag e non aggiunge una riga a capo. Due elementi inline rimarrebbero uno a fianco all'altro. A differenza dell'elemento di tipo block, un elemento inline non occupa tutta larghezza del parent e non manda a capo gli elementi che lo seguono

03:32

Se vogliamo che un elemento inline occupi una larghezza superiore al suo contenuto, possiamo dichiarare la proprietà CSS display:inline-block

Section 6: Elementi di tipo block
12:32

Gli elementi di intestazioni in una pagina web html5 sono h1, h2, h3, h4, h5, e h6.

<h1> Si utilizza per il titolo più importante del documento e dovrebbe essercene solo uno per sezione. <h2> Sarebbe il secondo e così via. Da h2 a h6 si possono usare più di uno ma raramente si va oltre h3

04:26

In questa lezione studieremo l'elemento <p>.

L'elemento <p> ci server per marcare i paragrafi. Essendo un elemento di tipo block, questo tag avrà una riga sopra e sotto di spazio e andrebbe a capo dopo l'elemento che lo precede

Nel file in allegato, troverete anche il codice sorgente delle altre lezioni di questa sezione


01:56

L'elemento <pre> di html5 ci permette di inserire del testo preformattato, cioè, quando vogliamo che il testo mantega la formattazione come lo inccolliamo

02:03

Il Tag <address> è un elemento html5 che ci permette di formattare un indirizzo. Ha un valore semantico nel senso che il navigatore capisce che è un indirizzo, dandogli di default uno stile corsivo

01:51

Facciamo una riassunto dell'utilizzo dei tag <p>, <pre>, <address> e <br>

Section 7: Liste html
04:50

Le definition list, <dl>, ci permettono di creare una lista di definizione. Il tag radice sarebbe <dl> e ogni elemento

di definizione viene indicato col tag <dd>, definition datum:


08:46

In questa lezione studieremo le liste non ordinate,<ul> . La lista <ul> ha gli elementi della lista indicati col tag <li>, list item.

<ul>

<li></li>

<li>Elemento2</li>

</ul>

Vedremo come formattarle con CSS

06:10

Continuiamo con le liste e studiamo le liste ordinate: <ol> . Gli elementi sei aggiungono con il tag <li>. A differenza delle liste non ordinate, queste le posso ordinare dandole una numerazione, oppure utilizzando le lettere dell'abecedario, siano minuscole che maiuscole e sia in ordine crescente che decrescente.

Section 8: Immagini nel html con il tag Img
06:44

Possiamo includere una immagine in una pagina html utilizzando il tag <img>

Con l'attributo src indichiamo dove si trova la immagine. Con width, e height indichiamo

la larghezza e l'altezza. Le stesse proprietà si possono aggiungere con i fogli di stile CSS.

<img src="percorso/immagine" width="400" height="250">

02:14

In questa lezione studieremo come formattare una immagine all'interno di un paragrafo usando la proprietà float

img {

float : left;

border-radius:30px

}

Se impostiamo il border-radius alla metà della larghezza, otteniamo un'immagine arrotondata;

impostando float:left oppure float:right, possiamo spostare l'immagine a sinistra o destra

06:39

Impareremo a formattare una immagine che si trova in un paragrafo.

Vedremo come formattare anche il testo attorno all'immagine e come far "flottare" l'immagine ad un lato del testo

05:10

In questa lezione vedremo come usare il tag <map> e l'attribute usemap di una immagine, per creare una mappa d'immagine

Section 9: Collegamenti html: I LINKS
03:40

In questa lezione vedremo come collegare pagine esterne alla nostra pagina web utlizzando sempre il tag ancora: <a> e il suo attributo href e l'attributo target per segnalare se si deve aprire in una nuova finestra o la stessa.

03:14

Vedremo come creare collegamenti, links, a pagine interne del sito

04:07

Vedremo come utilizzare il tag <a> con un id, identificatore, per navigare all'interno del testo di una pagina

06:13

Vediamo come combinare immagini e collegamenti per creare una piccola galleria di immagini

1 question
Aggiungere alla pagina un link, usando il tag , che si apra in una nuova finestra e punti sull'indirizzo http://www.google.it e che abbia la scritta : Google
Section 10: Tabelle html e la loro formattazione
09:58

Le tabelle non si usano più per il layout di una pagina web ma sono importanti e indispensabili per mostrare dati tabulati a forma di foglio excel, ad esempio.

Queste vengono create con il tag <table> , le righe le indichiamo con il tag figlio <tr>, le colonne di intestazione

con <th> e quelle delle righe normali con <td> e questi sarebbero gli elementi base di una tabella

05:55

Il tag <thead> serve a delimitare le righe che servono come intestazione o riassunto della tabella.

Il tag <tfoot> serve a indicare qual è/sono la/le righa/e del piè di pagina della tabella

06:53

<tbody> lo utilizziamo per raggruppare le righe che fanno parte del copro della tabella html

<colgroup> e <col> ci permettono raggruppare delle colonne per poterle formattare individualmente con i fogli di stile CSS

Section 11: Tag semantici di formattazione
07:38

Studieremo i tag semantici <header> e <nav>.

<header> lo utilizziamo quando vogliamo indicare qual è l'intestazione di una pagina oppure di una sezione della pagina.

<nav> lo usiamo per indicare gli elementi di navigazione del sito web

02:15

In questa lezione studieremo i tag semantici html <main>, <section> e <hgroup>

<main> Lo usiamo per indicare la parte principale della pagina web

<section> lo utilizziamo per raggruppare elementi comuni a una sezione della pagina web

<hgroup> ci server per raggruppare diverse intestazioni della pagina web oppure di una sezione di essa

07:09

<article> lo usiamo per marcare un articolo della pagina web oppure all'interno di una sezione

<aside> viene usato per indicare un testo a sè stante che ci può servire per apprfondire, ad esempio, un articolo oppure per dare informazione dell'autore dell'articolo

Section 12: Form e i suoi elementi
05:28

Vediamo come aggiungere un form a una pagina web per raccogliere dati dall'utente.

Cominciamo a studiare gli elementi del form html più semplice come il tag <input> <label> e il pulsante <submit>

03:39

Vediamo come aggiungere il tag <button> per inviare i dati di un form, oppure usare l'input di tipo submit.

Con INPUT di type reset possiamo reimpostare i dati del form

1 question
Vediamo come aggiungere un pulsante per inviare e reimpostare i dati di un form
08:01

In questa lezione studieremo gli attributi principali del tag input: name, id, class, disabled, type, placeholder

04:57

Studiamo l'attributo method del form html. Con il metodo GET i dati sono inviati in chiaro via URL al server mentre che con il metodo POST i dati non si vedono nella URL ma nel corpo della richieta http di tipo POST al server

07:17

Con il tag input di html di tipo hidden, possiamo passare dati nascosti al server. Dati che l'utente non immette direttamente ma che possono essere importanti come un token di sicurezza oppure l'id del record che si sta modificando.

<input type="hidden" name="token" value="zxcxx$£$£$£$£"$£$££dDFDFDf">

Input di tipo password è come quello di tipo text ma i caratteri scritti sono mascherati con degli asterischi

<input type="password" name="passwd">

04:52

Input di tipo radio ci permette di fare una scelta tra vari valori. Dobbiamo dare lo stesso nome ai diversi input di tipo radio in modo che siano auto esclubile:

<input type="radio" value="M" name="sex">

<input type="radio" value="F" name="sex">


05:43

Input ti tipo checkbox ci permette selezionare più di un valore di una certa categoria:

<label>Linguaggi programmazione conosciuti</label>

<input type="checkbox" name="programs[]" value="PHP">

<input type="checkbox" name="programs[]" value="JSP">

<input type="checkbox" name="programs[]" value="JAVA">

<input type="checkbox" name="programs[]" value="PYTHON">

05:19

In questa lezione studieremo il tag select. Vedremo come aggiungere gli option, l'attributo value

Studieremo come formattare le combo usando i fogli di stile

03:56

Se aggiungiamo l'attributo multiple a una lista potremo selezionare più di un elemento:

<select name="programs[]" multiple>

<option value="php">PHP</option>

<option value="jsp">JSP</option>

<option value="java">JAVA</option>

<option value="C++">C++</option>

</select>

02:32

In questa lezione vedremo come raggruppare le opzioni di una combo select usando il tag <optgroup>

08:39

Con l'elemento <textarea> diamo la possibilità di aggiungere più testo in varie righe:

Con l'attributo cols indichiamo il numero di colonne e con l'attributo rows il numero di righe

<textarea cols="60" rows="12"></textarea>

09:35

Con il tag <fieldset> Possiamo raggruppare campi del form che siano simili. L'elemento <legend> ci serve per aggiungere una descrizione al fieldset

1 question
Vediamo come creare la struttura base di un form html
1 question
Rivediamo gli attributi più importanti dell'input di tipo text
1 question
Vediamo come aggiungere due elementi di tipo radio autoescludenti
1 question
Facciamo pratica con gli elementi di tipo checkbox
1 question
Vediamo come usare il tag di tipo select
1 question
Vediamo come usare il tag textarea
Section 13: Form: I nuovi elementi introdotti con html5
07:04

Con l'elemento <datalist> possiamo indicare o suggerire i valori che un campo input può avere.

Dobbiamo aggiungere l'attributo list al tag input indicando l'ID del datalist cui fa riferimento

<input type="text" name="states" list="stateList">

<datalist id="stateList">

<option value="FL" label="FLORIDA">

<option value="NY" label="New York">

</datalist>

11:45

Vediamo come suggerire, soprattutto per i tablet e telefonini, alla tastiera il tipo di tastiera da mostrare a seconda l'attributo type dell'elemento input:

<input type="url">

<input type="tel">

<input type="number" min="1" max="69">

<input type="range" name="age" min="18" max="120">



05:33

Vediamo come aggiungere un color picker usando l'attributo color. Selezionando un colore il campo input si popola con il valore esadecimale del colore selezionato

05:42

Vediamo come possiamo aggiungere un calendario come tipo input usando l'attributo date. Vedremo anche che possiamo utilizzare l'attributo dell'elemento input datetime e datetime-local, time, week, month, per indicare diversi tipi di valore di tempo

Section 14: Nuovi elementi html5
06:18

Con html5 è possibile aggiungere audio a una pagina web senza usare plugin esterno.

<audio controls>

<source type="audio/mp3" src="percorso/file/audio">

</audio>

Con il tag source andiamo a indicare le sorgenti audio che aggiungeremo

Con l'attributo type indichiamo il tipo di audio che verrà riprodotto, e con source, la sorgente

audio

05:43

Con html5 è possibile aggiungere video a una pagina web senza usare plugin esterno.

<video controls>

<source type="video/mp4" src="percorso/file/video">

</video>

Con il tag source andiamo a indicare le sorgenti video che aggiungeremo

Con l'attributo type indichiamo il tipo di video che verrà riprodotto, e con src, il percorso del file video


Section 15: Introduzione a i fogli di stile a cascata :CSS
03:47

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

03:40

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

06:16

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

1 question
Vediamo come utilizzare l'attributo style per cambiare le proprietà css di un elemento
1 question
Con questo esercizio vedremo come formattare elementi di una pagina con i fogli di stile usando il tag
Section 16: Selettori CSS
09:54

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

08:11

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>

04:13

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à

03:31

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

03:07

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: Conclusioni
02:19
03:34

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

03:07

Facciamo un riassunto dei selettori CSS visti nelle lezioni precedenti

1 question
Vediamo come aggiungere delle proprietà CSS ad un elemento che abbia un id
1 question
Vediamo come Selezionare tutti gli elementi discendenti di un elemento html per poterli formattare
1 question
Aggiungere delle proprietà css a tutti i div di una pagina web
Article

Andate sul tab download per scaricare gli esercizi

Section 17: CSS: Formattazione del testo

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Hidran Arias, 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 .

Ready to start learning?
Take This Course