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:miaposta@esempio.com?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 id style title che specifica una classe di un elemento che specifica un unico id di un elemento che determina uno stile inline di un elemento 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; fontweight: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