Ci siamo, stiamo per iniziare a scrivere codice!
Entro la fine di questa lezione sarai capace di comprendere e scrivere le basi di codice HTML.
Corso completo Web Developer - Parte 2 - 2.1
Introduzione
Iniziamo subito con il definire che cosa stiamo andando a studiare. Quello che stiamo andando a studiare non è un linguaggio di programmazione, per quello c'è da aspettare che arriviamo alla sezione di JavaScript.
HTML è un cosiddetto markup language. Che cosa significa questo?
Un linguaggio di programmazione è un linguaggio che è capace di sviluppare una logica, di dare un'intelligenza al nostro software.
HTML è capace di far visualizzare e creare struttura di una pagina web.
Mentre il linguaggio di programmazione è capace di creare vera e propria logica, HTML è soltanto capace di presentare del testo su una pagina web.
Che cosa sono i Tags HTML
Hai presente quando scrivi qualcosa con Microsoft Word ad esempio e cambi la dimensione del font per dare più o meno enfasi ad una parte del tuo testo?
Per esempio vuoi creare un titolo, un sottotitolo e poi un paragrafo.
Per far capire ad un Browser la differenza tra un titolo, un sottotitolo o un paragrafo vengono usati i cosiddetti Tags HTML.
Per spiegare com'è costruita una pagina web a me piace fare sempre il paragone con il corpo di un essere umano.
Il corpo dell'essere umano è composto da ossa. Queste ossa costituiscono la struttura del corpo umano.
Abbiamo la testa e le ossa che compongono il cranio.
La parte centrale con tutte le ossa come le costole, lo sterno, eccetera.
La parte bassa con le nostre gambe composte dalla tibia, la rotula, eccetera.
Le ossa del corpo umano possono essere paragonate ai cosiddetti HTML Tags.
Gli HTML Tags sono ciò che usiamo per costruire la struttura di una pagina web.
Attraverso l'utilizzo di questi tags facciamo principalmente due cose:
- creiamo le ossa che costituiscono la struttura della nostra pagina web
- organizziamo queste ossa in cosiddetti elementi proprio come organizziamo le ossa in ossa lunghe ed ossa corte per esempio
Gli elementi HTML possono essere per esempio: div, anchor, table.
Come possiamo scrivere un HTML Tag?
Gli HTML Tag sono contraddistinti dai segni matematici di maggiore e minore e dal nome del tag.
Solitamente gli HTML Tag hanno bisogno di essere aperti e chiusi per definire l'inizio e la fine di un determinato HTML Tag.
<nomeTag> Hello World! </nomeTag>
Che cosa succede in questo esempio?
Hai un tag nomeTag (questo è un esempio, non esiste realmente un tag chiamato nomeTag) di apertura ovvero quello a sinistra, uno di chiusura ovvero quello a destra e del contenuto al centro.
Puoi contraddistinguere il tag di chiusura dallo slash all'interno infatti i closing tags sono sempre definiti con uno slash all'interno.
Esistono anche alcuni tipi di HTML Tags che non hanno bisogno di un closing tag e questi vengono definiti self-closing tags.
<img src="" />
La struttura di una pagina Web
A parte l'estensione .html che diamo ad una pagina web HTML, il modo in cui possiamo dire ad un browser che una determinata pagina di codici è una pagina HTML è attraverso l'HTML tag.
Oltre al tag html specifichiamo anche il tipo di documento con il <!DOCTYPE html> all'inizio della pagina.
<!DOCTYPE html>
<html>
<head>
Qui il contenuto all'interno del tag Head
</head>
<body>
Qui il contenuto all'interno del tag body
</body>
</html>
Nell'esempio sopra ti ho introdotto a due tags di cui ancora non ti ho parlato: head e body tags.
Grazie a questi tags riusciamo a categorizzare le parti del nostro sito.
Il contenuto che va all'interno del tag head è un contenuto solitamente definito come metadata. Queste sono praticamente informazioni che descrivono altre informazioni.
Un esempio può essere il titolo della pagina web (quello che vediamo nella tag in alto), un link ad una risorsa esterna CSS o JS o parole chiave per i motori di ricerca.
Il body tag invece contiene l'effettivo contenuto della pagina. È la parte pulsante di una pagina web.
Commenti HTML
Che cosa sono i commenti HTML?
Quando si lavora su una pagina HTML potremmo avere necessità di lasciare un commento vicino ad una parte di codice.
Perchè potremmo voler lasciare un commento nel codice che stiamo scrivendo?
Immagina di lavorare in un team e sullo stesso codice potrebbe lavorarci un'altra persona nel team dopo qualche settimana o mese, stai sviluppando una parte di codice complessa dove con un breve commento vorresti spiegare che cosa fa quel pezzo di logica. La cosa più semplice è lasciarci un commento.
Per esempio vuoi descrivere il perchè il form di registrazione alla newsletter chiede all'utente di utilizzare il nome e l'email e non soltanto l'email. Potresti scrivere qualcosa come:
"questo form raccoglie il nome e l'indirizzo email che vengono poi utilizzati nel software della newsletter"
Come possiamo far capire al Browser che questo testo è un commento e non una parte viva della pagina web che stiamo sviluppando e quindi far effettivamente ignorare al browser questo testo?
Semplice, basta utilizzare la sintassi come nell'esempio seguente:
<!-- Questo è un commento in una pagina HTML -->
Lo vedremo meglio in azione nel sito che andremo a realizzare.
Cosa sono i Tag attributes
I Tag attributes sono delle proprietà aggiuntive che diamo al nostro tag HTML.
Alcuni tag HTML necessitano di alcune proprietà mentre altri sono opzionali e possiamo decidere noi se usarli o meno.
L'attributo è una cosa che va sempre assegnata nel tag di apertura di un elemento HTML.
Questo è un esempio di un attributo:
<nomeTag attributo="valore dell'attributo"> testo </nomeTag>
- creiamo l'elemento HTML con i due tags di apertura e chiusura;
- nel mezzo tra il tag di apertura ed il tag di chiusura mettiamo il testo;
- nel tag di apertura mettiamo l'attributo, il segno uguale ed il valore che assegniamo all'attributo tra le due virgolette;
I principali HTML Tags
Esistono tanti tipi di tag HTML, di seguito voglio elencarti quali sono i più comuni:
- Heading tags - questi sono usati per i titoli di testo in una pagina. Ce ne sono sei dove l'Heading n. 1 è il più importante e l'Heading n. 6 è il meno importante. Per esempio:
<h1>Questo è un titolo</h1> - anchor tag - questo è un tag che viene usato per creare un link all'interno di una pagina. Per esempio:
<a href="www.gorgatech.com">Questo è un link</a> - Paragraph tag - questo è un tag che viene utilizzato per scrivere un paragrafo di testo. Per esempio:
<p>Questo è un paragrafo di testo</p> - Table tag - questo è un tag che serve per creare delle tabelle. Per esempio:
<table>Qui la tabella</table> - Table row tag - questo è un tag che viene utilizzato all'interno di una tabella per creare una riga. Per esempio:
<tr>Riga all'interno della tabella</tr> - Table head tag - questo è un tag che viene utilizzato per creare un'intestazione all'interno di una tabella. Per esempio:
<th>Intestazione tabella</th> - Table data tag - questo è un tag che viene utilizzato per inserire dei contenuti all'interno di una tabella. Per esempio:
<td>Valore all'interno di una tabella</td> - Unordered list tag - questo è un tag che serve per creare delle liste. L'unordered list differisce dall'ordered list perchè avrà di defaults dei bullet points come quelli di questa lista che stai leggendo anzichè avere dei numeri progressivi. Per esempio:
<ul>Contenuto delle lista</ul> - Ordered list tag - questo è un tag che serve per creare delle liste dove ogni elemento avrà un numero progressivo. Per esempio:
<ol>Contenuto della lista ordinata</ol> - List item tag - questo è un tag che serve per creare un elemento all'interno di una lista. Per esempio:
<li>Elemento della lista</li>
Per renderti le cose più chiare voglio subito farti vedere all'azione questi tags HTML.
Questo è come viene scritto il codice nel text editor
E cosí è come viene visualizzato nel Browser
Progetto
Creiamo un piccolo progetto interamente in HTML. Andremo ad utilizzare VS Code e l'estensione Live Server.
- VS Code - text editor (o un qualsiasi altro text editor di tua preferenza);
- Live Server - l'estensione per VS Code che utilizziamo per visualizzare nel browser il sito web che costruiamo;
Se non hai ancora installato VS Code o l'estensione Live Server ti suggerisco di rivedere l'articolo per la Preparazione del tuo computer ad un ambiente di sviluppo e successivamente di continuare il progetto.
Ti consiglio vivamente di ripetere i passaggi che leggi qui e di provare con le tue stesse mani. Questo ti aiuterà di gran lunga a ricordare ed effettivamente comprendere che cosa succede.
Iniziamo!
Step 1
Apriamo la command line. Se sei un utente Mac questo per te sarà il Terminale altrimenti su Windows ti consiglio GitBash.
Step 2
Dirigiamoci nella cartella coding che abbiamo creato sul Desktop durante la lezione di Git e GitHub e creiamo all'interno una cartella chiamata html-beginner. Se non hai ancora questa cartella dirigiti semplicemente sul Desktop e crea una cartella html-beginner.
$ cd ~
$ cd Desktop
$ cd coding
$ mkdir html-beginner
$ cd html-beginner
Step 3
Creiamo un file all'interno della cartella html-beginner chiamato index.html
$ touch index.html
Step 4
Ora apriamo il Software VS Code ed apriamo l'intera cartella html-beginner che dovrebbe contenere l'index.html al suo interno.
Step 5
A questo punto prepariamo la base della pagina HTML. A capo della pagina definiamo il tipo di file con il tag !DOCTYPE html e poi aggiungiamo il tag di base html, il tag head ed il tag body.
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
</head>
<body>
</body>
</html>
Step 6
Ora apriamo questa pagina web sul browser con l'estensione Live Server. Per fare ciò clicca semplicemente con il pulsante destro del mouse sulla pagina HTML e poi clicca su "Open with Live Server". Ti si aprirà una nuova tab sul browser con la pagina HTML. Ogni qual volta faremo un cambiamento al file questa tab si aggiornerà per mostrare il cambiamento.
Step 7
Ora definiamo un titolo nel body della pagina. Questo possiamo farlo con un Heading tag. In questo caso utilizzeremo l'heading tag principale ovvero l'H1
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
</head>
<body>
<h1>Benvenuto sul sito del Colosseo, il monumento più famoso di Roma</h1>
</body>
</html>
Step 8
Ora aggiungiamo un sottotitolo subito sotto al tag H1. Useremo il tag H2 per questo.
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
</head>
<body>
<h1>Benvenuto sul sito del Colosseo, il monumento più famoso di Roma</h1>
<h2>Il Colosseo, la più bella rovina di Roma, termina il nobile recinto dove si manifesta tutta la storia.</h2>
</body>
</html>
Step 9
Adesso aggiungeremo un paragrafo al di sotto del tag H2
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
</head>
<body>
<h1>Benvenuto sul sito del Colosseo, il monumento più famoso di Roma</h1>
<h2>Il Colosseo, la più bella rovina di Roma, termina il nobile recinto dove si manifesta tutta la storia.</h2>
<p>Il Colosseo è stato costruito in una valle, dopo aver asciugato un piccolo lago che Nerone usava per la Domus Aurea tra le colline di Palatino, Esquilino e Celio. Il Colosseo è diventato il più grande anfiteatro romano, con una struttura ellittica lunga 188 metri, larga 156 metri ed alta 57 metri.</p>
</body>
</html>
Step 10
A questo punto creiamo un link con la pagina del Colosseo su Wikipedia. Per creare un link viene usato l'anchor tag. L'anchor tag l'utilizzo di un attributo chiamato href che serve per fare il collegamento con il sito che vogliamo linkare
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
</head>
<body>
<h1>Benvenuto sul sito del Colosseo, il monumento più famoso di Roma</h1>
<h2>Il Colosseo, la più bella rovina di Roma, termina il nobile recinto dove si manifesta tutta la storia.</h2>
<p>Il Colosseo è stato costruito in una valle, dopo aver asciugato un piccolo lago che Nerone usava per la Domus Aurea tra le colline di Palatino, Esquilino e Celio. Il Colosseo è diventato il più grande anfiteatro romano, con una struttura ellittica lunga 188 metri, larga 156 metri ed alta 57 metri.</p>
<a href="https://it.wikipedia.org/wiki/Colosseo">Visita la pagina di Wikipedia per maggiori informazioni</a>
</body>
</html>
Step 11
All'interno del nostro body iniziamo ad avere già quattro elementi HTML: un H1, un H2, un paragraph ed un anchor tag. Immagina di avere un sito complesso, il numero degli elementi può facilmente superare le centinaia. Per questo motivo esiste un modo per dare ordine alla pagina e raggruppare più elementi insieme. Per questo viene usato un tag HTML chiamato div. Un div element funge appunto da contenitore di più elementi. Andiamo a raggruppare questi quattro elementi in una div
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
</head>
<body>
<div>
<h1>Benvenuto sul sito del Colosseo, il monumento più famoso di Roma</h1>
<h2>Il Colosseo, la più bella rovina di Roma, termina il nobile recinto dove si manifesta tutta la storia.</h2>
<p>Il Colosseo è stato costruito in una valle, dopo aver asciugato un piccolo lago che Nerone usava per la Domus Aurea tra le colline di Palatino, Esquilino e Celio. Il Colosseo è diventato il più grande anfiteatro romano, con una struttura ellittica lunga 188 metri, larga 156 metri ed alta 57 metri.</p>
<a href="https://it.wikipedia.org/wiki/Colosseo">Visita la pagina di Wikipedia per maggiori informazioni</a>
</div>
</body>
</html>
Step 12
A questo punto vogliamo elencare tre principali luoghi d'interesse vicino al Colosseo. Potremmo scegliere tra un unordered list o una ordered list. Visto che questi punti d'interesse non seguono necessariamente un'ordine preciso utilizzeremo una unordered list.
Questa la creeremo intorno ad un altro contenitore div e aggiungeremo i tre punti d'interesse utilizzando i list elements. Inoltre aggiungeremo un piccolo Heading prima della lista.
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
</head>
<body>
<div>
<h1>Benvenuto sul sito del Colosseo, il monumento più famoso di Roma</h1>
<h2>Il Colosseo, la più bella rovina di Roma, termina il nobile recinto dove si manifesta tutta la storia.</h2>
<p>Il Colosseo è stato costruito in una valle, dopo aver asciugato un piccolo lago che Nerone usava per la Domus Aurea tra le colline di Palatino, Esquilino e Celio. Il Colosseo è diventato il più grande anfiteatro romano, con una struttura ellittica lunga 188 metri, larga 156 metri ed alta 57 metri.</p>
<a href="https://it.wikipedia.org/wiki/Colosseo">Visita la pagina di Wikipedia per maggiori informazioni</a>
</div>
<div>
<h4>I principali luoghi di interesse vicino al Colosseo</h4>
<ul>
<li>Foro Romano</li>
<li>Pantheon</li>
<li>Piazza Navona</li>
</ul>
</div>
</body>
</html>
Step 13
Per avere una pagina con uno stile leggermente più accattivamente abbiamo bisogno di un'immagine del Colosseo. Per questo andremo ad utilizzare l'img tag che ti ricordo che è un self-closing tag ovvero un elemento senza il tag di chiusura e con lo slash all'interno del tag di apertura. Utilizzeremo due attributi: src ed alt. Il primo serve a far capire al computer dove deve andare a prelevare l'immagine mentre il secondo serve a dare un'informazione testuale al computer relativa all'immagine.
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
</head>
<body>
<div>
<h1>Benvenuto sul sito del Colosseo, il monumento più famoso di Roma</h1>
<h2>Il Colosseo, la più bella rovina di Roma, termina il nobile recinto dove si manifesta tutta la storia.</h2>
<p>Il Colosseo è stato costruito in una valle, dopo aver asciugato un piccolo lago che Nerone usava per la Domus Aurea tra le colline di Palatino, Esquilino e Celio. Il Colosseo è diventato il più grande anfiteatro romano, con una struttura ellittica lunga 188 metri, larga 156 metri ed alta 57 metri.</p>
<a href="https://it.wikipedia.org/wiki/Colosseo">Visita la pagina di Wikipedia per maggiori informazioni</a>
</div>
<div>
<h4>I principali luoghi di interesse vicino al Colosseo</h4>
<ul>
<li>Foro Romano</li>
<li>Pantheon</li>
<li>Piazza Navona</li>
</ul>
<img src="https://images.unsplash.com/photo-1604580864964-0462f5d5b1a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="colosseo">
</div>
</body>
</html>
Step 14
Per completare il nostro sito sul Colosseo aggiungiamo un modo per farci contattare dai nostri utenti. Quindi aggiungiamo un collegamento dove l'utente può cliccare ed aprire il Software di default per inviare un e-mail.
<!DOCTYPE html>
<html>
<head>
<title>Colosseo</title>
</head>
<body>
<div>
<h1>Benvenuto sul sito del Colosseo, il monumento più famoso di Roma</h1>
<h2>Il Colosseo, la più bella rovina di Roma, termina il nobile recinto dove si manifesta tutta la storia.</h2>
<p>Il Colosseo è stato costruito in una valle, dopo aver asciugato un piccolo lago che Nerone usava per la Domus Aurea tra le colline di Palatino, Esquilino e Celio. Il Colosseo è diventato il più grande anfiteatro romano, con una struttura ellittica lunga 188 metri, larga 156 metri ed alta 57 metri.</p>
<a href="https://it.wikipedia.org/wiki/Colosseo">Visita la pagina di Wikipedia per maggiori informazioni</a>
</div>
<div>
<h4>I principali luoghi di interesse vicino al Colosseo</h4>
<ul>
<li>Foro Romano</li>
<li>Pantheon</li>
<li>Piazza Navona</li>
</ul>
<img src="https://images.unsplash.com/photo-1604580864964-0462f5d5b1a8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" alt="colosseo">
<a href="mailto:email@email.com">Contattami ora inviandomi un e-mail</a>
</div>
</body>
</html>
Nell'attributo href puoi sostituire "email@email.com" con la tua email.
Risultato finale
Conclusione
Siamo arrivati alla fine del capitolo HTML Per Principianti. Complimenti! 👏
Se stai pensando che il progetto che hai sviluppato oggi è triste e senza stile voglio dirti che sono d'accordo 😁
Con HTML crei la struttura di un palazzo ma non usi la pittura, le finestre, eleganti rifiniture. Questo è il lavoro per il CSS che serve appunto a rendere grazioso lo stile di un sito internet 💄 ed è la sezione che andremo a studiare subito dopo aver completato la sezione di HTML.
Datti una bella pacca sulla spalla per il tuo primo progetto e ci vediamo alla seconda lezione di HTML.