tag body<\/strong>.<\/p>\n\n\n\nAll’interno di questa sezione possiamo inserire il contenuto vero e proprio della pagina HTML vale a dire tutti gli elementi che costituiranno la nostra pagina e che verranno visualizzati: intestazioni, paragrafi, link, immagini, elenchi, tabelle e cos\u00ec via.<\/p>\n\n\n\n
Tutti gli elementi della pagina andranno quindi inseriti tra il tag body di apertura e quello di chiusura. Vediamo un esempio semplice di una sezione body con all’interno un titolo h1 e un paragrafo:<\/p>\n\n\n\n
<body>\n\t<h1>Questo \u00e8 un titolo<\/h1>\n\t<p>Questo \u00e8 un paragrafo<\/p>\n<\/body><\/code><\/pre>\n\n\n\nDiv e span<\/h3>\n\n\n\n Il tag <div> ci permette di racchiudere pi\u00f9 elementi in un’unica sezione.<\/p>\n\n\n\n
Suddividere il nostro documento HTML in sezioni ci facilita il lavoro quando vogliamo modificare lo stile, \u00e8 infatti possibile applicare uno stile a tutta la sezione oppure assegnare una classe a un div e poi definire uno stile o delle regole specifiche per quella classe.<\/p>\n\n\n\n
Il tag <span> \u00e8 simile a div, solo che in questo caso invece di funzionare a livello di blocco e quindi di racchiudere pi\u00f9 elementi, il tag span ci permette di creare un “contenitore” in linea.<\/p>\n\n\n\n
Ecco un esempio che ci permette di capire meglio le differenze tra div e span:<\/p>\n\n\n\nCome vedi nel primo caso abbiamo inserito un intestazione e un paragrafo all’interno di un div per poi applicare uno stile a tutto il div (in questo caso specifico alla classe associata al div). Nel secondo invece abbiamo utilizzato uno span per cambiare lo stile di una parte del paragrafo lasciando il resto inalterato.<\/p>\n\n\n\n
All’interno di un documento HTML possiamo inserire dei commenti<\/strong>. I commenti non verranno mostrati nel browser, ma sono solo a uso interno, possiamo usarli per inserire delle note per noi o per altre persone che modificheranno il codice sorgente della pagina.<\/p>\n\n\n\nI commenti HTML si scrivono in questo modo:<\/p>\n\n\n\n
<!-- Questo \u00e8 un commento --><\/code><\/pre>\n\n\n\nEcco un esempio, come vedi nell’anteprima non vengono mostrati i commenti che abbiamo inserito.<\/p>\n\n\n\nApriamo quindi un nuovo capitolo per vedere i principali tag HTML che possiamo usare per creare la nostra pagina HTML.<\/p>\n\n\n\n
Nota che ci sono pi\u00f9 di 100 tag HTML per cui non sar\u00e0 possibile spiegarli tutti in questa guida HTML, vedremo quindi quelli principali.<\/p>\n\n\n\n
Tag HTML per i testi<\/h2>\n\n\n\n Una delle conoscenze basilari per chi vuole imparare l’HTML \u00e8 sapere quali sono i tag che si possono usare per i testi.<\/p>\n\n\n\n
Titoli<\/h3>\n\n\n\n Ci sono sei tipi di titoli HTML che possiamo usare. I titoli vanno in ordine di importanza da H1 ad H6, H1 rappresenter\u00e0 quindi il titolo principale della pagina (in genere si usa un solo h1). H2 sar\u00e0 il sottotitolo, H3 il sotto-sottotitolo e cos\u00ec via.<\/p>\n\n\n\n
Tieni presente che di default il browser mostrer\u00e0 i titoli meno importanti via via di dimensioni pi\u00f9 piccole.<\/p>\n\n\n\nInserendo nel body i vari tag h possiamo vedere come variano le dimensioni come nell’esempio di sopra:<\/p>\n\n\n\n
<h1>Questo \u00e8 un titolo H1<\/h1>\n<h2>Questo \u00e8 un titolo H2<\/h2>\n<h3>Questo \u00e8 un titolo H3<\/h3>\n<h4>Questo \u00e8 un titolo H4<\/h4>\n<h5>Questo \u00e8 un titolo H5<\/h5>\n<h6>Questo \u00e8 un titolo H6<\/h6><\/code><\/pre>\n\n\n\nParagrafi<\/h3>\n\n\n\n Per creare un paragrafo ci basta utilizzare il tag <p> in questo modo:<\/p>\n\n\n\n
<p>Questo \u00e8 un paragrafo<\/p><\/code><\/pre>\n\n\n\nOgni paragrafo viene preceduto e seguito da una riga bianca.<\/p>\n\n\n\n
Se volessimo creare due paragrafi e andare a capo tra uno e l’altro, ci basterebbe quindi inserire pi\u00f9 tag p, in questo modo:<\/p>\n\n\n\n
<p>Questo \u00e8 un paragrafo.<\/p>Nota che il browser non considera gli invii, per cui se noi scriviamo la sezione in questo modo:<\/p>\n\n\n\n
<p>Questo \u00e8 \nun paragrafo.<\/p><\/code><\/pre>\n\n\n\nIl browser la mostrer\u00e0 sempre per esteso (su una sola riga), ignorando l’invio e non mandando a capo. Per farlo dobbiamo creare due paragrafi o in alternativa usare il tag <br><\/code> per andare a capo nello stesso paragrafo senza lasciare una riga bianca tra un paragrafo e l’altro. <\/p>\n\n\n\nEcco un esempio che ci fa capire la differenza dell’uso di pi\u00f9 tag p o del tag br.<\/p>\n\n\n\nAll’interno di un documento HTML possiamo evidenziare alcuni elementi utilizzando i tag <em> e <strong>.<\/p>\n\n\n\n
Il tag <em> serve a dare enfasi a una parola o a una frase e viene visivamente reso in corsivo<\/strong>.<\/p>\n\n\n\nIl tag <strong> ci permette di evidenziare frasi o parole importanti che verranno visualizzati in grassetto<\/strong>.<\/p>\n\n\n\nEcco un esempio dell’uso di questi due tag.<\/p>\n\n\n\nCome vedi l’utilizzo \u00e8 molto semplice, ci basta inserire la parola o la frase all’interno del tag.<\/p>\n\n\n\n
Elenchi<\/h3>\n\n\n\n Il linguaggio HTML ci permette di creare degli elenchi in diverso modo ad esempio possiamo creare un elenco puntato semplice o un elenco numerato.<\/p>\n\n\n\n
Per creare un elenco puntato<\/strong> possiamo usare il tag <ul> e contrassegnare ogni elemento della lista con il tag <li>.<\/p>\n\n\n\nInvece per creare un elenco numerato<\/strong> possiamo usare il tag <ol>, e poi inserire ogni elemento della lista all’interno di un tag <li>.<\/p>\n\n\n\nEcco i due esempi:<\/p>\n\n\n\nUsando gli elenchi numerati abbiamo anche altre opzioni grazie agli attributi. Ti mostro qui degli esempi.<\/p>\n\n\n\n
L’attributo reversed ci permette di cambiare l’ordinamento degli elementi numerati e averli cos\u00ec in ordine decrescente<\/strong>.<\/p>\n\n\n\nEcco un esempio di utilizzo:<\/p>\n\n\n\n
<ol reversed>\n\t<li>... <\/li>\n\t<li>... <\/li>\n<\/ol><\/code><\/pre>\n\n\n\nPossiamo anche cominciare a numerare da un numero diverso da 1 impostandolo con l’attributo start in questo modo:<\/p>\n\n\n\n
<ol start=\"3\"><\/code><\/pre>\n\n\n\nInoltre possiamo utilizzare elementi diversi per contrassegnare gli elementi della lista, ad esempio lettere anzich\u00e9 numeri oppure numeri romani. Per farlo ci basta usare l’attributo type, ecco alcuni esempi:<\/p>\n\n\n\n
\n<ol type=\"A\"><\/code>, per usare lettere invece di numeri (A, B, C, ecc).<\/li>\n\n\n\n<ol type=\"I\">, <\/code>per usare numeri romani (I, II, III, ecc).<\/li>\n<\/ul>\n\n\n\n\u00c8 possibile anche cambiare l’aspetto degli elenchi puntati (non numerati) attraverso l’attributo style. Vediamo alcuni esempi:<\/p>\n\n\n\nIn questi esempi abbiamo creato degli elenchi puntati con diversi stili.<\/p>\n\n\n\n
In particolare per creare una lista <\/strong>HTML<\/strong> senza punti<\/strong> possiamo aggiungere questo attributo:<\/p>\n\n\n\n<ul style=\"list-style-type:none\"><\/code><\/pre>\n\n\n\nSe vogliamo cambiare lo stile<\/strong> dei punti, possiamo usare:<\/p>\n\n\n\n “circle” (<ul style=\"list-style-type:circle\"><\/code>) per dei cerchi vuoti, <\/p>\n\n\n\n“square” per dei quadrati (<ul style=\"list-style-type:square\"><\/code>), <\/p>\n\n\n\n“disc” (<ul style=\"list-style-type:disc\"><\/code>) ci permette di creare i cerchi pieni come quelli che abbiamo di default (vale a dire senza specificare nessun attributo style).<\/p>\n\n\n\nTabelle HTML<\/h2>\n\n\n\n Attraverso le tabelle HTML<\/strong> \u00e8 possibile organizzare delle informazioni in colonne e righe.<\/p>\n\n\n\nPer creare una tabella in linguaggio HTML abbiamo bisogno di conoscere gli elementi che ne costituiscono la struttura:<\/p>\n\n\n\n
\n<table><\/code> il tag table \u00e8 il tag che ci permette di creare la tabella.<\/li>\n\n\n\n<td><\/code> \u00e8 il tag che ci permette di inserire i dati della tabella, vale a dire il contenuto <\/strong>che andremo a inserire nella singola cella.<\/li>\n\n\n\n<tr><\/code> \u00e8 il tag che ci permette di creare la riga<\/strong>, ogni elemento “td” all’interno del tag tr sar\u00e0 una cella che far\u00e0 parte della stessa riga.<\/li>\n\n\n\n<th><\/code> con questo tag possiamo inserire un’intestazione<\/strong>, tieni presente che come “td” anche questo tag andr\u00e0 inserito all’interno di un tag tr per formare correttamente la riga.<\/li>\n<\/ul>\n\n\n\nCome esempio per questa guida HTML andiamo a creare una semplice tabella HTML con le intestazioni.<\/p>\n\n\n\nRiporto qui il codice HTML usato per creare la tabella a titolo di esempio:<\/p>\n\n\n\n
<table>\n <tr>\n <th>Nome<\/th>\n <th>Categoria<\/th> \n <th>Id Prodotto<\/th> \n <th>Quantit\u00e0<\/th> \n <\/tr>\n\n <tr>\n <td>Matite<\/td>\n <td>Cancelleria<\/td>\n <td>001<\/td>\n <td>800<\/td>\n <\/tr>\n\n <tr>\n <td>Quaderni<\/td>\n <td>Cancelleria<\/td>\n <td>102<\/td>\n <td>100<\/td>\n <\/tr>\n<\/table><\/code><\/pre>\n\n\n\nCome vedi la creazione della tabella avviene per righe, questo significa che dovrai inserire nello stesso tag <tr> i contenuti delle celle della stessa riga, per esempio nella riga dell’intestazione: Nome, categoria, ID prodotto e quantit\u00e0.<\/p>\n\n\n\n
Se invece volessi inserire le intestazioni in verticale<\/strong>, ad esempio nella prima colonna dovrai modificare la struttura della tabella in modo da inserire l’elemento <th> come primo elemento di ogni riga, come in questo esempio:<\/p>\n\n\n\nEcco il codice della tabella con le intestazioni verticali:<\/p>\n\n\n\n
<table>\n <tr>\n <th>Nome<\/th>\n <td>Matite<\/td>\n <td>Quaderni<\/td>\n <\/tr>\n <tr>\n <th>Categoria<\/th> \n <td>Cancelleria<\/td>\n <td>Cancelleria<\/td>\n <\/tr>\n <tr>\n <th>Id Prodotto<\/th> \n <td>001<\/td>\n <td>102<\/td>\n <\/tr>\n \n <tr>\n <th>Quantit\u00e0<\/th> \n <td>800<\/td>\n <td>100<\/td>\n <\/tr>\n<\/table><\/code><\/pre>\n\n\n\nTieni presente che se non inserisci uno stile la tabella apparir\u00e0 senza bordi e avr\u00e0 un aspetto come questo:<\/p>\n\n\n\nNegli esempi di sopra abbiamo dato uno stile in questo modo:<\/p>\n\n\n\n
<style>\ntable, th, td {\n border: 2px solid red;\n border-collapse: collapse;\n}\nth, td {\n padding: 7px;\n}\n<\/style><\/code><\/pre>\n\n\n\nInoltre possiamo cambiare la dimensione della tabella con le propriet\u00e0 “width” e “height” per definire altezza e larghezza e usare le altre propriet\u00e0 CSS per cambiare colore di sfondo, creare tabelle con righe a colori alternati e cos\u00ec via.<\/p>\n\n\n\n
Link<\/h2>\n\n\n\n In HTML i link si inseriscono utilizzando il tag <a>.<\/p>\n\n\n\n
Usare questo tag \u00e8 molto semplice: all’interno del tag a dobbiamo inserire l’attributo href e dargli come valore il link di destinazione, mentre compreso tra il tag di apertura e chiusura andremo a inserire il testo cliccabile che verr\u00e0 visto nel front end della pagina.<\/p>\n\n\n\n
<a href=\"https:\/\/supporthost.com\/it\/\">Vai al sito di SupportHost<\/a><\/code><\/pre>\n\n\n\nEcco un esempio:<\/p>\n\n\n\nPossiamo utilizzare l’attributo target per specificare che vogliamo che la nuova pagina si apra in una nuova scheda del browser, aggiungendo target=”_blank” in questo modo:<\/p>\n\n\n\n
<a href=\"https:\/\/supporthost.com\/it\/\" target=\"_blank\">Vai al sito di SupportHost<\/a><\/code><\/pre>\n\n\n\nUn altro attributo che \u00e8 utile conoscere \u00e8 l’