Nelle attività precedenti hai imparato:
- Nozioni di base su tag ed elementi HTML.
- Come strutturare una pagina web.
- HTML semantico e best practice.
Grazie a questo articolo, puoi continuare ad ampliare le tue conoscenze su HTML e trattare altri elementi HTML.
Elementi dei contenuti testuali
<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
Questi elementi supportano la creazione di contenuti testuali e aggiungono struttura, stile e significato. Sono disponibili diversi contenuti di testo che possono incorporare i seguenti elementi.
L'elemento citazione
<blockquote cite="https://www.goodreads.com/quotes">
<p>Be the change that you wish to see in the world.</p>
</blockquote>
Questo esempio mostra come utilizzare l'elemento <blockquote>, per mostrare una famosa citazione del Mahatma Gandhi. Esistono tantissime citazioni eccezionali che offrono contenuti e un significato memorabili. Pensa ad alcune delle tue figure stimolanti preferite e alle loro citazioni.
Utilizza l'elemento <blockquote> quando fai riferimento a citazioni e fai riferimento a informazioni provenienti da una fonte. L'elemento <blockquote> crea un rientro e un allineamento univoci nella presentazione e utilizza un tag di apertura e uno di chiusura. Una <blockquote> è particolarmente utile quando si utilizzano citazioni più lunghe che coprono più righe di testo.
Puoi utilizzare vari elementi anche all'interno di un elemento <blockquote>, come un'intestazione, un paragrafo o un elenco.
Elemento <details>
<details>
<summary>Details</summary>
Additional Information
</details>
Spesso, una pagina web include una sezione di domande frequenti e informazioni aggiuntive disponibili per l'utente. Esistono sezioni di domande frequenti comuni per le informazioni sui prodotti, l'itinerario di viaggio o qualsiasi tipo di scenario di domanda e risposta.
L'elemento <details> è utile utilizzando un widget divulgato che contiene informazioni aggiuntive. L'elemento include una funzionalità di attivazione/disattivazione integrata e l'utente può aprire e chiudere il pulsante. Quando il pulsante di attivazione/disattivazione è aperto, i contenuti delle informazioni aggiuntive si espandono e possono essere letti dall'utente. Quando il pulsante di attivazione/disattivazione è chiuso, i contenuti delle informazioni aggiuntive sono nascosti all'utente. Per assegnare un nome al widget <details>, utilizza l'elemento <summary>.
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google logo">
<figcaption>Google logo</figcaption>
</figure>
Questo è l'elemento <figure> in azione. Come puoi vedere, l'elemento <figure>, utilizzato insieme all'elemento <figcaption>, può essere utilizzato per migliorare l'esperienza visiva.
Puoi vedere immagini in tutto il web e altri dati visivi utili continuamente. Gli elementi visivi contribuiscono ad attirare l'attenzione del visitatore e a creare un'esperienza utente ottimale. L'elemento <figure> è un modo per etichettare un'immagine, una tabella, un grafico e così via. Il suo funzionamento consiste nella creazione di contenuti autonomi in relazione ai contenuti principali.
Elemento <time>
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
L'elemento <time> fornisce significato e significato semantico, consentendo una migliore funzionalità con attività come la programmazione di un appuntamento online, la pubblicazione di data e ora per un articolo del blog, archivi e così via. Alcuni esempi di siti web che utilizzano l'elemento <time> includono l'uso di Google Calendar, la pubblicazione di un articolo dal vivo su una piattaforma o la lettura di archivi storici online dal sito di una biblioteca.
L'elemento <time> fa riferimento all'ora e può rappresentare il formato di 24 ore o una data specifica che può essere impostata in base al fuso orario e alla località. Questo elemento richiede un tag di apertura e un tag di chiusura, <time> e </time>. Puoi aggiungere l'attributo datetime in modo che le date possano essere lette in un formato leggibile dal computer.
Metadati dei documenti
<title>Sarah's Favorite Food Recipes</title>
Ogni volta che digiti l'URL di un sito web, sarà presente un nome <title> che può essere letto nella barra del browser o nella scheda della pagina web. Si tratta del titolo che viene visualizzato per una pagina web. Questo elemento è importante e viene utilizzato da un motore di ricerca per visualizzare un elenco di pagine web correlate nei risultati di ricerca. La lunghezza del titolo può variare da breve e descrittiva a una più lunga e più descrittiva.
Scenario: hai una pagina web a cui stai pensando, ma non riesci a ricordare l'URL specifico del sito web. Digita le parole chiave in un motore di ricerca. Il motore di ricerca aiuta a trovare la pagina web che stai cercando e puoi visualizzare il nome <title> mostrato nella ricerca.
Elementi dei contenuti incorporati
Oltre ai contenuti testuali, puoi utilizzare diversi altri elementi.
Elemento <iframe>
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
Quando finisci di acquistare articoli online e fai clic su un'opzione di pagamento, ad esempio PayPal o Apple Pay, queste funzionalità vengono in genere aggiunte a una pagina web con un <iframe>. Visualizzare una mappa online per cercare un'attività locale è un'altra esperienza comune. Questi tipi di esperienze utente su una pagina web possono essere aggiunti con un iframe. Nell'esempio precedente, vedi l'URL di Wikipedia all'interno di un iframe, intitolato "Wikipedia".
L'elemento <iframe> ti consente di inserire contenuti da un'altra origine e incorporare un frame all'interno di una pagina web. Crea una cornice di forma rettangolare e visualizza i contenuti nel browser. Un frame consente di presentare un layout a forma di finestra all'interno di un elemento <iframe>. È un modo efficace per aggiungere contenuti alla tua pagina web per migliorare l'esperienza.
Elementi del modulo
<progress max="100" value="30"> 30% </progress>
Quando guardi un video più lungo, una lezione o compili una domanda estesa, avere una barra di avanzamento visiva può essere utile per tenere traccia dei tuoi progressi. L'elemento <progress> è utile per questi tipi di scenari.
Questo elemento è rappresentato come una barra visiva con un colore di sfondo. La barra visiva può variare per dimensioni e colore di sfondo. Con la barra di avanzamento, puoi utilizzare facoltativamente gli attributi max e value. L'attributo max imposta un numero in virgola mobile e l'attributo value indica i progressi fatti in un'attività.
Definisci i tuoi contenuti
<canvas id="canvas"></canvas>
Per poter disegnare grafica e animazioni in tempo reale, utilizza l'elemento <canvas>. Inserisci l'elemento <canvas> nella pagina web HTML per creare una tela. Questo elemento richiede codice JavaScript per la funzionalità di disegno e creazione degli elementi grafici.
Elementi dei contenuti della tabella
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
Elemento <table>
L'elemento <table> crea una tabella. Questo è il punto di partenza per aggiungere ulteriori elementi con righe e colonne. Le tabelle sono visualizzate spesso nelle pagine web, il che è un modo utile per organizzare e mostrare le informazioni. Un caso d'uso per l'utilizzo dell'elemento <table> consiste nel presentare all'utente informazioni tabulari, come il tipo di informazioni che si possono trovare in un foglio di lavoro.
Elemento <th>
L'elemento <th> è l'intestazione di un gruppo di celle.
Elemento <tr>
L'elemento <tr> definisce una riga di celle all'interno di una tabella. Da qui, puoi aggiungere dati specifici della cella.
Elemento <td>
L'elemento <td> crea la cella, aggiungendo i contenuti necessari.
Conclusione
In questo articolo hai scoperto altri elementi HTML e hai sviluppato le tue competenze di programmazione. Hai appreso di più sui contenuti, sul testo in linea, sui contenuti incorporati e sugli elementi delle tabelle. Ora hai sviluppato una conoscenza approfondita degli elementi HTML aggiuntivi. Continua così!