Tutorials

slicing en coderen xhtml-valid

Gestart doorMarjolein157 reacties1.894 weergaven
Log in om mee te praten

158 berichten · pagina 1 van 11

Marjolein

Lid · Topicstarter

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Tutorial slicing-coderen xhtml-valid in alle browsers
Veel mensen gebruiken het woordje basing hiervoor. Maar dit is geen officiele benaming hiervoor, dit woord is ooit verzonnen door iemand. Het woordje slicing, betekend niets meer dan "snijden" of in dit geval; je layout in stukjes snijden. Daarna gaan we deze kleine stukjes d.m.v. css en html zo coderen dat je layout weer 1 geheel wordt.

Voorbeeld layout die we gaan slicen-coderen:
Spoiler tonen
Afbeelding

Stap 1:
Je hebt uiteraard eerst een ontwerp nodig voor je layout. Je mag je eigen layout gebruiken maar je kan ook mijn voorbeeldlayout gebruiken. Deze is hier te downloaden. Dit is een psd-bestand, heb je geen photoshop dan kun je ook een .png bestand zonder teksten downloaden hier

Als eerst gaan we de layout slicen, zorg ervoor dat je de afbeeldingen zo klein mogelijk uitsnijd (hoe kleiner des te minder laadtijd voor je website).
De achtergrond (background) hoef je bv maar 1px breed te doen, die kunnen we nl laten herhalen. Dit geldt ook voor het content gedeelte. De header, menubalk en footer knippen we in zijn geheel uit, ook met het schaduwrandje aan de buitenkant. Zie hieronder mijn uitgeknipte stukjes:
header
menu
content
footer
background
Dit zijn alle afbeeldingen die we nodig hebben, en zet deze in een aparte map en noem deze "images".

Stap 2:
Nu maken we eest een css bestand en beginnen met de standaard waarden.
Tussen deze /* */ tekens kunnen we commentaar zetten, zelf zet ik altijd mijn naam bovenaan het document.
We beginnen met de body, hierin zetten we informatie die nodig is voor alles wat er tussen de bodytags nodig is, zoals het lettertype gebruik (font) achtergrond (background) enz. De height, width en margin is nodig om het in alle browsers goed neer te zetten.
Spoiler tonen
/* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#f1f1f0 url(images/background.png) repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }
Zoals je ziet heb ik de background al in de body gezet, zowel een backgroundkleur als een afbeelding. De afbeelding laten we horizontaal herhalen met repeat-x.

Als je dit gedaan heb maken we ook een standaard html-bestand. En hierin verwijzen we via de linkcode naar je css bestand, deze moet tussen de headtags staan. Het doctype is nodig om je bestand xhtml-valid te maken. Ook de metatags zijn belangrijk. Je kan er zelf nog meer toevoegen (zie http://www.metatags.nl voor meer info).
Spoiler tonen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel van je site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

Hier komt dadelijk je layout (tussen de body tags)

</body>
</html>
Sla je html-bestand op als index.html en zet hem in dezelfde map als je map images. En als je nu je index.html opent via je browser zie je als het goed is een lege pagina met alleen achtergrondkleur met bovenaan de groene balk.

Stap 3:
Zo en dan nu gaan we de stukjes layout aan elkaar zetten zodat we er later tekst in kunnen verwerken.
Eerst beginnen we met de container, zo noemen we het vak waarin we de layout zetten. Zo hoeven we niet iedere afbeelding op zijn plaats te zetten als je de layout bv in het midden van je site wil.
Dan zetten we de header, menubalkje, content en footer in de css. Omdat je deze maar 1x nodig heb, gebruiken we hiervoor div="id" dit geef je aan in je css met #. Als je een afbeelding of div zonder afbeelding meerder malen wil gebruiken dan gebruik je div="class" en geef je in je css aan met een . (punt).
Spoiler tonen
/* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#f1f1f0 url(images/background.png) repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;} /* width= de breedte van je layout, margin 0 = aantal pixels vanaf de bovenkant en auto betekend gecentreerd.*/
#header {background: url(images/header.png); width: 900px; height: 160px; margin: 0;}
#menu {background: url(images/menu.png); width: 900px; height: 27px; margin: 0;}
#content {background: url(images/content.png); width: 900px; margin: 0; overflow:hidden;} /*hieraan geven we geen height mee omdat deze moet "meerekken" met de inhoud van je site. De overflow zorgt hiervoor.*/
#footer {background: url(images/footer.png); width: 900px; height: 35px; margin: 0;}
En nu verwerken we al deze divs in de html:
Spoiler tonen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel van je site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
 <div id="header"></div>
  <div id="menu"></div>
   <div id="content"><br /><br /><br /><br /><br /><br /></div>
       <div id="footer"></div>
</div>

</body>
</html>
in de content div heb ik even een paar regels (br) neergezet zodat je dit gedeelte kan zien als je de layout even wil bekijken in je browser. Deze halen we later weer weg.

stap 4:
Tot zover was het eigenlijk best wel makkelijk allemaal, maar nu gaan we ervoor zorgen dat je teksten kunt plaatsen op de juiste plekken.
We beginnen met de header, je kan in je design al je websitenaam zetten maar dit kan ook met css. Dit doen we met h1 en met padding zetten we de naam op zijn plaats.
Spoiler tonen
/* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#f1f1f0 url(images/background.png) repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;} /* width= de breedte van je layout, margin 0 = aantal pixels vanaf de bovenkant en auto betekend gecentreerd.*/
#header {background: url(images/header.png); width: 900px; height: 160px; margin: 0;}
#header h1 {font-size: 30px; color:#f1f1f0; margin:0; padding:120px 0 0 100px; } /* we zetten de h1 achter #header zodat de h1 waarde allen voor die div toepasbaar is.*/
#menu {background: url(images/menu.png); width: 900px; height: 27px; margin: 0;}
#content {background: url(images/content.png); width: 900px; margin: 0; overflow:hidden;} /*hieraan geven we geen height mee omdat deze moet "meerekken" met de inhoud van je site. De overflow zorgt hiervoor.*/
#footer {background: url(images/footer.png); width: 900px; height: 35px; margin: 0;}
Achter padding staan 4 getallen, 1e getal is de ruimte vanaf de bovenkant, 2e getal is de ruimte vanaf rechts, 3e getal de ruimte vanaf de onderkant en het 4e getal de ruimte vanaf de linkerkant.
Zo wordt dan de html:
Spoiler tonen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel van je site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
 <div id="header"><h1>Websitenaam</h1></div>
  <div id="menu"></div>
   <div id="content"><br /><br /><br /><br /><br /><br /></div>
       <div id="footer"></div>
</div><!-- met deze div sluit je de container pas weer af -->

</body>
</html>
Nu dan de menubalk, we houden dit nog erg simpel dat we daar een paar linkjes in kunnen zetten. Op een later tijdstip zal ik uitleggen hoe je dit netjes met
    en
  • kan doen.
    De css:
    Spoiler tonen
    /* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#f1f1f0 url(images/background.png) repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;} /* width= de breedte van je layout, margin 0 = aantal pixels vanaf de bovenkant en auto betekend gecentreerd.*/
#header {background: url(images/header.png); width: 900px; height: 160px; margin: 0;}
#header h1 {font-size: 20px; color:#f1f1f0; margin:0; padding:120px 0 0 100px; } /* we zetten de h1 achter #header zodat de h1 waarde allen voor die div toepasbaar is.*/
#menu {background: url(images/menu.png); width: 900px; height: 27px; margin: 0;}
#menuitems {text-align: center; padding-top: 5px;} /*nu komt het in het midden en 5px vanaf de bovenkant.*/
#menuitems a {font-size: 10px; color: #f1f1f0; text-decoration: none;} /*met de a kunnen we de waarde van de linken bepalen voor de menuitems*/
#menuitems a:hover { color: #cedfe8;}/*de kleur voor als je met je muis over de link gaat*/
#content {background: url(images/content.png); width: 900px; margin: 0; overflow:hidden;} /*hieraan geven we geen height mee omdat deze moet "meerekken" met de inhoud van je site. De overflow zorgt hiervoor.*/
#footer {background: url(images/footer.png); width: 900px; height: 35px; margin: 0;}
    Zo wordt dan de html:
    Spoiler tonen
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel van je site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
 <div id="header">
 <h1>Websitenaam</h1>
 </div>
  <div id="menu">
  <div id="menuitems">
  <a href="#">home</a> | <a href="#">link 2</a> | <a href="#">link 3</a> | <a href="#">enzovoorts</a>
  </div>
   <div id="content"><br /><br /><br /><br /><br /><br /></div>
       <div id="footer"></div>
</div>

</body>
</html>
    Het content slaan we even over omdat dit meer uitleg nodig heeft, voor de footer doen we het zo:
    Spoiler tonen
    /* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#f1f1f0 url(images/background.png) repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;} /* width= de breedte van je layout, margin 0 = aantal pixels vanaf de bovenkant en auto betekend gecentreerd.*/
#header {background: url(images/header.png); width: 900px; height: 160px; margin: 0;}
#header h1 {font-size: 30px; color:#f1f1f0; margin:0; padding:120px 0 0 100px; } /* we zetten de h1 achter #header zodat de h1 waarde allen voor die div toepasbaar is.*/
#menu {background: url(images/menu.png); width: 900px; height: 27px; margin: 0;}
#menuitems {text-align: center; padding-top: 3px;} /*nu komt het in het midden en 3px vanaf de bovenkant.*/
#menuitems a {font-size: 11px; color: #f1f1f0; text-decoration: none;} /*met de a kunnen we de waarde van de linken bepalen voor de menuitems*/
#menuitems a:hover { color: #cedfe8;}/*de kleur voor als je met je muis over de link gaat*/
#content {background: url(images/content.png); width: 900px; margin: 0; overflow:hidden;} /*hieraan geven we geen height mee omdat deze moet "meerekken" met de inhoud van je site. De overflow zorgt hiervoor.*/
#footer {background: url(images/footer.png); width: 900px; height: 35px; margin: 0;}
#footer h2 {font-size: 9px; color:#f1f1f0; text-align: center; padding-top: 2px; margin: 0;} /*de margin is hier nodig om de footer op zijn plaats te houden*/
    html:
    Spoiler tonen
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel van je site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">
 <div id="header">
 <h1>Websitenaam</h1>
 </div>
  <div id="menu">
  <div id="menuitems">
  <a href="#">home</a> | <a href="#">link 2</a> | <a href="#">link 3</a> | <a href="#">enzovoorts</a>
  </div>
   <div id="content"><br /><br /><br /><br /><br /><br /></div>
       <div id="footer"><h2>Copyright: Jouw website.nl - design made by Marjolein</h2></div>
</div>

</body>
</html>
    stap 5:
    Nu dan het contentgedeelte, zoals je in het ontwerp kan zien is dit in 2 kolommen verdeeld, links een smalle kolom en rechts een brede voor het content.
    Dus we gaan de content div in 2 kolommen verdelen. Dit doen we met de waarde float: left;. Op deze manier kun je kolommen creëren die steeds vanaf links naast elkaar geplaatst worden. En met margin bepaal je dan de tussenruimtes. We maken een div left en een div right in de css:
    Spoiler tonen
    /* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body { height: 100%; margin: 0; padding: 0; background:#f1f1f0 url(images/background.png) repeat-x; font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ height: 100%; }

#container {width:900px; margin:0 auto;} /* width= de breedte van je layout, margin 0 = aantal pixels vanaf de bovenkant en auto betekend gecentreerd.*/
#header {background: url(images/header.png); width: 900px; height: 160px; margin: 0;}
#header h1 {font-size: 30px; color:#f1f1f0; margin:0; padding:120px 0 0 100px; } /* we zetten de h1 achter #header zodat de h1 waarde allen voor die div toepasbaar is.*/
#menu {background: url(images/menu.png); width: 900px; height: 27px; margin: 0;}
#menuitems {text-align: center; padding-top: 3px;} /*nu komt het in het midden en 3px vanaf de bovenkant.*/
#menuitems a {font-size: 11px; color: #f1f1f0; text-decoration: none;} /*met de a kunnen we de waarde van de linken bepalen voor de menuitems*/
#menuitems a:hover { color: #cedfe8;}/*de kleur voor als je met je muis over de link gaat*/
#content {background: url(images/content.png); width: 900px; margin: 0; overflow:hidden;} /*hieraan geven we geen height mee omdat deze moet "meerekken" met de inhoud van je site. De overflow zorgt hiervoor.*/
#left { width: 195px; margin: 10px 0 0 50px; float:left;}
#right { width: 580px; margin: 10px 0 0 30px; float:left;} /*let op dat de width + de margins van zowel left als right totaal niet meer zijn dan de breedte van je layout, anders komt de laatste div eronder ipv ernaast.*/
#footer {background: url(images/footer.png); width: 900px; height: 35px; margin: 0;}
#footer h2 {font-size: 9px; color:#f1f1f0; text-align: center; padding-top: 2px; margin: 0;}/*de margin is hier nodig om de footer op zijn plaats te houden*/
    De html komt er dan zo uit te zien:
    Spoiler tonen
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Titel van je site</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="container">

 <div id="header">
 <h1>Websitenaam</h1>
 </div>
 
  <div id="menu">
  <div id="menuitems">
  <a href="#">home</a> | <a href="#">link 2</a> | <a href="#">link 3</a> | <a href="#">enzovoorts</a>
  </div>
  
   <div id="content">
    <div id="left"> Hier de tekst links</div>
    <div id="right">Hier de tekst in je content vak <br /><br /></div>
   </div>
   <div style="clear:both"></div>
   
        <div id="footer"><h2>Copyright: Jouw website.nl - design made by Marjolein</h2></div>
</div>

</body>
</html>
    Omdat we een float:left; hebben gebruikt is het nodig om na de laatste div waarin een float staat om clear te gebruiken:

    Het resultaat: http://marjolein.one2xs.com/tut/index.html
    Dit is de basis van een layout coderen. Op een later tijdstip breid ik deze tutorial uit met bv vakjes in de linkerkolom met koptekstjes. Ook leg ik dan uit hoe je het beste een menu kan maken met ul en li.

    Ik hoop dat het allemaal duidelijk is, het schrijven van een tutorial was toch moeilijker dan ik dacht wink
    NB: Deze tutorial is geschreven door Marjolein. Deze staat ook op kfb-design.nl maar mag onder geen enkele voorwaarde gekopieerd of ergens anders gedupliceerd worden!
0
Sapje

Lid

Berichten
149
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Thanks!thumbsup
0
Shahiem

Lid

Berichten
20.364
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Ziet er goed uit, meer behandeld dan mijn tutorial yummie
0
Miel

Lid

Berichten
4.462
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Ik zou de background bij de header transparant maken, geldt ook voor de rest van je slices, dan kun je je achtergrond nog een keer veranderen zonder alles opnieuw te hoeven doen.
0
Marjolein

Lid · Topicstarter

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
kan, maar gebruikers die een "oude" versie van IE gebruiken (die zijn er helaas nog steeds) dan worden de transparante plaatjes niet ondersteund, dan wordt dit wit.
0
Shahiem

Lid

Berichten
20.364
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Inderdaad, maarja ik doe ze sowieso transparant.
0
Marjolein

Lid · Topicstarter

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
ik niet, en qua laadtijd maakt het ook niet zo erg uit, ik vind mijn methode makkelijker, ook omdat ik een schaduw heb gebruikt. En ja wanneer verander je nou de achtergrond kleur? Ik nooit, ik zet er dan gelijk een nieuwe layout op yummie
0
Shahiem

Lid

Berichten
20.364
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Marjolein schreef:
ik niet, en qua laadtijd maakt het ook niet zo erg uit, ik vind mijn methode makkelijker, ook omdat ik een schaduw heb gebruikt. En ja wanneer verander je nou de achtergrond kleur? Ik nooit, ik zet er dan gelijk een nieuwe layout op yummie
En wat als je bijvoorbeeld je logo wil veranderen? clown
0
Marjolein

Lid · Topicstarter

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
wat heeft dat met coderen te maken?
Als je een ander logo wil dan verander je de header.png toch alleen? Daar gaat deze tut toch niet over?
0
Alemaalte

Lid

Berichten
5.957
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Waarom is het in de header groen en in de background ook?
0
Shahiem

Lid

Berichten
20.364
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Marjolein schreef:
wat heeft dat met coderen te maken?
Als je een ander logo wil dan verander je de header.png toch alleen? Daar gaat deze tut toch niet over?
Ik bedoel van, als je je logo niet transparant maak en je bijvoorbeeld nog een achtergrond achter je logo hebt dat je die dan steeds moet aanpassen.
0
Marjolein

Lid · Topicstarter

Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
@ alemaalte: omdat ik dit zo uitgeknipt heb, zo is het duidelijker voor iedereen hoe ik het uitgeknipt heb. Ik kan het wel moeilijker doen zonder de achtergrond maar dan moet ik veel meer uitleggen.

@shahiem: als je een gevorderde slicer/codeerder ben dan leer je dit soort dingen wel ja om het voor je zelf makkelijker te maken. Deze tut is voor beginnelingen. Hou er nou maar over op. Ik heb me best gedaan om iets uit te leggen over coderen en de afbeeldingen gewoon simpel gehouden. Klaar...

@iedereen: er zullen ook wel opmerkingen komen over de manier waarop ik me css indeel, hiervoor is geen standaard regel, maar de meeste codeerders zetten de waardes onder elkaar en ik naast elkaar (gewoon weg omdat ik het op deze manier makkelijker vind maar als je het zelf makkelijker vind om het onder elkaar te zetten dan mag je dit ook doen)
dus zo:
Spoiler tonen
/* CSS Document */
/*  Stylesheet | Author: Marjolein KFB Design 2011 */
body {
 height: 100%; 
margin: 0; 
padding: 0; 
background:#f1f1f0 url(images/background.png) repeat-x; 
font: 11px normal Verdana, Arial, Helvetica, sans-serif; color:#000000; }
html{ 
height: 100%; }

#container {
width:900px; 
margin:0 auto;} /* width= de breedte van je layout, margin 0 = aantal pixels vanaf de bovenkant en auto betekend gecentreerd.*/
#header {
background: url(images/header.png); 
width: 900px; 
height: 160px;
 margin: 0;}
#menu {
background: url(images/menu.png); 
width: 900px; 
height: 27px; 
margin: 0;}
#content {
background: url(images/content.png); 
width: 900px; 
margin: 0; 
overflow:hidden;} /*hieraan geven we geen height mee omdat deze moet "meerekken" met de inhoud van je site. De overflow zorgt hiervoor.*/
#footer {
background: url(images/footer.png); 
width: 900px; 
height: 35px; 
margin: 0;}
0
Miel

Lid

Berichten
4.462
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Marjolein schreef:
kan, maar gebruikers die een "oude" versie van IE gebruiken (die zijn er helaas nog steeds) dan worden de transparante plaatjes niet ondersteund, dan wordt dit wit.
Daar zijn oplossingen voor.smilehttp://www.twinhelix.com/css/iepngfix/
Verder op zich een goede tutorial hoor.smile
0
Ilyasftw

Lid

Berichten
1.157
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Mooi
0
Wiitse

Lid

Berichten
6.722
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Yes! biggrin Hier wachtte ik op! biggrinShahiem wachtte en wachtte maar met zijn v2. xd
0

Jouw reactie

Deel je idee, stel een vraag of help een ander verder.

Editor laden…

Praat mee met de One2xs-community.

Inloggen om te reageren