Jeroen
-
Posts
4943 -
Joined
-
Last visited
2 Followers
Jeroen's Achievements
Apprentice (3/17)
21
Reputation
-
HTML, Structuur & CSS In dit deel gaan we echt een begin maken aan de HTML. We gaan een logische structuur opbouwen zodat het in de toekomst makkelijk is om onze code te begrijpen en daarop verder te bouwen. De HTML dient als skelet voor je website, bijna alles bouwen we daar omheen. De Code HTML5 kent een paar handige functies die helpen bij het logisch opstellen van je code. Deze gaan we tussen de body tags plaatsen om een grove structuur aan te leggen. Het is handig om je design er bij te pakken, zo weet je zeker dat je niets vergeet. We delen de pagina in 3 delen op. De header (niet verwarren met head), de wrapper en de footer. De header en footer zijn altijd hetzelfde, de wrapper kun je zien als content die vaak aangepast wordt. <!DOCTYPE html> <html> <head> <title>Downloadsite</title> </head> <body> <header> </header> <div id="wrapper"> </div> <footer> </footer> </body> </html> Zoals je kunt zien staan onze nieuwe tags (header, div, footer) een stukje verder dan de andere tags. Dit doen we om duidelijk te maken waaronder deze tags vallen. Zo zie je duidelijk dat header onder body valt. De div tag met daarin een id dat wrapper heet kun je zien als een apart aangewezen gebied gereserveerd voor alle content die daarin komt. Elke tag kunnen we een id meegeven op deze manier, je kunt zelf de naam kiezen voor de id. Wij kiezen wrapper omdat dit de meest gebruikte naam is voor je content. Met een id kun je een individuele tag een naam geven, dit is later handig omdat we individuele tags gaan opmaken met css. Later hier meer over. De header invullen Zoals in het design te zien is hebben we een ontzettend mooi geschreven logo genaamd "Downloadsite" en een soort slogan daaronder. Onder de slogan hebben we een navigatie. Wat willen we hiermee doen? Nou, meestal kom je terug naar de index pagina (homepage) van de website als je op het logo klikt. Dit kunnen we al regelen met HTML! Met de <a> tag kunnen we van de <h1> tag een klikbare link maken die ons doorverwijst naar de homepage. Het is misschien een beetje gek om te doen, aangezien we al op de homepage zitten, maar het is nog gekker om het weg te halen. Om erachter te komen wat deze tags nu precies betekenen kun je kijken op w3schools (google maar ). Wat je ook kunt doen is de onderstaande code overtypen (niet kopiëren) naar je codeer programma en kijken wat het precies doet. De navigatie gaan we lekker simpel houden, met de <ul> tags geven we aan wat voor lijst we willen gaan maken. Wij gebruiken een unordered list. De <li> staat voor list, je kunt het vergelijk met een takenlijstje. Daar staat alles netjes onder elkaar vaak met een witte regel er tussen. koffie appelsap melk Omdat de list tags tussen de <ul> tags staan, schuiven we ook deze een tab (4 spaties) naar voren om een duidelijk onderscheid te maken. <a href="index.php"><h1>Downloadsite</h1></a> <p>Download hier de leukste muziek </p> <ul> <li><a href="about.php">over downloadsite</a></li> <li><a href="upload.php">uploaden</a></li> <li><a href="policy.php">policy</a></li> </ul> Deze code gaat dus tussen de <header> tags. De footer In de footer plaatsen we een klein stukje tekst. Hiervoor gebruiken we de <p> tags dat staat voor paragraph. Het plaatje werkt net iets anders. In onze mappenstructuur hebben we een mapje dat images heet. Hier zetten wij ons plaatje neer dat wij in onze footer willen laten zien. Met de / geef je aan hoe diep je in de map zit (hetzelfde als in windows). Net als bij de <a> tag geven we in de tag zelf aan wat we willen gaan doen. src="" staat voor "source is" De alt tag is optioneel, hier geven we een alternatieve naam mee voor het plaatje. De <img> tag kun je niet afsluiten met </img>, dit omdat je er simpelweg niks in kan zetten. <p>Copyright by Kees Padhaas</p> <img src="images/plaatje.png" alt="padhaas"> Zet deze code tussen je<footer> tags. De wrapper hoeven we nog niet in te vullen. Die wordt pas ingevuld door de gebruikers van de website wanneer zij een liedje uploaden. Dit komt pas terug in een veel later stadium van deze handleiding. De CSS CSS is de tweede taal die we gaan leren. Met CSS kun je de HTML opmaken en praktiseren voor de gebruiker. Om een CSS bestand aan te maken pakken we ons codeer programma erbij en openen we een nieuw bestand. We slaan dit bestand op als style.css in de map css van onze mappen-structuur. De HTML en CSS zitten nu gescheiden in de folders en zijn dus nog niet verbonden met elkaar. Dit gaan we in ons index.php bestand doen. Zoals ik in de vorige handleiding uitgelegd heb stoppen we het grootste deel van de code die de gebruiker niet ziet tussen de <head> tags. Het is voor een beginner onbelangrijk om deze code te onthouden en te begrijpen, maar je moet wel weten dat het bestaat. <link href="css/style.css" type="text/css" rel="stylesheet"> Voeg deze code tussen de <head> tags. Niet te verwarren met <header> De cake is gebakken, nu gaan we het versieren. Open je style.css. We gaan ons logo een mooi kleurtje meegeven. In CSS selecteren we het stukje HTML dat we gaan versieren. Dit kunnen we doen door alle tags een id mee te geven, en te selecteren met css. Dit gaan we niet doen, omdat het dan een rommeltje wordt in index.php en style.css. We selecteren de header, vervolgens selecteren we h1. CSS selecteert nu alle <h1> tags in de <header> tag. In ons geval is dat ons prachtige logo. Na het selecteren van de html gebruiken we { om aan te geven dat we hier code voor gaan toepassen en } om aan te geven dat we klaar zijn met code toepassen. Tussen de accolades zetten we de code. header h1{ color:red; } Zet deze code in het CSS bestand. De kop is er af! Het begin van onze website is af. Als het goed is zie je alle tekst die we willen laten zien, en is ons logo rood. Wanneer je code afwijkt, of je hebt het gevoel dat iets niet klopt kun je altijd in de comments naar hulp vragen. Ook kun je jezelf helpen met firebug (zie handleiding 1) om de fout op te sporen. Tips voor de volgende handleiding Raak bekend met css: http://www.w3schools.com/css/ Ga rommelen met code, probeer andere tags te gebruiken in HTML of werk alvast verder aan je CSS. Het zou ook leuk zijn als leden komen met een alternatieve HTML opbouw, het kan namelijk nog slimmer! Succes!- 1 reply
-
- 4
-
-
- download website
- bouwen
- (and 6 more)
-
Ja, kunnen we zeker doen! Goed idee.
-
Jep, op W3schools staat bijna alles wat je moet weten met een voorbeeldje, technische eigenschappen en een tester.
-
Klinkt goed Shadowwatch. Ik heb weinig verstand van C#, ik kan er misschien net een rekenmachientje maken in C# haha. Maar erg leuk om te horen! Ik zie nu je website MMDesigns.eu. Zien er goed uit man. Heb wel een tipje voor je, stuur ik wel via pm.
-
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/
-
Oke, ik ga het zo doen: eerst maak ik zelf de website, de volgende aspecten komen aan bod: Design HTML CSS Javascript/Jquery PHP/Mysql Natuurlijk kan ik in 1 tutoral-reeks niet een volledige taal uitleggen. Ik zal dus tussendoor verwijzen naar goede tutorials waarvan ik denk dat ze echt de moeite waard zijn om te kijken.
-
Er is dus animo, dat is mooi. Ik ga kijken of ik een tutorial kan maken voor een simpele (legale) download website. Dan blijven we nog een beetje in de context van DukeN.nl
-
Een vraagje aan alle leden en modjes. Wie zijn er hier bezig met programmeren? Dus het maken van websites, software, apps etc? Ik ben zelf veel bezig met het coderen van websites, maar vind het ook erg leuk om daar andere verhalen over te horen. Kortom; is er op duken.nl veel animo voor programmeren? Edit Het lijkt me ook leuk om e.v.t tutorials te maken, maar alleen wanneer hier animo voor is vanuit leden en modjes.
-
Haha, sinterklaas is net weg en de kerstbomen staan alweer binnen.
-
WOLF – Torrent / Download / NZB
Jeroen replied to Nieuws's topic in Alles over Films, Series, TV en E-books
De download van wolf is nppog niet beschikbaar, dat is waarschijnlijk pas wanneer de dvd uit is. Tevens is dit geen download website. -
Code geel in het zuiden, beetje wind tegen hier, meer niet:p
-
Gefeliciteerd Duiken, wat een mooie actie. Freddytje, jij ook gefeliciteerd!
-
Dat ga ik zo eens uitzoeken. Ben benieuwd hoe dit allemaal gaat lopen, eigenlijk ben ik al te laat haha.
-
Ik ben nu litecoins aan het minen. Ben benieuwd of het iets gaat opleveren. Iemand al rijk geworden hier?
