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

• Programmazione

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.

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:

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

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:

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

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 (

Prima cosa
Seconda cosa
Terza cosa