Laboratorio di Informaticahomes.di.unimi.it/~cazzola/didattica/lab_di_informatica_x...1. Walter...

Walter CazzolaWalter Cazzola Lab. di Informatica: HTMLLab. di Informatica: HTML Lucido 1Lucido 1

LaboratorioLaboratorio didi InformaticaInformaticaCorsoCorso didi LaureaLaurea InterfacoltInterfacoltàà in in BiotecnologieBiotecnologie

LezioneLezione 5: HTML5: HTML((ElementiElementi didi Base)Base)


World Wide WebWorld Wide Web

Si basa sul protocollo HTTP ed Si basa sul protocollo HTTP ed èè la vera novitla vera novitàà degli degli anni anni ’’90.90.

Sviluppato presso il CERN di Ginevra Sviluppato presso il CERN di Ginevra èè il piil piùù potente potente mezzo di diffusione telematica di documenti eletmezzo di diffusione telematica di documenti elet--tronici.tronici.

Mezzo di comunicazione globale, interattivo, multiMezzo di comunicazione globale, interattivo, multi--mediale e ipertestuale ha cambiato radicalmente mediale e ipertestuale ha cambiato radicalmente il modo di comunicare e di lavorare. il modo di comunicare e di lavorare.


OrganizzazioneOrganizzazione didi un un TestoTestolettura sequenzialelettura sequenziale

pagpag77

pagpag55

pagpag66

pagpag22

pagpag33

pagpag44

pagpag11


OrganizzazioneOrganizzazione didi un un IpertestoIpertesto

lettura secondo legami associativilettura secondo legami associativi

nodi (pagine)nodi (pagine)

linklink

anchoranchor


TerminologiaTerminologia

browserbrowser: programma applicativo per navigare in rete.: programma applicativo per navigare in rete.

page (pagina)page (pagina): singolo : singolo ““fogliofoglio”” di un ipertesto.di un ipertesto.

homehome--pagepage: : ““punto di ingressopunto di ingresso”” di un sito web.di un sito web.

hotspot, hotwordhotspot, hotword: porzione di una pagina che, se se: porzione di una pagina che, se se--lezionata, permette di raggiungere un altro punto lezionata, permette di raggiungere un altro punto delldell’’ipertesto o una nuova risorsa.ipertesto o una nuova risorsa.

FAQFAQ: domande ricorrenti su un certo argomento.: domande ricorrenti su un certo argomento.


Client/ServerClient/Server

Il WWW usa il modello clientIl WWW usa il modello client--server per lo scambio delle server per lo scambio delle informazioni.informazioni.

Abbiamo:Abbiamo:–– il client (browser), programma applicativo che il client (browser), programma applicativo che ““giragira”” sulsul--

ll’’elaboratore dellelaboratore dell’’utenteutente–– il server, programma applicativo che il server, programma applicativo che ““giragira”” sullsull’’elaboratore elaboratore

del fornitore di informazioni (provider) del fornitore di informazioni (provider) –– la retela rete


Client/ServerClient/Server

Ogni utente può richiedere delle informazioni attraverOgni utente può richiedere delle informazioni attraver--so il suo programma client.so il suo programma client.

La richiesta La richiesta ““viaggiaviaggia”” attraverso la rete fino a raggiunattraverso la rete fino a raggiun--gere lgere l’’elaboratore server.elaboratore server.

Il server inteIl server interrpreta la richiesta e preta la richiesta e restituiscerestituisce al client un al client un file file HTML HTML contenente le informazioni desiderate (opcontenente le informazioni desiderate (op--pure pure esegueesegue unouno o o pipiùù programmiprogrammi e restituisce e restituisce unaunapaginapagina generatagenerata dinamicamentedinamicamente).).


LinguaggiLinguaggi didi MarkMark--upup

IIn un documento il n un documento il markmark--upup èè il codice che contiene il codice che contiene le informazioni per la sua formattazione.le informazioni per la sua formattazione.

NNellell’’ambito dellambito dell’’elaborazione elettronica dei testi soelaborazione elettronica dei testi so--no stati creati strumenti informatici per automatizno stati creati strumenti informatici per automatiz--zare alcune operazioni per la creazione dei docuzare alcune operazioni per la creazione dei docu--menti.menti.

EsistonoEsistono programmiprogrammi per per ll’’elaborazioneelaborazione deidei testitesti didi titi--popo diversodiverso::–– gligli editor editor WYSIWYGWYSIWYG–– gligli editor editor cheche usanousano ilil concettoconcetto didi markmark--upup


LinguaggiLinguaggi didi MarkMark--upup

NelNel casocaso didi editor editor cheche usanousano ilil concettoconcetto didi markmark--up up un un testotesto èè costituitocostituito dada due due partiparti::–– ilil contenutocontenuto verovero e e proprioproprio;;–– le le ““istruzioniistruzioni”” cheche specificanospecificano come come ilil contenutocontenuto devedeve

essereessere rappresentatorappresentato sulsul dispositivodispositivo (lo (lo schermoschermo didi un un PC, ma PC, ma ancheanche per per esempioesempio unauna stampantestampante).).

In In generegenere si racchiude il testo tra istruzioni chiamasi racchiude il testo tra istruzioni chiama--te te tagtag (o etichette o codici).(o etichette o codici).

I tag I tag sonosono scrittiscritti usandousando ii normali caratteri e quindi normali caratteri e quindi i documenti possono essere creati usando semplii documenti possono essere creati usando sempli--ci editor di testo.ci editor di testo.


File Word (.doc)File Word (.doc)


File Word e AffiniFile Word e AffiniAAprendo il file precedenteprendo il file precedente con un editor (es. Blocco Nocon un editor (es. Blocco No--te) si vede il formato interno di Word e non si distinte) si vede il formato interno di Word e non si distin--guono markguono mark--up.up.

RTFRTF èè un formato solo testo in cui si distinguono inforun formato solo testo in cui si distinguono infor--mazioni legate alla presentazione del documentomazioni legate alla presentazione del documento e ine in--formazioni che fannoformazioni che fanno parte del contenuto.parte del contenuto.

PS/PDFPS/PDF sonosono formatiformati utilizzatiutilizzati per la stampa di docuper la stampa di docu--menti. Anche in questomenti. Anche in questo caso si possono distinguere incaso si possono distinguere in--formazioni legate alla presentazione del documento ed formazioni legate alla presentazione del documento ed informazioni che fanno parte del documento stesso.informazioni che fanno parte del documento stesso.


HTMLHTMLGGli ipertesti del li ipertesti del wweb sono scritti usando il linguaggio eb sono scritti usando il linguaggio

HTML (HyperHTML (HyperTText Markext Mark--up up LLanguage).anguage).

HTML HTML NONNON èè un linguaggio di programmazione.un linguaggio di programmazione.

HTML HTML èè un linguaggio di markun linguaggio di mark--up e permette di deup e permette di de--scrivere la disposizione di tutti gli elementi prescrivere la disposizione di tutti gli elementi pre--senti allsenti all’’interno di un documento.interno di un documento.


HTMLHTML

II documenti HTML sono dei file in formato testo documenti HTML sono dei file in formato testo (codice ASCII).(codice ASCII).

SSi possono creare con degli editor di testo dandogli i possono creare con degli editor di testo dandogli ll’’estensione .htm o .html.estensione .htm o .html.

II browser leggono i documenti HTML e li visualizzano browser leggono i documenti HTML e li visualizzano interpretando le specifiche di formattazione in mointerpretando le specifiche di formattazione in mo--do sequenziale.do sequenziale.


HTMLHTML

<HTML><HTML><HEAD><HEAD><TITLE> <TITLE> DocumentoDocumento didi ProvaProva</TITLE></TITLE></HEAD></HEAD>

<BODY><BODY>DocumentoDocumento HTML HTML didi provaprova <BR><BR>RicordarsiRicordarsi didi salvaresalvare in in formatoformato solo solo testotesto e e didiDare Dare ll’’estensioneestensione opportunaopportuna (.(.htmhtm o .html).o .html).</BODY></BODY>

</HTML></HTML> documentodocumentoHTMLHTML

Utilizzare NotePad,Utilizzare NotePad, WordWord--PadPad o o qualunquequalunque altroaltro ediedi--tortor didi testotesto..

scegliere il formato solo scegliere il formato solo testo e salvare con estentesto e salvare con esten--sione .htm (.html)sione .htm (.html)


HTML: HTML: SintassiSintassi

UUn documento HTML inizia sempre con il tag n documento HTML inizia sempre con il tag <html><html> e e

termina sempre con il tag termina sempre con il tag </html></html>..

NB: il linguaggio HTML NB: il linguaggio HTML èè casecase--insensitive e quindi insensitive e quindi

<HTML><HTML>, , <html><html>, , <Html><Html> sono tutti tag leciti (lo stessono tutti tag leciti (lo stes--

so vale per gli altri tag)so vale per gli altri tag)..

SuggerimentoSuggerimento: : èè megliomeglio decideredecidere allall’’inizioinizio come come sisi

scriverannoscriveranno i tag ed i tag ed essereessere consistenticonsistenti..


HTML: HTML: SintassiSintassi

<<html>html><head><head>

caratteristiche del documentocaratteristiche del documento</head></head>

<body><body>documento documento

</body></body></html></html>


HTML: <head>HTML: <head>

<<html>html>

<head><head><title><title>titolo del documentotitolo del documento</title></title><meta name=<meta name="keywords""keywords" content=content="parole chiave qui""parole chiave qui">><meta name=<meta name="author""author" content =content ="nome e cognome qui""nome e cognome qui"> >

</head></head>

....................................

....................................

</html></html>


HTML: <body>HTML: <body>

<<html>html><head><head>

<title><title>titolo del documentotitolo del documento</title></title></head></head>

<body<body lista di opzionilista di opzioni>>

documento vero e propriodocumento vero e proprio

</body></body></html></html>


HTML: <body>HTML: <body>

<body <body bgcolorbgcolor==""colorecolore sfondosfondo" " background=background=""nomenome file con file con ll’’immagineimmagine" " text=text=""colorecolore testotesto""link=link=""colorecolore link link dada visitarevisitare""vlinkvlink==""colorecolore link link visitatovisitato""alinkalink==""colorecolore link link selezionatoselezionato""

>>

NB: lNB: l’’ordine con cui si scrivono ordine con cui si scrivono gligli attributiattributi non non èèimportante.importante.

Es. <body text="white" link="#cc0000" Es. <body text="white" link="#cc0000" background="images/background="images/sabbiasabbia.gif">.gif">


HTML: RGBHTML: RGB

OOgni colore può essere codificato mediante tre numeri gni colore può essere codificato mediante tre numeri compresi tra compresi tra 00 ee 255255 che rappresentano le quantitche rappresentano le quantitààdi di ROSSOROSSO VERDEVERDE e e BLUBLU presenti nel colore stesso.presenti nel colore stesso.

OOgni numero compreso tra 0 e 255 deve essere tragni numero compreso tra 0 e 255 deve essere tra--sformato nella rappresentazione esadecimalesformato nella rappresentazione esadecimale corricorri--spondente (base 16)spondente (base 16)..

CCon questa codifica si possono rappresentare pion questa codifica si possono rappresentare piùù di di 1616,7 ,7 milionimilioni di colori diversidi colori diversi


HTML: RGBHTML: RGB

neronero 0 0 00 00 ##000000000000blublu 0 0 00 255255 ##00000000FFFFverdeverde 0 0 255255 00 ##0000FFFF0000rossorosso 255 255 00 00 ##FFFF00000000biancobianco 255 255 255255 255255 ##FFFFFFFFFFFF

NB: le codifiche non si possono imparare a memoria; nei file NB: le codifiche non si possono imparare a memoria; nei file HTML le codifiche esadecimali vanno scritte senza lasciare HTML le codifiche esadecimali vanno scritte senza lasciare spazi vuoti tra le cifre.spazi vuoti tra le cifre.

decimaledecimale ##esadecimaleesadecimale


HTML: Come HTML: Come TrovareTrovare i i ColoriColori??

SiSi puòpuò trovaretrovare ilil codicecodice RGB RGB didi un un colorecolore usandousando la la tavolozzatavolozzadeidei coloricolori didi un un programmaprogramma didi graficagrafica (in (in questoquesto casocaso Paint) o Paint) o collegandosicollegandosi a: a: http://lightsphere.com/colors/.http://lightsphere.com/colors/.


HTML: HTML: TitoliTitoli

IIl documento inserito nel l documento inserito nel <body><body> viene visualizzaviene visualizza--to secondo le direttive di formattazione.to secondo le direttive di formattazione.

per scrivere titoli si possono usare:per scrivere titoli si possono usare:

<h1><h1> titolo1titolo1 </h1></h1><h2><h2> titolo2titolo2 </h2></h2>

……<h6><h6> titolo6titolo6 </h6></h6>

per andare a capo:per andare a capo: <br> <br> oo <p><p> …… </p></p>


HTML: HTML: EsempioEsempio<html><html><head><head><title><title>ProvaProva didi documentodocumento</title></title></head></head><body <body bgcolorbgcolor=="green""green" text=text="white""white">><h1><h1>TitoloTitolo importanteimportante</h1></h1><h2><h2>TitoloTitolo menomeno importanteimportante</h2></h2><<brbr><><brbr>>Hello world hello world Hello world hello world hello world hello world hello world hello world <<brbr><><brbr>>Hello world hello world Hello world hello world hello world hello worldhello world hello world</body></body></html></html>


HTML: HTML: CaratteriCaratteri

Tag per la Tag per la formattazioneformattazione del del testotesto::<b><b> grassetto grassetto </b></b><i><i> corsivo corsivo </i> </i> <em><em> enfatizzato enfatizzato </em></em><code><code> codice codice </code></code><strong><strong> grassetto grassetto </strong></strong><font size=<font size=""33"">> testo testo </font></font><font color=<font color=""blueblue"">> ......</font> </font> <font face=<font face=""ArialArial"">> ......</font></font>


HTML: HTML: AllineamentoAllineamento

Tag per Tag per ll’’aallineamento dei paragrafi di testo:llineamento dei paragrafi di testo:<p align=<p align=""centercenter"">><p align=<p align=""rightright"">><p align=<p align=""justifyjustify"">><center><center>testo da centraretesto da centrare</center></center>


HTML: HTML: ElenchiElenchi

<<ul>ul> e e <li><li> (elenchi non ordinati)(elenchi non ordinati)<ul><ul>

<li><li>primo elementoprimo elemento</li></li><li><li>secondo elementosecondo elemento</li></li>

</ul></ul>

<ol><ol> e e <li> <li> (elenchi numerati)(elenchi numerati)<ol><ol>

<li><li>primo elementoprimo elemento</li></li><li><li>secondo elementosecondo elemento</li></li>

</ol></ol>


HTML: HTML: EsempioEsempio<html><html><head><head><title><title>ProvaProva didi documentodocumento<</title>/title></head></head><body <body bgcolorbgcolor=="green""green" text=text="white""white">><<brbr><><brbr><><brbr>><<olol>><<lili><font color=><font color="#dd0000"#dd0000““ face=face="Courier""Courier">>

Primo Primo elementoelemento delladella listalista</font></</font></lili>><<lili>>SecondoSecondo elementoelemento delladella listalista</</lili>><<lili><font size=><font size=+2+2>>

TerzoTerzo elementoelemento delladella listalista</font></</font></lili>><<lili>>…………</</lili>></</olol>></body></body></html></html>

HTML: HTML: AltriAltri MarcatoriMarcatori

LLinee orizzontaliinee orizzontali <hr><hr><hr<hr width=width=""90%90%"" size=size=""33"">>

TTesto lampeggiante (solo per Netscape)esto lampeggiante (solo per Netscape)<blink><blink> questo testo lampeggiaquesto testo lampeggia </blink></blink>

TTesto scorrevole (solo per Explorer)esto scorrevole (solo per Explorer)<marquee><marquee> questo testo scorrequesto testo scorre </marquee></marquee>

CCommentiommenti<!>


HTML: <HTML: <imgimg>>

<<img img srcsrc==""nome file dellnome file dell’’immagineimmagine""alignalign==""leftleft"" | | ""rightright"" | | ""centercenter""borderborder==""numeronumero""heightheight==""numeronumero""widthwidth==""numeronumero""hspacehspace==""numeronumero""vspacevspace==""numeronumero""alt =alt =""testo alternativo alltesto alternativo all’’immagineimmagine"">>

NB: lNB: l’’immagine deve essere su un file a parte e immagine deve essere su un file a parte e deve essere in formato GIFdeve essere in formato GIF, PNG, PNG o JPEG.o JPEG.


HTML: HTML: EsempioEsempio<html><html><head><head><title><title>Prova di documentoProva di documento</title></title>

</head></head><body bgcolor=<body bgcolor="white"white"" text=text="green""green">><center><center><hr size<hr size==""22"" width=width="400""400"><br><br>><br><br><img src=<img src="tartaruga.gif""tartaruga.gif">><br><br><br><br><hr size<hr size==""22"" width=width="400""400">><br><br><br><br><img src=<img src=““lab.jpglab.jpg"" alt=alt=““un un laboratoriolaboratorio"">><<br><br>br><br><hr size<hr size==""22"" width=width="400""400"><br><br>><br><br></center></center></body></body>

</html></html>


HTML: <a>HTML: <a>

LLink ink <a><a> ... ... </a></a><a href=<a href=""URLURL"">>testo del linktesto del link</a></a>

Gli indirizzi per Gli indirizzi per ““trovaretrovare”” i documenti nel i documenti nel wweb sono eb sono detti Uniformdetti Uniform ResourceResource Locator (URL) e Locator (URL) e lili ideniden--tificano in modo univoco:tificano in modo univoco:

protocollo://indirizzo internet del protocollo://indirizzo internet del serverserver//pathnampathnamee


HTML: <a>HTML: <a>

<a href<a href==""http://www.unihttp://www.unimimi..itit"">>UniversitUniversitàà di di MilanoMilano</a></a>

protocolloprotocollo

indirizzoindirizzo internet del serverinternet del server

<a href<a href==""http://www.http://www.disidisi..uniunigege..itit/person//person/CazzolaWCazzolaW/index.html/index.html"">>Walter CazzolaWalter Cazzola</a></a>

protocolloprotocollo

indirizzoindirizzo internet del serverinternet del server pathnamepathname


HTML: <a>HTML: <a>

Link Link interniinterni alloallo stessostesso documentodocumento: : sisi usausa ll’’attributoattributo name name del tag del tag <a><a>

ArticoloArticolo 11ArticoloArticolo 22ArticoloArticolo 33…………ArticoloArticolo 2020

ArticoloArticolo 11blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blablablabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blablablabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blablablabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blablaArticoloArticolo 22blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla………………………………………………………………………………………………………………..


HTML: <a>HTML: <a>SiSi devonodevono marcaremarcare quellequelle porzioniporzioni del del documentodocumento dove dove sisi vuolevuole

""saltaresaltare""



<a name=<a name=""art1art1"">>……</a></a>



HTML: <a>HTML: <a>Per i link Per i link interniinterni sisi devedeve usareusare nellnell’’attributoattributo hrefhref ilil nomenome sceltoscelto

come come valorevalore delldell’’attributoattributo name, name, precedutopreceduto daldal simbolosimbolo ##





<a <a hrefhref=="#"#art1art1"">>ArticoloArticolo 11</a></a><a <a hrefhref=="#"#art2art2"">>ArticoloArticolo 22</a></a><a <a hrefhref=="#"#art3art3"">>ArticoloArticolo 33</a></a>


HTML: AudioHTML: Audio

FFormati audio: .au .aiff .mid .wavormati audio: .au .aiff .mid .wav

<a href=<a href=""nome file audionome file audio"">>clicca quiclicca qui</a></a>

<bgsound<bgsound src=src=""nome file audionome file audio"" loop=loop=""1010"">>

AttenzioneAttenzione allealle dimensionidimensioni deidei file file …… in in reterete cicimettonomettono tempo ad tempo ad essereessere scaricatiscaricati!!

NB: bgsound fa partire lNB: bgsound fa partire l’’audio quando si entra audio quando si entra nella pagina ma funziona solo in Explorernella pagina ma funziona solo in Explorer


HTML: VideoHTML: Video

FFormati video: .mpg .avi .mov ormati video: .mpg .avi .mov

<a href<a href==""nome file videonome file video"">>clicca quiclicca qui</a></a>

<img<img dynsrcdynsrc==""nome file videonome file video"" srcsrc==""nomenome file file immagineimmagine"">>

NB: dynsrc fa partire automaticamente il video ma NB: dynsrc fa partire automaticamente il video ma funziona solo in Explorerfunziona solo in Explorer


HTML: HTML: TabelleTabelle<table><table>

<<thth>> <<thth>> <<thth>>

</</thth>>

</td></td> </td></td>

<td><td>

</</thth>> </</thth>>

<td><td> <td><td>

</td></td><td><td> <td><td> <td><td>

</td></td></td></td></td></td>

<<trtr>> </</trtr>>

<<trtr>> </</trtr>>

</</trtr>><<trtr>>

</table></table>


HTML: <table>HTML: <table>

<table><table><<trtr>>

<<thth>>UnoUno</</thth>><<thth>>DueDue</</thth>>

</</trtr>><<trtr>>

<td><td>aaaaaaaaaaaaaaaaaa</td></td><td><td>bbbbbbbbbbbbbbbb</td></td>

</</trtr>><<trtr>><td><td>cccccccccccccccc</td></td><td><td>dddddddddddd</td></td>

</</trtr>></table></table>

UnoUno DueDue

aaaaaaaaa bbbbbbbbaaaaaaaaa bbbbbbbb

cccccccc cccccccc dddddddddddd


HTML: <table>HTML: <table>

<table <table widthwidth==""larghezzalarghezza delladella tabellatabella""cellpaddingcellpadding==""numeronumero""cellspacingcellspacing==""numeronumero""borderborder==""numeronumero""bgcolorbgcolor==""colorecolore sfondosfondo tabellatabella""

>>

Es. Es. <table width=<table width="80%" "80%" cellpaddingcellpadding=="5" "5" bgcolorbgcolor=="#ff3300""#ff3300">>


HTML: <td> e <HTML: <td> e <thth>>

<<td td ((thth))widthwidth==""dimensionedimensione delladella cellacella""colspancolspan==""numeronumero""rowspanrowspan==""numeronumero""bgcolorbgcolor==""colorecolore sfondosfondo cella"cella"alignalign==""rightright"" | | ""leftleft"" | | ""centercenter""valignvalign==""toptop"" | | ""bottombottom"" | | ""middlemiddle""nowrapnowrap

>>Es. Es. <td width=<td width="100""100" bgcolorbgcolor=="#0033aa""#0033aa" align=align="right""right">>


HTML: HTML: EsempioEsempio

…………<center><center><<table table border=border="4""4">><tr><tr><td bgcolor<td bgcolor==""#ff0000#ff0000"">>…… unauna tartarugatartaruga</td</td>><<tdtd align=align="center""center">><<imgimg srcsrc==""tartarugatartaruga.gif".gif">></td></td></tr></tr><tr><tr><td<td alignalign="center"="center">><<imgimg srcsrc==““lab.jpg"lab.jpg">></td</td>><<td bgcolortd bgcolor==""#00ff00#00ff00"" alignalign==""rightright"">>…… un un laboratoriolaboratorio</td></td></tr></tr></table</table>></center></center>…………


HTML: HTML: tabelletabelle

Le Le tabelletabelle sisi usanousano principalmenteprincipalmente per per organizzareorganizzaregligli elementielementi allall’’internointerno didi unauna paginapagina..

Per fare Per fare questoquesto spessospesso non non sisi visualizzanovisualizzano i i bordibordi

<table border=<table border="0""0">>righerighe e e colonnecolonne

</table></table>

Laboratorio di Informaticahomes.di.unimi.it/~cazzola/didattica/lab_di_informatica_x...1. Walter...

Documents

Transcript of Laboratorio di Informaticahomes.di.unimi.it/~cazzola/didattica/lab_di_informatica_x...1. Walter...