codingisacopingstrategy/README.txt

## README.txt
Stop deze bestandjes in een nieuw mapje.

Open vervolgens index.html met je browser: dan zie je het sjabloon.

Je kunt dan nu ook de bestandjes openen met je text-editor.

Maak wijzigingen in de text-editor, sla op, en herlaad je document in de browser om te kijken wat er gebeurt.


Het idee is dat je zo vertrouwd raakt met HTML en CSS code, probeer dus ook te begrijpen wat de codes die er al doen staan.

zie ook de info op http://kabk-webdesign.net/wiki/

overigens, de html is geïndenteerd: voor elk niveau dat er ‘tags’ in elkaar genest worden, heb ik twee spaties extra aan het begin van de regel toegevoegd. Dat is niet nodig, maar wel handig om dat je dan de structuur van je document goed in de gaten blijft houden.

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Hier vul je de titel in zoals die in de vensterbalk van je browser wordt weergegeven</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <h1>My funky project</h1>
    </div>
    <div id="navigation">
      <ul>
        <li>join</li>
        <li>about</li>
        <li>blog</li>
    </div>
    <div id="content">
      <div class="item">
        <h3>Item 1 Header</h3>
        <p>Item 1 Tekst</p>
      </div>
      <div class="item">
        <h3>Item 2 Header</h3>
        <p>Item 1 Tekst <br/>Lorem...laborum.</p>
      </div>
    </div>
    <div id="footer">
      <p>Here is some text that says whatever</p>
    </div>
  </div>
</body>

## style.css
/* kleuren worden weergegeven met hexadecimale notatie. in de color picker van photoshop zie je rechtsonder de code staan van de kleur die je geselecteerd hebt. er moet een hekje voor.  */

body {
  font-family: helvetica, arial, sans-serif;
  /* de letter waarin het document weergegeven wordt. als het systeem geen helvetica heeft, dan arial, als dat er niet is een willekeurige schreefloze */
  background: #ccccc;
  /* je kunt ook een achtergrondplaatje instellen. zet er dan url(plaatje.png) achter*/
}
/* we stellen deze opties nu in voor de body, het gehele document, maar voor aparte elementen kun je ze ook afzonderlijk instellen */

* {
  margin: 0;
  padding: 0;
}
/* de browser heeft standaard allerlei witruimte instellingen. die haal je hiermee weg */
/* als je dit sjabloon vorm wilt geven kun je gebruik gaan maken van width (breedte) padding (witruimte om de inhoud) en margin (ruimte eromheen) */

a, a:active, a.visited {
  color: #ff3b00;
  text-decoration:none;
}
/* alle links dezelfde kleur en geen streepje eronder */

a:hover {
  color: #950195;
}
/*een andere kleur als je eroverheen gaat met de muis */

a img {
  border: none;
}
/* geen blauwe rand om gelinkte plaatjes */

li {
  list-style: none;
}
/* geen puntjes en nummertjes bij lijsten */


div#wrapper {
  width: 960px;
  margin: 0 auto;
}

div#content {
}

/* om de code van hieronder toe te passen, haal de commentaartekentjes weg */

/* als je lijst met links achter elkaar wilt hebben, zodat het een menu wordt: */

/*
div#navigation li {
  display:inline;
}
*/

/* of als je het menu links als een plaatje wilt ‘floaten’: */
/*
div#navigation {
  float:left;
}
*/
	Stop deze bestandjes in een nieuw mapje.

	Open vervolgens index.html met je browser: dan zie je het sjabloon.

	Je kunt dan nu ook de bestandjes openen met je text-editor.

	Maak wijzigingen in de text-editor, sla op, en herlaad je document in de browser om te kijken wat er gebeurt.



	Het idee is dat je zo vertrouwd raakt met HTML en CSS code, probeer dus ook te begrijpen wat de codes die er al doen staan.

	zie ook de info op http://kabk-webdesign.net/wiki/

	overigens, de html is geïndenteerd: voor elk niveau dat er ‘tags’ in elkaar genest worden, heb ik twee spaties extra aan het begin van de regel toegevoegd. Dat is niet nodig, maar wel handig om dat je dan de structuur van je document goed in de gaten blijft houden.
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Hier vul je de titel in zoals die in de vensterbalk van je browser wordt weergegeven</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	</head>
	<body>
	<div id="wrapper">
	<div id="header">
	<h1>My funky project</h1>
	</div>
	<div id="navigation">
	<ul>
	<li>join</li>
	<li>about</li>
	<li>blog</li>
	</div>
	<div id="content">
	<div class="item">
	<h3>Item 1 Header</h3>
	<p>Item 1 Tekst</p>
	</div>
	<div class="item">
	<h3>Item 2 Header</h3>
	<p>Item 1 Tekst <br/>Lorem...laborum.</p>
	</div>
	</div>
	<div id="footer">
	<p>Here is some text that says whatever</p>
	</div>
	</div>
	</body>
	/* kleuren worden weergegeven met hexadecimale notatie. in de color picker van photoshop zie je rechtsonder de code staan van de kleur die je geselecteerd hebt. er moet een hekje voor. */

	body {
	font-family: helvetica, arial, sans-serif;
	/* de letter waarin het document weergegeven wordt. als het systeem geen helvetica heeft, dan arial, als dat er niet is een willekeurige schreefloze */
	background: #ccccc;
	/* je kunt ook een achtergrondplaatje instellen. zet er dan url(plaatje.png) achter*/
	}
	/* we stellen deze opties nu in voor de body, het gehele document, maar voor aparte elementen kun je ze ook afzonderlijk instellen */

	* {
	margin: 0;
	padding: 0;
	}
	/* de browser heeft standaard allerlei witruimte instellingen. die haal je hiermee weg */
	/* als je dit sjabloon vorm wilt geven kun je gebruik gaan maken van width (breedte) padding (witruimte om de inhoud) en margin (ruimte eromheen) */

	a, a:active, a.visited {
	color: #ff3b00;
	text-decoration:none;
	}
	/* alle links dezelfde kleur en geen streepje eronder */

	a:hover {
	color: #950195;
	}
	/een andere kleur als je eroverheen gaat met de muis /

	a img {
	border: none;
	}
	/* geen blauwe rand om gelinkte plaatjes */

	li {
	list-style: none;
	}
	/* geen puntjes en nummertjes bij lijsten */


	div#wrapper {
	width: 960px;
	margin: 0 auto;
	}

	div#content {
	}

	/* om de code van hieronder toe te passen, haal de commentaartekentjes weg */

	/* als je lijst met links achter elkaar wilt hebben, zodat het een menu wordt: */

	/*
	div#navigation li {
	display:inline;
	}
	*/

	/* of als je het menu links als een plaatje wilt ‘floaten’: */
	/*
	div#navigation {
	float:left;
	}
	*/