INTERNET - dmi.unipg.it · usa XML 1.0 anziché in SGML come metalinguaggio di markup ......

INTERNETIMATTONI FONDAMENTALI

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

Qualche immagine

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

Esempio

HTMLCOMESTRUTTURAREIL CONTENUTODIUNAPAGINA

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


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


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>

AttributiULTERIORE INFORMAZIONE PERGLI ELEMENTI

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">

Collegamenti,immagini,etabelleALTRI ELEMENTI

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>

Percorsi (path)COMEORGANIZZARE IL CONTENUTO DELLE DIRECTORY

Esempio

AltrapaginacomeDirectionsImmagini

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>

Commenti finali

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

Annidamento (nesting)

Esempio corretto esbagliato

RICORDARSIDICHIUDEREITAG!

Sipossonoaggiungerecommentichenonvengonovisualizzatinelbrowser.



SipossonoscriverecommentiperricordarsidiqualcosadiimportanteoperannotareilcodiceHTMLutilizzato.

Unaltromotivoèpercommentaretemporaneamentedellelineedicodice,senzacancellarleepoiriscriverlenuovamente.



Commenti

Risorse estrumenti

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

W3CValidatorCOMEVALIDARE I DOCUMENTI RISPETTO AGLI STANDARD

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

Validatore HTML(perpassaggio difile)

INTERNET - dmi.unipg.it · usa XML 1.0 anziché in SGML come metalinguaggio di markup ......

Documents

Transcript of INTERNET - dmi.unipg.it · usa XML 1.0 anziché in SGML come metalinguaggio di markup ......