Informatica 4H/V. Les 7. Hyperlinks en het wereldwijde web. Periode 1 HTML en Netwerken bzmr - Da Vinci College Purmerend 1

Transcriptie

1 Informatica 4H/V Periode 1 HTML en Netwerken Les 7 Hyperlinks en het wereldwijde web bzmr - Da Vinci College Purmerend 1

2 De lessen deze week We bekijken de structuur van het wereldwijde web Hoe werken zoekmachines Website uitbreiden naar meerdere pagina s Deze les Opmaak toevoegen aan de pagina Stylesheets Mini-introductie CSS Opdracht: Breid je website uit met nieuwe pagina s bzmr - Da Vinci College Purmerend 2

3 Hyperlinks en het wereldwijde web bzmr - Da Vinci College Purmerend 3

4 Het Wereldwijde Web Het internet bestaat om gegevens te delen naar elke plek op aarde Onder andere: Muziek Films Foto s Deze dingen zijn vaak groot en duren lang om te laden En hoe kun je ze vinden? Een groot telefoonboek? Het internet heeft een index nodig bzmr - Da Vinci College Purmerend 4

5 Het Wereldwijde Web Oplossing: Tekstbestanden met verwijzingen naar andere bestanden De geschikte kandidaat: Hypertext Tekstbestand Weinig extra informatie nodig behalve de html-tags Zeer flexibele basis dankzij zelf in te richten opmaak en structuur Andere ontwikkelingen, zoals Gopher en Usenet, maakten gebruik van een Menu Document structuur (zoals ) Een bestand bevat referenties naar alle inhoud van de website Kreeg een vaste plek in de browser (meestal links) Te weinig mogelijkheden Dus, HTML werd de taal van het wereldwijde web bzmr - Da Vinci College Purmerend 5

6 Het Wereldwijde Web HTML kan namelijk alles: Kleine pagina s met tekst en foto s Documenten van krantenartikelen tot tutorials Webapplicaties met newsfeeds, video s, spelletjes En als allerbelangrijkste: DOORVERWIJZEN Met de a tag: hyper reference Tekst van de link <a href= >bzmr.nl dacht het wel </a> anchor adres Hyperlink bzmr - Da Vinci College Purmerend 6

7 Hyperlinks Het <a> is een inline-element Kan in een tekst worden geplaatst Tekst ervoor en erna sluit mooi aan Meerdere a-elementen achter elkaar verschijnen op dezelfde regel In tegenstelling tot <p>, een block-element Bevat tekst of andere elementen (andere tags) Meerdere p-elementen na elkaar verschijnen onder elkaar Tekst wordt door een block-element onderbroken Andere voorbeelden: <ul>, <ol>, <li>, <table> <p>om meer te weten te komen over de Bengaalse Oehoe kun je <a href= >deze link</a> volgen!</p> Om meer te weten te komen over de bengaalse oehoe kun je deze link volgen! bzmr - Da Vinci College Purmerend 7

8 Hyperlinks Het hyperlink kan intern zijn: <a href= pagina.html >Link naar andere pagina</a> (ga naar pagina.html naast het huidige bestand) <a href= map/pagina.html >Link naar de pagina</a> (ga naar pagina.html in de map map) Maar ook extern zijn: <a href= >Link naar google.com</a> (vergeet dan niet het hele adres op te schrijven!) bzmr - Da Vinci College Purmerend 8

9 Een web van tekstbestanden DE REST VAN HET INTERNET (niet echt een wolk, gewoon meer web) bzmr - Da Vinci College Purmerend 9

10 Webben en spinnen We noemen het een Web omdat je makkelijk over de draden naar een andere plek kunt lopen. Met een paar goede klikken kom je vaak op de pagina die je zoekt Maar hoe kom je meteen bij de informatie die je zoekt? Moeten we alle pagina s doorzoeken? Moeten we blijven klikken totdat we het gevonden hebben? Moeten we een startpagina hebben met links naar alle andere websites? Nee, zei Google, en ze maakten Google bzmr - Da Vinci College Purmerend 10

11 Zoekmachines Hoe krijg ik mijn kat uit de boom, Google? bzmr - Da Vinci College Purmerend 11

12 Webben en spinnen Google is een zoekmachine, net als Yahoo Bing DuckDuckGo Ask.com Zoekmachines kunnen op basis van een zoekvraag relevante pagina s doorverwijzen Zo heb je snel gevonden wat je nodig hebt, vaak binnen één klik bzmr - Da Vinci College Purmerend 12

13 Webben en spinnen Een zoekmachine Zet een zoekvraag om naar belangrijke sleutelwoorden: goedkope fidget spinners in purmerend Zoekt in een grote database naar pagina s met deze sleutelwoorden Verzamelt de pagina s en sorteert ze op Revelantie Populariteit Reputatie Of een combinatie daarvan Maar hoe doet de zoekmachine dat? Simpel: 1. Maak een database met alle woorden 2. Maak een database met alle websites 3. Koppel de woorden aan de websites Maar hoe doet de zoekmachine dat? bzmr - Da Vinci College Purmerend 13

14 Webben en spinnen Een zoekmachine heeft een spider, waarmee deze over het web kan lopen Deze spider gedraagt zich als volgt: 1. Lees een pagina 2. Zoek belangrijke woorden 3. Voeg de woorden toe aan de database (als ze er nog niet waren) 4. Koppel deze website aan die woorden 5. Vindt nieuwe hyperlinks op de pagina 6. Volg alle hyperlinks en begin weer bij stap 1 De spider zal zo veel pagina s tegenkomen bzmr - Da Vinci College Purmerend 14

15 Webben en spinnen DE REST VAN HET INTERNET bzmr - Da Vinci College Purmerend 15

16 Webben en spinnen Zo kan een spider uiteindelijk alle pagina s op het web doorlopen Een zoekmachine gebruikt meerdere spiders Een spider kan een website vaker bezoeken Populaire sites worden meerdere keren per dag bezocht Men zegt dat je met maximaal 90 klikken elke pagina kunt bereiken Maar een spider vindt niet alles: Pagina s achter wachtwoordbeveiliging Pagina s waarvoor je moet betalen Pagina s die de spiders geblokkeerd hebben Pagina s waar geen link naartoe is Deze pagina s zijn onderdeel van het Deepweb Het Deepweb is nog vele malen groter dan het normale web Verhouding van 500 deepweb : 1 normaal, maar dat is een grove schatting bzmr - Da Vinci College Purmerend 16

17 Opdracht deze week 1. Breidt je website uit naar meerdere pagina s 2. Verbind al deze pagina s aan elkaar 3. Maak een inhoudsopgave (index.html) Volledige opgave vind je in opdracht_week4.pdf op bzmr.nl bzmr - Da Vinci College Purmerend (opte.org/maps, 2005) 17