Zelfstudie HTML 2 en Het Belang van Kleuren

Algemene opmerking

BELANGRIJK: Hoewel niet alle sites het vermelden, moet je voor de WC3norm alle codetags steeds sluiten.
Dus niet gewoon: <p>blablabla
Maar beter: <p>blablabla</p>
Pas op, want een aantal codetags hebben geen afsluiter zoals bijvoorbeeld <br>


1 Evaluatie voor deze lessenreeks

  1. Online plaatsen van de eindopdracht van de vorige les: 10 punten
  2. Opdracht 1: Herhaling van vorige week: 10 punten
  3. Opdracht 2: Nieuwe codes: 10 punten
  4. Kleurenopdracht: Het belang van kleuren: 20 punten

TOTAAL: 50 punten wordt omgerekend naar 10 punten

 

2 Herhaling van HTML 1

2.1 FTP

Vanaf deze les krijgen jullie allemaal een stukje website op http://www.projectx2002.org. Om bestanden op die webruimte te plaatsen, ga je als volgt te werk.

Stap 1: Ga naar de website http://www.net2ftp.com/ en voeg de gegevens in die ik je op papier zal geven.

Stap 2: Als je ingelogd bent, zie je een lijst van alle voornamen uit de klas. Dubbelklik op je eigen voornaam.

Stap 3: Als je binnen bent, klik op je de gele knop UPLOAD. Selecteer dan de bestanden die je op webruimte wilt zetten zoals je dat zou doen voor de bijlage van een e-mail.

Stap 4: Geef het commando om up te loaden door op het groene vinkje te klikken.

Stap 5: De URL van je website zal er als volgt uitzien: http://www.projectx2002.org/seminaries/jouwvoornaam/naambestand.html en weet dat het bestand dat altijd als eerste opgestart wordt, het bestand index.html is.

OPDRACHT: Plaats je eindopdracht van vorige week op deze webruimte en laat dat aan mij zien.

 

2.2 OPDRACHT 1: HERHALING VAN VORIGE WEEK

- Maak een webpagina met Mijn links als titel in de statusbalk van de browser.

- Sla deze webpagina op als links.html.

- Zorg ervoor dat je webpagina een kleur als achtergrond heeft.

- Schrijf zeven maal je voornaam onder elkaar in zeven verschillende lettergroottes (van klein naar groot). Op http://www.handleidinghtml.nl/css/eigenschappen/font-size/voorbeelden.html vind je hierover uitleg hoe je dat kan doen.

- Zorg ervoor dat iedere voornaam in een ander kleur staat. (Ga naar http://members.chello.nl/a.kaljee/tagpages/kleurcodes.html voor de verschillende kleurcodes).

- Geef dan vijf links op je pagina van websites die jezelf vaak bezoekt. De hyperlinks moeten in een ander tabblad openen. Bekijk op http://www.cursushtml.be/cursus/Hyperlinks nog eens de theorie.

- Zet onder iedere link een afbeelding die iets met die website te maken heeft.

- Zorg ervoor dat als je op deze afbeeldingen klikt, je ook naar de bijhorende website gaat. Net zoals je tekst binnen een linkcode kunt zetten (wordt standaard blauw en onderlijnd), kun je dat ook de code voor een afbeelding binnen die code plaatsen.

- Post je uiteindelijk dit bestand (links.html) op je webruimte en laat dat aan mij zien om een cijfer te krijgen.

 

3 NIEUWE LEERSTOF

3.1 LEERINHOUDEN

In deze les moet je volgende tags kennen:

- alle tags van de vorige les

- <ul></ul> en <ol></ol>: Ga naar http://www.w3schools.com/html/html_lists.asp voor de uitleg. Klik in het linkermenu op opsommingen.

- de parameters ALIGN, WIDTH, HEIGHT, en BORDER voor <img src="">
Zie http://www.mijn-eigen-website.nl/mijn-afbeelding.html voor meer uitleg.

- <br clear=all>: Probeer te achterhalen wat het effect van deze code is. Gebruik desnoods Google om de betekenis van deze code te achterhalen.

In deze les leer je
- om opsommingstekens te gebruiken
- om een afbeelding links, rechts of in het midden invoegen met een tekst errond
- om te voorkomen dat na een afbeelding tekst verschijnt.


3.2 OPDRACHT 2: NIEUWE CODES

Deze opgave moet klaar zijn voor het einde van de eerste les. Laat je resultaat op je eigen webruimte aan mij zien als je klaar bent om beoordeeld te worden.

- Maak een webpagina met in de statusbalk van het TAB-blad je eigen voor- en familienaam.

- Schrijf "SPAGHETTI:". Begin met de ingrediënten voor spaghetti (volgens jou :lol: ) te geven. Zet de ingrediënten in een lijst onder elkaar met opsommingtekens (geen cijfers).

- SCHRIJF "SCHOOL:" Maak vervolgens een genummerde lijst met daarin alle klassen (van het eerste tot en met het zesde) waarin je in het middelbaar al gezeten hebt.

- Kopieer en plak de volgende tekst na je twee lijsten:

<p>ALINEA 1: Pardoes heeft een groot, dik boek. Het Boek der Zeven Waarheden. In dit boek kan iedereen zich laten inschrijven. Dat kost niets en levert heel veel Efteling-plezier op! Als je in het Boek der Zeven Waarheden staat dan ontvang je gratis de digitale nieuwsbrief 'Magische Mail'. Pardoes heeft een groot, dik boek. Het Boek der Zeven Waarheden. In dit boek kan iedereen zich laten inschrijven. Dat kost niets en levert heel veel Efteling-plezier op! Als je in het Boek der Zeven Waarheden staat dan ontvang je gratis de digitale nieuwsbrief 'Magische Mail'. Pardoes heeft een groot, dik boek. Het Boek der Zeven Waarheden. In dit boek kan iedereen zich laten inschrijven. Dat kost niets en levert heel veel Efteling-plezier op! Als je in het Boek der Zeven Waarheden staat dan ontvang je gratis de digitale nieuwsbrief 'Magische Mail'.</p>

<p>ALINEA 2: Het is heel gemakkelijk om je naam op te laten nemen in het Boek der Zeven Waarheden. Want je hoeft alleen maar bijgaand formuliertje in te vullen en te mailen naar de Efteling en het Efteling-plezier en voordeel valt vanzelf in de bus! Het is heel gemakkelijk om je naam op te laten nemen in het Boek der Zeven Waarheden. Want je hoeft alleen maar bijgaand formuliertje in te vullen en te mailen naar de Efteling en het Efteling-plezier en voordeel valt vanzelf in de bus! Het is heel gemakkelijk om je naam op te laten nemen in het Boek der Zeven Waarheden. Want je hoeft alleen maar bijgaand formuliertje in te vullen en te mailen naar de Efteling en het Efteling-plezier en voordeel valt vanzelf in de bus!</p>

<p>ALINEA 3: Via de Magische Mail blijf je op de hoogte van alle Efteling nieuwtjes. Een aantal keer per jaar ontvang je deze digitale mail. Hierin staan o.a. nieuwtjes, wetenswaardigheden, kortingsacties, spelletjes en laatste informatie over de Wereld vol Wonderen. Via de Magische Mail blijf je op de hoogte van alle Efteling nieuwtjes. Een aantal keer per jaar ontvang je deze digitale mail. Hierin staan o.a. nieuwtjes, wetenswaardigheden, kortingsacties, spelletjes en laatste informatie over de Wereld vol Wonderen. Via de Magische Mail blijf je op de hoogte van alle Efteling nieuwtjes. Een aantal keer per jaar ontvang je deze digitale mail. Hierin staan o.a. nieuwtjes, wetenswaardigheden, kortingsacties, spelletjes en laatste informatie over de Wereld vol Wonderen.</p>

- Download de volgende afbeelding: http://www.projectx2002.org/html/efteling.jpg
en sla die op in je werkmap.

- Plaats de afbeelding efteling.jpg links in alinea 1 na de eerste <p>. Zorg ervoor dat de afbeelding links staat en dat de rest van de tekst errond komt. Zorg ervoor dat je via HTMLcodes de breedte en lengte van deze afbeelding verkleint zodat de tekst errond kan.

- Plaats de afbeelding efteling.jpg in het begin van de code van alinea 2. Je moet met de juiste coderingen voorkomen dat de tekst van alinea 2 onmiddellijk naast de afbeelding verschijnt. De tekst mag pas onder deze afbeelding starten.

- Plaats de afbeelding efteling.jpg rechts in alinea 3 en geef deze afbeelding via code een zichtbare rand.

- Plaats onderaan je pagina een link naar de site van de Efteling (http://www.efteling.nl) en gebruik efteling.jpg als afbeelding voor de link.

 

4 Het belang van kleuren voor een site

Dat moet klaar zijn voor het einde van het tweede lesuur. Klik op http://www.projectx2002.org/html/kleurenopdracht.doc om het bestand van de Kleurenopdracht te downloaden. In deze les leer je de juiste kleuren combineren.

Stuur dit document ingevuld door naar mijn mailadres op het einde van de les.

 

Last update 22.01.2015