L'HTML

Cos'è l'HTML?

L'HTML è usato per le pagine Web, apribili con i browser (ad esempio Internet Explorer, Google Chrome, Mozzilla Firefox ecc...). HTML è l'acronimo per Hyper Text Markup Language. L'estensione di un file HTML può essere .htm o .html.

L'HTML

Le pagine HTML sono formate da tag, ovvero parole fra <...> che possono essere considerati comandi dell'HTML. I tag fondamentali sono tre: HTML, HEAD e BODY, a loro volta contengono altri tag che possono contenere altri tag che possono contenere altri tag ecc...

Il tag HTML

Il tag HTML serve sostanzialmente a delimitare l'inizio e la fine del file.

 

<html>

</html>

 

Queste due righe possono essere considerate una pagina Web.

Il tag HEAD

Il tag HEAD si trova all'interno del tag HTML:

 

<html>

    <head>

    </head>

</html>

 

Come puoi aver notato, la maggior parte dei tag si aprono (<...>) e si chiudono (</...>).

In seguito chiariremo a cosa l'HEAD.

 

NB: La spaziatura dal margine serve per non fare confusione.

Il tag BODY

Anche il tag BODY si trova all'interno del tag HTML, e si trova dopo l'HEAD:

 

<html>

    <head>

    </head>

    <body>

    </body>

</html>

 

 

Il tag P

  

Il tag P si utilizza all'interno del tag BODY, e si usa per scrivere un paragrafo:

 

<html>

    <head>

    </head>

    <body>

        <p>Ciao!</p>

    </body>

</html>

 

Quando si riapre di nuovo il tag P si va a capo lasciando una riga vuota, cominciando praticamente un nuovo paragrafo:

 

<html>

    <head>

    </head>

    <body>

        <p>Ciao!</p>

        <p>Salve!</p>

    </body>

</html>

 

 

Ma senza tag?

 

Senza tag si può inserire sì del testo, ma questo non verrà paragrafato. Per il ritorno a capo esiste comunque il tag BR.

 

Il tag BR

 

Il tag BR serve per andare a capo, quindi, come puoi immaginare, non si apre e non si chiude, è un elemento singolo:

 

<html>

    <head>

    </head>

    <body>

        Ciao!

        <br /><br />

        Salve!

    </body>

</html>

 

Così va a capo due volte, lasciando una riga vuota, quindi analogo a ciò che ho scritto prima. Ovviamente BR si può utilizzare all'interno del tag P, se si vuole andare a capo solo una volta senza iniziare un nuovo paragrafo.

 

 

Il tag H

 

Il tag H serve per scrivere un titolo, dopo H bisogna inserire un numero da 1 a 6, più il numero è grande più il titolo verrà scritto in piccolo. Ad esempio puoi utilizzare H1 per il titolo e H2 per il sottotitolo:

 

<html>

    <head>

    </head>

    <body>

        <h1>Il mio primo sito in HTML</h1>

        <p>Ciao!</p>

        <p>Salve!</p>

    </body>

</html>

 

 

Il tag B

 

Serve per scrivere in grossetto:

 

<html>

    <head>

    </head>

    <body>

        <h1>Il mio primo sito in HTML</h1>

        <p><b>Ciao!</b></p>

        <p>Salve!</p>

    </body>

</html>

 

 

Il tag U

 

Il tag U serve per sottolineare:

 

<html>

    <head>

    </head>

    <body>

        <h1>Il mio primo sito in HTML</h1>

        <p><b>Ciao!</b></p>

        <p><u>Salve!</u></p>

    </body>

</html>

 

 

Il tag I

 

Il tag I serve per scrivere in corsivo:

 

<html>

    <head>

    </head>

    <body>

        <h1>Il mio primo sito in HTML</h1>

        <p><b>Ciao</b>!</p>

        <p><i><u>Salve</u>!</i></p>

    </body>

</html>

 

Tutti questi tag possono essere combinati fra di loro, ad esempio per fare un testo in corsivo e grassetto, in corsivo e sottolineato ecc...

 

 

Il tag SUB

 

Scrive il testo a pedice:

 

<html>

    <head>

    </head>

    <body>

        <p>H<sub>2</sub>O</p>

    </body>

</html>

 

 

Il tag SUP

 

Serve per scrivere ad apice:

 

<html>

    <head>

    </head>

    <body>

        <p>H<sub>2</sub>O</p>

        <p>3<sup>2</sup></p>

    </body>

</html>

 

 

Il tag BIG

 

Serve per scrivere leggermente più in grande:

 

<html>

    <head>

    </head>

    <body>

        <p>H<sub>2</sub>O</p>

        <p><big>3<sup>2</sup></big></p>

    </body>

</html>

 

Il tag SMALL

 

Serve per scrivere leggermente più in piccolo:

 

<html>

    <head>

    </head>

    <body>

        <p><small>H<sub>2</sub>O</small></p>

        <p><big>3<sup>2</sup></big></p>

    </body>

</html>

 

 

L'opzione STYLE

 

Serve per cambiare lo stile del carattere:

 

<p style="font-size='12px';font-family='courier new';color='black';background='white';text-align:'right';">Testo</p>

 

FONT-SIZE serve per cambiare la grandezza del carattere, può essere usato al suo posto SIZE.

FONT-FAMILY serve per cambiare il tipo di carattere, può essere usato al suo posto FACE.

COLOR serve per cambiare il colore al carattere.

BACKGROUND serve per cambiare il colore dello sfondo, può essere usato al suo posto BGCOLOR.

TEXT-ALIGN specifica l'allineamento, a destra (RIGHT), a sinistra (LEFT), al centro (CENTRE) o giustificato (JUSTIFY).

 

 

NB per COLOR e BACKGROUND: si possono scegliere colori personalizzati utilizzando i numeri esadecimali. Per esempio:

 

#000000

 

A ogni due cifre corrisponde la quantità in numero esadecimale di quel tono di colore (le prime due sono per il rosso, quelle in mezzo per il verde e le ultime due per il blu). In questo caso il testo verrebbe nero. Siccome bisogna inserire numeri esadecimali, ci si può aiutare con la calcolatrice di Windows (fare Visualizza > Scientifica e imposta su DEC, scrivere il numero in decimale e cliccare su HEX per ottenere il numero corrispondente esadecimale).

 

Per mettere un colore che avete visto in una pagina Web, aprite la pagina, trovate il colore che vi interessa e premi Stamp Rsist. Vai su Paint e fai Ctrl + V, andate a scegliere lo strumento Scegli Colore sulla barra a sinistra e cliccare sul colore desiderato. Quindi fare Colori > Modifica colori..., e cliccate su Definisci colori personalizzati. A questo punto troverete a sinistra dei numeri, copiate la tonalità di rosso sulla calcolatrice e premere su HEX, copiare il risultato ottenuto sul codice HTML. Lo stesso fare con il verde e poi con il blu.

 

Esempio: Il colore ha le seguenti tonalità di colore: Rosso: 22; Verde: 102; Blu: 178 (Notate che è possibile arrivare al massimo a 255). Andate sulla calcolatrice, impostare DEC e scrivere 22: si otterrà 16, quindi ricopiare 16:

 

<p style="color:#16">Testo</p>

 

Poi rimettere su DEC e fare la stessa cosa con 102: si otterrà 66. Poi con 178: si otterrà B2:

 

<p style="color:#1666b2;">Testo</p>

 

Altrimenti usare una formula più semplice ma meno precisa:

 

<p style="color:'blue';">Testo</p>

 

L'opzione STYLE si può usare anche con il tag H e altri.

 

L'opzione CLASS

 

Serve per dare una classe (spiegheremo più avanti a cosa serve precisamente):

 

<p class="fossili">Testo</p>   

Ritorniamo all'HEAD

L'HEAD serve per modificare il titolo o lo stile dei caratteri in generale.

 

 

Il tag STYLE

 

Specifica lo stile dei caratteri e dello sfondo che verrà sempre conservato per tutta la pagina, a meno che vengano specificati nel tag.

 

 

<style>

    body {

        color:#000000;

        background:#EEEEEE;

        font-family:"arial";

    }

    p {

        font-size:"14px";

    }

    h1 {

        font-size:"26px";

    }

    p.fossili {

        font-size:"14px";

        color:#222222;

    }

    #uhuh {

        color:#888888;

    }

</style>

 

Così imposta come colore a tutto il testo della pagina il nero (#000000), imposta come sfondo il colore grigio chiaro (#EEEEEE) e come tipo di carattere Arial. Il testo nel tag P dovrà essere grande 14 pixel, il testo nel tag H1 dovrà essere grande 26 pixel e il testo nel tag P con la classe fossili dovrà essere grande 14 pixel e dovrà essere grigio scuro (#222222). I testi all'interno del tag DIV con l'id uhuh dovranno avere il colore grigio (#888888).

 

 

Il tag TITLE

 

Specifica il titolo della pagina che verrà visualizzato nella barra del titolo.

 

<title>

    Titolo

</title>

 

Nella barra del titolo sarà visualizzato Titolo.

 

 

Il tag LINK

 

Utilizza l'HEAD definito nel file specificato (solitamente con estensione .css).

 

L'opzione REL

 

Specifica cosa viene definito nel file. In questo caso è lo STYLE, quindi scrivere STYLESHEET:

 

<link rel="stylesheet" />

 

L'opzione HREF

 

Presente anche nel tag A, indica quale file utilizzare:

 

<link rel="stylesheet" href="C:\file.css" />

 

L'opzione TYPE

 

Presente anche nel tag SCRIPT, indica il linguaggio usato dal file:

 

<link rel="stylesheet" href="C:\file.css" type="text/css" />

 

 

Il tag META

 

Un tag che viene in molti casi ignorato dal browser, serve in genere per i Bot dei motori di ricerca, per informazioni o cose del genere.

 

 

Il META TITLE

 

Indica il titolo da specificare al motore di ricerca.

 

<meta name="title" content="La cavolata" />

 

 

Il META DESCRIPTION

 

Specifica la descrizione da aggiungere per il motore di ricerca.

 

<meta name="description" content="Il sito è una schifezza." />

 

Solitamente la descrizione è lunga al massimo 200-300 caratteri.

 

 

Il META KEYWORDS

 

Specifica le parole chiavi, questo tipo di meta tag non è usato da Google, ma ad esempio è usato da Yahoo!.

 

<meta name="keywords" content="pollo,pippo,ninja,zio,fossili" />

 

Solitamente non vanno messe più di 20-25 KEYWORDS.

 

 

Il META ROBOTS

 

Specifica se indicizzare il sito e se il Bot può seguire i collegamenti della pagina.

 

<meta name="robots" content="index,follow" />

 

INDEX serve per indicizzare il sito;

NOINDEX serve per non far indicizzare il sito;

FOLLOW serve per far seguire ai Bot i collegamenti del sito;

NOFOLLOW serve per impedire ai Bot di seguire i collegamenti del sito.

 

 

Il META REVISIT

 

Specifica che il Bot deve rivisitare il sito dopo il numero di giorni specificato.

 

<meta name="revisit-after" content="7 days" />

 

 

Il META GENERATOR

 

Specifica il programma o il servizio usato per costruire il sito.

 

<meta name="generator" content="notepad" />

 

Questo META è sconsigliato e generalmente inutile.

 

 

Il META COPYRIGHT

 

Specifica che la pagina è protetta da Copyright.

 

<meta name="copyright" content="Copyright © Scimmia" />

 

 

Il META EXPIRES

 

Specifica che nel giorno e nell'ora specificato il sito non deve essere più indicizzato.

 

<meta http-equiv="expires" content="thu, 04 feb 2011 00:00:00 gmt" />

 

Ricordate di scrivere tutto in inglese.

 

 

Il META COOKIE

 

Imposta un cookie, e specifica il percorso, se uno vuole può impostare la scadenza.

 

<meta http-equiv="set-cookie" content="cookievalue:2;path:'percorso cookie';expires:'thu, 04 feb 2011 00:00:00 gmt';" />

 

COOKIEVALUE specifica il valore del cookie;

PATH specifica il percorso del cookie;

EXPIRES specifica la data di scadenza del cookie.

 

 

Il META REFRESH

 

Aggiorna la pagina dopo il numero di secondi specificato o passa ad un'altra pagina dopo il numero di secondi specificato.

 

<meta http-equiv="refresh" content="30;url:'http://sito.it';" />

 

URL specifica la pagina di destinazione. Se non viene specificato aggiorna la pagina.

 

 

Il META LANGUAGE

 

Specifica la lingua della pagina.

 

<meta name="language" content="it" />

 

 

Il META AUTHOR

 

Specifica il nome ed il cognome dell'autore del sito.

 

<meta name="author" content="Nicola Mingusti" />

 

Questo META è sconsigliato e generalmente inutile.

 

 

Il META REPLY

 

Specifica l'indirizzo della e-mail da contattare.

 

<meta name="reply-to" content="nick.min@coldmail.it" />

 

Questo META è sconsigliato e generalmente inutile.

Ritorniamo al BODY

Siamo arrivati a questo punto:

 

<html>

    <head>

        <title>La mia prima cavolata</title>

        <style>

            body {

                color:#000000;

                background:#EEEEEE;

                font-family:"arial";

            }

            p {

                font-size:"14px";

            }

            h1 {

                font-size:"26px";

            }

            p.fossili {

                font-size:"14px";

                color:#222222;

            }

        </style>

    </head>

    <body>

        

    </body>

</html>

 

 

Il tag HR

 

Crea una linea orizzontale (horizontal rule):

 

<html>

    <head>

        <title>La mia prima cavolata</title>

        <style>

            body {

                color:#000000;

                background:#EEEEEE;

                font-family:"arial";

            }

            p {

                font-size:"14px";

            }

            h1 {

                font-size:"26px";

            }

            p.fossili {

                font-size:"14px";

                color:#222222;

            }

        </style>

    </head>

    <body>

        <p> 1 </p>

        <hr />

        <p> 2 </p>

    </body>

</html>

 

 

Il tag A

 

Crea un collegamento ipertestuale.

 

L'opzione HREF

 

Specifica la destinazione, cioè la pagina in cui l'utente deve andare dopo aver cliccato sul testo specificato.

 

<p><a href="http://sito.it">Testo</a></p>

 

Se l'utente clicca su Testo si aprirà sito.it.

 

L'opzione NAME

 

Con l'opzione NAME il testo può essere raggiunto da un'altra parte della pagina con l'opzione HREF.

 

<p><a name="ciccio">Voilà!<a></p>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<p><a href="#ciccio">Vai</a></p>

 

L'opzione TARGET

  

Specifica se la pagina deve essere aperta in un'altra scheda/finestra. Inserendo _blank come valore la pagina verrà aperta in un'altra scheda.

 

<p><a href="http//sito.it" target="_blank">Clicca!</a></p>

 

 

Il tag DEL

 

Barra il testo.

 

<p><del>Testo barrato</del></p> 

 

 

 

Il tag CENTRE

 

Serve per scrivere un testo centrato.

 

<centre>Testo centrato</centre>

 

 

Il tag DIV

 

Specifica l'ID da dare al testo, e le proprietà dell'ID viene specificato nell'HEAD.

 

<html>

    <head>

        <style>

            #pippo {

                font-size:"14px";

                color:blue;

            }

        </style>

    </head>

    <body>

        <div id="pippo">

            <p>Ciao</p>

        </div>

    </body>

</html>

 

 

Il tag IMG

  

E' un elemento, carica un immagine presente in un altro sito o un immagine dal computer locale. NB: se l'immagine non esiste verrà visualizzata una X.

 

L'opzione SRC

  

Presente anche nel tag SCRIPT, specifica l'immagine da caricare:

 

<img src="http://www.pippo.com/qualcosa.jpg" />

 

L'opzione ALT

  

Serve per visualizzare il testo specificato nel caso l'immagine non sia disponibile. Inoltre è utile per i non vedenti e per molti motori di ricerca. Visto che la guida è molto approssimativa e non spiega come creare siti di qualità spero che non vi sia venuta la pazza idea di pubblicare il sito fatto con HTML, a meno che siate esperti...

 

<img src="http://www.pippo.com/qualcosa.jpg" alt="Qualcosa" />

 

 

Il tag TABLE

 

Serve per creare una tabella.

 

<table border="" cellspacing="" cellpadding="" width="" height="">

    <tr>

        <td></td><td>A</td><td>B</td><td>AB</td><td>0</td>

    </tr>

    <tr>

        <td>A</td><td>X</td><td></td><td>X</td><td></td>

    </tr>

    <tr>

        <td>B</td><td></td><td>X</td><td>X</td><td></td>

    </tr>

    <tr>

        <td>AB</td><td></td><td></td><td>X</td><td></td>

    </tr>

    <tr>

        <td>0</td><td>X</td><td>X</td><td>X</td><td>X</td>

    </tr>

</table>

 

Il tag TR crea una riga, quindi abbiamo in tutto 5 righe. il tag TD crea una colonna in una riga, quindi abbiamo 5 colonne. L'opzione BORDER specifica il tipo di bordo, usando numeri diversi si avrà stili di bordi diversi. L'opzione CELLSPACING indica lo spessore del bordo in pixel. CELLPADDING è lo spazio tra il bordo e il testo all'interno in pixel. WIDTH è la larghezza della tabella e HEIGHT è l'altezza (sempre in pixel). Oltre a questi può essere usata l'opzione STYLE per il testo, lo sfondo, ecc...

 

 

Il tag LI

 

Serve per fare una lista puntata.

 

<li>Pane</li>

<li>Salame</li>

<li>Prosciutto</li>

 

 

Il tag UL

 

Insieme al tag LI fa una lista puntata con una spaziatura dal margine.

 

<ul>

    <li>Pane</li>

    <li>Salame</li>

    <li>Prosciutto</li>

</ul>

 

 

Il tag OL

 

Insieme al tag LI fa una lista numerata distanziata dal margine.

 

<ol>

    <li>Pane</li>

    <li>Salame</li>

    <li>Prosciutto</li>

</ol>

 

 

Il tag STRONG

 

Analogo al tag B, scrive in grassetto.

 

 

Il tag EM

 

Analogo al tag I, scrive in corsivo.

 

 

Il tag SPAN

 

Serve per poter far copiare il testo in formattazione originale. Per fare ciò bisogna inserire l'opzione STYLE nel tag SPAN.

 

<p><span style="font-family='courier new';">Ciao!</span></p>

 

Il tag !

 

Inserisce un commento. Viene ignorato da browser e motori di ricerca.

 

<!-- Commento -->

 

 

Il tag SCRIPT

 

Il tag SCRIPT permette al browser di eseguire codici in VBScript, JavaScript, ecc...

 

<script src="C:\file.js" type="text/javascript"></script>

 

Serve per caricare gli script Javascript dal file specificato, può essere specificato anche un file .vbs:

 

<script src="C:\file_bello.vbs" type="text/vbscript"></script>

 

   

<html>

    <head>

    </head>

    <body>

        <script type="text/javascript">

            comandi

        </script>

    </body>

</html>

 

Al posto di comandi specificare i comandi Javascript.

 

NB: Se ci sono errori nella sintassi del Javascript non verranno eseguiti i comandi successivi.

 

Vedi la sezione Javascript.

 

 

Il tag INPUT

 

Specifica che deve essere inserito testo o crea pulsanti cliccabili o selezionabili.

 

<input type="text" />

 

Crea una casella di testo.

 

<input type="button" value="Clicca!" />

 

Crea un pulsante cliccabile.

 

<input type="checkbox" /><p>Ciao mondo!</p>

 

Crea un pulsante selezionabile.

 

L'opzione ONCLICK (consultare la sezione Javascript per approfondimenti)

 

Esegue i comandi Javascript della funzione specificata al clic con il mouse.

 

<script type="text/javascript">

    function funz() {

        document.write("<p>Ciao!</p>");

    }

</script>

<input type="button" value="Clicca!" onclick="funz()" />

 

Al clic con il mouse sul bottone Clicca! esegue il comando specificato.

 

 

Fuori dai tag HEAD e BODY

Fuori dal tag HEAD e dal tag BODY ci sono pochi tag: fra questi ci sono FRAME e FRAMESET.

 

Il tag FRAMESET

 

Utilizzando il tag FRAME apre la pagina Web specificata.

 

<frameset cols="300" rows="200">

    <frame src="http://sito.it" name="showframe" />

</frameset>

 

L'opzione COLS specifica l'altezza e l'opzione ROWS specifica l'altezza del popup in pixel.

 

 

Usufruisci della sezione Commenti per commentare o chiedere aiuto nel caso di non comprensione.