Handleiding - Maak een (download) website | Algemeen, Design, HTML

[Jeroen]

Algemeen, Design, HTML

Allereerst een korte uitleg over deze reeks tutorials. De tutorial is gemaakt voor leden/bezoekers met weinig kennis van webdesign. Tijdens deze 'code along' leer je niet alles, ik zal verwijzen naar goede artikelen/tutorials om jullie de goede weg uit te wijzen.

Let's start!

Je hebt wat software nodig om te beginnen. Alle software die je zoekt is gratis, en ik raad je aan om er dan ook niet voor te betalen. Natuurlijk zijn er uitzondering, maar die zijn niet nodig voor deze tutorial.

Wat gaan we maken? Een website waarin je muziek kunt uploaden en downloaden.

Codeer programma:

Dit is het programma waar we onze code in typen. Er zijn vele tientallen soorten, versies voor zowel windows, Linux, IOS of Android.

Download Notepad ++ http://notepad-plus-...oad/v6.5.1.html

Omdat we net beginnen, ga ik er van uit dat jullie geen server of host hebben om de website op te draaien. Deze gaan we lokaal simuleren met XAMPP.

Download XAMP http://www.apachefri...indows.html#641

Websites testen we in een internet browser (duuuh), daar gebruiken we Firefox (aanbevolen) of Chrome en Internet Explorer voor. Het liefste alle 3. Internet Explorer gebruiken we alleen om te kijken of het in Internet Explorer werkt. Alle browsers interpreteren code anders, en IE is hier heel erg goed in. Voor Chrome en Firefox bestaat de add-on Firebug. Deze tool gebruiken we om code te testen terwijl de website in de browser open staat. Firebug is optioneel, maar zeker aan te raden.

Tutorial Firebug.

Download Firefox: https://addons.mozil.../addon/firebug/

Download Chrome: https://chrome.googl...pknfglimnifench

Oké! We zijn nu klaar om te coderen, maar voordat we dit doen hebben we een design nodig om te coderen.

Dit prachtige design heb ik speciaal gemaakt voor de tutorial. Voel je vooral niet gedwongen om je aan dit ontwerp te houden.

Houd er wel rekening mee dat een ander design staat voor een andere code. Misschien leuk voor de html'ers en de css'ers om iets anders te maken.

De HTML

HTML staat voor HyperText Markup Language. Net zoals de Nederlandse taal veranderd ook HTML met de tijd mee. Dit gebeurt omdat websites continu veranderden

en meer toepassingen krijgen dan vroeger. Wij gebruiken het nieuwste HTML5, deze wordt ondersteund door alle nieuwe browsers. Open je codeer-programma (Notepad ++) en plak daar de volgende code in:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

!DOCTYPE html => Geeft aan welke versie HTML je gaat gebruiken. In ons geval is dat HTML5.

HTML => Je ziet 2 zogenaamde HTML tags staan. De eerste geeft aan waar we met onze HTML code gaan beginnen. De tweede geeft aan wanneer we stoppen met HTML

Head => Deze tags bevatten informatie die je browser nodig heeft. Wat je tussen de head tags zet zie je niet op de internetpagina zelf.

Title => Dit is hoe we de pagina gaan noemen. Kijk naar de tabbladen boven of onder je adres-balk. Naast het DukeN icoontje zie je de tekst Tutorial 0.0 | Maken van download site | Algemeen, Design, HTML.

Zo noemen we deze pagina. Dit is belangrijk omdat gebruikers en zoekmachines direct zien waar de pagina over gaat. Geef zelf een goede naam voor de website die we gaan maken en zet deze

tussen de Title tags.

Gefeliciteerd, je bent nu begonnen met coderen!

Mappenstructuur & XAMPP

We bouwen onze code niet op 1 pagina, maar op verschillende pagina's met verschillende extensies. Het is belangrijk om deze te organiseren.

Bouw de bovenstaande mappenstructuur na.

Wanneer je de mappenstructuur nagemaakt hebt gaan we XAMPP installeren. Wanneer XAMPP geïnstalleerd is krijg je een menu te zien zoals op de onderstaande foto.

Wij hebben een nieuwere versie van XAMPP geïnstalleerd, klik op start bij de eerste twee modules (Apache en Mysql). Wanneer XAMPP running aangeeft bij beide modules

zijn we al klaar.

Klik nu op explorer (rechts, mappenicoontje) en open deze. Zoek naar de map htdocs en open deze, kopieer je mappen-structuur naar htdocs. Open nu Notepad ++

en sla je code op in htdocs als index.php. Open nu: http://localhost/index.php.

Het is allemaal gelukt als je een lege pagina krijgt en in het tabblad je zelf-ingegeven title ziet. Wanneer het niet lukt en je een 404 error krijgt is er iets misgegaan.

Geen zorgen, van fouten leren we erg veel! Lees de tutorial nog eens door en probeer zelf je fout te vinden, wanneer dit niet lukt kun je het natuurlijk hieronder vragen.

Tips voor de volgende tutorial!

Leer om te gaan met de volgende tags:

<a> <--Een link toevoegen-->
<p> <--Een paragraaf (tekst) toevoegen-->
<h1> <--Een titel toevoegen-->
<div> <--Erg belangrijk. kom erachter wat een div is-->
<ul> <--En waar worden de ul en de li voor gebruikt?-->
<li>

Dé website om hier achter te komen is:

http://www.w3schools.com/html/

December 8, 2013 bewerkt door Duken

[Rikkert.]

Ik ga vanavond eens kijken of ik er wat van kan!

Ziet er in ieder geval goed uit die tut!

[DukeNPDA]

Damn, zelf voor mij is het handig.... Ik ben nogal van die copy past.... Zonder echt te weten wat alles is

:-P

Ziet er goed uit!

Sent from my HTC One X using Tapatalk

[DukeNPDA]

Mmmm... Lees het nu vanaf mijn telefoon. Maar je taal is goed, de uitleg is goed en stukken als: geen zorgen, van fouten leren we" voelt fijn.

Goed geschreven, ik doe het niet beter :-)

Sent from my HTC One X using Tapatalk

[Rikkert.]

http://puu.sh/5F3s2.jpg

Mijn eerste resultaat haha

En trouwens die site die je gaf is best handig!

December 7, 2013 bewerkt door Rikkert.

[DukeNPDA]

Haha hah lol Rikkert.

Sent from my HTC One X using Tapatalk

[Jeroen]

Jep, op W3schools staat bijna alles wat je moet weten met een voorbeeldje, technische eigenschappen en een tester.

[shadowwatch]

Lijkt mij interessant om er responsive css bij te doen?

Is maar een ideetje.

Verder is codecademy handig om talen als javascript/jquery en php te leren.

[Duken]

Handleiding is gedeeld via de bekende sociale kanalen van Duken.nl

[Jeroen]

Lijkt mij interessant om er responsive css bij te doen?

Is maar een ideetje.

Verder is codecademy handig om talen als javascript/jquery en php te leren.

Ja, kunnen we zeker doen! Goed idee.

[Piraatje]

Vergeten jullie alsjeblieft de VPN verbinding niet? Je internet provider zoals Ziggo of KPN kan door gebruik van de VPN niet zien wat er gebeurd op je internet verbinding en ben je volledig anoniem voor iedereen. Een vereiste tegenwoordig.... We een uitgebreide handleiding geschreven met informatie. 

Deze vindt je hier:   https://www.duken.nl/forums/handleidingen/downloaden/vpn-verbinding-en-anoniem-downloaden-r35/