LINGUAGGIO HTML INTRODUZIONE
Questo ebook non vuole essere una guida completa all’HTML ma solo un manuale che possa
aiutare i blogger meno esperti a districarsi con i codici per avere un aiuto nella pubblicazione degli
articoli. HTML è l’acronimo di HyperText Markup Language ed è un linguaggio usato per
documenti e pagine ipertestuali disponibili nel web.
L’HTML non è un linguaggio di programmazione ma è un linguaggio di markup in cui determinati
tag descrivono colore, dimensioni, link o altre caratteristiche del testo. Ci sono tag che
determinano anche la modalità di impaginazione, di formattazione e di visualizzazione grafica.
Il linguaggio HTML supporta l’inserimento di script e oggetti esterni quali immagini e filmati. I file
HTML si riconoscono perché hanno una estensione .html o .htm. Quest’ultima estensione è un
retaggio del DOS che non permetteva di utilizzare più di tre caratteri. La sintassi dell’HTML è
stabilità dal World Wide Web Consortium (W3C). I documenti HTML sono in grado di supportare
molte altre tecnologie quali CSS, JavaScript e jQuery, XML, JSON, streaming audio e streaming
video. I tag sono rinchiusi dentro delle marcature formate da due parentesi angolari più
comunemente conosciute come segno di minore (<) e maggiore (>).
La struttura di un documento è invariabilmente compresa tra i tag <html> e </html> che ne
determinano l’inizio e la fine. La chiusura di un tag viene fatta anteponendo il segno di slash (/) al
tag iniziale. La struttura di una pagina HTML è formata da due parti: la sezione HEAD e la sezione
BODY. I tag inseriti nella sezione HEAD normalmente non vengono visualizzati nella pagina ma
servono come informazioni di controllo e di servizio quali
1. Metadata per motori di ricerca e codifica dei caratteri
2. Collegamenti verso file esterni quali stili CSS e Javascript
3. Inserimenti di stili CSS e script locali
4. Titolo della pagina visualizzato nel browser
Nella sezione BODY sono invece presenti i tag che servono per determinare la visualizzazione e
l’aspetto del documento quali
1. Intestazioni e titoli di capitoli, testo, ecc
2. Strutture di testo come paragrafi, citazioni, ecc
3. Aspetto del testo come grassetto, corsivo, ecc
4. Elenchi, Liste, Tabelle, Moduli, ecc
5. Link o Collegamenti ipertestuali
6. Layout del documento
7. Inserimento di immagini, audio, video, animazioni, script e applicazioni esterne
La grande maggioranza di siti sono strutturati con un CMS o Modello o Tema che tramite un
server determina l’aspetto e il funzionamento di una generica pagina del sito. Ciascuna di queste
ultime ha poi un particolare HTML che la contraddistingue dalle altre.
2
I vari browser traducono tutto il contenuto e i tag di una pagina HTML in quello che poi noi
vediamo quando la apriamo. Una delle sfide più interessanti è che i vari browser in certi casi
traducono il linguaggio di markup in modo diverso tra di loro.
La struttura generica di una pagina web è la seguente
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Titolo</h1>
<p>Paragrafo.</p>
</body>
</html>
Gli elementi HTML vengono introdotti nella pagina web in questo modo
<nometag>Contenuto</nometag>
Esempi
<h1>Questo è un titolo</h1>
<p>Questo è un paragrafo</p>
Ci sono anche tag che non hanno bisogno di chiusura come <br/> che rappresenta il salto di riga e
<img> che serve per inserire le immagini. I documenti HTML contengono semplice testo e tag e
possono essere visualizzati per esempio con un programma tipo Block Notes o un editor specifico
per linguaggi di programmazione quale Notepad++ .
HTML DI BASE
I tag per inserire i titoli di una pagina sono i seguenti
<h1>Titolo principale</h1>
<h2>Titolo secondario</h2>
<h3>Titolo minore</h3>
<h4>Intestazione più piccola</h4>
Il formato dei titoli va a decrescere a partire da H1 in poi ma non si devono usare questi tag per
modificare i caratteri ma per dare maggiore o minore importanza a un titolo.
3
Un paragrafo inizia con <p> e termina con </p> in questo modo
<p>Questo è un paragrafo</p>
<p>Questo è un altro paragrafo</p>
Alla fine di un paragrafo viene sempre inserito un salto di riga. Se si utilizza il tag div per un testo
<div>Questo è un contenuto</div>
Ci sarà ugualmente un salto di riga mentre per mostrare il testo alla stessa altezza va utilizzato il
tag span in questo modo
Questo è un testo <span>tutto sulla stessa linea</span>
Il tag span viene usato per esempio per inserire colorazioni diverse nello stesso blocco di testo.
I collegamenti o link vengono inseriti con questa sintassi
<a href='URL del collegamento' title='tooltip del link' target='_blank'/>Testo visibile del link</a>
Dove l’URL del collegamento è la pagina a cui si viene indirizzati se ci si clicca sopra, il tooltip del
link è la scritta che si visualizza quando si passa sopra con il mouse. Il tag Title è opzionale così
come target='_blank' che serve per far aprire il link in un’altra scheda del browser.
Le Immagini si inseriscono invece secondo questa sintassi
<img src="Indirizzo immagine" alt='nome immagine' title='titolo immagine' width="150"
height="100" />
Il tag img non ha bisogno di chiusura. L’indirizzo immagine è il link diretto della foto che per
esempio può essere caricata su Picasa. Il tag Alt è importante perché mostra il Testo alternativo
della immagine ai browser che non riescono a aprirla mentre il tag Title mostra il tooltip quando si
passa sulla immagine con il cursore. Width e Height rappresentano le dimensioni in pixel
rispettivamente di larghezza e altezza della immagine.
LINK O COLLEGAMENTI
Nel paragrafo precedente abbiamo visto che la sintassi per inserire un collegamento è la seguente
<a href='URL del collegamento' title='tooltip del link' target='_blank'/>Testo visibile del link</a>
Si può usare anche il tag name per creare un segnalibro all’interno della pagina a cui vogliamo
indirizzarci in questo modo.
4
Segnalibro dentro una pagina HTML:
<a name="hack">Sezione della pagina</a>
Un segnalibro dentro allo stesso documento:
<a href="#hack">Sezione della stessa pagina</a>
Linkare un segnalibro da un'altra pagina:
<a href="http://www.nome-post.htm#hack">Visita la sezione hack</a>
Per linkare una immagine si usa questo codice
<a href="http://wwwideepercomputeredinternet.com/"> <img src="URL Immagine" /> <a/>
dove il codice della immagine è ridotto all’essenziale. Si possono linkare anche altri oggetti come
animazioni in flash e altre cose ancora. Basta inserire il loro codice al posto di quello della
immagine colorato di blu.
Si può anche linkare un indirizzo email. Con questo genere di link, che ci clicca sopra apre il
programma predefinito per la posta elettronica. Il codice è il seguente:
<a href="mailto:[email protected]?Subject=Un%20Saluto">
dove occorre sostituire l’indirizzo email e il soggetto. In questo caso %20 rappresenta uno spazio
e l’espressione Un Saluto sarà automaticamente inserita nell’Oggetto della email.
GLI ATTRIBUTI
I tag HTML possono avere degli attributi che inseriscono informazioni aggiuntive. Tali attributi
vengono sempre inseriti nel tag di apertura e non in quello di chiusura. Inoltre vengono sempre
racchiusi dentro delle virgolette doppie o virgolette singole.
Abbiamo già visto alcuni tipi di attributi come quello per inserire un link
<a href="Indirizzo Link">Questo è un collegamento</a>
Gli attributi più rilevanti sono:
class che specifica una classe di un elemento
id che specifica un unico id di un elemento
style che determina uno stile inline di un elemento
title che mostra l’informazione in un tooltip
5
TITOLI O INTESTAZIONI
Come abbiamo visto nel capitolo sull’HTML di base i titoli vengono definiti da
<h1>Titolo principale</h1>
<h2>Titolo secondario</h2>
<h3>Titolo minore</h3>
dove si può andare da <h1> per il titolo più importante fino a <h6> per quelli secondari.
Le linee orizzontali possono essere create con il tag
<hr/>
Si può verificare il corretto funzionamento di un codice HTML incollandolo nello strumento online
Real Time che mostra nella parte bassa della finestra come risulta il codice inserito nella parte alta
In un codice HTML possono anche essere inseriti dei commenti che sono delle porzioni di testo
che non vengono mostrate dal browser ma servono al programmatore per ritrovare più
facilmente i codice che ha inserito. La sintassi di un commento è la seguente:
<!-- Questo è un commento -->
I tag HTML non sono case sensitive vale a dire le maiuscole funzionano esattamente come le
minuscole. Un codice di questo tipo
<P>Paragrafo primo</p>
funzionerà perfettamente ma la regola del W3C è quella di usare solo le minuscole.
6
GLI STILI O CSS
Gli stili o CSS sono stati introdotti con l’HTML4 e servono per rendere più efficiente il codice
HTML. Tali stili possono essere inseriti nella pagina in tre modi diversi:
1. Inline usando l’attributo style all’interno di un tag
2. Interno usando il tag <style> nella sezione <head>
3. Esterno usando un file CSS esterno
La terza opzione comporta l’inserimento di un codice simile a questo
<head>
<link rel="stylesheet" type="text/css" href="URL del file CSS" />
</head>
Nel secondo caso si possono creare delle classi di stile per un elemento generico o per un
elemento specifico che poi dovranno essere riprese nell’HTML
<html>
<head>
<style type="text/css">
.elemento {
background-color:#yellow;
font-family:Arial;
}
</style>
</head>
<body>
<h1>Titolo del post</h1>
<p class="elemento">Questo testo avrà lo sfondo giallo e i caratteri Arial</p>
</body>
</html>
L’esempio precedente riguarda un elemento generico da cui il punto prima del nome della classe
e l’attributo class inserito nell’elemento HTML . Il codice seguente
<html>
<head>
<style type="text/css">
#selettore {
font-size:18px;
font-weight:bold;
color:red;
}
7
</style>
</head>
<body>
<h1>Titolo del post</h1>
<div id="selettore">Questo testo avrà i caratteri di 18 pixel, sarà in grassetto e di colore
rosso</div>
</body>
</html>
Si riferisce invece a un elemento univoco con il nome della classe preceduto dal cancelletto ( # ) e
l’attributo id inserito nell’elemento HTML a cui si riferisce
Le classi di stile possono anche essere aggiunte inline utilizzando l’attributo style come mostrato
dal seguente esempio:
<body>
<h1 style="font-family:verdana; color:#003366;">Titolo</h1>
<p style="font-family:arial; color:red; font-size:20px; font-style:italic;">Un paragrafo.</p>
</body>
che produce questo risultato
8
En passant abbiamo anche visto che font-style:italic; serve per il corsivo e che font-weight:bold;
per il grassetto. I tag <html>, <head> e <body> sono stati inseriti per mostrare la zona della
pagina in cui va inserito il codice e non devono essere inseriti realmente tutte le volte.
FORMATTAZIONE DEL TESTO
Cominciamo con degli esempi che spiegheranno meglio di tante parole
<b>Questo per il grassetto</b>
<strong>Anche questo è grassetto</strong>
<big>Questo testo è grande</big>
<i>Questo testo è in corsivo</i>
<em>Questo testo è enfatizzato</em>
<code>Questo è il font del computer</code>
Questo è<sub> un pedice</sub> e questo è un <sup>esponente</sup> o apice.
Se viene incollato su Real Time HTML Editor produce questo risultato
La differenza tra i tag <b> e <strong> è minima invece quella tra <i> e <em> è più significativa.
Spesso i browser li riproducono nella stessa maniera. Si può usare <strong> o <em> al posto di
<b> e <i> quando oltre a voler mostrare in grassetto e corsivo del testo ne vogliamo anche
rimarcare l’importanza SEO. Altri tag interessanti sono :
<abbr> Definisce una abbreviazione </abbr>
<blockquote> Definisce una citazione </blocquote>
<q> Definisce una citazione corta </q>
9
Il codice <abbr title="TESTO DEL TOOLTIP">TESTO VISUALIZZATO</abbr> inserisce un tooltip in
una porzione di testo della pagina.
ELENCHI E LISTE
Gli elenchi e le liste sono principalmente di tre tipi
1. Elenchi ordinati
2. Elenchi non ordinati
3. Liste di definizione
ELENCHI NON ORDINATI
Il codice di esempio di un elenco ordinato è il seguente
<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>
Ciascun elemento avrà un cerchietto nero alla sua sinistra. I tag utilizzati sono <ul> e </ul> per
inizio e fine elenco e <li> e </li> per inizio e fine di ciascun elemento
ELENCHI ORDINATI
Il codice di esempio di un elenco ordinato è il seguente
<ol>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
10
I tag utilizzati sono <ol> e </ol> per l’elenco e <li> e </li> per ciascun elemento. In questo caso
ciascun elemento della lista sarà preceduto da un numero.
Si può inserire un elenco anche all’interno di un altro elenco in questo modo
<ol>
<li>Primo elemento</li>
<ul>
<li>Elemento 1.1</li>
<li>Elemento 1.2</li>
</ul>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>
Con questo risultato
LISTE DI DEFINIZIONE
Il codice di esempio di una lista di definizione è il seguente:
<dl>
<dt>Caffè</dt>
<dd>macchiato e molto caldo</dd>
<dt>Succo di frutta</dt>
<dd>Albicocca e lime</dd>
</dl>
e produce questo risultato
11
I tag utilizzati sono <dl> e </dl> per l’inizio e la fine della lista, <dt> e </dt> per l’inizio e la fine di
ciascun elemento, <dd> e </dd> per l’inizio e la fine della descrizione del singolo elemento. Per
visualizzare come il browser interpreta il codice hop utilizzato lo strumento online Real Time
HTML Editor.
Gli Elenchi possono essere personalizzati inserendo icone, numeri romani o greci e immagini di
sfondo. Per approfondire l’argomento vi consiglio di leggere il post sugli stili degli elenchi.
TABELLE
Le tabelle sono una parte importante dell’HTML e possono essere usate anche per fini diversi da
quelli soliti come per esempio modo efficace per allineare immagini o bottoni.
Il codice di esempio di una tabella è il seguente
<table border="1" cellspacing="2" cellpadding="2" width="240">
<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th></tr>
<tr>
<td>Cella 1.1</td>
<td>Cella 1.2</td></tr>
<tr>
<td>Cella 2.1</td>
<td>Cella 2.2</td>
</tr>
</table>
Dove I tag utilizzati sono stati
1. <table> e </table> per l’inizio e la fine della tabella
2. border per la dimensione in pixel del bordo
3. cellspacing per la distanza in pixel tra cella e cella
4. cellpadding per la distanza tra contenuto e bordo della cella
12
5. widht per la larghezza della tabella
6. <tr> e </tr> definiscono l’inizio e la fine di una riga
7. <th> e </th> per inizio e fine dell’header della tabella
8. <td> e </td> per inizio e fine di una singola cella
Si possono usare anche i seguenti tag:
1. <caption> per la descrizione della tabella
2. <thead> gruppo di header nella tabella
3. <tbody> gruppo di contenuti nella tabella
Si possono inserire anche dei CSS usando l’attributo style per inserire colore di sfondo o per
determinare i vari colori dei singoli elementi. Per facilitare l’utilizzo delle tabelle consiglio di usare
un Editor come Windows Live Writer che consente di creare e personalizzare tabelle in modo
molto semplice.
IMMAGINI
Le immagini si inseriscono nell’HTML con il tag <img> che è vuoto cioè non ha bisogno di tag di
chiusura. Ha cioè lo stesso comportamento di <br/> che indica un salto di riga e <hr/> che invece
introduce una riga orizzontale. Il codice da usare è il seguente
<img src="Indirizzo immagine" alt='nome immagine' title='titolo immagine' width="150"
height="100" />
13
Dove deve essere inserito l’URL della immagine. Gli altri attributi sono opzionali ma molto
importanti e riguardano i seguenti elementi
1. Alt è il testo alternativo vale a dire quello che si legge quando il browser non apre
l’immagine
2. Title è il testo del tooltip che si visualizza quando si punta l’immagine con il mouse
3. Width e Height sono la larghezza e l’altezza. Nel caso ci sia un solo valore l’altro verrà di
conseguenza mantenendo invariate le proporzioni della immagine
Se si vuole mettere un collegamento a una immagine si usa il codice
<a href="URL DEL COLLEGAMENTO"> <img src="URL Immagine" /> <a/>
dove sono stati omessi per brevità alcuni attributi dell’immagine.
LAYOUT E TAG DIV
Il layout è uno degli aspetti più importanti di una pagina web. E’ essenziale il contenuto che vi è
postato ma anche il modo in cui viene presentato. In questa sede non si possono certo affrontare
tutte le tematiche che riguardano l’aspetto di una pagina.
Se siamo utenti di piattaforme quali Blogger o Wordpress sono gli stessi modelli o temi che
attraverso i CSS o fogli di stile determinano il layout del sito. C’è il codice per la forma e la
dimensione dell’header, quello per la sidebar di sinistra e la sidebar di destra, quello per il footer
e quello per lo sfondo.
Nel caso in cui avessimo una pagina bianca in cui incollare codice senza che sia presente una
sovrastruttura potremo creare un HTML di questo tipo
<div id="contenitore" style="width:480px">
<div id="intestazione" style="background-color:#FFB411;">
<h1 style="margin-bottom:0;">Titolo della pagina</h1>
</div>
<div id="menu" style="background-color:#FFE622;height:200px; width:90px;float:left;">
<b>MENU</b><br />
GUIDE<br />
HTML<br />
CSS</div>
<div id="content" style="background-color:#EEFFEE;height:200px;width:390px;float:left;"> Quì
ci va il contenuto della pagina. Si possono usare tag di formattazione quali il <b>grassetto</b> o
il <i>corsivo</i>. E' anche possibile usare dei fogli di stile per <span style="color:#003366; font-
weight:bold;">personalizzare il testo</span></div>
14
<div id="footer" style="background-color:#FFB411;clear:both;text-align:center;">Copyright ©
www.ideepercomputeredinternet.com</div>
</div>
che produce questo risultato
Per dare un aspetto particolare a una parte del contenuto di una pagina si utilizza il tag <div> che
permette attraverso appropriati fogli di stile di determinare sfondo, colori del testo, margini
esterni (margin) e margini interni (padding). Ecco un esempio
<div style="color:#003366; background-color:#EEEEEE; width:400px; height:200px;
padding:5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lorem turpis.
Aliquam mauris quam, facilisis at egestas quis, fringilla id leo. Nam ac nisi nisl. Vestibulum in
sagittis eros. Pellentesque gravida ornare ultrices. Integer at sapien sem. Curabitur at lorem risus,
vitae mattis eros. Vestibulum suscipit elementum tortor at suscipit. Nam nec diam ac ante lobortis
tincidunt sit amet ac sem. Vestibulum laoreet, elit ac laoreet imperdiet, justo diam porta felis,
interdum congue turpis dolor vitae risus. Aliquam pellentesque eros non justo gravida et venenatis
tortor hendrerit.</div>
Che genera un blocco di testo con questo aspetto
15
MODULI E BOTTONI
Una delle ragioni dei successi del web è stata la possibilità di immettere o raccogliere
informazioni tramite la compilazione di moduli o form. E’ evidente che questa sezione dell’HTML
può essere solo accennata. La sintassi di un modulo generico è la seguente
<form>
elementi del modulo
</form>
Gli elementi del modulo possono essere text field, checkbox, password, radio button, submit
button e molti altri ancora. Ci limiteremo a vedere dei semplici esempi usando il tag <input> per
gli elementi
<form>
Nome:<input type="text" name="nome" /><br />
Cognome: <input type="text" name="cognome" />
</form>
produce questo effetto
Si possono inserire degli attributi quali la larghezza che di default è di 20 caratteri. Il codice
seguente
<form>
Password: <input type="password" name="pswd" />
</form>
serve per la digitazione di password
16
mentre quello del tipo radio buttons permette di selezionare solo una tra varie scelte
<form>
<input type="radio" name="sex" value="male" /> Maschio<br />
<input type="radio" name="sex" value="female" /> Femmina
</form>
in questo modo
I form del tipo Checkboxes permettono invece di selezionare più opzioni tra quelle proposte
<form>
<input type="checkbox" name="trasporto" value="Bici" /> Possiedo una bici<br />
<input type="checkbox" name="trasporto" value="Auto" /> Possiedo una auto
</form>
che genera questo modulo
I moduli del tipo Drop Down List vengono creati con questo codice
<form>
<select name="auto">
<option value="FIAT">FIAT</option>
<option value="BMW">BMW</option>
<option value="AUDI">AUDI</option>
</select>
<select name="moto">
<option value="YAMAHA">YAMAHA</option>
<option value="ONDA">ONDA</option>
<option value="DUCATI">DUCATI</option>
17
</select>
</form>
Che danno poi questa risultanza
Il tag <form> rappresenta l’inizio e la fine del modulo, <select> e </select> l’inizio e la fine di una
lista e <option> ciascun elemento della lista.
Per i bottoni si può usare questo codice
<button> NOME DEL BOTTONE </button>
Se si vuole inserire anche un collegamento si può usare quest’altro
<a href="URL DEL COLLEGAMENTO" target="_blank" title="titolo"><input name="button"
value="testo visibile" style=" color:#191919; background-color: #FDBCB7;" type="submit"></a>
dove gli attributi da inserire li abbiamo già trattati nei precedenti capitoli. Un modo per creare
un bottone con un campo per inviare un dato a un server è quello di usare il codice seguente
<form name="input" action="#" method="get">
Indirizzo email: <input type="text" name="user" />
<input type="submit" value="Invia" />
</form>
Dove al posto del cancelletto si incolla l’URL della pagina a cui inviare il modulo. E’ evidente che
se non si ha la disponibilità di un sito web a cui accedere questi codici non possono servire per
ottenere informazioni ma solo come mera curiosità.
18
Concludo questo capitolo indicando alcuni tag che fanno parte della stessa categoria di <form> e
<input>.
1. Textarea per la creazione di aree di input
2. Label che definisce una etichetta per un elemento input
3. Fieldset per la creazione di un bordo intorno a un form
4. Legend per la descrizione di un elemento fieldset
IFRAME
Gli IFrame sono degli elementi che servono per richiamare una pagina web all’interno di un’altra
pagina web. In sostanza si crea una finestra all’interno della quale si può vedere un’altra pagina
di cui si è immesso l’URL.
<iframe align="center" height="200" width="300" scrolling="yes" src="URL PAGINA
WEB"></iframe>
Se ne possono settare le dimensioni e inserire altri attributi quali scrolling="no" per non mostrare
le barre di scorrimento oppure frameborder="0" per eliminare il bordo. Gli IFrame vengono usati
anche da servizi di video-sharing quali Youtube per incorporare il filmato nei siti web.
APPENDICE
In questa sezione inserirò un po’ alla rinfusa alcune cose che non ho avuto modo di affrontare nel
resto dell’ebook ma che sono importanti anche per una conoscenza elementare dell’HTML
19
HTML5 E CCS3
Sono già disponibili le versioni più recenti dell’HTML, vale a dire HTML5, e dei fogli di stile cioè il
CSS3. Si tratta della introduzione di nuovi tag che potranno via via essere interpretati dai vari
browser per dare una esperienza di navigazione ancora migliore. Verranno notevolmente
aumentate le prestazioni dei browser per quello che riguarda i filmati e verranno introdotte delle
trasformazioni quali le rotazioni.
TEXTAREA
La textarea è un codice che serve per visualizzare un’area con barre di scorrimento. Il codice di
base è
<form>
<textarea cols="50" rows="6" style="background-image: url(URL IMMAGINE DI SFONDO); color:
#191919; background-color: #FDBCB7; font-weight: bold; font-size: 14pt;">TESTO DA
VISUALIZZARE NEL BOX</textarea>
</form>
In cui si possono settare il numero delle colonne (50) e il numero delle righe (6) oltre a colore di
sfondo, immagine di sfondo, grassetto e dimensione del testo.
COME ALLINEARE O CENTRARE UN TESTO E UNA IMMAGINE
Per centrare un oggetto HTML quale un testo o un video si utilizzano due tag <div> in questo
modo
<div align="center">
Codice dell’elemento da centrare
</div>
Se si vuole allineare a sinistra si sostituisce center con left, se si vuole allineare a destra si mette
right e infine si usa justify se si vuole giustificare un testo.
Per centrare una immagine si usa quest’altro codice
<img style='display:block; margin-left:auto; margin-right:auto;' src="URL IMMAGINE"/>
dove al solito codice è stato aggiunta la riga colorata di rosso.
20
CODICI DEI COLORI
I codici dei colori sono individuati da una terna ordinata di numeri da 0 a 255 che ne indicano la
quantità rispettivamente di Rosso, Verde e Blu. Per esempio (0,255,0) è il colore verde. Si può
usare anche la notazione esadecimale in cui un colore è determinato da sei cifre esadecimale che
vanno da 0 a F. Per esempio #7B0C15. Per saperne di più si può leggere il codice dei colori.
Ebook scritto da Ernesto Tirinnanzi - Firenze lì, 19 Settembre 2012
Copyright © http://www.ideepercomputeredinternet.com
Il contenuto di questo libro può essere distribuito gratuitamente senza essere modificato
soltanto citandone il nome dell’autore e linkando il sito web di cui sopra.
21
