Navigaweb.net

Migliori siti, programmi e applicazioni su Navigaweb.net

Programmi Guide PC Tecnologia Sicurezza Windows Rete iPhone Android Facebook Immagini Musica Giochi

Tag HTML fondamentali da conoscere per blogger e chi ha un sito web

Pubblicato il: 15 novembre 2011 Aggiornato il:
Tutti i tag fondamentali di codice HTML da usare per un sito web o un blog
Tag HTML Quando si vuol creare un blog o un sito internet, come visto in precedenti articoli, non è necessario pagare un professionista perchè, se si ha tempo e non si ha bisogno di particolari funzionalità avanzate, basta utilizzare uno di quei programmi online gratuiti che permettono di creare un sito internet senza codice HTML.
Anche se questi strumenti online sono sempre più potenti e facili da usare, non si può proprio avere un sito senza nemmeno conoscere l'ABC dell'HTML ossia del linguaggio di programmazione principale con cui vengono generati i siti internet.

L'HTML (HyperText Markup Language) in realtà, non è un linguaggio di programmazione, ossia un linguaggio per comunicare istruzioni ad un computer, ma un Markup Language ossia un modo di scrivere testo formattato per il web.
I browser come Firefox o Internet Explorer leggono questo codice HTML e mostrano quanto viene scritto in modo ordinato, con tutti gli oggetti disposti come ha voluto chi ha fatto il sito.
In altre parole, l'HTML descrive le pagine web e, sulla base di questa descrizione, il browser crea un'immagine.

Premesso che questa non è una guida all'HTML, per il quale ci vorrebbe ben più di un articolo, quello voglio condividere sono le regole di base per capire meglio i tag HTML e per poterli usare quando serve, nel proprio forum, in un blog o per fare modifiche in un sito web.

l'HTML utilizza tag che servono a descrivere il comportamento di un testo, racchiusi tra parentesi angolari, come questo: <html>
La parola che sta dentro la parentesi è il tag di apertura e ogni tag di apertura deve essere seguito da un tag di chiusura come questo: </html>

1) La formattazione del testo nei siti internet viene oggi fatta usando il CSS, un altro linguaggio di markup che permette di descrivere l'impostazione grafica di una pagina web, in modo da richiamare poi gli stili nell'HTML.
Si possono comunque usare alcuni tag di formattazione di base quando serve:

HTML: <b>grassetto</b> (si può anche usare strong invece di b)
Come si vede sui browser: grassetto
HTML: <i>corsivo</i> (si può anche usare en invece di i)
Come si vede: corsivo
HTML: <u>sottolineato</u>
Come si vede: sottolineato
HTML: <s>barrato</s> (si può anche usare strike invece di s)
Come si vede: barrato

2) La creazione di link ipertestuali permette di descrivere URL o indirizzi di siti, senza dover specificare l'intero indirizzo, brutto da vedere, soprattutto se il link è molto lungo.

HTML: <a href="http://www.navigaweb.net" title="Navigaweb">Navigaweb.net</a>
Come si vede: Navigaweb.net

Questo tag HTML è un po 'più complicato: il tag reale per specificare i link ipertestuali è <a> mentre gli altri elementi aggiuntivi sono attributi che specificano ulteriori caratteristiche.
L'attributo href= specifica l'indirizzo mentre il title= definisce quello che compare passando il mouse sulla parola.
In HTML si usano le virgolette per racchiudere i valori degli attributi mentre in xHTML (usato anche dall'editor di Blogger) si usa l'apostrofo '.

3) Aggiungere immagini o foto è una delle cose più importanti da sapere, anche perchè spesso, nei siti che fanno da hosting di foto, viene fornito il codice HTML da usare nei blog o nei forum o in altri siti.

HTML: <img src="http://www.esempio.com/Smiley.jpg" alt="smiley" />
Come si vede: smiley

In questo caso, il tag effettivo è <img> mentre gli attributi richiesti sono src= e, opzionalmente, alt= che descrive l'immagine a parole.
Anche in questo caso, utilizzare le virgolette per evitare collegamenti interrotti.
Come si può notare, il tag <img> si chiude con un /> senza ripetere la parola img.
Si può aggiungere l'attributo float="left" o float="right" per formattare un'immagine a destra o a sinistra, in modo sia avvolta dal testo.

Per fare un link ipertestuale di un'immagine si può usare come codice:
HTML: <a href="http://www.navigaweb.net"><img alt="smiley" src="http://www.esempio.com/Smiley.png" /></a>
Come si vede: smiley

4) Paragrafi e interruzioni di riga
Per creare un testo strutturato, e per andare a capo, è necessario utilizzare tag per creare interruzioni di riga e paragrafi.
In HTML, dopo una riga, si può scerivere <br /> per andare a capo.
Questo si apre e si chiude nello stesso tempo quindi non bisogna ripeterlo.

Per creare paragrafi, nel senso c'è una riga vuota prima e dopo, bisogna racchiudere il testo scritto tra i tag HTML <p> e </p>

5) Le liste si possono fare in modo ordinato come elenchi numerati oppure non ordinato con elenchi puntati.
L'elenco numerato si fa così:
HTML
<ol>
<li>Articolo Uno</li>
<li>Articolo Due</li>
</ol>


Risultato:
  1. Articolo Uno
  2. Articolo Due
L'elenco puntato usa un tag diverso, invece di <ol> si usa <ul> :
<ul>
<li>Articolo uno</li>
<li>articolo due</li>
</ul>


Risultato:
  • Articolo uno
  • Articolo due
In entrambi i casi, il tag <li> viene utilizzato per definire un elemento all'interno della lista.

Conclusione: Un tag non fa altro che indicare una posizione o una selezione del documento, specificando il tipo di magia che deve essere fatta.
Alcuni tag sono presenti in ogni pagina web e racchiudono le sezioni: <HTML> ... </HTML> indica inizio e fine della pagina, <HEAD> ... </HEAD> è la testa del documento, dove sono indicati tiolo, descrizione, CSS e script e <BODY> ... </BODY> che è invece il corpo della pagina.

Anche se queste sono solo nozioni preliminari, tutti coloro che si occupano di un sito ed anche chi naviga su internet partecipando a forum e blog devono conoscere.
Per approfondire l'argomento HTML, in un altro articolo, ho segnalato i migliori siti con guide per HTML e CSS, con esempi e editor online per fare le prove.
Per vedere l'HTML di una pagina basta premere col tasto destro del mouse in un punto qualsiasi e visualizzare l'HTML.
Se si utilizza Google Chrome, si può usare la funzione "Ispeziona pagina" per vedere quale codice è stato utilizzato in un particolare punto cosi da poter prendere ispirazione e riprodurlo sul proprio sito.

In questa pagina si può scaricare una tabella con i tags HTML fondamentali per i blogger

Scrivi un commento

Per commentare, si può usare un account Google / Gmail.
Se vi piace e volete ringraziare, condividete! (senza commento)