HTML HyperText Markup Language

HTMLHyperText Markup Language Linguaggio base per produrre documenti per World Wide Web (WWW o WEB) Documenti WEB pagine ipermediali che contengono • testo • immagini • suoni • legami ipertestuali a - altre pagine - programmi - immagini, suoni, ... Pagine localizzate su server web e visualizzate da un client (browser)

HTMLHyperText Markup Language Per visualizzare le pagine HTML si usano programmi chiamati Web browser (Netscape Navigator, Microsoft Internet Explorer, NCSA Mosaic, Sun HotJava, ....) Le pagine WWW sono trasferite attraverso la rete Internet usando un protocollo particolare HTTP (HyperText Transfer Protocol) costruito al di sopra di TCP/IP (base di Internet) Localizzate mediante un ben preciso sistema di indirizzamento: URL (Uniform Resource Locator)

request Server client response APPROFONDIMENTO: Architettura client-server Un server è programma “in ascolto” su una porta TCP. Quando arriva una richiesta da un client, il server analizza questa richiesta (eventualmente con l’aiuto di altri programmi), elabora una risposta (anche in questo caso, eventualmente con l’aiuto di altri programmi ) e la invia al client. Un client è un programma che si connette ad un server, fa una richiesta ed aspetta una risposta. Un server, generalmente, può servire più client contemporaneamente.

APPROFONDIMENTO: Come funziona il Web HTTP Http (HyperText Transfer Protocol) è il protocollo di comunicazione utilizzato da un client (browser) e da un server (HTTP Server) per trasferire ipertesti (file che contengono ipertesti). URL Un URL (Uniform Resource Locator) è l’indirizzo di una risorsa, per es., di una pagina Web. Ha la seguente forma: http://www.di.unito.it/cgena/index.html protocollo nome del file DNS del sito Web

APPROFONDIMENTO: Come funziona il Web DNS Il DNS (Domain Name System) è un sistema di denominazione gerarchico, ripartito in domini, sotto-domini, sotto-sotto-domini, ecc… Un sito Web viene univocamente identificato dal suo DNS: www.di.unito.it = sito Web del Dipartimento di Informatica dominio sotto-dominio server (host) sotto-sotto-dominio DNS Server: programma che conosce le corrispondenze tra DNS e indirizzi IP dato un DNS (www.di.unito.it) restituisce l’IP (130.192.239.1) necessario per la connessione

APPROFONDIMENTO: Come funziona il Web Cosa vuol dire “navigare” sul Web Quando un utente si connette ad un sito Web, per es. facendo click su un link, succedono le seguenti cose: • Il browser analizza l’URL • Chiede al DNS Server l’indirizzo IP corrispondente al DNS contenuto nell’URL • Effettua una connessione al server corrispondente all’IP ricevuto e gli invia una richiesta per il file indicato nell’URL • Il server risponde inviando il file richiesto • Il browser intepreta il file ricevuto, visualizzandolo secondo le specifiche in esso contenute

request (pagina) Server client elaborazione ? Server client  pagina response (pagina) Server client APPROFONDIMENTO: Come funziona il Web Nel caso più semplice l'URL contiene l'indirizzo di una pagina HTML(per es. http://www.di.unito.it/~cgena/pub.html): il contenuto è fisso, definito nel momento in cui la pagina HTML viene scritta Pagine Web "dinamiche" = pagine il cui contenuto viene generato (selezionato, composto) al momento della richiesta

HTMLHyperText Markup Language Internet fornisce vari servizi • Trasferimento dati: FTP • Posta elettronica • Collegamento Remoto: telnet • Liste di discussione: News • Basi di dati in rete (ES: Hytelnet, Melwyl) • Network InformationRetrieval (motori di ricerca) • Navigazione in rete testuale: Gopher • Navigazione in rete ipertestuale: WWW

HTMLCaratteristiche HTML è un linguaggio di formattazione di documenti Un documento HTML è un file di testo (file ASCII) contenente dei comandi per • formattazione • inserimento parti multimediali • link ipertestuali I comandi (TAGS) hanno una forma sintattica particolare <NOME-COMANDO> informazioni </NOME-COMANDO> I comandi (tags) hanno nomi mnemonici

HTML Un documento HTML è costituito da due parti <HTML> <HEAD> descrizione delle caratteristiche del documento </HEAD> <BODY> documento vero e proprio </BODY> </HTML>

HTMLHyperText Markup Language HEAD la parte fondamentale è il titolo del documento che verrà visualizzato come titolo nella finestra del browser ATTN: poiché il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca è importante che esso sia significativo <HEAD> <TITLE> Master in Tecnologia e Comunicazione Multimediale </TITLE> </HEAD>

HTMLHyperText Markup Language IL TAG META <HEAD> <TITLE> Master in Tecnologia e Comunicazione Multimediale </TITLE> <meta name="keywords" content=“master, comunicazione, corep, torino"> <meta name="description" content=“master organizzato dal corep in collaborazione…"> <meta name=“author" content=“Cristina Gena"> </HEAD>

HTMLHyperText Markup Language BODY Contiene il documento (pagina) vero e proprio Documento di testo Il testo può essere inserito liberamente nella parte BODY e verrà visualizzato secondo le direttive di formattazione. <BODY> corpo della pagina </BODY> Più avanti vedremo vari attributi di Body

HTMLHyperText Markup Language HEADERS <H1> titolo1 </H1> ... <H6> titolo6 </H6> permettono di indicare quali parti di testo vengono usate come titoli OSS: H1, ..., H6 sono usati anche per controllare le dimensioni dei caratteri: H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli

HTMLHyperText Markup Language COMANDI PER ANDARE A CAPO a capo a capo e inizio nuovo paragrafo (salta una linea) OSS: • HTML non è sensibile ai caratteri maiuscoli e minuscoli nei comandi • HTML non è sensibile ai blank e alle linee vuote

HTMLHyperText Markup Language ATTRIBUTI DI BODY Il comando BODY ha della opzioni che permettono di stabilire lo stile dei caratteri <BODY bgcolor="colore sfondo" text="colore testo" background="pathname del file con immagine per lo sfondo" link="colore link da visitare" (VEDREMO) vlink="colore link visitati" (VEDREMO) >

HTMLHyperText Markup Language Il colore può essere specificato con • red, yellow, ... • codice esadecimale 00 00 00 (rosso verde blu vengono combinati numericamente per formare tutti i colori) OSS: di default si ha sfondo grigio, testo nero, link da visitare blu, link visitati rossi

HTMLHyperText Markup Language DIMENSIONI CARATTERI <BASEFONT> e Dimensioni dei caratteri da 1 (piccolo) a 7 (grande) <BASEFONT size=4> testo a dimensione 3 ... si ritorna a basefont dim+1 del precedente ... si ritorna al precedente

HTMLHyperText Markup Language Il comando FONT ha in realtà tre parametri • size per cambiare la dimensione • color per cambiare il colore • face per cambiare il font OSS: l'ultimo parametro funziona solo su alcuni browser Questo testo viene visualizzato in rosso, ha dimensione 5 e font Courier ... Si ritorna a colore, dimensione, font precedenti

HTML ALLINEAMENTO Il comando ha un'opzione align per l'allineamento del testo nel paragrafo testo allineato a sinistra testo allineato a destra testo allineato al centro OSS: la centratura del testo si può ottenere anche con il comando <CENTER> testo da centrare </CENTER>

HTMLHyperText Markup Language • FORMATO • Esistono vari modi per cambiare il formato dei caratteri • Stili fisici (poco consigliati) • Stili Logici • STILI FISICI • testo testo in grassetto • testo testo in corsivo • <TT> testo </T> testo typewriter • testo testo sottolineato

HTMLHyperText Markup Language • STILI LOGICI • testo • {emphasized (di solito corsivo)} • <CITE> testo </CITE> • {per titoli libri (di solito in corsivo)} • <CODE> testo </CODE> • {per codice di computer (font con caratteri a grandezza fissa)} • testo {bold}

HTMLHyperText Markup Language INDICI E PEDICI a 1 produce a1 b 2 produce b2 Alla fine di un documento si può usare il comando <ADDRESS> che consente di firmare la pagina!

HTMLHyperText Markup Language Tabella colori in esadecimale I colori in HTML si specificano utilizzando il sistema RGB (Red, Green, Blu), scrivendoli in esadecimale preceduti da “#”. Miscelando questi valori è possibile ottenere una scala cromatica. LINK ALLE TABELLE ESADECIMALI: http://web-link.it/html/colori256.htm www.asciitable.it/colorihtml.asp

ESERCIZIO 1.Creare (se non esistente) una cartella con il nome del vostro sito. 2.Creare nella cartella un documento HTML chiamato a piacere e valido con i seguenti elementi: A) sfondo: arancio (trovare il codice esadecimale corrispondente). B) colore di base per il testo: blu (utilizzare il nome del colore). C) dimensione di base del testo: 3. D) titolo H1 con una ed una sola parola del titolo deve essere rossa e in corsivo E) titolo H2 sottolineato e in grassetto (colore a scelta) F) 1 paragrafo in Arial con il font di dimensione invariata e centrato G) 1 paragrafo con il font di dimensione maggiore in Comic sans MS, usando le dimensioni relative e allineato a destra H) 1 paragrafo con il font di dimensione 3, font Verdana, di colore verde scuro (trovare il codice esadecimale corrispondente) e allineato a sinistra PS: Ricordatevi di salvare “.html” Il testo andate a scaricarlo da una qualsiasi pagina web!!!

HTMLHyperText Markup Language Liste di elementi Può essere utile poter costruire liste di elementi come quella seguente: Il menu prevede due primi • penne all’arrabbiata • lasagne al forno HTML fornisce vari comandi per creare le liste LISTE NON NUMERATE <UL> LISTE NUMERATE <OL>

HTMLHyperText Markup Language 1) Liste non numerate: <UL> Il menu prevede due primi <UL> <LI> penne all’arrabbiata <LI> lasagne al forno </UL> <UL> ha l'opzione type <UL type=disc> <UL type=circle> <UL type=square>

HTMLHyperText Markup Language 2) Liste numerate: <OL> Il menu prevede due primi <OL> <LI> penne all’arrabbiata <LI> lasagne al forno </OL> Produce Il menu prevede due primi 1. penne all’arrabbiata 2. lasagne al forno

HTML Opzioni type={1,A,a,I,i} start=numero ES: Il menu prevede due primi <OL type=i start=3> <LI> penne all’arrabbiata <LI> lasagne al forno </OL> Produce: Il menu prevede due primi iii penne all’arrabbiata iv lasagne al forno

HTMLHyperText Markup Language 3) Liste di definizioni: <DL> Per scrivere delle definizioni ES: Alcune definizioni: <DL> <DT> HTML <DD> ling. per scrivere pagine WWW <DT> Internet <DD> rete mondiale di calcolatori </DL>

HTMLHyperText Markup Language Si possono annidare liste, non necessariamente dello stesso tipo. <UL> <LI> primo elemento <OL> <LI> primo sottolista <LI> secondo sottolista </OL> <LI> secondo elemento <UL>

HTMLHyperText Markup Language Testo preformattato È possibile dare disposizioni affinché una parte di testo non venga formattata <PRE> questo testo sarà lasciato come scritto </PRE>

HTMLHyperText Markup Language Citazioni Per inserire citazioni nel testo si usa il comando <BLOCKQUOTE> citazione </BLOCKQUOTE>

HTMLHyperText Markup Language Linee orizzontali Per separare parti di testo si può usare il comando <HR> che produce _____________________________________________ Questo comando ha tre opzioni <HRsize=numero {spessore in pixel} width=numero | numero% {lunghezza in pixel o in percentuale} align={left | right} {default centro} color=“codice esadecimale/colore” >

HTMLHyperText Markup Language Testo lampeggiante (SOLO CON NETSCAPE!!!) Testo, in qualunque forma, che lampeggia in fase di visualizzazione <BLINK> questo testo lampeggia </BLINK> Testo scorrevole <MARQUEE> testo che scorre </MARQUEE>

HTMLHyperText Markup Language Commenti Può essere utile mettere dei commenti nel documento che non sono visualizzati dal browser

HTMLHyperText Markup Language Immagini Fino ad ora abbiamo visto come si può formattare il testo; HTML permette di inserire immagini usando il comando <IMG> • l'immagine deve essere su un file a parte i browsers supportano formati quali GIF, JPEG BITMAP, PNG • il comando IMG ha vari attributi

HTMLHyperText Markup Language <IMG src=pathname o URL dell'immagine align=left | right {piu’ allineamenti particolari con il testo} alt=text {testo alternativo all'immagine} border=numero {larghezza in pixel del bordo}height=numero {altezza in pixel} width=numero {larghezza in pixel} hspace=numero {spazio in pixel a destra e sinistra dell'immagine} vspace=numero {spazio in pixel sopra e sotto l'immagine} >

HTMLHyperText Markup Language ATTENZIONE! Per centrare l’immagine usate il tag <CENTER> in questo modo: <CENTER> <IMG scr=“sole.jpg”> </CENTER>

HTMLHyperText Markup Language Suoni È possibile associare suoni alla presentazione di una pagina usando il comando <BGSOUND> Anche i suoni devono essere memorizzati su file a parte; esistono vari formati • .AU, .WAV .AIFF • MIDI (.mid)

HTMLHyperText Markup Language <BGSOUND src="pathname del suono" | "URL del suono" loop="numero" | "infinite" > Il parametro LOOP serve per stabilire quante volte si deve ripetere il suono. Se assume valore infinite si ripete il suono fino a quando non si esce dalla pagina ES: <BGSOUND src="suoni/pippo.wav" loop="3">

ESERCIZIO 2 Pagina con: - immagine (a scelta) - colore testo di base a scelta ma da scrivere in esadecimale - Dimensione carattere di base = 4 - una barra orizzontale - paragrafo in corsivo, in Verdana e allineato a destra - un esempio di apice e pedice - firma del documento a dimensione 2

ESERCIZIO 3 Aggiungete alla pagina dell’esercizio 2: - una lista non ordinata di 3 elementi (scegliete il type) - una riga (valori a scelta) - una lista ordinata di tre elementi type=A e che parta dal quarto elemento. - un testo preformattato - un testo scorrevole con dimensioni e colori a scelta SALVATE TUTTO NELLA STESSA CARTELLA!!

HTMLHyperText Markup Language LEGAMI IPERTESTUALI Vediamo ora come creare link ipertestuali in una pagina HTML Primo passo: Definizione precisa di URL standard URL è costituita da tre parti protocollo://indirizzo internet [:porta]/pathname#label Il PROTOCOLLO descrive il tipo di collegamento da realizzare

HTMLHyperText Markup Language file: {per file locali senza indirizzo Internet} http: {per file remoti da trasferire con http} ftp: {attiva trasferimento dati con ftp} news: {attiva collegamento a server news} telnet: {attiva sessione di collegamento remoto} mailto: {attiva spedizione di mail} Il protocollo più importante per i legami ipertestuali è http

HTMLHyperText Markup Language ES: file:HTML/pippo.html {file pippo.html in directory HTML locale} http://www.di.unito.it/home.html {file home.html su server www.di.unito.it} ATTENZIONE! www in questo caso è il nome di una macchina nel dominio di.unito.it Di solito alle macchine server WWW viene dato il nome www

HTMLHyperText Markup Language • http://www.di.unito.it/cgena/wd.html • {file con pathname cartella/pagina.html} • mailto:cgena@di.unito.it • {attiva il programma di invio mail} • ftp://ftp.di.unito.it/pippo.htm • {attiva trasferimento del file pippo dal • serverftp.di.unito.it} • ATTENZIONE! anche in questo caso ftp è il nome della macchina ftp-server

HTML FTP (File Transfer Protocol) è un protocollo di comunicazione studiato per la copia di file o di testo tra due computer collegati alla rete. Esso è stato sviluppato prima dell'HTTP, che svolge funzioni relativamente simili anche se mirate al World Wide Web HTTP è essenzialmente centrato sul trasferimento di iperoggetti e sulla loro visualizzazione FTP permette di leggere le directory e il loro contenuto sul computer remoto, e di muoversi al loro interno; in pratica, l'hard disk del sito FTP viene momentaneamente collegato al proprio, ed è possibile compiere tutte le operazioni che normalmente si compiono con i file presenti sul proprio hard disk (copia, cancellazione, spostamento...).

HTMLHyperText Markup Language • telnet:pianeta.di.unito.it • {attiva finestra di interazione remota}

HTMLHyperText Markup Language TELNET Telnet è un protocollo di comunicazione che permette di controllare un computer a distanza. Questa esigenza nasce dal fatto che, fino alla diffusione dei personal computer, i "computer" utilizzati erano grosse stazioni di lavoro che permettevano a più utenti di lavorare contemporaneamente utilizzando terminali differenti (il PC può essere usato da un solo utente alla volta). Per il funzionamento del computer è allora indifferente se il terminale si trovi a venti centimetri o a diecimila chilometri da esso.

HTML HyperText Markup Language