Proefles informatica op het Alberdingk Thijm College “Het maken van een website met de tekstverwerker Kladblok of TextWrangler”
1
Start het programma kladblok: (Start à Programma’s à Bureau-accessoires à Kladblok). 1.
Structuur van een eenvoudige webpagina. Neem de volgende codes over:
<TITLE> Bewaar dit op je USB stick onder de naam: index.html (Let op: Kies Opslaan als en de Codering: Unicode). Ga naar je USB stick en dubbelklik op het bestand index.html. 2.
Geef je webpagina een naam. Pas je codes aan:
<TITLE>je eigen naam Kies Opslaan. Bekijk het resultaat in Explorer (F5) 3.
Schrijf tekst op je webpagina. Pas je codes aan:
<TITLE>meneer Kool Dit is mijn eerste les informatica op het ATC.
Kies Opslaan. Bekijk het resultaat in Explorer (F5)
2
4.
Geef je achtergrond een kleur. Pas je codes aan:
<TITLE>meneer Kool Dit is mijn eerste les informatica op het ATC.
kleur rood groen blauw geel roze paars
code #FF0000 #00FF00 #0000FF #FFFF00 #FF6699 #CC0099
Meer kleuren vind je hier: http://www.gerardlenting.nl/kleurcodes/Kleurcodes.html Kies Opslaan. Bekijk het resultaat in Explorer (F5) 5.
Laat tekst bewegen. Pas je codes aan:
<TITLE>meneer Kool <MARQUEE>Dit is mijn eerste les informatica op het ATC. Kies Opslaan. Bekijk het resultaat in Explorer (F5) 6.
Maak je letters groter, voeg twee lege regels toe én pas de tekst aan. Pas je codes aan:
<TITLE>meneer Kool <MARQUEE>
Dit is mijn eerste les informatica op het ATC.
Mijn naam is meneer Kool en zit nu in groep 8 van de basisschool.
Kies Opslaan. Bekijk het resultaat in Explorer (F5) 3
7.
Een plaatje als achtergrond gebruiken i.p.v. een kleur. Download een achtergrondplaatje op http://www.leejoo.nl/ en bewaar deze op je USB stick (pas eventueel de naam aan). Pas je codes aan:
<TITLE>meneer Kool <MARQUEE>
Dit is mijn eerste les informatica op het ATC.
Mijn naam is meneer Kool en zit nu in groep 8 van de basisschool.
Kies Opslaan. Bekijk het resultaat in Explorer (F5) 8.
Maak een nieuwe regel en plaats een plaatje op je webpagina (eventueel maten aanpassen). Download een animatie-plaatje van http://www.leejoo.nl/ en bewaar deze op je USB stick (pas eventueel de naam aan). Pas je codes aan:
<TITLE>meneer Kool <MARQUEE>
Dit is mijn eerste les informatica op het ATC.
Mijn naam is meneer Kool en zit nu in groep 8 van de basisschool.
Kies Opslaan. Bekijk het resultaat in Explorer (F5)
4
9.
Maak je bewegende tekst vet, geef het een kleur, maak een nieuwe regel én een hyperlink naar de website van Leejoo. Pas je codes aan:
<TITLE>meneer Kool <MARQUEE>
Dit is mijn eerste les informatica op het ATC.
Mijn naam is meneer Kool en zit nu in groep 8 van de basisschool.
Als ik
hier op klik ga ik naar de site van Leejoo.
Kies Opslaan. Bekijk het resultaat in Explorer (F5)
5
10.
Nu wordt het een beetje ingewikkeld. We gaan de bewegende tekst aanpassen. a. Ga naar http://www.leejoo.nl/ b. Klik op Javascripts (links in het menu) c. Vervolgens op Banners (submenu) d. Klik in het rechter venster op Marquee e. Volg de aanwijzingen op je beeldscherm (Select all en plak het geheel tussen de Body tags van je webpagina; vóór je tekst!!). Pas vervolgens de tekst e.d. hierin aan. f. Haal de twee
tags achter weg. Pas je codes aan:
<TITLE>meneer Kool
<MARQUEE direction="side" scrollAmount='2' style="width:'125';height:'80'"> Dit is mijn eerste les informatica op het ATC. Mijn naam is meneer Kool en zit nu in groep 8 van de basisschool.
Als ik
hier op klik ga ik naar de site van Leejoo.
Kies Opslaan. Bekijk het resultaat in Explorer (F5)
6
Overzicht:
In de proefles gebruikte Tags. Structuur van een eenvoudige webpagina <TITLE> Nieuwe regel
Nieuwe alinea (meer ruimte)
Extra spatie Maak tekst vet Maak cursief Onderstrepen Lettergrootte en/of letterkleur Bewegende tekst <MARQUEE> Achtergrondkleur Achtergrondplaatje Plaatje op webpagina Hyperlink hier Aantal handige websites: Wil je een cursus HTML, klik dan op: http://home.hccnet.nl/t.amerongen/HTML-Cursus%20Michael%20Doel.htm of op: http://www.handleidinghtml.nl/ Voor achtergrondkleuren ga je naar: http://www.gerardlenting.nl/kleurcodes/Kleurcodes.html Wil je plaatjes e.d. hebben dan moet je hier zijn: http://www.leejoo.nl/ of http://www.gifs.nl/ Heb je speciale tekens nodig (bv. letters met puntjes er boven of extra spaties)? http://www.boni.nl/bonionline2/vakken/informatica/HTMLcursus/special.htm Een heel overzicht van handige websites vind je op: http://html.startpagina.nl/
7