Mi-Soft.nl



avatar Lijsten op een website 13-12-2013
Hallo allemaal!
In deze tutorial gaan we kijken hoe we een aantal lijsten op de website kunnen zetten.



U kunt in het menu hieronder kiezen welk deel van de tutorial u wilt lezen:

De basis

Om een lijst te maken heeft u 2 dingen nodig: De syntax is als volgt:
<ul>
	<li>item1</li>
	<li>item2</li>
</ul>


Een unordered list maken

Als we even kijken naar het voorbeeldbestand "Apple_pie.html", dan valt al snel op dat zowel de ingredienten als het stappenplan er niet uitzien. We gaan beginnen met het netjes zetten van de ingredienten voor het deeg. Dat doen we door allereerst de paragraaf (<p>) te vinden met het id (id="") "ingredienten vulling". Zoals u ziet zijn alle items in het bestand al gesplits doormiddel van een enter. We gaan nu boven de items een <ul> tag plaatsen, en een </ul> eronder. Dat ziet er dan als volgt uit:
<ul>
	250 gram bloem
	175 gr boter
	88 gr suiker
	2 eieren(1 1/2 voor het deeg, 1/2 ei voor het het bestrijken)
	1 theelepel kaneel
</ul>
Vervolgens moeten we ervoor zorgen dat de browser weet dat de items allemaal apart een bolletje moeten krijgen. Hiervoor moeten we list item tags om elk item zetten, dat gebeurd op de volgende manier:
<li> itemhier </li>
Dit doet u voor ieder item in het lijstje, daarna kunt u proberen om het 2de lijstje (ingredienten voor de vulling) ook vast van een lijst te voorzien. Als u klaar bent zou uw code er als volgt uit moeten zien:
<p id="Ingredienten">
	<ul>
	<li>250 gram bloem</li>
	<li>175 gram boter</li>
	<li>88gr suiker</li>
	<li>2 eieren (1 1/2 voor het deeg, 1/2 voor het bestrijken.</li>
	</ul>
</p>
<h4>voor de vulling</h4>
<p id = "ingredienten vulling">
	<ul>
		<li>1 kilo zure appels (elstar, goudreinet)</li>
		<li>50 gram suiker</li>
		<li>70 gram rozijnen</li>
		<li>3 theelepels kaneel</li>
	</ul>
</p>

Een ordered list maken

Een ordered list maakt u op dezelfde manier als een unordered list maar dan met de tag <ol>. De browser zal er dan automatisch nummers voorzetten. In het bestand Apple_pie.html gaan we het stappenplan voorzien van nummers. Het complete stukje code is dan als volgt:
<ol>
	<li>Meng de bloem, zachte boter, suiker, kaneel en 1 1/2 ei in een kom. Kneed met de deeghaken van de electrische mixer en later met je handen tot een soepel deeg.</li>
	<li>Rol 3/4 van het deeg uit tot een lap en bedek hiermee de bodem en de randen van een ingevette ronde taartvorm (24cm doorsnee).</li>
	<li>Verwarm de oven voor op 170C.</li>
	<li>Schil de appels en snijd ze in stukjes. Meng dit met de 50 gr suiker, de rozijnen en kaneel. Vul hiermee de taartvorm.</li>
	<li>Rol het resterende deeg uit tot een lap en snijd hier dunne reepjes van. Bedek de taartvulling kruislings met de reepjes deeg en druk de randen dicht. Bestrijk met het resterende losgeklopte ei de bovenkant van de taart.</li>
	<li>Bak de appeltaart ongeveer 60 tot 65 minuten in de voorverwarmde oven gaar en lichtbruin.</li>
</ol>
Hieronder kunt u het bestand "Apple_pie.html" en de foto downloaden:
downloadimage Klik hier om de project bestanden te downloaden.

Gerelateerde artikelen

Over de auteur:
Rick's headshot
Rick van Lieshout
Rick van Lieshout is de eigenaar en administrator van Mi-Soft.nl
Ook is hij een manusje van alles en kan daarom in veel categorieen een steentje bijdragen.
U kunt meer over Rick te weten komen op zijn portfolio.
Rick@Mi-Soft.nl | Portfolio | Facebook | Twitter | Google+ | Youtube | Flickr | LinkedIn