Corso completo Web Developer - Parte 2 - 2.1
Introduzione
Nella lezione precedente abbiamo introdotto HTML, in questa lezione andremo a vedere quali sono le parti importanti di HTML da conoscere assolutamente per avere una buona base di conoscenza del linguaggio HTML.
Elementi Inline ed elementi Block
HTML è un linguaggio di markup, questo significa che ci sono dei tag che vengono utilizzati per indicare all'interprete del linguaggio cosa deve fare con il testo che viene inserito tra i tag.
Esistono due tipi di elementi in HTML, quelli di tipo inline e quelli di tipo block.
Elementi Block
Gli elementi block sono elementi che vengono visualizzati come un blocco di testo, ad esempio il tag <p> viene utilizzato per creare dei paragrafi, questo tag viene visualizzato come un blocco di testo.
Che cosa s'intende per un blocco di testo? Semplicemente che viene creato intorno all'elemento un blocco che fa in modo che il testo che viene inserito tra i tag <p> venga visualizzato in una riga a se e che il testo che viene inserito dopo il tag </p> venga visualizzato in una nuova riga.
Altri esempi di elementi block sono:
- elementi di titolo
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> - elementi di lista
<ul>,<ol>,<li> - elementi di divisione
<div>
Elementi Inline
Gli elementi inline sono elementi che vengono visualizzati in linea con il testo che li contiene, ad esempio il tag <a> viene utilizzato per creare dei link, questo tag viene visualizzato in linea con il testo che lo contiene.
Altri esempi di elementi inline sono:
- elementi di testo
<b>,<i>,<u>,<s>,<strong>,<em>,<small>,<big>,<sub>,<sup> - elementi di immagine
<img> - elementi per rendere il testo in grassetto
<b>e<strong> - elementi per rendere il testo in corsivo
<i>e<em>
Andiamo a vedere come questi elementi inline e block vengono visualizzati nel browser e quindi capire effettivamente qual è la differenza tra i due.
Cosà è come viene scritto nella pagina HTML
<!DOCTYPE html>
<html>
<head>
<title>Elementi Block ed Inline</title>
</head>
<body>
<p>Elemento di tipo block. Questo Paragraph HTML tag prende tutta la larghezza della pagina e non permette al prossimo elementi di stare sulla stessa riga anche qualora ci fosse abbastanza spazio.</p>
<p>Questo è un altro paragrafo e come puoi vedere si trova su una riga differente perchè i paragraph tags sono block elements.</p>
<p>Questo è un altro paragrafo <strong>e questa scritta è in grassetto e come puoi vedere si trova sulla stessa riga di "Questo è un altro paragrafo" perchè gli strong tags sono Inline elements.</strong></p>
<a href="#">Questo è un anchor tag</a>
<a href="#">Questo è un altro anchor tag e come puoi vedere si trova sulla stessa riga dell'anchor tag precedente perchè gli anchor tags sono Inline elements.</a>
</body>
</html>
Cosà è come viene visualizzato nel browser
HTML Div Tag
Il tag <div> è un elemento block che viene utilizzato per creare delle divisioni all'interno della pagina HTML, questo tag viene utilizzato per raggruppare elementi HTML e per dare un nome ad una sezione della pagina HTML.
All'atto della visualizzazione della pagina l'elemento div non è visualizzato, la sua funzione è principalmente per dare un ordine logico ai contenuti della pagina HTML e per facilitare la gestione dei CSS ad un blocco di codice che vedremo successivamente.
Cosà è come viene scritto nella pagina HTML
<!DOCTYPE html>
<html>
<head>
<title>Elementi DIV</title>
</head>
<body>
<div>
<h2>Una sezione del nostro sito</h2>
</div>
<div>
<h3>Un'altra sezione del nostro sito</h3>
</div>
</body>
</html>
Cosà è come viene visualizzato nel browser
Attributi ID e class
Per far si che possiamo identificare un elemento HTML all'interno della pagina HTML e assegnarci una specifica logica, possiamo utilizzare gli attributi id e class.
Andiamo a vedere cosa sono questi attributi e come vengono utilizzati.
Attributo ID
L'attributo id viene utilizzato per identificare un elemento HTML all'interno della pagina HTML, questo attributo viene utilizzato per assegnare un nome univoco ad un elemento HTML il che significa che non possono esserci due elementi HTML con lo stesso attributo id all'interno della pagina HTML.
<h3 id="titolo-sezione-attributi">Questo è un elemento HTML con l'attributo id</h3>
Hai notato che non ci sono spazi nell'ID titolo-sezione-attributi ? Questo perchè gli spazi non sono ammessi all'interno dell'attributo id. Inoltre, un ID non può essere riutilizzato per identificare un elemento HTML diverso da quello che è stato assegnato e l'elemento al quale viene assegnato un'ID non può avere molteplici ID.
Attributo class
L'attributo class viene utilizzato per identificare un elemento HTML all'interno della pagina HTML, questo attributo viene utilizzato per assegnare un nome ad un elemento HTML il che significa che possono esserci più elementi HTML con lo stesso attributo class all'interno della pagina HTML.
La differenza principale da notare tra id e class è che gli elementi HTML possono avere più classi ma non possono avere più ID, un attributo class può essere utilizzato per più elementi e si possono assegnare più classi allo stesso elemento utilizzando uno spazio tra le classi.
Dall'esempio puoi notare che c'è l'elemento h3 ha due classi, titolo-sezione-attributi e large e che c'è uno spazio che le divide.
Esempio
<!DOCTYPE html>
<html>
<head>
<title>Attributi ID e class</title>
</head>
<body>
<h3 className="titolo-sezione-attributi large">Titolo da visualizzare</h3>
<p id="contenuto-attributi">Contenuto sezione attributi</p>
</body>
</html>
Elementi IMG
Nella lezione precedente di HTML Per Principianti abbiamo già visto come inserire un'immagine all'interno della pagina HTML, ma non abbiamo approfondito molto su questo elemento.
Il tag img è un elemento inline che viene utilizzato per inserire un'immagine all'interno della pagina HTML. Vengono utilizzati con esso due attributi, l'attributo src e l'attributo alt. L'attributo src viene utilizzato per specificare il percorso dell'immagine che si vuole inserire all'interno della pagina HTML, mentre l'attributo alt viene utilizzato per specificare un testo alternativo da visualizzare nel caso in cui l'immagine non viene visualizzata (in caso di problemi tecnici dove l'immagine non riesce a caricare o di persone con disabilità che utilizzano i cosiddetti screen-readers).
Ti ricordi inoltre che questo è un self-closing tag, ovvero un tag che non ha bisogno del tag di chiusura ma semplicemente di uno slash alla fine dell'opening tag. Andiamo a vederlo in azione.
Esempi
<!-- esempio errato -->
<img src="percorso/immagine/logo.png" alt="company-logo"></img>
<!-- esempio corretto -->
<img src="percorso/immagine/logo.png" alt="company-logo" />
Esempio completo
<!DOCTYPE html>
<html>
<head>
<title>Elemento IMG</title>
</head>
<body>
<img src="placeholder.png" alt="company-logo" />
</body>
</html>
Tabelle HTML
Le tabelle HTML sono un elemento molto importante da conoscere, questo perchè sono utilizzate per visualizzare dati in una tabella, come ad esempio i dati di un database.
Le tabelle HTML sono composte da tre elementi principali, il tag table che viene utilizzato per creare la tabella, il tag tr che viene utilizzato per creare una riga all'interno della tabella e il tag td che viene utilizzato per creare una cella all'interno della tabella.
Andiamo a vedere come vengono utilizzati questi elementi.
Tag table
Il tag table viene utilizzato per creare una tabella HTML, questo tag viene utilizzato per contenere tutti gli elementi che compongono la tabella.
<table>
<!-- contenuto tabella -->
</table>
Tag tr
Il tag tr viene utilizzato per creare una riga all'interno della tabella HTML, questo tag viene utilizzato per contenere tutti gli elementi che compongono la riga.
<table>
<tr>
<!-- contenuto riga -->
</tr>
</table>
Tag td
Il tag td viene utilizzato per creare una cella all'interno della tabella HTML, questo tag viene utilizzato per contenere tutti gli elementi che compongono la cella.
<table>
<tr>
<td>
<!-- contenuto cella -->
</td>
</tr>
</table>
Cosà è come viene scritto nella pagina HTML
<!DOCTYPE html>
<html>
<head>
<title>Tabelle HTML</title>
</head>
<body>
<table>
<tr>
<td>Nome</td>
<td>Cognome</td>
<td>Età </td>
</tr>
<tr>
<td>Marco</td>
<td>Verdi</td>
<td>25</td>
</tr>
<tr>
<td>Luca</td>
<td>Rossi</td>
<td>30</td>
</tr>
</table>
</body>
</html>
Cosà è come viene visualizzato nel browser
Sono d'accordo con te. Questa tabella ha l'aspetto di una tabella del 1990. Però, se vuoi, puoi usare CSS per renderla più bella. Infatti, la prossima lezione è proprio su CSS! :)
HTML Forms
Iniziamo spiegando cosa sono gli elementi form e come vengono utilizzati.
Un form è un elemento che viene utilizzato per inviare dati al server, ad esempio un form di login, un form di registrazione, un form di contatto, ecc.
Ogni qualvolta ci siamo trovati su un sito per effettuare una registrazione, ad esempio, abbiamo visto un form che ci chiedeva di inserire il nostro nome, cognome, email, password, ecc. Questo form è l'elemento form.
Il tag form è un elemento block-level. Vengono utilizzati con esso diversi attributi, l'attributo action e l'attributo method. L'attributo action viene utilizzato per specificare il percorso della pagina a cui verranno inviati i dati del form, mentre l'attributo method viene utilizzato per specificare il metodo HTTP che verrà utilizzato per inviare i dati del form.
Esempio
<form action="percorso" method="POST">
<!-- contenuto form -->
</form>
Elementi input
L'elemento input viene utilizzato per creare un campo di input all'interno di un form. Questo elemento viene utilizzato per inserire dati all'interno di un form, ad esempio un campo di testo, un campo di password, un campo di email, un campo di checkbox, un campo di radio, ecc.
Questo elemento viene utilizzato con diversi attributi, l'attributo type e l'attributo name. L'attributo type viene utilizzato per specificare il tipo di campo di input che vogliamo creare, mentre l'attributo name viene utilizzato per specificare il nome del campo di input.
Esempio
<form action="percorso" method="POST">
<input type="text" name="nome" />
</form>
Elementi textarea
L'elemento textarea viene utilizzato per creare un campo di testo all'interno di un form. Questo elemento viene utilizzato per inserire dati all'interno di un form, ad esempio un campo di testo.
Questo elemento viene utilizzato con diversi attributi, l'attributo name e l'attributo rows. L'attributo name viene utilizzato per specificare il nome del campo di testo, mentre l'attributo rows viene utilizzato per specificare il numero di righe del campo di testo.
Esempio
<form action="percorso" method="POST">
<textarea name="messaggio" rows="5"></textarea>
</form>
Elementi select
L'elemento select viene utilizzato per creare un campo di selezione all'interno di un form. Questo elemento viene utilizzato per inserire dati all'interno di un form, ad esempio un campo di selezione.
Questo elemento viene utilizzato con diversi attributi, l'attributo name e l'attributo multiple. L'attributo name viene utilizzato per specificare il nome del campo di selezione, mentre l'attributo multiple viene utilizzato per specificare se il campo di selezione può essere selezionato più volte.
Esempio
<form action="percorso" method="POST">
<select name="citta">
<option value="Roma">Roma</option>
<option value="Milano">Milano</option>
<option value="Napoli">Napoli</option>
</select>
</form>
Elementi button
L'elemento button viene utilizzato per creare un pulsante all'interno di un form. Questo elemento viene utilizzato per inserire dati all'interno di un form, ad esempio un pulsante di invio.
Questo elemento viene utilizzato con diversi attributi, l'attributo type e l'attributo name. L'attributo type viene utilizzato per specificare il tipo di pulsante che vogliamo creare, mentre l'attributo name viene utilizzato per specificare il nome del pulsante.
Esempio
<form action="percorso" method="POST">
<button type="submit" name="invia">Invia</button>
</form>
Cosà è come viene scritto nella pagina HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Forms</title>
</head>
<body>
<form action="percorso" method="POST">
<select name="citta">
<option value="Roma">Roma</option>
<option value="Milano">Milano</option>
<option value="Napoli">Napoli</option>
</select>
<input type="text" name="nome" placeholder="Inserisci il tuo nome">
<button type="submit" name="invia">Invia</button>
</form>
</body>
</html>
Cosà è come viene visualizzato nel browser
Conclusione
Questa è stata sicuramente la lezione più lunga che abbiamo visto finora, ma è anche la lezione più importante. In questa lezione abbiamo imparato a conoscere le parti più importanti di HTML, abbiamo imparato a conoscere i tag più importanti di HTML, abbiamo imparato a conoscere gli attributi più importanti di HTML e abbiamo imparato a conoscere i form HTML.
Non è stato facile, ma ora sei pronto per iniziare a creare i tuoi primi siti web. Iniziamo con la prossima lezione, dove impareremo a conoscere CSS.
Non preoccuparti se non ricordi esattamente tutto, puoi sempre rivedere questa lezione quando vuoi. Inoltre, la pratica è la chiave per imparare qualcosa di nuovo, nelle prossime lezioni andremo a riutilizzare tutto quello che abbiamo imparato finora e creeremo i nostri primi siti web 🚀