Guida di base all’HTML

Notando ultimamente molte domande riguardo l’HTML, per personalizzare al meglio il forum, per cambiare impostazioni del testo e delle immagini, ho pensato di creare una guida.

Intendo sottolineare che questa guida è per spiegare l’HTML in un utilizzo quasi unicamente per i forum. Per creare siti web personali la faccenda è più complicata… ed è molto più comodo utilizzare appositi programmi.
Per questo farò riferimento ai forum e non alla realizazione di pagine web.

Legenda:

: per capire il funzionamento del codice e come deve essere “configurato” non è necessario leggere la parte teorica della guida.

: gli argomenti contrassegnati con questo simbolo sono i contenuti teorici della guida, che i meno esperti devono leggere prima di potersi informare sui codici HTML.

: le spiegazioni ai codici segnati con questo simbolo non possono essere letti dai meno esperti perchè necessitano di un minimo di conoscenza dell’HTML e la lettura delle parti teoriche della guida.

Indice
La guida è composta dalle seguenti sezioni, in ordine di visualizazione.

• Introduzione
• Tag & Attributi: cosa sono?
• HTML e BBCode: due linguaggi simili
• Inserire una Immagine (tag IMG)
• Inserire un link (tag A)
• Impostazione del Testo
  -> Grassetto (tag B)
  -> Corsivo (tag I)
  -> Sottolineato (tag U)
  -> Testo Evidenziato (tag SPAN)
• Tag FONT
• Impostare il paragrafo (tag P)
• Generare nuove righe (andare a capo)
• Aggiungere dei Punti Numerati
• Testo in Movimento - Tags MARQUEE
• Creare una tabella con la grafica del forum
• Come usare più tags

Introduzione
Questa guida è per tutti coloro che non sanno utilizzare i codici HTML che, a dire la verità, sono molto semplici da imparare. Cercherò di essere il più esaustivo possibile e di inserire tutti i codici più utili e maggiormente richiesti.

Tag & Attibuti: cosa sono?
Partiamo con la spiegazione dei tag.
I tag sono praticamente delle parentesi; il contenuto all’interno ha le caratteristiche dettate dai tag e dagli attributi in esso presenti.
Per capire meglio l’esempio guardate:

Citazione:

questa è una citazione (cioè del testo citato… che bella scoperta)

Codice:

questo è del testo semplice, <b> invece il testo all’interno dei tag B è grassetto </b>

Quindi il testo tra

Codice:

<b> e </b>

è grassetto.

Esistono due tipi di tag: di apertura e di chiusura.
Il tag di apertura è il tag che detta le istruzioni su tutto il testo che segue.
Il tag di chiusura fa si che le informazioni dettate dal tag di apertura riguardi solo il testo che c’è in mezzo ai due tag. Infatti il testo dopo il tag di chiusurà non avrà più le caratteristiche del tag di apertura.
Il tag di chiusura si riconosce perchè ha una / . Se non c’è l’ha vuol dire che è un tag di apertura.

Gli attributi sono delle aggiunte alla informazione base del tag.
Per esempio il codice per inserire una immagine è questo:

Codice:

<img src=”url_file_immagine”>

Se vogliamo aggiungere altre informazioni, per esempio un bordo, si scriverà così:

Codice:

<img src=”url_file_immagine” border=”1″>

border=”1″ è infatti l’attributo per aggiungere un bordo all’immagine.
Nell’esempio usiamo il tag per inserire una immagine. Se non notate il tag di chiusura fate una giusta osservazione. Infatti il tag della immagine non ha necessità di chiudersi perchè non da caratteristiche ad del testo ma detta come informazione da dove prendere l’immagine che si deve visualizzare.

Se avete capito questi concetti semplici, potete proseguire nella lettura della guida.
Per ogni tag verranno date le sufficienti spiegazioni per configurarlo e tutti gli attributi possibili per quel tag.
Inserire una immagine
Iniziamo col dire come si inserisce una immagine. Ecco il codice:

Codice:

<img src=*>

Imageshack è un buon servizio gratuito di host per immagini ed ovviamente ce ne sono molti altri sparsi nella rete.
Certo, se avete un vostro spazio web è meglio

Attributi

• align=”Left”: permette di posizionare l’immagine a sinistra
• align=”Center”: permette di posizionare l’immagine centrata
• align=”Right”: permette di posizionare l’immagine a destra
• border=”0″: permette di aggiungere un bordo all’immagine. Il numero 0 può essere sostituito con un numero a piacere, in base a quanto grande deve essere il bordo. Il numero che dovrete inserire in sostanza è il numero di pixel che il bordo dovrà avere.

Inserire un link
Ecco il codice per inserire un link:

Codice:

<a href=”url”> testo che funge da collegamento/link </a>

Per linkare un indirizzo email e facendo si che cliccando sul link si apra il programma di posta per inviare una email, basta sostituire url con:

Codice:

mailto:webmaster@forumup.it

In questo caso l’indirizzo usato è webmaster@forumup.it .

Impostazioni del Testo
Le impostazioni per il testo è uguale al BBCode, unica differenza, he l’HTML non utilizza parentesi quadre ma le “<” e “>”.
Passiamo quindi ad illustrare brevemente i tag per modificare il testo.

Grassetto

Codice:

<b> testo in grassetto </b>

Corsivo

Codice:

<i> testo in corsivo </i>

Testo Sottolineato

Codice:

<u> testo sottolineato </u>

Testo Evidenziato (tag SPAN)

Codice:

<span style=”background-color: *”> testo evidenziato </span>

Al posto del * dovrete mettere l’apposito codice HTML (più precisamente si tratta di un codice esadecimale) del colore che volete usare per evidenziare il testo.
Andate in questo topic. Scegliete il colore, copiatevi il codice del colore e sostituitelo all’asterisco.
N.B.: essendo una immagine non potrete usare il copia e incolla (CTRL+C e CTRL+V).

Tag “Font”
Il tag font è un tag che permette di dare diverse caratteristiche al testo, oltre al grassetto, corsivo e sottolineato prima viste.

Attributi

Codice:

<font color=”#FF0000″>testo</font>

• color=”#FF0000″: permette di dare un colore preciso al testo. Andate qui per prendere il codice esadecimale.
• size=”3″: permette di dare una dimensione precisa al testo. Sostituite il 3 con un numero a vostro piacimento, da 1 a 7.
• face=”Arial”: permette di impostare un font preciso. Attenzione: usate font molto diffusi perchè se il font impostato non è installato nel computer di un vostro visitatore questo non lo vedrà. Ovviamente, potete sostituire “arial” con il nome del carattere da voi scelto.

Impostare il paragrafo

Codice:

<p> testo su nuova riga </p>

Con questo potrete generare una nuova riga di testo che non sia continuo a quello precedente. Probabilmente però usando solo questo semplice tag rimarrete comunque insoddisfatti. Per questo adesso spiegerò come aggiungere nuove impostazioni nel tag, grazie agli attributi.

Attributi

Per esempio, possiamo regolare la distanza dal testo di sopra, il paragrafo. Utilizzando solo il codice di prima vi verrà una nuova riga molto distanziata dal testo antecedente, il che, almeno a me, non garba molto.
Per regolare la distanza, scrivere così.

Codice:

<p style=”margin-top: 0; margin-bottom: 0″> testo su nuova riga</p>

margin-top è per regolare la distanza dall’alto.
margin-bottom per regolare la distanza dal basso.
Sostituite gli zeri con il numero di pixel desiderato.

margin-left è per regolare la distanza del testo da sinistra.
margin-right di conseguenza è per regolare la distanza del testo da destra.

Generare nuove righe (andare a capo)
Quando dovrete mandare del testo a capo, basta fare così:

Codice:

Testo bla bla su prima riga <br> Testo bla bla su seconda riga

In pratica mettendo <br> nel testo farete in modo di andare a capo. Non si deve mettere il tag di chiusura in quanto non date caratteristiche a del testo ma date solo l’input, comando, di andare a capo.
Aggiungendo tante volte <br> di seguito e come andare tante volte a capo, quindi vi si formeranno molte righe vuote.
Per aggiungere delle righe vuote, si può usare anche questo codice:

Codice:

<p> </p>

Ecco il risultato:

Aggiungere dei Punti Numerati
Per intederci questo:

Ecco il codice.

Codice:

<ol> <li>punto 1</li> <li>punto 2</li> </ol>

Ogni volta che vorrete aggiungere un punto, basta fare invio, inserire i tag <li> e </li> e in mezzo scriverci il nuovo punto.

Se non volete una lista numerata ma solo puntata, levate i tag <ol> e </ol> all’inizio e alla fine.

Testo in Movimento - Tags MARQUEE
Almeno qui eviterò di parlarne molto . Vi riporto in questo sito in cui troverete tutto ciò che fa al caso vostro:
http://www.webdesigns.it/tutorial/marquee.htm

Mi limiterò a spiegarvi alcuni componenti del codice MARQUEE.

Codice:

<marquee> testo in movimento </marquee>

Il codice normale, come questo sopra, ha le seguenti caratteristiche:

• Si sposta da destro verso sinistra.
• Si sposta all’infinito.

behavior=”slide” consente al testo scorrevole di scorrere e bloccarsi quando arrivato alla posizione finale.
behavior=”alternate” consente al testo scorrevole di spostarsi da una parte all’altra.
direction=”right” il testo parte da sinistra e si sposta verso destra.
scrollamount=”10″ imposta la velocità di spostamento del testo; il numero 10 può essere sostituito con uno a vostra scelta, ovviamente.
loop=”1″ se non si vuole che il testo si sposti all’infinito, con questo si può impostare quante volte far spostare il testo. Il numero è sempre modificabile.
bgcolor=”#FFFF00″ imposta il colore di sfondo del testo scorrevole. l’esempio è un giallo. Per modificare il codice esadecimale del colore, leggere “Evidenziare Testo”.

Creare una tabella con la grafica del forum

Codice:

<table class=”forumline” border=”0″ cellpadding=”3″ cellspacing=”1″ width=”100%” height=”95px”> <tbody><tr> <td class=”catHead” colspan=”2″ height=”28″><span class=”cattitle”>****TITOLO TABELLA****</span></td> </tr> <tr><td class=”row1″ align=”left”><span class=”gensmall”>****CODICE HTML****</td>

Un esempio di tabella è quella de “Comunicazioni dello Staff”, presente in questo forum di assistenza.

La questione è molto semplice.
Al posto di ****TITOLO TABELLA**** dovete inserire il titolo della tabella, nell’immagine corrisponde a “Comunicazioni dello Staff”.
Al posto di ****CODICE HTML**** dovete inserire il codice HTML del testo che deve esserci nella tabella. Nella immagine corrisponde a:

Citazione:

Non chiedere supporto via PM allo staff!! Postare le problematiche sul forum.

Tutto qui.

Come usare più Tag
Abbiamo visto tutti i tag HTML più importanti e più utili. Però se vogliamo modificare più parametri, avremo bisogno di inserire più tag.
La cosa è molto semplice e cercherò di spiegarla passo passo.

Inserite prima del testo tutti i tag che vi servono. Per esempio voglio un testo evidenziato in giallo, che sia grassetto, che sia sottolineato, che sia di una dimensione ben precisa (5), che sia di colore blu e sia su una nuova riga con una distanza di 12 pixel dall’alto.
Troppe cose insieme, vero?
Andiamo con ordine, andando a vedere i tag che mi servono.
Allora… mi serve:

• <span style=”background-color: #FFFF00″>
• <b>
• <u>
• <font size=”5″ color=”#0000FF”>
• <p style=”margin-top: 12″>

Fatta la lista di tutti i tag che mi servono, li inserisco.
L’ordine non ha una particolare importanza, per il momento.

Codice:

<p style=”margin-top: 12″><font size=”5″ color=”#0000FF”><b><u><span style=”background-color: #FFFF00″>

Inserisco il testo.

Codice:

<p style=”margin-top: 12″><font size=”5″ color=”#0000FF”><b><u><span style=”background-color: #FFFF00″> testo bla bla bla

Adesso devo chiudere i tag in ordine di come li ho aperti. Prima va chiuso l’ultimo aperto, poi va chiuso il penultimo aperto e così via… finchè non si arriva al seguente risultato.

Codice:

<p style=”margin-top: 12″><font size=”5″ color=”#0000FF”><b><u><span style=”background-color: #FFFF00″> testo bla bla bla </span></u></b></font></p>

Spero sia stato chiaro… in realtà è molto semplice, ed io l’ho fatta piuttosto lunga per semplificarvela al massimo.
_______________________

Spero che la guida possa essere utile.

Se avete avvistato errori, segnalateli.
Se avete consigli, diteli.
Per questi motivi potete contattarmi anche in pvt.