doclinguaggi per il web
download 
Reclamo Transcript
linguaggi per il web
LINGUAGGI PER IL WEB HTML (HyperText Markup Language) Il World Wide Web • World Wide Web = sistema di accesso a Internet basato sul protocollo HTTP – insieme di protocolli e servizi (HTTP, FTP, …) – insieme di tool per l’accesso (es. web browser) • Basato sulla metafora dell’ dell ’ipertesto i ertesto linguaggio HTML • Distinzione tra Internet e WWW – Internet = rete – WWW = sistema di accesso alla rete 3 Architettura del web Architettura client-server: • Web client (es. web browser) – inoltra richieste di risorse (documenti, file, ecc.) ad una macchina (web server) • Web server – risponde alle richieste dei web client • Sia il web server che il web client sono programmi in esecuzione su macchine connesse a Internet • Web server e web client comunicano in base al protocollo HTTP 4 Il protocollo HTTP HTTP = HyperText Transfer Protocol • Client-server – ogni interazione è una richiesta (messaggio ASCII) seguita da una risposta (messaggio tipo MIME) • 7 metodi nativi: – – – – – – – GET HEAD PUT POST DELETE LINK UNLINK 7 Domini, siti web e pagine web Distinzione tra domini, web server, siti web e pagine web: • dominio = computer dove gira un web server (“identifica” il web server) • sito web = insieme di URL gestite da un’unica entità e organizzate in modo da essere accedute secondo un ordine logico – più siti web possono essere gestiti dallo stesso web server • pagina web = singolo documento HTML • home page = pagina iniziale di un sito web 15 Ipertesti e HTML Linguaggi per il Web 2009/2010 16 Ipertesti Ipertesto = documento contenente: • testo • immagini • audio • video • collegamenti ipertestuali = riferimenti ad altri documenti (o parti di documenti) ipertestuali Linguaggi per il Web 2009/2010 17 Collegamenti ipertestuali • Sul World Wide Web, un collegamento ipertestuale ad un documento può essere specificato tramite la URL che corrisponde al documento • Si possono usare le tecnologie informatiche per accedere direttamente ai documenti corrispondenti ai link mentre si legge un ipertesto • (esempio: web browser) • superamento dell’accesso “sequenziale” al testo Linguaggi per il Web 2009/2010 18 Linguaggio per ipertesti: HTML • HTML = HyperText Markup Language • Linguaggio standard per la specifica di documenti ipertestuali sul World Wide Web • Linguaggio a marcatura, “figlio” di SGML (Standard Generalized Markup Language) • Un documento HTML può contenere: – testo – link ipertestuali – immagini – link a risorse (URL) di ogni tipo Linguaggi per il Web 2009/2010 19 Breve storia di HTML • Definito (insieme ad HTTP) da Tim Berners-Lee del CERN di Ginevra nel 1989 • Scopo: permettere lo scambio dei dati sperimentali tra i fisici • 1993: diffusione di Mosaic (web browser sviluppato da NCSA) • 1995: fondazione del World Wide Web Consortium (W3C) • 1999: standardizzazione di HTML 4.0 • 2000: standardizzazione di XHTML 1.0 (ridefinizione di HTML basata su XML) Linguaggi per il Web 2009/2010 20 HTML HTML e’ un linguaggio di marcatura, che, attraverso un'apposita sintassi, ci permette di dare “comandi” ad un browser, per la visualizzazione e il trattamento di varie tipologie di oggetti (testo, figure, tabelle, frame, ecc.) L’ html e’ un linguaggio “client”, nel senso che i “comandi” contenuti in una pagina HTML verranno eseguiti direttamente dal BROWSER del sistema che legge la pagina HTML. 11 HTML Un pagina HTML puo’ contenere anche degli script, che sono veri e propri programmi scritti in specifici linguaggi, quali Javascript, Vbscript, ecc. Tali script (programmi) possono essere eseguiti anch’essi lato client (dal browser) o lato server (da un server predisposto) 12 Esempio Pagina HTML: <html> <body> Questa e’ una pagina HTML. </body> </html> 13 Risultato 14 Cos’è l’HTML L’HTML è il linguaggio che sta alla base di internet HTML è l‘acronimo di HyperText Markup Language (Linguaggio di marcatura Ipertestuale). Non è un vero e proprio linguaggio di programmazione, ma un semplice linguaggio di markup, che, attraverso un'apposita sintassi (tag html) ci permette di dare al browser le coordinate per l'inserimento e la formattazione di ciascun elemento in un documento che avrà come estensione .htm oppure .html 15 TAGS e attributi Il linguaggio Html, infatti, usa i "markup tags" (più comunemente noti come TAGS), cioè delle parole chiave, per indicare al Browser come deve essere mostrato il testo, per arricchirlo con elementi multimediali e per creare i LINKS. I tag sono evidenziati dai simboli minore (<) e maggiore (>) che racchiudono il comando. Quasi tutti i tag prevedono poi una chiusura che è data dalla ripetizione della parola del tag di apertura preceduto da una slash (/) Ad esempio: <TITLE>...</TITLE> 16 Struttura base di una pagina html <HTML> <HEAD> <TITLE>Titolo della pagina </TITLE> </HEAD> <BODY> ... Contenuto della pagina... ... </BODY> </HTML> 17 Struttura base di una pagina html • I tag <HTML> e </HTML> costituiscono, rispettivamente il tag di apertura e di chiusura dell‘intero documento. • I tag <HEAD> e </HEAD> conterranno, oltre al titolo della pagina (<TITLE> e </TITLE>), metatag, script, fogli di stile, ecc. • I tag <title> e </title> conterranno il titolo del nostro documento; • I tag <BODY> e </BODY> conterranno il corpo della pagina, il testo e tutti gli altri tag per la formattazione degli elementi che inseriremo 18 Il tag BODY Il tag BODY supporta molti attributi, tra cui: • bgcolor - colore di sfondo • background - immagine di sfondo • TEXT il colore del testo del documento • LINK il colore delle parole linkate • VLINK il colore del testo per i link già visitati • ALINK il colore del testo al momento del click sul link • topmargin - margine superiore • leftmargin - margine sinistro • bottommargin - margine inferiore • rightmargin - margine destro ES: <body topmargin=1 bgcolor=#ffffff></body> in questo caso il margine superiore della nostra pagina avrà ampiezza 1 e il colore di sfondo sarà bianco (#ffffff). 19 Formattazione del testo • I tag di stile titolo <h1>LIVELLO 1</h1> <h2>LIVELLO 2</h2> <h3>LIVELLO 3</h3> <h4>LIVELLO 4</h4> <h5>LIVELLO 5</h5> <h6>LIVELLO 6</h6> 20 Formattazione del testo Il tag FONT Coppia di tag utilizzata per definire tipo, grandezza e colore del testo racchiuso in essa. Ad esempio, attraverso la riga di codice <font face=verdana size=2 color=#000000> testo </font> stabilisco che la parola 'testo', contenuta nei tag <font></font>, sia di tipo Verdana (attributo face), di grandezza 2 (attributo size) e di colore nero (attributo color). 21 Formattazione del testo Altri TAG <b></b>: applicano lo stile grassetto al testo che è racchiuso in essi; <i></i>: applicano lo stile corsivo al testo che è racchiuso in essi; <u></u>: applicano lo stile sottolineato al testo che è racchiuso in essi. 22 Paragrafi, allineamenti e blocchi Definire un paragrafo e allineare il testo: Per definire un paragrafo occorre utilizzare gli appositi tag <p>testo del paragrafo</p>. Tutto il testo che racchiudono, farà parte dello stesso paragrafo. Per allineare il testo occorre utilizzare l'attributo align. ES1: <p align=center>testo allineato al centro</p> ES2: <p align=left>testo allineato a sinistra</p> ES3: <p align=right>testo allineato a destra</p> ES4: <p align=justify>testo giustificato</p> 23 ESEMPIO ALLINEARE PARAGRAFI 24 Paragrafi, allineamenti e blocchi • Interruzioni di riga Le interruzioni di riga servono per interrompere una riga di testo in un punto, facendola riprendere a capo rigo. Il tag utilizzato è <br> (break) e non prevede un ulteriore tag di chiusura. Definire dei blocchi Spesso in html è utile definire dei blocchi, siano essi di solo testo, testo e immagini, o altri elementi. La coppia di tag utilizzata è <div></div> che indicano l'inizio e la fine di un blocco. Il tag <div> supporta l'attributo align (come abbiamo visto per i paragrafi). 25 <DIV> <html> <body> IL TAG DIV <br> <div style="border:2px solid black; margin:15px; padding:10px; width:300px; float:left; text-align:center; color:#0080C0; font-size:10px; font-style:italic; fontweight:bold;"> ciao ciao ciao ciao </div> </body> </html> 26 <DIV> Il tag DIV è utilizzato per racchiudere blocchi di tag, che possono essere elenchi, il testo stesso, o perfino parti intere della pagina come i menù, l'intestazione ed il contenuto. Proprio per questo motivo i tag DIV sono utilizzati con i CSS per la costruzione del box model, ossia un sito strutturato utilizzando soltanto i tag DIV ed escludendo le tabelle. 27 Liste • La lista è una sequenza di paragrafi. Il formato HTML mette a disposizione 4 Tag per definire delle liste: – Ordinate – Non ordinate – Menu – Directory. 28 Liste ordinate • Una lista ordinata si crea usando i seguenti Tag: – <OL> per l’apertura della – <LI> individua ogni singolo elemento della lista. La presenza del tag </LI> non è obbligatoria – </OL> per la chiusura della lista È possibile annidare varie liste Questo tag, ha tre attributi: TYPE="valore" Che serve a definire una numerazione. I valori possono essere numerici (1,2,3,4) o alfabetici (a,b,c,d). START="valore" Nel caso in cui si voglia cominciare la lista con numeri o lettere diverse da 1 e A. 29 Liste ordinate • VALUE="valore" Se si volesse attribuire un valore estraneo alla conformità della lista. Esempio: <ol type="A"> <li>Prova 1</li> <li>Prova 2</li> <li>Prova 3</li> <ol type="I" start="2"> <li>Prova A</li> <li type="1" value="10">Prova B</li> <li>Prova C</li> </ol> </ol> A. Prova 1 B. Prova 2 C. Prova 3 II. Prova 10. Prova B XI. Prova C 30 Liste non ordinate • Una lista non ordinata si crea usando i seguenti Tag: – <UL> per l’apertura della – <LI> individua ogni singolo elemento della lista. La presenza del tag </LI> non è obbligatoria – </UL> per la chiusura della lista • L'attributo del tag <LI> è: type=circle Imposta la punteggiatura a forma di piccolo cerchio. type=square Imposta la punteggiatura a forma di quadrato. 31 Liste di menu • Questo tipo di lista dovrebbe essere fatta di piccoli paragrafi (solitamente 1 linea per elemento). Essa viene visualizzata con uno stile piu' compatto rispetto alle liste non ordinate. – <MENU> apertura lista – <LI> individua ogni singolo elemento della lista. La presenza del tag </LI> non è obbligatoria – </MENU> chiusura lista 32 Liste di directory • Questo tipo di lista dovrebbe essere composta di piccoli elementi, tipicamente di 20 caratteri. Questi possono essere incolonnati lungo la pagina. – <DIR> apertura lista – <LI> individua ogni singolo elemento della lista. La presenza del tag </LI> non è obbligatoria – </DIR> chiusura lista 33
