principali tag html

Principali tag HTML – Vademecum

Posted on 9 dicembre 201410 dicembre 2015Posted in Tutorial

Per costruire una pagina web, molta gente utilizza una serie di programmi molto elaborati difficili da usare ma comunque automatici, l’utilizzo di questi programmi può essere molto sbrigativo ma da prodotti sempre uguali, infatti hanno dei modelli da seguire e limitano molto la vostra fantasia. Il modo più divertente e completo è quello di utilizzare il Blocco note di Windows, scrivendo in linguaggio html e salvando il file come nome_file.htm. Per farlo però bisogna utilizzare i tag, cioè delle “paroline magiche” che consentono a tutti i browser di riconoscere il vostro testo come un html, di seguito un elenco dei principali tag html.

Iniziamo col conoscere i tag principali:

  • <html> Comunica al browser che il testo che segue è scritto in formato html
  • <head> In questo tag fino a </head> sono inserite delle informazioni che non saranno visualizzate me che sono utili ai motori di ricerca per il buon posizionamento del sito.
  • METATAG
  • </head> Indica che le informazioni sono finite.
  • <body> In questo tag fino a </body> sono inseriti il corpo di testo, le immagini, i moduli, ecc. che saranno visualizzati.
  • CORPO DEL SITO
  • </body> Indica che non ci sono più informazioni da visualizzare
  • </html> Comunica al browser che la pagina è terminata

I metatag principali

Come abbiamo visto nella tabella precedente ci sono delle informazioni che non vengono visualizzate ma che sonomolto importanti come il creatore della pagina, gli argomenti trattati, il programma utilizzato. Ecco di seguito i tag che vi consentiranno di farlo:

  • <meta name= “keywords” content= “…”> Al posto dei puntini vanno inserite le parole che il motore di ricerca utilizzerà per trovare il vostro sito.
  • <meta name= “autor” content= “Antonio Rossi”> Al posto di Antonio rossi va inserito il vostro nome, cioè il nome del creatore del sito.
  • <meta name= “description” content= “…”> Al posto dei puntini va inserita una breve descrizione del vostro sito che sarà utilizzate dai motori di ricerca per pubblicizzarla.
  • <title>…</title> Al posto dei puntini va inserito il titolo della vostra pagina web.

Una volta terminate le informazioni da non visualizzare la nostra pagina si presenta completamente bianca. Per visualizzare testo immagini e altro dobbiamo inserire dei nuovi tag tra <body> e </body> che sono le direttive del corpo di testo.

Il corpo di una pagina web

Il corpo del testo è costituito da menu, loghi, immagini e testi che vorrai far visualizzare di seguito vi elenco i principali tag per l’inserimento e la formattazione.

Formattare un testo vuol dire attribuire un carattere, una grandezza e un allineamento, può essere molto utile per distinguere il titolo di un paragrafo o le parole importanti.

Poiché il testo è da visualizzare i seguenti tag vanno inseriti tra <body> e </body>.

Principali Tag HTML

  • <h1>…</h1> Intestazione principale – titolo.
  • <h2>…</h2> Intestazioni secondoarie e sottotitoli.
  • <p>…</p> Il testo che porrete al posto dei puntini sarà scritto su un nuovo paragrafo.
  • <p align= “center”>…</p> Il testo che porrete al posto dei puntini sarà posto in un nuovo paragrafo e sarà centrato nella pagina.
  • <p align= “left”>…</p> Il testo che porrete al posto dei puntini sarà posto in un nuovo paragrafo e sarà allineato a sinistra nella pagina.
  • <p align= “right”>…</p> Il testo che porrete al posto dei puntini sarà posto in un nuovo paragrafo e sarà allineato a destra nella pagina.
  • <p align= “justify”>…</p> Il testo che porrete al posto dei puntini sarà posto in un nuovo paragrafo e sarà giustificato rispetto ai bordi della pagina.
  • <strong>…</strong> Il testo compreso tra questi due tag apparirà in grassetto.
  • <em>…</em> Il testo compreso tra questi due tag apparirà in corsivo.

 

 Inserire elementi grafici

Per creare un sito accattivante è necessario, oltre ai principali tag html, inserire anche delle immagini. Spesso è molto utile inserire delle immagini o degli elementi grafici che vadano a chiarire, ma spesso solo ad abbellire, i contenuti delle pagine web. Qui di seguito ci sono i tag che ci consentono di inserire immagini e linee orizzontali.

  • <img src= “percorso”> Cerca il file, se la pagina deve essere destinata l’immagine si deve trovare nella stessa cartella della pagina e al posto del percorso va inserito semplicemente il nome del file.

Collegamenti ipertestuali

Adesso siamo giunti alla parte principale della programmazione html, la creazione dei “collegamenti ipertestuali” quelli, cioè, che ti consentono di inviare E-Mail, spostarti da una pagina all’altra, scaricare file da Internet.

I tag che ti consentono di farlo sono questi:

  • <p><a href= “https://www.wgp3000.com”>Testo di ancoraggio</a></p> Questo tag consente all’utente di spostarsi da una pagina all’altra, l’URL di una pagina è il suo indirizzo.
  • <p><a href= “mailto:info@wgp3000.com”>Manda una mail</a></p> Questa tag consente all’utente di inviare una E-Mail dal tuo sito ad un dato indirizzo.

Adesso avete un elenco (non esaustivo) dei principali tag html che potrete utilizzare per creare il vostro primo sito web!