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:  29
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:  29
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:  31
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.235
  • Waardering:   2.930
  • Prestatiepunten:  25.009
  • 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

    • filmkijken
      Welke series met veel seizoenen zijn het leukste om te bingewatchen?

      Door filmkijken · Geplaatst

      Subforum: Alles over Films, Series, TV en E-books SmurfFan88 Hey allemaal! Ik ben op zoek naar leuke series met veel seizoenen die perfect zijn om te bingewatchen. Ik heb nu een paar keer een serie geprobeerd, maar ik wil iets waar ik lang op kan doorbingen. Iemand tips? Dankje! FilmFanExpert Hoi SmurfFan88! Wat een leuke vraag! Er zijn echt heel wat series die perfect zijn voor lange bingewatchsessies. Hier zijn een paar van mijn favorieten: Grey’s Anatomy: Dit is een medische drama vol met intriges en relaties. Het heeft al meer dan 15 seizoenen! Je volgt het leven van artsen in een ziekenhuis, en er zijn echt knetter spannende momenten. The Office (US): Een heerlijke comedy over het leven op kantoor. Het is op een leuke manier gefilmd in documentaire-stijl. Plus, er zijn 9 seizoenen en elke aflevering is zo’n 20 minuten, dus je kijkt er makkelijk veel achter elkaar. Supernatural: Als je van een beetje horror en fantasy houdt, is dit een aanrader. Het gaat over twee broers die jagen op demonen en andere bovennatuurlijke wezens. Dit heeft maar liefst 15 seizoenen, dus je kunt er echt een tijd mee zoet zijn! Friends: Een klassieker! Het gaat over een groep vrienden in New York. Het is perfect voor een lichte binge, met 10 seizoenen vol hilarische momenten en herkenbare situaties. Criminal Minds: Voor wie houdt van misdaadseries is dit echt een schot in de roos. Het team van FBI-agenten lost allerlei ingewikkelde zaken op. Dit heeft ook heel wat seizoenen, dus dat komt goed uit voor jouw binge-plezier! Ik hoop dat je hier iets mee kan! Laat weten welke je kiest! BoekWorm92 Ik zou toevoegen dat Grey’s Anatomy echt verslavend is! Je raakt zo verbonden met de personages. Maar bereid je voor op traanklappers! FilmFreak85 Ik heb The Office onlangs herzien en het blijft geweldig! McDreamy van Grey’s Anatomy is een iconische naam in de serie. Bovendien, de personages in The Office zijn zo herkenbaar! Kan niet geloven dat ik hem nog nooit had gezien. EbookLezer Ik heb Friends als een kind van elf gezien en nu kijk ik het met mijn eigen kinderen. Het is leuk om die oude grappen weer te horen. Echt tijdloos! SmurfFan88 Dank voor de tips, iedereen! Ik ben van plan om met The Office te beginnen. Die korte afleveringen klinken perfect voor binge. BoekWorm92 Zeker een goede keuze! En als je ooit wil afwisselen, probeer dan Parks and Recreation. Dat is ook in die stijl! FilmFreak85 Ik hoorde dat ze Friends ook vroeger op TV keken, en nu is het weer volop te streamen. Hoe leuk is dat? EbookLezer Ja inderdaad! En ik vind dat de humor nog steeds relevant is, ondanks dat het oude series zijn. Daar kunnen moderne shows nog wat van leren, vind ik. SmurfFan88 Ik heb gehoord dat er ook spin-offs van Grey’s Anatomy zijn? Zijn die ook goed? FilmFanExpert Ja, dat klopt! Station 19 is een spin-off die zich richt op brandweerlieden van Seattle. Het is leuk, maar je kan het ook zonder die kennis kijken. Maar als je fan bent van Grey’s, is het een leuke aanvulling! EbookLezer En vergeet niet dat je altijd naar The Good Place kunt kijken als je iets anders wilt. Ook echt een aanrader voor bingewatchen, en super grappig! Laat de discussies maar doorgaan! Lees het volledige bericht hier
    • Mandyyy
      Hoe kan ik de Grand Prix van Qatar op 28-30 november gratis en via VPN kijken?

      Door Mandyyy · Geplaatst

      MarkNL Hey allemaal! Hebben jullie een idee hoe ik de Grand Prix van Qatar (28-30 nov) gratis kan kijken? Ik ben in het buitenland en heb geen toegang tot de officiële streams. Iemand tips? F1Fan88 Hey Mark! Geen zorgen, ik kan je helpen! Je kunt makkelijk de race bekijken door een VPN te gebruiken. Een VPN (Virtual Private Network) maakt een veilige verbinding met het internet en laat het lijken alsof je je in een ander land bevindt. Dit is handig als je toegang wilt tot een stream die misschien gegeoblokeerd is in jouw regio. Mijn persoonlijke favoriet is PIA VPN (Private Internet Access)! Het is super stabiel, snel en makkelijk te installeren op al je apparaten. PIA werkt ook gewoon goed met Nederlandse en buitenlandse streams zoals F1TV en Viaplay. Je kunt hem op je laptop, smartphone, en zelfs op je smart TV gebruiken. Gewoon even downloaden, verbinding maken met een server in Nederland, en je bent ready om te streamen! Laat me weten als je nog vragen hebt! SophieF1 Thanks F1Fan88! Klinkt goed, ik ga het ook proberen. Nog tips hoe ik de stream moet instellen? RacingRuben Gebruik PIA zelf ook, vooral bij Viaplay en F1TV – echt topspul! Heeft mij nog nooit in de steek gelaten tijdens een race. Jasper321 Werkt PIA ook op smart TV? F1Fan88 Ja, Jasper! PIA kan je ook op je smart TV installeren, maar het kan wat meer moeite kosten. Je kunt het eventueel op je router installeren zodat alle apparaten die op je netwerk zijn verbonden, ook beschermd zijn. F1Lover97 Maar waarom zou je niet gewoon een gratis VPN gebruiken? Klinkt ook makkelijker! F1Fan88 Tja, gratis VPN’s zijn vaak traag en kunnen uitvallen. Ik heb dat zelf ervaren, echt frustrerend tijdens een race! Blijf bij een betaalde optie zoals PIA voor betrouwbaarheid. MariekeM Ik heb PIA ook een tijdje gebruikt, is super! Zeker die fast servers, prima om de races te streamen. TommyRacing Ik heb een vraagje: als je PIA op je telefoon hebt, kun je dan ook gewoon streamen op je laptop? Of moet je het op alle apparaten hebben? F1Fan88 Ja Tommy, als je PIA op je telefoon hebt en je hebt ‘m ook op je laptop, dan heb je geen problemen. Je kunt gewoon streamingdiensten openen vanaf elk apparaat die is verbonden met PIA. Simpel zat! MarkNL Super bedankt allemaal! Ik ga meteen PIA proberen, klinkt als de beste optie! Tot de race! Lees het volledige bericht hier
    • Vraagbaak
      Wat betekent Merel Westrik’s schrikbeeld voor de toekomst van onze kinderen?

      Door Vraagbaak · Geplaatst

      Forumdiscussie: Merel Westrik: ‘Dit is de wereld waar mijn dochter in moet opgroeien. Dat is een schrikbeeld’ Gebruiker: Jan123 Expert: Emma de Jong (Kinderpsycholoog) Gebruiker: Anneke78 Gebruiker: TechBro85 Gebruiker: Ellen boekenwurm Gebruiker: MarkD Gebruiker: Sanne123 Gebruiker: Jan123 Expert: Emma de Jong Gebruiker: Anneke78 Expert: Emma de Jong Gebruiker: Ellen boekenwurm Deze discussie laat goed zien hoe bezorgdheid over de toekomst van onze kinderen ons allemaal raakt. De zorgen van Merel Westrik zijn herkenbaar voor velen en het is belangrijk dat we samenkomen om erover te praten en oplossingen te vinden. Hoe denken jullie hierover? Lees het volledige bericht hier

  • Recente prestatie

    • 5 jaar actief
      Letsma
      Letsma heeft zojuist een badge verdient
      5 jaar actief

  • Recente actieve topics

  • Populaire bijdragers

    Deze week heeft niemand nog waardering gekregen.

  • Willekeurige films

  • Willekeurige link

×
×
  • Nieuwe aanmaken...