Met behulp van CSS (Cascading Style Sheets) is het mogelijk om de standaard grijze knoppen van een formulier aan te passen aan de kleuren van jouw site.

Bedenk wel dat Cascading Style Sheets worden ondersteund door Microsoft Internet Explorer 3 en hoger, Mozilla, Netscape Navigator 4 en hoger en Opera 3.5 en hoger. We gaan nu eens kijken hoe we dit voor elkaar kunnen krijgen. Wanneer je de HTML-code van een simpel formulier bekijkt dan ziet dat er als volgt uit:

<form action="Een bepaald script" method="post">
    <input type="text"><br><br>
    <input type="submit" value="Verzenden">
    <input type="reset" value="Wissen">
 </form> 

We hebben hier een tekstveld en twee knoppen, namelijk een 'verzend'-en een 'wis'-knop. Dit zijn standaard grijze knoppen met een zwarte tekstkleur. Om dit te veranderen hoef je enkel een 'style' aan de knoppen toe te voegen.

 <form action="Een bepaald script" method="post">
   <input type="text"><br><br>
   <input type="submit" value="Verzenden" style="background-color: red; color: white;font-family: Verdana; font-size: 10 pt; font-weight: bold; border-style: solid; border-color: blue">
   <input type="reset" value="Wissen" style="background-color: green; color: yellow;font-family: Verdana; font-size: 10 pt; font-weight: bold; border-style: solid; border-color: black">
 </form>

De verzendknop heeft nu een rode achtergrondkleur, witte tekstkleur, als lettertype Verdana, 10 pt groot, bold. De rand van de knop is dicht en heeft een blauwe kleur.

De wisknop heeft nu een groene achtergrondkleur, gele tekstkleur, als lettertype Arial, 12 pt groot, bold. De rand van de knop is dicht en heeft een blauwe kleur.

De eigenschappen 'background-color', 'color', 'font-family' en 'font-size' spreken voor zich. Hiermee kun je de kleuren van de achtergrond, de tekstkleur, lettertype en lettergrootte instellen.

Met de 'border-style' eigenschap wordt de stijl van de rand van een element bepaald. In ons geval zijn de elementen de knoppen, maar je zou ook voor het tekstveld een andere rand kunnen kiezen. Mogelijke waarden voor 'border-style' zijn none, dotted, dashed, solid en double. Ook kun je de volgende 3D waarden gebruiken: groove, ridge, inset en outset.

De 'font-weight' eigenschap geeft aan hoe dik of dun je de tekst wilt tonen. Mogelijke waarden voor 'font-weight' zijn normal, bold, bolder, ligther en de getallen 100, 200, 300, 400, 500, 600, 700, 800 en 900 voor een exacte weergave. Het getal 400 komt dan overeen met de waarde normal en het getal 700 met de waarde bold.

Probeer het maar eens uit!

Wil je meer informatie hebben over CSS? Kijk dan eens op http://css.pagina.nl

Succes!

Je meest gebruikte programma's in één oogopslag!

Wist je dat de taakbalk, onderin je scherm, uit meerdere samengestelde balken bestaat? Eén daarvan is de "Snel Start" balk (Quick Launch). Hierin kun je de programma's die je het meeste gebruikt, plus allerlei snelkoppelingen zetten. Bijvoorbeeld voor een emailtemplate (zie onze website voor vorige nummers).

Als je met je muis over het lijntje voor de icoontjes gaat staan, zie je dat je cursor verandert in een kruisje met pijltjes. Dit betekent dat je de balk kunt verplaatsen. Als er geen kruisje verschijnt staat je taakbalk vergrendeld. Klik met je rechter muisknop op de taakbalk en zet het vinkje uit dat staat bij "taakbalk vergrendelen". Vervolgens kun je de Snel Start balk helemaal naar rechts in je scherm verplaatsen. Je kunt daar dan een smal strookje van maken met de icoontjes van je favoriete programma's. Die fungeren dan als snelkoppelingen.

Geloof me, als je het eenmaal gewend bent dan wil je niet anders meer! Je kunt door er met rechts op te klikken, aangeven of je die nieuwe balk altijd op de voorgrond wilt hebben en of je die automatisch wilt laten verdwijnen. Als je voor die optie kiest, dan verschijnt de balk alleen als je met je muis tegen de zijkant van je scherm aandrukt. Probeer het maar eens!

Verder kun je via "Start" het programmaoverzicht openen en de verschillende programma's van daaruit in de Snel Start balk slepen. Let er dan wel even op dat je de balk zo hebt ingesteld dat deze niet automatisch verdwijnt.

Veel succes!

Wanneer je in je browser een URL intypt en erachter komt dat je browser je uit laat komen bij een compleet andere URL nadat je op enter hebt gedrukt, dan ben je "doorverwezen" naar een andere pagina. Dit is een redirect.

Het valt dus direct op dat je door bent verwezen vanwege de URL die verandert in de adresbalk van je browserwindow. Tóch kan het zo zijn dat de URL niet wordt veranderd terwijl je wel bent geredirect naar een andere pagina. Dit is namelijk in te stellen d.m.v de optie "Frame Redirect".

Bij een frame redirect wordt op de plaats van het ingetypte adres een vrij eenvoudige pagina weergegeven met daarin in een frame dat precies de grootte van het browservenster is. In dat frame wordt de werkelijke URL getoond.

Had jij altijd al willen weten wat XML is? Of behoor je tot de mensen, waar ik me in het verleden ook onder schaarde, die dachten dat dit weer een commerciële truuk is, die nog in de kinderschoenen staat van de grote firma MicroSoft, om de markt een verbeterde standaard te brengen? Nu, dan is deze cursus precies wat jij nodig hebt.

In deze cursus van zeven delen, gaan we alleen de basis behandelen. We gaan kijken waar XML nu vandaan komt, wat SGML is, hoe je van HTML naar XML gaat en wat XML is. Dan gaan we XML pagina's maken en we gaan ook de koppeling zien van XML en CSS. Aan het eind van deze cursus kan je dan ook een echte webpagina maken met dynamische inhoud.

In dit deel gaan we de principes van een DTD (Document Type Definition) bekijken en leren samenstellen.

DTD:
Er bestaan interne en externe DTD's, het gebruik van DTD's is niet verplicht maar wel aan te raden.

Twee belangrijke punten:

1) Een XML-document kan well-formed zijn.
2) Een XML-document kan ook valided of geldig genoemd worden.

Een XML-document zonder DTD:
- Kan grammaticaal goed in elkaar zitten ("well formed")
- Maar kan niet valide of geldig genoemd worden (daarvoor moet het een DTD bevatten)

Voordeel van het gebruik van DTD
Wanneer je gaat samenwerken, staat in een DTD omschreven:
- Welke elementen in een documenten kunnen en mogen voorkomen,
- In welke volgorde ze mogen voorkomen en
- Wat voor type inhoud ze mogen bevatten.

Voorwaarde:
- Als er een DTD is, moet deze goed in elkaar zitten en iedereen moet zich aan deze DTD houden.
- Alles staat of valt met de regels er om heen.

Wat is een DTD:
- Met behulp van een DTD kunnen we regels opleggen aan een XML-document.
- Om een valid (of geldig) XML-document te krijgen, moet het document voldoen aan de gestelde
eisen van de bijhorende DTD.
- Een DTD bepaald welke elementen moeten of kunnen aanwezig zijn.
- Een DTD declareert het hoofdelement (root), alle kinderen (child elements) van dit hoofdelement, het type van elk element en de volgorde waarin de elementen moeten voorkomen.
- Ook attribuutdeclaraties, identiteiten, notaties, ...
- DTD bepaalt hoe de structuur van de gegevens moeten zijn.
- Handig bij het uitwisselen van gegevens.

Een DTD toevoegen:
- We voegen een DTD toe aan een XML-document door middel van een Document Type Declaration.

Een Document Type Declaration bestaat uit:
- één regel als het een referentie legt naar een extern DTD-bestand;
- meerdere regels als het een interne DTD is;
- combinatie van de twee.

Een interne DTD:

<?xml version="1.0" ?>
<!DOCTYPE memo [
<!ELEMENT memo (aan, van, kop, tekst)>
<!ELEMENT aan (#PCDATA)>
<!ELEMENT van (#PCDATA)>
<!ELEMENT kop (#PCDATA)>
<!ELEMENT tekst (#PCDATA)>
]>

 Zoals je kan zien wordt de DTD direct onder de XML-declaratie.
- DOCTYPE moet in hoofdletters.

Zie voorbeeld vb01.

Een externe DTD:

<!DOCTYPE memo SYSTEM "vb02_memo.dtd">

- Ook de Document Type Declaration moet direct onder de XML-declaratie komen.
- SYSTEM moet in hoofdletters.

Code in het externe DTD-bestand:

 <!ELEMENT memo (aan, van, kop, tekst)>
<!ELEMENT aan (#PCDATA)>
<!ELEMENT van (#PCDATA)>
<!ELEMENT kop (#PCDATA)>
<!ELEMENT tekst (#PCDATA)>

Zie voorbeeld vb02.

Dit was het voor deze week, volgende week gaan we verder op de DTD. We gaan namelijk elementen toevoegen.

Véél succes Joël.