L'HTML
Cos'è l'HTML?
L'HTML è il linguaggio usato per costruire le pagine Web, apribili con i browser (ad esempio Microsoft Edge, 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 parentesi angolari <...> che possono essere considerati comandi dell'HTML, attribuiscono un determinato valore visivo o funzionale agli elementi che si trovano al loro interno. 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, seppur minimale.
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 serve l'HEAD.
NB: La spaziatura dal margine serve per rendere la scrittura ordinata.
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 uno spazio in base allo stile scelto, cominciando quindi 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 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 grassetto:
<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'attributo 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>Dove:
font-sizeserve per cambiare la grandezza del carattere, può essere usato al suo postosize.font-familyserve per cambiare il tipo di carattere, può essere usato al suo postoface.colorserve per cambiare il colore al carattere.backgroundserve per cambiare il colore dello sfondo, può essere usato al suo postobgcolor.text-alignspecifica l'allineamento, a destra (right), a sinistra (left), al centro (center) o giustificato (justify).
NB per color e background: si possono scegliere colori personalizzati in formato RGB utilizzando i numeri esadecimali. Per esempio:
#000000Ad 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 un numero in decimale da 0 a 255 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 (Tasto di Windows + R e scrivere MSPAINT), incollate l'immagine con Ctrl + V, andate a scegliere lo strumento Scegli Colore e cliccate sul colore desiderato. Quindi andate su Colori > Modifica colori..., e (se siete su una vecchia versione di Windows) 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. Le nuove versioni di Paint dovrebbero essere in grado di restituire direttamente il codice esadecimale.
Esempio: Il colore ha le seguenti tonalità di colore: Rosso: 22; Verde: 102; Blu: 178. Andate sulla calcolatrice, impostate DEC e scrivete 22: si otterrà 16. Fate la stessa cosa con 102: si otterrà 66. Poi con 178: si otterrà B2:
<p style="color:#1666b2;">Testo</p>Altrimenti è possibile usare una formula più semplice ma meno precisa, cioè attraverso la parola inglese associata al colore desiderato:
<p style="color:'blue';">Testo</p>L'attributo STYLE si può usare anche con il tag H e altri.
L'attributo CLASS
Serve per assegnare 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 non si specifichino specializzazioni o eccezioni.
<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 dei tag con 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
Definisce la relazione tra il documento HTML e una risorsa esterna.
L'attributo REL
Specifica cosa viene definito nel file. Nel caso in cui vogliamo definire degli stili (tipo tag STYLE), si specifica STYLESHEET:
<link rel="stylesheet" />
L'attributo HREF
Presente anche nel tag A, indica quale file utilizzare (solitamente con estensione .css se contiene degli stili):
<link rel="stylesheet" href="C:\file.css" />
L'attributo TYPE
Presente anche nel tag SCRIPT, indica il tipo di file e il linguaggio usato:
<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.
Di default, i Bot indicizzano i siti e seguono i collegamenti se ritengono che questo possa essere utile.
Il META REVISIT
Specifica che il Bot dovrebbe 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, e se uno vuole si 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'attributo 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'attributo 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'attributo 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 CENTER
Serve per scrivere un testo centrato (deprecato in HTML5).
<center>Testo centrato</center>
Il tag DIV
Specifica una suddivisione o sezione del testo, solitamente assegnando un ID o una classe da dare al testo, le cui proprietà vengono definite 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
È un singolo elemento, carica un immagine presente in un altro sito o un immagine dal computer locale.
L'attributo SRC
Presente anche nel tag SCRIPT, specifica l'immagine da caricare:
<img src="http://www.pippo.com/qualcosa.jpg" />
L'attributo 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.
<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'attributo BORDER specifica il tipo di bordo, usando numeri diversi si avrà stili di bordi diversi. L'attributo 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 usato l'attributo STYLE per il testo, lo sfondo, ecc...
Il tag LI
Serve per fare un elemento di una lista.
<li>Pane</li>
<li>Salame</li>
<li>Prosciutto</li>
Il tag UL
Insieme al tag LI fa una lista puntata (lista non ordinata) 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 (lista ordinata) 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 (enfasi).
Il tag SPAN
È un contenitore che permette di modificare gli stili senza interruzione di linea. Per fare ciò bisogna inserire l'attributo STYLE nel tag SPAN.
<p>Io: <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>NB: l'uso di VBScript nelle applicazioni Web non è compatibile con la maggior parte dei browser.
<html>
<head>
</head>
<body>
<script type="text/javascript">
istruzioni
</script>
</body>
</html>Al posto di comandi specificare le istruzioni Javascript.
NB: Se ci sono errori nella sintassi del Javascript non verranno eseguite le istruzioni successive.
Vedi la sezione JavascriptJavascript.
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'attributo ONCLICK (consultare la sezione JavascriptJavascript per approfondimenti)
Esegue codice Javascript o la 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 (non supportati in HTML5).
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'attributo COLS specifica l'altezza e l'attributo ROWS specifica l'altezza del popup in pixel.
Usufruisci della sezione qui sotto per commentare o chiedere aiuto nel caso di mancata comprensione. Ciao!
Commenti