Multidesk.be - Dé gratis PC- en multimedia helpdesk!

---

1. Inleiding

Dit is het laatste deel van de HTML-cursus. Je zal hier nog een overzicht vinden van de volledige cursus en ook een lijst van alle geziene HTML-tags. Er wordt een kleine beschrijving gegeven van de tag en gelinkt naar de plaats in de cursus, waar je meer informatie vindt over die tag.
Wat je hier nog zal vinden zijn enkele oefeningen. Bij de oefeningen vind je enkele opgaves. Probeer die oefeningen zelfstandig te maken en download daarna het zip-bestand met de oplossingen om te kijken of je alles goed hebt .
Als laatste zal ik spreken over de HTML-validator. Deze valideert je HTML-code online en haalt er de fouten uit.

2. Inhoud cursus

• Cursus HTML - deel 1: het prille begin en opbouw van het HTML-document
• Cursus HTML - deel 2: tekst en zijn opmaak
• Cursus HTML - deel 3: titels, kleur en achtergrondopmaak
• Cursus HTML - deel 4: tabellen
• Cursus HTML - deel 5: afbeeldingen en hyperlinks
• Cursus HTML - deel 6: lijsten
• Cursus HTML - deel 7: frames
• Cursus HTML - deel 8: formulieren
• Cursus HTML - deel 9: formulieren vervolg
• Cursus HTML - deel 10: fieldsets en labels
• Cursus HTML - deel 11: cursusoverzicht en lijst van geziene tags

3. Lijst van de geziene HTML-tags

• a: Hyperlink
• body: Hiertussen komt de inhoud van de pagina
• br: Plaatst een break
• em: Cursieve tekst
• fieldset: groepeert velden van een formulier
• font: Voor korte tekst (aangeraden om "span" te gebruiken
• form: Formulier
• frame: Frame
• frameset: Het geheel van frames
• h1: Titel (hoe kleiner het cijfer, hoe groter de titel)
• h2: Titel (hoe kleiner het cijfer, hoe groter de titel)
• h3: Titel (hoe kleiner het cijfer, hoe groter de titel)
• h4: Titel (hoe kleiner het cijfer, hoe groter de titel)
• h5: Titel (hoe kleiner het cijfer, hoe groter de titel)
• h6: Titel (hoe kleiner het cijfer, hoe groter de titel)
• head: Informatie over de website (onzichtbaar voor de surfer)
• hr: Plaatst een lijn
• html: Geeft aan de browser door dat er HTML gebruikt wordt
• img: Afbeelding
• input: Formulierveld
• label: Gelinkt met een formulierveld
• legend: Titel van een fieldset
• li: Item van een lijst
• noframes: Wordt weergegeven als geen frames ondersteund worden
• ol: Genummerde lijst
• optgroup: Groepeert keuzes in een keuzelijst
• option: Keuze in een keuzelijst
• p: Paragraaf
• select: Keuzelijst
• strong: Vette tekst
• table: Tabel
• td: Tabelveld
• textarea: Tekstvak
• th: Tabelkop
• title: Titel van een pagina
• tr: Tabelrij
• u: Onderlijnde tekst
• ul: Lijst

4. Oefeningen

Hieronder vind je enkele oefeningen. Er wordt een duidelijke (hoop ik toch ) uitleg gegeven van wat precies verwacht wordt. Je krijg ook een afbeelding te zien waarop het resultaat te zien is. Het is de bedoeling dat je probeert die oefening te maken en dat je ervoor zorgt dat deze zoveel mogelijk lijkt op de afbeelding.
Als je alle oefeningen gemaakt hebt kan je de oplossing downloaden. Daarmee kan je controleren of jouw code ongeveer klopt.

Vergeet zeker niet de structuur van je pagina (html, head, title, body, ...)

Het kan natuurlijk zijn dat jouw code een beetje anders is, maar als het resultaat hetzelfde is, maakt dat niet zoveel uit natuurlijk .

4.1. Oefening op tekst, kleur, lijsten, hyperlinks en afbeeldingen

Om het aantal oefeningen beperkt te houden worden grote delen van de cursus gegroepeerd. Je hoeft slechts 2 oefeningen te maken .
In de eerste zal je je kennis over tekst, kleur, lijsten, hyperlinks en afbeeldingen in HTML moeten aanspreken.

Het eerste is niet echt moeilijk. Probeer gewoon onderstaande tekst zo goed mogelijk na te bouwen: met de lijst, de kleuren, hyperlinks,... (Voor het teken bij de lijst mag je gewoon een cirkeltje nemen en alle hyperlinks moeten openen in een nieuw venster!)

Deze voorbeeldtekst is afkomsting van wikipedia:

Tekst

Een tekst, ruim gedefinieerd, is een reeks talige tekens, zoals letters, symbolen of klanken, die in een communicatieve situatie als een geheel wordt ervaren. Een tekst kan dus zowel geschreven als ongeschreven zijn.

Er zijn dus, bij de benedengrens, teksten die uit slechts één teken of klank bestaan. In vele gevallen bestaat een tekst echter uit een aantal welgeordende woorden en zinnen, die min of meer coherentie en cohesie vertonen. Aan de bovengrens heb je dan bv. een romantekst, of een lang gesprek.

De samenhang en het communicatieve functioneren van teksten worden bestudeerd in de tekstlinguïstiek resp. de pragmatiek (taalkunde).

Tekst wordt ook gebruikt als synoniem voor het besproken, behandelde onderwerp.

• Je moet niet van de tekst raken.
• Tekst en uitleg geven.

Hulpmiddelen
Om deze tekst na te bouwen kan je deze hulpmiddelen gebruiken:

• Het adres van de hyperlinks kan je achterhalen door ze vanaf deze pagina te openen.
• De kleurencode van het oranje is # e5720c, voor het groene is het #05b855 en voor het blauwe #037fb3

4.2. Oefening op formulieren, tabellen, labels en fieldsets

De laatste oefening is een uitgebreide oefening waarin gewerkt moet worden met formulieren, tabellen, labels en fieldsets . Probeer hetgeen hieronder staat zo goed mogelijk te volbrengen. Je moet natuurlijk wel niet zorgen dat het formulier werkt, daar is meer dan alleen HTML voor nodig .

• Maak een formulier aan. De naam mag je zelf kiezen, maar zorg ervoor dat het via de pagina verwerken.php verzonden wordt met post.


• Maak 3 invulvelden aan: één voor de voornaam, één voor de achternaam en de laatste voor een emailadres. De namen mag je weer zelf kiezen, maar zorg zeker dat de nodige attributen aanwezig zijn.


• Maak twee keuzerondjes aan waarmee de gebruiker zijn geslacht kan selecteren en zorg dat Man standaard geslecteerd staat.


• Nu maak je een keuzelijst aan waarin de gebruiker zijn geboortejaar kan selecteren (voor het gemak plaatsen we enkel de jaren van 1980 tot 2000 in de lijst, anders zou dit te veel werk zijn ). De eerste keuze in de lijst is "Kies je geboortejaar" en deze is standaard geselecteerd.


• Tenslotte zorg je dat elk formulierveld (indien mogelijk) zijn label heeft en je zorgt dat alles mooi gepositioneerd wordt met een tabel en in een fieldset staat met als legend "Persoonlijke informatie"


• Nu maken we een nieuwe fieldset met als legend "Informatie over uw computer". Zorg dat de formuliervelden die daarin komen weer mooi gepositioneerd staan in een tabel en dat ze elk hun label hebben.


• Maak enkele selectievakjes aan waarmee de gebruiker kan aanduiden welke browsers hij tot zijn beschikking heeft. Zorg dat volgende keuzes beschikbaar zijn: "Internet Explorer" ( met als value "IE" ), "Opera" ( met als value "Opera" ), "Mozilla Firefox" ( met als value "FF" ), "Safari" ( met als value "Safari" ), "Netscape" ( met als value "Netscape" ), "Andere" ( met als value "Andere" ).


• Voeg als laatste een uploadveld toe, waarmee de gebruiker een foto van zijn computer kan uploaden.


• Als laatste maak je nog een verzendknop aan en een knop om het formulier mee te wissen.

Als hulp bij deze oefening kan je ook nog deze afbeelding gebruiken:

4.3. Oplossingen

Om een mogelijk oplossing van de oefeningen te kennen moet je gewoon deze ZIP-file downloaden en uitpakken. Je zal daarin de nodige HTML-bestanden vinden.

Bijlage: 2a31affd123c529250ac4b7ba3104485.zip

5. Validator

Een laatste puntje dat ik nog wil aanhalen is de HTML-validator van het W3C. Hiermee kan je je code gratis laten valideren. Als er fouten in je code zitten zal hij deze duidelijk weergeven met het regelnummer en een eventuele oplossing. Zo kan je vlug je fouten eruit halen.
Als er iets niet klopt op je pagina kan je je code ook eens door de validator halen. In veel gevallen zorgt een juiste code voor de oplossing van het probleem .

6. Slot

Zo, hier zijn we aan het einde gekomen van de HTML-cursus. Gebruik deze pagina als een soort "naslagwerk". Als je niet goed meer weet wat een bepaalde tag doet, kan je die hier vlug terugvinden en zo de uitgebreide uitleg in de cursus bekijken.
Ik hoop dat je alles goed snapt. Als je bovenstaand oefeningen tot een goed einde gebracht hebt, zonder naar de oplossing te kijken, mag je wel stellen dat je het vrij goed onder de knie hebt .
Je zal wel al gemerkt hebben dat HTML niet echt ver gaat in de opmaak. Maar daar dient het eigenlijk niet voor. Zoals ik al verschillende malen in de cursus gezegd heb is het beter om CSS te leren en te gebruiken voor de opmaak. Dat is ook waar het voor dient. HTML wordt gebruikt om de structuur van de pagina vast te leggen en CSS voor de opmaak.

Ik zal mij nu bezig houden met het schrijven van een CSS-cursus. Ik raad je aan deze zeker door te nemen omdat CSS iets heel handig is en eigenlijk niet zo moeilijk als je HTML goed onder de knie hebt.

Blijf nog veel oefenen in HTML en als je vragen hebt mag je ze altijd stellen in de forums .
Dit artikel werd geschreven door Simon op donderdag 19 juli 2007 om 23:52 en werd sindsdien 9307 keer gelezen.

Copyright © 2003 - 2013 Multidesk.be · Regels & privacybeleid
Algemene Voorwaarden · Geladen met de steun van Priorweb.