Tutorial HTML e CSS Italian

(YouTube)
[PitoneProgrammatore]
TUTORIAL HTML E CSS ITA – Imparalo SUBITO! Corso

RAPIDO per principianti in ITALIANO [2020]
Come?
Ancora non conosci l’HTML e il CSS?
Bene!
In questo video ti insegnerò nel minor tempo possibile questi linguaggi che sono
fondamentali nella realizzazione di siti web.
Per questo tutorial ho creato un semplice file, “tutorial.html”, che aprirò con Google
Chrome.
Ma potete usare qualsiasi altro browser.
Per ora il nostro file html è vuoto come vedete, ma che aspettiamo?
Iniziamo subito a realizzare la nostra prima pagina web.
Bene, il codice html è costituito da tanti diversi tag, ognuno con la propria funzione.
Il primo tag che va inserito si chiama proprio “html”.
I tag si aprono con <”***”> e poi si richiudono con </”***”>.
Tutto il codice che scriveremo dovremmo metterlo qui, all’interno del tag html.
<html>
</html>
Inseriamo i tag “head” e “body”.
Possiamo inserire varie informazioni, ad esempio, il titolo della pagina.

<html>
<head>
</head>
<body>
</body>
</html>
Voglio che sia “Pitone Tutorial”.
Allora apri il tag “title”, all’interno inserisco il titolo e poi lo richiudo.
<html>
<head>
<title>Pitone Tutorial</title>
</head>
<body>
</body>
</html>
Nel “body”, invece, inseriamo il contenuto della nostra pagina.
Iniziamo inserendo una scritta bella grossa.
Posso usare il tag “header 1”, cioè “<h1>”, per scrivere in grande “HTML in tempo
record”.
<html>
<head>
</head>
<body>
<h1>HTML in tempo record</h1>
</body>
</html>
Bene, ora salvo il file, aggiorno Chrome, et voilà!
La pagina ora si chiama “Pitone Tutorial” ed è comparso il titolo “HTML in tempo

record”.
Possiamo aggiungere subito sotto un titolo più piccolo con “header 2”, ad esempio
“buona lezione”.
Abbiamo poi “header 3”, “header 4”, “header 5”, fino al “header 6” che è
piccolissimo.
<html>
<head>
</head>
<body>
<h2>buona lezione</h2>
<h6>ti serviranno gli occhiali !</h6>
</body>
</html>
Bene, ora cancelliamo un po' di titoli e aggiungiamo dei paragrafi col tag “p”.
All’interno dei tag “p” posso scrivere dei testi e perché non delle belle frasi
filosofiche?
<html>
<head>
</head>
<body>
<p>Lo specchio e’ il tuo miglior amico . . .</p>
<p>. . . non ridera’ mai di te mentre tu piangi</p>
</body>
</html>
Aggiorno Chrome e bam!
La nostra bella pagina è sempre più poetica, ma è un po' triste senza colori.
Perché non aggiungiamo un’immagine?
Facilissimo!
Basta usare il tag “image”.
Alcuni tag hanno delle proprietà.

Per il tag “image” usiamo la proprietà “source”, cioè “src”, per specificare il nome
dell’immagine “cane.jpg” che si trova sul desktop insieme al file html.
<html>
<head>
</head>
<body>
<img src=“cane.jpg”/>
</body>
</html>
Il tag di “image” va chiuso semplicemente senza riscriverlo.
Benissimo, ora il nostro sito contiene l’immagine di un bel cagnolino con evidenti
problemi psichiatrici.
Bene, l’immagine è carina ma è troppo appiccicata al testo.
Un tag utile per separare i vari elementi è il “breakpoint”, cioè “<br/>”.
Con questo tag aggiungo uno spazio tra il testo e l’immagine.
<html>
<head>
</head>
<body>
<br/>
</body>
</html>
Ecco, ora va meglio.
Ora voglio dare un tocco di stile, inserendo una linea di separazione subito sotto il
titolo.
Per inserire una linea di separazione subito sotto il titolo, uso il tag “hr”, cioè
“<hr/>”, e voilà!
<html>
<head>
</head>
<body>
<hr/>
<br/>
</body>
</html>
Perfetto, la nostra pagina inizia ad essere bellissima, anche grazie grazie al nostro
amico a quattro zampe.
Ma ancora non abbiamo deciso come chiamare il nostro amico a quattro zampe.
Voglio scrivere una lista dei nomi papabili.
Uso il tag “ordered list” per creare una lista numerata e, con “list” dopo “ordered
list”, inserisco i nomi.
“ordered list” = <ol>;
“list” = <li>.
(VAI ALLA PAGINA SUCCESSIVA)

<html>
<head>
</head>
<body>
<hr/>
<br/>
<ol>
<li>spolverino</li>
<li>marilena</li>
<li>armando</li>
<ol/>
</body>
</html>
Ma se questi tre nomi non sono belli a sufficienza, inseriamo un box dove l’utente
può scrivere un nome a piacere.
Usiamo il tag “input” e, con la proprietà “type”, specifichiamo che nel box va inserito
il testo.
<html>
<head>
</head>
<body>
<hr/>
<br/>
<ol>
<li>spolverino</li>
<li>marilena</li>
<li>armando</li>
<ol/>
<input type=“text”>
</body>
</html>
Aggiorniamo la pagina e… wow!
Compare la lista numerata e in questo box posso inserire un nome manualmente.
Adesso, per finire in bellezza, aggiungiamo alla nostra pagina un bel link.
Si usa il tag “a”.
Ah, ecco il parametro hyperlink “href” che ci specifica il sito di interesse.
Questo che vi scrivo è un sito molto carino dove trovate tutti i tag HTML disponibili.
<html>
<head>
</head>
<body>
<hr/>
<br/>
<ol>
<li>spolverino</li>
<li>marilena</li>
<li>armando</li>
<ol/>
<a href=“https://www.w3schools.com/html”> Guida HTML
</a>
</body>
</html>
All’interno del tag “a” inseriamo il titolo del link e voilà!
Cliccando sul link, ci porta a questo ottimo sito.
Fantastico!
La nostra bella pagina è adesso ricca di tanti elementi HTML, ma sono tutti riportati
senza un minimo di stile, di colore, di posizionamento ordinato.
Questo perché non abbiamo ancora applicato il linguaggio CSS.
Ebbene si, se con HTML scegliamo quali elementi inserire, con il CSS definiamo
come colorarli e posizionarli sulla pagina.
Questo titolo è un po' triste, no?
Proviamo a dargli un po' di stile.
Inseriamo la proprietà HTML “style” e all’interno specifichiamo tutte le proprietà

CSS che vogliamo.
Scrivo “<h1 style=“color:chocolate;font-family:Impact;text-align:center”>HTML in

tempo record</h1>” per dare a questo paragrafo un bel colore cioccolato.
“color:chocolate” = Colore cioccolato;
“font-family:Impact” = stile di impatto;
“text-align:center” = mettere il testo al centro della pagina.
<html>
<head>
</head>
<body>
<h1 style=“color:chocolate;font-family:Impact;text-align:center
”>HTML in tempo record</h1>
<hr/>
<br/>
<ol>
<li>spolverino</li>
<li>marilena</li>
<li>armando</li>
<ol/>
</a>
</body>
</html>
Vediamo se la nostra modifica ha avuto successo.
Bene, il titolo ha cambiato colore, stile e posizione.
La pagina inizia a diventare più ordinata, ma il codice sta diventando disordinato con
tutte queste proprietà CSS inserite una dopo l’altra.
Vi faccio vedere un modo più ordinato di usare il CSS, che è quello più utilizzato di
solito.
Nella cartella del file html, crea un nuovo file, di tipo css, con un nome a piacere.
All’interno di esso crea una classe css, mettendo un puntino seguito dal nome della
classe.
Ad esempio, “cioccolato”.
All’interno tra parentesi graffe riscrivo le stesse proprietà css riportate

precedentemente.
.cioccolato {
color: chocolate;
font-family: Impact;
text-align: center;
}
Bene, ora torno al file html e rimuovo tutta questa sporcizia.
Al suo posto, metto un pulitissimo “class=“cioccolato””.
Attenzione!
La classe “cioccolato” non è ancora visibile da questo file html perché si trova sul file
css che abbiamo creato poco fa.

<html>
<head>
</head>
<body>
<h1 class=“cioccolato”>HTML in tempo record</h1>
<hr/>
<br/>
<ol>
<li>spolverino</li>
<li>marilena</li>
<li>armando</li>
<ol/>
</a>
</body>
</html>
Dobbiamo, allora, collegare il file, aggiungendo al file html “<link href=”stili.css”

rel=“stylesheet”>”.

<html>
<head>
<link href=”stili.css” rel=“stylesheet”>
</head>
<body>
<hr/>
<br/>
<ol>
<li>spolverino</li>
<li>marilena</li>
<li>armando</li>
<ol/>
</a>
</body>
</html>
“rel=“stylesheet”” = proprietà che indica che il file in questione contiene elementi

css.
Se ora aggiorniamo la pagina, voilà!
Il titolo non è cambiato, perciò le nostre modifiche hanno avuto effetto.
Il bello è che la classe “cioccolato” che abbiamo appena creato possiamo, ora,
applicarla agli altri elementi.
Ad esempio, lo possiamo applicare al link di fine pagina.
Oltre a creare una classe, possiamo dare stile ad un elemento html in particolare.
Ad esempio, prendiamo l’elemento “body” e insegniamogli un bel colore di sfondo:

“limone”.

<html>
<head>
<link href=”stili.css” rel=“stylesheet”>
</head>
<body>
<hr/>
<br/>
<ol>
<li>spolverino</li>
<li>marilena</li>
<li>armando</li>
<ol/>
<a class=“cioccolato” href=“https://www.w3schools.com/html”> Guida
HTML</a>
</body>
</html>
.cioccolato {
color: chocolate;
text-align: center;
}
body {
background-color: lime;
}
Aggiorniamo, ed ecco che lo sfondo del nostro sito assume il colore assegnato.
Possiamo inserire dello spazio fra i diversi elementi.
Ad esempio, voglio che l’elemento “input” abbia un margine superiore pari a 15

pixel.
Ecco, così va meglio.

.cioccolato {
color: chocolate;
text-align: center;
}
body {
}
input {
margin-top: 15px;
}
Possiamo assegnare la stessa proprietà a più elementi insieme.
Ad esempio, voglio che sia “l’input” che il “paragrafo” abbiamo il font in grassetto.
.cioccolato {
color: chocolate;
text-align: center;
}
body {
}
input {
margin-top: 15px;
}
input, p {
font-weight: bold;
}
Ora sia “input” che “paragrafo” sono in grassetto.
Fantastico!
Prima di concludere, passiamo ad un concetto molto importante: le sezioni.

Ebbene si, possiamo racchiudere i nostri elementi html in sezioni, ovvero dei riquadri
che condividono gli stessi stili e colori, e possono essere posizionati come
preferiamo.
Voglio creare tre sezioni.
Nella prima racchiudo i primi due “paragrafi”.
Nella seconda “l’immagine”, “la lista”, “l’input” relativi al cane psicolabile.
Nell’ultimo i “link” che posizioneremo in basso sul fondo della pagina.
Creo la sezione grazie al tag “div” e, con la proprietà “id”, un nome che la
identifica… Poi si chiude con “</div>”… Infine faccio similmente per la sezione
cane e per la sezione di fine pagina.
<html>
<head>
<link href=“stili.css” rel=“stylesheet”>
</head>
<body>
<hr/>
<div id=“paragrafi”>
</div>
<br/>
<div id=“cane”>
<ol>
<li>spolverino</li>
<li>marilena</li>
<li>armando</li>
<ol/>
</div>
<div id=“footer”>
HTML</a>
</div>
</body>
</html>
Ottimo!
Ora immaginate che le sezioni siano semplicemente dei riquadri, dei box quadrati che
possono essere spostati nella pagina.
Bene, vado nel css e, scrivendo “cancelletto”, mi riferisco al riquadro che voglio
modificare.
Iniziamo da “paragrafi”.
Voglio spostare il riquadro “paragrafi” a sinistra, “cane” a destra e “footer” in basso.
Uso la funzione “float2 per appiccicare il riquadro “paragrafi” al bordo sinistro della
pagina e, poi, il riquadro “cane” al bordo destro e il riquadro “footer” sempre fissato
sul fondo della pagina.
.cioccolato {
color: chocolate;
text-align: center;
}
body {
}
input {
margin-top: 15px;
}
input, p {
font-weight: bold;
}
#paragrafi {
float: left;
}
#cane {
float: right;
}
#footer {
position: fixed;
bottom: 10px;
}
Il riquadro “footer” è fissato a una distanza pari a 10 pixel dal fondo.
Aggiorniamo la pagina… Wow!
I tre riquadri sono posizionati e il “footer” è appiccicato al bordo inferiore.
Oltre che spostare i riquadri, possiamo anche ridimensionarli.
Ad esempio, posso impostare la larghezza del riquadro “paragrafi2 pari a soli 200
pixel.
.cioccolato {
color: chocolate;
text-align: center;
}
body {
}
input {
margin-top: 15px;
}
input, p {
font-weight: bold;
}
#paragrafi {
float: left;
width: 200px;
}
#cane {
float: right;
}
#footer {
position: fixed;
bottom: 10px;
}
Come vedete, il testo viene schiacciato perché il riquadro ora è più bello.
Posso anche muovere gli elementi all’interno dei riquadri in cui si trovano.
Ad esempio, con la proprietà “padding-right”, imposto il margine fra il bordo destro

del riquadro “cane” e gli elementi all’interno.
.cioccolato {
color: chocolate;
text-align: center;
}
body {
}
input {
margin-top: 15px;
}
input, p {
font-weight: bold;
}
#paragrafi {
float: left;
width: 200px;
}
#cane {
float: right;
padding-right: 60px;
}
#footer {
position: fixed;
bottom: 10px;
}
Come vedete, l’immagine, che prima era attaccata al bordo destro del riquadro, ora si
sposta di 60 pixel.
Adesso, per finire in bellezza, mettiamo in evidenza il nome della lista che più ci
piace.
A me garba particolarmente “marilena”.

Guardate che cosa faccio: vado nel file html e aggiungo a “marilena” la classe
“preferito”.
<html>
<head>
<link href=“stili.css” rel=“stylesheet”>
</head>
<body>
<hr/>
<div id=“paragrafi”>
</div>
<br/>
<div id=“cane”>
<ol>
<li>spolverino</li>
<li class=“preferito”>marilena</li>
<li>armando</li>
<ol/>
</div>
<div id=“footer”>
HTML</a>
</div>
</body>
</html>
Ora torno nel file css e scrivo “#cane .preferito” con “font-size: 30px;”.

.cioccolato {
color: chocolate;
text-align: center;
}
body {
}
input {
margin-top: 15px;
}
input, p {
font-weight: bold;
}
#paragrafi {
float: left;
width: 200px;
}
#cane {
float: right;
padding-right: 60px;
}
#footer {
position: fixed;
bottom: 10px;
}
#cane .preferito {
font-size: 30px;
}
Così facendo, gli elementi, dentro il riquadro “cane”, che possiedono la classe
“preferito” avranno un testo grande 30 pixel.
Aggiorniamo la pagina e bam!
Ora il nome più accattivante è in evidenza!
Bene ragazzi, questo video è giunto al termine.
La pagina che abbiamo creato è davvero bella anche se inguardabile, ma spero che
nel crearla abbia già preso tante nozioni utili su HTML e CSS.
Ovviamente ne esistono un’infinità, ma con questo video vi ho voluto spiegare le più
basilari, quelle che vengono utilizzate più spesso.

Tutorial HTML e CSS Italian

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Tutorial HTML e CSS Italian

Caricato da

Copyright:

Formati disponibili

(YouTube)

TUTORIAL HTML E CSS ITA – Imparalo SUBITO! Corso

Ancora non conosci l’HTML e il CSS?

Ma potete usare qualsiasi altro browser.

Iniziamo subito a realizzare la nostra prima pagina web.

Il primo tag che va inserito si chiama proprio “html”.

I tag si aprono con <”***”> e poi si richiudono con </”***”>.

Inseriamo i tag “head” e “body”.

Possiamo inserire varie informazioni, ad esempio, il titolo della pagina.

Voglio che sia “Pitone Tutorial”.

Allora apri il tag “title”, all’interno inserisco il titolo e poi lo richiudo.

Nel “body”, invece, inseriamo il contenuto della nostra pagina.

Iniziamo inserendo una scritta bella grossa.

Bene, ora salvo il file, aggiorno Chrome, et voilà!

La pagina ora si chiama “Pitone Tutorial” ed è comparso il titolo “HTML in tempo

Aggiorno Chrome e bam!

Perché non aggiungiamo un’immagine?

Basta usare il tag “image”.

Alcuni tag hanno delle proprietà.

Il tag di “image” va chiuso semplicemente senza riscriverlo.

Bene, l’immagine è carina ma è troppo appiccicata al testo.

Un tag utile per separare i vari elementi è il “breakpoint”, cioè “<br/>”.

Con questo tag aggiungo uno spazio tra il testo e l’immagine.

Ecco, ora va meglio.

Voglio scrivere una lista dei nomi papabili.

“ordered list” = <ol>;

(VAI ALLA PAGINA SUCCESSIVA)

Compare la lista numerata e in questo box posso inserire un nome manualmente.

Si usa il tag “a”.

Ah, ecco il parametro hyperlink “href” che ci specifica il sito di interesse.

All’interno del tag “a” inseriamo il titolo del link e voilà!

Cliccando sul link, ci porta a questo ottimo sito.

Questo titolo è un po' triste, no?

Proviamo a dargli un po' di stile.

Inseriamo la proprietà HTML “style” e all’interno specifichiamo tutte le proprietà

Scrivo “<h1 style=“color:chocolate;font-family:Impact;text-align:center”>HTML in

“color:chocolate” = Colore cioccolato;

“font-family:Impact” = stile di impatto;

“text-align:center” = mettere il testo al centro della pagina.

Bene, il titolo ha cambiato colore, stile e posizione.

All’interno tra parentesi graffe riscrivo le stesse proprietà css riportate

Bene, ora torno al file html e rimuovo tutta questa sporcizia.

Al suo posto, metto un pulitissimo “class=“cioccolato””.

(VAI ALLA PAGINA SUCCESSIVA)

Dobbiamo, allora, collegare il file, aggiungendo al file html “<link href=”stili.css”

(VAI ALLA PAGINA SUCCESSIVA)

“rel=“stylesheet”” = proprietà che indica che il file in questione contiene elementi

Se ora aggiorniamo la pagina, voilà!

Il titolo non è cambiato, perciò le nostre modifiche hanno avuto effetto.

Ad esempio, lo possiamo applicare al link di fine pagina.

Ad esempio, prendiamo l’elemento “body” e insegniamogli un bel colore di sfondo:

(VAI ALLA PAGINA SUCCESSIVA)

Possiamo inserire dello spazio fra i diversi elementi.

Ad esempio, voglio che l’elemento “input” abbia un margine superiore pari a 15

Ecco, così va meglio.

Possiamo assegnare la stessa proprietà a più elementi insieme.

Ora sia “input” che “paragrafo” sono in grassetto.

Prima di concludere, passiamo ad un concetto molto importante: le sezioni.

Voglio creare tre sezioni.

Nella prima racchiudo i primi due “paragrafi”.

Nella seconda “l’immagine”, “la lista”, “l’input” relativi al cane psicolabile.

Nell’ultimo i “link” che posizioneremo in basso sul fondo della pagina.

Voglio spostare il riquadro “paragrafi” a sinistra, “cane” a destra e “footer” in basso.

I tag si aprono con <””> e poi si richiudono con </””>.