Html

836 views
814 views

Published on

Concetti di base dell'HTML

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
836
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Html

  1. 1. HTML: HyperText Markup Language Informatica Emilia Calzetta Istituto Statale di Istruzione Superiore Giovanni XXII IPSIAM – sede Barra (SA) Anno scolastico 2009/2010
  2. 2. HTML definizione (1) HTML (Hypertext Markup Language) e un linguaggio di contrassegno (o 'di marcatura'), che consente di creare i documenti per il Word Wide Web Un documento HTML viene salvato con estensione .html o .htm
  3. 3. HTML permette di indicare come disporre gli elementi all'interno di una pagina web: le indicazioni vengono date attraverso degli appositi marcatori, detti “ tag ” HTML definizione (2)
  4. 4. HTML definizione (3) HTML non è un linguaggio di programmazione, è semplicemente un sistema di contrassegno, i cui tag vengono riconosciuti ed interpretati dai browser Web (Crome, Internet Explorer). Il mercato mette a disposizione vari software per la creazione di pagine HTML: gli editor HTML. Ci sono due tipi di editor HTML
  5. 5. EDITOR HTML Editor testuali Sono editor che propongono modifiche dirette sul codice HTML puro. ( Blocco Note di Windows si può usare come editor testuale per documenti HTML) Editor WYSIWYG WYSIWYG sta per: What You See Is What You Get , significa che ciò che si vede sullo schermo è ciò che si ottiene in un browser Web. Questi editor visualizzano gli oggetti e il testo così come appaiono nella pagina web e generano automaticamente il codice HTML
  6. 6. KompoZer (versione 0.7.10)
  7. 7. EDITOR HTML Il vantaggio degli editor WYSIWYG è che lo sforzo di creazione di documenti HTML è ridotto al minimo e il tempo di apprendimento è brevissimo. Tuttavia gli editor WYSIWYG (un esempio concreto è KompoZer ) non favoriscono l’uso dell'HTML puro e si corre il rischio di non riuscire ad andare oltre ciò che il programma prevede.
  8. 8. I TAG (1) I tag sono dei simboli che indicano come deve essere formattato il testo. ESEMPIO Per rappresentare una parola in grassetto, occorre inserirla tra il tag iniziale <B> e il tag finale </B>
  9. 9. I TAG (2) si suddividono in: TAG con simbolo di chiusura ESEMPIO <B> </B> TAG senza simbolo di chiusura ESEMPIO <BR>
  10. 10. STRUTTURA DI UNA PAGINA <ul><ul><ul><li><HTML> </li></ul></ul></ul><ul><ul><ul><li></HTML> </li></ul></ul></ul>testa corpo <ul><ul><ul><li><HEAD> </li></ul></ul></ul><ul><ul><ul><li><TITLE></TITLE> </li></ul></ul></ul><ul><ul><ul><li></HEAD> </li></ul></ul></ul><ul><ul><ul><li><BODY> </li></ul></ul></ul><ul><ul><ul><li></BODY> </li></ul></ul></ul>
  11. 11. TESTA La testa contiene informazioni principali relative al documento come ad esempio il titolo che è contenuto tra il TAG <TITLE> </TITLE> <ul><ul><ul><li><HEAD> </li></ul></ul></ul><ul><ul><ul><li><TITLE></TITLE> </li></ul></ul></ul><ul><ul><ul><li></HEAD> </li></ul></ul></ul>testa
  12. 12. CORPO il corpo contiene le istruzioni (tag) della vera e propria pagina che sarà visualizzata a video corpo <ul><ul><ul><li><BODY> </li></ul></ul></ul><ul><ul><ul><li></BODY> </li></ul></ul></ul>
  13. 13. Per formattare il paragrafo esistono due tipi di TAG: <BR> (Break) che consente di interrompere una riga e di farla continuare alla riga successiva; <P> (Paragraph) che permette di predisporre un nuovo paragrafo lasciando una linea vuota Entrambe le TAG non richiedono una TAG di chiusura. FORMATTAZIONE DEL TESTO (1)
  14. 14. Per formattare il paragrafo esistono altri due tipi di TAG: <B></B> (Bold) che visualizza in grassetto tutto ciò che è compreso tra le due TAG; <I></I> (Italic) che visualizza con lo stile “italico” il testo definito. Entrambe le TAG richiedono una TAG di chiusura. FORMATTAZIONE DEL TESTO (2)
  15. 15. I TITOLI (1) Per strutturare un paragrafo con più titoli di diversa grandezza si utilizzano le TAG Tutte i TAG richiedono il comando di fine TAG <H1> (il più grande) <H2> <H3> <H4> <H5> <H6> (il più piccolo)
  16. 16. <HTML> <HEAD> <TITLE>Esempio di pagina con intestazioni e corsivo</TITLE> </HEAD> <BODY> <CENTER> <H1>dicitura con grandezza H1</H1> <H3>dicitura con grandezza H3</H3> <H4>dicitura con grandezza H4</H4> <H5>dicitura con grandezza H5</H5> </CENTER> <I>esempio di corsivo</I><BR> </BODY> </HTML> TITOLI (2)
  17. 17. TITOLI (3)
  18. 18. <HTML> <HEAD> <TITLE>Esempio di testo con aggiunta di colori e stili</TITLE> </HEAD> <BODY> <FONT SIZE=&quot;6&quot; COLOR=“red” FACE=“arial”> Si possono usare:<BR>caratteri in <I>italico</I><BR> e caratteri in <B>neretto</B><BR></FONT><p> <FONT SIZE=&quot;4&quot; COLOR=&quot;blue” FACE=“ARIAL”> Si possono usare:<BR> caratteri sottolineati <U>grassetto</U><BR> </FONT> </BODY> </HTML> FORMATTAZIONE TESTO (1)
  19. 19. FORMATTAZIONE TESTO (2)
  20. 20. Per centrare il testo nella pagina è necessario utilizzare la TAG <CENTER> subito dopo il BODY, e la fine TAG </CENTER> dopo la chiusura del titolo CENTRARE I TESTI
  21. 21. LISTE PREFORMATTATE In HTML è possibile predisporre delle liste: LISTE ORDINATE LISTE NON ORDINATE 1, 2 LISTE ORDINATE A, B
  22. 22. LISTA ORDINATA La lista ordinata è un insieme di voci numerate in modo progressivo. La TAG d’inizio è <OL> (Ordered List) mentre </OL> chiude la lista. Ogni voce della lista deve essere preceduta dall’istruzione <LI> .
  23. 23. LISTA NON ORDINATA La lista non ordinata è composta da un insieme di voci indicate da pallini . La TAG d’inizio è <UL> ( Unordered List ) mentre </UL> chiude la lista. Ogni voce della lista deve essere preceduta dall’istruzione <LI> .
  24. 24. <HTML> <HEAD> <TITLE>Esempio di LISTE</TITLE> </HEAD> <BODY> <FONT SIZE=&quot;3&quot; COLOR=&quot;GREEN&quot;><P>lista ordinata<BR> <OL> <LI> MELA <LI> BANANA </OL> <FONT SIZE=&quot;3&quot; COLOR=&quot;BROWN&quot;> <P>lista NON ordinata<BR> <UL><LI> MELA <LI> BANANA</UL> <FONT SIZE=&quot;3&quot; COLOR=&quot;BLUE&quot;><P>lista ordinata<BR> <UL TYPE=A><LI> MELA <LI> BANANA</UL><P> </BODY> </HTML> PAGINA DI PROVA LISTE (1)
  25. 25. PAGINA DI PROVA (2)
  26. 26. LE IMMAGINI I formati più usati per le immagini sono: gif , bmp e jpg FIORE.GIF GATTO.JPG
  27. 27. COME INSERIRE LE IMMAGINI Per inserire le immagini occorre utilizzare il TAG <IMG SRC> <IMG SRC=“AEREO.GIF”> <IMG SRC=“SIGNORA.JPG”> <IMG SRC=“GATTO.GIF”>
  28. 28. <HTML> <HEAD> <TITLE>IMMAGINE</TITLE> </HEAD> <BODY> <FONT SIZE=&quot;3&quot; COLOR=&quot;GREEN&quot;> ESEMPIO DI IMMAGINE</FONT> <P> <IMG SRC=“TRAMONTO.JPG&quot;> <P> </BODY> </HTML> PAGINA DI PROVA IMMAGINI (1)
  29. 29. PAGINA DI PROVA IMMAGINI (2)
  30. 30. LO SFONDO Per inserire uno sfondo occorre utilizzare l’attributo BACKGROUND nel TAG <BODY> <BODY BACKGROUND=“GREEN”> <BODY BACKGROUND=“MARE.GIF”>
  31. 31. LATO.GIF LATO2.GIF PAGINA DI PROVA SFONDO (1) Inseriamo le seguenti immagini come sfondo di una pagina web
  32. 32. PAGINA DI PROVA SFONDO (2) LATO.GIF
  33. 33. LATO2.GIF PAGINA DI PROVA SFONDO (3)
  34. 34. <HTML> <HEAD> <TITLE>IMMAGINE</TITLE> </HEAD> <BODY BACKGROUND=“LATO.GIF”> <IMG SRC=“Tramonto.jpg&quot;> <P> </BODY> </HTML> PAGINA DI PROVA SFONDO (4)
  35. 35. LIGHTGREEN SFONDI COLORATI
  36. 36. <HTML> <HEAD> <TITLE>IMMAGINE</TITLE> </HEAD> <BODY BGCOLOR=“LIGHTGREEN”> <IMG SRC=&quot;1009.GIF&quot;> <P> </BODY> </HTML> PAGINA DI PROVA SFONDO VERDE
  37. 37. <HTML> <HEAD> <TITLE>IMMAGINE</TITLE> </HEAD> <BODY BGCOLOR=“#FF0000”> <IMG SRC=&quot;1009.GIF&quot;> <P> </BODY> </HTML> COLORI R G B PAGINA DI PROVA SFONDO ROSSO
  38. 38. ROSSO = #FF0000 SFONDI COLORATI
  39. 39. LINK (1) Il link è il concetto cardine su cui si basa un documento ipertestuale , in quanto consente di realizzare le connessioni tra le diverse pagine. Si possono predisporre link su una o più parole o su un’ immagine .
  40. 40. Per definire un link è necessario racchiudere le parole interessate tra le TAG <A> e </A> (Anchor) LINK (2) Per collegarsi ad un’altra pagina occorre utilizzare i TAG <A> e <HREF> con la seguente modalità: < A HREF=“pagina.htm”>testo ancora</A>
  41. 41. COLLEGAMENTI IPERTESTUALI (1)
  42. 42. <!NOTE:Questa è la pagina provaslide.html> <HTML> <HEAD> <TITLE>Esempio di COLLEGAMENTOIPERTESTUALE</TITLE> </HEAD> <BODY> <CENTER> <FONT SIZE=&quot;4&quot; COLOR=&quot;GREEN&quot;> CLICCA L'IMMAGINE PER RICHIAMARE LA PAGINA CON IL MAESTRO <P> <A HREF=&quot;MAESTRO.HTML&quot;> <IMG SRC=&quot;1009.GIF&quot;></A> </BODY> </HTML> COLLEGAMENTI IPERTESTUALI (2)
  43. 43. <!NOTE:Questa è la pagina maestro.html> <HTML> <HEAD> <TITLE>Esempio di COLLEGAMENTO IPERTESTUALE</TITLE> </HEAD> <BODY> <CENTER> <FONT SIZE=&quot;4&quot; COLOR=&quot;GREEN&quot;> <IMG SRC=&quot;TEACHER.GIF&quot;> <P> <A HREF=&quot;PROVASLIDE.HTML&quot;> CLICCA QUA PER TORNARE INDIETRO </A> </BODY> </HTML> COLLEGAMENTI IPERTESTUALI (3)
  44. 44. <ul><li>Per creare un collegamento interno alla pagina si procede in due fasi distinte: </li></ul><ul><li>creazione dell’ancora a cui puntare </li></ul><ul><li><A NAME=“primo&quot;> Paragrafo 1 </A> </li></ul><ul><li>creazione del collegamento all’ancora appena creata e riferimento attraverso il cancelletto </li></ul><ul><li><A HREF=&quot;#primo&quot;> Vai al paragrafo 1 </A> </li></ul>COLLEGAMENTI IPERTESTUALI (4)
  45. 45. LE TABELLE (1) Le tabelle permettono di visualizzare le informazioni all’interno di una pagina in modo strutturato, ordinato e compatto. Per predisporre una tabella occorre utilizzare diverse TAG: <TABLE> </TABLE>
  46. 46. Per definire una nuova cella della tabella è necessario utilizzare il TAG <TD> (Table Data). Per definire una nuova riga della tabella è necessario utilizzare il TAG <TR> (Table Row). Entrambe le TAG non richiedono il comando di fine TAG. LE TABELLE (2)
  47. 47. ESEMPIO DI TABELLA (1)
  48. 48. <HTML> <HEAD><TITLE>Esempio di TABELLA</TITLE> </HEAD> <BODY><CENTER> <FONT SIZE=&quot;7&quot;>tabella<P> <TABLE border =1> <TR><TD><FONT SIZE=&quot;6&quot;>mela</FONT> <TD><FONT SIZE=&quot;6&quot;>pera</FONT> <TR><TD><FONT SIZE=&quot;6&quot;>banana</FONT> <TD><FONT SIZE=&quot;6&quot;>kiwi</FONT> <TR><TD><FONT SIZE=&quot;6&quot;>mandarino</FONT> <TD><FONT SIZE=&quot;6&quot;>arancio</FONT> </TABLE></FONT></CENTER> </BODY> </HTML> ESEMPIO DI TABELLA (2)
  49. 49. ESEMPIO DI TABELLA (3)
  50. 50. <HTML> <HEAD><TITLE>Esempio di TABELLA</TITLE> </HEAD> <BODY><CENTER> <FONT SIZE=&quot;4&quot; COLOR=&quot;RED&quot;>tabella<p> <TABLE border =1> <TR><TD> <IMG SRC=&quot;1008.GIF&quot;> <TD> <IMG SRC=&quot;1009.GIF&quot;> <TR><TD> <IMG SRC=&quot;2000.GIF&quot;> <TD> <IMG SRC=&quot;3000.GIF&quot;> <TR><TD> <IMG SRC=&quot;4000.GIF&quot;> <TD> <IMG SRC=&quot;5000.GIF&quot;> </TABLE></FONT></CENTER> </BODY> </HTML> ESEMPIO DI TABELLA (3)
  51. 51. <ul><li>I moduli (o form) permettono di raccogliere dei dati dal web. L'invio dei dati è organizzato in: </li></ul><ul><ul><li>una pagina principale che contiene i vari campi dei form, che consentono all'utente di effettuare delle scelte e scrivere del testo </li></ul></ul><ul><ul><li>una pagina secondaria che effettua il lavoro di raccogliere i dati sul server. Oppure i dati possono essere inviati ad un indirizzo email indicato nella pagina principale </li></ul></ul>FORM (1)
  52. 52. FORM (2)
  53. 53. <FORM METHOD=POST enctype=&quot;text/plain&quot; action=&quot;mailto:email@dominio.it?subject=Questionario&quot;> <!NOTE: I CAMPI DI TESTO - text è il tipo di input cioè testo, Size=40 è la grandezza del campo, NAME=Cognome è l'etichetta da associare all'informazione> Cognome<BR><INPUT TYPE=text SIZE=40 NAME=Cognome><P> Nome<BR><INPUT TYPE=text SIZE=40 NAME=Nome><P> Indirizzo<BR><INPUT TYPE=text SIZE=40 NAME=Indirizzo><P> Telefono<BR><INPUT TYPE=text SIZE=20 NAME=telefono><P> Data e ora di consegna<BR><INPUT TYPE=text SIZE=20 NAME=Nome><P> FORM (3)
  54. 54. I PULSANTI RADIO (1)
  55. 55. <!NOTE: I PULSANTI RADIO> <P><HR><H3>PAGAMENTO - Forma scelta</H3><P> <UL> <input type=&quot;radio&quot; name=&quot;carta&quot; value=&quot;Contanti&quot; checked> Contanti, alla consegna<BR> <input type=&quot;radio&quot; name=&quot;carta” value=&quot;Visa&quot;>Visa<BR> <input type=&quot;radio&quot; name=&quot;carta&quot; value=&quot;CartaSI&quot;>CartaSI<BR> <input type=&quot;radio&quot; name=&quot;carta&quot; value=&quot;MasterCard&quot;>MasterCard<BR> Numero della Carta<BR><INPUT TYPE=text SIZE=20 NAME=Nome><P> </UL> I PULSANTI RADIO (2)
  56. 56. MENU’ A DISCESA (1)
  57. 57. <!NOTE: MENU A DISCESA> <P><HR><H3> QUALE DESSERT IN REGALO SI DESIDERA?</H3><p> <select name =&quot;Livello&quot;> <option>Fragole <option selected>Ananas <option>Torta </select> <!NOTE: ELENCO DI SCORRIMENTO> <P><HR> <H3>CONFEZIONE SCELTA</H3> <select multiple name=&quot;Gruppo&quot; size=&quot;3&quot;> <option>Da 2 porzioni <option selected>Da 4 porzioni <option>Da 6 porzioni </select> MENU’ A DISCESA (2)
  58. 58. INVIA - ANNULLA (1)
  59. 59. <!NOTE: istruzioni relative ai pulsanti> <P><HR><H3> INVIA IL MESSAGGIO O RICOMPILA LA SCHEDA </H3> <input type=submit value=&quot;INVIO L'ORDINE&quot;> <input type=Reset value=&quot;Annulla&quot;> </FORM> INVIA - ANNULLA (2)

×