INTERNET - Dipartimento di Matematica e Informatica

62
INTERNET I MATTONI FONDAMENTALI

Transcript of INTERNET - Dipartimento di Matematica e Informatica

Page 1: INTERNET - Dipartimento di Matematica e Informatica

INTERNETIMATTONI FONDAMENTALI

Page 2: INTERNET - Dipartimento di Matematica e Informatica

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

Page 3: INTERNET - Dipartimento di Matematica e Informatica

Qualche immagine

Page 4: INTERNET - Dipartimento di Matematica e Informatica

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.

Page 5: INTERNET - Dipartimento di Matematica e Informatica

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

Page 6: INTERNET - Dipartimento di Matematica e Informatica

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

Page 7: INTERNET - Dipartimento di Matematica e Informatica

L'HyperTextTransferProtocol (HTTP)(protocolloditrasferimentodiunipertesto)èunprotocolloalivelloapplicativousatocomeprincipalesistemaperlatrasmissioned'informazionisulWebovveroinun'architetturatipicaclient-server.

HTTP

E.g.,paginaWeb

Page 8: INTERNET - Dipartimento di Matematica e Informatica

Esempio

Page 9: INTERNET - Dipartimento di Matematica e Informatica

HTMLCOMESTRUTTURAREIL CONTENUTODIUNAPAGINA

Page 10: INTERNET - Dipartimento di Matematica e Informatica

L'HyperTextMarkupLanguage (HTML;traduzioneletterale:linguaggioamarcatoriperipertesti),ininformaticaèillinguaggiodimarkupsolitamenteusatoperlaformattazioneeimpaginazionedidocumentiipertestualidisponibilinelWorldWideWebsottoformadipagineWeb.

Èunlinguaggiodipubblicodominio,lacuisintassièstabilitadalWorldWideWebConsortium(W3C).

L'HTMLèstatosviluppatoversolafinedeglianniottantadelXXsecolodaTimBerners-LeealCERNdiGinevraassiemealprotocolloHTTPdedicatoaltrasferimentodidocumentiintaleformato.

Nelgiugno1993Berners-Leenepubblicaunaprimadefinizioneformale,firmatainsiemeaDanielConnollyesostenutadalgruppodilavorodell'InternetEngineeringTaskForcechiamatoIntegrationofInternetInformationResources,perproporlacomestandardIETF

Unpo’distoria

Page 11: INTERNET - Dipartimento di Matematica e Informatica

Nelgennaio2000,vienepubblicatocomestandardXHTML1.0,unavariantediHTML4.01cheusaXML1.0anzichéinSGMLcomemetalinguaggiodimarkup,permigliorarnel'interoperabilitàconaltrilinguaggidellafamiglia.

IlW3CdecidediabbandonareHTMLedicontinuarelosvilupposolosuXHTML:XHTML1.0diventaW3Crecommendation(standard)il26Gennaio2000,eXHTML1.1il31Maggio2001.

L'XHTMLèilsuccessoredirettodell'HTML4.1.

Standard

Page 12: INTERNET - Dipartimento di Matematica e Informatica

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

Page 13: INTERNET - Dipartimento di Matematica e Informatica

Struttura

<!DOCTYPEhtml>

<html>

<head><title>ConformingHTML5Template</title></head>

<body>

</body>

</html>

Page 14: INTERNET - Dipartimento di Matematica e Informatica

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>

Page 15: INTERNET - Dipartimento di Matematica e Informatica

DTD =DocumentTypeDefinition.IlDocumentTypeDefinition(definizionedeltipodidocumento)èunostrumentoutilizzatodaiprogrammatoriilcuiscopoèquellodidefinirelecomponentiammessenellacostruzionediundocumentoXML

Differenti DTD

<html><head><title>ConformingHTML5Template</title></head><body></body></html>

<!DOCTYPEhtml>

HTML5

Page 16: INTERNET - Dipartimento di Matematica e Informatica

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

Page 17: INTERNET - Dipartimento di Matematica e Informatica

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

Page 18: INTERNET - Dipartimento di Matematica e Informatica

L’elemento<head>(cheinziaconiltagdiapertura<head>eterminaconiltagdichisura</head>)appareprimadell’elementobody,econtieneinformazioniapropositodellapagina.Questainformazionenonapparenellafinestradelcontenutodellapagina,nelbrowser.

Iltitolocompariràcomeriferimentodellapaginaselasalvatetraipreferiti.

Head

<html><head><title>EsempiodiTitolo</title></head><body></body></html>

Page 19: INTERNET - Dipartimento di Matematica e Informatica

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>

Page 20: INTERNET - Dipartimento di Matematica e Informatica

Ilparagrafo<p>èunelementocontenitorechealsuointernoprevedel’inserimentoditestoedialtritag.

Iparagrafi <p>

<p>Nelprimoparagrafodiquestatrattazione,cioccuperemodell'importanzadeltestonelWeb.Grazieadunsempliceesempiopossiamosperimentaremoltecose.</p>

<p>Perdefaultilbrowsermanderàacapoilcontenutodiquestosecondoparagrafo.</p>

Page 21: INTERNET - Dipartimento di Matematica e Informatica

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>

Page 22: INTERNET - Dipartimento di Matematica e Informatica

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)

Page 23: INTERNET - Dipartimento di Matematica e Informatica

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>

Page 24: INTERNET - Dipartimento di Matematica e Informatica

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>

Page 25: INTERNET - Dipartimento di Matematica e Informatica

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>

Page 26: INTERNET - Dipartimento di Matematica e Informatica

Liste ordinate

<!DOCTYPEhtml><html><head><title>Listeordinate</title></head>

<body><ol><li>TolearnHTML</li><li>Toshowoff</li><li>BecauseI'vefalleninlovewithmycomputerandwanttogivehersomeHTMLloving.</li></ol></body></html>

Page 27: INTERNET - Dipartimento di Matematica e Informatica

Collegamenti,immagini,etabelleALTRI ELEMENTI

Page 28: INTERNET - Dipartimento di Matematica e Informatica

Perora abbiamo visto com’è fatta una pagina,ma“HyperText”inHTMLsignifica ipertesto,cioèpiù documenti ditesto collegati insieme (questo è il WWW).

Iltagancora (anchor)<a> serveadelimitare lapartedeltesto che,una volta cliccata,ciportaadunaltro documento.Inpiù deve esser eperò anche specificato unlinkdidestinazione.

Collegamenti (link)

<h2>Wheretofindthetutorial</h2><p><ahref="http://www.htmldog.com">HTMLDog</a></p>

Ladestinazione è specificata tramite attributo href dell’elemento ancora.Inquesto caso è assoluto,mapuòessere anche relativo sesi riferisce adunpagina sullo stesso computer.<ahref=”miapagina.html">Altra pagina sul mio computer</a>

Page 29: INTERNET - Dipartimento di Matematica e Informatica

CollegamentiadaltrepaginesulpropriocomputerLadestinazioneèspecificatatramiteattributohref dell’elementoancora.Inquestocasoèassoluto,mapuòessereancherelativosesiriferisceadunpaginasullostessocomputer.

<ahref=”miapagina.html">Altrapaginasulmiocomputer</a>

Sel’immaginesitrovaaltrove,ènecessarioinserireilpercorsodovesitroval’immagine,enonsoloilnome.Lovedremopiùavanti.

Consolamenteilnome,peresempiomiapagina.html,ilbrowsercercal’immaginenellastessacartelladellapaginaincuisistainserendoillink.

Sel’immaginenonsitrovanellastessacartella,ESSANONVERRÀVISUALIZZATA.

Page 30: INTERNET - Dipartimento di Matematica e Informatica

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

Page 31: INTERNET - Dipartimento di Matematica e Informatica

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

Page 32: INTERNET - Dipartimento di Matematica e Informatica

Leimmaginisicomportanocomeilink,nelsensocheèsufficientemenzionare(conuntagdifferentedaquellodell’ancoraailnomedelfiledell’immagine).

Sel’immaginesitrovanellastessacartelladellapagina,èsufficienteutilizzareiltag img.

Peresempiosesivuoleinserirel’immaginechestanelfilenome_immagine.jpg,sipuòutilizzare

<img src=“nome_immagine.jpg”>

Immagini

Page 33: INTERNET - Dipartimento di Matematica e Informatica

Inquestoesempio,utilizziamounaimmaginechesitrovasuInternetadundatoindirizzo,enonsulnostrocomputer.

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>

Page 34: INTERNET - Dipartimento di Matematica e Informatica

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

Page 35: INTERNET - Dipartimento di Matematica e Informatica

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

Page 36: INTERNET - Dipartimento di Matematica e Informatica

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

Page 37: INTERNET - Dipartimento di Matematica e Informatica

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>

Page 38: INTERNET - Dipartimento di Matematica e Informatica

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>

Page 39: INTERNET - Dipartimento di Matematica e Informatica

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>

Page 40: INTERNET - Dipartimento di Matematica e Informatica

Percorsi (path)COMEORGANIZZARE IL CONTENUTO DELLE DIRECTORY

Page 41: INTERNET - Dipartimento di Matematica e Informatica

Certevolte,perorganizzaremegliotuttiifilechecompongonoilsitoWebchesistacostruendo,ènecessariosuddividerliinpiùcartelle.PeresempioIfiledelleimmaginipossonoesserespostatiinunacartellaaparte.

Tuttoquellocheabbiamodettosuilinkesulleimmaginideveesseremodificato.Semettiamosoloilnome,ilbrowsercercapaginehtmlimmagininellastessacartelladellapaginaincuistiamomettendol’immagineodunlinkadunaltrapagina.

Perquestomotivoènecessariononspecificaresoloilnome,maunpercorsoversoquellaparticolareimmagineopaginawebacuicivogliamoriferire.

Percorsi

Page 42: INTERNET - Dipartimento di Matematica e Informatica

Esempio

AltrapaginacomeDirectionsImmagini

Page 43: INTERNET - Dipartimento di Matematica e Informatica

Organizzareledirectory!

loungelounge.html

elixirs.html

directions.html

green.jpgblue.jpg

drinks.jpg

Unacartelladiprogetto,lounge,condentrotuttiifile:tuttelepaginehtmletutteleimmagini.

Comel’Esercizio2suSushi

Page 44: INTERNET - Dipartimento di Matematica e Informatica
Page 45: INTERNET - Dipartimento di Matematica e Informatica

Ancorapiù ordine!lounge

lounge.html

elixirs.html

directions.html

green.jpgblue.jpg

drinks.jpg

immagini

about

beverages

Inquestocasoorganizziamoi fileinpiùsottocartelle,comeinEsercizio4sushi

Page 46: INTERNET - Dipartimento di Matematica e Informatica

< a href=“./beverages/elixir.html”> elixirs</a>

< a href=“elixir.html”> elixirs</a>

Comecambiare link

Page 47: INTERNET - Dipartimento di Matematica e Informatica

Pertornare alla home

< a href=“../lounge.html”>lounge</a>

< a href=“lounge.html”>lounge</a>

./ significa“cercanelladirectorydovesitrovailfilechecontinenequestolink”

../ significa“cercanelladirectorysuperioreadovesitrovailfilechecontienequestolink”

Page 48: INTERNET - Dipartimento di Matematica e Informatica

Altro esempio

lounge

about

directions

lounge.html

directions.html

< a href=“../../lounge.html”>lounge</a>

< a href=“./about/directions/directions.html”>directions</a>

Page 49: INTERNET - Dipartimento di Matematica e Informatica

Commenti finali

Page 50: INTERNET - Dipartimento di Matematica e Informatica

Unelementobloccoiniziasempresuunanuovalineaeoccupatuttalalarghezzapossibileadestraesinistra.

Esempisono<h1>(eglialtrititoli)e<p>

GlielementiInlinenoninizianosuunanuovalineaeoccupanosololospazionecessario.

Esempisono<a>(perdefinireunlink),<img>(perun’immagine),e<span>(utilizzatoperdelimitareparteditesto;poivediamodegliesempi).

QuindiesitonoELEMENTI,chesonodefinitidatag,incerticasisiadiaperturachedichisura.

Elementi blockeInline

Page 51: INTERNET - Dipartimento di Matematica e Informatica

Iltagspanèutilizzatoperraggruppareelementiinline,anchesemplicementetesto.

Dipersénonapportanessuncambiamentodivisualizzazione.

<p>Mymotherhas<spanstyle="color:blue">blueeyes</span>,andblondehair.</p>

Span

Page 52: INTERNET - Dipartimento di Matematica e Informatica

Annidamento (nesting)

Page 53: INTERNET - Dipartimento di Matematica e Informatica

Esempio corretto esbagliato

RICORDARSIDICHIUDEREITAG!

Page 54: INTERNET - Dipartimento di Matematica e Informatica

Sipossonoaggiungerecommentichenonvengonovisualizzatinelbrowser.

<!-- Writeyourcommentshere-->

SipossonoscriverecommentiperricordarsidiqualcosadiimportanteoperannotareilcodiceHTMLutilizzato.

Unaltromotivoèpercommentaretemporaneamentedellelineedicodice,senzacancellarleepoiriscriverlenuovamente.

<!-- Donotdisplaythisatthemoment

<ahref=”http://www.ciao.it">Sitociao</a>

-->

Commenti

Page 55: INTERNET - Dipartimento di Matematica e Informatica

Risorse estrumenti

Page 56: INTERNET - Dipartimento di Matematica e Informatica

W3CSchoolTutorial

http://www.w3schools.com/html/default.asp

Quandononviricordatequalcosa,adesempioilnomedeltag,lasuasintassi,isuoiattributi,controllatesubitolì

Altrotutorial,siaCSSchehtml,HTMLDog:

http://htmldog.com/guides/

Risorse

Page 57: INTERNET - Dipartimento di Matematica e Informatica

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

Page 58: INTERNET - Dipartimento di Matematica e Informatica

W3CValidatorCOMEVALIDARE I DOCUMENTI RISPETTO AGLI STANDARD

Page 59: INTERNET - Dipartimento di Matematica e Informatica

Linguaggio einsieme caratteri

HTMLversione 5

Linguaggio,italiano

Setdicaratteri,UTF8:si possono utilizzareanche lelettere accentate!

Utilizziamoquestoschemapertuttelepaginechescriviamo:riportareitag indicatidalle3frecceintuttelepagine

Page 60: INTERNET - Dipartimento di Matematica e Informatica

All’indirizzo

https://validator.w3.org/#validate_by_upload

Validiamo HTML5

Page 61: INTERNET - Dipartimento di Matematica e Informatica

Validatore HTML(perpassaggio difile)

Page 62: INTERNET - Dipartimento di Matematica e Informatica

Perognunadellepagine:

1. Seguirelastrutturadidueslidefa,perognunadellepaginechecompongonoilsito

2. Aprireilvalidatore (indirizzoprecedente)epassarelapaginahtml,sfogliandoecaricandola

3. Seilrisultatoèunalistadierrori,capireilprimoerroredellalistaguadandonell’html allalineasegnalata,correggere,erivalidareperesseresicurichel’erroresiastatocorretto

4. Ripetereilpunto3finoachenoncisonoerroriperognunadellepaginedelsito

Passi daseguire