World Wide Web - WWW Uniform Resource Locator - URL

logoonly

Lecture 3: Internet/WWW

Anders Ardö

EIT – Electrical and Information Technology, Lund University

September 17, 2013

A. Ardö, EIT Lecture 3: Internet/WWW September 17, 2013 1 / 62

logoonly

Outline

1 Reiteration

2 Att konstruera en enkel ’Web Site’

3 Hypertextlänkar

4 Hypertextlänkar till andra resurser

5 Additional topics

6 Mer Information


logoonly

XML tagging

Only one root-elementOpen/close tag <book>...</book>

Tree structuredMust be correctly balanced - well formed

WRONG <title>What is <author>Anders</title></author>CORRECT<title>What is <author>Anders</author></title>

Size mattersDifferent elements

<title>What is</title><Title>Where is</Title>

Element can have attributes:<author role="primary">Anders</author><journal vol="34" no="4">Knowledge Organisation</journal>


logoonly

Linked data

publishing structured datainterlinked and more useful

Identification: HTTP URIsInformation about: RDF/XMLRelationships: links to related items

Example “Linking Open Data”:goal: build a data commons

making various open data sources availableon the Web as RDFsetting RDF relationships between data items5 ∗ 109 items (830 ∗ 106 persons); 52 ∗ 109 RDF triplets; (2012)

http://linkeddata.org/https://docs.google.com/spreadsheet/ccc?key=0AihbIyhlsQSxdHIxc3hhdk82UFdYd1ppaGw3WDNrVGc#gid=0


logoonly

Web services: REST - Representational StateTransfer

client/serversimpleuse HTTP (and other protocols)use HTTP methods explicitly

To create a resource on the server, use POST.To retrieve a resource, use GET.To change the state of a resource or to update it, use PUT.To remove or delete a resource, use DELETE.

statelessexpose directory structure-like URIstransfer XML, JavaScript Object Notation (JSON), or bothpredominant model


logoonly

Mashups

combine data from several sources to create new servicesmain characteristics

combinationvisualizationaggregation

examples:http://beta.vackertvader.se/lundhttp://dev.benedictoneill.com/bbc/http://www.izapps.com/ms/

Directory: http://www.programmableweb.com/mashups/directory


logoonly

Filter bubble

What do search engines or social sites know about me?At least location, search history, click history, likes, and more . . .Personalize whats shown (search results, . . . ) using this infoShow us what we want/like to see - algorithmically. . . and not whats relevant (who decides that?)

Problem?


logoonly

Privacy

Search history, clicks, photos, documents, comments, . . .leads to a profilethat can be used by ads or sold, or even stolenwhich might lead to it ending up in unwanted placesand used against you

Beware!För att inte tala om NSA ...


logoonly

Lecture 4 agenda

1 Reiteration


3 Hypertextlänkar


5 Additional topics

6 Mer Information


logoonly

Outline

1 Reiteration


3 Hypertextlänkar


5 Additional topics

6 Mer Information

A. Ardö, EIT Lecture 3: Internet/WWWSeptember 17, 2013 10 /

62

logoonly

Konstruera en enkel ‘Web Site’ I

Förstå hur man bygger upp en ‘storyboard’ för olika websitestrukturerSkapa länkar mellan dokumenten på en websiteRelativa och absoluta katalogstrukturerArbeta med grundelementenMarkera en position med ett id-attributSkapa en länk till en id-märkt positionMarkera en bild som en länk


62

logoonly

Konstruera en enkel ‘Web Site’ II

Skapa en bild-mappning från en ‘inline’ bildFörstå URL:erLänka till en ‘site’ på nätetLänka till en FTP ‘site’Länka till en e-mail adressSemantiska länkarArbeta med metadata


62

logoonly

Arbeta med websitestrukturer

Ett ‘storyboard’ är ett diagram över en websitestruktur som visaralla sidor på siten och hur de är sammanlänkadeDet är viktigt att man gör en ‘storyboard’ över sin website innanman börja skapa de olika sidorna för att kunna bestämma vilkenstruktur som passar bäst för den typ av information som siten skainnehållaEn välkonstruerad struktur försäkrar att användarna kan navigerapå siten utan att missa viktig information


62

logoonly

Första intrycket av en site

Websites need to make a great first impression to capture usersinterest.

In less than 50 milliseconds, users build an initial “gut feeling” thathelps them decide whether they’ll stay or leave.

Investigation of how first impressions of websites are influencedby two design factors:

Visual complexity – how complex the visual design of a websitelooksPrototypicality – how representative a design looks for a certaincategory of websites

users strongly prefer website designs that look bothsimple (low complexity)familiar (high prototypicality)

Från http://googleresearch.blogspot.se/2012/08/users-love-simple-and-familiar-designs.html


62

logoonly

Linjär struktur

I en linjär struktur så är varje sida länkad föregående sida ochefterföljande sida i en ordnad länkkedja

Linjära strukturer fungerar bäst med websidor som har en klartdefinierad ordningI en utökad linjär struktur så innehåller varje sida dessutom enlänk tillbaka till startsidan


62

logoonly

Hierarkisk struktur

I den hierarkiska strukturen ärsidorna länkade frånstartsidan och ner till merspecifika sidorAnvändarna kan enkelt gå frånen mer generell sida till enmer specifik sidaI den här strukturen så kanman snabbt hoppa förbi denlinjära ordningen till någonspecifik sida

Antal klick till ’Act III, Scene 3’?


62

logoonly

Blandade strukturer

När websiten blir större ochmer komplex så behöver manofta en kombination av olikastrukturerDet övergripande formatet ärofta hierarkiskt så att dettillåter användaren att gå fråndet generella till det specifika;men länkarna tillåter ocksånavigering genom websiten påett linjärt sättEtt siteindex är en sida meden innehållsförteckning förhela siten och dess innehåll


62

logoonly

Website utan sammanhängande struktur


62

logoonly

Skyddade strukturer

På de flesta kommersiella websiter så finns det skyddadesektioner som endast registrerade användare(föreningsmedlemmar, bankkunder) har tillgång till


62

logoonly

Outline

1 Reiteration


3 Hypertextlänkar


5 Additional topics

6 Mer Information


62

logoonly

Skapa en Hypertextlänk

För att länka till en sida så specificerar man till namnet på filengenom href attributet i <a> taggen<a href=“filename.html”>en hypertext link</a>

Filnamn kan vara olika om man skriver dem med stora eller småbokstäver, t.ex., i operativsystemen UNIX och Mac OS (jmfrWindows)En konvention kan vara att använda endast små bokstäver tillfilnamn på en website och att undvika specialtecken sommellanslag och snedstreckMan bör också använda korta filnamn för att undvika stavfel


62

logoonly

Skapa en Hypertextlänk


62

logoonly

Specificera en katalogstruktur


62

logoonly


För att skapa en länk till en fil i en annan katalog än den därHTML-dokumentet ligger så måste man specificera platsen förfilen, det vill säga dess ‘path’:folder1/folder2/file.html

En absolut ‘path’ specificerar en fils exakta position i datornskatalogstrukturEn relativ ‘path’ specificerar en fils position i förhållande till detnuvarande dokumentetOm filen ligger i samma katalog som det nuvarande dokumentetså behöver man inte ange katalogenOm filen ligger i en underkatalog till den nuvarande filen så måsteman ta med underkatalogens namn


62

logoonly


För att gå upp en nivå i katalogträdet så börjar man den relativa‘path’:en med en dubbelpunkt../file.html

Man bör alltid använda relativ ‘path’, i länkarna, om det går

Exempel

Absolut ’path’:/home/anders/document/f4.pdf/var/www/undervisning/introkurs/schema.html/var/www/undervisning/laboration/uppgifter.html

Relativ ’path’:litteratur.htmlundervisning/introkurs/schema.html../laboration/uppgifter.html


62

logoonly

Sätta baskatalogen

Baselementet <base.../> specificerar bas-URLen för allarelativa URLs i dokumentetBaselementet är användbart när ett dokument flyttas till en nykatalog. Snarare än att behöva skriva om alla relativa ‘path’:er,kan man bara ändra baspositionen för att ange den nyakatalogpositionenBaselementet är också användbart när man vill kopiera en endasida från en stor website på en annan webserver

<head><base href="http://www.w3schools.com/images/" /></head>

<body><img src="stickman.gif" /><a href="http://www.w3schools.com">W3Schools</a></body>


62

logoonly

Att använda id-attributet

För att hoppa till en specifik position inom ett dokument, så måsteman först markera den positionenEtt sätt att identifiera olika element i ett HTML dokument är attanvända id-attributetId namn måste vara unikaId namn tolkar stora och små bokstäver som samma bokstav


62

logoonly

Länka till olika positioner inom ett dokument

För att skapa en länk inom ett dokument så innesluter maninnehållet i länken i en <a> tag och använder href-attributet somreferens till ett annat elements id-attribut<a href=“#A”>[A]<a>länkar till det element (plats i denna sida) som har id-attribut ’A’

<h2>Glossary</h2><a href=“#A”>[A]<a> <a href=“#B”>[B]<a> <a href=“#C”>[C]<a> ...


62

logoonly

Länka till olika positioner i ett annat dokument

För att skapa en länk till en specifik plats i ett annat dokument såskriver man<a href="url#id">content<a>där url är en referens till en HTML eller XHTML fil och id är idför ett märkt element i den filen


62

logoonly

Att använda länkade bilder

En länks innehåll är inte begränsat till textEn standardkonvention på nätet är att göra sitens logotyp till enhypertext länk som pekar på startsidan<a href="url">

<img src="file“ alt="text" /></a>

HTML tillåter också att man delar upp en bild i olika zoner, eller‘hotspots’, som länkar till olika destinationer


62

logoonly

Att använda länkade bilder

För att definiera ‘hotspots’ så skapar man en bildmappning(‘image map’) som matchar ett område på bilden till en specifiklänkSkapas på clientsidan eller serversidan


62

logoonly

Bildmappning på clientsidan

En bildmappning på clientsidan definieras av ett ‘map’ elementWebläsaren hanterar bildmappningen lokaltEftersom allting sker lokalt så kan man enkelt testa websidornaReagerar snabbare än mappning på serversidan

<img src="planets.gif" width="145" height="126"alt="Planets" usemap="#planetmap" />

<map name="planetmap"><area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" /><area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" /><area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />

</map>


62

logoonly

Definiera ‘Hotspots’

Definiera en ‘hotspot’ genom två egenskaper :Dess position i bilden (0,0 är upp till vänster)Dess form

Syntaxen för ett ‘hotspot’ element:<area shape=“shape” coords=“coordinates”

href=“url” alt=“text” />


62

logoonly

Skapa en rektangulär ‘hotspot’

Två punkter definierar en rektangulär hotspot:Övre-vänstra hörnetNedre-högra hörnet

Exempelkod för en rektangulär hotspot:<area shape=“rect” coords=“384,61,499,271”

href=“water.htm” />

Koordinaterna matas in som en serie av fyra tal separerade avkommateckenHTML förväntar sig att de två första talen representerarkoordinaterna för övre-vänstra hörnet av rektangeln och att nästatvå tal representerar positionen för nedre-högra hörnetVår exempel ‘hotspot’ är en hypertextlänk till water.htm


62

logoonly

Skapa en cirkulär ‘hotspot’

En cirkulär ‘hotspot’ definieras av positionen av dess centrum ochdess radieExempelkod för en cirkulär ‘hotspot’:<area shape=“circle” coords=“82,78,80”

href=“karts.htm” />

Koordinaterna (82, 78) och med en radie på 80 pixels


62

logoonly

En polygon som ‘hotspot’

För att skapa en polygon så matar man in koordinaterna för varjehörn i polygonenExempelkod för en polygon ‘hotspot’:<area shape=“poly”

coords=“13,60,13,270...230,60”href=“rides.htm” />


62

logoonly

Default Hotspot

<area shape="default" coords="0, 0, x, y".../>där x är bredden på ‘inline’ bilden i pixel och y är bildens höjdAlla punkter som inte täcks in av andra ‘hotspots’ kommer attaktivera ‘default hotspot’ länken


62

logoonly

Använda en bildmappning


62

logoonly

Skapa en bildmappning på Clientsidan


62

logoonly

Multimedia

Images<img src="me.jpg" width="800" height="640".../>

Sound (html5)<audio controls="controls"><source src="car.mp3" type="audio/mp3" />Your browser does not support the audio tag.</audio>

Video (html5)<video width="320" height="240" controls="controls"><source src="train.mp4" type="video/mp4" />Your browser does not support the video tag.</video>


62

logoonly

Uniform Resource Locator - URL

A Web resource is located by a URL

http://www.w3.org/TR/html4/def.htmlprotocol server path

Optionally a port on the server (default 80)

http://www.w3.org:5234/TR/html4/def.htmlport

Relative URLssgml/dtd.htmlFragment identifierhttp://www.w3.org/TR/HTML4/def.html#minitoc

protocol : // server[: port

]/ path

[? parameters

] [# fragment

]A. Ardö, EIT Lecture 3: Internet/WWW

September 17, 2013 41 /62

logoonly

URL:er

Webläsaren kommunicerar med webservern genomHyperText Transfer Protocol (HTTP)URL för alla websidor måste börja med http (eller https)Andra internetresurser använder andra protokoll och har då någotannat namnEtt protokoll är en uppsättning regler som bestämmer hurinformationen ska överföras mellan två datorer


62

logoonly

Länka till en website

Om en URL inte inkluderar en ‘path’,http://www.cs.utsa.eduså kommer servern att leta i den högsta katalogen i servernOm en URL inte specificerar något filnamn,http://www.cs.utsa.edu/staff/korkmaz/teaching/så kommer servern att leta efter default-sidan (index.html, . . . )Delen cs.utsa.edu av servernamnet kallas också fördomännamn


62

logoonly

Länka till en website


62

logoonly

Hypertextattribut - tooltip

Flera HTML-attribut för att styra utseende och uppförande hoslänkarOm man vill så kan man lägga till extra information (tooltip) tillanvändarna genom attributet title till många HTML-taggarEn tooltip är en beskrivande text som visas då muspekarenbefinner sig över en länk<a href=“...” title=“tooltip info”>...</a>


62

logoonly

Hypertextattribut - target

Man kan tvinga ett dokument att visas i ett sekundärt fönster genomatt lägga till target attribut till <a> taggen<a href=“...” target=“_blank”>...</a>


62

logoonly

Outline

1 Reiteration


3 Hypertextlänkar


5 Additional topics

6 Mer Information


62

logoonly

Länka till FTP-servrar

FTP servrar är en annan metod för att lagra och dela filer påInternetFTP servrar överför information genom att använda protokolletFile Transfer Protocol, (FTP)En FTP-server kräver att varje användare matar in ett användar-idoch ett lösenord


62

logoonly

Länka till en lokal fil

Ibland kan man se URL för en fil på din datorInget servernamnAnvänd file som protokoll

file:///home/anders/proj/eit/tagcloud/fostruct.html

Jämför URL:http://www.eit.lth.se/tagcloud/fostruct.html


62

logoonly

Länka till en E-Mail adress

Många websiter använder e-mail för att användare ska kunnakommunicera med sitens ägareMan kan göra om en e-mail address till en hypertextlänkmailto-protokollet tillåter också att man lägger till information tille-mail:etmailto:address?header1=value1&header2=value2&. . .mailto:[email protected]?Subject=Test&Body=This%20is%20a%20test%20messagedvs mailto:[email protected]?Subject=Test&Body=This%20is%20a%20test%20message


62

logoonly

Länka till en E-Mail adress - specialtecken i URL


62

logoonly

Länka till en E-Mail adress - SPAM

Om man behöver lägga till en e-mail adress till websidan så finnsdet några steg man kan ta för att undvika problem med spam:Ersätt alla e-mail adresser på din sida med ‘inline’ bilder avadressernaSkriv ett program i JavaScript kryptera alla e-mail adresser iHTML kodenErsätt tecknen för e-mail adressen med teckenkoder


62

logoonly

Länka till olika resurser


62

logoonly

Outline

1 Reiteration


3 Hypertextlänkar


5 Additional topics

6 Mer Information


62

logoonly

Skapa en semantisk länk

Två attribut, rel och rev, tillåter dig att specificera relationen mellanen länk och dess destinationrel: relationen mellan detta dokument och det länkade dokumentetrev: relationen mellan det länkade dokumentet och dettadokument

I dokumentet index.html:<a rel="next" href="ch1.html">Chapter 1</a>

I dokumentet ch1.html:<a rev="start" href="/book/index.html">Beginning</a>


62

logoonly

Semantisk länk

Länkar som innehåller rel och rev attribut kallas semantiska länkareftersom taggen innehåller information om relationen mellanlänken och dess destinationWebläsare använder inte detta attribut, men det kan användas avsökmaskiner och andra program för att få mer information omlänken


62

logoonly

rel, rev - värdenalternate An alternate version of the documentstylesheet An external style sheet for the documentstart The first document in a selectionnext The next document in a selectionprev The previous document in a selectioncontents A table of contents for the documentindex An index for the documentglossary A glossary (explanation) of words used in the documentcopyright A document containing copyright informationchapter A chapter of the documentsection A section of the documentsubsection A subsection of the documentappendix An appendix for the documenthelp A help documentbookmark A related documentnofollow "nofollow" is used by Googlelicencetagfriend


62

logoonly

Metadata

Information om en site kallas metadataMan kan lägga till metadata till sin websida genom att lägga till ettmeta-element i ‘head’ sektionen i dokumentet

<head><meta name="description"

content="Free Web tutorials" /><meta name="keywords" content="HTML,CSS,XML" /><meta name="author" content="Hege Refsnes" /><meta http-equiv="content-type"

content="text/html;charset=UTF-8" /></head>


62

logoonly

Metadata


62

logoonly

Metadata

Man kan lägga till information och kommandon tillkommunikations-strömmen med meta-elementets ‘http-equiv’attributTvinga webläsaren att uppdatera websidan med jämna intervall<meta http-equiv="refresh" content="60" />

Omdirigera webläsaren från nuvarande dokument till ett nyttdokument<meta http-equiv="refresh"

content="5;url=www.camshots.com" />

Bestämma teckenuppsättning<meta http-equiv="Content-Type"

content="text/html;charset=UTF8" />


62

logoonly

Outline

1 Reiteration


3 Hypertextlänkar


5 Additional topics

6 Mer Information


62

logoonly

Mer info

HTML tags explained: http://www.w3schools.com/tags/HTML attributhttp://www.w3schools.com/tags/ref_standardattributes.asp


62

Documents

World Wide Web - WWW Uniform Resource Locator - URL