Thuis
Contacten

    Hoofdpagina


3. 2 wat willen we met dit hoofdstuk bereiken? 3 Inhoud

Dovnload 21.21 Kb.

3. 2 wat willen we met dit hoofdstuk bereiken? 3 Inhoud



Datum05.05.2019
Grootte21.21 Kb.

Dovnload 21.21 Kb.

Grondslagen v/d beleidsinformatica Hoofdstuk 3: Ongestructureerde gegevens HTML

3.1 OVERZICHT

HTML voornamelijk een rol bij het World Wide Web


--> gebruik van tags
Daarnaast ook dynamische webtoepassingen
Voorbeeld: e-mail

3.2 WAT WILLEN WE MET DIT HOOFDSTUK BEREIKEN?
3.3 INHOUD


ZIE OVERZICHT PAGINA 33

3.4 HTML ALS MARKUP-TAAL VOOR HET WORLD WIDE WEB

3.4.1 Het World Wide Web (WWW) en Hypertext

Oorspronkelijk doel was CERN: Conseil Européen pour la Recherche Nucléaire


--> platform om documenten te delen onder de wetenschappers

WWW is een globaal hypertext-systeem


--> pagina’s zijn via universeel mechanisme toegankelijk

Het systeem bestaat uit verzameling tekstpagina’s


--> werking via kruisverwijzingen (niet lineair zoals bij boek), wel hyperlinks
Men gebruikt voor deze kruisverwijzingen: URL, HTML en HTTP

URL: Uniform Resource Locator
--> formaat waarin men hyperlinks opstelt
HTML: Hyper Text Markup Language
--> taal waarin men de pagina opmaakt (kan aangevuld zijn met media)
HTTP: HyperText Transfer Protocol
--> protocol om pagina’s te transfereren over het internet

Website: verzameling pagina’s op dezelfde webserver georganiseerd via home pagina met links

Elke pagina in HTML moet leesbaar zijn op elke browser


! Onafhankelijk van het besturingssysteem
Netscape Navigator: eerst webbrowser

HTTP
--> internet applicatieprotocol die één bepaalde internet toepassing ondersteunt
Het web is een toepassing op het internet

Er zijn er ook anderen zoals FTP (File Transfer Protocol)

Voor elke verwijzing maakt men gebruik van URLS
--> steeds dezelfde opbouw
- Eerst de soort applicatieprotocol (FTP/HTTP)
- Tweede de server waarop men de bestanden kan vinden
- Derde de naam van het middel
! Meerdere mappen onderscheiden we via /

Bij http://myfestivalworld.com


--> http is de protocol
--> myfestivalworld is de host
--> .com is de domein

3.4.2 HTML: de context

HTML vertelt de browser hoe men zaken moet weergeven


--> de code bestaat ui tags
Vaak gebruikt men tags in paren
Men maakt dan gebruik van een opening en een afsluiting

HTML wordt aanbeveeld door World-Wide Web Consortium (W3C)


--> elke browser kan deze normaal verwerken (vaak ook nog extra zaken)

Men kan HTML schrijven in elk programma dat ASCII-opmaak voorziet


--> dus geen extra zaken toevoegt
Men kan dit bijvoorbeeld in kladblok

VOLGENDE ZAKEN ZIJN GEKEND, SNEL DOORLEZEN BIJ STUDEREN

3.5 ELEMENTEN VAN HTML

3.5.1 Verplicht aanwezig elementen
3.5.2 Tekst formatteren

Steeds beginnen met < en eindigen met > voor een tag


Elk document starten met elk document eindigen met
Altijd een voorzien waarin je </b>staat (tabnaam) <br /><b><body></b> voorzien met de eigenlijke tekst etc. <br /> <br /><b> <br /></b>is een nieuwe paragraaf <br /><b> <br /></b> is een nieuwe regel <p>Om sommige symbolen in te voegen moet je strings gebruiken:</p> <br /><b>< </b> < <br /><b>> </b>> <br /><b>& </b>& <br /><b>" </b>“ <br /> <br /><b>! </b>Puntkomma niet <a href="/private-sub-cbokode-click-dim-merk-hargasatuan-as-string.html">vergeten achter de string </a><p>Men kan de tekst opmaken via -tags</p> <br /><i>Voorbeeld: </i>... <p>Andere opmaken zijn:</p> <br /><b><i></b> voor cursief <br /><b> voor vetgedrukt <br /><b><u></b> voor onderlijnt <br /><b> <br /></b> voor altijd even brede tekst <br /><b><sub></b> voor subscript <br /><b><SUP> </b>voor superscript <p>Ook titel mogelijk via de <b><Hx> </b>tag</p> <br /> <br /><b>3.5.3 Invoeren van links en hyperlinks</b> <p>Links maken het mogelijk van de ene locatie <a href="/watercocktail-buurt-wat.html">naar de andere te surfen</a></p> <br />- Locatie kan zich op dezelfde pagina bevinden <br />- Locatie kan zich op dezelfde server bevinden <br />- Locatie kan zich op een andere server bevinden <br />- Bestanden kunnen variëren <p>Gebruik van <b></p> <br /></b>Of gebruik van onzichtbare <b><NAME =”...”> </b>met vervolgens <b></b> waar men op de ... dezelfde gegevens behoudt (gebruikt men voor plaats in hetzelfde document) <br /> <br /><b>3.5.4 Invoeren van figuren</b> <p>Men kan een pagina voorzien van foto’s</p> <br />--> het is een object en start dus waar ook het einde zich bevindt <br />--> enkel een “start-tag” <br /><b><img scr=”...” alt=”...”> <br /></b>De IMG definieert het feit dat je een afbeelding toevoegt <br />De SCR duidt op de bron v/d afbeelding <br />De ALT <a href="/bijlage-vmbo-gl-en-tl-2018.html">geeft de afbeelding een naam </a><br />Men kan ook zaken toevoegen als <b>WIDTH </b>of <b>HEIGHT</b> om de omvang v/d afbeelding te limiteren <br />--> Wanneer men slechts één van de twee opgeeft (<b>WIDTH </b>of <b>HEIGHT</b>) <br />--> Andere variabele wordt aangepast in dezelfde verhouding <p>Je kan ook een afbeelding als achtergrond zetten:</p> <br /><b><body BACKGROUND=”...”> <br /></b>(Wat uiteraard kei belachelijk is omdat iedereen werkt met CSS) <br /> <br /><b>3.5.5 Lijsten</b> <p>HTML laat ongenummerde en genummerde lijsten toe</p> <br />Ongenummerd: <b><ul></b> (unnumbered list) <br />Genummerd: <b><ol></b> (Ordered List) <br />Elk item van de lijst geef je aan door <b><li> </b>(List Item) <br /> <br /><b>3.5.6 Tabellen</b> <p>Gebruik van tabellen komt vaak voor</p> <br />- Onderverdeling in verschillende secties <br />- Tekst weergeven in kolommen <br />- Navigatiemenu’s <a href="/website-aanpassen.html">toevoegen aan de website </a><br /> <br /><b><table> </b>is de starttag, <b></table> </b>is de eindtag <br />Elke <i><b>rij </b></i>van een tabel is <b><tr> </b>gevolgd door de inhoud en <b></tr> <br /></b>Elke <i><b>kolom</b></i> van een tabel is <b><td> </b>gevolgd door de inhoud en <b></td> <br /></b>Elke <i><b>hoofding</b></i> van een tabel is <b><TH> </b>gevolgd door de inhoud en <b></TH></b> <br />(<i>de hoofding zal men centreren in de tabel)</i> <br /> <br /><b>3.5.7 Bijzonde HTML Elementen</b> <br /> <br /><i><b>Frames</b></i> laten het toe je pagina in te delen in verschillende <a href="/secties-en-klassen--nouvelles-maart-2009-er-worden-vijf-5-voge.html">secties met inhoud </a><br />--> het gebruik vervaagt door <b>CSS </b>of <b>C</b>ascading <b>S</b>tyle <b>S</b>heets <br /> <br /><i><b>Form</b></i> is een formulier op je pagina en kan form fields bevatten (plaatsen om gegeven in te voegen) <br />Dit <a href="/wat-is-kunst-vorige-les-bleek-dat-kunst-voor-veel-leerlingen-a.html">kan op basis van </a><i>textbox, checkbox </i>of <i>drop-down menu</i> <br />De gegevens worden naar de server gestuurd via <b>CGI</b> of Server-Scripting <br /> <br /><b>C</b>ascading <b>S</b>tyle <b>S</b>heets (<b>CSS</b>) biedt de mogelijkheid om één centrale opmaak te gebruiken voor meerdere pagina’s zonder per element de code te melden <br /> <br /><i><b>Commentaar </b></i>via <b>inhoud <b>--></b> is het mogelijk om commentaar toe te voegen aan je document <br />--> wordt niet getoond op de website wel in de broncode (voornamelijk voor de ontwerpers) <p>http://www.w3.org/TR/html5/</p> <p>Vormt de basis van HTML5 <br /> <br /><b>3.6 DYNAMISCHE TOEPASSINGEN OP HET WEB</b> </p> <p>HTML is een <i><b>statische mark-up taal</b></i></p> <br />--> Men kan de pagina enkel aanpassen door <a href="/14e-jaargang--nr-1--februari-2018.html">de broncode aan te passen </a><p>Je kan pagina’s dynamisch maken via <i><b>webbrowser applicaties </b></i>en <i><b>server applicaties</b></i></p> <br /> <br /><b>Webbrowser applicaties <br /></b>--> maakt gebruik v/d webbrowser voor de uitvoering v/h programma <br /><b>Server applicaties <br /></b>--> maakt gebruik v/d server voor de uitvoeding v/h programma (bezoekers merken niets) <br /> <br /><b>3.6.1 Webbrowser applicaties</b> <br /> <br /><b>3.6.1.1 Java Applets</b> <p>Aparte stukjes Java-code in de webbrowser (opgeladen en uitgevoerd)</p> <br />--> laat het toe om eigen visuele componenten toe te voegen (<i>knoppen, invulvelden, ...</i>) <br /><b>! </b>Java <a href="/hoeken-applets.html">Applets worden beveiligd</a>, ze moeten TRUSTED zijn om zich te mogen uitvoeren <br /> <br /><b>3.6.1.2 Client-scripts</b> <p>Men kan ook de programmacode rechtsstreek opnemen in de HTML v/e pagina</p> <br /><b>Client-script:</b> wordt uitgevoerd op de computer v/d gebruiker <br /><b>Server script:</b> wordt uitgevoerd op de server v/d website <p>Client-script wordt geassocieerd met JavaScript</p> <br />--> toelating om kleine programmaatjes in HTML te stoppen, interpreten en uit te voeren <br />JavaScript maakt je pagina dynamisch <br />- Uitklapbare menu’s <br />- Foto’s die bewegen <br />- ... <br /> <br /><b>3.6.1.3 Flash</b> <p>Flash is een <a href="/personalia-naam-gunter-borgmans-adres.html">multimedia methode van Adobe</a></p> <br />--> het afspelen verreist een <i>flash player <br /></i><b>Probleem:</b> flash heeft een lange laadtijd en is niet SEO vriendelijk <br /> <br /><b>3.6.2 Server Applicaties</b> <br /> <br /><b>3.6.2.1 CGI</b> <br /> <br /><b>CGI </b>betekent <b>C</b>ommon <b>G</b>ateway <b>I</b>nterface <br />--> wordt gebruikt om gegevens opgegeven op de site door te sturen naar de server <br />CGI is de brug tussen HTML en een programma op de server <br />CGI ontvangt informatie en stuurt informatie terug <br /> <br /><b>3.6.2.2 Server-Scripts</b> <p>Voornamelijk gebruik voor complexere toepassingen dan client-scripts</p> <br />--> worden uitgevoerd door de server en niet door de browser <br /> <br /><i>Voorbeeld: <br /></i>Opvragen v/e boekenlijst <a href="/de-openbare-bibliotheek.html">in een bibliotheek </a><br />--> HTML pagina laat het toe dit op te vragen <br />--> Server-script zoekt deze gegevens op <br />--> Server-script geeft deze weer als nieuwe HTML pagina <br />Veel gebruikte server-scripts zijn <br /><b>JSP: J</b>ava <b>S</b>erver <b>P</b>ages <br /><b>ASP: </b>Actieve Serves Pages <br /><b>PHP</b> <br /> <br /><b>3.7 ELEKTRONISCHE POST</b> <p>Het gaat hier voornamelijk om <b>e</b>lektronic-<b>mail</b>s</p> <br />--> kan via <i><b>internet</b></i><i> </i>maar ook via <i><b>intern <a href="/varkensbedrijf-in-dalfsen-besmet-via-toldijk.html">systeem in het bedrijf</a></b></i> <p>Men maakt gebruik van <i><b>mail-software</p> <br /></b></i>Men heeft een <i>gebruikersindentificatie:</i> publiek gegeven, het adres waarnaar men stuurt <br />Men heeft een <i>paswoord: </i>privaat gegeven enkel voor de gebruiker en de systeemadministratie <br />Dit dient om de mailbox te beschermen <br />De <i>mailbox</i> wordt vaak opgeslagen op een <i><b>mail-server <br /></b></i>Een mailbox bestaat uit verschillende <i><b>records</b></i>, elke record is één mail <p>Men kan communiceren van één persoon <a href="/learn-for-life.html">naar vele personen via </a><i><b>mailing lists</b></i></p> <br /> <br /><b>3.8 DIVERSE INTERNETTOEPASSINGEN</b> <p>Extreme vorm van interactie</p> <br />--> chatten <br /><i>Voorbeeld: </i>Windows Live, Skype, Facebook, ... <br />Tegenwoordig ook opkomst van <b>VoIP</b> of <b>V</b>oice <b>o</b>ver <b>IP</b> waardoor men via internet kan bellen <p>Ook downloaden stijgt via <b>FTP</b> of Internet <b>F</b>ile <b>T</b>ransfer <b>P</b>rotocol</p> <br />Er bestaan ondertussen gigantische servers die FTP aanbieden om bestanden uit te wisselen <p>Informatie kan men opzoeken d.m.v. <b>cache-systemen</b> zoals Google en Yahoo!</p> <br />Opzoeken kan op basis van <i><b>index</b></i> en op basis van <i><b>directory-system</b></i> <br />Google maakt gebruik van <b>index</b>: men zoekt op basis v/d geïndexeerde kernwoorden door Google <br />Yahoo! Directory werkt een <b>directory-system:</b> men werkt via kernwoorden en categorieën <br />--> men kan zaken zoeken via een boomstructuur van categorieën (zelfde als DMOZ) <br /> <br /><b>3.9 WEB 2.0</b> <p>Voornamelijk de laatste tien jaar bekend geraakt</p> <br />--> het draait om <i><b>vernieuwd gebruik</b></i> van het web en niet om een update! <br /><b>! GEEN UPDATE <br /></b>Eerder om de methode waarop websites het web zijn gaan gebruiken op een andere manier <br /> <br /><i><b>Vroeger:</b></i> aanbieder v/d website bepaalde inhoud, <a href="/rekengroen-rekenen-voor-vmbo-groen-en-mbo-groen-module-stadsbo.html">bezoekers hadden geen inbreng </a><br /><i><b>Nu:</b></i> bezoekers bepalen zelf de inhoud v/d website <br /><b>! </b>Zonder de gebruikers heeft de website geen inhoud en is ze ook niet aantrekkelijk <p>Economisch principe: <b>netwerkeffecten</b></p> <br />--> Meer gebruikers trekt meer nieuwe gebruikers aan <p>Web 2.0 wordt wel eens het sociale web genoemd</p> <br /><i>Voorbeelden:</i> Delicious, YouTube, Picasa, Linkedin, Google Docs, Facebook, Digg <p>Voornamelijk <b>AJAX</b> (<b>A</b>synchronous <b>J</b>avascript <b>A</b>nd <b>X</b>ML) maakt dit mogelijk</p> <br />--> AJAX laat interactieve webpagina’s toe (onder meer door refresh uit te schakelen) <br />--> Door AJAX wordt de kloof tussen computerprogramma’s en alles <a href="/paulina-jaloza-2a-12-11-2012.html">via het internet kleiner </a><br /> <br /><b>3.10 HTML IN EEN BEDRIJFSCONTEXT, B2C EN B2B</b> <p>Bedrijven bieden via het web <i><b>bedrijfs- </b></i>en <i><b>productinformatie</b></i><i> </i>aan</p> <br />Vroeger: eenzijdige interactie tussen bedrijf en klant (statistisch) <br />Nu: mens -> machine en machine -> mens <br />Dit werd mogelijk door <b>CGI </b>en <b>ASP </b>(voor Microsoft Platformen) en <b>JSP </b>(Java omgeving) <p>De server side scripts kunnen als uitvoerbare codes aangesproken worden door de webserver</p> <br />--> dynamischer <p>Bezoekers kunnen nu zelf gericht informatie zoeken en hoeveelheden/orders stellen</p> <p>Er was ook meer machine-machine interactie nodig tussen ondernemingen <br /> <br /><b>B2B: </b>machine-machine <br /><b>B2C: </b>machine-mens en mens-machine </p> <p>Om tussen bedrijven te communiceren gebruikt men <b>XML</p> <br /></b>--> eenvoudig gemeenschappelijke gegevensformaten creëren <p>Zo kan men gegevens op dezelfde manier delen via XML (standaard maken)</p> <br /> <br />XML: beschrijving v/d inhoud v/d data in termen <br />--> <a href="/emea-technology-update.html">enkel weergave van data </a><br /><div title="footer"> <table width="100%" cellpadding="7" cellspacing="0"> <col width="27*"> <col width="229*"> <tr valign="top"> <td width="10%"> <br /> <br /></td> <td width="90%"> <br />Jeroen De Koninck – HIRB – 2012-2013 <br /></td> </tr> </table> <br /> <br /> <br /></div> </body></name></hx></sup></sub></u></body>


Dovnload 21.21 Kb.