Parte 2: Tabelle, Form e <a>

Ecco la seconda lezione su HTML, concentrata su argomenti più avanzati come le tabelle, i form, e l'introduzione degli elementi <a href>.

Benvenuti alla seconda lezione di HTML! Dopo aver coperto le basi nella nostra prima lezione, ora esploreremo come utilizzare HTML per creare tabelle, form per la raccolta di dati e introdurremo l'uso degli elementi <a href> per i collegamenti.

Tabelle in HTML

Le tabelle in HTML sono strutturate tramite i tag <table>, <tr>, <th>, e <td>:

<table>: definisce il contenitore della tabella.
<tr>: indica una nuova riga (table row).
<th>: sta per table header, usato per intestazioni di colonne o righe.
<td>: table data, usato per i dati nelle celle della tabella.

Esempio di Tabella

<table border="1">
  <tr>
    <th>Nome</th>
    <th>Cognome</th>
  </tr>
  <tr>
    <td>Zio</td>
    <td>Mark</td>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Zio</td>
  </tr>
</table>

Form in HTML

I form sono utilizzati per raccogliere input dall'utente. Un form è definito con il tag <form> e può contenere elementi di input come <input>, <textarea>, e <button>.

Esempio di Form

<form action="/submit" method="post">
  <label for="name">Nome:</label>
  <input type="text" id="name" name="name">
  <label for="age">Età:</label>
  <input type="number" id="age" name="age">
  <button type="submit">Invia</button>
</form>

Introduzione a `<a href>`

Il tag <a>, noto come anchor tag, è utilizzato per creare collegamenti. L'attributo href specifica l'URL della pagina a cui il link deve puntare. Puoi usare target="_blank" per aprire il link in una nuova scheda.

Esempio di Link

<a href="https://learn.ziomark.xyz" target="_blank">Visita ZioMark</a>

Esercizio Finale

Crea una pagina HTML che contenga una tabella, un form e un link a un sito di tua scelta. Assicurati di:

Utilizzare almeno due <tr> nella tua tabella.
Includere nel form un campo di testo e un pulsante di invio.
Aggiungere un link che apra in una nuova scheda.

Schema della Pagina

<!DOCTYPE html>
<html>
<head>
  <title>Esercizio HTML</title>
</head>
<body>
  <table border="1">
    <tr>
      <th>Prodotto</th>
      <th>Prezzo</th>
    </tr>
    <tr>
      <td>Libro</td>
      <td>€15</td>
    </tr>
    <tr>
      <td>Caffè</td>
      <td>€1</td>
    </tr>
  </table>

  <form action="/submit" method="post">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <button type="submit">Iscriviti</button>
  </form>

  <a href="https://learn.ziomark.xyz" target="_blank">Visita Wikipedia</a>
</body>
</html>

Anteprima

Questa lezione ti ha fornito una panoramica approfondita su come utilizzare tabelle, form e link in HTML, arricchendo la tua pagina web con elementi interattivi e informativi. Buon lavoro con l'esercizio!

PreviousParte 1: Introduzione a HTML NextParte 3: Attributi di <a>

Last updated 2 years ago