Reti Linguaggio HTML 1 HTML = Hypertext Markup Language E il linguaggio usato per descrivere documenti ipertestuali Ipertesto = Testo + elementi di collegamento ad altri testi (link) Linguaggio di markup: descrive il contenuto Le pagine web sono documenti ipertestuali 2 Non è un linguaggio case-sensitive Permette di integrare contenuti multimediali in un documento ipertestuale Testi formattati (font, colori, ecc.) Immagini, suoni, filmati Collegamenti ad altri oggetti (links) Script (JavaScript, CGI) 3 1
Un documento HTML è un file con estensione.htm o.html. Si può generare: Con un semplice editor di testo Con apposite applicazioni WYSIWYG (What You See Is What You Get) che consentono di creare pagine molto complesse senza conoscere il linguaggio 4 I componenti fondamentali sono detti tag (di apertura/chiusura) I tag sono segnalini (markup) I tag si scrivono tra parentesi angolari < > Ad ogni tag (salvo poche eccezioni) corrisponde un tag di chiusura. <TAG attributi>contenuto</tag> 5 - Struttura delle Pagine Web - I tag possono contenere elementi al loro interno e anche altri tag La base di ogni documento HTML è: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> 6 2
- Struttura delle Pagine Web - Le informazioni nel tag <HEAD> non vengono visualizzate Il tag <HEAD> contiene altri tag, ad esempio: <HEAD> <TITLE> Prima pagina Web </TITLE> </HEAD> 7 - Struttura delle Pagine Web - Il resto della pagina sta invece all interno della sezione delimitata dai tag <BODY> <BODY> </BODY> 8 - TAG per l Indentazione - Il Tag <P> </P> inizia un nuovo paragrafo <P align="right"> </P>: inizia un nuovo paragrafo allineato a destra <P align= center"> </P>: inizia un nuovo paragrafo centrato <P align= left"> </P>: inizia un nuovo pagrafo allineato a sinistra <CENTER> </CENTER>: centra il testo <br>: va a capo 9 3
- TAG per la Formattazione - <B> </B>: testo in grassetto <I> </I>: testo in corsivo <U> </U>: testo sottolineato <PRE> </PRE>: testo preformattato <H1> </H1>,, <H6> </H6>: grandezza del testo <SUP> </SUP>, <SUB> </SUB>: apice/pedice Caratteri speciali: Es. è si scrive e&grave 10 - TAG per Elencare - <UL> <LI> elemento1 </LI> <LI> elemento2 </LI> </UL> <OL> <LI> elemento1 </LI> <LI> elemento2 </LI> </OL> (lista non ordinata) (lista ordinata) 11 - TAG per Collegare - <A indirizzo>testo</a> <A HREF= http://zeus.ing.unibs.it/fi-ges > Home Page del corso di Informatica A</A> <A HREF="mailto:saetti@ing.unibs.it">saetti@ ing.unibs.it</a> NOTA: Tra doppie virgolette si scrive l URL (Uniform Resource Locator) ovvero l indirizzo della risorsa 12 4
-TAG per Includere Immagini- <IMG indirizzo attributi> <IMG SRC= immagini/pic1.jpg WIDTH=640 HEIGHT=480> NOTA: in questo caso il tag possiede anche degli attributi, cioè WIDTH e HEIGHT 13 HTML e JavaScript JavaScript è un linguaggio di scripting latoclient, che viene interpretato dal browser. Un browser è un programma che permette di leggere le pagine scritte in linguaggio HTML. (ad es. IE,Netscape,Firefox) Le pagine web vengono inviate all utente su richiesta dello stesso utente da un web server. Il web server è un computer remoto server sul quale è installato un programma (ad es. Apache, IIS). 14 HTML e JavaScript I linguaggi di scripting che vengono eseguiti dal web server sono detti linguaggi server side o lato server (ad es. asp, php ) JavaScript, invece, è un linguaggio client side o lato client perché viene eseguito sul computer client dal browser (altri ese. VBScript, JScript) 15 5
HTML e JavaScript JavaScript è un linguaggio di scripting: la sintassi JavaScript può essere scritta nella pagina HTML, senza bisogno di produrre alcun file compilato. Con i linguaggi di programmazione come il C si scrive la sintassi, e poi la si passa a un compilatore, che produce un file compilato. 16 HTML e JavaScript JavaScript non produce un file compilato: è possibile visualizzare il codice di una pagina HTML e leggere le righe di sintassi JavaScript. Il browser, tramite un apposito motore di scripting, interpreta le parti di codice JavaScript e le esegue. JavaScript è un linguaggio interpretato. 17 HTML e JavaScript, esempio 1 function manipolastringa() var s = document.forms["esempio1"].stringa.value; var l = document.forms["esempio1"].stringa.value.length; var r = ""; r = 'Esempi di manipolazione eseguiti sulla stringa inserita:\n\n' + 'Numero di caratteri:' + l; r = r + '\n' + 'In minuscolo:' + s.tolowercase(); r = r + '\n' + 'In maiscuolo:' + s.touppercase(); r = r + '\n' + 'Invertita:' + InvertiAlternata(s,l,'no'); r = r + '\n' + 'Invertita e Alternata:' + InvertiAlternata(s,l,'si'); r = r + '\n' + 'Vocali:' + Estrai(s,l,'vocali'); r = r + '\n' + 'Non vocali:' + Estrai(s,l,'nonVocali'); document.forms["esempio1"].stringhe_manipolate.value = r; 18 6
HTML e JavaScript, esempio 2 function calcolafattoriale (x) if (x > 1) return (x * calcolafattoriale (x - 1)); else return 1; function inseriscifattoriale() document.forms["esempio2"].areatestofattoriale.value = calcolafattoriale (document.forms["esempio2"].numero.selectedindex); 19 HTML e JavaScript, esempio 3 <select name="numero" onchange="sbianca()" size="1"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> </select> function sbianca() document.forms["esempio2"].areatestofattoriale.value = ''; document.forms["esempio2"].areatestonumeriprimi.value = ''; document.forms["esempio2"].areatestosomma.value = ''; 20 7