Il Linguaggio HTML Hyper Text Markup Language. HTML è l'acronimo di HyperText Markup Language che tradotto in italiano suona come Linguaggio di Contrassegno.

Presentazione sul tema: "Il Linguaggio HTML Hyper Text Markup Language. HTML è l'acronimo di HyperText Markup Language che tradotto in italiano suona come Linguaggio di Contrassegno."— Transcript della presentazione:

1 Il Linguaggio HTML Hyper Text Markup Language

2 HTML è l'acronimo di HyperText Markup Language che tradotto in italiano suona come Linguaggio di Contrassegno Ipertestuale. È un linguaggio di codifica (markup) pensato per la creazione di ipertesti. Che cosa è un ipertesto? È un sistema di organizzazione delle informazioni in una struttura non sequenziale, bensì reticolare ed è costituito da un insieme di unità informative (i nodi) e da un insieme di collegamenti (link) che da un nodo permettono di passare a più nodi. L’HTML fa parte della famiglia dei linguaggi dichiarativi (<> imperativi) (conta più il cosa del come)linguaggi dichiarativi Il Linguaggio HTML

3 Mentre un romanzo lo leggi dalla prima pagina all'ultima secondo un ordine rigidamente sequenziale (a meno che tu non riesca a trattenerti leggendo il finale anzitempo) l'ipertesto ti consente di saltare da un documento all'altro permettendoti di seguire il filo logico dei tuoi pensieri. L'ipertesto viene definito un sistema non lineare (non sequenziale), proprio perché consente di saltare da un documento ad un altro senza che sia necessario seguire un percorso predefinito.

4 Il concetto di markup Markup non è altro che un insieme di codici, o “tag” inseriti nel testo, per istruire il programma utilizzato sulla struttura e sul modo di presentazione del testo. L’uso più comune del markup elettronico stà nel cambio dell’aspetto del testo via formattazione, cioè “marcando” alcune parti di esso come grassetto o corsivo, cambiando le dimensioni delle lettere o dei margini, per menzionare solo alcuni esempi. Ogni word processor utilizza un linguaggio di markup per il controllo della formattazione e dell’aspetto dei documenti, ma questo nella maggior parte dei casi non è visibile all’utente.

5 Limiti dell’HTML Linguaggio di rappresentazione non modificabile (perché set di marcatori predefinito); linguaggio scarsamente strutturato, dotato di una sintassi poco potente, incapace di descrivere fenomeni complessi o informazioni altamente organizzate; predilezione per marcatori stilistici più che strutturali; solo link unidirezionale 1 ; impossibilità di un controllo elastico sull’aspetto del documento (variabile in relazione alle tecnologie del visitatore del sito); browser, che hanno iniziato l’infelice pratica dell’introduzione di loro proprie e individuali “extensions” al linguaggio HTML. 1 tipi di link tipi di link

6 incominciamo…. Per produrre un documento: SCRITTURA DEL CODICE Uso di un applicativo Windows (p.e. Blocco Note). L’importante è lavorare in formato.txt cioè “solo testo” (solo uso sequenze ASCII), senza introdurre formattazioni “proprietarie”. Modificare poi l’estensione da.txt a.htm oppure.html Visualizzazione del risultato sul browser. EDITOR Uso di un applicativo specifico (p.e. editor visuale con menù a tendina e bottoni grafici tipo un word processor) in grado di manipolare l’HTML (conversione automatica delle operazioni di interfaccia in istruzioni di codice HTML). Visualizzazione del risultato anche in locale.

7 GLI EDITOR Editor di puro testo aiutano a creare file richiamando i tag e gestendo link.( Arachnophilia: è un editor HTML (scritto in java) che supporta fino a 6 browser Editor WYSIWYG ( Frontpage -Dreamweaver) WYSIWYG What you see is what you get Ciò che si vede è ciò che si ottiene Quindi è la capacità di un programma grafico di visualizzare esattamente sullo schermo la pagina una volta stampata (pubblicata).

8 TAGS HTML <> Istruzioni scritte all’interno dei simboli Istruzioni attive fino a quando non vengono disattivate ripetendo l’istruzione stessa preceduta dal simbolo / e cioè: Questo modo di scrivere le istruzioni prende il nome di tag.

9 Il tag scritto all’inizio viene detto tag iniziale Il tag viene posto alla fine della pagina HTML Tra e scrivere e (contiene informazioni utili agli utenti e ai motori di ricerca) All’interno della sezione HEAD può essere inserito il paragrafo (che identifica il contenuto del documento). Sotto la sezione HEAD viene inserita la sezione con il relativo tag di chiusura. STRUTTURA BASE HTML

10 RISULTATO: <html><head><title></title></head><body></body></html> Sintassi per un commento (ovunque nel file): Utilizzati per segnalare delle sezioni di codice o altre informazioni utili a chiunque utilizzi la pagina HTML NON interpretate da BROWSER Utilizzare la scrittura indentata (soprattutto per programmi particolarmente lunghi)

11 USO PRINCIPALI TAG FORMATTAZIONE STANDARD DI UN TESTO INTESTAZIONI DI SEZIONE: All’interno della sezione BODY inserire Intestazioni HTML: dal livello 1 (il più grande) al livello 6 (il più piccolo): Permettono la scrittura in diverse forme di carattere (titolo1, titolo2, sottotitolo......)

12 USO PRINCIPALI TAG PARAGRAFI:. Per strutturare il testo in paragrafi:...chiudere poi con il tag. align Allineamento: attributo align=“left|right|center|justify” Il tag inserito al termine della riga permette il ritorno a capo. Non ha tag di chiusura. Fa ripartire il testo dal margine sinistro. grassetto corsivo sottolineato barrato enfasi forte Combinazione anche di più tag assieme  importante creare codice nidificato Il tag consente di aggiungere degli spazi (come fosse un tabulatore)

13 USO PRINCIPALI TAG UTILIZZO DI COLORI E SFONDI: face, size, color Il tag con i suoi attributi face, size, color face face =“Arial | Times New Roman | C o u r i e r n e w | Comic” size size assume valori interi da 1 a 7 color color espresso con colori tipo black, red, yellow oppure con una combinazione di 6 numeri o lettere (da A a F) preceduti da #... Esempio un azzurro è “#6473ef”, un rosa "#cc3677“ Tabella dei colori

14 Nel tag per aggiungere colore allo sfondo Attribuire un colore anche al testo e personalizzare il colore dei collegamenti (link normali-visitati-attivi) ( collegamenti attivi ) ALTRI COLORI: green, gray, olive, maroon, navy, red, blue, purple, teal, fuchsia, aqua Tabella dei colori ai siti http://www.molly.com/molly/webdesign/136_colors.html http://www.molly.com/molly/webdesign/136_colors.html http://www.molly.com/molly/webdesign/colorchart.html

15 I file html sono ASCII puri. Vengono definiti un set di caratteri speciali chiamati entità per aggirare il problema dei caratteri speciali. Possono avere due forme: Entità con nome ed iniziano con la & e terminano con il ; es : " « © Le entità con numero iniziano con la & aggiunte con il # e termina con il ; es: ‚ õ Per scrivere la parola poiché : poiché oppure poiché CARATTERI SPECIALI: USO PRINCIPALI TAG

16 APICE E PEDICE: < <> > >< ≤ ≤≤ ≥ ≥≥ ° °° à àà é éé è èè ì ìì ò òò ù ùù & && spazio €€ CARATTERI SPECIALI:

17 USO PRINCIPALI TAG ELENCHI PUNTATI E NUMERATI: (molto utile il loro utilizzo in una pagina web) Elenco non ordinato  due diversi tag: che comunica al documento che sta cominciando una lista e vicino ad ogni singolo elemento della lista stessa:<body> I miei studenti preferiti<ul> pino gino lino</ul></body> Elenco numerato  (al posto di ) e vicino ad ogni singolo elemento della lista stessa Attributo type type = “disc | circle | square” per type type=“A | a | I | i | 1” per

18 USO PRINCIPALI TAG Inserimento di righe orizzontali: Non ha tag di chiusura Controllare la lunghezza della riga: attributo width: oppure espresso in pixel… alignnoshade, size Altri attributi: align (left|right|center), noshade, size (numero) ALLINEAMENTO: Il tag permette di “dividere” lo spazio disponibile Attributo: align align = “center | left | justify | right”

19 COLLEGAMENTO IPERTESTUALE: Documenti HTML sono ipertesti  il funzionamento è in massima parte dovuto agli HyperLink o ancoraggi, il cui tag specifico è (Anchor) con chiusura Al suo interno è possibile inserire testo, immagini o altri elementi multimediali. Perché funzioni, deve essere associato ad altri attributi: href Il più importante di questi è href (abbreviazione di Hypertext Reference) contenente l'URL o la pagina da raggiungere. Sintassi : testo del collegamento

20 Altri collegamenti E’ possibile creare link a qualsiasi risorsa (immagini, testi, audio, video, programmi) semplicemente usando l’estensione esatta del file (che farà aprire il programma necessario a leggere il file) clicca qui per spedirmi un messaggio : link ad un indirizzo di posta elettronica (il link attiva il software necessario all’invio di messaggi di posta)

21 Link interni al documento Alla parte di testo che si vuole raggiungere tramite link deve essere assegnato un nome preciso (nome dell’ancora): Questo è l’inizio pagina Il link deve far riferimento a questa sezione: se clicchi qui vai alla sezione “Inizio pagina”

22 Link a punti precisi Il sistema delle ancore può anche essere utilizzato fra pagine diverse, sempre specificando tramite il nome dell’ancora e con il link. Se però “nomeancora” è in un documento esterno rispetto al link avremo:

23 Le Tabelle: creazione e strutturazione si passa alla seconda riga con le relative celle avendo cura di usare il tag ……. ……. all’interno dei quali si deve definire il contenuto della tabella. si indicano le varie celle facendo uso: del tag per le intestazioni di cella = table header del tag per i dati della cella = table data Per creare una tabella in HTML si usano i tag: Per definire una tabella si procede nel modo seguente: si realizza la prima riga facendo uso del tag = table row

24 Righe e colonne “table row” per ogni riga “table data” per ogni cella della riga Esempio: tabella a 2 righe e 3 colonne: testo della cella testo della cella

25 Attributi della tabella BORDER per inserire un bordo BORDERCOLOR per il colore del bordo BGCOLOR per il colore di sfondo BACKGROUND per un immagine come sfondo ALIGN per l’orientamento CELLSPACING per lo spazio fra il bordo delle celle e il bordo della tabella CELLPADDING per lo spazio fra il bordo della cella e gli elementi al suo interno widthheight border Dimensioni definite con width (larghezza) e height (altezza); possono essere espresse in pixel o in percentuale della pagina, il bordo (border) con un numero: </table> </table>

26 Le Tabelle: formattazione Per aggiungere una didascalia alla tabella: e subito dopo il tag che può essere disposto sopra e/o sotto la tabella con l’attributo align align = “top | bottom” Osservazioni: Se larghezza tabella espressa in pixel  a qualsiasi risoluzione, la misura rimane invariata. Se larghezza tabella espressa in percentuale:  risulta diversa a seconda della risoluzione video dell’utente es.: risoluzione video di 640x480  tabella di circa 320 pixels risoluzione di 800x600  tabella di circa 400 pixel. In generale e' meglio mantenere il controllo assoluto sulla grandezza delle tabelle adottando una misurazione in pixel piuttosto che in percentuali.

27 Altri attributi del tag align align = “left | center | right | justify”  allineamento orizzontale valign valign =“top | middle | bottom | baseline”  allineamento verticale Baseline esamina una sola cella per riga e ne allinea il contenuto rispetto ad una linea di base comune… height height = espressa in pixel  altezza colspan colspan = numero per accorpare orizzontalmente più celle in un’unica cella rowspan rowspan = numero per accorpare verticalmente più celle in un’unica cella Le Tabelle: formattazione Clicca qui per alcuni esempi di allineamento

28 Le immagini I browser (Netscape, Internet Explorer, Opera ecc.) riconoscono molti formati grafici, anche se sono tre quelli più utilizzati: 1. GIF (Graphics Interchange Format) 2. JPEG (Joint Photographics Experts Group)  jpg 3. PNG (Portable Network Graphics), (estensione.PNG); è stato studiato per applicazioni web) Si utilizza il tag (senza tag di chiusura): in questo tag staranno tutte le informazioni. scr Attributo scr = permette di visualizzare l’immagine: SRC sta per Search ed è il percorso dal quale il browser ricava l'immagine (in questo caso "immagine.gif") ATTENZIONE: accertarsi di scrivere il percorso corretto; in caso contrario il visitatore visualizzerebbe solo un’icona che indica l’impossibilità di scaricare l’immagine. E’ consigliabile utilizzare sempre elementi di ottima qualità grafica, altrimenti si potrebbe impiegare troppo tempo per scaricare l’immagine.

29 Le immagini L'elemento è corredato da diversi attributi: widthheight per modificare le dimensioni (consigliati programmi di grafica) si può disporre degli attributi width e height : altalt= Attributo alt consente di inserire un testo accanto all’immagine: alt=”testo alternativo” align Attributo align per definire posizione dell'immagine rispetto al testo align align =“top” testo allineato in alto align align =“middle” testo allineato in centro align align =“bottom” testo allineato in basso hspace Altri attibutihspace = spaziatura orizzontale (in pixel) vspace vspace = spaziatura verticale (in pixel) border border =in pixel Un’immagine può essere usata anche come sfondo:

30 Immagini e link Una immagine può funzionare come link Normalmente le immagini che richiedono link sono circondate da un bordo il cui spessore può essere cambiato con l’attributo BORDER nel tag IMG>

31 AUDIO I tipi di file molto comuni sono i file AU ( di Sun Microsystem) usati in tutte le piattaforme, ma con una qualità scadente. Quelli di qualità migliore, ma dedicati sono il formato AIFF per il macintosh e WAVE per il Windows. Infine il formato RealAudio viene utilizzato per ascoltare direttamente dal server, senza dover scaricare direttamente tutto il brano. Vedi esempio link nel file esempio3.html ascolta Volare di Domenico Modugno

32 Suoni e musiche di sottofondo I file audio supportati sono il MIDI e il MP3 Inserito all’interno di : (solo con Explorer) fa partire il suono all’apertura della finestra.

33 I Frame: Definizione e utilizzo Una pagina Web può essere suddivisa in diverse finestre dette frame (cornici) I frames sono strumenti entrati ormai nella consuetudine del web e vengono usati per mantenere ordinata la struttura del sito e rendere più immediata per l’utente la presentazione delle informazioni. Un punto a loro sfavore è l’incompatibilità con alcuni browser che non supportano il loro utilizzo per cui, di norma, si crea una versione del sito con frames ed una versione senza frames. E’ consigliabile non eccedere nel loro uso per non appesantire la realizzazione del sito.

34 I Frame: Fase operativa è il tag iniziale (sostituisce a tutti gli effetti il tag ) e raccoglie la descrizione dei frame presenti nella pagina. Quando la lista dei frame termina, si inserisce il tag finale Il tag serve appunto alla definizione di ogni singolo frame e non necessita di chiusura dato che esso termina quando se ne definisce uno nuovo oppure quando si usa il tag Per organizzare una pagina con frame occorre dapprima costruire e predisporre le pagine html che riempiranno i diversi frame e successivamente definire i frame all’interno della pagina principale. Analizziamo i diversi attributi di e …

35 I Frame: Fase operativa Attributi del tag : altezza in righe (pixel, percentuale oppure * automatico) larghezza in colonne (pixel, percentuale oppure * automatico) larghezza della cornice cornice colore Attributi del tag : documento da visualizzare denominazione del frame nome del frame target Se dobbiamo fare riferimento a questo frame con il tag dobbiamo inserire l’attributo target = “nome_del_frame” oppure “_blank” che apre il link in una nuova pagina

36 Ancora alcuni attributi... cornice larghezza e altezza dei margini barra di scorrimento? dimensione non modificabile contenuto in assenza di frame indirizzare i frame<body> La pagina corrente utilizza i frame. Questa caratteristica non è supportata dal browser in uso. Clicca qui.</body> I Frame: Fase operativa

37 TESTI SCORREVOLI (MARQUEE) QUESTO TESTO SCORRE behaviorscrollslide alternate L’attributo behavior può assumere i valori : scroll, slide e alternate scroll scroll è standard, slide si ferma quando raggiunge il margine, alternate fa rimbalzare il testo da sinistra verso destra. Direction : right o lest Direction : right o lest determina il verso. Scrollmount Scrollmount determina la velocità di spostamento del testo e il valore numerico ad esso assiciato corrisponde al numero di pixel per ogno movimento del testo. Scrolldelay Scrolldelay, determina la durata del passo espressa in millisecondi. Per cambiare l’aspetto del testo usare bgcolor. Heihtwidth Hspacevspace Heiht e width determina le dimensioni del riquadro che circonda il testo scorrevole. Hspace e vspace, lo spazio compreso tra i bordi e il testo

38 Altri comandi di formattazione spacer per rientro del testo (tag proprietario che funziona solo con Netscape) blink testo che lampeggia (tag proprietario che funziona solo con Netscape) marquee testo che scorre (tag proprietario che funziona solo con Explorer) multicol cols=“2”> per porre il testo in colonne (tag proprietario che funziona solo con Netscape)

39 I MODULI Fino ad ora sono state illustrate le istruzione per la creazione di pagine on-line, senza possibilità di interazione da parte dell’utente. I moduli, detti anche schede o form in inglese, trasformano le pagine web trasformandole in vere applicazioni interattive per gestire sondaggi o scelte in base ad un input a scelta. Queste istruzioni sono diventate uno standard a partire dall’ HTML 2.0 e sono supportate da tutti i moderni browser.

40 CREAZIONE DI UNA SCHEDA E’ costituita da due operazioni indipendenti:  la creazione degli elementi della scheda  la realizzazione del programma script che dovrà essere richiamato dal server ( chiamato script CGI o script) e che si occupa di elaborare le informazioni che l’ utente invia utilizzando la scheda. FORMFORM La scheda si crea con il tag e chiusura  Il form include due argomenti: METHOD METHOD ACTION ACTION  METHODGETPOST  METHOD = a GET o POST e determinano il modo in cui le informazioni verranno inviate allo script (sul server) che si deve occupare della loro elaborazione.  ACTION  ACTION : Indica lo script sul server che deve essere richiamato nel momento in cui viene inoltrata questa scheda.

41 ESEMPIO SCHEDA

42 Bisogna definire successivamente il codice HTML che definisce l’area di testo: :  Inserisci il tuo nome : INPUT è il tag più utilizzato ed accetta due attributi:  TYPENAME  TYPE E NAME type  Il type descrive il tipo di elemento : text, radio, e altri pulsanti tipo checkbox per le caselle di selezione. Se omesso per default = ad una casella testo. NAME nome=valore  Il NAME indica il nome dell’ elemento che lo script riceve dalla scheda sotto forma di una serie di coppie nome=valore

43 Campi lunghi Input Il tag Input può includere i seguenti attributi: Size Size : indica la lunghezza dei caratteri, (lo standard è pari a 20 car.) maxlength maxlength : Indica il numero di caratteri che l’utente può immettere. AREE DI TESTO:  commenti.  

44 PULSANTI OPZIONE radio INPUT TYPE=“RADIO” NAME=“W LA SQUOLA” L’attributo e: radio INPUT TYPE=“RADIO” NAME=“W LA SQUOLA” password L’attributo password evita di visualizzare quanto si scrive sul video. radio Attributo radio consente una scelta fra tante checkbox L’attributo checkbox attiva una o più caselle “Reset” Oltre che a definire un valore standard, è possibile includere un pulsante di annullamento “Reset”

45 ESEMPIO “controllo della risposta ad un quiz”

46 coloreparola chiavenotazione esadecimale arancioneorange#FFA500 blublue#0000FF biancowhite#FFFFFF gialloyellow#FFFF00 grigiogray#808080 marronebrown#A52A2A neroblack#000000 rossored#FF0000 verdegreen#008000 violaviolet#EE82EE TABELLA COLORI TORNA ALLA DIAPOSITIVA UTILIZZO DI COLORI E SFONDI