La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Il Linguaggio HTML La produzione di pagine web. Il linguaggio HTML - Cristina Fregni Il World Wide Web Il WWW è un progetto nato al CERN di Ginevra per.

Presentazioni simili


Presentazione sul tema: "Il Linguaggio HTML La produzione di pagine web. Il linguaggio HTML - Cristina Fregni Il World Wide Web Il WWW è un progetto nato al CERN di Ginevra per."— Transcript della presentazione:

1 Il Linguaggio HTML La produzione di pagine web

2 Il linguaggio HTML - Cristina Fregni Il World Wide Web Il WWW è un progetto nato al CERN di Ginevra per risolvere il problema della ricerca di documenti che sono diventati disponibili a ritmo esponenziale su Internet. I precedenti sistemi di classificazione dei documenti (Gopher e Veronica), non erano adatti ad un pubblico eterogeneo ed abituato agli ausili delle interfacce grafiche e non erano in grado di fornire strutture di ricerca sufficientemente elastiche.

3 Il linguaggio HTML - Cristina Fregni Ipertesti Nasce lidea di utilizzare il concetto di ipertesto esteso alle risorse della Rete. Vengono quindi riorganizzati i documenti in giganteschi ipertesti che guidano la consultazione mediante rimandi (link). L'ipertesto può contenere, oltre agli elementi testuali, anche immagini, suoni, filmati e qualsiasi altro oggetto digitalizzabile.

4 Il linguaggio HTML - Cristina Fregni Un ipertesto è un insieme di documenti che può essere consultato in modo non sequenziale, passando da un documento allaltro attraverso collegamenti (link).

5 Il linguaggio HTML - Cristina Fregni Il progetto WWW ha: definito un protocollo di trasmissione (HyperText Transfer Protocol): insieme di regole con cui i computer si trasmettono i dati; creato un linguaggio (HyperText Markup Language); fondato un consorzio (W3 Organization) con il compito di governare lo sviluppo futuro dello standard.

6 Il linguaggio HTML - Cristina Fregni URL (Uniform Resource Locator) E lindirizzo standard (mnemonico) per individuare una risorsa (in genere un file) di Internet. Gli indirizzi vengono definiti da uno schema di indirizzamento generale della forma: Protocollo://NomeHost.NomeDominio/Percorso/NomeFile/#NomeAncora Risorsa usata (FILE, HTTP, FTP..) Indica il nome simbolico del server (WWW) e il nome del dominio (gruppo di server dello stesso nodo). L'ultima parte identifica: con due lettere la nazione di appartenenza; con tre lettere il tipo di organizzazione cui si fa riferimento (COM, EDU, GOV). Pathname del file Segnalibro allinterno del file

7 Il linguaggio HTML - Cristina Fregni ASSOLUTI: quando definiscono lindirizzo completo di una risorsa. Hanno la sintassi precedentemente indicata; RELATIVI: se descrivono la destinazione del collegamento relativamente alla posizione corrente della pagina sorgente sul server Web. Gli URL per i collegamenti ipertestuali possono essere:

8 Il linguaggio HTML - Cristina Fregni I nomi dei file per indicare la Home Page di un sito Internet esiste un identificativo particolare: index.htm o default.htm. Se questo file è presente nella directory del sito sul server, esso viene aperto automaticamente quando lutente specifica lindirizzo del sito; alcuni sistemi operativi che gestiscono i server Internet (Unix e Linux) sono case sensitive e non supportano i nomi lunghi per i file, quindi è conveniente utilizzare lettere minuscole e nomi di 8 caratteri al massimo per i file. Sono di norma liberi ed hanno estensione.htm oppure.html è utile comunque considerare che:

9 Il linguaggio HTML - Cristina Fregni I Browsers Per poter consultare il file in formato HTML occorre uno specifico programma (BROWSER) in grado di interpretare correttamente la sintassi del linguaggio. Il compito del browser è quello di leggere gli ordini contenuti nel documento e impaginare sul monitor il documento stesso. Può capitare che browser diversi rappresentino in maniera diversa lo stesso documento, ciò può dipendere da: una diversa interpretazione della sintassi; da errori presenti nel browser; dal mancato allineamento del browser allo standard.

10 Il linguaggio HTML - Cristina Fregni LHyperText Markup Language È un linguaggio di formazione delle pagine, non un linguaggio di programmazione; È un linguaggio statico nato solo per visualizzare informazioni; I documenti scritti in HTML sono normali file di testo, visualizzabili e modificabili con semplici programmi editor; Esistono molti editor, alcuni molto potenti, specializzati nella scrittura di documenti HTML che aiutano l'operatore nella corretta stesura dei documenti.

11 Il linguaggio HTML - Cristina Fregni Gli elementi del linguaggio I file scritti in HTML hanno estensione.HTM o.HTML; Al contenuto di questi file vengono aggiunti dei TAG (marche, contrassegni) che consentono di impostare caratteristiche particolari per il testo contenuto tra i tag; I tag sono racchiusi tra le parentesi angolari ' ' Esiste sempre un tag iniziale ( ) ed un tag finale ( );

12 Il linguaggio HTML - Cristina Fregni La struttura della pagina HTML La mia prima Home Page Questa è la prima pagina web testo o elementi ulteriori PAGINAWEBPAGINAWEB intestazione corpo posizione errata

13 Il linguaggio HTML - Cristina Fregni Intestazione Contiene notizie dichiarative, informative o di impostazione globale del documento. Questa sezione inizia sempre con il tag e termina con.

14 Il linguaggio HTML - Cristina Fregni HEAD Il tag TITLE I tag META I CSS (Cascade Style Sheet) o fogli di stile Codice di programmazione Javascript, VBScript, PHP, ASP… In questo tag vi sono informazioni di impostazione della finestra e può contenere:

15 Il linguaggio HTML - Cristina Fregni TITLE Lelemento … viene visualizzato solitamente dai browser nella barra del titolo della finestra; In caso di salvataggio dellURL il tag TITLE dà il nome al collegamento; Viene utilizzato da alcuni motori di ricerca per indicizzare la pagina e trovare le parole chiave. Ad ogni pagina web può essere associato un titolo che ne descrive il contenuto.

16 Il linguaggio HTML - Cristina Fregni I tag META I tag META sono stati creati per descrivere il documento agli occhi degli spider, i software usati dai motori di ricerca per indicizzare le pagine e inserirle, pronte per essere recuperate nei database. Attraverso questi tag il motore di ricerca ha le informazioni necessarie per catalogare la pagina.

17 Il linguaggio HTML - Cristina Fregni KEYWORDS Le parole chiave sono i termini che descrivono il contenuto della pagina, sono quelli che lutente inserisce come chiave di ricerca. È attraverso questi termini che la pagina potrà essere trovata. DESCRIPTION Questa frase apparirà (nella maggior parte dei motori di ricerca) come titolo alla fine della ricerca. Attraverso queste parole lutente deciderà se visitare o meno la nostra pagina.

18 Il linguaggio HTML - Cristina Fregni AUTHOR Poco usato, ma previsto dal W3C, per segnalare lautore della pagina html, spesso contiene anche lindirizzo , lhomepage, lURL e altre informazioni. GENERATOR Non indispensabile, indica il nome del software usato per costruire la pagina. Tutti i programmi che aiutano a costruire una pagina HTML si auto-inseriscono in questo tag.

19 Il linguaggio HTML - Cristina Fregni I formati delle immagini GIF(Graphics Intercanghe Format), formato usato per le immagini grafiche, utilizzato anche per comporre brevi sequenze di immagini (GIF animate); JPG(Joint Photographic Experts Group), formato utilizzato per le immagini di tipo fotografico; PNG(Portable Network Graphics), formato di compressione di immagini destinato a sostituire il formato GIF rispetto al quale presenta miglioramenti e maggiore compressione. Le immagini utilizzate nelle pagine web devono avere i seguenti formati:

20 Il linguaggio HTML - Cristina Fregni La rappresentazione dei colori Il linguaggio HTML utilizza una combinazione dei tre colori fondamentali RGB (Red, Green, Blue) per limpostazione dei colori nei vari elementi delle pagine. Tali colori vengono indicati attraverso 3 numeri, compresi ciascuno tra 0 e 255, che specificano la gamma cromatica del rosso, del verde e del blu. I valori devono essere scritti in formato esadecimale e quindi variano da 00 a FF. Ad esempio: nero biancoFF FF FF rossoFF verde00 FF 00 blu00 00 FF E possibile usare anche un nome simbolico corrispondente al valore esadecimale utilizzando unapposita tabella.

21 Il linguaggio HTML - Cristina Fregni I commenti Per documentare il codice della pagina HTML, in vista di successive revisioni, lautore può inserire commenti che vengono ignorati dal browser. Le righe di commento sono delimitate dalla coppia di tag:. I commenti possono essere formati da una o più righe.

22 Il linguaggio HTML - Cristina Fregni Corpo Contiene il documento vero e proprio con tutti gli elementi caratteristici di un ipertesto. Inizia sempre con il tag e termina con, tutto ciò che viene scritto allesterno dei due tag non verrà visualizzato.

23 Il linguaggio HTML - Cristina Fregni BODY A questo tag si possono aggiungere attributi per limpostazione dei colori di pagina e testo: Attributi di BODYImposta... BGCOLOR=rrggbb il colore dello sfondo; BACKGROUND=URL-file-immagine una immagine di sfondo; LINK=rrggbb il colore del link VLINK=rrggbb il colore del link visitato; ALINK=rrggbb il colore del link attivo; TEXT=rrggbb il colore del testo;

24 Il linguaggio HTML - Cristina Fregni Il testo Linserimento di testo si effettua digitando una o più frasi allinterno del corpo della pagina e completandolo con i tag di formattazione. Il testo di un documento HTML è visualizzato dal browser in modo da riempire lo spazio disponibile sullo schermo (word-wrapping). Il browser quindi non riconosce più di uno spazio o i ritorni a capo utilizzati durante lediting del testo.

25 Il linguaggio HTML - Cristina Fregni I caratteri speciali CarattereCodice spazio virgolette" èè ÈÈ éé minore< maggiore> Per inserire caratteri speciali e simboli particolari (es.:, segni e accenti aggiunti agli altri caratteri per motivi di pronuncia) in modo che siano visualizzati da tutti i browser, si impiegano le character entity dellHTML, ad esempio:

26 Il linguaggio HTML - Cristina Fregni I paragrafi : inserisce un ritorno a capo per linterruzione della riga; … : specifica linizio di un nuovo paragrafo creando una porzione di testo separata dalle altre da una riga di spazio ; … : permette linserimento di testo preformattato, cioè che viene visualizzato esattamente come scritto nel file HTML; : inserisce una riga orizzontale;

27 Il linguaggio HTML - Cristina Fregni La formattazione del testo … : per il grassetto (Bold); … : per il testo in corsivo (Italic);... : per il sottolineato (Underline);... : permette di impostare i titoli. Vi sono sei livelli di intestazione che vanno da n=1, per il primo livello (con maggiore dimensione di carattere), fino a n=6 per il sesto livello. Solitamente è necessario differenziare le dimensioni dei caratteri per distinguere il titolo dal resto del testo o per definire sottotitoli o elementi testuali evidenziati. HTML dispone dei seguenti tag:

28 Il linguaggio HTML - Cristina Fregni Font dei caratteri LHTML permette di definire il font di un testo racchiudendolo nei tag … e specificando i suoi attributi, descritti nella tabella seguente: Attributi di FONTDefinisce.. FACE=font il tipo di font da applicare. Se il font non è installato nel computer, il browser utilizza quello predefinito. SIZE=n le dimensioni indicate in modo assoluto da 1 a 7, o relativo aumentando (+n) o diminuendo (-n) il valore di default (in genere 4). COLOR=rrggbb il colore con il formato RGB.

29 Il linguaggio HTML - Cristina Fregni Le liste E possibile definire due diversi tipi di liste che vengono classificati in elenchi puntati: Elenco non ordinato (unordered list) Elenco numerato (ordered list) primo punto secondo punto primo punto secondo punto

30 Il linguaggio HTML - Cristina Fregni Visualizzazione di immagini Per includere unimmagine nel documento si deve usare il tag: LURL può essere assoluto o relativo. Il file immagine è memorizzato separatamente dal documento HTML. In genere tutte le immagini di un sito web vengono inserite in una apposita cartella (images).

31 Il linguaggio HTML - Cristina Fregni Attributi di IMGDefinisce… WIDTH=nn e HEIGHT=nn la larghezza e laltezza occupate dallimmaginenella pagina. Vengono indicate in pixel oppure in percentuale (n%) rispetto allo schermo. ALT (ALTernate text) il testo visualizzato: durante il download del file; in caso di mouseover; al posto dellimmagine quando non viene visualizzata. BORDER=n la larghezza del bordo in pixel. ALIGN= RIGHT|LEFT come è visualizzato il testo intorno allimmagine.

32 Il linguaggio HTML - Cristina Fregni I collegamenti ipertestuali La principale caratteristica di un ipertesto è la possibilità di consultare il documento in modo non sequenziale attraverso luso di collegamenti ad altri oggetti o pagine. Con i link si effettuano riferimenti a file remoti (esterni) o ad altre parti del documento stesso (interni). Il link appare sulla pagina come unimmagine, unanimazione o semplicemente un testo di norma evidenziato con sottolineatura e colore diverso, inoltre passando su di esso il puntatore del mouse si trasforma in mano indicando che si può attivare il link premendo con il tasto del mouse.

33 Il linguaggio HTML - Cristina Fregni I link esterni Sono collegamenti ad altri documenti HTML, oggetti multimediali o servizi Internet. Per realizzare un link si utilizza il tag: descrizione Documento a cui si vuole fare riferimento Testo/immagine che permette di collegarsi al documento di riferimento

34 Il linguaggio HTML - Cristina Fregni OggettoURL File nella stessa directory dello stesso server nome-file.htm Sito internet remotohttp://indirizzo-internet Invio di messaggio di posta elettronica LURL si può riferire ad oggetti diversi: Pagina1 HTML Pagina2 HTML Sito web remoto Gestore posta elettronica

35 Il linguaggio HTML - Cristina Fregni I link interni Sono collegamenti ad una determinata posizione dello stesso documento HTML. Vengono utilizzati quando i documenti da visualizzare sono molto lunghi. Si inseriscono specifiche ancore per muoversi in modo mirato allinterno del documento garantendo una migliore leggibilità del documento stesso.

36 Il linguaggio HTML - Cristina Fregni Lancora dovrà essere definita allinterno dello stesso documento con lattributo: Ancora a cui si vuole fare riferimento allinterno del documento Testo/immagine che permette di collegarsi al punto di riferimento nel documento I link interni si indicano con il tag: descrizione Ancora a cui si fa riferimento nel documento

37 Il linguaggio HTML - Cristina Fregni Doc1 … Vai alla fine Torna su Doc2 I link possono anche essere fatti ad un punto specifico di un altro documento.

38 Il linguaggio HTML - Cristina Fregni Le Tabelle organizzare i dati in modo ordinato inserendoli in una griglia; creare layout di pagina complessi, posizionando i diversi oggetti multimediali in posizioni individuate dalle righe e colonne della tabella stessa. Nelle pagine web sono impiegate per:

39 Il linguaggio HTML - Cristina Fregni NellHTML, la descrizione di una tabella è racchiusa nel tag: … e nei seguenti elementi annidati, che ne definiscono le componenti (righe e colonne): Tag annidato in TABLEDelimita allinterno della tabella… … (Table Row) una singola riga … (Table Data) Una singola cella allinterno di una riga … (Table Heading) Lintestazione di una colonna

40 Il linguaggio HTML - Cristina Fregni Il formato di una tabella può essere modificato mediante gli attributi principali elencati di seguito: AttributoImposta… BORDER=n il bordo della tabella, n ne definisce lo spessore, quando è 0 la tabella risulta senza bordi. BORDERCOLOR e BGCOLOR=rrggbb il colore dei bordi e quello interno della tabella. ALIGN= RIGHT|CENTER|LEFT lallineamento della tabella nella finestra. WIDTH=nn(%)la larghezza della tabella in pixel o in percentuale. CELLSPACING=nlo spazio tra le celle. CELLPADDING=nlo spazio allinterno delle celle.

41 Il linguaggio HTML - Cristina Fregni Anche il formato delle celle (definite con i tag e ) può essere modificato mediante gli attributi: AttributoImposta… BORDERCOLOR e BGCOLOR=rrggbb il colore dei bordi e quello interno della cella. ALIGN= RIGHT|CENTER|LEFT lallineamento orizzontale del testo nella cella. VALIGN= TOP|MIDDLE|BOTTOM lallineamento verticale del testo nella cella. WIDTH=nn(%)la larghezza della cella in pixel o in percentuale. COLSPAN=n e ROWSPAN=n lunione in orizzontale o verticale delle celle, n ne indica il numero.

42 Il linguaggio HTML - Cristina Fregni I Moduli Sono contenitori di elementi HTML che realizzano una Interfaccia Grafica per lUtente (GUI) e gli permettono di interagire con il sistema In questo modo lutente può operare scelte, fornire risposte, inserire dati.

43 Il linguaggio HTML - Cristina Fregni Linterazione tramite i form avviene attraverso due fasi: creazione del form con i suoi elementi e attributi per ricevere i dati in input; elaborazione dei dati che può avvenire: direttamente sul client tramite programmi di scripting; al momento della sottomissione del form, quando i dati vengono inviati ad un programma di script del server.

44 Il linguaggio HTML - Cristina Fregni Per inserire un form si usa il tag doppio: elementi form i cui attributi, descritti nella tabella seguente, specificano il tipo di comunicazione tra il browser e i programmi eseguiti sul server. AttributoDefinisce… NAME=nomelidentificatore del modulo. ACTION=URLlURL del programma che elabora i dati o un indirizzo di . METHOD= GET|POST il metodo di trasmissione dei dati tra browser e server. GET – tutti i dati dei campi del modulo sono trasmessi in ununica variabile stringa (query_string), lunga al massimo 256 caratteri, aggiungendoli allURL dello script; POST – i dati vengono inviati al server in modo autonomo nel corpo del messaggio HTTP per diventare linput dellapplicazione remota.

45 Il linguaggio HTML - Cristina Fregni Gli elementi dei moduli Per inserire un campo in un modulo si deve annidare nellelemento FORM il tag singolo con i principali attributi descritti di seguito: AttributoDefinisce… NAME=nome il nome per richiamare loggetto durante lelaborazione dei dati. VALUE=valoreil valore iniziale del campo. TYPE= TEXT|PASSWORD|HIDDEN |CHECKBOX|RADIO |BUTTON|SUBMIT|RESET il tipo di funzionalità svolta dalloggetto-campo.

46 Il linguaggio HTML - Cristina Fregni Caselle di Testo Valore TYPE Caselle di testo Funzioni Aspetto nel Browser TEXTa singola linea Input di una stringa digitata dallutente nel browser PASSWORDpassword Input di dati nascosti durante la digitazione HIDDENnascoste Invio di parametri al server definiti dal programmatore nellattributo VALUE e non visualizzati allutente Hanno la funzione di raccogliere i dati digitati dallutente, possono essere dei seguenti tipi:

47 Il linguaggio HTML - Cristina Fregni Pulsanti di Comando Valore TYPE PulsanteLevento click(): Aspetto nel Browser BUTTONnormale deve definirlo il programmatore con un linguaggio di script SUBMITinvio dei dati provoca linvio dei dati dal browser al programma del server web RESET cancellazione dati provoca la cancellazione di tutti i dati digitati Permettono di eseguire alcune azioni associate al loro evento predefinito (click) e dispongono di funzionalità diverse:

48 Il linguaggio HTML - Cristina Fregni Caselle di Selezione e Pulsanti di Opzione Valore TYPE CampoLevento click(): Aspetto nel Browser CHECKBOX casella di selezione provoca la selezione della casella RADIO pulsante di opzione causa la scelta del pulsante eliminando la selezione negli altri Permettono allutente di fare più (checkbox) o una sola scelta (radio button) allinterno di voci predefinite. Si devono utilizzare i seguenti valori degli attributi:

49 Il linguaggio HTML - Cristina Fregni Caselle di selezione e pulsanti di opzione devono essere inseriti in un gruppo di campi individuato da un insieme di tag separati, ma con valore dellattributo NAME comune. In entrambi i controlli: il valore inviato al server è definito dallattributo VALUE; la presenza dellattributo CHECKED, determina una selezione di default.

50 Il linguaggio HTML - Cristina Fregni Caselle di riepilogo Consentono di definire una lista mediante lelemento doppio … che include un elenco di valori inseriti nei tag singoli.

51 Il linguaggio HTML - Cristina Fregni il dato trasmesso al server è quello impostato dal programmatore nellattributo VALUE di OPTION, sulla base della scelta fatta dallutente nella lista; per impostare un elemento come selezionato, si deve aggiungere a OPTION lattributo SELECTED; per poter scegliere più di una voce occorre aggiungere a SELECT lattributo MULTIPLE. In questo tipo di controllo :

52 Il linguaggio HTML - Cristina Fregni Aree di Testo Permettono di far inserire testo allutente come allinterno di un editor, ammettendo quindi la composizione di un testo su più righe. Si definisce con il tag doppio: …

53 Il linguaggio HTML - Cristina Fregni AttributoDefinisce… NAMEil nome per richiamare loggetto durante lelaborazione dei dati. ROWS=nil numero di righe visibili. COLS=nla larghezza in caratteri. WRAP= virtual/off se il testo va a capo automaticamente o solo quando lutente preme INVIO. Gli attributi che si possono utilizzare nellarea di testo sono indicati nella seguente tabella:

54 Il linguaggio HTML - Cristina Fregni Formattazione di un Form Il formato di un modulo può essere modificato inserendo nella sua definizione i tag o attributi descritti nella tabella seguente: Inserire…Per…. Etichetta cornice Elementi del form da raggruppare raggruppare un insieme di elementi del form in una cornice. Valore etichetta inserire unetichetta. Si associa a un altro controllo mediante gli attributi ID del campo e della label. TABINDEX determinare lordine di input dei dati. Lattributo va inserito nel tag. Il valore 1 determina il campo con il focus.


Scaricare ppt "Il Linguaggio HTML La produzione di pagine web. Il linguaggio HTML - Cristina Fregni Il World Wide Web Il WWW è un progetto nato al CERN di Ginevra per."

Presentazioni simili


Annunci Google