Spring naar bijdragen
Speciale aanbieding. 85% korting op Private Internet Access VPN, nu slechts €1,75 per maand en ontvang 4 maanden gratis. Formule 1, MotoGP, Torrents, Usenet en Netflix mogelijk!

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

Jeroen

Door Jeroen
in Webdesign, Hosting en Scripting

 Delen

Aanbevolen reactie

  • Dit is een populair bericht.
Jeroen Leerling

Jeroen

Geplaatst
  • Bijdragen:  4.943
  • Waardering:   21
  • Prestatiepunten:  100
  • Dagen gewonnen:  0
  • Lid sinds:  24-01-08
  • Status:  Offline
  • Actief:  
  • Dit is een populair bericht.
Geplaatst (bewerkt)

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.

jrw7ck.jpg

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 &amp; XAMPP

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

54skuc.png

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.

xampp_control_panel_1.png

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/

bewerkt door Duken
  • Leuk 3
Link naar opmerking
Deel via andere websites
  • 21
  • 4,9k
  • Reacties 9
  • Gemaakt
  • Laatste reactie

Top Posters In Dit Topic

Populaire dagen

Top Posters In Dit Topic

Populaire dagen

Populaire berichten

Jeroen
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

Rikkert.
Rikkert.

http://puu.sh/5F3s2.jpg Mijn eerste resultaat haha En trouwens die site die je gaf is best handig!

Rikkert. Liefhebber

Rikkert.

Geplaatst
  • Bijdragen:  5.261
  • Waardering:   503
  • Prestatiepunten:  466
  • Dagen gewonnen:  10
  • Lid sinds:  24-10-09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  27
Geplaatst

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

Ziet er in ieder geval goed uit die tut!

Link naar opmerking
Deel via andere websites
  • 503
  • 5,3k
  • 10
DukeNPDA Nieuweling

DukeNPDA

Geplaatst
  • Bijdragen:  1.573
  • Waardering:   118
  • Prestatiepunten:  0
  • Dagen gewonnen:  0
  • Lid sinds:  17-04-09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  40
Geplaatst

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

Link naar opmerking
Deel via andere websites
  • 118
  • 1,6k
DukeNPDA Nieuweling

DukeNPDA

Geplaatst
  • Bijdragen:  1.573
  • Waardering:   118
  • Prestatiepunten:  0
  • Dagen gewonnen:  0
  • Lid sinds:  17-04-09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  40
Geplaatst

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

Link naar opmerking
Deel via andere websites
  • 118
  • 1,6k
Rikkert. Liefhebber

Rikkert.

Geplaatst
  • Bijdragen:  5.261
  • Waardering:   503
  • Prestatiepunten:  466
  • Dagen gewonnen:  10
  • Lid sinds:  24-10-09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  27
Geplaatst (bewerkt)

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

Mijn eerste resultaat haha

En trouwens die site die je gaf is best handig!

bewerkt door Rikkert.
  • Leuk 1
Link naar opmerking
Deel via andere websites
  • 503
  • 5,3k
  • 10
DukeNPDA Nieuweling

DukeNPDA

Geplaatst
  • Bijdragen:  1.573
  • Waardering:   118
  • Prestatiepunten:  0
  • Dagen gewonnen:  0
  • Lid sinds:  17-04-09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  40
Geplaatst

Haha hah lol Rikkert.

Sent from my HTC One X using Tapatalk

Link naar opmerking
Deel via andere websites
  • 118
  • 1,6k
Jeroen Leerling

Jeroen

Geplaatst
  • Bijdragen:  4.943
  • Waardering:   21
  • Prestatiepunten:  100
  • Dagen gewonnen:  0
  • Lid sinds:  24-01-08
  • Status:  Offline
  • Actief:  
  • Auteur
Geplaatst

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

Link naar opmerking
Deel via andere websites
  • 21
  • 4,9k
shadowwatch Nieuweling

shadowwatch

Geplaatst
  • Bijdragen:  1.095
  • Waardering:   139
  • Prestatiepunten:  2
  • Dagen gewonnen:  0
  • Lid sinds:  26-09-09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  29
Geplaatst

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.

Link naar opmerking
Deel via andere websites
  • 139
  • 1,1k
  • Oud-beheerder
Duken Oracle

Duken

Geplaatst
  • Bijdragen:  26.218
  • Waardering:   2.930
  • Prestatiepunten:  24.929
  • Dagen gewonnen:  264
  • Lid sinds:  17-12-11
  • Status:  Offline
  • Actief:  
  • Was actief op:  Windows
  • Oud-beheerder
Geplaatst

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

Link naar opmerking
Deel via andere websites
  • 2,9k
  • 26,2k
  • 264
Jeroen Leerling

Jeroen

Geplaatst
  • Bijdragen:  4.943
  • Waardering:   21
  • Prestatiepunten:  100
  • Dagen gewonnen:  0
  • Lid sinds:  24-01-08
  • Status:  Offline
  • Actief:  
  • Auteur
Geplaatst

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.

Link naar opmerking
Deel via andere websites
  • 21
  • 4,9k
  • Duken unpinned this topic

Geplaatst 2 uur geleden

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. :goed:

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


Doe je mee?

Je kunt nu een bericht plaatsen en je later registeren. Als je al een account hebt, kun je je hier aanmelden.

Gast
Reageer op deze discussie / vraag...

×   Je hebt opgemaakte inhoud geplakt.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Jouw link is automatisch embedded.   Toon als een normale link

×   Je vorige inhoud is hersteld.   Schoon editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Delen
Ga naar discussieoverzicht

Mededelingen

  • Recent nieuwsbericht

    0
    Drifter

    Apple waarschuwt opnieuw voor ‘s nachts opladen en namaakopladers

  • Willekeurig topic

  • Nu op het forum

    Stockbox

    Stockbox

    Geplaatst

    Om de vermelding van Drifter te supporten kan ik melden dat we aan de aankomende dagen de deur geopend hebben. Registratie met VPN áán is toegestaan. Na registratie vind er admin approval plaats. Deze tijd proberen we te beperken tot max. 1 uur. Je ontvangt géén email.  
    Drifter

    Drifter

    Geplaatst

    Er is een nieuwe Nederlandse NZB Community aangemeld met de naam Stockboxx. Helaas is deze comminity alleen toegankelijk op Invite, maar zal van tijd tot tijd de deuren openen voor het grotere publiek. Het Beheer van Stockboxx zal in dit topic aangeven wanneer de open registratie zal plaatsvinden, dus hou dit topic goed in de gaten. Extra puntje van aandacht is dat de leiding van Duken.nl de leden vraagt geen verzoekjes te plaatsen in dit topic voor invites, want die zullen worden verwijdert.
    Drifter

    Drifter

    Geplaatst

    De ultieme Mario Kart 8 Deluxe-configuratie voor de Nintendo Switch Mario Kart 8 Deluxe heeft de kracht om de meest vriendelijke bijeenkomsten om te toveren in intense, competitieve slagvelden. Dat komt omdat, als het om Mario Kart gaat, iedereen wil winnen. De strijd om de eerste plaats laat het hart sneller kloppen en kan soms zelfs vriendschappen op de proef stellen. Misschien zit de magie van Mario Kart in het feit dat we teruggaan naar onze kindertijd, waar winnen in een spelletje alles leek. Een van de prachtige aspecten van de Nintendo Switch is het vermogen om overal een race te starten, of je nu thuis op de bank zit of onderweg bent. Naast vaardigheden en uitgebreide kennis van de banen, speelt de samenstelling van je kart een cruciale rol in het behalen van overwinningen. Het perfecte Mario Kart 8 Deluxe-voertuig samenstellen is bijna een wetenschap op zich, en door de jaren heen hebben spelers verschillende meta's ontdekt voor het bouwen van hun ultieme racewagen. Karakterkeuze, karttype, wielen en zweefvleugels beïnvloeden allemaal de prestaties van je racewagen. Grotere personages neigen zwaarder te zijn, wat resulteert in een hogere topsnelheid maar tragere acceleratie. Het juiste evenwicht vinden tussen snelheid, acceleratie, wegligging, gewicht en andere statistieken is essentieel voor de overwinning. De meta is voortdurend geëvolueerd, met combinaties zoals Waluigi op de Wiggler-quad met kleine wielen die populair werden onder de fans. Nintendo speelt actief in op deze trends door het spel te updaten en balansveranderingen door te voeren om een eerlijke competitieve omgeving te handhaven. **De Supreme Mario Kart 8 Deluxe Opstelling** Na grondige analyse van alle 703.560 mogelijke karakter- en voertuigcombinaties heeft datawetenschapper Antoine Mayerowitz de ultieme opstelling gevonden: Princess Peach rijden op de Teddy Buggy met Roller Tires en de Cloud Glider. Deze configuratie biedt superieure acceleratie, handling, snelheid, off-road capaciteiten, gewichtsbeheer en mini-turbo's. Naast Peach zijn personages zoals Birdo, Daisy, Peachette, en Yoshi van vergelijkbaar gewicht en kunnen dezelfde prestaties leveren met deze opstelling. De Teddy Buggy en Roller Tires-combo waren reeds favoriet onder vele spelers, maar nu wordt hun effectiviteit ondersteund door uitgebreide data-analyse. Deze combinatie wordt je geheime wapen de volgende keer dat je met vrienden gaat racen. Het biedt niet alleen een competitief voordeel, maar garandeert ook dat je tegenstanders moeite zullen hebben je bij te benen. Bereid je voor op intense races en mogelijke vriendschappelijke rivaliteit, want met deze opstelling ben je haast onverslaanbaar in Mario Kart 8 Deluxe op de Nintendo Switch.

  • Recente prestatie

    • Eén week actief
      jokepur
      jokepur heeft zojuist een badge verdient
      Eén week actief

  • Recente actieve topics

  • Populaire bijdragers

  • Willekeurige films

  • Willekeurige link

×
×
  • Nieuwe aanmaken...