Spring naar bijdragen

Mis de speciale aanbieding niet. 85% korting op Private Internet Access VPN, nu slechts €1,75 per maand en ontvang 4 maanden gratis.

Ervaar ultiem gebruiksgemak en een snelle VPN-verbinding. Geniet van de beste kwaliteit voor de scherpste prijs. Met Private Internet Access kun je moeiteloos torrents, Usenet en Netflix gebruiken! En geld-terug-garantie van 30 dagen, dus je kunt het risicovrij proberen.

Wil je weten hoe je aan de slag kunt gaan? Bekijk dan onze handige handleiding voor een probleemloze installatie en gebruik. :goed:



Mis de speciale aanbieding niet. 85% korting op Private Internet Access VPN, nu slechts €1,75 per maand en ontvang 4 maanden gratis.

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
  • 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:  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
DukeNPDA Nieuweling

DukeNPDA

Geplaatst
  • Bijdragen:  1.573
  • Waardering:   118
  • Prestatiepunten:  0
  • Dagen gewonnen:  0
  • Lid sinds:  17-04-09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  42
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
DukeNPDA Nieuweling

DukeNPDA

Geplaatst
  • Bijdragen:  1.573
  • Waardering:   118
  • Prestatiepunten:  0
  • Dagen gewonnen:  0
  • Lid sinds:  17-04-09
  • Status:  Offline
  • Actief:  
  • Leeftijd:  42
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
Rikkert. Liefhebber

Rikkert.

Geplaatst
  • Bijdragen:  5.261
  • Waardering:   503
  • Prestatiepunten:  466
  • Dagen gewonnen:  10
  • Lid sinds:  24-10-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
DukeNPDA Nieuweling

DukeNPDA

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

Haha hah lol Rikkert.

Sent from my HTC One X using Tapatalk

Link naar opmerking
Deel via andere websites
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
shadowwatch Nieuweling

shadowwatch

Geplaatst
  • Bijdragen:  1.095
  • Waardering:   139
  • Prestatiepunten:  2
  • Dagen gewonnen:  0
  • Lid sinds:  26-09-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
  • Administrators
Duken Oracle

Duken

Geplaatst
  • Bijdragen:  26.234
  • Waardering:   2.930
  • Prestatiepunten:  24.929
  • Dagen gewonnen:  264
  • Lid sinds:  17-12-11
  • Status:  Offline
  • Actief:  
  • Was actief op:  Android
  • Administrators
Geplaatst

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

Link naar opmerking
Deel via andere websites
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
  • 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

  • Willekeurig topic

  • Nu op het forum

    • Mandyyy
      Hoe kan ik makkelijk tv kijken met mijn Android box?

      Door Mandyyy · Geplaatst

      Forumdiscussie: Hoe kan ik makkelijk tv kijken met mijn Android box? Gebruiker: TVlover1987 Hallo allemaal! Ik heb sinds kort een Android box, maar ik weet niet zo goed hoe ik er makkelijk tv mee kan kijken. Kan iemand me helpen? Wat moet ik downloaden en instellen? Dankjewel! Expert: TechTovenaar Hey TVlover1987! Geen zorgen, het is helemaal niet zo ingewikkeld. Ik zal je een paar stappen geven zodat je snel aan de slag kunt. Instellen van de Android Box: Zorg ervoor dat je box is aangesloten op je tv en dat je internetverbinding goed werkt. Tijdens de setup moet je je aanmelden met een Google-account. Dit is nodig om apps te kunnen downloaden. Apps downloaden: De eerste app die ik aanraden is Kodi. Dit is een gratis mediaplayer die je kunt gebruiken om tv-zenders en films te streamen. Ga naar de Google Play Store op je Android box, zoek naar Kodi en installeer het. Add-ons voor Kodi: Na het installeren van Kodi kun je add-ons toevoegen. Dit zijn extra functies die je helpen om tv-programma’s en films te bekijken. Je kunt bijvoorbeeld de add-on "PVR IPTV Simple Client" gebruiken. Hiermee kun je live tv bekijken. Zoek naar tutorials op YouTube over hoe je deze add-ons installeert – dat helpt vaak veel! Alternatieve apps: Als Kodi niet helemaal jouw ding is, probeer dan apps zoals Netflix, Disney+ of de NPO Start app voor Nederlandse content. Deze zijn eenvoudig te gebruiken en werken goed met de meeste Android boxes. Problemen oplossen: Mocht je tegen problemen aanlopen, dan zijn forums zoals deze heel handig. Vaak hebben anderen dezelfde vragen en kun je daar de antwoorden vinden. Ik hoop dat dit je helpt! Als je meer vragen hebt, vraag gerust! Gebruiker: Rob1975 Hey, goede tips! Heb zelf ook Kodi, maar het installeren van die add-ons kan een hoop gedoe zijn. Heeft iemand een aanrader voor een goede tutorial? Gebruiker: JufMarianne @Rob1975 Ik heb laatst een fijne video gevonden op YouTube. Gewoon ‘Kodi add-ons installeren’ en je hebt heel wat opties. Er zijn echt goede tutorials die het stapsgewijs uitleggen. Succes! Gebruiker: KevinCool Ik zweer bij de NPO Start app! Gewoon lekker terugkijken. Geen gedoe met add-ons. Vond het altijd vervelend als je ineens alles weer moest updaten ofzo. Plus: de interface is super. Gebruiker: TVlover1987 Bedankt, iedereen! Heb nu Kodi en de NPO app gedownload. Het werkt al een stuk beter. Die add-ons ga ik binnenkort ook proberen. Gebruiker: SlimmeRia Hee, hebben jullie ook een goede VPN aanbevolen voor als je buitenlandse zenders wilt kijken? Soms heb je die nodig, geloof ik! Gebruiker: BennyB @SlimmeRia Ja! Ik gebruik ExpressVPN en dat werkt prima. Gewoon de app download en je kan lekker streamen zonder dat je geblokkeerd wordt. Het is een beetje duur, maar het werkt top! Gebruiker: GeenZorgen Persoonlijk gebruik ik NordVPN en dat is ook heel goed. Maar let wel op, soms is de snelheid een beetje traag. Gewoon even testen welke voor jou het beste werkt! Gebruiker: Lucie2k Dank voor de tips, mensen! Ik heb een Android box voor mijn ouders gekocht en ze zijn niet zo tech-savvy. Moet ik dan voor de NPO app gaan, of zou Kodi ook te doen zijn voor hen? Gebruiker: TechTovenaar @Lucie2k Als je ouders niet zoveel ervaring hebben, zou ik echt voor de NPO app gaan! Die is super gebruiksvriendelijk. Kodi is leuk als je zelf een beetje wilt knutselen, maar NPO is echt plug-and-play. Gebruiker: TVlover1987 Jullie zijn de beste! Dit forum is goud waard. Heb nu een plan en kan mijn box eindelijk gebruiken. Tot de volgende keer! Zo zie je, het kan echt simpel zijn om tv te kijken met je Android box. Heb je nog meer vragen of tips? Laat het weten! Lees het volledige bericht hier
    • Mandyyy
      Hoe kan ik de Grand Prix van Miami op 2-4 mei gratis en veilig met een VPN kijken?

      Door Mandyyy · Geplaatst

      MarkNL: Hey allemaal! Ik ben echt super enthousiast voor de Grand Prix van Miami op 2-4 mei, maar ik vraag me af hoe ik het kan kijken. Ik ben op vakantie in het buitenland en heb geen toegang tot de officiële streams. Iemand tips? Alvast bedankt! F1Fan88: Hee Mark! Geen zorgen, ik heb je dekking! Als je het veilig en gratis wilt kijken, is een VPN de oplossing. Maar wat is een VPN eigenlijk? Een VPN (Virtual Private Network) maakt een beveiligde verbinding tussen jouw apparaat en het internet. Het helpt je om je locatie te verbergen, zodat je kunt doen alsof je in Nederland bent, zelfs als je ergens anders bent! Zo krijg je toegang tot Nederlandse streams zoals Viaplay of F1TV. Een aanrader is PIA VPN (Private Internet Access). Dit is mijn favoriet omdat het super stabiel en snel is. Je kunt het makkelijk installeren op bijna al je apparaten, van je telefoon tot je laptop. En geloof me, het werkt geweldig met zowel Nederlandse als buitenlandse streams. Zeker de moeite waard om te proberen! Hopelijk lukt het je! RacingFan220: Hee F1Fan88, dat klinkt goed! Ik gebruik zelf ook PIA, vooral bij Viaplay en F1TV – echt topspul! De verbinding is altijd goed en ik heb nog nooit problemen ondervonden. F1Grootste: Werkt PIA ook op smart TV? Wil het graag op mijn tv zien! SpeedyD: Ja! PIA heeft een vette app voor smart TV’s. Je kunt het gewoon installeren, en dan kijk je zonder geklooi alles in topkwaliteit. DaniF1: Waarom niet gewoon een gratis VPN? F1Fan88: Lekker sceptisch, Dani! Maar eerlijk, gratis VPN’s zijn vaak traag en kunnen uitvallen. PIA is gewoon betrouwbaarder, en je betaalt een paar euro per maand voor een solide ervaring. Ik vind het die investering echt waard! MaxHolland: Daar sluit ik me bij aan! Heb een gratis VPN geprobeerd en dat was echt een ramp. Altijd verbinding kwijt, dus nu blijf ik bij PIA. JasFreak: Heb je tips om het in te stellen op je telefoon? Ik ben niet zo tech-savvy! F1Fan88: Zeker! De PIA-app is heel gebruiksvriendelijk. Gewoon downloaden, inloggen en dan de juiste server kiezen (bijv. Nederland). En klaar, je kan beginnen met kijken! MarkNL: Thanks allemaal voor de tips! Ik ga PIA proberen en hoop dat het lukt! Kan niet wachten om de race te zien! Lees het volledige bericht hier
    • pleuni
      Waarom synchroniseert iTunes mijn muziek niet meer? Tips en hulp gevraagd!

      Door pleuni · Geplaatst

      Forumdiscussie: Apple Software, Hardware en Besturingssystemen iRonnie: Hoi allemaal! Ik loop tegen een probleem aan. Mijn iTunes wil mijn muziek gewoon niet meer synchroniseren met mijn iPhone. Het was eerder geen probleem, maar sinds een paar weken… niets meer. Iemand tips of oplossingen? Ik word er gek van! AppleExpert99: Hey iRonnie! Dat is vervelend, maar geen paniek, hier zijn een paar dingen die je kunt proberen. Controleer je kabel en verbinding: Gebruik je de originele Apple-kabel? Soms kan een slechte kabel problemen veroorzaken. Probeer het met een andere kabel of USB-poort. iTunes- en iOS-versies: Zorg ervoor dat je de nieuwste versies van iTunes en iOS hebt. Ga naar "Software-update" op je iPhone en "iTunes"-instellingen op je computer om dat te checken. Synchronisatie-instellingen: Kijk in iTunes onder het tabblad van je apparaat naar de synchronisatie-instellingen. Zeker weten dat je muziek hebt aangevinkt om te synchroniseren. Soms kan er iets veranderd zijn in de voorkeuren. Herstart alles: Het klinkt simpel, maar probeer je computer en iPhone eens opnieuw op te starten. Dat lost vaak onverklaarbare problemen op. iTunes opnieuw installeren: Als niets helpt, kan het een optie zijn om iTunes opnieuw te installeren. Je verliest je muziek niet, maar het kan een goede laatste stap zijn. Hopelijk werkt het! Laat maar weten of je meer hulp nodig hebt. AppleEva: Dank voor je tips, AppleExpert. Ik had hetzelfde probleem een tijdje terug en het lag bij mij aan de kabel! Het is zo raar hoe zo’n klein ding zo’n groot effect kan hebben. Hopelijk lost iRonnie dit ook snel op! iRonnie: Bedankt voor je hulp, AppleExpert! Ik ga het gelijk even proberen. Die kabel was trouwens wel de originele, maar ik ga het zeker checken. Zal je laten weten of het werkt! JanDeMan: Ik had ook een tijd geleden dat probleem, maar toen lag het aan mijn audiobook. iTunes kon de muziek niet synchroniseren omdat er een fout in dat bestand zat. Heb je zoiets ook? Probeer eens je muziek in delen te synchroniseren! ixlRocker: Goede tip, Jan! Maar ik vind het altijd zo’n gedoe om dat zo te moeten doen. Waarom kunnen ze dit niet gewoon fixen, haha? bloempje94: Naast dat je misschien je muziek in delen moet synchroniseren, kan het ook helpen om je iPhone eens te resetten naar fabrieksinstellingen. Maar dan ben je wel alles kwijt, dus dat zou ik alleen als laatste optie doen. iRonnie: Goeie suggestie, bloempje94! Maar dat wil ik inderdaad proberen te vermijden. Ik hoop dat het met de andere tips lukt! Timmetje: Hey iRonnie, ik weet zeker dat je het zelf kan oplossen. Dat soort dingen zijn vaak echt frustrerend, maar meestal is het iets kleins! Laat ons weten hoe het gaat! iRonnie: Zal ik doen! Ik probeer het vanavond en post hier de updates. Fingers crossed! AppleExpert99: Proost op de vingers die gekruist zijn! Laat maar weten als je vragen hebt terwijl je bezig bent. Veel succes! iRonnie: Yes, bedankt allemaal! Hopelijk heb ik snel weer muziek op mijn iPhone! Lees het volledige bericht hier

  • Recente prestatie

    • 6 jaar actief
      gigamen
      gigamen heeft zojuist een badge verdient
      6 jaar actief

  • Recente actieve topics

  • Populaire bijdragers

    Deze week heeft niemand nog waardering gekregen.

  • Willekeurige films

  • Willekeurige link

×
×
  • Nieuwe aanmaken...