Post on 09-Sep-2018
transcript
Internetèunareteadaccessopubblicocheconnettevaridispositiviintuttoilmondo.Dallasuanascitarappresentailprincipalemezzodicomunicazionedimassa,cheoffreall'utenteunavastaseriedicontenutipotenzialmenteinformativiediservizi.
L'originediInternetrisaleagliannisessanta,suiniziativadegliStatiUniti,chemiseroapuntodurantelaguerrafreddaunnuovosistemadidifesaedicontrospionaggio.ARPANETnel1969,finanziatodaDefenceAdvancedResearchProjectsAgency.
L'ItaliafuilterzoPaeseinEuropaaconnettersiinrete,dopoNorvegiaeInghilterra,grazieaifinanziamentidelDipartimentodellaDifesadegliStatiUniti.Laconnessioneavvennedall'UniversitàdiPisa.Ilcollegamentoavvenneil30aprile1986,alle18circa.
Ilprecursoredelserviziodipostaelettronicafuideatonel1973,suARPANET.Leemoticonvenneroisituitenel1979persuggerirelostatod’animonelleemail.
Comeè fatta Internet
Esempio diuna rete
LAN:LocalAreaNetwork,copreun’arealimitatacomeunascuola,un’azienda
WLAN:LANWireless
WAN:WideAreaNetwork,èunaretechecopreunaopiùregionigeografiche
BAN:BodyAreaNetworkselaretesiestendeintornoalcorpodell'utilizzatoreconunaestensionedell'ordinedelmetro
PAN:PersonalAreaNetwork,selaretesiestendeintornoall'utilizzatoreconunaestensionedialcunimetri
GARRèlaretetelematicaitalianadell’UniversitàedellaRicercaedilsuoprincipaleobiettivoèquellodifornireconnettivitàadaltissimeprestazionieserviziavanzatiallacomunitàscientificaedaccademicaitaliana.LareteGARRèideataegestitadalConsortiumGARR,un’associazionesenzafinidilucrofondataconilpatrociniodelMinisterodell’Istruzione,dell’UniversitàedellaRicerca.
Nel1991pressoilCERNdiGinevrailricercatoreTimBerners-LeedefinìilprotocolloHTTP(HyperTextTransferProtocol),unsistemachepermetteunaletturaipertestuale,non-sequenzialedeidocumenti,saltandodaunpuntoall'altromediantel'utilizzodirimandi(linko,piùpropriamente,hyperlink).Ilprimobrowserconcaratteristichesimiliaquelleattuali,ilMosaic,vennerealizzatonel1993.Essorivoluzionòprofondamenteilmododieffettuarelericercheedicomunicareinrete.NacquecosìilWorldWideWeb(WWW).Inparticolare,il6agosto1991Berners-LeepubblicòilprimositoWebalmondo,pressoilCERN,all'indirizzohttp://info.cern.ch/hypertext/WWW/TheProject.htm
WorldWideWeb
Client
Server
Ininformatica,ilWebbrowserèun'applicazioneperilrecupero,lapresentazioneelanavigazionedirisorsesulWeb.Talirisorse(comepagineweb,immaginiovideo)sonomesseadisposizionesulWorldWideWeb(lareteglobalechesiappoggiasuInternet),suunaretelocaleosullostessocomputerdoveilbrowserèinesecuzione.
Ilprogrammaimplementa
1. daunlatolefunzionalitàdiclientperilprotocolloHTTP,cheregolaloscaricamentodellerisorsedaiserverwebapartiredalloroindirizzoURL;
2. dall'altroquelledivisualizzazionedeicontenutiipertestuali(solitamenteall'internodidocumentiHTML)ediriproduzionedicontenutimultimediali.
TraibrowserpiùutilizzativisonoGoogleChrome,Safari,InternetExplorer,Mozilla Firefox,Opera,MicrosoftEdge (uscitoconWindows10)eMaxthon.
Cos’è unbrowser
L'HyperTextTransferProtocol (HTTP)(protocolloditrasferimentodiunipertesto)èunprotocolloalivelloapplicativousatocomeprincipalesistemaperlatrasmissioned'informazionisulWebovveroinun'architetturatipicaclient-server.
HTTP
E.g.,paginaWeb
L'HyperTextMarkupLanguage (HTML;traduzioneletterale:linguaggioamarcatoriperipertesti),ininformaticaèillinguaggiodimarkupsolitamenteusatoperlaformattazioneeimpaginazionedidocumentiipertestualidisponibilinelWorldWideWebsottoformadipagineWeb.
Èunlinguaggiodipubblicodominio,lacuisintassièstabilitadalWorldWideWebConsortium(W3C).
L'HTMLèstatosviluppatoversolafinedeglianniottantadelXXsecolodaTimBerners-LeealCERNdiGinevraassiemealprotocolloHTTPdedicatoaltrasferimentodidocumentiintaleformato.
Nelgiugno1993Berners-Leenepubblicaunaprimadefinizioneformale,firmatainsiemeaDanielConnollyesostenutadalgruppodilavorodell'InternetEngineeringTaskForcechiamatoIntegrationofInternetInformationResources,perproporlacomestandardIETF
Unpo’distoria
Nelgennaio2000,vienepubblicatocomestandardXHTML1.0,unavariantediHTML4.01cheusaXML1.0anzichéinSGMLcomemetalinguaggiodimarkup,permigliorarnel'interoperabilitàconaltrilinguaggidellafamiglia.
IlW3CdecidediabbandonareHTMLedicontinuarelosvilupposolosuXHTML:XHTML1.0diventaW3Crecommendation(standard)il26Gennaio2000,eXHTML1.1il31Maggio2001.
L'XHTMLèilsuccessoredirettodell'HTML4.1.
Standard
LosviluppovenneavviatodalgruppodilavoroWebHypertextApplicationTechnologyWorkingGroup (WHATWG)(fondatonel2004dasviluppatoriappartenentiadApple,MozillaFoundationedOperaSoftware)chesiposecomeobiettivoquellodiprogettaredellespecificheperlosviluppodiapplicazioniweb,focalizzandosisumiglioramentieaggiunteadHTMLealletecnologiecorrelate.InizialmenteincontrastoconilWorldWideWebConsortiumperlelungaggininelprocessodievoluzionedellostandardhtmleperladecisionedelW3Cdiorientarelastandardizzazioneversol'XHTML2chenongarantivaretrocompatibilità,
LostessoW3Chapoiriconosciutovalidetalimotivazioni,annunciandodicreareunappositogruppoperlastandardizzazionedell'HTML5eabbandonarel'XHTML2.0.Dal2007ilWHATWGhacollaboratoconilW3Cintaleprocessodistandardizzazione,perpoideciderenel2012disepararsidalprocessodistandardizzazionedelW3C,creandodifattodueversionidell'HTML5:laversionedelWHATWGvienedefinitacome"HTMLLivingStandard"equindiincontinuaevoluzione,mentrequelladelW3Csaràunaunicaversionecorrispondenteaduno"snapshot"delLivingStandard.
Il28Ottobre2014,HTML5èdiventatoufficialmentestandardW3C(http://www.w3.org/TR/html5/)
HTML5
Struttura
<!DOCTYPEhtml>
<html>
<head><title>ConformingHTML5Template</title></head>
<body>
</body>
</html>
Laprimalinea<!DOCTYPEhtml>èladichiarazionedeltipodidocumento(chesegue).FasaperealbrowserqualetipodiHTMLdeveutilizzareperinterpretarelapagina(inquestocaso,HTML5).Vainseritosempre!
Iltag <html>èiltag diaperturachedicealbrowserchetuttoquellochesitrovatraquelloeilcorrispondentetag dichiusura</html>,èundocumentohtml.
Tra<body> e</body> vaaggiuntotuttoquellochesivuolesiavisualizzatonellapagina.ATTENZIONE:tuttociòcheèfuoriquestiduetag,nonvienevisualizzatoenonfapartedellapaginaveraepropria.
Nontuttiitag hannoilcorrispondentetag dichiusura,peresempio<br>(linebreak).InXHTMLiltagvuolecomunqueunoslash dichisusura (<br />),mentreinHTML5basta<br>.
Struttura<!DOCTYPEhtml><html><body>Thisismyfirstwebpage
</body></html>
DTD =DocumentTypeDefinition.IlDocumentTypeDefinition(definizionedeltipodidocumento)èunostrumentoutilizzatodaiprogrammatoriilcuiscopoèquellodidefinirelecomponentiammessenellacostruzionediundocumentoXML
Differenti DTD
<html><head><title>ConformingHTML5Template</title></head><body></body></html>
<!DOCTYPEhtml>
HTML5
DTD =DocumentTypeDefinition.IlDocumentTypeDefinition(definizionedeltipodidocumento)èunostrumentoutilizzatodaiprogrammatoriilcuiscopoèquellodidefinirelecomponentiammessenellacostruzionediundocumentoXML
Differenti DTD
<html><head><title>ConformingHTML4.1Template</title></head><body></body></html>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
HTML4.1
DTD =DocumentTypeDefinition.IlDocumentTypeDefinition(definizionedeltipodidocumento)èunostrumentoutilizzatodaiprogrammatoriilcuiscopoèquellodidefinirelecomponentiammessenellacostruzionediundocumentoXML
Differenti DTD
<html><head><title>ConformingXHTML1.1Template</title></head><body></body></html>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML1.1
L’elemento<head>(cheinziaconiltagdiapertura<head>eterminaconiltagdichisura</head>)appareprimadell’elementobody,econtieneinformazioniapropositodellapagina.Questainformazionenonapparenellafinestradelcontenutodellapagina,nelbrowser.
Iltitolocompariràcomeriferimentodellapaginaselasalvatetraipreferiti.
Head
<html><head><title>EsempiodiTitolo</title></head><body></body></html>
Ilbrowsernoninterpretailtestocomeloavetescritto:seandateacapo,oppuresemettetepiùspazi,ilrisultatovisualizzatosaràsempre:
Peravereduelineeserve
Contenuto inbody
<!DOCTYPEhtml><html><head><title>Myfirstwebpage</title>
</head><body>Thisismyfirstwebpage.Howexciting
</body></html>
<p>Thisismyfirstwebpage</p><p>Howexciting</p>
Ilparagrafo<p>èunelementocontenitorechealsuointernoprevedel’inserimentoditestoedialtritag.
Iparagrafi <p>
<p>Nelprimoparagrafodiquestatrattazione,cioccuperemodell'importanzadeltestonelWeb.Grazieadunsempliceesempiopossiamosperimentaremoltecose.</p>
<p>Perdefaultilbrowsermanderàacapoilcontenutodiquestosecondoparagrafo.</p>
Sipuòenfatizzareiltesto,edarglimaggioreimportanza
<p>Yes,thatreally<em>is</em> exciting.<strong>Warning:</strong> levelofexcitementmaycauseheadtoexplode.</p>
Tradizionalmenteilbrowserinterpreta<em>initalico,e<strong>ingrassetto.Esistonoanche<i>e<b>,maèmegliononutilizzarli,lapresentazionenondevefarpartediHTML(madiCSS).
<br>,comegiàintravistoservepersepararelelinee.Dausareconparsimonia:probabilmenteiltagchesivuoleè<p>.
Altri tag
<!DOCTYPEhtml><html><head><title>Titoli</title></head>
<body>Thisismyfirstwebpage<br>Howexciting</body></html>
Esistono6differentilivellidititolochesiottengonoutilizzandoiseguentitag:
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
La“h”staper“heading“,cioètitoloeognilivelloindicaunagrandezzadiversa.
Dall'<h1>,cheèilpiùimportante,sivaviaviadegradandofinoall'<h6>cherappresentailtitolocongrandezzaminore.
Ingeneresonorappresentatiingrassettoeconunadimensionedeltestoingrandita.
Gliheading,cosìcomealtritagcontenitori,appartengonoallafamigliadeglielementidiblocco(block).Talielementisonocosìchiamatiperchéunavoltadefiniticreanounbloccoattornoasé,diconseguenzavannoacapoerisultanodistanziatidaglielementichelicircondano.
Titoli (headings)
Titoli (esempio)<!DOCTYPEhtml><html>
<head><title>Titoli</title></head>
<body><h1>Esamediinformatica</h1><h2>Esamediinformatica</h2><h3>Esamediinformatica</h3><h4>Esamediinformatica</h4><h5>Esamediinformatica</h5><h6>Esamediinformatica</h6></body>
</html>
Glielementiblockquote eq sonoutlizzatiperdelimitarepartedeltestocomecitazione.
Solitamenteq èutilizzatopercitazioniinlinea,piùcorte,rispettoablockquote:
Citazioni
<body><p>SoIaskedBobaboutquotationsontheWebandhesaid<q>IknowasmuchaboutquotationsasIdoaboutpigeonfancying</q>.Luckily,IfoundHTMLDoganditsaid:</p>
<blockquote><p>blockquoteandqareusedforquotations.blockquoteisgenerallyusedforstandaloneoftenmulti-linequotationswhereasqisusedforshorter,in-linequotations.</p></blockquote></body>
Esistonolelisteordinate(<ol>)enonordinate(<ul>).Glielementidelleprimevengonosolitamenterappresentateconunnumerosequenziale,mentreperleseconde,conunpallino(bullet).Ognielementodellelistevienecontenutoinduetag<li> …</li>.
Liste
<!DOCTYPEhtml><html><head><title>Liste</title></head>
<body><ul><li>TolearnHTML</li><li>Toshowoff</li><li>BecauseI'vefalleninlovewithmycomputerandwanttogivehersomeHTMLloving.</li></ul></body></html>
Liste ordinate
<!DOCTYPEhtml><html><head><title>Listeordinate</title></head>
<body><ol><li>TolearnHTML</li><li>Toshowoff</li><li>BecauseI'vefalleninlovewithmycomputerandwanttogivehersomeHTMLloving.</li></ol></body></html>
TuttiglielementiHTMLpossonoavereattributi.Essiaaggiungonoulterioreinformazioneapropositodell’elementoinquestione.
Vengonospecificatisempreneltagdiaperturaesolitamentesonodefinititramitelacoppianame=“value”(nomedel’attributoesuovalore).
Attributi dielementi
<!DOCTYPEhtml><htmllang="en-US"><body>...</body></html>
<ptitle="I'matooltip">Thisisaparagraph.</p>
<ahref="http://www.w3schools.com">Thisisalink</a>
<imgsrc="w3schools.jpg"width="104"height="142">
<imgsrc="w3schools.jpg"alt="W3Schools.com"width="104"height="142">
HTML5nonrichiedechegliattributisianospecificatiinminuscolo:peresempioALT oppureAltsonoattributivalidi.W3Craccomandacomunquediscriverliminuscolierichiede(obbligatoriamente)chesianominusoliperXHTML.
Stessacosaperquantoriguardagliapici.W3Craccomandadiutilizzaregliapiciperquotareilvaloredell’attributo,erichiedelaloropresenzasesiusaXHTML.AltrimentiHTML5permetteancehdiscrivere
<ahref=http://www.w3schools.com>
invecedi
<ahref=“http://www.w3schools.com”>
Avoltecomunqueènecessarioutilizzarli:quandocisonodeglispazinelvalore:
NO<ptitle=AboutW3Schools>SI<ptitle=“AboutW3Schools”>
Alcune precisazioni risp.standard
Peroraabbiamovistocom’èfattaunapagina,ma“HyperText”inHTMLsignificaIpertesto,cioèpiùdocumentiditestocollegatiinsieme(questoèilWWW).
Iltagancora(anchor)<a> serveadelimitarelapartedeltestoche,unavoltacliccata,ciportaadunaltrodocumento.Inpiùdeveessereperòanchespecificatounlinkdidestinazione.
Collegamenti (link)
<h2>Wheretofindthetutorial</h2><p><ahref="http://www.htmldog.com">HTMLDog</a></p>
Ladestinazioneèspecificatatramiteattributohrefdell’elementoancora.Inquestocasoèassoluto,mapuòessereancherelativosesiriferisceadunpaginasullostessocomputer.<ahref=”miapagina.html">Altrapaginasulmiocomputer</a>
Pùoessereassociatounidentificatore,tramiteattributoid,adunelementodellapagina.
<h2id=”dogs">Dogs</h2>
…
<h2id=”cats">Cats</h2>
Poi,quandosivuolesaltareinquelpuntodaun’altrapartedellastassapagina
<ahref="#dogs">GotoDogs</a>
Salti all’interno della stassa pagina
LepagineWebsonomulti-mediali:nonsolotesto,maancheimmagini,peresempio
Immagini
<!DOCTYPEhtml><html><head><title>Titoli</title></head>
<body><h3>Paginaquisotto</h3><imgsrc="http://www.htmldog.com/badge1.gif"width="120"height="90"alt="HTMLDog"></body>
</html>
JPEG(JointPhotographicExpertGroup)èprodottatramiteunalgoritmodicompressione,chemodifica(piùomeno)l’immagineiniziale.Èdisolitoutilizzateperlefotografie.
GIF(GraphicsInterchangeFormat):nonpuòaverepiùdi256colori.Menocoloriportanoadunadimensioneminore.Nonèunformatocompressomabitmap.Utilizzataingenerepericoneologhi.Unpixelpuòessereanchetrasparente.
PNG(PortableNetworkGraphics):comeGIFmaconsente16milionidicolori.Anchequestoformatopuòessereutilizzatoperfoto.
Alcuni ditipidifileimmagine
Storicamenteletabellesonostateutilizzate(inmodoabusato)perimpaginaretuttaunapagina;peresempiol’intestazioneeraunariga,lacolonnasisinistraeraunacolonnadellatabella,ecosìvia.PerlavisualizzazionecipenseremoquandofaremoCSS.
Tabelle
<tr><td>Row3,cell1</td><td>Row3,cell2</td><td>Row3,cell3</td></tr>
<tr><td>Row4,cell1</td><td>Row4,cell2</td><td>Row4,cell3</td></tr></table></body>
<body><table><tr><td>Row1,cell1</td><td>Row1,cell2</td><td>Row1,cell3</td></tr>
<tr><td>Row2,cell1</td><td>Row2,cell2</td><td>Row2,cell3</td></tr>
table=tabelltd=datacelltr=tablerow
Laprimarigapuòavereelementi<th> inveceche<td>.
Rappresentanogliehaderdellatabella,solitamenteingrassetto.
Tabelle conintestazioni<table><tr><th>Firstname</th><th>Lastname</th><th>Age</th></tr><tr><td>Jill</td><td>Smith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr></table>
Tabelle conrowspan ecolspan<tr><td>name</td><td>price</td></tr>
<tr><td>name</td><td>price</td></tr></table>
<table><tr><td>Name1</td><td>Name2</td><tdcolspan="2">Name3</td><td>Name4</td></tr>
<tr><tdrowspan="3">ITEM1</td><tdrowspan="3">ITEM2</td><td>name</td><td>price</td><tdrowspan="3">ITEM4</td></tr>
Tabelle condentro tabelle<table><tr><td><table><tr><td>2ndTable</td><td>2ndTable</td></tr><tr><td>2ndTable</td><td>2ndTable</td></tr></table></td>
<td>Thecellnexttothisonehasasmallertableinsideofit,atableinsideatable.</td></tr></table>
Organizzareledirectory!
loungelounge.html
elixirs.html
directions.html
green.jpgblue.jpg
drinks.jpg
Unacartelladiprogetto,lounge,condentrotuttiifile:tuttelepaginehtmletutteleimmagini.
Ancorapiù ordine!lounge
lounge.html
elixirs.html
directions.html
green.jpgblue.jpg
drinks.jpg
immagini
about
beverages
< a href=“./beverages/elixir.html”> elixirs</a>
< a href=“elixir.html”> elixirs</a>
Comecambiare link
Pertornare alla home
< a href=“../elixir.html”> elixirs</a>
< a href=“lounge.html”> elixirs</a>
./ significa“cercanelladirectorydovesitrovailfilechecontinenequestolink”
../ significa“cercanelladirectorysuperioreadovesitrovailfilechecontienequestolink”
Altro esempio
lounge
about
directions
lounge.html
directions.html
< a href=“../../lounge.html”> elixirs</a>
< a href=“./about/directions/directions.html”> elixirs</a>
Unelementobloccoiniziasempresuunanuovalineaeoccupatuttalalarghezzapossibileadestraesinistra.
Esempisono<h1>(eglialtrititoli)e<p>
GlielementiInlinenoninizianosuunanuovalineaeoccupanosololospazionecessario.
Esempisono<a>(perdefinireunlink),<img>(perun’immagine),e<span>(utilizzatoperdelimitareparteditesto;poivediamodegliesempi).
QuindiesitonoELEMENTI,chesonodefinitidatag,incerticasisiadiaperturachedichisura.
Elementi blockeInline
Iltagspanèutilizzatoperraggruppareelementiinline,anchesemplicementetesto.
Dipersénonapportanessuncambiamentodivisualizzazione.
<p>Mymotherhas<spanstyle="color:blue">blueeyes</span>,andblondehair.</p>
Span
Sipossonoaggiungerecommentichenonvengonovisualizzatinelbrowser.
<!-- Writeyourcommentshere-->
SipossonoscriverecommentiperricordarsidiqualcosadiimportanteoperannotareilcodiceHTMLutilizzato.
Unaltromotivoèpercommentaretemporaneamentedellelineedicodice,senzacancellarleepoiriscriverlenuovamente.
<!-- Donotdisplaythisatthemoment
<ahref=”http://www.ciao.it">Sitociao</a>
-->
Commenti
W3CSchoolTutorial
http://www.w3schools.com/html/default.asp
Quandononviricordatequalcosa,adesempioilnomedeltag,lasuasintassi,isuoiattributi,controllatesubitolì
Altrotutorial,siaCSSchehtml,HTMLDog:
http://htmldog.com/guides/
Risorse
Brackets,Mac,Windows
http://brackets.io
HTML-Kit292(versionefree),Windows
http://www.htmlkit.com/download/next/?download292=1&thankyou=1
Cofeecup,Windows
http://www.coffeecup.com/free-editor/
Strumenti
All’indirizzohttp://www.dmi.unipg.it/francesco.santini/exercises/medicina/scheletro_validazione.html
Oancheseguendolastrutturaquisotto,trovateleistruzionipervalidareinXHTML1.1(visualizzateilsorgentedellapagina)
Validiamo comeXHTML
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="it"lang="it">
<head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><title>…</title></head><body…<body></html>
DacopiareinTUTTE lepaginechedovetevalidare
Perognuna delle pagine:
1. seguire lastruttura della slideprecedente:avere lelinee ingrassetto anche neal propsiapagina
2. Aprire il validatore (indirizzo https://validator.w3.org) epassare lapagina html,sfogliando ecaricandola
3. Seil risultato è una lista dierrori,capire il primoerrore della lista guandando nell’html allalinea segnalata,correggere,erivalidare peressere sicuri che l’errore sia stato corretto
4. Ripetere il punto 3fino ache noncisono errori
5. Copiare il codice htmlche viene visualizzato nella pagina validata,aconferma dell’avvenutacorretta validazione,inmodo dafarcomparire l’immagine corrispondente (vedi sotto)
Passi daseguire