HTML-cursus

12 oktober 2010

Les 14: Lijsten deel 2

Definitielijsten

In deze les gaan we nog door op één onderdeel van lijsten. De rest bespreken we allemaal in de lessen waar CSS ook aan bod komt, omdat je er dan veel meer mee kan dan enkel HTML.

Het lijsttype Definitielijsten is vooral geschikt voor woordenlijsten, bijvoorbeeld lijsten waarbij een woord met een beschrijving wordt gecombineerd. Deze lijsten maak je met behulp van DL, DT en DD. Met DL open je de lijst, met DT open je het betreffende woord en met DD open je de opschrijving. Hieronder zie je een voorbeeldcode:

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language; Computertaal waarin internetpagina’s zijn opgebouwd.</dd>
<dt>PHP</dt>
<dd>Personal HomePage; Scripttaal om informatie te verwerken tot Hypertext (HTML).</dd>
</dl>

Hieronder is het resultaat te zien:

Met CSS kun je deze teksten gemakkelijk duidelijker maken, door bijvoorbeeld de titels (alles binnen de DT-tag) dikgedrukt te maken, of de omschrijving (alles binnen de DD-tag) schuin te zetten.

12 oktober 2010

Les 15: Formulieren

Formulieren

Zoals al gezegd, komt hier enkel het HTML gedeelte aan bod. Dit is wel je basis en zal je wel moeten weten. Een formulier wordt geschreven in HTML, alleen de verzending kan in PHP.

Je begint met het openen van je formulier, dit kan bijvoorbeeld met de volgende code:

<form method="get" action="mailto:info@test.nl" />

Hier heb je je formulier geopend. Je begint met METHOD="GET". Vervolgens gebruik je ACTION. Hierbij kun je twee dingen invoeren. Indien je een PHP bestand hebt, voer je de link in. Dit hebben wij nog niet, dus voeren wij een MAILTO link in.

Na je formulier geopend te hebben, heb je natuurlijk ook een daadwerkelijk formulier nodig. Hierbij kun je alle opmaaktechnieken gebruiken die in de vorige lessen zijn behandeld. Ook moet je een tekstvak kunnen aangeven. Dit kun je doen met onderstaande code:

<input type="text" name="Naam" size="30" maxlength="20" />

Je begint met INPUT, om aan te geven dat er een tekstvak aankomt. Type gebruik je om aan te geven wat voor vak het is. In dit geval kan er dus tekst worden ingevuld. NAME gebruik je om er een naam aan te geven. Dit is noodzakelijk bij het verzenden van je formulier. Ook gebruik je nog SIZE, om te grootte van je vak op te geven. Als laatste krijg je MAXLENGTH, om een maximum aantal tekens op te geven.

TIP: Om een overzichtelijk formulier te krijgen, is het handig om een tabel te gebruiken!

De code met opmaak kan er dan zo uit komen te zien:

<p><font size="5"><b>Persoonsgegevens:</b></font></p>
<table>
<tr><td><b>Naam:</b></td><td><input type="text" name="naam" size="30" maxlength="20" /></td></tr>
<tr><td><b>Adres:</b></td><td><input type="text" name="adres" size="30" maxlength="30" /></td><td><b>Huisnummer:</b></td><td><input type="text" name="Naam" size="30" maxlength="5" /></td></tr>
<tr><td><b>Plaatsnaam:</b></td><td><input type="text" name="plaatsnaam" size="30" maxlength="30" /></td><td><b>Postcode:</b></td><td><input type="text" name="Naam" size="30" maxlength="5" /></td></tr>
</table>

Tot slot heb je nog een knop nodig om alles te verzenden. Wat vaak ook nog wel van pas kan komen is een knop om alles leeg te maken. Hieronder zie je daar de code voor:

<input type="submit" value="Verzenden"> <input type="reset" value="Opnieuw" />

Hierin gebruik je dus onder TYPE: SUBMIT en/of RESET. Te waarde die je geeft aan VALUE geeft de tekst aan die op de knop komt te staan.

Als je dat allemaal hebt gedaan, hoef je enkel nog het formulier af te sluiten. Dit doe je simpel met:

</form>

Nu hebben we alles besproken. Als je hebt meegedaan, zal je nu onderstaande code hebben:

<form method="get" action="mailto:info@test.nl" />
<p><font size="5"><b>Persoonsgegevens:</b></font></p>
<table>
<tr><td><b>Naam:</b></td><td><input type="text" name="naam" size="30" maxlength="20" /></td></tr>
<tr><td><b>Adres:</b></td><td><input type="text" name="adres" size="30" maxlength="30" /></td><td><b>Huisnummer:</b></td><td><input type="text" name="Naam" size="30" maxlength="5" /></td></tr>
<tr><td><b>Plaatsnaam:</b></td><td><input type="text" name="plaatsnaam" size="30" maxlength="30" /></td><td><b>Postcode:</b></td><td><input type="text" name="Naam" size="30" maxlength="5" /></td></tr>
</table>
<input type="submit" value="Verzenden"> <input type="reset" value="Opnieuw" />
</form>

Gefeliciteerd, je hebt nu je eerste formulier geschreven! Als je dit bestand opent in je browser, zal je ongeveer onderstaand resultaat krijgen:

12 oktober 2010

Les 16: CSS Regels

CSS in contact brengen met HTML

Dit is natuurlijk erg belangrijk, en gaat via een hele gemakkelijke code. De volgende code moet je plaatsen tussen je HEAD-tag:

<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

Onder HREF zet je de link naar je document toe. Dit kan zowel een interne als een externe link zijn. In het voorbeeld gebruikte ik een interne link.

CSS regel

In een CSS document kom je andere dingen tegen als in HTML, maar je zult ook een aantal kunnen herkennen. Wat je in je CSS zet, zie je niet direct terug op je webpagina. Het CSS document bestaat uit verschillende regels. Elke regel bestaat uit onderstaande onderdelen:

Selector
Declaratie
Eigenschap
Waarde
Puntkomma

Een selector is het eerste gedeelte. Dit onderdeel gebruik je later ook in je HTML code.

Een declaratie bestaat uit een eigenschap en een waarde.

Een eigenschap kun je in HTML vergelijken met een attribuut.

Een waarde kun je in HTML vergelijken met een waarde (klinkt logisch).

Een puntkomma gebruik je ook in elke regel, dit om het goed af te sluiten.

Hieronder zie je een voorbeeld van een geldige regel in CSS:

h1 {color: red;}

Hierin is H1 je selector, je eigenschap is COLOR, je waarde is RED, je declaratie is {color:red}.

Je kunt meerdere declaraties in één regel zetten. Dit doe je dan zo:

h1 {color: red; background: blue;}

Denk er dan dus aan dat je het eerste gedeelte in je declaratie wel afsluit met een puntkomma.

Commentaar toevoegen

Ook is het mogelijk om commentaar aan je regels toe te voegen. Deze zet je tussen /*, zodat het door je browser wordt overgeslagen. Hieronder zie je een voorbeeld:

/* Hier wordt alle tekst die je met H1 aangeeft, rood gemaakt en krijgt een blauwe achtergrond /*
h1 {color: red; background: blue;}

Wanneer kun je dit gebruiken? Dit is handig als je de code aan iemand anders geeft. Mocht deze het niet helemaal snappen, kan hij door middel van commentaar toch de code proberen te begrijpen.

Bewerkt: 12 oktober 2010 door Kloep

12 oktober 2010

Les 17: CSS Begin deel 1

Achtergrond definiëren

Met CSS is het erg gemakkelijk om een afbeelding als achtergrond te gebruiken. Dit gaat met onderstaande code:

body {background:url(achtergrond.jpg) bottom right repeat-x;}

Hierin geef je dus aan dat je in de BODY van je HTML code de achtergrond wilt gebruiken.

Daar waar nu 'achtergrond.jpg' staat, zet je de link neer naar de afbeelding die je wilt gebruiken.

BOTTOM RIGHT staat ervoor dat hij rechtsonderin begint. REPEAT-X staat ervoor dat hij zich van rechts naar links herhaalt.

Tekst kleur geven

Om je tekst kleur te geven, kun je ook een gemakkelijke code gebruiken in CSS. Onderstaand zie je een voorbeeld van deze code:

p {color:red}

Erg simpel. Om dit in HTML op te roepen, hoef je alleen maar het P-element te gebruiken. Simpeler kan niet. Moeilijker wel, en ook die manier deel ik even mee omdat het soms van pas kan komen.

Als ik met bovenstaande code werk, gebruikt hij bij alle P-elementen in je code een rode tekstkleur. Soms zal je dit misschien willen opdelen. Onderstaande code is een voorbeeld:

p {color:red;}
p.group {color:blue;}
p#one {color:green;}
p#one {color:yellow;}

BELANGRIJK: Bij bovenstaande code moet je er aan denken: de laatste regel geldt.

Om dit alles op te roepen gebruik je onderstaande HTML code:

<p>Deze houdt enkel rekening met de bovenste regel, en heeft niks te maken met die drie regels daaronder. Deze regel wordt dus rood.</p>
<p class="group">Deze houdt rekening met de bovenste twee regels, en de onderste twee hebben er niks mee te maken. De onderste regel geldt, dus deze tekst wordt blauw.
<p class="group" id="one">Deze houdt rekening met alle regels. De onderste regel geldt, dus deze tekst wordt geel.

Het gaat er dus als volgt om: gebruik je een punt in je CSS, kun je dit in HTML oproepen met CLASS. Indien je in CSS een #-teken gebruikt, roep je dit in HTML op met ID.

Afbeeldingen omlijnen

Ook een afbeelding kun je in CSS laten omlijnen. Dan hoef je niet bij elke afbeelding apart alles te regelen, maar doe je het gewoon simpel één keer. Scheelt weer tijd en het risico op fouten. Met onderstaande code kun je dit voor elkaar krijgen:

img {border: 4px solid red;}

Wederom geen moeilijke code. Met IMG geef je aan dat het om het IMG-element in HTML gaat. In HTML hoef je dus niks speciaals te doen om naar deze regel te verwijzen. Vervolgens zie je in de declaratie het eigenschap BORDER staan, wat aangeeft dat het om een rand gaat. Als waarde zie je 4px solid red staan. Dit geeft dus aan dat je een 4 pixel dikke rode lijn krijg.

Ook kun je besluiten om een stippellijn te maken. Hier heb je de volgende code voor nodig:

img {border: 4px solid red; border-style:dotted;}

Dan zijn we nu klaar met les nummer 17. Je ziet dat CSS erg veel lijkt op HTML, vandaar dat je het snel onder de knie zult hebben. De teksten zijn in de meeste gevallen ongeveer hetzelfde. De tekens zijn alleen anders. Werk er genoeg mee, dan leer je het vanzelf. Volgende week gaan we gewoon vrolijk verder. Hopelijk tot dan!

Bewerkt: 12 oktober 2010 door Kloep

12 oktober 2010

Les 18: CSS Begin deel 2

Tekst opmaken

Met CSS kun je ook op een betere en gemakkelijkere manier je tekst opmaken. Je kunt hem bijvoorbeeld schuin zetten of dikgedrukt maken. Dit kan met onderstaande codes:

Schuin, CSS:

p {
font-style: italic;
}

Schuin, HTML:

<p>Hier komt je schuine tekst</p>

Vet, CSS:

p {
font-style: bold;
}

Vet, HTML:

<p>Hier komt je vette tekst</p>

Dit alles in combinatie, komt er dus als onderstaand uit te zien:

Tekstgrootte

Ook de grootte van je tekst is bij te werken in CSS. Onderstaande code helpt hierbij:

CSS:

p {
font-size: 5px
}

HTML:

<p>Hier komt je grote tekst</p>

Dit geeft dus in combinatie het onderstaande resultaat:

Tekstachtergrond

Het is ook mogelijk om je tekst een achtergrond te geven. Je kunt bijvoorbeeld besluiten om deze rood te maken. Onderstaande codes moet je dan gebruiken:

CSS:

p {
color: blue;
background: red;
}

HTML:

<p>Dit is dan je tekst</p>

Onderstaand resultaat krijg je bij deze combinatie:

Dit ziet er natuurlijk niet uit, maar om je maar even een idee te geven.

12 oktober 2010

Les 19: CSS Spatiëring, inspringingen en uitlijnen

Spatiëring regelen

Wat is nu weer Spatiëring? Dat dacht ik ook toen ik het eerst zag. Het is de ruimte tussen woorden en/of letters vergroten en/of verkleinen. Voor de ruimte tussen woorden gebruik je WORD-SPACING, voor letters gebruik je LETTER-SPACING. Hieronder een voorbeeld:

CSS:

h1 {
color: blue;
font-style: bold;
}

h2 {
color: blue;
font-style: bold;
letter-spacing: 6px;
}

HTML:

<h1>Deze tekst staat normaal</h1>
<h2>Deze tekst staat verder uit elkaar</h2>

Bovenstaand geeft dus het volgende resultaat:

Inspringingen toevoegen

Inspringingen in je tekst zijn ook erg gemakkelijk toe te voegen met CSS. Hiervoor gebruik je de CSS regel TEXT-INDENT. Zie hieronder het voorbeeld:

CSS:

h1 {
color: blue;
font-style: bold;
}

p {
text-indent: 30px;
}

HTML:

<h1>Hier is je titel</h1>
<p>Hier heb je de pagina.</p>

Onderstaand resultaat krijg je dan:

Tekst uitlijnen

Ook het uitlijnen van je tekst kan erg gemakkelijk met CSS gedaan worden. Dit doe je met TEXT-ALIGN. Zie hieronder:

CSS:

h1 {
color: blue;
font-style: bold;
}

p {
text-align: right;
}

h2 {
text-align: left;
}

HTML:

<h1>Hier is je titel</h1>
<p>Hier heb je de pagina rechts.</p>
<h2>En hier links.</h2>

Onderstaand resultaat krijg je dan:

Hij is wel wat verkleind, zodat hij wat beter op de pagina past.

12 oktober 2010

Les 20: CSS Hoofdletters en decoratie

Hoofdletters en Kleinkapitaal

Het is in CSS erg gemakkelijk om wat met de hoofdletters te spelen. Zo kun je met TEXT-TRANSFORM bepalen of alle letters hoofdletters, of juist

kleine letters moeten worden. Hier kun je drie verschillende waardes aangeven. CAPITALIZE, UPPERCASE en LOWERCASE. Zie hieronder wat welk resultaat geeft:

CSS:

h1 {
text-transform: capitalize;
}

h2 {
text-transform: uppercase;
}

h3 {
text-transform: lowercase;
}

HTML:

<h1>hier je tekst met capitalize!</h1><br />
<h2>hier je tekst met uppercase!</h2><br />
<h3>hier je tekst met lowercase!</h3>

Dit geeft onderstaand resultaat:

Bij CAPITALIZE zie je dat elk woord met een hoofdletter begint. De overige twee spreken voor zich, de ene heeft altijd hoofdletters en de ander nooit.

Tekst decoreren

Ook kun je je tekst simpel decoreren door middel van lijntjes. Je kunt er één onder zetten (UNDERLINE), doorheen (LINE-THROUGH) en boven

(OVERLINE). Dit allemaal gaat met TEXT-DECORATION. Zie hieronder de codes en het voorbeeld:

CSS:

h1 {
text-decoration: underline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: overline;
}

HTML:

<h1>Hier je onderstreepte tekst!</h1><br />
<h2>Hier je doorgestreepte tekst!</h2><br />
<h3>Hier je tekst met een bovenstreep!</h3>

Hieronder zie je het voorbeeld:

12 oktober 2010

Les 21: CSS Lijsten

Opsommingstekens selecteren

In CSS kun je veel verschillende opsommingstekens instellen. Deze herkent CSS automatisch. Hieronder een tabel met alle huidige tekens:

li {
list-style-type: circle;
}

HTML:

<ol>
<li>Regel 1</li>
<li>Regel 2</li>
<li>Regel 3</li>
<li>Regel 4</li>
<li>Regel 5</li>
</ol>

Dit geeft het onderstaande resultaat.

Als je in plaats van CIRCLE bijvoorbeeld UPPER-ROMAN neemt, krijg je onderstaand resultaat:

Aangepase opsommingstekens gebruiken

Het is ook mogelijk om je eigen tekens te maken en te gebruiken. In dit voorbeeld gebruik ik een pijl. Zie in onderstaand voorbeeld hoe dit in zijn werk gaat:

CSS:

li {
list-style-image: url(http://topdrives.nl/rightarrow.gif);
}

HTML:

<ol>
<li>Regel 1</li>
<li>Regel 2</li>
<li>Regel 3</li>
<li>Regel 4</li>
<li>Regel 5</li>
</ol>

Onderstaand resultaat krijg je dan:

Meerdere lijsten in één

Geneste lijsten maken, zo noem je het als je meerdere lijsten in één zet. We hebben al geleerd hoe we dit in HTML doen, maar nog niet hoe wel zelf de tekens bepalen. Dit gaat met behulp van CSS. Het is een beetje lastig uit te leggen, dus laten we maar gewoon naar het voorbeeld kijken:

CSS:

ol li {
list-style-type: upper-roman;
}

ol ol li {
list-style-type: upper-alpha;
}

ol ol ol li {
list-style-type: decimal;
}

HTML:

<ol>
<li>Titel 1
	<ol>
		<li>Deel 1</li>
		<li>Deel 2</li>
	</ol>
</li>

<li>Titel 2
<ol>
	<li>Deel 1</li>
	<li>Deel 2</li>
	<li>Deel 3</li>
	<li>Deel 4</li>
</ol>
</li>

<li>Titel 3
<ol>
	<li>Deel 1
		<ol>
			<li>Stukje 1</li>
			<li>Stukje 2</li>
		</ol>
	</li>
</ol>
</li>
</ol>

Een wat lastigere code dan we tot nog toe hebben gehad. Hieronder zie je het resultaat.

Waar het dus op neer komt, is: bij 1x OL in je CSS, kijkt hij naar de eerste OL in je HTML. Bij 2x OL in je CSS, kijkt hij naar de tweede OL in je HTML. En zo verder...

En zo komen we bij het einde van deze les. Het laatste deel was redelijk lastig. Indien hier nog vragen over zijn, kun je me altijd bereiken per PB of natuurlijk door een reactie te plaatsen in dit item. Ik reageer er dan zo spoedig mogelijk op. Hopelijk hebben jullie deze week genoten, en hopelijk tot volgende week!

12 oktober 2010

Les 22: CSS Tabellen

Rand toevoegen

Om een rand toe te voegen via CSS aan een tabel, hoef je alleen maar BORDER te gebruiken. Erg simpel dus, kijk maar:

CSS:

table {
border:5px double blue;
}

HTML:

<table border="10">
<tr><td>Nummer 1</td><td>Nummer 2</td></tr>
<tr><td>Nummer 3</td><td>Nummer 4</td></tr>

Dit geeft het volgende resultaat:

Breedte instellen

Ook de breedte is erg gemakkelijk in te stellen van je tabel. Dit gaat met WIDTH:

CSS:

table {
border:5px double blue;
width: 400px;
}

HTML:

<table border="10">
<tr><td>Nummer 1</td><td>Nummer 2</td></tr>
<tr><td>Nummer 3</td><td>Nummer 4</td></tr>

Dit geeft het volgende resultaat:

Achtergrond wijzigen

We kunnen hier bijvoorbeeld een rode achtergrond doen. Dit doen we met BACKGROUND:

CSS:

table {
border:5px double blue;
width: 400px;
background: red;
}

HTML:

<table border="10">
<tr><td>Nummer 1</td><td>Nummer 2</td></tr>
<tr><td>Nummer 3</td><td>Nummer 4</td></tr>

Dit geeft het volgende resultaat:

Ruimte in en tussen cellen

Tot slot gaan we de randen wat verder van de cellen afzetten, en de cellen wat verder uit elkaar. Dit doen we met PADDING en BORDER-SPACING:

CSS:

table {
border:5px double blue;
width: 400px;
background: red;
padding: 5px;
border-spacing: 5px;
}

HTML:

<table border="10">
<tr><td>Nummer 1</td><td>Nummer 2</td></tr>
<tr><td>Nummer 3</td><td>Nummer 4</td></tr>

Dit geeft het volgende resultaat:

BORDER-SPACING zorgt ervoor dat de cellen verder van de buitenste rand staan, PADDING zorgt voor de cellen onderling.

Bewerkt: 12 oktober 2010 door Kloep

13 oktober 2010

Les 23: Het begin

Het begin

Je moet natuurlijk weten hoe je begint. Zoals ik al eerder zei, wordt Javascript in HTML geschreven. Zie hieronder de code waarmee je altijd werkt:

Begin:

<script type="text/javascript">

Eind:

</script>

Dit zijn erg handige codes om te onthouden, omdat je ze bij elke Javascriptcode apart gebruikt.

In tegenstelling tot PHP, kun je een webpagina met Javascript gewoon opslaan als HTML-bestand.

Het eerste venster

Iedereen kent die site's wel, waar je eerste een paar 100 keer moet klikken voordat je door kunt gaan. Dit is één van de simpelere codes, en het is dus een mooi begin. Bekijk hieronder het voorbeeld maar eens:

<script type="text/javascript">
var a = "Welkom op deze website!";
alert(a);
</script>

Ik zal even deze code uitleggen.

<script type="text/javascript">

Hier open je de code.

var a = "Welkom op deze website!";

Hier maak je een variabele A aan, waar je browser de waarde van moet onthouden.

alert(a);

Hier opent je browser een waarschuwingsvenster met als tekst de waarde van A die hij moest onthouden.

</script>

Hier sluit je de code weer af.

Je kunt ook meerdere vensters laten openen achter elkaar aan. Dit doe je door onderstaande code te herhalen (binnen de SCRIPT-tags):

var a = "Welkom op deze website!";
alert(a);

Je kunt natuurlijk telkens een nieuwe waarde aan A geven.

13 oktober 2010

Les 24: Bevestigingsvenster

Bevestigingsvenster

Hier ga ik jullie nu leren om een bevestigingsvenster te maken. Bekijk eerst onderstaande code maar eens.

Deze code plaats je in je HEADER:

<script type="text/javascript">
function confirmation() {
var answer = confirm("Wil je naar Google gaan?");
if (answer)
{
	alert("Doei!")
	window.location.href = "http://www.google.nl";
}
else{
	alert("Bedankt voor het blijven!")
}
}
</script>

Deze code plaats je in je BODY:

<form action="" method="">
<input type="button" onclick="confirmation()" value="Exit"/>
</form>

Zodra je deze pagina opent, krijg je onderstaand:

Bij het klikken hierop, krijg je:

Bij het klikken op OK, krijg je:

Bij het klikken op Annuleren, krijg je:

Je ziet dus dat alle tekst op het venster, wordt bepaald in de bovenste code. Deze kun je natuurlijk aanpassen naar je eigen wensen, zo ook de link waar je naartoe gaat. Succes!

13 oktober 2010

Les 25: Enter uitschakelen en wachtwoord

Enter uitschakelen

Dit komt vooral van pas bij formulieren, waar we het ook in ons voorbeeld mee gaan gebruiken. Als je het formulier bijna ingevuld hebt, is het erg vervelend als je per ongeluk op Enter klikt, en alles vervolgens weg is. Daarom kun je deze met een simpele code uitschakelen voor het formulier. Bekijk de benodigde code hieronder maar eens:

<form onsubmit="return false">
<imput type="tekst" />
<input type="button" value="Versturen" onclick="this.form.submit()">
</form>

Hiermee krijg je de knop "Versturen" mee te zien, en Enter werkt hier niet bij (tenzij je de knop geselecteerd hebt (kun je herkennen aan een stippellijn om de tekst heen)).

Wachtwoord instellen

Sommige pagina's, daar hebben anderen niks mee te maken. Dit kun je dan beveiligen met een wachtwoord. Dit gebeurt met onderstaande Javascriptcode.

<script type="text/javascript">
wachtwoord = prompt("Vul hier je wachtwoord in aub");
if (wachtwoord = "Wachtwoord") {
	alert("Het wachtwoord is juist.")
};

if (wachtwoord != "Wachtwoord") {
	alert("Het wachtwoord is onjuist, probeer het opnieuw.")
	window.location='wachtwoord.html'
};
</script>

De code heeft wel wat uitleg nodig:

Daar waar je 'Wachtwoord' tussen aanhalingstekens ziet staan, moet je zelf het wachtwoord invullen. Dit is op twee plaatsen.

Op 'Vul hier je wachtwoord in aub', plaats je de tekst die voor het invulvak komt te staan.
Op 'het wachtwoord is juist.' plaats je de tekst die zichtbaar wordt als het wachtwoord correct is ingevuld.
op 'Het wachtwoord is onjuist, probeer het opnieuw.' plaats je de tekst die zichtbaar wordt bij het verkeerd invullen.
Op 'wachtwoord.html' plaats je de link waar je naartoe moet gaan na het invullen van het wachtwoord.

Denk er wel aan, dit is geen waterdichte manier. Het is de eenvoudigste manier, maar zeker niet de meest veilige![/justify]

13 oktober 2010

Les 26: If en Else

If en Else

Het lijkt me handig als we deze week eens kijken naar IF en ELSE. Het is niet moeilijk te gebruiken, en we zijn ze al vaker tegen gekomen. Hieronder zie je een code:

<script type="text/javascript">
var getal = prompt("Kies een getal tussen de 0 en 100. ","");
if (getal == 85) {
	alert("Je hebt het juiste getal ingevuld!")
}
else {
	alert("Je hebt niet het juiste getal ingevuld!")
};
</script>

Hiermee krijg je een pop-up scherm met de vraag: "Kies een getal tussen de 0 en 100.".

Indien je dit goed invoert, krijg je deze tekst te zien: "Je hebt het juiste getal ingevuld!"

Indien je dit niet goed invoert, krijg je deze tekst te zien: "Je hebt niet het juiste getal ingevuld!"

13 oktober 2010

Les 27: Achtergrondkleur wijzigen

Achtergrondkleur wijzigen

Met deze code die je hieronder krijgt, kun je gemakkelijk de achtergrondkleur wijzigen. Dit kunnen de leden van je website dan ook zelf doen! In onderstaande code gebeurt dit:

<a href="javascript:with(document.body.style) { void(backgroundColor=prompt('Kleur:',''), backgroundImage='none');}">Wijzig de achtergrondkleur</a>

Op deze pagina verschijnt een link: 'Wijzig de achtergrondkleur'. Indien je daarop klikt, krijg je een prompt-venster. Hierin kun je de kleurnaam (of de kleurcode) invullen, op OK klikken, en de achtergrondkleur veranderd.

Met deze code is het ook mogelijk om een afbeelding toe te voegen. Het is de bedoeling dat je dit zelf uit gaat proberen. Ik zal kort uitleggen wat je eerste stappen zijn:

Bekijk bovenstaande code goed, en ga na wat er nu precies gebeurt.
Merk op dat er nu bij BackgroundImage 'none' staat, hier moet dus wel wat komen.
Achter BackgroundColor staat een prompt code, deze roept het prompt-venster op. Deze moet dus naar BackgroundImage toe.
Wat moet er nu precies komen te staan?

13 oktober 2010

Les 28: Nieuw venster openen

Nieuw venster openen

Het is via Javascript ook mogelijk om een link te maken, en deze vervolgens in een nieuw venster te openen. In dit nieuwe venster kun je zelf heel wat dingen bepalen. Hieronder eerst maar eens de code's die je nodig gaat hebben hiervoor:

Head:

<script type="text/javascript">
function popup() {
window.open('http://www.gtaforum.nl', 'venster 1',
'width=400,height=200,scrollbars=yes,status=yes,resizable=yes');
}
</script>

Body:

<a href="javascript:popup();">Laad hier GTAForum in een nieuw venster.</a>

Als je dit doet, moet je (heel simpel) dit krijgen:

<html>
<head>
<script type="text/javascript">
function popup() {
window.open('http://www.gtaforum.nl', 'venster 1',
'width=400,height=200,scrollbars=yes,status=yes,resizable=yes');
}
</script>
</head>
<body>
<a href="javascript:popup();">Laad hier GTAForum in een nieuw venster.</a>
</body>
</html>

Inloggen

HTML-cursus

Recommended Posts

Kloep

Link to comment

Delen op andere websites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Kloep

Link to comment

Delen op andere websites

Recent actief 0 leden

Community

WikiGTA