Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sistemi - Lezione XIV - Introduzione a HTML

1,450 views

Published on

Published in: Technology
  • Be the first to comment

Sistemi - Lezione XIV - Introduzione a HTML

  1. 1. Sistemi Di Elaborazione Dell’informazione Dott. Antonio Calanducci Lezione XIV: Introduzione a HTML Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010
  2. 2. wdwdwdwdwdw Markup • Il termine markup (=marcatura) deriva dal mondo tipografico: - marcare con delle annotazioni le parti di testo che vanno evidenziate, formattate, corrette A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 2
  3. 3. wdwdwdwdwdw Editor • Nell’ambito dell’elaborazione elettronica dei testi sono stati creati strumenti informatici per la creazione dei documenti. • Esistono programmi per l’elaborazione dei testi di tipo diverso: - Gli editor WYSIWYG (What You See Is What You Get) - 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 • I tag sono scritti usando i normali caratteri e quindi i documenti possono essere creati usando semplici editor di testo. A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 3
  4. 4. wdwdwdwdwdw Esempi di editor e markup • Microsoft Word, Google Docs: editor WYSIWYG - quello che si vede su schermo è quello che verrà stampato - non viene usato un linguaggio a marcatori - se apriamo con blocco note un file .doc vedremo il formato interno (non human readable) • File di tipo RTF (Rich Text Format) e PS (PostScript) usano un linguaggio di markup - sono file di testo: contenuto + istruzioni formattazione/ presentazione/stampa A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 4
  5. 5. wdwdwdwdwdw HTML • HTML: HyperText Markup Language: - linguaggio di markup per ipertesti (del Web) • HTML non è un linguaggio di programmazione • linguaggio di markup: permette di descrivere la disposizione di tutti gli elementi presenti all’interno di un documento - file HTML sono in formato testo (leggibili da qualsiasi editor di testo) - basta salvare il file con estensione .html o .htm - browser legge un doc HTML, interpreta le specifiche di formattazione e visualizza il documento A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 5
  6. 6. wdwdwdwdwdw Primo doc HTML <html> <head> <title>Pagina HTML di prova</title> </head> <body> Hello, world! </body> </html> A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 6
  7. 7. wdwdwdwdwdw HTML: sintassi - tag di apertura <tag> e tag di chiusura </tag> <nometag> istruzioni ..... </nometag> • Un doc HTML inizia sempre con il tag <html> e termina con </ html> • HTML è un linguaggio case insentitive: - <html>, <HTML>, <Html> sono gli stessi - è consigliabile essere consistenti A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 7
  8. 8. wdwdwdwdwdw HTML: tag e attributi • <TAG attributi>contenuto</TAG> • Es: - <P align="right">testo</P> • Sintassi completa: - <TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG> • Es: - <IMG width="20" height="20" src="miaImmagine.gif" alt="alt"> • Non è importante l’ordine con cui si scrivono gli attributi A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 8
  9. 9. wdwdwdwdwdw HTML: <head> • head=testa del documento - contiene il titolo ed i metatag che servono a descrivere il contenuto del documento stesso. - informazioni in genere non direttamente percepibili, fornisce info su come deve essere interpretato • Es: <head> <title>titolo del documento</title> <meta name="keywords" content="parole chiave qui"> <meta name="author" content="nome e cognome qui"> </head> A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 9
  10. 10. wdwdwdwdwdw Commenti • Quando la dimensione e la complessità delle nostre pagine Web è fondamentale usare i commenti: - ricordare perchè sono state fatte delle modifiche - permettere ad altri dopo di noi di continuare a lavorare sulla stessa pagina • I commenti sono racchiusi tra - <!-- e --> • Esempi: - <!-- menu di sinistra --> <!-- barra in alto --> <!-- eccetera --> A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 10
  11. 11. wdwdwdwdwdw HTML: <body> e attributi • body=corpo - contenuto vero e proprio del documento • Attributi principali di 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" A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 11
  12. 12. wdwdwdwdwdw <body>: esempio <body bgcolor="red" bgcolor="yellow" bgcolor="#00ffff" text="#eeeeee" link="#ffffff" background="images/sfondo.gif" > <body text= “white” link=“#cc0000” background=“images/sabbia.gif> A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 12
  13. 13. wdwdwdwdwdw 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 (base 16) corrispondente. • Con questa codifica si possono rappresentare più di 16,7 (=2^24=2^8*2^8*2^8) milioni di colori diversi. A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 13
  14. 14. wdwdwdwdwdw RGB • nei file HTML le codifiche esadecimali vanno scritte senza lasciare spazi vuoti tra le cifre • http://xhtml.html.it/guide/lezione/1663/impostare-il- colore-di-sfondo/ A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 14
  15. 15. wdwdwdwdwdw HTML: titoli e paragrafi • <H1>, <H2>,.....<H6> - H1: titolo di livello 1 - H6: titolo di livello 6 • <P> paragrafo </P> - Per andare a capo all’interno di un paragrafo si usa il tag line BReak: <BR> - è un eccezione: non necissita il tag di chiusura • <DIV>testo</DIV> - come <P> non lascia spazi prima e dopo il paragrafo A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 15
  16. 16. wdwdwdwdwdw HTML: formattazione testo • <B>grassetto</B> (bold) • <I>corsivo</I> (italic) • <em>enfatizzato</em> (emphasized) • <code>codice</code> • <strong>grassetto</grassetto> • <font size=”3”> testo </font> • <font color=“blue”>testo di blue </font> A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 16
  17. 17. wdwdwdwdwdw HTML: allineamento testo <p align=“center”>paragrafo al centro</p> <p align=“right”>paragrafo a destra</p> <p align=”left”>paragrafo a sinistra</p> <p align=“justify”>paragrafo giustificato</p> <center> testo da centrare </center> A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 17
  18. 18. wdwdwdwdwdw HTML: elenchi <ul> e <li> (unordered list) e (list item) <ul> <li>primo elemento</li> <li>secondo elemento</li> </ul> <ol> e <li> (ordered list) e (list item) <ol> <li>primo elemento</li> <li>secondo elemento</li> </ol> A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 18
  19. 19. wdwdwdwdwdw HTML: link e ancore • <a>...</a>: ancore • Link a pagine esterne. Es.: - <a href=”http://s1stem1.wordpress.com”>blog di sistemi</ a> • Link a pagine sullo stesso server - <a href=”sistemi2.html”>pagina sistemi2.html</a> • Link a sezioni nello stessa pagina - <a href=”#sezione4”>vai alla sezione 4</a> - <a name=”sezione4”></a> nei punti del doc in cui mettere le “ancore” A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 19
  20. 20. wdwdwdwdwdw HTML: <IMG> • Tag per incorporare immagini <img src="nome file dell'immagine" align="left" | "right" | "center" border="numero" height="numero" width="numero" hspace="numero" (spazio orizzontale) vspace="numero" (spazio verticale) alt="testo alternativo all'immagine"> • Ref: http://www.gdesign.it/pages/html/image/imgtag.php A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 20
  21. 21. wdwdwdwdwdw HTML: tabella • Per creare una tabella in HTML si usano i tag: <table> ... </table> • Per definire una tabella si procede nel modo seguente: - Ogni riga deve esseri inclusa tra i tag <tr></tr> (table row = riga) • All’interno di ogni riga, il testo di ogni cella, deve essere incluso tra <td></td> (table data) - Se si tratta delle celle per la prima riga, per l’intestazione, si usa invece <th></th> (table header) A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 21
  22. 22. wdwdwdwdwdw HTML: tabella A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 22
  23. 23. wdwdwdwdwdw Esempio di tabella <html> <head> <title>Esempio tabella</title> </head> <body bgcolor=“white” text=“green”> <center> Prima tabella <table border=1> <tr> <th>Uno</th> <th>Due</th> </tr> <tr> <td>aaaaaaaaaa</td><td>bbbbbbbb</td> </tr> <tr> <td>ccccccccc</td><td>ddddddddd</td> </tr> </table> </center> </body> A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 23
  24. 24. wdwdwdwdwdw Ancora tabelle - attributi <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” > A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 24
  25. 25. wdwdwdwdwdw Attributi celle <td (th) width=“dimensione della cella” colspan=“numero” rowspan=“numero” bgcolor=“colore sfondo cella” align=”right” | ”left” | ”center” valign=“top” | “bottom” | “middle” nowrap (non manda mai a capo il testo di una cella) > Es: http://www.html.it/guide/esempi/guida_html/tabelle/tabelle6.html A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 25
  26. 26. wdwdwdwdwdw Riferimenti • HTML - http://xhtml.html.it/guide/leggi/51/guida-html/ - http://www.gdesign.it/pages/html/html.php - http://www.w3schools.com/tags/default.asp A. Calanducci - Sistemi: Lezione XIV - Catania, 26/05/2010 26

×