Informaticasite van het Lauwers College te Buitenpost                 © R.J. van der Beek
 
Praktische opdracht havo-4: Word-oefening, HTML-oefening, en website bouwen  

1. Word-oefening.

Maak het Worddocument, dat je hieronder ziet afgedrukt, zo goed mogelijk na.
Inleveren op Teletop, uiterlijk .............



Je hoeft de tekst niet helemaal over te typen, die krijg je door op de tekst van het word-document te klikken.

Denk om de vulgende dingen:

  1. Zet de titel (Vlaamse statistieken) in een kader, met grijze achtergrond.
  2. Maak het lettertype van alle hoofdstukjes (behalve de titels van de hoofdstukjes) Tahoma, met puntgrootte 10.
  3. Maak het lettertype van het eerste hoofdstukje cursief, en zorg er voor dat de eerste regel van een alinea steeds automatisch 1 cm. inspringt (zonder dat je op de tabtoets drukt).
  4. In het tweede hoofdstukje zet je een plaatje van de vlaamse leeuw, dat kun je downloaden door op Vlaamse leeuw te klikken. Door er met de rechter muisknop op te klikken kun je het eerst op de schijf opslaan.
  5. Maak het plaatje in jouw word-document drie keer zo groot (via Word) en verwijder de gele lijntjes aan de rechterkant (ook m.b.v. word). Zet de leeuw in het midden van de tekst, en laat de tekst er omheen lopen aan beide kanten.
    Zorg ervoor dat er een rood lijntje om de leeuw zit, en dat er als bijschrift Vlaamse Leeuw boven het plaatje staat.
  6. Zorg ervoor dat de voetnoot onder het tweede hoofdstukje ( daat staat:(1) Uit Kim Herbots, "Geen 30% ongevallen duikt in de statistieken op", De Morgen, 25/6/2002 ) met puntgrootte 7,5 wordt afgedrukt
  7. In het derde hoofdstukje zorg je ervoor dat de 9 bij 10-tot-de-negende een eindje hoger staat. Hetzelfde geldt twee keer voor de 6 van 10-tot-de-zesde.
  8. Verder komt in het derde hoofdstukje het woordgeindexeerd voor. Je moet er voor zorgen dat er een trema (twee puntjes) op de i staat.
  9. Ook moet in het derde hoofdstukje gebruik worden gemaakt van automatische nummering op twee niveaus, de nummers 1, 2 en 3 en de letters a, b en c dus niet zelf intypen!).
    En (waar onder ook de kosten voor de gezondheidszorg) moet op een nieuwe regel beginnen, zonder dat er een nummer voor staat.
  10. In het vierde hoofdstukje moet gebruik worden gemaakt van opsommingstekens.
  11. Verder moet in het vierde hoofdstukje gebruik worden gemaakt van een decimale tab, zodat de getallen automatisch goed onder elkaar komen (de komma's onder elkaar). Verder moeten er automatisch voorloopstreepjes voor de getallen verschijnen.
  12. In hoofdstukje vijf moet een tabel verschijnen. De tabel over de hele breedte. De kolommen 2 t/m 6 moeten even breed zijn, de eerste kolom is breder en ook de laatste twee kolommen zijn iets breder.
  13. In de tweede en zesde rij (mannen en vrouwen) moeten de cellen worden samengevoegd, en de woorden mannen en vrouwen moeten in het midden van de tabel staan.
  14. De tekst in de eerste kolom moet rechts worden uitgelijnd, de getallen in de andere cellen moeten in het midden van de cellen staan.
  15. Geef de cellen de kleurtjes zoals in de figuur, en zorg er voor dat er een dikke zwarte rand om de gegevens van de mannen en de vrouwen zit (zoals in de figuur).
  16. Onder de tabel een toelichtingsfiguur, met daarin de woorden: Dus voorzichtig in het verkeer. Zorg ervoor dat de punt van de toelichtingsfiguur naar de linker-benedenhoek van de tabel wijst, en dat het binnengebied lichtblauw gekleurd is.
  17. Zorg voor een voettekst met het paginanummer in het midden, de datum rechtsonder, en links je eigen naam!!!
    Verder moet er een lijntje boven de voettekst staan.
  18. Zet de tekst in twee kolommen, zoals in de figuur.
  19. Voeg een automatische inhoudsopgave (onder de titel) toe. Dus niet zelf typen, maar zorg ervoor dat die automatisch verschijnt, met de regelnummers er achter (hier allemaal 1 omdat er maar één bladzijde is) voorafgegaan door voorlooppuntjes.
  20. Zorg er voor dat alles op één pagina past, verklein eventueel de marges.

2. HTML-oefening.

Maak een html-document (noem het htmloefening.htm), en wel zo dat als je dat met een browser bekijkt het er uitziet zoals hieronder.
Inleveren op Teletop, uiterlijk .................





Je hoeft de tekst niet helemaal over te typen, die krijg je (nadat je nog een paar dingen wijzigt) door op de tekst van het html-document te klikken.

Denk om de volgende punten:

  1. Zorg er voor dat in de titelbalk Je eigen naam, en dan Vlaamse statistieken staat.
  2. Zorg er voor dat de achtergrondkleur van de pagina lichtblauw is (rgb-kleurcode: #DCEAFC)
  3. Zet de eerste regel van het document (Vlaamse statistieken door, en dan je eigen naam) in een kader, met grijze achtergrond, en vet gedrukt.
    Dat kun je doen door er een tabel met één cel van te maken:
    <table border=1 bgcolor="#BBBBBB"> enz.
    Border=1 heeft tot gevolg dat er een rand om zit, en
    bgcolor="#BBBBBB" heeft tot gevolg dat de achtergrondkleur van de tabel grijs wordt.
  4. Zorg er voor dat de grootte van het lettertype van alle hoofdstukjes (behalve de titels van de hoofdstukjes) size = 2 heeft.
  5. Voor de grootte van het lettertype van de hoofdstuktitels geldt size = 4, en de kleur van de letters is rood.
  6. Maak het lettertype van het eerste hoofdstukje cursief, en zorg er voor dat de eerste regel een eindje inspringt.
  7. In het tweede hoofdstukje zet je een plaatje van de vlaamse leeuw, dat kun je downloaden door op Vlaamse leeuw te klikken. Door er met de rechter muisknop op te klikken kun je het eerst op de schijf opslaan.
  8. Maak het plaatje in jouw drie keer zo groot (voeg aan de image-tag de attributen width= 156 height=123 toe). Zet de leeuw rechts van de tekst.
  9. Zorg ervoor de voetnoot onder het tweede hoofdstukje ( daat staat:(1) Uit Kim Herbots, "Geen 30% ongevallen duikt in de statistieken op", De Morgen, 25/6/2002 ) met een kleiner lettertype wordt afgedrukt
  10. In het derde hoofdstukje zorg je ervoor dat de 9 bij 10-tot-de-negende een eindje hoger staat. Hetzelfde geldt twee keer voor de 6 van 10-tot-de-zesde.
  11. Verder komt in het derde hoofdstukje het woordgeindexeerd voor. Je moet er voor zorgen dat er een trema (twee puntjes) op de i staat.
  12. Ook moet in het derde hoofdstukje gebruik worden gemaakt van geordende lijsten op twee niveaus, de nummers en letters mag je er niet zelf voor zetten.
  13. In het vierde hoofdstukje moet gebruik worden gemaakt van een orgeordende lijst, met vierkantjes als opsommingstekens.
  14. Verder moet in het vierde hoofdstukje de getallen goed onder elkaar komen, dat kun je regelen met een tabel zonder rand, of met spaties die wel worden afgedrukt (gebruik een aantal keer &nbsp; achter elkaar).
  15. In hoofdstukje vijf moet een tabel verschijnen. De tabel over de hele breedte.
  16. In de tweede en zesde rij (mannen en vrouwen) moeten de cellen worden samengevoegd, en de woorden mannen en vrouwen moeten in het midden van de tabel staan en de letters moeten wit zijn.
  17. De tekst in de eerste kolom moet rechts worden uitgelijnd, de getallen in de andere cellen moeten links worden uitgelijnd. Denk om het kleiner-dan-teken in de eerste rij, kolom 2 en 3.
  18. Geef de cellen de kleurtjes zoals in de figuur.
  19. Zet de tekst van de complete pagina in twee kolommen, zoals in de figuur, met een grijze streep in het midden.
    Dat kan m.b.v. een tabel op de volgende manier:
    <table border=0 width="100%">
    <tr><td width="49%">
        tekst in de linker kolom     </td>
    <td bgcolor="BBBBBB" width="1%"> &nbsp; </td>
    <td width="49%">
       tekst in de rechter kolom    </td>
    </tr> </table>
    enz.

    De opdracht <td bgcolor="BBBBBB" width="1%"> &nbsp; </td> heeft tot gevolg dat er in het midden een smalle kolom (breedte 1 %) met als achtergrondkleur grijs komt. Er staat verder niets in die kolom, alleen maar een spatie (want &nbsp; is het teken voor een spatie).
  20. Voeg de titels van de hoofdstukjes aan het begin nog eens toe, en zorg er voor dat het interne links zijn (dus als je bijvoorbeeld op 5 De tabel klikt spring de cursor naar hoofdstukje 5 (tenminste als hoofdstukje 5 niet al zichtbaar is. Om het uit te proberen moet je het browservenster even heel smal maken, anders werkt het niet)
  21. Start TidyGUI op, en open daarin het html-document dat je net gemaakt hebt, dus htmloefening.htm.
    Het is misschien handig als eerste regel van het document de volgende code toe te voegen, zodat het programma weet welke html-versie gebruikt wordt:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    Klik dan op Tidy!, dan wordt gecontroleerd of er ook syntax-fouten in de html-code zitten.
    Er zitten vast wel fouten in, haal die er uit.

3. Website bouwen.

Ontwerp en maak een website die aan de volgende voorwaarden voldoet:
  • Uitwerking in groepjes van twee (of drie, als het anders niet uitkomt) personen.
  • Minimaal zes webpagina's, onderling gekoppeld. (bij een groepje van drie minimaal zeven pagina's) Misschien is het handig een menu te maken dat in een frame zit aan de linker kant en de andere pagina's verschijnen dan aan de rechter kant.
  • De website moet ook een pagina met informatie bevatten over de samenstellers (hoe heet je, waar woon je, heb je broers en zussen, enz)
  • Verder een pagina over je hobby en/of je favoriete sportclub
  • Verder een pagina over het dorp waarin je woont
  • En een pagina met een formulier, waar de bezoeker zijn naam, leeftijd, emailadres in kan vullen en waarin hij een cijfer op de site kan geven. (het hoeft niet verzonden te kunnen worden)
  • Verder een pagina met een leuk applet; op internet zijn genoeg te vinden.
  • Tenslotte moet er nog een pagina zijn waarop een logboek staat, in tabelvorm zoals hier onder, waarin is vermeld wat door wie en wanneer gedaan is.
  • Inleveren op Teletop, uiterlijk ...................

Logboek PO website-bouwen van ................. en ........................
datum tijd Werkzaamheden door opmerkingen
         
         
         
  • Ook moeten er interne koppelingen voorkomen (dan wordt er niet naar een andere pagina gesprongen, maar naar een bepaald punt op dezelfde pagina).
  • Er moet gebruik worden gemaakt van CSS
  • Minstens één eigengemaakte tekening, die er bij past. Omgezet in gif-formaat.
  • Eventuele foto's in jpg-formaat, tekeningen in gif-formaat. Geen bmp-files !
  • Niet meer dan twee submappen en alleen relatieve verwijzingen, zodat alles ook werkt als de site in een andere map wordt geplaatst.
  • Het gaat er om dat je de html-codes begrijpt, dus het is niet de bedoeling dat je hulpprogramma's om webpagina's te maken gebruikt.
  • Begin niet direct met de uitwerking, maar bespreek eerst in je groepje wat je er in wilt hebben, en wie wat doet. Elk lid van de groep moet minimaal twee pagina's maken.
  • Niet alleen het eindproduct zelf wordt in de eindbeoordeling meegenomen, maar ook de manier waarop het tot stand is gekomen. Elk lid van de groep moet begrijpen hoe de site in elkaar zit en hoe het werkt. Het is mogelijk dat je docent na inlevering van de site vraagt om uitleg over bepaalde zaken, je moet dan kunnen uitleggen welke html-codes waarvoor dienen. In de laatste lessen van de periode werk je aan de site (je werkhouding in die lessen bepaalt mee je cijfer), maar ook thuis, want alleen op school heb je veel te weinig tijd.
  • Elk lid van de groep krijgt hetzelfde cijfer, tenzij er op grond van het logboek of eventuele nabespreking redenen zijn om daarvan af te wijken
  • Als je iets niet snapt, vraag dat dan aan je docent.
  • De website moet uiterlijk .................... op Teletop staan, het geheel in een zip-file.

De opdracht wordt beoordeeld m.b.v. STIP:
de S van structuur, de T van techniek en taal, de I van inhoud, de P van presentatie en proces.