Kris Merckx - 05/10/ Agnes.js - creative commons license
|
|
|
- Cornelis Abbink
- 6 jaren geleden
- Aantal bezoeken:
Transcriptie
1 Agnes.js Beta 1.1 Gratis voor niet-commercieel gebruik. 1. Functionaliteit TOETSTYPES: - meerkeuze (één of meerdere correcte/foute antwoorden) - invuloefening (meerdere juiste antwoorden, dyslexie-vriendelijk) - ja-neen-vragen - kruiswoordraadsel - selecteer het juiste antwoord In alfaronde: sleepopdrachten Welke elementen horen bij elkaar (groepjes vormen) in de juiste volgorde plaatsen. In voorbereiding: - combinatie-oefeningen - open vragen (via neurale netwerken) LEERPADEN: - gepagineerde weergave (slides) - lagen (boven elkaar plaatsen van elementen, met ingesloten invuloefeningen) Je kan de oefeningen insluiten in een eigen website of een site bouwen met Agnes. Voordelen: Om het even welke webpagina-editor (Dreamweaver, kladblok, Aptana, Kompozer...) kan gebruikt worden om de oefeningen aan te maken. Je hebt geen extra software nodig. Je tikt de oefening gewoon in je webpagina. De rest gebeurt automatisch. De webbeheerder moet één regel code toevoegen en hoeft zelfs helemaal niet te werken in XML of wat dan ook. Je kan meerdere oefeningen in één pagina stoppen.
2 2. Oefeningen maken a. Invuloefeningen De leraar maakt een webpagina met vetgedrukte woorden. Agnes.js vervangt de woorden automatisch door invoervelden. De "controleer"- en "opnieuw"-knop worden automatisch toegevoegd evenals de feedback.
3 Oefeningen maken in Dreamweaver 1. Je maakt in Dreamweaver een element aan (een alinea, een div...). 2. Je geeft die een uniek "id" (bijvoorbeeld: invul). 3. Vervolgens selecteer je één voor één de woorden die je wil laten invullen. 4. Je zet ze "vetgedrukt" door op het B-symbool te klikken in het eigenschappenvenster. 5. Meerdere mogelijke oplossingen? Die scheid je eenvoudig door een schuine streep: Sinterklaas / De sint is jarig op 6 december. 6. Klaar is kees.
4
5 De websitebeheerder Kris Merckx - 05/10/ Agnes.js - creative commons license merckx.kris@gmail.com 1. Je linkt het bestand agnes.js aan de webpagina die één of meerdere oefeningen bevat. 2. Je "start" de oefening. Bekijk het onderstaande voorbeeld: <!DOCTYPE html> <head> <script type="text/javascript" src="agnes.js? "></script> <script> window.onload=function(){ var oef2= new agnes.invuloefening("#invul"); oef2; </head> <body> </script> ; var oef3= new agnes.invuloefening("#invul2"); oef3; <div id="invul" class="oefening"> <strong>sinterklaas</strong> is jarig op 6 <strong>december</strong>. <br/>zie ginds komt de <strong>stoomboot</strong> uit <strong>spanje</strong> weer aan. <div id="invul2" class="oefening"> Als de <strong>kat</strong> van huis is, <strong>dansen</strong> de <strong>muizen</strong> op <strong>tafel</strong>. </html> </body> Als ook jquery gekoppeld is aan uw webpagina is het handiger en veiliger om de window.onload-functie te vervangen door: <script> $(document).ready(function(){ var oef2= new agnes.invuloefening("#invul"); oef2; </script> ); var oef3= new agnes.invuloefening("#invul2"); oef3;
6 b. Een kruiswoordraadsel De leraar maakt een webpagina met een tabel. Maak een tabel aan met x aantal rijen en y aantal kolommen. Voer letter in in de cellen (horizontaal of verticaal). Cellen die leeg moeten blijven, laat je gewoon leeg... Klaar is kees... Een kruiswoordraadsel klaarstomen in Dreamweaver 1. Bouw een tabel. Klik op "invoegen / tabel " in de menubalk. 2. Vul het gewenste aantal rijen en kolommen in. 3. Bij de rest van de opties geeft u in wat u zelf wil. Houd er wel rekening mee dat al deze extra instellingen enkel dienen voor het gebruiksgemak in Dreamweaver. Agnes.js overschrijft deze stijlopties automatisch.
7 4. De tabel verschijnt nu in Dreamweaver. 5. Voer letters in in de gewenste cellen zodat je horizontaal of verticaal woorden krijgt. De cellen die "zwart" moeten worden, laat je gewoon open. 6. Geef een "id" aan de tabel in het eigenschappenpalet. 7. Voer nu instructies in voor de gebruiker. Hoe je dit doet, kan je zelf bepalen. Toch beschikt agnes.js over een standaard methode om een genummerde lijst te gebruiken voor de instructies.
8 8. Wil je een genummerde lijst gebruiken? Bekijk dan even dit voorbeeld... In ons voorbeeld bevatten rijen 1, 3 en 5 een woord (horizontaal). Je maakt een genummerde lijst aan waarbij je bij de rijen waar niets moet ingevuld worden, ook niets ingevuld. OPGELET: Dreamweaver doet moeilijk als je een "lijstitem" leeg wil laten. GEEN PROBLEEM: vul er een $- teken in. 1. Muziekinstrument 2. $ 3. Iedereen heeft het. 4. $ 5. Lekker wild dier En hops... bezorg je pagina aan de webbeheerder... de rest gebeurt nu automatisch. Het voorbeeld in Dreamweaver: Het voorbeeld in de webbrowser met agnes.js
9
10 C Meerkeuzevragen Een meerkeuzevraag kan je op diverse manieren samenstellen. Standaard kies je hiervoor een lijst met lijstitems. In die lijstitems neem je correcte antwoorden op met een <strong>-tag (vetgedrukt). Foutieve antwoorden met een <em>-tag. Je kan meerdere meerkeuze-oefeningen in één pagina opnemen door de CSS-klasse meerkeuze, multiplechoice of meerkeuzevraag aan het <ul>-element toe te kennen. Indien je de gebruiker de correcte antwoorden wil laten aanduiden, voeg je nog een CSS-klasse toe nl. correct. Wil je de foutieve antwoorden laten aanduiden, voeg je één van de volgende CSS-klasses toe: error, errors, fout, fouten... <h2>doe de test</h2> <h5>een geschiedkundige bron is...</h5> <ul class="meerkeuze correct"> <li><em>de plaats waar een oude rivier begint</em></li> <li><strong>een spoor uit het verleden dat ons iets leert over vroeger</strong></li> <li><em>de plaats waar men al honderden jaren spuitwater oppompt</em></li> <li><strong>een overblijfsel uit het verleden</strong></li> <li><em>een geschiedkundige die onderzoek doet naar vroeger</em></li> </ul> <script> var mk= new agnes.meerkeuze(); mk; </script> D. Ja-neen-vragen Ja-neen-vragen werken op dezelfde manier als meerkeuzevragen: <h5>een historische bron is een plaats waar water uit de grond komt.</h5> <ul class="meerkeuze correct"> <li><em>ja</em></li> <li><strong>nee</strong></li> </ul>
11 3. Interactieve inhouden A. Slides Met een slider -element kan je een presentatie maken van om het even welk repetitief html-element. <div class="slider" id="evolutie" style="float:right"> <img title="de wolf is de voorouder van alle honden." src="images/wolf.jpg"/> <img title="wie is er het best aangepast aan overleven in de vrije natuur? De hond of de poedel?" src="images/poedel.jpg"/> <script> agnes.slides("slider", "img"); </script> Indien je meerdere slides in één pagina wenst op te nemen, houd er dan rekening mee dat u best een nieuwe klasse definieert als u binnen dezelfde klasse meerdere repetitieve elementen wenst weer te geven. Het onderstaande voorbeeld kan bijvoorbeeld een probleem veroorzaken: <div class="slider" id="evolutie" style="float:right"> <img title="de wolf is de voorouder van alle honden." src="images/wolf.jpg"/> <img title="wie is er het best aangepast aan overleven in de vrije natuur? De hond of de poedel?" src="images/poedel.jpg"/> <div class="slider"> <div>wolf <div>poedel <script> agnes.slides("slider", "img"); agnes.slides("slider", "div"); </script> Als u de naam van de klasse wijzigt, is het probleem opgelost: <div class="slider" id="evolutie" style="float:right"> <img title="de wolf is de voorouder van alle honden." src="images/wolf.jpg"/> <img title="wie is er het best aangepast aan overleven in de vrije natuur? De hond of de poedel?" src="images/poedel.jpg"/> <div class="slider2"> <div>wolf <div>poedel <script> agnes.slides("slider", "img"); agnes.slides("slider2", "div"); </script>
12 B. Laagjes Kris Merckx - 05/10/ Agnes.js - creative commons license merckx.kris@gmail.com Met de laagjesfunctie kan je meerdere elementen boven elkaar plaatsen. Het is ook zeer belangrijk om het container -element een grootte en hoogte te geven via CSS. <div class="laag" > <p>3</p> <p>2</p> <p>1</p> <style>.laag{ </style> width:480px; height:238px; border:2px solid black; <script> new agnes.layers("laag", "p"); </script> Opgelet: het bovenste element ligt ook helemaal bovenaan, net zoals in programma's als Adobe Photoshop. De tekst 3 uit het voorbeeld ligt dus boven 2 en boven 1. Wanneer u de functie vertelt een bepaald element te stapelen, geldt dit voor alle elementen van dat type. In het bovenstaande voorbeeld stapelt de functie alle p -elementen in de container.laag. Wanneer een alinea een andere alinea zou insluiten (vb. <p>tekst <p>alinea in de andere alinea</p></p>), dan wordt ook die alinea gestapeld.
13 Een oefening in lagen. Je kan een invuloefening ook in diverse laagjes stoppen. Op die manier kan je bijvoorbeeld een kaartoefening maken. In het onderstaande voorbeeld plaatsen we helemaal onderaan een wereldkaart. In de lagen daarboven plaatsen we een invuloefening. We geven aan elk invoerveld een vaste positie door de linker- en bovenmarge aan te passen. <div class="gelaagd" id="invul"> <div style="display:block;margin-left:30px;margintop:60px;"><strong>amerika/amerika</strong> <div style="margin-left:190px;margin-top:40px;"><strong>europa/europa</strong> <div style="margin-left:310px;margin-top:40px;">azië <div style="margin-left:200px;margin-top:100px;"><strong>afrika</strong> <div style="margin-left:380px;margin-top:160px;"><strong>oceanië</strong> <div><img src="images/wereld.png"/> <style>.gelaagd{ width:480px; height:238px; border:2px solid black; </style> <script> agnes.aanpassen({ dyslexia:true ); var laagjes= new agnes.layers("gelaagd", "div"); laagjes; var invul= new agnes.invuloefening("#invul"); invul; </script>
14 C. Pagina's en leerpaden Het is mogelijk om met agnes.js gepagineerde leerpaden te bouwen. Twee onderdelen zijn hierin belangrijk: 1. een startpagina waarin je de gepagineerde weergave activeert (vb. index.html, default.asp, index.php...) 2. een bestand (standaard: nav.html) waarin een lijst van links naar de diverse pagina's is opgenomen (weliswaar een lijst met enkel <a>-elementen). De index.html-pagina In deze pagina neem je een html-element (best een <div>-element) op waarin je de les wenst op te nemen. <div id="container"> Uiteraard is het ook van belang om het agnes-framework te laden: <script src="agnes.js" type="text/javascript"></script> Alle andere activatie code plaats je onder deze regel: <script> window.onload=function(){ var les= new agnes.pages(); les; ; </script> Daarna voegen we links naar de diverse pagina's toe aan het bestand nav.html. <a href="1.html">inleiding</a> <a href="2.html">wat is evolutie?</a> <a href="4.html">kopieerfoutjes</a> <a href="3b.html">de evolutie is dom</a> <a href="5.html">fossielen</a> Deze pagina mag ook andere onderdelen bevatten, maar enkel de links worden ingelezen, in de volgorde waarin ze in het document zijn ingevoerd. Standaard worden de links genummerd weergegeven. Opgelet: de vormgeving (zoals hieronder) wordt niet bepaald door agnes.js, maar door een CSS-stijl die u zelf kan bepalen. In de diverse pagina's die u via nav.html opneemt, kan u gebruikmaken van alle mogelijkheden van HTML(5) en van de functionaliteit van agnes.js.
15 4. Instellingen A. Algemene instellingen aanpassen U kan agnes zelf uitgebreid configureren zonder dat u hiervoor agnes.js zelf dient te openen en aan te passen. Dit kan in elke pagina waarin u een agnes-functie opneemt. Opgelet: instellingen die enkel van toepassing zijn op de paginering, kan u enkel opnemen in de pagina waarin u de functie pages activeert. Instelling Standaardwaarde Doel FillTag (string) strong Bij invuloefeningen worden de waardes in de strong - tag als correcte anwoorden aangenomen. Indien u hiervoor een andere tag wenst in te stellen, wijzigt u de FillTag. SolutionSplitter (string) / Indien meerdere antwoorden correct zijn, kan u die antwoorden van elkaar scheiden door een /. Indien u een ander scheidingsteken wenst te gebruiken, verandert u de SolutionSplitter. OPGELET: fout geschreven antwoorden van gebruikers kan u laten goed rekenen met de instelling dyslexia=true. U moet dus niet alle foutgeschreven antwoorden zelf invoeren. btncheck (string) Controleer Opschrift van de controleerknop in de oefeningen. btnrestart (string) Opnieuw Opschrift van de opnieuw knop in de oefeningen. ColorError (string) red Achtergrondkleur van de geselecteerde fouten in meerkeuzevragen. ColorCorrect (string) green Achtergrondkleur van de geselecteerde correcte antwoorden in meerkeuzevragen. MCselectType li Welk element selecteren als item in een meerkeuzevraag? Voorbeeld: agnes.aanpassen({ FillTag: span, SolutionSplitter: +, container: mijnles );
16 B. Paginering aanpassen: De pagineringsintellingen kan u wijzigen via agnes.pages({ ) //uw instellingen Instelling Standaardwaarde Doel OnlyForward (boolean) false Paginering verdwijnt, enkel vooruitknop NumberedPages (boolean) true Standaard staat deze waarde op true. Dit betekent dat de pagina's in genummerde tabs worden weergegeven. Indien u de waarde op false zet, krijgen de pagina's de opschriften van de links uit nav.html. container (string) container De id van het element waarin u de paginering wil activeren. Standaard is dit container. element (string) a Bepalen welk element hij moet selecteren. Sowieso zal je in het element altijd een href -attribuut moeten opnemen. nav (string) nav.html Het bestand waaruit de links worden ingelezen. enc (string) / Indien u de navigatie uit een beveiligde PHP-pagina of uit een databank wenst op te halen, kan u een id naar die pagina meesturen. Indien u de enc - parameter meestuurt, wordt nav.html of de nav - parameter genegeerd. agnes.php?id=enc navname (string) agnesnav De id en de class van het navigatiemenu. containername (string) agnescontainer De id en de class van de container waarin het gepagineerde leerpad wordt geopend. wrappername (string) agneswrapper De id en de class van de wrapper waarin het gepagineerde leerpad wordt geopend. Voorbeeld: var les= new agnes.pages({ element:"a", container: "mijnles", OnlyForward: false, NumberedPages: false ); les;
17 C. Dyslexievriendelijk werken Invuloefeningen kan u dyslexievriendelijk maken. Dit wil zeggen dat u per oefening kan instellen of spellingfouten begaan door gebruikers met dyslexie fout worden gerekend of niet. De instelling dyslexia:true zorgt ervoor dat zulke fouten niet worden meegerekend. agnes.aanpassen({ dyslexia:true ); Mogelijk rekent Agnes te veel woorden goed aan. Zo gebeurt het wel eens dat Agnes woorden met veel gelijkaardige klinkers en een gelijkaardige volgorde van karakters als gelijk beschouwd (vb. Afrika, Amerika...). Het is daarom ook goed om de oefening zelf eens uit te testen door zelf fouten in te voeren. Indien er zich problemen voordoen, kan u de verbeteringsgraad aanpassen met de instelling dyslexiacorrection. Hoe hoger de waarde, hoe minder streng Anges verbetert. Standaard staat de waarde op 0.3. agnes.aanpassen({ dyslexia:true, dyslexiacorrection:0.2 );
18 D. Feedback aanpassen Ook de feedbackinstellingen zijn ruim aanpasbaar. U kan dit pagina per pagina instellen waardoor het mogelijk wordt om de feedback bij oefeningen ook te vertalen. agnes.aanpassen({ //instellingen ) fbfail fbhalf fbmax fbmin minpoints hints InstructionMCerror InstructionMCcorrect fberror fbcorrect res1 res2 res3 U bent jammer genoeg niet geslaagd. U behaalde net de helft. Proficiat, u behaalde het maximum. Oeps... waaraan wijd je dit lage resultaat? U heeft niet alle woorden ingevuld. Per keer dat u probeert, verliest u een punt. U heeft het maximale aantal hints bereikt. Duid de foute antwoorden aan door er op te klikken. Duid de juiste antwoorden aan door er op te klikken. Sorry, je een fout gemaakt! Goed zo! Je hebt goed geantwoord. U behaalde van de punten
19 E. Serverinstellingen In het scriptbestand agnes.js kan je de instellingen aanpassen voor de servergerichte onderdelen van het agnes-framework. Agnes maakt het immers mogelijk in realtime te communiceren met een servertoepassing (channel.php) of om de lijst met pagina's op te vragen via een post naar een pagina op de server (standaard agnes.php). /*SERVERSIDE*/ var agnesserverscripting="true"; var agnespostpage="agnes.php"; var agneschannelpage= "channel.php"; In agnes.js kan u zelf functies definiëren voor communicatie met de server. De functie agnes.channel(); stuurt de id, user, eventuele punten op een oefening en de volledige html-inhoud van de pagina naar het bestand channel.php. channel: function(){ /* verzend info naar server doe dit om de zoveel tijd!!!!!!! */ /* id => id van les user => gebruiker info => inhoud van huidige pagina */ var id="2"; var user= "Kris"; var info=document.getelementbyid("agneswrapper").innerhtml; var results= "results"; var myvar = setinterval(function(){ var info=document.getelementbyid("agnescontainer").innerhtml; var results= "results"; agnesopenchannel(id,user,info,results);,13000);
20 Inhoud van het bestand channel.php (de pagina retourneert json-data): <? $id= $_POST["id"]; $user= $_POST["user"]; $info= $_POST["info"]; $results= $_POST["results"]; //bewaar in databank: eigen code toevoegen //echo("id les: ". $id. " Gebruiker: ". $user. " Info: ". $info. " Resultaten: ". $results); date_default_timezone_set("europe/brussels"); $t =localtime(); //print_r(localtime(time(),true)); // $d= date("d/m/y"). "<br>"; //Europe/Brussels // bewaar: uur, datum, // eerste keer: enkel $id, $user => resultaten // bij verlaten één pagina => bewaar resultaten en inhoud pagina?> { mode: <? echo $t?>, teacher: "feedback", talk: "Eindelijk eens een goed antwoord."
21 Channels.php U kan zelf een functie definiëren bij agnes.getchannels(); om feedback van actuele gebruikers weer te geven in uw pagina. getchannels: function(){ /* ontvang alle channels of deelnemers */ Inhoud van het bestand channels.php: <!doctype HTML> <head> <title>agnes - Client viewer</title> <meta charset="utf-8"/> <style> body{ font-family:arial, helvetica, sans-serif;.users li{ list-style-type:none; background-color:#ccc; display:block; margin-bottom:3px; border-radius:13px; padding:4px; width:300px; padding-left:12px; border:1px solid black; cursor:pointer; </style> </head> <body> <h3>actieve gebruikers</h3> <p>klik op één van de gebruikers om de laatste activiteit te bekijken of bij te sturen:</p> <ul class="users active"> <? $con= mysql_connect("localhost","root",""); mysql_select_db("agnes");
22 $count=0; $result = mysql_query("select * FROM channel"); while ($row = mysql_fetch_array($result)) { $user= $row['user']; $active= $row['active']; $lesson= $row['lessonid']; if($active){ $oldcount= $count +1; echo("<li>". $user. " - ". $lesson. "</li>"); $count=$count+1;?> </ul> <span>aantal actieve gebruikers: <?echo $count?></span> <h3>niet-actieve gebruikers</h3> <p>klik op één van de gebruikers om de laatste activiteit of de resultaten te bekijken:</p> <ul class="users passive"> <? $con= mysql_connect("localhost","root",""); mysql_select_db("agnes"); $count=0; $result = mysql_query("select * FROM channel"); while ($row = mysql_fetch_array($result)) { $user= $row['user']; $active= $row['active']; $lesson= $row['lessonid']; if(!$active){ $oldcount= $count +1; echo("<li>". $user. " - ". $lesson. "</li>"); $count=$count+1;
23 ?> </ul> <span>aantal non-actieve gebruikers: <?echo $count?></span> </body> </html>
24 Mogelijkheid om data van een forum in te lezen: getforum: function(forum){ /* Bouw een forum met deze les */ var agneslesson= ""; var agnesuser= ""; var agnesforum= document.createelement("div"); agnesforum.class="agnesforum"; agnesforum.setattribute("class", "agnesforum"); agnesforum.id="agnesforum"; agnesforum.innerhtml="forum"; //var paster= storage.container; document.getelementbyid(forum).appendchild(agnesforum); //Load reacties in forum
25 F. Stijl en vormgeving CSS-klassen: agnescrossword agnesbtnnext agnesbtnforward agnesnav agneswrapper agnesunselectable agnesbox multiplechoice meerkeuze meerkeuzevraag correct error hint CSS-id's: agnescontainer agneswrapper agnesnav
26 G. Dyslexiefunctie in detail In Agnes.js kan u de dyslexiefunctie verder uitdiepen door het toevoegen van extra parameters. Aantal seconden om verschillen/overeenkomsten te zoeken vooraleer hij eindigt (0= oneindig): dmp.diff_timeout = 1.0; Waar vindt hij een/geen overeenkomst? (0.0 = perfecte overeenkomst, 1.0 = zeer matig). dmp.match_threshold = 0.3; Je kan ook bepalen binnen welk bereik hij een overeenkomst/verschil moet zoeken: dit betekent binnen hoeveel karakters vanaf de originele positie. Uiteraard is dit van weinig belang indien je 2 woorden met elkaar wil vergelijken zoals in een invuloefening. Bij lange open vragen kan dit zinvo zijn. Zo kan je invuloefeningen ook gebruiken (0 = exacte plaats, = zeer ruim, een overeenkomt meer dan deze waarde verwijdert van de originele locatie levert 1.0 op, een exacte overeenkomst 0.0) dmp.match_distance = 1000; Het aantal bits in een integer: dmp.match_maxbits = 32;
27 5. Lessen bouwen Stappenplan: een eenvoudige les met een uitgestippeld leerpad. 1. Maak een map aan op je website. 2. Maak daarin 3 submappen: 1. pages: In deze map bewaar je alle afzonderlijke pagina's voor je les. 2. images: Hierin bewaar je alle afbeeldingen die je in je les gaat gebruiken. 3. style: hierin bewaar je alle stijlbestanden (.css) 4. script: bewaar in deze map het bestand agnes.js. 3. In de hoofdmap bewaar je 2 bestanden: 1. index.html 2. nav.html Voorbeeld van een nav.html -bestand: <a href= pages/pagina1.html >Start van de les</a> <a href= pages/pagina2.html >Inleiding</a> <a href= pages/pagina3.html >Oefening</a>
28 Voorbeeld van index.html: <!DOCTYPE html> <head> <title>een les met Agnes</title> <meta charset="utf-8"/> <script src="script/agnes.js type="text/javascript"></script> <script> /*Nieuwe oefening inlezen en starten*/ window.onload=function(){ agnes.aanpassen({ dyslexia:false ); var les= new agnes.pages({ container: "mijnles", OnlyForward: false, NumberedPages: false ); ; </script> </head> <body> <div id="mijnles"> <div id="footer" class="" style="clear:both"> Kris Merckx / anno </body> </html>
29 Voorbeeld van pages/pagina1.html: <h1>wat is evolutie?</h1> <div class="lescontent"> <p>de evolutietheorie van Charles Darwin zegt dat de best aangepaste soorten (dieren, mensen, planten...) overleven. Maar wat is evolutie eigenlijk? Waarom blijven soorten niet gewoon zoals ze zijn? Waarom veranderen de levende wezens van uitzicht doorheen miljoenen jaren? Wat zit achter de evolutie? Is het echt zo dat enkel goede veranderingen bewaard worden? </p> <button id="fs">vergroot de foto's</button> <div class="slider" id="evolutie"> <img title="de wolf is de voorouder van alle honden." src="images/wolf.jpg"/> <img title="wie is er het best aangepast aan overleven in de vrije natuur? De hond of de poedel?" src="images/poedel.jpg"/> <script> </script> <style> var slides1= agnes.slides("slider", "img"); agnes.volledigscherm("fs", "evolutie") #evolutie{ #evolutie p{ float:right; width:600px; display:block; width:70%; margin:auto; #evolutie img{ width:70%; margin:auto; #evolutie button{ </style> margin-top:-60px; margin-left:120px; position:relative;
30 Voorbeeld van pages/pagina2.html: <div class="gelaagd" id="invul"> <div style="display:block;margin-left:30px;margintop:60px;"><strong>amerika/amerika</strong> <div style="margin-left:190px;margin-top:40px;"><strong>europa/europa</strong> <div style="margin-left:310px;margin-top:40px;">azië <div style="margin-left:200px;margin-top:100px;"><strong>afrika</strong> <div style="margin-left:380px;margin-top:160px;"><strong>oceanië</strong> <div><img src="images/wereld.png"/> <div style="width:1px;"> <div id="world" > <img src=" cb /mapgame/images/1/19/blankmap-worldlarge-noborders.png" style="width:100%"/> <button id="fs">vergroot</button> <style>.gelaagd{ width:480px; height:238px; border:2px solid black; </style> <script> agnes.aanpassen({ dyslexia:true, dyslexiacorrection:0.2 ); agnes.fullscreen("fs", "world"); </script> var laagjes= new agnes.layers("gelaagd", "div"); var invul= new agnes.invuloefening("#invul");
31 Voorbeeld van pages/pagina3.html: <h2>doe de test</h2> <h5>een geschiedkundige bron is...</h5> <ul class="meerkeuze correct"> <li><em>de plaats waar een oude rivier begint</em></li> <li><strong>een spoor uit het verleden dat ons iets leert over vroeger</strong></li> <li><em>de plaats waar men al honderden jaren spuitwater oppompt</em></li> <li><strong>een overblijfsel uit het verleden</strong></li> <li><em>een geschiedkundige die onderzoek doet naar vroeger</em></li> </ul> <h5>een historische bron is een plaats waar water uit de grond komt.</h5> <ul class="meerkeuze error"> <li><em>ja</em></li> <li><strong>nee</strong></li> </ul> <script> </script> var mk= new agnes.meerkeuze();
32 6. Een presentatie bouwen <div class="presentation"> <section id="slide1"> <article> <h1>start de presentatie</h1> </article> </section> <section id="slide2"> <article> <h1>slide 1</h1> </article> </section> <section id="slide3"> <article> <h1>slide 2</h1> </article> </section> <style>.presentation{ width:600px; height:400px;.presentation section{ height:400px; border:1px solid black;.presentation section article{ width:400px; margin:auto: text-align:center; #slide1{ background-color:#ccc; color:white;
33 #slide2{ background-color:green; color:white; #slide3{ background-color:#909ffc; color:white;.presentation section h1{ //padding-left:30%; padding-top:120px; </style> <script> agnes.slides("presentation", "section"); </script>
Kris Merckx - 16/10/ Agnes.js - creative commons license
Agnes.js - alpha 2.5 => www.ardeco.be/agnes (testsite) Fase 1: Opzetten van de frameworkbasis (afgerond) TOETSTYPES: - meerkeuze (één of meerdere correcte antwoorden) - invuloefening - ja-neen-vragen -
Werken met afbeeldingen in webpagina's
Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.
Programmeren in MyShop
Programmeren in MyShop Wat leer je in dit hoofdstuk: - Wat HTML en CSS is - (Een heel klein beetje) HTML - (Een heel klein beetje) CSS - Een aangepaste footer maken ( deurmat ) Eindresultaat Je gaat je
6. De sitemap of stamboom van uw website
6. De sitemap of stamboom van uw website Dynamisch of statisch? CMS of Dreamweaver? Een databankgestuurde website en CMS Grotere websites hebben nood aan een eenvoudiger manier om informatie toe te voegen,
FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40
FFOUCHIER 01/11/2018 FFO Webdesign 1e jaar theorietoets NL niveau4... Totaal aantal vragen: 40 De meeste juiste antwoorden: #22 Minste Juiste antwoorden: #30 1. Selecteer de juiste HTML-code voor het maken
Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.
Een HTML-sjabloon Denk goed na hoe je webpagina er moet uitzien. Wil je een webpagina met een horizontale vormgeving (zoals bij een schermpresentatie)? Wil je een webpagina met een verticale vormgeving
HTML krijgt een standaard opmaak van de browser
1 HTML krijgt een standaard opmaak van de browser Een link in HTML In HTML maakt u een link met de HTML-markering (HTML-tag) . Een a-tag (anchor, anker) heeft een attribuutwaarde nodig om de link te
Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen.
CSS Met CSS kan je je webpagina's vormgeven. Je kan elementen een plaats geven en hun uitzicht bepalen. In CSS maken we een onderscheid tussen 2 soorten elementen in een webpagina: 1. Sommige elementen
Inhalen les 7 (versie B)
Inhalen les 7 (versie B) Stap 1: Open de startmap van les 6 De map heet Startmap Les 6. Als je de map hebt geöpend zie je verschillende bestanden en een map Website. Wij gebruiken nu alleen de map Website.
A Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
HTML&CSS OEFENBOEKJE. van:
HTML&CSS OEFENBOEKJE van: HTML SYNTAX De meeste HTML tags zien eruit zoals hierboven. Een tag om te openen , en een tag om te sluiten . De letters die tussen de staan, geven aan wat voor
Templates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website
Templates maken voor Joomla! Hoe maak je zelf een template voor je Joomla! website Wat we gaan doen 1. Wie ben ik? 2. Voor- en nadelen bestaande templates en eigen templates 3. Eigen template op basis
Sushi MIJN EERSTE WEBSITE EEN WEBPAGINA BEWERKEN. Kaart 1 van 10 Ik ben HTML/CSS aan het leren
MIJN EERSTE WEBSITE Sushi EEN WEBPAGINA BEWERKEN Kaart 1 van 10 We gaan een nieuwe website bouwen! We gaan hem over boeken maken maar je kan hem ook zo maken zoals jij zelf wilt! Download de HTML code
Les 8 (Drupalversie: 7) Display Suite
Les 8 (Drupalversie: 7) Display Suite Display Suite (DS) is de tegenhanger van Panels. Eigenlijk is dat een verkeerde uitspraak want in deze les gaan we beiden combineren. Step 1: Voorbereiding Download
A Inloggen. B - Wachtwoord Veranderen
A Inloggen 1. Ga naar http://webtinq.nl 2. Klik op de knop "Login". 3. Voer het e-mail adres en wachtwoord in dat je hebt gekregen. 4. Klik op de knop "Login". 5. Je bent nu ingelogd! B - Wachtwoord Veranderen
Descendant selectors toepassen
HTML EN CSS de basis Oefening 13.4 Descendant selectors toepassen Maak een lijst binnen een definitielijstlijst en geef de binnenste lijst een totaal andere vormgeving. 13.7 Verticaal navigatieblok Een
Interactief blok 2 code opdracht 6 - wireframe
Interactief blok 2 code opdracht 6 - wireframe 1. Klaarzetten bestanden Dit is een best practice voorbeeld. Maak een map aan voor je site. Hier komen alle bestanden in te staan (HTML, CSS en al je afbeeldingen).
We passen eerst ons bestaand inhoudstype Fotospecial een beetje aan:
Les 12 Paragraph + Bootstrap Met deze module kan je de inhoud van een node beter rangschikken op het scherm. Denk hier aan Display Suite en/of Panels. Ook die modules laten u toe om inhoud anders te schikken
HTML richtlijnen e-mail marketing. part of the valley
e-mail marketing pagina 2/9 geschreven door Maarten van Benthem, front-end developer datum 1 oktober 2009 versie 1.0 Copyright Alle rechten voorbehouden. De inhoud van dit document blijft eigendom van
Les 8. Inleiding. Sticky Navigation
Les 8 Inleiding 1. Download eerst de nodige bestanden (afbeeldingen afkomstig van www.pixabay.com) 2. Download en installeer de module Focal Point (Crop API is hiervoor nodig) 3. Maak een nieuw inhoudstype
HTML 5 en CSS 3. Truus de Bont. CC Naamsvermelding 3.0 Nederland licentie. https://maken.wikiwijs.nl/65505
HTML 5 en CSS 3 Auteur Laatst gewijzigd Licentie Webadres Truus de Bont 14 september 2015 CC Naamsvermelding 3.0 Nederland licentie https://maken.wikiwijs.nl/65505 Dit lesmateriaal is gemaakt met Wikiwijs
Foutoplossing FotoSpecial Blok
Les 9 Foutoplossing FotoSpecial Blok In een vorige les maakten we een blok op de front die de verschillende fotocategoriën weergeeft. Dat doet een beetje raar bij het hoveren. In onderstaande bijlage kan
Leuk idee: de menubalk blijft zichtbaar ookal scroll je naar beneden
Les 9 Inleiding In dit hoofdstuk gaan we opnieuw verder met Drupal 8. We bekijken een aantal specifieke modules. De ene al eenvoudiger dan de andere, maar stuk voor stuk schitterende toepassingen voor
Les 11. Hovereffect Bis. 1. Maak eerst een nieuwe afbeeldingsstijl
Les 11 Hovereffect Bis 1. Maak eerst een nieuwe afbeeldingsstijl 2. Maak een nieuw overzicht aan met de volgende kenmerken: 1. Naam: Fotospecial Hover I 2. Blok maken, geen pagina 3. Inhoud van het type
1 FileZilla... 2 1.1 Downloaden FileZilla... 2 1.2 Start het programma... 2 1.2.1 Site toevoegen... 3 1.2.2 Bestanden uploaden...
1 1 FileZilla... 2 1.1 Downloaden FileZilla... 2 1.2 Start het programma... 2 1.2.1 Site toevoegen... 3 1.2.2 Bestanden uploaden... 5 2 Onderhoud website De Onthaasting... 7 2.1 Editor... 7 2.2 Netbeans-project
Sushi MIJN EERSTE WEBSITE. DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Ik ben HTML/CSS aan het leren. Naar daar.
MIJN EERSTE WEBSITE Sushi DE STIJL VAN HET BOVENSTE MENU AANPASSEN Kaart 6 van 10 Van hier Naar daar 1 2 3 Doe het stap voor stap om te zien hoe CSS werkt! Voeg een rand toe van 1 punt in de breedte om
Handleiding Content Management Systeem
Handleiding Content Management Systeem Inhoudsopgave Inhoudsopgave... 2 1. Inloggen... 3 2. Paginavolgorde... 3 3. Pagina en menutitel... 3 4. Pagina s bewerken... 4 5. De tekstverwerker... 4 6. Interne
HANDLEIDINGEN Tips en tricks ETZ Leerplein
HANDLEIDINGEN Tips en tricks ETZ Leerplein IMAGE SLIDER OVER DE IMAGE SLIDER De imageslider (lees: slider), zoals deze ontwikkelt is binnen de editor van Pulseweb maakt het mogelijk om meerdere afbeeldingen
HTML BEGINNER Inhoudsopgave
Inhoudsopgave 6 7 8 9 0 Configuratie Een webpagina maken Een stijlbestand toevoegen Een lijst maken Afbeeldingen toevoegen Meer pagina's toevoegen Links maken Navigeren op je website Een menu maken Het
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Stappenplan: stap 4 HTML, Stylesheets vervolg slides @ vanslooten.com/websitedesign Website-design 1-12-2014
Handleiding gebruik webmail Roundcube maart 2010
Handleiding gebruik webmail Roundcube maart 2010 U opent de webmail door te klikken op het pictogram webmail in de webstek www.edugo.be: 1. Inleiding 1.1 Wat is er nieuw? De webmail van edugo draait vanaf
Wat is een child-theme?
Child theme Waarschuwing 1. Het maken van een child theme is relatief eenvoudig, u hebt er wel FTP toegang voor nodig bij uw provider. 2. Het is soms lastig om precies uit te vinden welke css codes u moet
1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.
Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te
Inhoud. Pagina 2 van 13
Code Conventie Inhoud PHP algemeen... 3 Namen van variabelen... 3 Enkele of dubbele aanhalingstekens... 3 Globale variabelen... 3 Namen van functies... 3 Argumenten van functies... 3 Formattering... 4
Websitecursus deel 1 HTML
Websitecursus deel 1 HTML WebCie A Eskwadraat www@a-eskwadraat.nl 8 april 2015 Inleiding Website cursus in drie delen: HTML CSS Javascript We gaan uit van geen voorkennis. Als je vragen hebt, stel ze!
JavaScript. 0 - Wat is JavaScript? JavaScript toevoegen
0 - Wat is JavaScript? JavaScript is hele andere koek dan Scratch. Het wordt ook door professionele programmeurs gebruikt. Doordat er veel mensen gebruik maken van JavaScript is er veel informatie over
HTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt?
HTML in Outlook 2007 Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Inleiding Emark Mail biedt u de mogelijkheid om kant en klare HTML nieuwsbrieven in te laden en te versturen.
Les 7. Instap. CSS en views: schilderijen. Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is.
Les 7 Instap Pas even de header aan van het thema en zorg ervoor dat er geen websitenaam en slogan te zien is. CSS en views: schilderijen Ons eerste overzicht in de vorige les bestond uit het tonen van
Handleiding Website beheersysteem
Handleiding Website beheersysteem Inhoudsopgave 1. Inleiding...3 2. Inloggen...4 3. De startpagina...5 3.1. Startpagina menu...5 3.2. Bovenbalk...6 4. Menu en Pagina's...7 4.1. Een nieuwe pagina toevoegen...8
Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash
Websites maken met HTML, CSS en Dreamweaver en zonder JAVA, of JAVA-script of Flash INHOUDSOPGAVE Inleiding DEEL I: THEORIE Hoofdstuk 1: Richtlijnen Webstandaarden Voordelen Hoofdstuk 2: HTML De geschiedenis
Extra: Hoe u uw website met HTML kunt verbeteren
Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel
TES TEACH Tes Teach. Create digital lessons in 5 minutes.
TES TEACH Tes Teach. Create digital lessons in minutes. Tes Teach is een volledig gratis tool waarmee je snel en eenvoudig leerpaden voor je leerlingen kan maken. Een leerpad is een opeenvolging van stappen
Web building basis: HTML. Karel Nijs 2008/09
Web building basis: HTML Karel Nijs 2008/09 Webbuilding basis vorige les HTML intro Browsers HTML elementen HTML basis tags HTML attributen HTML kleuren HTML formattering Extra: HTML entities Webbuilding
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 5) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Eindopdracht webdesign
Eindopdracht webdesign Opdracht 1: html Maak html-pagina jouwnaam-formulier.html met een webformulier volgens het voorbeeld: Geef in de form tag attribuut action de waarde../cgi-bin/formmail.pl en geef
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B
WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK
Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >
Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken
Invoegen... 8 Invulpunt... 9 Nieuwe bouwsteen maken... 9 Bouwsteen opslaan... 10. Wijze van werken in Outlook... 11 Informatie...
ProDoc Bouwstenen voor Word & Outlook 2007 Inhoud Kopiëren bestanden... 2 Hoofdmap Bouwstenen... 2 Bouwsteen.dotm... 2 Installatie Bouwstenenmodule onder Word 2007... 3 Installatie Bouwstenenmodule onder
Handleiding ESS na de upgrade People Inc. versie 3.5.0
Handleiding ESS na de upgrade People Inc. versie 3.5.0 I Handleiding ESS na de upgrade People Inc. versie 3.5.0 Inhoudsopgave Hoofdstuk 1 1 1.1 ESS... Iconen selecteren 1 1.2 ESS... Inlog scherm tekst
Agenda. Wat is HTML? Meer over HTML... Waarom HTML leren? Aniel Bhulai. Inleiding Computergebruik - HTML 1. Waarin maak je een HTML-bestand?
Agenda HTML algemeen Wat is HTML? Korte historie Opbouw HTML document Aantal tags + voorbeelden Vragen 2 3 Opmaaktaal Letter Kleur Plaatjes Tabellen Formulieren Links Wat is HTML? Waarin maak je een HTML-bestand?
Om te beginnen heb je een geraamte van je website nodig. Maak een nieuwe map met de naam gevorderden_website aan om je website in te zetten.
1 2 Als je de Beginner en Midden HTML & CSS Sushi Kaarten hebt afgerond, dan weet je al veel over het programmeren met deze twee talen. Deze kaarten leren je hoe je al die onderdelen samenvoegt om een
Handleiding 103: Collecte Database (CDB) voor Wijkhoofden
Handleiding 103: Collecte Database (CDB) voor Wijkhoofden Gebruik handleiding 103: Deze handleiding is bestemd voor wijkhoofden en Vrienden die gegevens gaan verwerken en bewerken in een wijk binnen een
Een ASP.NET applicatie opzetten. Beginsituatie:
Hoofdstuk 1 Een ASP.NET applicatie opzetten Beginsituatie: Windows XP Pro, Windows Vista Pro of Windows 7 Pro Visual Studio.NET moet zijn geïnstalleerd. Let hierbij op dat de Express versie niet voldoet.
Handleiding CMS. Auteur: J. Bijl Coldfusion Consultant
Handleiding CMS Auteur: J. Bijl Coldfusion Consultant Inhoudsopgave 1.0 Inleiding 3 2.0 Introductie CMS en websites 4 3.0 Inloggen in beheer 5 4.0 Dashboard 6 4.1 Bezoekers totalen 6 4.2 Bezoekers 7 4.3
Pro templates. Copyright Starteenwinkel.nl
Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen
Een website ontwerpen in Dreamweaver met de opmaakweergave
Een website ontwerpen in Dreamweaver met de opmaakweergave door G. Van Soest Met Dreamweaver kan je zeer snel een website in elkaar bouwen; ook het onderhoud van een website is met Dreamweaver uiterst
FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie:
1 FrontPage Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: Merk op dat de ene pagina die al aangemaakt is 'index.htm' heet. Dit is belangrijk De startpagina
File Uploads met standaard ASP.NET
File Uploads met standaard ASP.NET In deze tutorial gaan we een aspx pagina maken (met codebehind), waarmee je een bestand kan uploaden naar de webserver. Noot: de hier beschreven code gaat niet in op
Je hoeft je maar met twee bestanden bezig te houden:
1 2 3 Deze set Sushi Kaarten leert je hoe je een web-app maakt met een nogte-doen lijst. Als je op enig moment wilt zien hoe de web-app kan worden, kijk dan op dojo.soy/js-todo. Deze app kun je gebruiken
Cascading Style Sheets
Cascading Style Sheets Dit gedeelte wordt uitgebreid besproken in http://www.handleidinghtml.nl/css/index.html 1TIN Internettechnologie 2003-2004 les 07 1 Onderwerpen Cascading model Syntax Toevoegen van
Handleiding Website Laatste update: april 2014
Laatste update: april 2014 1. Google Search Tijdens de ontwikkeling van uw website werd er veel aandacht besteed aan optimalisatie voor zoekmachines zoals Google. Dit onder andere door de broncode technisch
Wegwijzer bij de cd-rom
Wegwijzer bij de cd-rom 1 Inloggen De cd-rom houdt bij welke oefeningen je al gemaakt hebt en welke niet. Bij het opstarten vraagt de cd-rom of je een nieuwe gebruiker bent of een bestaande gebruiker.
e-balie 3.0 Aan de slag
e-balie 3.0 Aan de slag 17/07/2017, APCS Inhoudstafel e-balie... 3 1. Algemene interface veranderingen... 3 1.1. Tabs... 3 1.2. Horizontaal verticaal scheiden... 4 1.3. Detailscherm: volledige schermmodus...
HTML/CSS GEVORDERDEN 1
Inhoudsopgave 5 6 7 8 9 Configuratie Alle kleuren! Organiseren van je pagina Thema's ontwerpen Jouw individuele stijl Inspector Gadget Groter Maken Animatie Leer Klara om om te rollen!.....5.6.7.8.9 Configuratie
Handleiding Japanse puzzels
Handleiding Japanse puzzels versie : 1.0 wijziging : 26-4-2010 Inhoud 1.Japanse puzzel...4 1.1.Speler...4 1.2.Kleur...4 1.3.Groep...4 1.4.Favoriet...4 1.5.Puzzel...4 1.6.Prima...5 1.7.Spel...5 1.8.Stap
Teksten op je WordPress site zetten of aanpassen
www.smitloopbaan.nl/beheer/ Teksten op je WordPress site zetten of aanpassen Je kunt met WordPress op 2 manieren teksten en afbeeldingen op je website plaatsen : op een pagina of in een bericht. De vaste
HTML & CSS DEEL 1. webdesign. Programmeren met CodeAcademy
Programmeren met CodeAcademy HTML is de taal die gebruikt wordt om webpagina s te maken die jij elke dag bezoekt. Het is een logische manier om een website te structureren. Laten we kijken wat de term
Foutcontrole met Javascript
Foutcontrole met Javascript Pol Van Dingenen Yannick Van Hauwe INLEIDING Het controleren van de gegevens die ingevuld zijn in formulieren is heel erg belangrijk. In de praktijk is enkel en alleen controle
Leer CSS Positioneren in Negen Stappen
Leer CSS Positioneren in Negen Stappen Deze tutorial (vertaald uit het engels, origineel hier te vinden: http://www.barelyfitz.com/screencast/html-training/css/positioning/ ) laat zien hoe je met CSS verschillende
Handleiding tabel binnen Tridion
Handleiding tabel binnen Tridion 1. Tabel maken... 2 2. Tabblad Table... 4 3. Tabblad Row... 5 4. Tabblad Column... 5 5. Tabblad Cell... 6 6. Tabel bewerken... 8 7. Achtergrondkleur, tabelrand, header...
Gegevens uit een database tonen
Gegevens uit een database tonen In een eerdere handleiding heb ik jullie laten zien hoe je met behulp van MySQL en phpmyadmin een database kunt opzetten. We hebben toen een database aangemaakt en gevuld
Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in 4 kleurvarianten vinden.
Inhoud: 1. Installatie 2. FAQ 3. Thema instellingen 4. Meer hulp nodig? 1.Installatie: Om het Elektronica thema te installeren gaat u naar "Theme Store" in Design. Hier kunt u het Elektronica thema in
Roc Zadkine. Javascript Car. Door: K.Bakker versie 1.0
Roc Zadkine Javascript Car Door: K.Bakker versie 1.0 mei 2016 distributielijst versie historie versie datum auteur Opmerkingen 1.0 2-2-2016 k.bakker inhoudsopgave 1. Project benodigdheden 3 2. Benodigdheden
Formulieren maken met Dreamweaver CS 4/CS 5
Formulieren maken met Dreamweaver CS 4/CS 5 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit
Formulieren maken met Dreamweaver CS 4
Formulieren maken met Dreamweaver CS 4 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit zoveel
Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com
Welkom bij mijn website tutorial (Deel 3) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.
Count-e Statistieken. Statistieken
Count-e Statistieken 1. Voorbereiding... 2 1.1. Statistiek definities... 3 2. Afdrukken Statistieken... 5 3. Functies gebruiken... 6 3.1. Veldinhoud selecteren... 6 3.2. Celinhoud tonen... 6 3.3. Velden
Normaliseren van tabellen Praktische oefeningen
Normaliseren van tabellen Praktische oefeningen Oefening 1 : Het gebruik van een OPZOEKTABEL Maak eerst een backup van de werkende versie In onze eigen database moeten we het principe van een opzoektabel
Les 13. Voorbereiding
Les 13 Voorbereiding 1. Plaats DEZE TWEE PLUGINS op de server in de map libraries. Deze is nodig voor de werking van Masonry Views en Masonry API 2. Schakel de modules Masonry Views en Masonry API in.
design ook items uitsnijden
(fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het
Handleiding enquetemaken.be
Hoofdstuk : Starten met je eigen enquête - Registreren - Enquete Maken - Instellingen Hoofdstuk 2 : Opstellen van de vragenlijst - Vragen maken - Vraagtypes - Vragenlijst beheren - Vertakkingen invoeren
!!!!!!!!!!!! Handleiding website! VV Den Ham
Handleiding website VV Den Ham versie 1.1 1 van 26 " Stand Template Team foto s Template Team Template " Spelers Template Topscorers Template 9 van 26 6.5 Download template De download pagina bestaat uit
Materiaalontwikkeling in PAV
Sint-Jozefstraat 1 B-8820 TORHOUT [t] 050 23 10 30 [f] 050 23 10 40 [e] reno@katho.be Materiaalontwikkeling in PAV Cursus: Google sites Medewerker EC: Jonathan Vanhollebeke EC: Thema s en projecten in
Frontend ontwikkeling
Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft
HTML Graphics. Hans Roeyen V 3.0
HTML Graphics Hans Roeyen V 3.0 19 maart 2015 Inhoud 1. HTML5 Canvas... 3 1.1. Het Canvas element... 3 2. SVG Element... 9 2.1. SVG vergeleken met Canvas... 9 2.2. Een cirkel tekenen met SVG... 10 2.2.1.
Software Instructions for Real Kids - Felix Plesoianu (2009) en Kris Merckx (2013) - Creative Commons License
SIRK Software Instructions for Real Kiddies (versie 0.247) De programmeeromgeving, interpreter en compiler kan je online gebruiken op www.ardeco.be/sirk Variabele Functies Functienaam Parameters Voorbeeld
Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond
Frontpage Express is het meest eenvoudige programma voor het maken van je homepage. Is het programma niet geïnstalleerd op je PC, dan is het te downloaden en daarna te installeren. We zullen nu een aantal
Handleiding. HetSchoolvoorbeeld.nl. Versie 2.2 - juni 2014. Websites voor het onderwijs. Meest recente uitgave: www. hetschoolvoorbeeld.
HetSchoolvoorbeeld.nl Websites voor het onderwijs Handleiding Versie 2.2 - juni 2014 Meest recente uitgave: www. hetschoolvoorbeeld.nl/handleiding Handleiding HetSchoolvoorbeeld 2.2 Pagina 1 Inhoud Inhoud
CURSUS DIGITAAL ATELIER Photoshop/ Illustrator/ Indesign
CURSUS DIGITAAL ATELIER Photoshop/ Illustrator/ Indesign EEN DOCUMENT DRUKKLAAR MAKEN A. Waar moet ik absoluut op letten? B. Hoe doe ik dit? 3. Een preflight pakket maken in Indesign 4. Drukklare PDF maken
Website met Wordpress
Website met Wordpress 5. Tabellen Onderwerpen van deze les: Editor Tiny MCE toevoegen Tabellen maken met TinyMCE WP-Table reloaded installeren en gebruiken Excel importeren in WP-Table reloaded Content
Draft. Gebruikershandleiding XMLCreator 2013NL
Gebruikershandleiding XMLCreator 2013NL Wouter Verbruggen TimeTronics Lammerdries-Oost 23B B-2250 Olen Belgium Tel.: +32 14 23 19 11 Fax.: +32 14 23 20 24 09 september 2013 XMLCreator handleiding Wat is
Eigen Widgets in CRM. Introductie. Limitering. Widgets beschikbaar stellen. Tips & Tricks Eigen Widgets in CRM
Tips & Tricks Eigen Widgets in CRM Eigen Widgets in CRM Introductie De WebUI van CRM 7.0 maakt het mogelijk om je eigen widgets te maken en deze in je eigen view te gebruiken. Dat kan door gebruik te maken
Inhoudstafel. 1. Pictoselector installeren en updaten. 2. Een nieuw pictoblad maken. 3. Geef het blad een titel. 4. Zoek picto s
Inhoudstafel 1. Pictoselector installeren en updaten 2. Een nieuw pictoblad maken 3. Geef het blad een titel 4. Zoek picto s 4.1 Selecteer pictogrammendatabanken 4.2 Voeg een picto in 4.3 Omschrijving
Geert Kraeye. Pas de grootte van de kolommen aan aan de plaats die men nodig zal hebben voor de vragen, de antwoorden, de evaluatie en de punten.
Geert Kraeye 1. Doel van deze methode van werken: Door deze methode van werken kan men zelf werkbladen maken die op interactieve basis samenwerken met de leerling. De leerling krijgt onmiddellijk respons
Cursus Moodle. Cursus Moodle 1/33
Cursus Moodle Cursus Moodle 1/33 Inhoud 1 De overzichtspagina... 3 2 Cursusbeheer- en inhoud... 4 2.1 Cursusbeheer... 4 2.2 Cursusinhoud... 5 2.2.1 Onderwerpen benoemen... 5 2.2.2 Onderwerpen toevoegen...
v.1.11 Verenigingenweb Plus Handleiding Website in gebruik nemen
v.1.11 Verenigingenweb Plus Handleiding Website in gebruik nemen Inhoud Algemene informatie...3 Voor wie is deze handleiding?...3 Voordat u begint...3 Pagina beheer...4 Pagina aanmaken...4 Pagina wijzigen...4
Eindopdracht HTML/CSS: hovenier
Eindopdracht HTML/CSS: hovenier De eindopdracht is verplicht voor wie de opleiding Applicatie Ontwikkelaar wil gaan doen. Het is de bedoeling dat je zo veel mogelijk individueel werkt. Als je samenwerkt
Internet_html.doc 1/6
Internet_html.doc 1/6 Internet html. HTML syntax en regels Een HTML-element is opgebouwd uit een startmarkering en een eindemarkering (behalve enkele speciale markeringen zoals bvb. , , ).
HTML. inhoud structuur semantiek. HTML5 & semantiek of betekenis. semantisch coderen. Semantisch coderen: waarom? 3/09/2016
HTML 3/09/2016 STUDIEPUNTEN theoretisch luik SEMANTIEK en META-ELEMENTEN 1. Recap (Structuur) 2. Semantiek en semantisch coderen 3. Metadata 4. Attributen van HTML elementen 5. Optimaliseren basis HTML5
6.8 Lijsten: oefeningen
6.8 Lijsten: oefeningen Opgaven 44.: Records zoeken Open het document "Autokosten". Klik in de lijst. Kies de opdracht 'Data - Formulier' [Data - Form]. Klik de knop 'Criteria' [Criteria]. Vul als zoekcriterium