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ò
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ò
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ò
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ò
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ò
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: Doctype (Opzionale) <!DOCTYPE HTML …> Intestazione (le istruzioni vanno inserite tra i due tag) <HEAD> </HEAD> Corpo del documento (le istruzioni vanno inserite tra i due tag) <BODY> </BODY> </HTML> Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Doctype Fornisce informazioni sul documento: il tipo di linguaggio utilizzato (solitamente HTML), se il documento è pubblico, se fa riferimento alle specifiche W3C, …) Il tag doctype, praticamente ignorato dai vecchi browser, attualmente è sfruttato per ottimizzare la visualizzazione della pagina. Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
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ò
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Head <HEAD> Il titolo della pagina web <TITLE>Bla bla bla … </TITLE> Foglio di Stile associato <LINK REL=stylesheet type=text/css href=miofile.css> Istruzioni Javascript <SCRIPT type=text/javascript src=miofile.js> Reindirizzare verso una nuova pagina <META HTTP-EQUIV=refresh CONTENT=“2;url=index1.html”> Descrizione del contenuto della pagina (Mot. Ricerca) <META NAME=description CONTENT="La descrizione del sito"> Termini associati alla pagina (Mot. Ricerca) <META NAME=keywords CONTENT=“scuola, didattica, lezioni"> </HEAD> Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
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ò
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ò
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ò
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ò
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ò
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ò
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ò
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ò
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ò
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ò
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) <A href=“file.html”>bla bla</A> 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ò
<A href=“file.html”><IMG src=immagine.gif></A> 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ò
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Liste Le 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 <OL> <LI> uno </LI> <LI> due </LI> <LI> tre </LI> </OL> uno due tre Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
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ò
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> <td>aaaa</td><td>bbbb</td> </table> Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
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ò
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ò
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Colori I 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ò
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Form Mediante 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ò
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Input Il 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ò
Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò Input type type=button (pulsante generico) type=submit (pulsante di invio dei dati del modulo) type=reset (pulsante di azzeramento dei dati, senza invio) 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) type=file (permette di selezionare un file) Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò
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> Prof. Antonio Scarvaglieri - Liceo "F. De Sanctis" - Paternò