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.
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.
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.
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.
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)
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).
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>).
Head e Body Un documento Html ha la seguente struttura: <HTML> <!DOCTYPE HTML > Doctype (Opzionale) <HEAD> </HEAD> Intestazione (le istruzioni vanno inserite tra i due tag) <BODY> Corpo del documento (le istruzioni vanno inserite tra i due tag) </HTML> </BODY>
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.
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.
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>
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.
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>.
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 ).
<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.)
<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.
<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.
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)
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.
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.
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.
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.
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>
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>
Liste Le liste (elenchi), puntate o numerate, si realizzano, rispettivamente, con i seguenti tag: <UL> </UL> <LI> uno </LI> <LI> due </LI> <LI> tre </LI> uno due tre <OL> </OL> <LI> uno </LI> <LI> due </LI> <LI> tre </LI> 1) uno 2) due 3) tre
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.
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>
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;
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.
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)
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).
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.
Input type type=button (pulsante generico) ok 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.) abc **** type=text (casella di testo) type=password (casella con testo sostituito da asterischi) file.txt Sfoglia... type=file (permette di selezionare un file)
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> Bla bla