Vuoi creare una pagina Web di base?  Scopri questi esempi HTML e provali in un editor di testo per vedere come appaiono nel tuo browser.

17 semplici esempi di codice HTML che puoi imparare in 10 minuti

Annuncio pubblicitario Anche se i siti Web moderni sono generalmente realizzati con interfacce intuitive, è utile conoscere alcuni HTML di base. Se conosci i seguenti 17 tag HTML di esempio (e alcuni extra), sarai in grado di creare una pagina Web di base da zero o modificare il codice creato da un'app come WordPress.

Annuncio pubblicitario

Anche se i siti Web moderni sono generalmente realizzati con interfacce intuitive, è utile conoscere alcuni HTML di base. Se conosci i seguenti 17 tag HTML di esempio (e alcuni extra), sarai in grado di creare una pagina Web di base da zero o modificare il codice creato da un'app come WordPress.

Abbiamo fornito esempi di codice HTML con output per la maggior parte dei tag. Se vuoi vederli in azione, scarica il file HTML di esempio alla fine dell'articolo. Puoi giocarci con un editor di testo e caricarlo in un browser per vedere cosa fanno le tue modifiche.

1.

Avrai bisogno di questo tag all'inizio di ogni documento HTML che crei. Assicura che un browser sappia che sta leggendo HTML e che si aspetta HTML5, l'ultima versione.

Anche se questo non è in realtà un tag HTML, è comunque buono da sapere.

2.

Questo è un altro tag che dice a un browser che sta leggendo HTML. Il tag va subito dopo il tag DOCTYPE e lo chiudi con un tag proprio alla fine del tuo file. Tutto il resto del documento va tra questi tag.

3.

Il tag avvia la sezione dell'intestazione del file. Le cose che vanno qui non appaiono sulla tua pagina web. Al contrario, contiene metadati per i motori di ricerca e informazioni per il tuo browser.

Per le pagine di base, il tag conterrà il tuo titolo, e questo è tutto. Ma ci sono alcune altre cose che puoi includere, che vedremo tra poco.

4.

tag titolo HTML

Questo tag imposta il titolo della tua pagina. Tutto quello che devi fare è mettere il tuo titolo nel tag e chiuderlo, in questo modo (ho incluso anche i tag header):

  My Website 

Questo è il nome che verrà visualizzato come titolo della scheda quando viene aperto in un browser.

5.

Come il tag del titolo, i metadati vengono inseriti nell'area dell'intestazione della pagina. I metadati vengono utilizzati principalmente dai motori di ricerca e sono informazioni su ciò che è presente nella tua pagina. Esistono numerosi metapodi diversi, ma questi sono alcuni dei più comunemente usati:

  • descrizione: una descrizione di base della tua pagina.
  • parole chiave: una selezione di parole chiave applicabili alla tua pagina.
  • autore : l'autore della tua pagina.
  • viewport: tag per garantire che la tua pagina appaia su tutti i dispositivi.

Ecco un esempio che potrebbe applicarsi a questa pagina:

 

Il tag "viewport" dovrebbe sempre avere "larghezza = larghezza dispositivo, scala iniziale = 1, 0" come contenuto per assicurarsi che la tua pagina venga visualizzata bene su dispositivi mobili e desktop.

6.

Dopo aver chiuso la sezione dell'intestazione, si arriva al corpo. Lo apri con il tag e lo chiudi con il tag. Va bene alla fine del tuo file, appena prima del tag.

Tutto il contenuto della tua pagina web viene inserito tra questi tag. È semplice come sembra:

  Everything you want displayed on your page. 

7.

Il

tag definisce un'intestazione di livello uno sulla tua pagina. Questo di solito sarà il titolo e idealmente ce ne sarà solo uno su ogni pagina.

definisce le intestazioni di livello due come le intestazioni di sezione,

sottotitoli di livello tre e così via, fino a

. Ad esempio, i nomi dei tag in questo articolo sono intestazioni di livello due.

Intestazione grande e importante

Intestazione leggermente meno grande

Sotto-Header

Risultato:

tag di intestazione html

Come puoi vedere, diventano più piccoli ad ogni livello.

8.

Il tag di paragrafo inizia un nuovo paragrafo. Questo di solito inserisce due interruzioni di riga.

Guarda, ad esempio, l'interruzione tra la riga precedente e questa. Ecco cosa a

tag farà.

Il tuo primo paragrafo

Il tuo secondo paragrafo.

Risultato:

Il tuo primo paragrafo

Il tuo secondo paragrafo.

Puoi anche utilizzare gli stili CSS nei tag di paragrafo, come questo che modifica la dimensione del testo:

Testo più grande del 20%

Risultato:

Testo più grande del 20%

Per sapere come usare i CSS per dare uno stile al tuo testo, dai un'occhiata a questi tutorial HTML e CSS.

9.

Il tag di interruzione di riga inserisce un'interruzione di riga singola:

La prima riga.
La seconda riga (vicino alla prima).

Risultato:

La prima riga.
La seconda riga (vicino alla prima).

Lavorare in modo simile è il


etichetta. Questo disegna una linea orizzontale sulla tua pagina ed è utile per separare sezioni di testo.

10.

Questo tag definisce un testo importante. In generale, ciò significa che sarà in grassetto. Tuttavia, è possibile utilizzare i CSS per visualizzare il testo in modo diverso.

Tuttavia, puoi tranquillamente utilizzare il testo in grassetto.

 Very important things you want to say. 

Risultato:

Cose molto importanti che vuoi dire.

Se hai familiarità con il tag per il testo in grassetto, puoi comunque utilizzarlo. Non c'è garanzia che continuerà a funzionare nelle versioni future di HTML, ma per ora funziona.

11.

Come e , e sono correlati. Il tag identifica il testo enfatizzato, il che significa generalmente che diventerà in corsivo. Ancora una volta, c'è la possibilità che i CSS mostrino il testo enfatizzato in modo diverso.

 An emphasized line. 

Risultato:

Una linea enfatizzata.

Il tag funziona ancora, ma è possibile che sia deprecato nelle versioni future di HTML.

12.

Il tag, o anchor, consente di creare collegamenti. Un semplice collegamento è simile al seguente:

 Go to MakeUseOf 

Risultato:

Vai a MakeUseOf

L'attributo "href" identifica la destinazione del collegamento. In molti casi, questo sarà un altro sito Web. Potrebbe anche essere un file, come un'immagine o un PDF.

Altri attributi utili includono "target" e "title". L'attributo target viene utilizzato quasi esclusivamente per aprire un collegamento in una nuova scheda o finestra, in questo modo:

 Go to MakeUseOf in a new tab 

Risultato:

Vai a MakeUseOf in una nuova scheda

L'attributo "titolo" crea una descrizione comandi. Passa il mouse sopra il link qui sotto per vedere come funziona:

 Hover over this to see the tool tip 

Risultato:

Passa il mouse sopra per vedere la descrizione

13.

Se desideri incorporare un'immagine nella tua pagina, dovrai utilizzare il tag immagine. Normalmente lo userai insieme all'attributo "src". Questo specifica la fonte dell'immagine, in questo modo:

  

Risultato:

Immagine di uccelli illuminata dal sole usando i tag img src

Sono disponibili altri attributi, come "altezza", "larghezza" e "alt". Ecco come potrebbe apparire:

 il nome della tua immagine 

Come prevedibile, gli attributi "altezza" e "larghezza" impostano l'altezza e la larghezza dell'immagine. In generale, è una buona idea impostarne solo uno in modo che l'immagine venga ridimensionata correttamente. Se usi entrambi, potresti finire con un'immagine allungata o schiacciata.

Il tag "alt" indica al browser quale testo visualizzare se l'immagine non può essere visualizzata ed è una buona idea includere in qualsiasi immagine. Se qualcuno ha una connessione particolarmente lenta o un vecchio browser, può comunque farsi un'idea di cosa dovrebbe essere sulla tua pagina.

14.

    Il tag dell'elenco ordinato consente di creare un elenco ordinato. In generale, ciò significa che otterrai un elenco numerato. Ogni elemento nell'elenco richiede un tag elemento elenco (

  1. ), quindi il tuo elenco sarà simile al seguente:

    1. Prima cosa
    2. Seconda cosa
    3. Terza cosa

    Risultato:

    1. Prima cosa
    2. Seconda cosa
    3. Terza cosa

    In HTML5, puoi usare

      per invertire l'ordine dei numeri. E puoi impostare il valore iniziale con l'attributo start.

      L'attributo "tipo" consente di indicare al browser quale tipo di simbolo utilizzare per le voci dell'elenco. Può essere impostato su “1”, “A”, “a”, “I” o “i”, impostando l'elenco da visualizzare con il simbolo indicato in questo modo:

        15.

          L'elenco non ordinato è molto più semplice della sua controparte ordinata. È semplicemente un elenco puntato.

          • Primo oggetto
          • Secondo oggetto
          • Terzo oggetto

          Risultato:

          • Primo oggetto
          • Secondo oggetto
          • Terzo oggetto

          Gli elenchi non ordinati hanno anche attributi "type" e puoi impostarlo su "disc", "circle" o "square".

          16.

          Mentre l'utilizzo delle tabelle per la formattazione è disapprovato, ci sono molte volte in cui ti consigliamo di utilizzare righe e colonne per segmentare le informazioni sulla tua pagina. Sono necessari diversi tag per far funzionare una tabella. Ecco il codice HTML di esempio:

          1a colonna2a colonna
          Fila 1, colonna 1Fila 1, colonna 2
          Fila 2, colonna 1Fila 2, colonna 2

          Il

          e
          i tag specificano l'inizio e la fine della tabella. Il tag contiene tutto il contenuto della tabella.

          Ogni riga della tabella è racchiusa in a etichetta. Ciascuna cella all'interno di ogni riga è racchiusa in entrambe tag per le intestazioni di colonna o tag per i dati di colonna. È necessario uno di questi per ogni colonna su ogni riga.

          Risultato:

          1a colonna2a colonna
          Fila 1, colonna 1Fila 1, colonna 2
          Fila 2, colonna 1Fila 2, colonna 2

          17.

          Quando stai citando un altro sito Web o persona e desideri impostare la citazione a parte il resto del documento, utilizza il tag blockquote. Tutto quello che devi fare è racchiudere la citazione nell'apertura e nella chiusura dei tag blockquote:

          Il Web come lo immaginavo, non l'abbiamo ancora visto. Il futuro è ancora molto più grande del passato.

          Risultato:

          Il Web come lo immaginavo, non l'abbiamo ancora visto. Il futuro è ancora molto più grande del passato.

          La formattazione esatta utilizzata può dipendere dal browser che stai utilizzando o dal CSS del tuo sito. Ma il tag rimane lo stesso.

          Vai avanti e HTML

          Con questi 17 esempi HTML (e conteggio) dovresti essere in grado di creare un semplice sito Web 5 modelli HTML gratuiti per creare facilmente siti Web rapidi 5 Modelli HTML gratuiti per creare facilmente siti Web rapidi Prova questi modelli HTML per creare il tuo sito Web oggi anche se non lo fai ' non ha alcuna competenza HTML. Leggi di più . Per vedere come metterli tutti insieme, puoi scaricare la nostra pagina HTML di esempio. Aprilo nel tuo browser per vedere come va tutto insieme o in un editor di testo per vedere esattamente come funziona il codice.

          Per lezioni più mordaci in HTML, prova queste app di microlearning per la codifica Vuoi imparare la codifica di base? Prova 5 app di codifica di dimensioni ridotte nel tuo tempo libero Vuoi imparare la codifica di base? Prova 5 app di codifica di dimensioni ridotte nel tuo tempo libero Vuoi imparare la codifica di base ma hai poco tempo? Queste app di codifica di dimensioni ridotte impiegheranno solo pochi minuti della tua giornata impegnativa. Leggi di più .

          Ulteriori informazioni su: esercitazioni di codifica, HTML, sviluppo Web, Wordpress.