Spring naar bijdragen
Speciale aanbieding. 85% korting op Private Internet Access VPN, nu slechts €1,79 per maand en ontvang 3 maanden gratis. 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:  4943
  • Waardering:   21
  • Prestatiepunten:  100
  • Dagen gewonnen:  0
  • Lid sinds:  01/24/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:  5261
  • Waardering:   503
  • Prestatiepunten:  466
  • Dagen gewonnen:  10
  • Lid sinds:  10/24/09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  28
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:  1573
  • Waardering:   118
  • Prestatiepunten:  0
  • Dagen gewonnen:  0
  • Lid sinds:  04/17/09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  41
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:  1573
  • Waardering:   118
  • Prestatiepunten:  0
  • Dagen gewonnen:  0
  • Lid sinds:  04/17/09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  41
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:  5261
  • Waardering:   503
  • Prestatiepunten:  466
  • Dagen gewonnen:  10
  • Lid sinds:  10/24/09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  28
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:  1573
  • Waardering:   118
  • Prestatiepunten:  0
  • Dagen gewonnen:  0
  • Lid sinds:  04/17/09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  41
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:  4943
  • Waardering:   21
  • Prestatiepunten:  100
  • Dagen gewonnen:  0
  • Lid sinds:  01/24/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:  1095
  • Waardering:   139
  • Prestatiepunten:  2
  • Dagen gewonnen:  0
  • Lid sinds:  09/26/09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  30
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:  26218
  • Waardering:   2933
  • Prestatiepunten:  25024
  • Dagen gewonnen:  265
  • Lid sinds:  12/17/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
  • 265
Jeroen Leerling

Jeroen

Geplaatst
  • Bijdragen:  4943
  • Waardering:   21
  • Prestatiepunten:  100
  • Dagen gewonnen:  0
  • Lid sinds:  01/24/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.
Note: Your post will require moderator approval before it will be visible.

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
    Eater

    Windows 11-updates blijven een tranendal

  • Willekeurig topic

  • Nu op het forum

    Mafketel

    Mafketel

    Geplaatst

    Tux

    Tux

    Geplaatst

    Eater

    Eater

    Geplaatst

    Wat je moet weten over Diablo 4 Seizoen 7 We staan op het punt om een spannend nieuw hoofdstuk te betreden in de wereld van Diablo 4! Seizoen 7, met als thema 'Hekserij', gaat op 3 december van start in de Public Test Realm (PTR). Dit is jouw kans om als eerste de nieuwe patch en seizoensinhoud uit te proberen voordat het officieel wordt gelanceerd. De gedetailleerde patchnotities worden op 27 november beschikbaar gesteld, dus markeer die datum in je agenda! Wat kunnen we verwachten in Seizoen 7? Seizoen 7 introduceert maar liefst 20 nieuwe krachten die je gameplay een frisse draai zullen geven. Ook staan er enkele balanswijzigingen op de planning, waaronder nerfs voor de Spiritborn-klasse. Dit komt bovenop het feit dat we momenteel nog midden in Seizoen 6, de Seizoen van Haat, zitten, dat pas in januari eindigt. Maar geen zorgen, er is genoeg actie met de recente patch 2.0.5 en een aantal feestelijke in-game evenementen, waaronder de terugkeer van de angstaanjagende rode cloaks en welkomstgeschenken voor Eternal-spelers. De Hekserij Mechaniek In Seizoen 2 zagen we de Vampirische krachten, en nu keren de 'seizoenskrachten' terug in de vorm van Hekserij. Spelers zullen een nieuwe valuta, Restless Rot, moeten verzamelen door de Headrotten te verslaan. Deze Restless Rot kan vervolgens worden aangeboden op Altaren in ruil voor Hekserij-krachten. Het gebruiken van Hekserij zal vergelijkbaar zijn met de Sanguine Circle uit Seizoen 2, met een extra tabblad in je karaktermenu voor je Hekserij-vaardigheden. Nieuwe Missies en Activiteiten In dit seizoen kun je werken aan een reputatiebord dat specifiek is voor Hekserij, en 'Covens Favor' zal vallen van Whispers. Het mooiste is dat je weer Resplendant Sparks kunt verdienen door het reputatiebord van het seizoen te voltooien, een essentieel crafting-materiaal voor het maken van Mythic Uniques. De Whispers worden ook versterkt, aangezien de Boom op zoek gaat naar Headrotten. Headhunts zullen op een vergelijkbare manier verschijnen als Helltides, met zowel nieuwe als vertrouwde Whisper-activiteiten. Het voltooien van deze Whispers kan de kans geven om een Headrotten-baas te laten verschijnen. Zorg ervoor dat je het hoofd van de baas levert bij de Boom van Whispers voor Occult Gems! Occult Gems De Occult Gems die in Seizoen 7 worden geïntroduceerd, zullen unieke effecten hebben die je in item sockets kunt plaatsen. Dit biedt nieuwe strategische mogelijkheden bij het aanpassen van je uitrusting. Ontdek Verborgen Krachten Verken de 'Forgotten Altars' in dungeons door heel Sanctuary om nieuwe krachten te ontgrendelen. Met meer dan 20 nieuwe krachten die aan het spel worden toegevoegd, is er veel te ontdekken en uit te proberen. Seizoen 7 belooft een spannend avontuur te worden, vol nieuwe mogelijkheden en uitdagingen. Dus bereid je voor op de aankomende PTR en zorg ervoor dat je niets mist van de spannende content die in het verschiet ligt!

  • Recente prestatie

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

  • Recente actieve topics

  • Populaire bijdragers

  • Willekeurige films

  • Willekeurige link

×
×
  • Nieuwe aanmaken...