Impara DOCTYPE HTML e Crea Tabelle Divertenti

Apri

123

Sebastiano Sasso

25/09/2022

Informatica

Html e CSS

Materie

Informatica

Impara DOCTYPE HTML e Crea Tabelle Divertenti

HTML è il linguaggio di markup fondamentale per creare pagine web. Questa guida fornisce una panoramica dei principali tag HTML e del loro utilizzo, con esempi pratici per aiutare i principianti a comprendere la struttura tag HTML doctype e altri elementi essenziali.

Copre i tag di base come , , e
Spiega tag per formattare il testo come
,
Illustra come creare una tabella HTML step by step
Fornisce una guida ai tag di intestazione HTML e altri elementi strutturali
Include esempi di codice per ciascun tag e attributo

25/09/2022

<p>Il tag <!DOCTYPE html> è essenziale perché comunica al browser il tipo di documento che deve aspettarsi. È possibile aggiungere l'attrib

Elementi dell'intestazione e del corpo

Il tag <head> contiene metadati e informazioni non visibili direttamente nella pagina:

<head>
  <title>Titolo della pagina</title>
  <meta charset="UTF-8">
  <meta name="description" content="Descrizione della pagina">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="stile.css">
</head>

Il tag <body> contiene tutto il contenuto visibile della pagina:

<body>
  <header>
    <!-- Intestazione della pagina -->
  </header>
  <nav>
    <!-- Menu di navigazione -->
  </nav>
  <main>
    <!-- Contenuto principale -->
  </main>
  <footer>
    <!-- Piè di pagina -->
  </footer>
</body>

Definition: Il tag <title> definisce il titolo del documento mostrato nella scheda del browser ed è cruciale per l'ottimizzazione SEO.

Example: Un esempio di utilizzo del tag meta per la descrizione:

<meta name="description" content="Guida completa ai tag HTML per principianti">

Vedi

Elementi di testo e formattazione

HTML offre diversi tag per strutturare e formattare il testo:

<p> per i paragrafi
<h1> a <h6> per i titoli di diversa importanza
<strong> e <em> per enfatizzare il testo
<ul>, <ol> e <li> per creare liste

Esempio di utilizzo:

<h1>Titolo principale</h1>
<p>Questo è un <strong>paragrafo</strong> con del testo <em>enfatizzato</em>.</p>
<ul>
  <li>Elemento di lista non ordinata</li>
</ul>

Highlight: L'uso semantico corretto di questi tag è importante per l'accessibilità e la SEO.

Vocabulary: Tag HTML lista - Elementi utilizzati per creare elenchi strutturati in HTML.

Vedi

Tabelle in HTML

Le tabelle in HTML sono strutturate utilizzando i seguenti tag:

<table> per definire la tabella
<tr> per le righe
<th> per le celle di intestazione
<td> per le celle di dati

Esempio di una tabella semplice:

<table>
  <tr>
    <th>Intestazione 1</th>
    <th>Intestazione 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
</table>

Example: Ecco un esempio di tabella HTML CSS con bordi:

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
<table>
  <!-- contenuto della tabella -->
</table>

Highlight: Per creare tabella HTML più complesse, si possono utilizzare attributi come colspan e rowspan per unire celle.

Vedi

Link e immagini

I link sono creati con il tag <a>, mentre le immagini sono inserite con il tag <img>:

<a href="https://www.esempio.com">Visita il nostro sito</a>
<img src="immagine.jpg" alt="Descrizione dell'immagine">

L'attributo alt è importante per l'accessibilità e la SEO.

Definition: L'attributo href nell'elemento <a> specifica l'URL di destinazione del link.

Highlight: Utilizzare descrizioni alt significative per le immagini migliora l'accessibilità e può aiutare il posizionamento nei motori di ricerca.

Vedi

Form e input

I form HTML permettono di raccogliere input dagli utenti:

<form action="/invia-dati" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Invia</button>
</form>

Vocabulary: Creare tabella HTML - Processo di strutturazione dei dati in righe e colonne utilizzando i tag HTML appropriati.

Example: Un esempio di input per un numero di telefono:

<input type="tel" id="telefono" name="telefono" pattern="[0-9]{10}" required>

Vedi

Elementi semantici HTML5

HTML5 ha introdotto nuovi elementi semantici che aiutano a strutturare il contenuto in modo più significativo:

<header> per l'intestazione della pagina o di una sezione
<nav> per i menu di navigazione
<main> per il contenuto principale
<article> per contenuti indipendenti
<section> per raggruppare contenuti correlati
<aside> per contenuti correlati ma separati
<footer> per il piè di pagina

Esempio di struttura semantica:

<body>
  <header>
    <h1>Titolo del sito</h1>
    <nav>
      <!-- Menu di navigazione -->
    </nav>
  </header>
  <main>
    <article>
      <h2>Titolo dell'articolo</h2>
      <!-- Contenuto dell'articolo -->
    </article>
    <aside>
      <!-- Contenuto correlato -->
    </aside>
  </main>
  <footer>
    <!-- Informazioni di copyright, contatti, ecc. -->
  </footer>
</body>

Highlight: L'uso di elementi semantici migliora l'accessibilità, la SEO e la manutenibilità del codice.

Definition: Gli elementi semantici in HTML5 forniscono informazioni sul significato del loro contenuto, non solo sulla sua presentazione.

Vedi

Multimedia e iframe

HTML5 supporta l'incorporazione nativa di contenuti multimediali:

<video controls>
  <source src="video.mp4" type="video/mp4">
  Il tuo browser non supporta il tag video.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Il tuo browser non supporta il tag audio.
</audio>

Gli iframe permettono di incorporare contenuti esterni:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Example: Incorporazione di una mappa Google:

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Highlight: Quando si utilizzano elementi multimediali, è importante fornire alternative per l'accessibilità, come sottotitoli per i video.

Vedi

Metadati e SEO

I metadati nell'elemento <head> sono cruciali per la SEO:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Descrizione della pagina per i motori di ricerca">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Nome Autore">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titolo ottimizzato per SEO</title>
</head>

Highlight: Una descrizione meta ben scritta può migliorare il click-through rate nei risultati di ricerca.

Definition: I metadati forniscono informazioni aggiuntive sul documento HTML che non sono visibili direttamente nella pagina ma sono utilizzate dai browser e dai motori di ricerca.

Vedi

Accessibilità e best practices

Per creare pagine HTML accessibili e conformi alle best practices:

Utilizzare la struttura semantica corretta
Fornire testi alternativi per le immagini
Usare intestazioni in modo gerarchico (h1, h2, ecc.)
Assicurarsi che i link abbiano testi descrittivi
Utilizzare il contrasto di colore appropriato
Testare la pagina con strumenti di accessibilità

Esempio di immagine accessibile:

<img src="grafico.png" alt="Grafico che mostra l'aumento delle vendite nel 2023" longdesc="descrizione-dettagliata.html">

Quote: "L'accessibilità web significa che le persone con disabilità possono percepire, comprendere, navigare e interagire con il Web" - World Wide Web Consortium (W3C)

Highlight: L'accessibilità non solo migliora l'esperienza per gli utenti con disabilità, ma spesso porta a un miglioramento dell'usabilità per tutti gli utenti.

Non c'è niente di adatto? Esplorare altre aree tematiche.

Knowunity è l'app per l'istruzione numero 1 in cinque paesi europei

Knowunity è stata inserita in un articolo di Apple ed è costantemente in cima alle classifiche degli app store nella categoria istruzione in Germania, Italia, Polonia, Svizzera e Regno Unito. Unisciti a Knowunity oggi stesso e aiuta milioni di studenti in tutto il mondo.

Scarica

Google Play

Scarica

App Store

Knowunity è l'app per l'istruzione numero 1 in cinque paesi europei

4.9+

Valutazione media dell'app

17 M

Studenti che usano Knowunity

#1

Nelle classifiche delle app per l'istruzione in 17 Paesi

950 K+

Studenti che hanno caricato appunti

Non siete ancora sicuri? Guarda cosa dicono gli altri studenti...

Utente iOS

Adoro questa applicazione [...] consiglio Knowunity a tutti!!! Sono passato da un 5 a una 8 con questa app

Stefano S, utente iOS

L'applicazione è molto semplice e ben progettata. Finora ho sempre trovato quello che stavo cercando

Susanna, utente iOS

Adoro questa app ❤️, la uso praticamente sempre quando studio.

Materie

Informatica

Impara DOCTYPE HTML e Crea Tabelle Divertenti

Sebastiano Sasso

@sassso

16 Follower

Segui

Copre i tag di base come , , e
Spiega tag per formattare il testo come
,
Illustra come creare una tabella HTML step by step
Fornisce una guida ai tag di intestazione HTML e altri elementi strutturali
Include esempi di codice per ciascun tag e attributo

...

25/09/2022

2880

3ªm/3ªl

Informatica

123

Iscriviti per mostrare il contenuto. È gratis!

Accesso a tutti i documenti

Migliora i tuoi voti

Unisciti a milioni di studenti

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Elementi dell'intestazione e del corpo

Il tag <head> contiene metadati e informazioni non visibili direttamente nella pagina:

<head>
  <title>Titolo della pagina</title>
  <meta charset="UTF-8">
  <meta name="description" content="Descrizione della pagina">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="stile.css">
</head>

Il tag <body> contiene tutto il contenuto visibile della pagina:

<body>
  <header>
    <!-- Intestazione della pagina -->
  </header>
  <nav>
    <!-- Menu di navigazione -->
  </nav>
  <main>
    <!-- Contenuto principale -->
  </main>
  <footer>
    <!-- Piè di pagina -->
  </footer>
</body>

Definition: Il tag <title> definisce il titolo del documento mostrato nella scheda del browser ed è cruciale per l'ottimizzazione SEO.

Example: Un esempio di utilizzo del tag meta per la descrizione:

<meta name="description" content="Guida completa ai tag HTML per principianti">

Iscriviti per mostrare il contenuto. È gratis!

Accesso a tutti i documenti

Migliora i tuoi voti

Unisciti a milioni di studenti

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Elementi di testo e formattazione

HTML offre diversi tag per strutturare e formattare il testo:

<p> per i paragrafi
<h1> a <h6> per i titoli di diversa importanza
<strong> e <em> per enfatizzare il testo
<ul>, <ol> e <li> per creare liste

Esempio di utilizzo:

<h1>Titolo principale</h1>
<p>Questo è un <strong>paragrafo</strong> con del testo <em>enfatizzato</em>.</p>
<ul>
  <li>Elemento di lista non ordinata</li>
</ul>

Highlight: L'uso semantico corretto di questi tag è importante per l'accessibilità e la SEO.

Vocabulary: Tag HTML lista - Elementi utilizzati per creare elenchi strutturati in HTML.

Iscriviti per mostrare il contenuto. È gratis!

Accesso a tutti i documenti

Migliora i tuoi voti

Unisciti a milioni di studenti

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Tabelle in HTML

Le tabelle in HTML sono strutturate utilizzando i seguenti tag:

<table> per definire la tabella
<tr> per le righe
<th> per le celle di intestazione
<td> per le celle di dati

Esempio di una tabella semplice:

<table>
  <tr>
    <th>Intestazione 1</th>
    <th>Intestazione 2</th>
  </tr>
  <tr>
    <td>Dato 1</td>
    <td>Dato 2</td>
  </tr>
</table>

Example: Ecco un esempio di tabella HTML CSS con bordi:

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
<table>
  <!-- contenuto della tabella -->
</table>

Highlight: Per creare tabella HTML più complesse, si possono utilizzare attributi come colspan e rowspan per unire celle.

Iscriviti per mostrare il contenuto. È gratis!

Accesso a tutti i documenti

Migliora i tuoi voti

Unisciti a milioni di studenti

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Link e immagini

I link sono creati con il tag <a>, mentre le immagini sono inserite con il tag <img>:

<a href="https://www.esempio.com">Visita il nostro sito</a>
<img src="immagine.jpg" alt="Descrizione dell'immagine">

L'attributo alt è importante per l'accessibilità e la SEO.

Definition: L'attributo href nell'elemento <a> specifica l'URL di destinazione del link.

Highlight: Utilizzare descrizioni alt significative per le immagini migliora l'accessibilità e può aiutare il posizionamento nei motori di ricerca.

Iscriviti per mostrare il contenuto. È gratis!

Accesso a tutti i documenti

Migliora i tuoi voti

Unisciti a milioni di studenti

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Form e input

I form HTML permettono di raccogliere input dagli utenti:

<form action="/invia-dati" method="post">
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Invia</button>
</form>

Vocabulary: Creare tabella HTML - Processo di strutturazione dei dati in righe e colonne utilizzando i tag HTML appropriati.

Example: Un esempio di input per un numero di telefono:

<input type="tel" id="telefono" name="telefono" pattern="[0-9]{10}" required>

Iscriviti per mostrare il contenuto. È gratis!

Accesso a tutti i documenti

Migliora i tuoi voti

Unisciti a milioni di studenti

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Elementi semantici HTML5

HTML5 ha introdotto nuovi elementi semantici che aiutano a strutturare il contenuto in modo più significativo:

<header> per l'intestazione della pagina o di una sezione
<nav> per i menu di navigazione
<main> per il contenuto principale
<article> per contenuti indipendenti
<section> per raggruppare contenuti correlati
<aside> per contenuti correlati ma separati
<footer> per il piè di pagina

Esempio di struttura semantica:

<body>
  <header>
    <h1>Titolo del sito</h1>
    <nav>
      <!-- Menu di navigazione -->
    </nav>
  </header>
  <main>
    <article>
      <h2>Titolo dell'articolo</h2>
      <!-- Contenuto dell'articolo -->
    </article>
    <aside>
      <!-- Contenuto correlato -->
    </aside>
  </main>
  <footer>
    <!-- Informazioni di copyright, contatti, ecc. -->
  </footer>
</body>

Highlight: L'uso di elementi semantici migliora l'accessibilità, la SEO e la manutenibilità del codice.

Definition: Gli elementi semantici in HTML5 forniscono informazioni sul significato del loro contenuto, non solo sulla sua presentazione.

Iscriviti per mostrare il contenuto. È gratis!

Accesso a tutti i documenti

Migliora i tuoi voti

Unisciti a milioni di studenti

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Multimedia e iframe

HTML5 supporta l'incorporazione nativa di contenuti multimediali:

<video controls>
  <source src="video.mp4" type="video/mp4">
  Il tuo browser non supporta il tag video.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Il tuo browser non supporta il tag audio.
</audio>

Gli iframe permettono di incorporare contenuti esterni:

<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>

Example: Incorporazione di una mappa Google:

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Highlight: Quando si utilizzano elementi multimediali, è importante fornire alternative per l'accessibilità, come sottotitoli per i video.

Iscriviti per mostrare il contenuto. È gratis!

Accesso a tutti i documenti

Migliora i tuoi voti

Unisciti a milioni di studenti

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Metadati e SEO

I metadati nell'elemento <head> sono cruciali per la SEO:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Descrizione della pagina per i motori di ricerca">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Nome Autore">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Titolo ottimizzato per SEO</title>
</head>

Highlight: Una descrizione meta ben scritta può migliorare il click-through rate nei risultati di ricerca.

Definition: I metadati forniscono informazioni aggiuntive sul documento HTML che non sono visibili direttamente nella pagina ma sono utilizzate dai browser e dai motori di ricerca.

Iscriviti per mostrare il contenuto. È gratis!

Accesso a tutti i documenti

Migliora i tuoi voti

Unisciti a milioni di studenti

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Accessibilità e best practices

Per creare pagine HTML accessibili e conformi alle best practices:

Utilizzare la struttura semantica corretta
Fornire testi alternativi per le immagini
Usare intestazioni in modo gerarchico (h1, h2, ecc.)
Assicurarsi che i link abbiano testi descrittivi
Utilizzare il contrasto di colore appropriato
Testare la pagina con strumenti di accessibilità

Esempio di immagine accessibile:

<img src="grafico.png" alt="Grafico che mostra l'aumento delle vendite nel 2023" longdesc="descrizione-dettagliata.html">

Quote: "L'accessibilità web significa che le persone con disabilità possono percepire, comprendere, navigare e interagire con il Web" - World Wide Web Consortium (W3C)

Highlight: L'accessibilità non solo migliora l'esperienza per gli utenti con disabilità, ma spesso porta a un miglioramento dell'usabilità per tutti gli utenti.

Iscriviti per mostrare il contenuto. È gratis!

Accesso a tutti i documenti

Migliora i tuoi voti

Unisciti a milioni di studenti

Iscrivendosi si accettano i Termini di servizio e la Informativa sulla privacy.

Validazione e debugging

È importante validare il codice HTML per assicurarsi che sia corretto e conforme agli standard:

Utilizzare il validatore W3C (https://validator.w3.org/)
Controllare la console del browser per errori JavaScript
Testare la pagina su diversi browser e dispositivi
Utilizzare strumenti di sviluppo del browser per ispezionare e debuggare il codice

Example: Correzione di un errore comune:

<!-- Errato -->
<img src="immagine.jpg">

<!-- Corretto -->
<img src="immagine.jpg" alt="Descrizione dell'immagine">

Highlight: La validazione regolare del codice HTML può prevenire problemi di rendering e migliorare la compatibilità cross-browser.

Non c'è niente di adatto? Esplorare altre aree tematiche.

Knowunity è l'app per l'istruzione numero 1 in cinque paesi europei

Knowunity è stata inserita in un articolo di Apple ed è costantemente in cima alle classifiche degli app store nella categoria istruzione in Germania, Italia, Polonia, Svizzera e Regno Unito. Unisciti a Knowunity oggi stesso e aiuta milioni di studenti in tutto il mondo.

Scarica

Google Play

Scarica

App Store

4.9+

Valutazione media dell'app

17 M

Studenti che usano Knowunity

#1

Nelle classifiche delle app per l'istruzione in 17 Paesi

950 K+

Studenti che hanno caricato appunti

Non siete ancora sicuri? Guarda cosa dicono gli altri studenti...

Utente iOS

Adoro questa applicazione [...] consiglio Knowunity a tutti!!! Sono passato da un 5 a una 8 con questa app

Stefano S, utente iOS

L'applicazione è molto semplice e ben progettata. Finora ho sempre trovato quello che stavo cercando

Susanna, utente iOS