Esempi HTML
Esempio di tag base HTML
- Un file HTML semplice
- Questo esempio è un file HTML molto semplice, che utilizza il minor numero possibile di tag HTML. Mostra come il contenuto dell'elemento body viene visualizzato dal browser.
- Paragrafo semplice
- Questo esempio dimostra come il testo degli elementi paragrafi viene visualizzato dal browser.
- Più paragrafi
- Questo esempio dimostra alcuni comportamenti predefiniti degli elementi paragrafi.
- Problema della poesia
- Questo esempio dimostra alcuni problemi di formattazione HTML.
- Riempimento di riga
- Questo esempio dimostra l'uso del riempimento di riga in un documento HTML.
- Titolo
- Questo esempio dimostra i tag per visualizzare i titoli nel documento HTML.
- Titolo centrato
- Questo esempio dimostra un titolo centrato.
- Linea orizzontale
- Questo esempio dimostra come inserire una linea orizzontale.
- Commenti nascosti
- Questo esempio dimostra come inserire commenti nascosti nel codice sorgente HTML.
- Colore di sfondo
- Questo esempio dimostra come aggiungere un colore di sfondo alla pagina HTML.
Esempio di formattazione del testo HTML
- Formattazione del testo
- Questo esempio dimostra come formattare il testo in un file HTML.
- Testo preformattato
- Questo esempio dimostra come controllare le righe vuote e gli spazi con il tag pre.
- Tag di output dei computer
- Questo esempio dimostra l'effetto di diversi tag di output dei computer.
- Indirizzo
- Questo esempio dimostra come scrivere indirizzi in un file HTML.
- Abbreviazioni e iniziali
- Questo esempio dimostra come implementare abbreviazioni o iniziali.
- Direzione del testo
- Questo esempio dimostra come cambiare la direzione del testo.
- Citazione in blocco
- Questo esempio dimostra come implementare citazioni di lunghezze diverse.
- Effetto di cancellazione e di inserimento del testo
- Questo esempio dimostra come segnalare testo cancellato e testo inserito.
Esempio di link HTML
- Creazione di link ipertestuali
- Questo esempio dimostra come creare link in un documento HTML.
- Utilizzo dell'immagine come link
- Questo esempio dimostra come utilizzare un'immagine come link.
- Apertura di link in una nuova finestra del browser
- Questo esempio dimostra come aprire una pagina in una nuova finestra del browser, in modo che i visitatori non debbano lasciare il tuo sito.
- Link a diverse posizioni della stessa pagina
- Questo esempio dimostra come utilizzare link per saltare a una parte diversa del documento.
- Uscita dai riquadri
- Questo esempio dimostra come uscire dai riquadri, se la tua pagina è bloccata all'interno di un riquadro.
- Creazione di link di posta elettronica
- Questo esempio dimostra come linkare a un'email. (Questo esempio funziona solo dopo l'installazione del client di posta elettronica.)
- Creazione di link di posta elettronica 2
- Questo esempio dimostra link di posta elettronica più complessi.
Esempio di struttura HTML dei riquadri
- Riquadro verticale
- Questo esempio dimostra come creare un riquadro verticale utilizzando tre documenti diversi.
- Riquadro orizzontale
- Questo esempio dimostra come creare un riquadro orizzontale utilizzando tre documenti diversi.
- Come utilizzare il tag <noframes>
- Questo esempio dimostra come utilizzare il tag <noframes>.
- Struttura di riquadri misti
- Questo esempio dimostra come creare una struttura di riquadri contenente tre documenti, mescolando i riquadri in righe e colonne.
- Struttura del riquadro con l'attributo noresize="noresize"
- Questo esempio dimostra l'attributo noresize. In questo esempio, il riquadro non è dimensionabile. Trascinando il mouse sui bordi tra i riquadri, noterai che i bordi non possono essere spostati.
- Struttura di navigazione
- Questo esempio dimostra come creare una struttura di navigazione. La struttura di navigazione contiene una lista di link che puntano a un secondo riquadro. Il file denominato "contents.htm" contiene tre link.
- Frame inline
- Come creare un frame inline (frame all'interno di una pagina HTML).
- Saltare a una sezione specifica all'interno di un frame
- Questo esempio dimostra due frame. Uno dei frame ha un collegamento che punta a una sezione specifica in un altro file. Il file "link.htm" specifica una sezione utilizzando <a name="C10">.
- Navigare a una sezione specifica utilizzando la navigazione nei frame
- Questo esempio dimostra due frame. Il frame di sinistra contiene una lista di collegamenti di navigazione, i quali puntano al secondo frame come destinazione. Il secondo frame visualizza il documento collegato.
Esempio di tabella HTML
- Tabella
- Questo esempio dimostra come creare una tabella in un documento HTML.
- Bordi della tabella
- Questo esempio dimostra vari tipi di bordi di tabella.
- Tabella senza bordi
- Questo esempio dimostra una tabella senza bordi.
- Intestazione nella tabella (Heading)
- Come visualizzare l'intestazione della tabella.
- Celle vuote
- Come gestire le celle vuote utilizzando " ".
- Tabella con titolo
- Questo esempio dimostra una tabella con un titolo (caption).
- Celle di tabella orizzontali o verticali
- Come definire celle di tabella orizzontali o verticali.
- Etichette nella tabella
- Come visualizzare elementi all'interno di diversi elementi.
- Margine delle celle (Cell padding)
- Come creare uno spazio tra il contenuto delle celle e i loro bordi utilizzando Cell padding.
- Spaziatura tra celle (Cell spacing)
- Come aumentare la distanza tra le celle utilizzando Cell spacing.
- Aggiungere un colore di sfondo o un'immagine di sfondo alla tabella
- Come aggiungere uno sfondo alla tabella.
- Aggiungere un colore di sfondo o un'immagine di sfondo alle celle di tabella
- Come aggiungere uno sfondo a una o più celle di tabella.
- Posizionare il contenuto nelle celle della tabella
- Come posizionare il contenuto delle celle in modo da creare una tabella ben progettata utilizzando l'attributo "align".
- Proprietà frame (frame)
- Come utilizzare l'attributo "frame" per controllare i bordi attorno alla tabella.
Esempio di elenco HTML
- Elenco non ordinato
- Questo esempio dimostra un elenco non ordinato.
- Elenco ordinato
- Questo esempio dimostra un elenco ordinato.
- Elenchi non ordinati di diversi tipi
- Questo esempio dimostra un elenco non ordinato.
- Elenchi ordinati di diversi tipi
- Questo esempio dimostra elenchi ordinati di diversi tipi.
- Lista annidata
- Questo esempio dimostra come annidare liste.
- Lista annidata 2
- Questo esempio dimostra una lista annidata più complessa.
- Definizione di elenco
- Questo esempio dimostra una definizione di elenco.
Esempio di modulo HTML e input
- Campo di testo (Text fields)
- Questo esempio dimostra come creare un campo di testo in una pagina HTML. Gli utenti possono scrivere testo nel campo di testo.
- Campo di password
- Questo esempio dimostra come creare un campo di password in HTML.
- Casella di controllo
- Questo esempio dimostra come creare una casella di controllo in HTML. Gli utenti possono selezionare o deselezionare la casella di controllo.
- Pulsante di selezione singolo
- Questo esempio dimostra come creare un pulsante di selezione singolo in HTML.
- Lista a discesa semplice
- Questo esempio dimostra come creare una casella di lista a discesa semplice in una pagina HTML. La casella di lista a discesa è una lista opzionale.
- Un'altra lista a discesa
- Questo esempio dimostra come creare una lista a discesa con un valore predefinito. (Nota del traduttore: il valore predefinito si riferisce alla preferenza predefinita.)
- Campo di testo (Textarea)
- Questo esempio dimostra come creare un campo di testo (controllo di input di testo multi-linea). Gli utenti possono scrivere testo nel campo di testo. Nel campo di testo, il numero di caratteri scrivibili non è limitato.
- Creare un pulsante
- Questo esempio dimostra come creare un pulsante. Puoi personalizzare il testo sul pulsante.
- Casella di campo intorno ai dati
- Questo esempio dimostra come disegnare una casella con titolo intorno ai dati.
Esempio di modulo
- Modulo con campi di input e pulsante di conferma
- Questo esempio dimostra come aggiungere un modulo alla pagina. Questo modulo contiene due campi di input e un pulsante di conferma.
- Modulo con caselle di controllo
- Questo modulo contiene due caselle di controllo e un pulsante di conferma.
- Modulo con caselle di selezione
- Questo modulo contiene due caselle di selezione e un pulsante di conferma.
- Inviare un'e-mail dal modulo
- Questo esempio mostra come inviare un'e-mail tramite un modulo.
Esempio di immagine HTML
- Inserire un'immagine
- Questo esempio dimostra come visualizzare un'immagine nella pagina web.
- Inserire un'immagine da diverse posizioni
- Questo esempio dimostra come visualizzare un'immagine da una cartella o server diverso nella pagina web.
- Immagine di sfondo
- Questo esempio dimostra come aggiungere un'immagine di sfondo a una pagina HTML.
- Allineare l'immagine
- Questo esempio dimostra come allineare un'immagine nel testo.
- Immagine fluttuante
- Questo esempio dimostra come far fluttuare un'immagine sulla sinistra o destra del paragrafo.
- Regolare la dimensione dell'immagine
- Questo esempio dimostra come regolare la dimensione delle immagini.
- Visualizzare il testo alternativo per l'immagine
- Questo esempio dimostra come visualizzare un testo alternativo per un'immagine. Quando l'immagine non può essere caricata nel browser, l'attributo testo alternativo informa i lettori dell'informazione persa. È una buona abitudine aggiungere l'attributo testo alternativo a tutte le immagini nella pagina.
- Creare un link immagine
- Questo esempio dimostra come utilizzare un'immagine come link.
- Creare una mappa immagine
- Questo esempio mostra come creare una mappa immagine con aree cliccabili. Ogni area è un link ipertestuale.
- Convertire un'immagine in mappa immagine
- Questo esempio mostra come impostare un'immagine comune come mappa immagine.
Esempio di sfondo HTML
- Un'armonia di sfondo e colori ben combinati
- Esempio di buona combinazione di colore di sfondo e testo, che rende facile leggere il testo nella pagina.
- Un'armonia di sfondo e colori non ben combinati
- Esempio in cui una combinazione di colore di sfondo e di testo non si adatta bene, rendendo difficile leggere il testo della pagina.
- Immagine di sfondo altamente accessibile
- Esempio in cui l'immagine di sfondo e il colore del testo rendono facile leggere il testo della pagina.
- Immagine di sfondo altamente accessibile 2
- Un altro esempio in cui l'immagine di sfondo e il colore del testo rendono facile leggere il testo della pagina.
- Immagine di sfondo scarsamente accessibile
- Esempio in cui l'immagine di sfondo e il colore del testo rendono difficile leggere il testo della pagina.
Esempio di stile HTML (style)
- Stili HTML
- Questo esempio dimostra come utilizzare le informazioni di stile aggiunte alla sezione <head> per formattare l'HTML.
- Link senza sottolineature
- Questo esempio dimostra come utilizzare il proprietario di stile per creare un link senza sottolineature.
- Collegamento a uno stylesheet esterno
- Questo esempio dimostra come utilizzare l'etichetta <link> per collegarsi a uno stylesheet esterno.
Esempio di intestazione HTML (head)
- Titolo del documento
- Le informazioni di titolo all'interno dell'elemento di intestazione non vengono visualizzate nella finestra del browser.
- Un target, tutti i link
- Questo esempio mostra come utilizzare l'etichetta base per aprire tutti i tag della pagina in una nuova finestra.
Esempio di meta-informazioni HTML (meta)
- Descrizione del documento
- Le informazioni nei elementi Meta possono descrivere il documento HTML.
- Parole chiave del documento
- Le informazioni nei elementi Meta possono descrivere le parole chiave del documento.
- Reindirizzamento
- Questo esempio dimostra come reindirizzare l'utente a un altro indirizzo web quando l'indirizzo è stato modificato.
Esempio di script HTML (Script)
- Inserire un segmento di script
- Questo esempio dimostra come inserire uno script nel documento HTML.
- Eseguito su browser che non supportano gli script
- Questo esempio dimostra come affrontare i browser che non supportano gli script.
