L'HTML

Cos'è l'HTML?

L'HTML è usato per le pagine Web, apribili con i browser (ad esempio Internet Explorer, Google Chrome, Mozilla 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>

</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>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!

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>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>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><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><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>

</body>

</html>

Il tag SUP

Serve per scrivere ad apice:

<html>

<head>

</head>

<body>

</body>

</html>

Il tag BIG

Serve per scrivere leggermente più in grande:

<html>

<head>

</head>

<body>

</body>

</html>

Il tag SMALL

Serve per scrivere leggermente più in piccolo:

<html>

<head>

</head>

<body>

</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:

L'opzione HREF

Presente anche nel tag A, indica quale file utilizzare:

L'opzione TYPE

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

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.

Il META DESCRIPTION

Specifica la descrizione da aggiungere per il motore di ricerca.

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!.

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.

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.

Il META GENERATOR

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

Questo META è sconsigliato e generalmente inutile.

Il META COPYRIGHT

Specifica che la pagina è protetta da Copyright.

Il META EXPIRES

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

Ricordate di scrivere tutto in inglese.

Il META COOKIE

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

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.

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

Il META LANGUAGE

Specifica la lingua della pagina.

Il META AUTHOR

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

Questo META è sconsigliato e generalmente inutile.

Il META REPLY

Specifica l'indirizzo della e-mail da contattare.

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>

<hr />

</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>

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>

</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:

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...

Il tag TABLE

Serve per creare una tabella.

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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>Salame</li>

<li>Prosciutto</li>

Il tag UL

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

<ul>

<li>Salame</li>

<li>Prosciutto</li>

</ul>

Il tag OL

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

<ol>

<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.

Il tag !

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

Il tag SCRIPT

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

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

NB: l'uso di VBScript nelle applicazioni Web non è compatibile con la maggior parte dei browser.

<html>

<head>

</head>

<body>

comandi

</script>

</body>

</html>

Al posto di comandi specificare le istruzioni 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.

Crea una casella di testo.

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.

function funz() {

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

}

</script>

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>

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.

Comandi DOS e altro

A cura di Alessandro

L'HTML

Cos'è l'HTML?

L'HTML

Il tag HTML

Il tag HEAD

Il tag BODY

Ritorniamo all'HEAD

Ritorniamo al BODY

Fuori dai tag HEAD e BODY