Esempi HTML
Esempio di tag di 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.
- Rientro
- Questo esempio dimostra l'uso del rientro delle righe in un documento HTML.
- Titolo
- Questo esempio dimostra i tag per visualizzare i titoli in un 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 bloccata
- Questo esempio dimostra come implementare citazioni di lunghezze diverse.
- Effetto di cancellazione del testo e effetto di inserimento del testo
- Questo esempio dimostra come marcare il testo cancellato e il testo inserito.
Esempio di link HTML
- Creazione di link ipertestuali
- Questo esempio dimostra come creare link in un documento HTML.
- Utilizzo di immagini come link
- Questo esempio dimostra come utilizzare immagini come link.
- Apertura di link in una nuova finestra del browser
- Apertura di una pagina in una nuova finestra del browser, in modo che l'utente non debba 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 frame
- Questo esempio dimostra come uscire dai frame, se la tua pagina è bloccata all'interno di un frame.
- Creazione di link di posta elettronica
- Questo esempio dimostra come creare un link a una posta elettronica. (Questo esempio funziona solo dopo l'installazione del programma client di posta.)
- Creazione di link di posta elettronica 2
- Questo esempio dimostra link di posta elettronica più complessi.
Esempio di frame HTML
- 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 che contiene tre documenti e li posiziona sia in riga che in colonna.
- 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 chiamato "contents.htm" contiene tre link.
- Frame inline
- Questo esempio dimostra come creare 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 contiene un collegamento che punta a una sezione specifica in un altro file. Il file "link.htm" specifica la sezione utilizzando <a name="C10">.</a>
- Navigazione tramite frame per saltare alla sezione specificata
- Questo esempio dimostra due frame. Il frame di sinistra contiene una lista di collegamenti di navigazione, che puntano al secondo frame come destinazione. Il secondo frame visualizza il documento collegato. I collegamenti nel frame di navigazione puntano al paragrafo specificato nel file di destinazione.
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)
- Questo esempio dimostra come visualizzare l'intestazione della tabella.
- Celle vuote
- Questo esempio dimostra come gestire le celle vuote utilizzando " ".
- Tabella con titolo
- Questo esempio dimostra una tabella con un titolo (caption).
- Celle di tabella trasversali o longitudinali
- Questo esempio dimostra come definire celle di tabella trasversali o longitudinali.
- Etichette nella tabella
- Questo esempio dimostra come visualizzare elementi all'interno di diversi elementi.
- Padding delle celle (Cell padding)
- Questo esempio dimostra come utilizzare il padding delle celle per creare uno spazio tra il contenuto delle celle e i loro bordi.
- Spazio tra le celle (Cell spacing)
- Questo esempio dimostra come utilizzare lo spazio tra le celle per aumentare la distanza tra le celle.
- Aggiungere un colore di sfondo o un'immagine di sfondo alla tabella
- Aggiungere un colore di sfondo o un'immagine di sfondo alla tabella
- Aggiungere un colore di sfondo o un'immagine di sfondo alla tabella
- Aggiungere un colore di sfondo o un'immagine di sfondo a una o più celle della tabella
- Allineamento del contenuto nelle celle della tabella
- Questo esempio dimostra come utilizzare l'attributo "align" per allineare il contenuto delle celle, creando una tabella ben progettata.
- Attributo frame (frame)
- Questo esempio dimostra come utilizzare l'attributo "frame" per controllare i bordi attorno alla tabella.
Esempio di lista HTML
- Lista non ordinata
- Questo esempio dimostra liste non ordinate.
- Lista ordinata
- Questo esempio dimostra liste ordinate.
- Liste non ordinate di diversi tipi
- Questo esempio dimostra una lista non ordinata.
- Liste ordinate di diversi tipi
- Questo esempio dimostra liste ordinate di diversi tipi.
- Lista annidata
- Questo esempio dimostra come annidare liste.
- Lista annidata 2
- Questo esempio dimostra una lista annidata più complessa.
- Lista definita
- Questo esempio dimostra una lista definita.
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.
- Caselle di spunta
- Questo esempio dimostra come creare caselle di spunta in HTML. Gli utenti possono selezionare o deselezionare le caselle di spunta.
- Pulsanti radio
- Questo esempio dimostra come creare pulsanti radio in HTML.
- Una lista a discesa semplice
- Questo esempio dimostra come creare una lista a discesa semplice in una pagina HTML. La lista a discesa è una lista opzionale.
- Un'altra lista a discesa
- Un'altra lista a discesa con un valore predefinito (nota del traduttore: il valore predefinito è una preferenza predefinita).
- Campo di testo (Textarea)
- Questo esempio dimostra come creare un campo di testo (controllo di input di testo multilinha). Gli utenti possono scrivere testo nel campo di testo. Non ci sono limiti al numero di caratteri che possono essere scritti nel campo di testo.
- Creare un pulsante
- Questo esempio dimostra come creare un pulsante. Puoi personalizzare il testo sul pulsante.
- Fieldset intorno ai dati
- Questo esempio dimostra come disegnare una casella con un 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 spunta
- Questo modulo contiene due caselle di spunta 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 dimostra come inviare un'e-mail tramite un modulo.
Esempio di immagine HTML
- Inserire un'immagine
- Questo esempio dimostra come mostrare un'immagine nella pagina web.
- Inserire un'immagine da diverse posizioni
- Questo esempio dimostra come mostrare un'immagine da una cartella o server diverso nella pagina web.
- Immagine di sfondo
- Questo esempio dimostra come aggiungere un'immagine di sfondo alla pagina HTML.
- Allineare l'immagine
- Questo esempio dimostra come allineare un'immagine nel testo.
- Fare fluttuare l'immagine
- 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 dell'immagine.
- Mostrare il testo di sostituzione per l'immagine
- Questo esempio dimostra come mostrare il testo di sostituzione per un'immagine. Quando l'immagine non può essere caricata dal browser, l'attributo di sostituzione testo informa i lettori dell'informazione persa. È una buona abitudine aggiungere l'attributo di sostituzione testo a tutte le immagini della pagina.
- Creare un link di immagine
- Questo esempio dimostra come utilizzare un'immagine come link.
- Creare una mappa di immagini
- Questo esempio mostra come creare una mappa di immagini con aree cliccabili. Ogni area è un link ipertestuale.
- Convertire un'immagine in una mappa di immagini
- Questo esempio mostra come impostare un'immagine comune come una mappa di immagini.
Esempio di sfondo HTML
- Un'armonia buona tra lo sfondo e i colori
- Esempio di buona armonia tra il colore dello sfondo e il colore del testo, che rende facile la lettura del testo nella pagina.
- Un'armonia cattiva tra lo sfondo e i colori
- Esempio in cui una combinazione di colore di sfondo e colore del testo non è ben bilanciata, rendendo difficile leggere il testo della pagina.
- Immagine di sfondo di alta accessibilità
- Esempio in cui l'immagine di sfondo e il colore del testo rendono facile leggere il testo della pagina.
- Immagine di sfondo di alta accessibilità 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 di bassa accessibilità
- 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 l'attributo style 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 header 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 meta-elementi possono descrivere il documento HTML.
- Parole chiave del documento
- Le informazioni nei meta-elementi 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.
