1 / 65

HTML

HTML. Il linguaggio per creare pagine per il web. World Wide Web. Si basa sul protocollo http ed è la vera novità degli anni ’90. Sviluppato presso il CERN di Ginevra (da Tim Berners-Lee) è il più potente mezzo di diffusione telematica di documenti elettronici.

tatiana-pace
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Il linguaggio per creare pagine per il web

  2. World Wide Web • Si basa sul protocollo http ed è la vera novità degli anni ’90. • Sviluppato presso il CERN di Ginevra (da Tim Berners-Lee) è il più potente mezzo di diffusione telematica di documenti elettronici. • Mezzo di comunicazione globale, interattivo, multimediale e ipertestuale ha cambiato radicalmente il modo di comunicare e di lavorare.

  3. Organizzazione di un testo Accesso sequenziale

  4. Organizzazione di un ipertesto Accesso secondo legami associativi

  5. Linguaggi di markup • In un documento il markup è il codice che contiene le informazioni per la sua formattazione.

  6. Linguaggi di markup (II) • Nell’ambito dell’elaborazione elettronica dei testi sono stati creati strumenti informatici per automatizzare alcune operazioni per la creazione dei documenti. • Esistono programmi per l’elaborazione dei testi di tipo diverso. • Gli editor WYSIWYG. • Gli editor che usano il concetto di markup. • Nel caso di editor che usano il concetto di markup, un testo è costituito da due parti • Il contenuto vero e proprio. • Le “istruzioni” che specificano come il contenuto deve essere rappresentato sul dispositivo (lo schermo di un PC, ma anche per esempio una stampante). • In genere si racchiude il testo fra istruzioni chiamate tag (o etichette, o codici). • I tag sono scritti usando i normali caratteri e quindi i documenti possono essere creati usando semplici editor di testo.

  7. File Word (.doc)

  8. File Word (.doc) Aprendo il file precedente con Blocco Note si vede il formato interno di Word e non si distinguono markup.

  9. File in formato RTF (.rtf) RTF è un formato solo testo in cui si distinguono informazioni legate alla presentazione del documento e informazioni che fanno parte del contenuto.

  10. File in formato PostScript (.ps) Questo è un formato usato per la stampa. Anche in questo caso si distinguono informazioni legate alla presentazione del documento e informazioni che fanno parte del documento stesso.

  11. HTML • Gli ipertesti del web sono scritti usando il linguaggio HyperText Markup Language (HTML). • HTML non è un linguaggio di programmazione! • HTML è un linguaggio di markup e permette di descrivere la disposizione di tutti gli elementi presenti all’interno di un documento. • I documenti HTML sono dei file in formato testo (codice ASCII). • Si possono creare con degli editor di testo dando l’estensione .htm o .html. • I browser leggono i documenti HTML e li visualizzano interpretando le specifiche di formattazione in modo sequenziale.

  12. HTML: esempio <html> <head> <title>Pagina HTML di prova</title> </head> <body> Utilizzare un editor di testo: in ambiente Windows WordPad va bene, in ambiente Unix vi per esempio </body> </html>

  13. HTML: sintassi <nomecomando> informazioni </nomecomando> • Un documento HTML inizia sempre con il tag <html> e termina sempre con il tag </html>. NB: il linguaggio HTML è case-insensitive e quindi <HTML>, <html>, <Html> sono tutti tag leciti (lo stesso vale per gli altri tag). Suggerimenti: • È meglio decidere all’inizio come si scriveranno i tag ed essere consistenti. • Per analogia con XHTML (derivato dell’XML e dell’HTML che è case-sensitive) è consigliabile scrivere tutto in minuscolo.

  14. HTML: sintassi (II) <html> <head> caratteristiche del documento </head> <body> documento </body> </html>

  15. HTML: <head> <html> <head> <title>titolo del documento</title> <meta name=“keywords” content=“parole chiave qui”> <meta name=“author” content=“nome e cognome qui”> </head> ………………………… ………………………… </html>

  16. HTML: <head> • Questa sezione del documento contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto ed interpretato. • È la parte del documento dove vengono inseriti i metatag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, i fogli di stile, ecc.

  17. HTML: <body> <html> <head> <title>titolo del documento</title> </head> <body lista di opzioni> documento vero e proprio </body> </html>

  18. HTML: <body> <body bgcolor=“colore sfondo” background=“nome file con l’immagine” text=“colore testo” link=“colore link da visitare” vlink=“colore link visitato” alink=“colore link selezionato” > NB: l’ordine in cui si scrivono gli attributi non è importante.

  19. HTML: <body> bgcolor=“red” bgcolor=“yellow” bgcolor=“#00ffff” text=“#eeeeee” link=“#ffffff” background=“images/sfondo.gif” <body text= “white” link=“#cc0000” background=“images/sabbia.gif>

  20. HTML: RGB • Ogni colore può essere codificato mediante tre numeri compresi tra 0 e 255 che rappresentano le quantità di ROSSO VERDE e BLU presenti nel colore stesso. • Ogni numero compreso tra 0 e 255 deve essere trasformato nella rappresentazione esadecimale corrispondente (base 16). • Con questa codifica si possono rappresentare più di 16,7 milioni di colori diversi.

  21. HTML: RGB (II) NB: nei file HTML le codifiche esadecimali vanno scritte senza lasciare spazi vuoti tra le cifre.

  22. HTML: titoli • Il documento inserito nel <body> viene visualizzato secondo le direttive di formattazione. Per scrivere titoli si possono usare: <h1>titolo1</h1> <h2>titolo2</h2> …… <h6>titolo6</h6> Per andare a capo: <br> <p>……….</p>

  23. HTML: caratteri • Formato dei caratteri: • <b> grassetto </b> • <i> corsivo </i> • <em> enfatizzato </em> • <code> codice </code> • <strong> grassetto </strong> • <font size=“3”> testo </font> • <font color=“blue”> … </font> • <font face=“Arial”> … </font>

  24. HTML: allineamento • Allineamento: • <p align=“center”> • <p align=“right”> • <p align=“justify”> • <center> testo da centrare </center>

  25. HTML: elenchi • <ul> e <li> (unordered list) <ul> <li>primo elemento<\li> <li>secondo elemento<\li> </ul> • <ol> e <li> (ordered list) <ol> <li>primo elemento<\li> <li>secondo elemento<\li> </ol>

  26. HTML: altri marcatori • Linee orizzontali <hr>: <hr width=“90%” size=3> • Testo lampeggiante (solo per Netscape): <blink> questo testo lampeggia </blink> • Testo scorrevole (solo per Explorer): <marquee> questo testo scorre </marquee> • Commenti: <!-- questo testo non viene visualizzato -->

  27. HTML: <a href> • Link <a> ……… </a> <a href=“URL”>testo del link</a> • Gli indirizzi per “trovare” i documenti nel web sono detti Uniform Resource Locator (URL) e li identificano in modo univoco. protocollo://indirizzo internet del server/pathname

  28. HTML: <a href> <a href=“http://www.unifi.it”>Università di Firenze</a> protocollo Indirizzo internet del server <a href=“http://www.dsi.unifi.it/~ferrari/DIDATTICA/aa07/index.htm”> Anno Accademico 2006/2007</a>

  29. HTML: link interni (ancore) • Link interni allo stesso documento: si usa l’attributo name del tag <a>.

  30. HTML: link interni (ancore) (II) • Si devono marcare quelle porzioni del documento dove si vuole saltare.

  31. HTML: link interni (ancore) (III) • Per i link interni si deve usare nell’attributo href il nome scelto come valore dell’attributo name, preceduto dal simbolo #.

  32. HTML: <IMG> <img src=“nome file dell’immagine” align=“left” | “right” | “center” border=“numero” height=“numero” width=“numero” hspace=“numero” vspace=“numero” alt=“testo alternativo all’immagine”> NB: l’immagine deve essere su un file a parte in formato GIF, PNG o JPEG (BMP solo per Explorer).

  33. HTML: audio • Formati audio .au .aiff .mid .wav <a href=“nome file audio”>clicca qui</a> <bgsound src=“nome file audio” loop=“10”> NB: bgsound fa partire l’audio quando si entra nella pagina ma funziona solo in Explorer.

  34. HTML: video • Formati video .mpeg .avi .mov <a href=“nome file video”>clicca qui</a> <img dynsrc=“nome file video” src=“nome file immagine”> NB: dynsrc fa partire automaticamente il video ma funziona solo in Explorer.

  35. HTML: tabelle • Per creare una tabella in HTML si usano i tag: <table> </table> all’interno dei quali si deve definire il contenuto della tabella. • Per definire una tabella si procede nel modo seguente: • Si realizza la prima riga facendo uso del tag <tr> (table row) • Si indicano le varie celle facendo uso: • Del tag <th> per le intestazioni di cella </th> (table header). • Del tag <td> per i dati della cella </td> (table data). • Si passa alla seconda riga con le relative celle avendo cura di usare il tag </tr>.

  36. HTML: tabelle

  37. HTML: <table> (II) <table width=“larghezza della tabella” cellpadding=“numero” indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla. cellspacing=“numero” specifica la distanza (in pixel) tra una cella e l’altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri.border=“numero” specifica la larghezza dei bordi di una tabella (in pixel). bgcolor=“colore sfondo tabella” > <table width=“80%” cellpadding=“5” bgcolor=“#ff3300”>

  38. HTML: <td> <th> <td (th) width=“dimensione della cella” colspan=“numero” rowspan=“numero” bgcolor=“colore sfondo cella” align=”right” | ”left” | ”center” valign=“top” | “bottom” | “middle” nowrap > <td width=“100” bgcolor=“#0033aa” align=“right”>

  39. HTML: tabelle • Le tabelle si usano principalmente per organizzare gli elementi all’interno di una pagina. • Per fare questo non si visualizzano i bordi. <table border=“0”> righe e colonne <\table>

  40. HTML: frame • I frame servono per suddividere il browser in parti indipendenti all’interno delle quali si possono caricare documenti HTML diversi. • È necessario innanzitutto realizzare un file HTML che definisca la struttura della pagina (ovvero la sua suddivisione in parti indipendenti). • Il tag <frameset> serve per creare una pagina strutturata in frame. <frameset> </frameset> <noframes> </noframes> <frameset> sostituisce il comando <body>

  41. HTML: <frameset> • <frameset> ha due attributi: • rows divide lo schermo in righe orizzontali; • cols divide lo schermo in colonne verticali. • Le dimensioni delle righe e delle colonne possono essere espresse in pixel oppure in percentuale. • Tra gli altri attributi si può usare frameborder per associare un bordo alle varie porzioni dello schermo (esteticamente discutibile).

  42. HTML: <frame> • All’interno di ogni porzione di interfaccia del browser si deve aprire un documento usando il tag <frame> <frame src=“file HTML da aprire nel frame” name=“nome della finestra” scrolling=“yes” | “no” | “auto” noresize marginwidth=“numero” marginheight=“numero” >

  43. HTML: target • In una struttura a frames può apparire difficile caricare il contenuto di un link nella sezione appropriata. • Grazie all’attributo target possiamo specificare qual è la destinazione del link; con questa sintassi siamo dunque in grado di caricare il contenuto di un collegamento nel riquadro che riteniamo più opportuno: <a href=“paginaDaLinkare.html” target=“nomeDelFrame”>

  44. HTML: target (esempi) • Ci sono poi delle “parole chiave” che ci consentono di ricaricare i link in destinazioni predefinite: • target=“_blank”. Apre il link in una nuova finestra, senza nome; • target=“_self”.Apre il link nel frame stesso (è così di default); • target=“_parent”. Il documento viene caricato nel frameset precedente a quello corrente (più esattamente nel frame genitore); • target=“_top”. Il documento viene caricato nella finestra originale, cancellando ogni struttura a frame (si noti la differenza con “_parent”). Più precisamente il documento viene caricato nella parte più alta (“top”) della struttura, ed è questo il motivo per cui il frameset stesso viene annullato e sostituito dal contenuto del link.

  45. HTML: image map • Una image map è un’immagine cui si possono associare link diversi. • È necessario avere il file dell’immagine (.gif o .jpeg) e una specifica della mappatura, cioè l’indicazione di quali parti dell’immagine sono attive e quali no.

  46. HTML: <map> <html> <head> <title>Esempio map</title> </head> <body background=“bckgrnd.gif”> <center> <map name=“picture”> <area href=“form.html” shape=“rect” coords=“3,122,73,143” alt=“Go to the form”> <area href=“contact.html” shape=“rect” coords=“109,123,199,142” alt=“Go to the contact page”> <area href=“main.html” shape=“rect” coords=“1,2,72,17” alt=“Go to the homepage”> <area href=“links.html” shape=“rect” coords=“155,0,199,18” alt=“Go to the links page”> <area href=“mailto:prova@prova.com” shape=“poly” coords=“28,22,24,68,46,114,84,111,99,56,86,13” alt=“Invio email”> <area href=“mailto:prova@prova.com” shape=“circle” coords=“146,66,42” alt=“Invio email”> <\map> <img src=“deitel.gif” width=“200” height=“144” border=“1” alt=“Harvey and Paul Deitel” usemap=“#picture”> </center> </body> </html>

  47. HTML: <map> • Come si possono mappare le regioni italiane?

  48. HTML: form • Uno dei fattori che hanno decretato il successo del Web è senz’altro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list). • Per organizzare questo genere di servizi è necessario raccogliere in qualche modo i dati dell’utente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form). • L’invio dei dati è solitamente organizzato in due parti: • Una pagina principale che contiene i vari campi del form, che consentono all’utente di effettuare delle scelte, scrivere del testo, inserire un’immagine … • Una pagina secondaria che viene richiamata dalla principale e che effettua il “lavoro” vero e proprio di processare e raccogliere i dati. Di norma si tratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro. • In questa parte ci occuperemo della sola pagina principale.

  49. HTML: form (name e action) • Per creare una pagina con dei moduli, bisogna usare l’apposito tag <form> <form name=“datiUtenti” action=“paginaRisposta.php”> ………… </form> • Come si può vedere, “name” serve per indicare il nome del form, “action” indica l’URL del programma o della pagina di risposta che processerà i dati. • Grazie all’ “action” è anche possibile far sì che i dati vengano inviati in e-mail al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). <form action=mailto:tuamail@nomeDominio.it?subject=Oggetto predefinito” enctype=“text/plain” method=“POST”>

  50. HTML: form (metodo) • Quando creiamo un form possiamo scegliere due metodi di invio: GET e POST. • Con il metodo GET la pagina di risposta viene contattata e i dati vengono inviati in un unico step. Nell’URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (più precisamente nella “query string”, cioè nella “stringa di interrogazione”) secondo questa forma: http://www.html.it/esempioForm/paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio • I dati (nella forma nome del campo=valore del campo) sono appesi alla pagina dopo il punto interrogativo. • Alcuni server hanno tuttavia delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 caratteri complessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi per l’invio in GET è: <form name=“datiUtenti” action=“paginaRisposta.php” method=“GET”>

More Related