HTML: Introduzione. Documento HTML da presentare/spedire (entro tre giorni dall orale):

Transcript

1 HTML: Introduzione Documento HTML da presentare/spedire (entro tre giorni dall orale): Il documento HTML è individuale e deve consistere di due pagine, collegate tra loro. La prima deve illustrare un progetto/ricerca/elaborato eseguito durante il corso degli studi. La seconda deve contenere una breve biografia dell'autore. I file relativi devono essere denominati come cognome_nome_1.html cognome_nome_2.html (la prima pagina) (la seconda pagina) Entrambi devono avere un titolo del tipo: <title>nome Cognome - Titolo del progetto/ricerca/elaborato</title> Nel caso di impossibilita' a produrre il documento HTML, l'esame può essere comunque sostenuto. La conoscenza acquisita del linguaggio HTML sarà comunque verificata durante il colloquio.

2 HTML: Introduzione HTML: HyperText Markup Language Linguaggio, standardizzato dal World Wide Web Consortium (W 3 C, e giunto alla versione 4, per definire il contenuto di un documento web. La visualizzazione (layout) del documento stesso può dipendere dal particolare browser (client web) utilizzato e dalle sue impostazioni. Le pagine che l HTML definisce sono dette ipertestuali poiché possono contenere informazioni di diversa natura e collegamenti con altre pagine.

3 HTML: Introduzione Un documento HTML è un file in formato testo contenente sia il testo delle informazioni che delle particolari istruzioni (i tag) per formattarle (definirne la struttura, collegamenti, inclusioni di oggetti, ecc.). I tag sono interpretati dal browser per visualizzare le informazioni contenute nel documento nella forma voluta. Il documento HTML è spesso detto sorgente della pagina. Con pagina si indica la visualizzazione del documento da parte di un browser. Spazi, tabulazioni e righe vuote (blanks o white space) sono compresse in un unico spazio bianco dai browser.

4 HTML: Introduzione Cosa è necessario: un editor (ASCII) un browser un provider Browser web: Interpreta il linguaggio HTML di un documento per visualizzarne i contenuti su uno schermo. Browser grafici (in grado di visualizzare anche immagini, ecc., riprodurre suoni e animazioni) Mozilla ( Netscape (home.netscape.com) Internet explorer ( Opera ( Browser testuali (visualizzano solo le informazioni testuali) Lynx

5 HTML: Introduzione Editor di testo (salva in ASCII senza codici di formattazione) Non WYSIWYG Tra i freeware: 1st Page 2000 ( EasyHTML ( PsPad ( WYSIWYG Dreamweaver ( FrontPage ( Tra i freeware: mozilla ( Netscape (home.netscape.com) Nvu ( Trellian Webpage (webpage.vendercom.com)

6 HTML: Introduzione ISP (Internet Service Provider) Fornisce uno spazio disco su un host con un server web. Nello spazio disco assegnato andranno inseriti (FTP, SFTP,.) i file relativi ai documenti web. Se non esplicitamente indicato dal provider, la pagina iniziale deve avere un nome di default (es. index.htm, index.html, main.html, ecc.).

7 HTML: Introduzione Guide HTML basta un motore di ricerca ( ecc.). Guide HTML (biblioteca) Validatori: controllano il corretto funzionamento del codice

8 HTML: Tag fondamentali Tag presenti in qualsiasi documento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " <html> <head> <title></title> </head> <body> </body> </html> Dichiarazione. Definisce la versione del linguaggio HTML adottata affinché il browser possa interpretarlo correttamente. Deve essere il primo tag, ed è l unico a dover essere obbligatoriamente maiuscolo. Il DTD (Document Type Definition) stabilisce le regole che regolano la sintassi e la struttura del linguaggio HTML. EN indica una definizione per la lingua inglese. Per l italiano il codice da utilizzare è IT. Possibili DTD: Transitional: permette di utilizzare tag deprecati Strict: i tag deprecati sono segnalati come errori Frameset: Documento con frame

9 HTML: Tag fondamentali Tag presenti in qualsiasi documento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " <html> <head> <title></title> </head> <body> </body> </html> <html> contenuto della pagina web </html> Attributi: lang: Lingua dei testi contenuti nel documento es. <html lang= it > imposta la lingua italiana dir: Direzione per stampare e visualizzare i testi es. <html lang= it dir= ltr > indica il left-toright come direzione. L altra possibilità è rtl. version: Deprecato (sarà vietato in futuro). Descrive la versione HTML (ora!doctype).

10 HTML: Tag fondamentali Tag presenti in qualsiasi documento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " <html> <head> <title></title> </head> <body> </body> </html> <head> intestazione del documento </head> Attributi: dir e lang, per la specifica della lingua utilizzata in questa parte. Lo standard consiglia l uso di!doctype. profile: imposta un URL che identifica le informazioni da utilizzare per rappresentare il documento e per creare l indice dei contenuti.

11 HTML: Tag fondamentali Tag presenti in qualsiasi documento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " <html> <head> <title>goofy Goose - City Plane</title> </head> <body> </body> </html> <title>titolo del documento</title> Appare nel bordo superiore della finestra del browser. Attributi: dir e lang

12 HTML: Tag fondamentali Tag presenti in qualsiasi documento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " <html> <head> <title>goofy Goose - City Plane</title> </head> <body> </body> </html> <body> corpo del documento </title> Racchiude i contenuti di una pagina web. Attributi: una serie di tag per impostare la rappresentazione del contenuto del documento. Tra di essi troviamo style: specifica delle regole di formattazione (come vedremo più avanti).

13 HTML: Tag fondamentali <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" " <html>   Tutto ciò che è racchiuso dal tag è ignorato dal browser. <body> </body> </html>

14 HTML: Tag fondamentali Titoli <html> <head> <title>titoli</title> </head> <body> <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 5</h6> Titoli. Tra gli attributi troviamo: align ( left, right, center ): allineamento style, lang, dir. Possono contenere altri tag. <h1 align="center">heading 1 (centrato)</h1> </body> </html>

15 HTML: Tag fondamentali Paragrafo, interruzione di linea <p>when I was young my teachers were the old.<br> I gave up fire for form till I was cold.<br> </p> <br /> (<br> funziona, ma lo standard consiglia l utilizzo della chiusura spazio /). Interruzione di riga. <p align="center">now I am old my teachers are the young.<br /> go to school to youth to learn the future.<br /> </p> <p>paragrafo</p> Definisce un paragrafo (sezione continua di testo). Tra gli attributi troviamo: align ( left, right, center ): allineamento style, lang, dir.

16 HTML: Tag fondamentali Filetto orizzontale <hr align="center" noshade size="4" width="50%"> <hr align="center" size="2" width="50" /> <hr /> (<hr> funziona, ma lo standard consiglia l utilizzo della chiusura spazio /). Introduce un filetto (riga) orizzontale. Tra gli attributi troviamo align ( left, right, center ): allineamento size: spessore (in pixel) width: lunghezza (in percentuale della finestra del browser, o in pixel) noshade: elimina l effetto ombra.

17 HTML: Tag fondamentali Alcuni attributi del tag <body> bgcolor: colore di sfondo della pagina. Il colore può essere definito in base alle sue componenti RGB (Red-Green-Blue), ognuna delle quali può avere valore tra 0 (nullo) e 255 (FF in esadecimale, massimo). In tal caso il colore è descritto da 3 coppie di 2 cifre esadecimali, che indicano l intensità delle componenti. Ad es. <body bgcolor= #FFFFFF > definisce il colore bianco come background. Il colore può essere specificato anche tramite il nome (colori principali). Ad es. white, red, green, blu, yellow, magenta, cyan, black. background: inserimento di un immagine di sfondo nella pagina. L immagine è specificata tramite un path o un URL. Ad es. <body background="wood.jpg" text="#ffff00">  oppure <body background= file://nome_dominio/immagini/pippo.jpg" text="#ffff00"> text: imposta il colore dei testi (escluso i link). alink: colore del link attivo (puntato dal mouse) link: colore dei link non visitati

18 HTML: Link Un link (collegamento) è un elemento che consente ad un utente di raggiungere parti diverse dello stesso documento o un altro documento, anche su un host diverso.

19 <h2 id="mb"> Margaret E. Bruner</h2> <h3 align="center">epitaph for a Cat</h3> <p align="center"> -- Text of poem omitted for clarity of example -- </p> <p align="center"><a href="#top">top of Page</a></p> </body> </html> HTML: Link <html> <head> <title>links</title> </head> <a>ancora </a> <body> <h1 id="top">poetry Selections</h1> <p>this is a list of the poets shown on this page: </p> <a href="#mb">margaret E. Bruner</a><br /> <a href= poesie/cummings.html">e. e. cummings</a><br /> Collegamento con un altro oggetto (immagine, suoni, altre aree della solita pagina, altre pagine). <a href= Frost</a><br /> <a href= Arlington Robinson</a><br <hr align="center" noshade width="75%" size="4" />

20 HTML: Link Il link è definito da un punto di partenza (origine) e un punto di arrivo (destinazione). Attributo href: contenuto nell origine, indica la destinazione del link. L indicazione è fatta tramite l URL. URL interni al documento (URL relativo): #nome (ad es. <a href="#mb">) URL locale (altro URL relativo): path per raggiungere la destinazione (ad es. <a href= pippo.html"> indica come destinazione il file pippo.html nella solita directory della pagina corrente. <a href= /ugo/pippo.html"> indica il file pippo.html contenuto nella sottodirectory ugo della directory della pagina corrente. Le lettere di unità disco sono seguite da invece che :) URL assoluto: <a href= <a href= (identifica un punto preciso nel file pippo.html).

21 HTML: Link Attributi di <a> accesskey: imposta una chiave di accesso per il link. Questa è un carattere (es. accesskey= d ) che, se premuto, attiva il link. charset: identifica il set di caratteri della destinazione hreflang: (solo con href) identifica la lingua della destinazione name: identifica una posizione all interno del documento (destinazione degli URL interni al documento). Deve essere un nome unico, non contenere spazi e iniziare con una lettera. Impostato come nome, ci si riferisce ad esso come #nome. id: come name, è un identificatore. Introdotto con la versione 4 dell HTML, può essere utilizzato in un numero maggiore di casi, tra i quali come destinazione dei link interni. Non è solo attributo di <a> (ad es. lo è anche di <h1-6 >).

22 HTML: Link mailto: Il protocollo mailto: può essere utilizzato nell href inserire un collegamento che causa l invio di una . Ad es. <a href= mailto:pippo@ugo.it >invia un messaggio a pippo </a> Inclusione di file:  Con un tag di questo tipo si chiede al server web di inserire il file indicato nel documento prima di inviarlo al client. Può essere utilizzato per inserire delle informazioni comuni a più pagine (ad es. informazioni e mail dell autore). Spesso al file da includere viene data l estensione.shtml, che indica al server che deve eseguire il codice del file. Non tutti i server elaborano tale informazione, dipende dal software e dalla sua configurazione.