Post on 01-May-2015
HTMLL’HTML è un linguaggio di markup: le istruzioni vengono date attraverso comandi denominati tag e racchiusi tra i segni di maggiore e minore (<tag>).
L’HTML è un linguaggio interpretato dal browser e non è case sensitive.
I tag possono essere:
• duplici: quando esiste un tag di apertura e un tag di chiusura entro i quali è racchiuso l’oggetto che deve assumere certe caratteristiche
<nometag>...... </ nometag >
• singoli: quando non prevede la chiusura
</ nometag >
Un documento HTML è racchiuso tra i tag
<html> … </ html >
che indicano al browser l’inizio e la fine di un documento.
1
La struttura di un documento HTMLUn documento HTML è costituito da due parti:
• HEAD, che è l’intestazione del documento:
<head> … </head>
• BODY, che è il corpo del documento:
<body> … </body>
Un documento HTML sarà quindi:
<html>
<head>… </ head >
< body > …</body>
</html>
I tag possono essere nidificati ad eccezione di <head> e <body>.
2
<HEAD>: intestazione
Nell’intestazione del documento (<HEAD>) possono essere presenti due tag:
• <title>…</title> riferito al titolo che apparirà nella barra superiore del browser e verrà utilizzato dai motori di ricerca
• <meta> i meta tag che hanno diverse funzioni:
<meta name="keywords" Content=“Parole chiave">
< meta name="author" content="Nome Cognome">
< meta name="description" content="Il mio sito“>
< meta name="GENERATOR" content="Blocco note”>
< meta NAME="ROBOTS" CONTENT="NOINDEX">
< meta HTTP-EQUIV="Refresh" CONTENT="5; url=pippo.htm">
Niente di ciò che è presente nei meta tags verrà visualizzato dal browser.
3
<BODY>: il corpoNel corpo del documento si trova tutto ciò che verrà visualizzato dal browser.
Il tag body ha attributi mediante i quali è possibile definire caratteri generali del documento:
• il colore o l’immagine di sfondo da impostare nel background bgcolor=colore background= immagine.gif
• il colore del testo text=colori
• il colore dei collegamenti ipertestuali presenti nel documento link=colore alink=colore vlink=colore
Esempio:
<body bgcolor=yellow text=red link=green vlink=cyan alink=blue>…
</body>
4
Come creare un documento HTML
Per scrivere un documento html è sufficiente:
• aprire un editore di testo qualsiasi (blocco note, word pad)
• scrivere il codice
• salvarlo con estensione htm o html
• aprire il browser
• aprire il documento
5
I tag di posizionamento
Definiscono lo stile e il posizionamento del testo nella pagina:
• <br> nuova linea (non richiede un tag di chiusura)
• <p> nuovo paragrafo (non richiede un tag di chiusura)
• <p align=center/right/left)> nuovo paragrafo con allineamento del testo
• <center>...</center> testo allineato al centro
• <div align=center>...</div> allineamento del testo al centro
• <hr align=right width=80% size=2 color=red> inserisco una linea
6
I tag fisici
Definiscono lo stile e il formato del testo:
• <hn>...</hn> con n=1,2,3,4,5,6 per creare intestazioni. Il testo viene ingrandito in una scala da 1 a 6 (dove con n=1 si ha il font più alto) e viene scritto in carattere grassetto in un nuovo paragrafo
• <font face="Garamond, Arial" size=5 color=red> ... </font> specifica lo stile, il colore e la grandezza del testo
• <i>...</i> <b>...</b> <u>...</u> <strike>...</strike> definiscono il testo corsivo, grassetto, sottolineato e barrato
• <sup>...</sup> <sub>...</sub> permettono di scrivere il testo in posizione di apice e pedice
7
I tag logici
Definiscono unicamente la struttura del testo e non lo stile.
Ad esempio:
• <address>... </address> contrassegna informazioni di indirizzo
• <blockquote >... </blockquote> usato per citazioni più lunghe di due o tre righe
• <code>... </code> per righe di codice di informazione
• <dfn>... </dfn> indica che il testo compreso è una definizione
• <em>... </em> enfatizza il testo
• <strong>... </strong> enfatizza il testo
8
I colori, i font, le dimensioni
E’ possibile indicare il colore usando il nome inglese del colore (blue, yellow, …) oppure usando la notazione RGB = RedGreenBlue e potendo così creare ogni tipo di colore. In HTML si usa la numerazione esadecimale per definire la notazione RGB. Per es.: bgcolor=#000000
Nella scelta del font è importante definirne più di un tipo, considerando che non tutti i sistemi operativi hanno la stessa dotazione di font. E’ buona regola prevedere almeno un font di sistema come può essere l’Arial.
Gli oggetti (immagini, tabelle, livelli, …) vengono dimensionati in pixel o in percentuale relativamente al loro oggetto “contenitore”.
9
I caratteri ASCII
Non tutti i caratteri possono essere digitati in HTML, direttamente da tastiera. Per es. uno spazio bianco o parole che vengono interpretate dal browser (come <p> o <b>) o caratteri strani non presenti sulla tastiera
Ci sono due modi per risolvere:
• &#numero dove numero rappresenta il numero del carattere nel codice ASCII
• Entità HTML
Quindi:
•   o   per uno spazio bianco
• <p> o <p> per scrivere <p>;
10
Le liste (1)Le liste ordinate sono elenchi indicizzati.
In HTML sono strutturate con i seguenti tag:
• <ol>…</ol> che definiscono l’inizio e la fine della lista. L’attributo Type definisce quale tipo di “indicizzazione” utilizza la lista stessa:
Type = A (lettere maiuscole)
Type = a (lettere minuscole)
Type = I (numeri romani maiuscoli)
Type = i (numeri romani minuscoli)
Il type predefinito sono i numeri arabi.
• <li> che individuano ogni elemento della lista
11
Le liste (2)
Le liste non ordinate sono elenchi puntati ma non indicizzati.
In HTML sono strutturate con i seguenti tag:
• <ul>…</ul> che definiscono l’inizio e la fine della lista. L’attributo Type definisce quale tipo di “puntatura” utilizza la lista stessa:
Type = disc (pallini)
Type = circle (pallini vuoti)
Type = square (quadratini)
• <li> che individuano ogni elemento della lista
12
Le immagini (1)I formati di immagini supportati dal browser sono:
• JPG a 16 milioni di colori ed è un formato compresso
• GIF a 256 colori
L’inserimento di immagini avviene utilizzando il tag <img>
Gli attributi sono:
• src che specifica l’indirizzo relativo o assoluto dell’immagine
• alt definisce il testo che appare quando il mouse passa sopra l’immagine
• width=n height=n definiscono la dimensione align=(top, bottom, middle, right, left) indica il posizionamento del testo rispetto all’immagine
• border=n la dimensione del bordo
13
Le immagini (2)Le mappe cliccabili si creano da un’unica immagine allo scopo di creare più link su un solo oggetto, dividendolo in zone.
In HTML sono strutturate con i seguenti tag:
<map name=nomemappa>
<area>
…
</map>
Il tag area definisce forma, coordinate e url del link:
<area shape=circle/rect/poly) coords=(...) href=url>
Il riferimento alla mappa è inserito come attributo nel tag <img>:
<img src=immagine.gif usemap=#nomemappa>
14
I collegamenti ipertestuali (1)
Sono lo strumento tecnico che consente una fruibilità reticolare dei contenuti, la personalizzazione dei percorsi e l’immediatezza nel reperimento delle informazioni. Il tag utilizzato:
<a>…</a>
I suoi attributi:
• href che definisce l’url della pagina collegata usando l’indirizzamento relativo o assoluto
• title definisce il testo che appare quando il mouse passa sopra il link
• target che definisce dove verrà caricata la pagina<a href=… target=_top/_parent/_self/_blank/nomeframe>…</a> (_top:nella finestra competa; _parent:nel frame genitore di quello corrente; _self:nel frame che conteneva il collegamento; _blank:apre una nuova finestra; nomeframe:nel frame che ha name=nomeframe)
15
I collegamenti ipertestuali (2)Un link può linkare:
• un indirizzo esterno <a href=”http://www.google.it”> Google </a>
• un indirizzo interno <a href=”../pagina2.html”> pagina2 <a>
• un paragrafo interno al documento
<a href=#segnalibro> vai a segnalibro </a>
dovrà essere creato il punto (segnalibro)in cui inserire il tag
<a name=segnalibro> questo è il punto segnalibro </a>
• un indirizzo e-mail
<a href=mailto:bordieris@tiscali.it?subject=oggetto?body=corpo> ... </a>
16
Le tabelle (1)Sono uno degli strumenti più usati in quanto consentono la definizione dei layout della pagine.
In HTML sono strutturate con i seguenti tag:
<table>…</table>
I suoi attributi:
• background inserisce un’immagine di background
• border=1,2,3.... definisce la dimensione del bordo
• width e height definiscono la dimensione della tabella
• cellpadding=1,2,3… definisce la distanza del testo dal bordo della tabella
• cellspacing=1,2,3…definisce la distanza delle celle dal bordo della tabella e dal bordo delle altre celle
17
Le tabelle (2)Vanno definite le righe e le colonne secondo l’orientamento dall’alto a sinistra fino al basso a destra. Ogni riga conterrà la definizione delle “sue” colonne:
• le righe sono strutturate con i tag <tr>…</tr>
• le colonne con i tag <td>…</td>
• l’intestazione della tabella <th>...</th> che sostituisce il tag <td>
Esempio: <table>
<tr>
<td>...</td>
<td>...</td>
</tr>
< table >
18
Le tabelle (3)
Gli attributi del tag <td>:
• align=center/right/left definisce l’allineamento orizzontale
• valign=top/bottom/center definisce l’allineamento verticale
• bgcolor definisce il colore di background
• width e height definiscono la dimensione
• background inserisce un’immagine di background
• colspan e rowspan definiscono il numero di righe o colonne che deve occupare la cella
19
I frame (1)
Consentono di definire sezioni, separate e distinte, all’interno della finestra del browser. Definiscono un controllo maggiore sulle informazioni presentate e sono utilizzati come strumento di navigazione.
Non tutti le versioni dei browser supportano i frame. Si usa quindi:
<noframe>…</noframe>
il cui contenuto è visualizzato solo da tali browser.
Per creare un set di frame (il contenitore generale):
<frameset>… </frameset>
Questi tag vanno inseriti dopo l’intestazione e mai all’interno del tag <body>: infatti il documento html che definisce i frame non avrà il tag body.
20
I frame (2)
Il tag <frameset> definisce la dimensione relativa e assoluta di ciascun frame
Gli attributi del tag <frameset>:
• cols=“%,pixel,*” definisce numero e dimensione delle colonne da creare
• rows=“%,pixel,*” definisce numero e dimensione delle righe da creare
(pixel=dimensione in pixel; %=dimensione in percentuale; *=dimensione proporzionale agli altri frame)
• frameborder=1/0 definisce se i frame sono visualizzati con un bordo
• border=n dimensione del bordo dei frame
21
I frame (3)
All’interno del tag <frameset> viene definito il contenuto di ciascun frame con il tag <frame>.
Ci sarà un tag <frame> per ogni riga e colonna definita nel <frameset>.
Gli attributi del tag <frame>:
• name definisce il nome del frame per i riferimenti ad esempio nel target dei collegamenti ipertestuali
• src definisce l’URL del documento HTML che verrà visualizzato all’interno del frame
• scrolling=no/yes/auto definisce se appare una barra di scorrimento nel frame
22
I frame (4)
• frameborder=1/0 definisce se i frame sono visualizzati con un bordo
• noresize se presente l’utente non può ridimensionare il frame
• marginheight=n definisce l’altezza del margine superiore e inferiore
• marginwidth=n definisce l’altezza del margine sinistro e destro
23
I frame (5)
<html>
<head>…</head>
<frameset rows=“30%,*”>
<frame name=superiore src=sup.html>
<frame name=inferiore src=inf.html>
</frameset>
</html>
24
I form (1)I moduli (form) permettono di introdurre interattività all’interno di una pagina e scambiare informazioni.
I contenuti di un form sono inviati ad uno script CGI.
In HTML i form sono strutturati con i seguenti tag:
<form>…</form>
Gli attributi de tag <form>:
• method=post/get definisce com’è inviata l’informazione allo script. Con il metodo get (default) i dati sono aggiunti all’url e separati quando arrivano a destinazione (script_name e query_string). Con il metodo post i dati sono inviati allo script come flusso informativo separato
• action definisce il percorso dello script
Non è possibile inserire un modulo all’interno di un altro.
25
CGI (Common Gateway Interface) è la norma che permette su un server Web d'includere dei programmi capaci di ricevere dei parametri e di trasmettere delle informazioni al navigatore.Abbreviazione di Common Gateway Interface, è una specifica per il trasferimento di informazioni tra un server WWW ed un programma CGI. Un programma CGI è un'applicazione strutturata per ricevere e restituire dati che siano conformi alla specifica CGI. Il programma può essere scritto in un qualsiasi linguaggio di programmazione, come C, Perl, Java, Visual Basic.I programmi CGI sono la soluzione più comune perché un server Web possa interagire con l'utente. Le soluzioni CGI sono procedure server-side, in quanto le operazioni avvengono sul server Web.
I form (2)
26
I form (3): elementiCiascun elemento del form è inviato come una coppia di nome_campo=valore nel momento in cui l’utente sottoscrive il form stesso.
Il form è un insieme di tag che ne definiscono gli elementi.
In generale, ciascun elemento è inserito usando il tag <input>.
Gli attributi del tag <input>:
• type definisce come appare sullo schermo il campo di input
• name definisce il nome assegnato al campo
Il valore di type definisce nove tipi di campi di input:
• <input type=text name=nome value=”valore” size=15 maxlenght=25>
• <input type=password name=nome value=”valore” size=10 Maxlenght=25>
27
I form (4): elementi
• <input type=hidden name=nome value=”valore”>
• <input type=checkbox name=nome value=”valore” checked> restituisce valore allo script solo se è selezionato. Il valore di default è on.
• <input type=radio name=nome value=”valore” checked> restituisce valore allo script solo se è selezionato.
• <input type=submit name=nome value=”invia il form”>
• <input type=reset name=nome value=”svuota i campi”>
• <input type=button name=nome value=”valore”>
• <input type=image name=nome src=url>
28
I form (5): elementi
Gli attributi del tag <input>:
• align=top/middle/bottom/left/right allineamento del campo
• checked reseleziona una checkbox o un radiobutton
• maxlenght=n definisce il numero massimo di caratteri che possono essere inseriti in un campo text o password
• size=n definisce la dimensione fisica del campo
Se il form utilizza un FormMail è necessario inserire un campo nascosto che consenta di specificare l’indirizzo e-mail:
<input type=hidden name=“recipient” value=“bordieris@tiscali.it>
29
I form (6): elementi
Altri elementi di un form: casella di selezione e area di testo.
La casella di selezione può essere un elenco a discesa o un menù di voci.
In HTML è strutturata con i seguenti tag:
<select name=nome size=3 multiple>
<option selected value=prima> prima opzione
<option selected value=seconda> seconda opzione
</select>
30
I form (7): elementi
Gli attributi del tag <select>:
• multiple consente la selezioni di più voci del menu
• size=n specifica il numero di voci visibili del menu
Gli attributi del tag <option>:
• value definisce il valore attribuito al campo se viene scelta l’opzione
• selected definisce quale voce è pre-selezionata
31
I form (8): elementi
L’ area di testo è un’area di testo libero di n righe e n colonne.
In HTML è strutturata con il seguente tag:
<textarea rows=n cols=n name=nome>
eventuale testo visualizzato
</textarea>
Gli attributi del tag <textarea>:
• name definisce il nome di riferimento della textarea
• rows definisce il numero di righe visibili dell’area di testo
• cols definisce il numero di colonne visibili dell’area di testo
32
Inserimento di un file audio
I formati supportati dal web più utilizzati sono: .mid, .wav, .mp3
E’ possibile inserire una musica di sottofondo che parte all’apertura della pagina con il tag <EMBED>
<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80" WIDTH="0" HEIGHT="0">
Se si desidera creare un link che permetta di sentire un file audio, è possibile creare una pagina html che contenga il tag <EMBED SRC=.......> che apra il file MID.
Se si crea un link che punta direttamente al file .mid, verrà aperto dal browser l’applicativo che permette di ascoltare i file audio.
33