Il Linguaggio HTML

1. Il LinguaggioHTML La produzione di pagine web

2. 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 fornirestrutture di ricerca sufficientemente elastiche. Il linguaggio HTML - Cristina Fregni

3. Ipertesti Nasce l’idea 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. Il linguaggio HTML - Cristina Fregni

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

5. 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. Il linguaggio HTML - Cristina Fregni

6. URL(Uniform Resource Locator) E’ l’indirizzo 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 all’interno del file Il linguaggio HTML - Cristina Fregni

7. Gli URL per i collegamenti ipertestuali possono essere: • ASSOLUTI: quando definiscono l’indirizzo 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. Il linguaggio HTML - Cristina Fregni

8. I nomi dei file Sono di norma liberi ed hanno estensione .htm oppure .htmlè utile comunque considerare che: • 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 l’utente specifica l’indirizzo del sito; • alcuni sistemi operativi che gestiscono i server Internet (Unix e Linux) sono case sensitivee non supportano i nomi lunghi per i file, quindi è conveniente utilizzare lettere minuscole e nomi di 8 caratteri al massimo per i file. Il linguaggio HTML - Cristina Fregni

9. 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. Il linguaggio HTML - Cristina Fregni

10. L’HyperText 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. Il linguaggio HTML - Cristina Fregni

11. 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 '<' e '>' • Esiste sempre un tag iniziale (<tag>) ed un tag finale(</tag>); Il linguaggio HTML - Cristina Fregni

12. La struttura della pagina HTML <HTML> <HEAD> <TITLE>La mia prima Home Page</TITLE> </HEAD> <BODY> Questa è la prima pagina web </BODY> </HTML> <b> testo o elementi ulteriori </b> PAGINA WEB intestazione corpo posizione errata Il linguaggio HTML - Cristina Fregni

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

14. 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: Il linguaggio HTML - Cristina Fregni

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

16. 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. Il linguaggio HTML - Cristina Fregni

17. KEYWORDS <META name=“keywords” Content=“keyword1, keyword2, …”> Le parole chiave sono i termini che descrivono il contenuto della pagina, sono quelli che l’utente inserisce come chiave di ricerca. È attraverso questi termini che la pagina potrà essere trovata. DESCRIPTION <META name=“description” content=“descrizione della pagina”> Questa frase apparirà (nella maggior parte dei motori di ricerca) come titolo alla fine della ricerca. Attraverso queste parole l’utente deciderà se visitare o meno la nostra pagina. Il linguaggio HTML - Cristina Fregni

18. AUTHOR <META name=“author” content=“Nome Cognome”> Poco usato, ma previsto dal W3C, per segnalare l’autoredella pagina html, spesso contiene anche l’indirizzo e-mail, l’homepage, l’URL e altre informazioni. GENERATOR <META name=“generator” content=“blocco note di Win98”> 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. Il linguaggio HTML - Cristina Fregni

19. I formati delle immagini Le immagini utilizzate nelle pagine web devono avere i seguenti formati: • 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. Il linguaggio HTML - Cristina Fregni

20. La rappresentazione dei colori Il linguaggio HTML utilizza una combinazione dei tre colori fondamentali RGB (Red, Green, Blue) per l’impostazione 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 00 00 00 bianco FF FF FF rosso FF 00 00 verde 00 FF 00 blu 00 00 FF E’ possibile usare anche un nome simbolico corrispondente al valore esadecimale utilizzando un’apposita tabella. Il linguaggio HTML - Cristina Fregni

21. I commenti Per documentare il codice della pagina HTML, in vista di successive revisioni, l’autore 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. Il linguaggio HTML - Cristina Fregni

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

23. BODY A questo tag si possono aggiungere attributi per l’impostazione dei colori di pagina e testo: Il linguaggio HTML - Cristina Fregni

24. Il testo L’inserimento di testo si effettua digitando una o più frasi all’interno 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 l’editing del testo. Il linguaggio HTML - Cristina Fregni

25. I caratteri speciali 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 dell’HTML, ad esempio: Il linguaggio HTML - Cristina Fregni

26. I paragrafi • <BR>: inserisce un ritorno a capo per l’interruzione della riga; • <P ALIGN=LEFT|CENTER|RIGHT>…</P>: specifica l’inizio di un nuovo paragrafo creando una porzione di testo separata dalle altre da una riga di spazio; • <PRE>…</PRE>”: permette l’inserimento di testo preformattato, cioè che viene visualizzato esattamente come scritto nel file HTML; • <HR ALIGN=LEFT|CENTER|RIGHT SIZE=n WIDTH=n|n% NOSHADE>: inserisce una riga orizzontale; Il linguaggio HTML - Cristina Fregni

27. La formattazione del testo 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: • <B>…</B>: per il grassetto (Bold); • <I>…</I>: per il testo in corsivo (Italic); • <U>...</U>: per il sottolineato (Underline); • <Hn>...</Hn>: 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. Il linguaggio HTML - Cristina Fregni

28. Font dei caratteri L’HTML permette di definire il font di un testo racchiudendolo nei tag <FONT>…</FONT> e specificando i suoi attributi, descritti nella tabella seguente: Il linguaggio HTML - Cristina Fregni

29. Le liste E’ possibile definire due diversi tipi di liste che vengono classificati in elenchi puntati: Il linguaggio HTML - Cristina Fregni

30. Visualizzazione di immagini Per includere un’immagine nel documento si deve usare il tag: <IMG SRC=“URL-file-immagine” Attributi> L’URL 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). Il linguaggio HTML - Cristina Fregni

31. Il linguaggio HTML - Cristina Fregni

32. I collegamenti ipertestuali La principale caratteristica di un ipertesto è la possibilità di consultare il documento in modo non sequenziale attraverso l’uso 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 un’immagine, un’animazione 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. Il linguaggio HTML - Cristina Fregni

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

34. L’URL si può riferire ad oggetti diversi: Sito web remoto Pagina1 HTML Pagina2 HTML Gestore posta elettronica Il linguaggio HTML - Cristina Fregni

35. 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 all’interno del documento garantendo una migliore leggibilità del documento stesso. Il linguaggio HTML - Cristina Fregni

36. I link interni si indicano con il tag: <A HREF= “#nome”>descrizione</A> Ancora a cui si vuole fare riferimento all’interno del documento Testo/immagine che permette di collegarsi al punto di riferimento nel documento L’ancora dovrà essere definita all’interno dello stesso documento con l’attributo: <A NAME= “nome”> Ancora a cui si fa riferimento nel documento Il linguaggio HTML - Cristina Fregni

37. I link possono anche essere fatti ad un punto specifico di un altro documento. Doc1 <A NAME=“inizio”> <A HREF=”doc2.htm#primo”>…</A> <A HREF=”#fine”>Vai alla fine</A> <A NAME=“fine”> <A HREF=”#inizio”>Torna su</A> Doc2 <A NAME=“primo”> Il linguaggio HTML - Cristina Fregni

38. 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: Il linguaggio HTML - Cristina Fregni

39. Nell’HTML, la descrizione di una tabella è racchiusa nel tag: <TABLE> … </TABLE> e nei seguenti elementi annidati, che ne definiscono le componenti (righe e colonne): Il linguaggio HTML - Cristina Fregni

40. Il formato di una tabella può essere modificato mediante gli attributi principali elencati di seguito: Il linguaggio HTML - Cristina Fregni

41. Anche il formato delle celle (definite con i tag <TD> e <TH>) può essere modificato mediante gli attributi: Il linguaggio HTML - Cristina Fregni

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

43. L’interazione 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. Il linguaggio HTML - Cristina Fregni

44. Per inserire un form si usa il tag doppio: <FORM> elementi form </FORM> i cui attributi, descritti nella tabella seguente, specificano il tipo di comunicazione tra il browser e i programmi eseguiti sul server. Il linguaggio HTML - Cristina Fregni

45. Gli elementi dei moduli Per inserire un campo in un modulo si deve annidare nell’elemento FORM il tag singolo <INPUT> con i principali attributi descritti di seguito: Il linguaggio HTML - Cristina Fregni

46. Caselle di Testo Hanno la funzione di raccogliere i dati digitati dall’utente, possono essere dei seguenti tipi: Il linguaggio HTML - Cristina Fregni

47. Pulsanti di Comando Permettono di eseguire alcune azioni associate al loro evento predefinito (click) e dispongono di funzionalità diverse: Il linguaggio HTML - Cristina Fregni

48. Caselle di Selezione ePulsanti di Opzione Permettono all’utente di farepiù (checkbox) o una sola scelta (radio button) all’interno di voci predefinite. Si devono utilizzare i seguenti valori degli attributi: Il linguaggio HTML - Cristina Fregni

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

50. Caselle di riepilogo Consentono di definire una lista mediante l’elemento doppio <SELECT>…</SELECT> che include un elenco di valori inseriti nei tag singoli <OPTION>. Il linguaggio HTML - Cristina Fregni