Post on 02-May-2015
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
INTRODUZIONE HTML
L’ HTML è un linguaggio (non di programmazione) che consente di realizzare ipertesti.
Un ipertesto è un documento che può essere consultato anche in
modo non sequenziale, ma con collegamenti (link) che
consentono di passare velocemente da una parte all’altra del
documento, o in altri documenti.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Pagine WEB
Le pagine web sono documenti ipertestuali scritti con il linguaggio HTML.
In una pagina web è possibile consultare documenti, immagini,
video e suoni, anche memorizzati in computer (server) differenti,
attraverso gli indirizzi dei vari siti (URL) associati ai link.
La Navigazione è l’attività di consultazione delle pagine web.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Html
HTML (HyperText Markup Language) non è un linguaggio di programmazione, non fornisce istruzioni per interagire con i sistemi operativi dei computer.
L’Html è un insieme di istruzioni (TAG) che consente di applicare,
ad un normale testo ASCII, particolari stili, formattare paragrafi,
titoli, liste, realizzare link.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Browser
L’interpretazione dei codici Html (tag) è riservata ai browser: programmi utilizzati per navigare su internet (Internet Explorer, Netscape, Firefox, Safari, ecc.).
Ciò a volte è causa di problemi legati a come i singoli browser interpretano alcuni TAG.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Html Standard
Esistono TAG che non sono riconosciuti da tutti i browser. Si costruiscono quindi versioni Standard (ufficiali) di Html che includano istruzioni che vengano correttamente interpretate dal maggior numero di browser possibile. Le principali versioni Standard sono:
HTML 2.0 – HTML 3.5 – HTML 4.0 (da realizzare HTML 5.0)
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Pagine web
Per scrivere una pagina web con l’Html si può utilizzare un qualunque programma text editor (Block Notes, Word, ecc.) che consenta di salvare il documento in formato ASCII.
Un file scritto con l’Html deve avere estensione .html (o .htm) e non .txt
(e, evidentemente, nemmeno doc).
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Struttura di una pagina web
Un documento web (standard) inizia con il TAG <HTML> e finisce (si chiude) con </HTML>
Un TAG è sempre costituito da un termine delimitato dai simboli < e >, senza distinzione tra minuscolo e maiuscolo e, solitamente, presenta un marcatore iniziale (ad esempio <html>) ed un marcatore finale che si esplicita inserendo come prefisso il simbolo / (ad esempio </html>).
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Head e Body
Un documento Html ha la seguente struttura:<HTML>
</HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
Intestazione(le istruzioni vanno inserite tra i due tag)
Corpo del documento(le istruzioni vanno inserite tra i due tag)
<!DOCTYPE HTML …>Doctype(Opzionale)
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Doctype
Il tag doctype, praticamente ignorato dai vecchi browser, attualmente è sfruttato per ottimizzare la visualizzazione della pagina.
Fornisce informazioni sul documento: il tipo di linguaggio utilizzato (solitamente HTML), se il documento è pubblico, se fa riferimento alle specifiche W3C, …)
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Head
L’intestazione contiene solitamente dei tag che non influiscono sulla formattazione della pagina, ma che permettono di assegnare un titolo al documento, di associare risorse esterne come fogli di stile e javascript e consentire ai motori di ricerca (google, altavista, …) di ottenere informazioni generiche sulla pagina stessa.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Il titolo della pagina web
Foglio di Stile associato
Istruzioni Javascript
Reindirizzare verso una nuova pagina
Descrizione del contenuto della pagina (Mot. Ricerca)
Termini associati alla pagina (Mot. Ricerca)
Head
<TITLE>Bla bla bla … </TITLE>
<HEAD>
<LINK REL=stylesheet type=text/css href=miofile.css>
<SCRIPT type=text/javascript src=miofile.js>
<META HTTP-EQUIV=refresh CONTENT=“2;url=index1.html”>
<META NAME=description CONTENT="La descrizione del sito">
<META NAME=keywords CONTENT=“scuola, didattica, lezioni">
</HEAD>
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Body
Il body è la sezione principale del documento. È in questo spazio che si
inseriscono tutti gli elementi specifici della pagina: titoli, paragrafi,
liste, immagini, link, tabelle e contenuti multimediali.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Titoli
Un titolo di un paragrafo si realizza con i TAG
<H1>Titolo … </H1> Titolo …
<H2>Titolo … </H2> Titolo …
<H3>Titolo … </H3> Titolo …
<H4>Titolo … </H4> Titolo …
<H5>Titolo … </H5> Titolo …
<H6>Titolo … </H6> Titolo …
L’eventuale attributo align=center/right/left permette l’allineamento centrato/a destra/a sinistra (predefinito) <h1 align=center> ….
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Paragrafi
Un paragrafo si specifica con
<p> … </p>
Il TAG <p> potrebbe essere utilizzato senza chiusura </p>, ma è
sempre consigliabile terminare il paragrafo con tale marcatore, specie
quando tale paragrafo è caratterizzato da una formattazione particolare
(colore del testo, tipo di font, ecc.) che non si vuole ripetere nella frase
successiva.
Il tag <p> fa iniziare un nuovo paragrafo sempre su una nuova riga
(implica cioè un “ritorno a capo”).
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
<BR> Il testo va “a capo” senza lasciare una riga vuota e senza cambiare gli attributi dell’attuale paragrafo.
<HR width=x size=y align=left|right noshade> Permette di inserire una riga di separazione li lunghezza x (valore percentuale o numero di pixel), spessore y, allineata a sinistra o a destra (e non centrata), noshade, se presente, permette di ottenere una linea senza ombra tridimensionale.
<PRE> … </PRE> Il testo delimitato tra questi tag rimane “preformattato” cioè mantiene la struttura preimpostata durante la scrittura (spazi tra parole, ritorni a capo, ecc.)
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
<EM> … </EM> Il testo è scritto in modo enfatizzato (corsivo).
<STRONG> … </STRONG> Testo in grassetto e di dimensione relativamente maggiore.
<SUB> … </SUB> Il testo è scritto come pedice
<SUP> … </SUP> Il testo è scritto come apice.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
<B> … </B> Testo in grassetto.
<I> … </I> Testo in corsivo.
<U> … </U> Testo sottolineato.
<S> … </S> Testo con una riga sopra.
<SMALL> … </SMALL> Il testo è scritto in una dimensione relativamente minore.
<BIG> … </BIG> Il testo è scritto in una dimensione relativamente maggiore.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Immagini
I browser permettono di visualizzare immagini di diversi formati grafici.
I più comuni sono:
•GIF (Graphics Interchange Format)
•JPEG (Joint Photographic Experts Group)
•PNG (Portable Network Graphics)
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Il formato GIF è utilizzato principalmente per immagini che contengono
fino a 256 colori (più che sufficiente per pulsanti, sfondi ed icone) ed
offre una buona compressione del file. Permette di realizzare:
•Effetti di trasparenza
•Immagini interlacciate (visualizzate in modo graduale)
•Animazioni (“gif animate”)
Questo formato non è indicato per foto che, solitamente, contengono
milioni di colori.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Il formato JPEG è invece utilizzato per immagine fotografiche con una
varietà di milioni di colori e permette di ottenere una buona compressione
del file (dimensione del file minore, in termini di byte, ma con
conseguente perdita di qualità dell’immagine).
A differenza del formato gif, però, non permette di ottenere effetti di
trasparenza né immagini interlacciate.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Il formato PNG, infine, permette di ottenere effetti di trasparenza e di
interlacciamento, e supporta immagini con milioni di colori (come il jpeg).
A differenza del formato gif (proprietario), il metodo di compressione è
pubblico quindi liberamente utilizzabile (senza dover pagare diritti di
utilizzo).
L’unico inconveniente è che, ancora, non è pienamente supportato da
tutti i browser.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Per inserire una immagine in un documento HTML si utilizza il tag
<IMG align=top|middle|bottom|left|right alt=“bla bla” height=x width=y
hspace=h vspace=v border=b src=“file.gif”>
Align: allineare l’immagine rispetto al testo
Alt: visualizzare una descrizione (o una frase alternativa all’immagine)
Height e width: dimensioni in pixel (o in percentuale)
Hspace e Vspace: margine da lasciare tra testo (eventuale) e immagine
Border: spessore dell’eventuale bordo
Src: percorso specifico del file.
Tranne src, tutti gli altri attributi sono opzionali e possono
tranquillamente essere omessi.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Link (o ancore)
Mediante i link è possibile realizzare collegamenti ipertestuali con altre
pagine html o file che si trovano nello stesso server o in altri (esterni).
<A href=“file.html”>bla bla</A>
oppure
<A href=“http://www.sito.it”>bla bla</A>
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Il testo racchiuso tra i tag <a> … </a> è visualizzato, solitamente,
sottolineato e di un colore diverso (per default blu) ad esempio:
bla bla
Cliccando sul termine linkato ci si collega alla pagina specificata dal
parametro href (o viene proposto di visualizzare il file relativo).
N.B.
È possibile realizzare link con immagini utilizzando il tag <img>:
<A href=“file.html”><IMG src=immagine.gif></A>
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
ListeLe liste (elenchi), puntate o numerate, si realizzano, rispettivamente, con
i seguenti tag:
<UL><LI> uno </LI><LI> due </LI><LI> tre </LI>
</UL>
•uno
•due
•tre
•uno
•due
•tre
<OL><LI> uno </LI><LI> due </LI><LI> tre </LI>
</OL>
1) uno
2) due
3) tre
1) uno
2) due
3) tre
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Opzioni per gli elenchi numerati <OL start=n type=h>:
Start: definisce il valore iniziale dell’elenco;
Type: può assumere i valori 1, A, a, I, i.
Opzioni per gli elenchi puntati <UL type=h>:
Type: disc, square, circle.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Tabelle
Una tabella permette di strutturare il testo in righe e colonne. I tag per definire una tabella sono: <table> per la struttura, <tr> per ciascuna riga, <th> per una cella di intestazione e, infine, <td> per una comune cella.
<table border =x cellpadding=y cellspacing=z>
<tr>
<th>colonna A</th><th>colonna B</th>
</tr> <tr> <td>aaaa</td><td>bbbb</td> </tr>
</table>
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Parametri di <table>
Cellpadding=x permette di specificare lo spazio x (distanza) da lasciare tra il contenuto della cella ed i suoi bordi;
Cellspacing=y consente di settare la distanza y, in pixel, tra celle adiacenti;
Bgcolor=color consente di assegnare un colore di sfondo per l’intera tabella;
Background=file.jpg/png/gif imposta come sfondo l’immagine contenuta nel file specificato (nella stessa cartella della pagina html);
width=n stabilisce, se specificato, la larghezza complessiva della tabella: n può assumere un valore intero (pixel) o percentuale rispetto la larghezza del browser. Se questo parametro non è specificato la tabella si adatta al contenuto;
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
I principali parametri di <tr> sono:
align=center/left/right (allineamento orizzontale)
valign=baseline/bottom/middle/top (allineamento verticale)
bgcolor=color (colore di sfondo)
I principali parametri di <td> e <th>, invece:
align=center/left/right
valign=baseline/bottom/middle/top
bgcolor=color
colspan=n (raggruppamento di n colonne)
rowspan=n (raggruppamento di n righe)
N.B. <th>, a differenza di <td>, centra il testo nella cella e gli applica lo stile grassetto.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
ColoriI colori, in HTML, possono essere definiti esplicitandoli con il nome inglese (red, green, lightblue, black, …) oppure in RGB.
RGB sta per Red Green Blue e costituisce la via principale per definire un colore. In pratica RGB esprime la combinazione dei tre colori fondamentali rosso, verde e blu, rispettivamente, espressi da tre numeri variabili da 00 a FF (notazione esadecimale) preceduti dal simbolo #. Esempi:
#FF0000 (red) #FF00FF (fuchsia)
#0000FF (blue) #800000 (maroon)
#00FFFF (aqua) #000080 (navy)
#008800 (green) #FFFF00 (yellow)
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
FormMediante i form è possibile interagire (scambiare dati) con gli utenti che visitano una pagina web. Ciò è possibile inserendo nella pagina elementi quali Pulsanti, Caselle di testo, Caselle di spunta a scelta multipla (Checkbox) o esclusiva (Radio).
La seguente costituisce la sintassi essenziale del tag <FORM>:
<FORM action=script method=get|post>
…
…
</FORM>
L’attributo action specifica o la pagina dove “inviare” i dati o un indirizzo email al quale spedire i dati del form (action=mailto:tizio@server.com). Se tale attributo non fosse specificato, i dati del form verrebbero “inviati” alla stessa pagina.
L’attributo method, invece, permette di specificare come deve avvenire l’invio dei dati. I valori possibili sono due: get oppure post. Con get i “dati inviati” sono visibili a tutti in quanto inseriti nell’URL della pagina specificata nell’action; con post, invece, i dati non vengono accodati all’URL, non sono quindi visibili e non vi è un limite alla loro quantità (questo è particolarmente conveniente quando transitano password o “enormi” quantità di dati).
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
InputIl tag <INPUT> è utilizzato all’interno dei tag <FORM> </FORM>per realizzare i suoi elementi (pulsanti, caselle, …). La sua sintassi essenziale è:
<INPUT type=… name=… value=…>
Gli attributi type, name e value sono solo alcuni dei possibili, oltre quelli specifici del particolare tipo di oggetto realizzato (ad esempio se type fosse uguale a checkbox, potremmo avere anche l’attributo checked, altrimente non presente).
name rappresenta il nome associato allo specifico elemento, utile per leggere il relativo valore inviato;
value è il valore preimpostato che quell’elemento contiene;
type, invece, identifica il tipo di elemento che si vuole ottenere (pulsante, casella di testo, ecc.). I possibili valori di type sono:
button, checkbox, file, password, radio, reset, submit e text.
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
type=button (pulsante generico)
type=submit (pulsante di invio dei dati del modulo)
type=reset (pulsante di azzeramento dei dati, senza invio)
Input type
ok
type=checkbox (casella di spunta, per selezionare una o più voci. Con
L’opzione checked l’elemento appare selezionato.)
type=radio (radio pulsante, usato per scegliere tra valori alternativi: V o F,
Si, No. Con l’opzione checked l’elemento appare selezionato.)
type=text (casella di testo)
type=password (casella con testo sostituito da asterischi)
Sfoglia ... type=file (permette di selezionare un file)
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Select e Textarea
I tag Select e Textarea permettono, rispettivamente, di realizzare dei menù a tendina o dei campi di input a più righe.
<select name=“bla bla”>
<option>Voce 1</option>
<option>Voce 2</option>
<option>Voce 3</option>
</select>
<textarea cols=x rows=y>Bla bla</textarea>