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 | HTML, Structuur, CSS

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

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.xpse45.png

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 :P). 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!

  • Leuk 4
Link naar opmerking
Deel via andere websites
  • Reacties 1
  • Gemaakt
  • Laatste reactie

Top Posters In Dit Topic

Populaire dagen

Top Posters In Dit Topic

Populaire dagen

Populaire berichten

Jeroen
Jeroen

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 verde

  • Administrators
Duken Oracle

Duken

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

En weer zo een mooie handleiding!

Hij is stickey en die gaan we weer delen via alle bekende sociale media! :goed:

Damn, your good!

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

    • MisterMaik
      Wat is IPTV en hoe werkt het precies?

      Door MisterMaik · Geplaatst

      Onderwerp: Wat is IPTV en hoe werkt het precies? Gebruiker: TechLover123 Hey allemaal, ik ben niet zo technisch, maar ik hoor steeds over IPTV. Wat is dat nu precies? Werkt dat echt, of is het meer een hype? Alvast bedankt voor jullie hulp! Expert: StreamGuru Hey TechLover123, Leuke vraag! IPTV, dat staat voor Internet Protocol Television, is eigenlijk gewoon televisie kijken via het internet. In plaats van via een traditionele kabel of satelliet, krijg je de tv-zenders en films via je internetverbinding. Heel simpel, toch? Hoe werkt het? Streaming: Bij IPTV wordt content als een datastroom verzonden. Het is vergelijkbaar met hoe je bijvoorbeeld YouTube-video’s kijkt. Je toestel ontvangt de data in real-time en speelt het af terwijl het downloadt. Content in pakketjes: Ze sturen de tv-zenders en films in kleine pakketjes, wat betekent dat je niet alles hoeft te downloaden voordat je gaat kijken. Dit noemt men "on-demand". Apparaat: Je kunt IPTV streams bekijken op verschillende apparaten: smart-tv’s, tablets, smartphones, of zelfs op je computer. Je hebt meestal een speciale app of een set-top box nodig. Stel je voor: je hebt een paar vrienden over en jullie willen een film kijken. Met IPTV open je simpelweg de app, kies je de film en BAM, jullie zijn aan het kijken zonder gedoe met schijven of downloads. En is het betrouwbaar? Dat hangt een beetje af van je internetverbinding en de aanbieder. Goede aanbieders bieden stabiele streams en een goede hoge kwaliteit. Maar pas op voor illegale APK’s, want die kunnen vaak leiden tot minder kwaliteit of zelfs problemen met de wet. Ik hoop dat dit je vraag beantwoordt! Laat maar weten als je nog meer wilt weten. Reacties: Gebruiker: FilmFan99 Thanks voor de duidelijke uitleg, StreamGuru! Dus eigenlijk is het gewoon Netflix maar dan met live tv-zenders? Gebruiker: TechLover123 Ja, dat klinkt logisch! Dank voor de uitleg, StreamGuru. Maar als je dan internetproblemen hebt, kan je ook niet kijken, of wel? Gebruiker: JorisJ Ja klopt, TechLover123. Maar dat heb je ook met kabel-tv. Bij IPTV kun je soms wel wat meer zelf kiezen wat je kijkt, plus het is vaak goedkoper! Gebruiker: Gadgets4Ever StreamGuru, ben je bekend met bepaalde aanbieders? Ik hoor vaak verschillende namen, maar ik weet niet wat betrouwbaar is. Expert: StreamGuru Goede vraag, Gadgets4Ever! Ja, er zijn zeker betrouwbare aanbieders zoals Youfone TV, KPN, of Zattoo. Ik zou zeggen, kijk altijd reviews en vraag rond in je omgeving voor tips! Gebruiker: OldSchoolViewer Ik blijf toch een beetje bij mijn kabel-tv. IPTV klinkt leuk, maar ik ben bang voor dat internetgedoe. Wat als die verbinding weer eens uitvalt? Gebruiker: TechLover123 Ja, dat is een goed punt, OldSchoolViewer. Maar ik denk dat als je een goede verbinding hebt, het wel goed moet komen! Misschien dat ik het ooit eens probeer. Gebruiker: HBOlover Een tipje: zorg ervoor dat je internet snel genoeg is! Ik heb ooit IPTV geprobeerd en dat was een drama omdat mijn verbinding te traag was. Had ik dat maar eerder geweten. Gebruiker: StreamGuru Klopt, HBOlover! Een goede snelheid is echt belangrijk. Als je veel tegelijk streamt of met meerdere apparaten verbonden bent, heb je een snellere verbinding nodig. Anderen hebben daar ook ervaring mee? Gebruiker: FreshTechie Ja! Ik heb een glasvezelverbinding en dat maakt een wereld van verschil! Geen buffering meer, gewoon plezier. Gebruiker: OldSchoolViewer Misschien moet ik toch eens naar glasvezel kijken. Wie weet, de toekomst gaat misschien echt die kant op! Lees het volledige bericht hier
    • gamer12
      Waarom zou ik een VPN gebruiken voor Steam en hoe werkt dat eigenlijk?

      Door gamer12 · Geplaatst

      Forumdiscussie: Waarom zou ik een VPN gebruiken voor Steam en hoe werkt dat eigenlijk? GamePeter Hey allemaal, ik heb een vraagje! Ik hoorde laatst van een vriend dat je een VPN kan gebruiken voor Steam. Maar waarom zou ik dat eigenlijk doen? En hoe werkt zo’n ding? Ik snap er niet zoveel van. Iemand die me dat kan uitleggen? TechGuru87 Hey GamePeter, goede vraag! Een VPN (Virtual Private Network) is eigenlijk een soort ’tunnel’ die je internetverbinding beveiligd. Als je Steam gebruikt via een VPN, lijkt het alsof je je locatie verbergt. Dit kan een paar voordelen hebben: Toegang tot Regionale Inhoud: Sommige games zijn in bepaalde landen goedkoper of zelfs niet beschikbaar. Met een VPN kun je je laten passen alsof je in dat land bent, zodat je die games kunt kopen of spelen. Privacy: Een VPN verbergt je echte IP-adres, wat betekent dat je internetverkeer niet te volgen is. Handig als je je zorgen maakt over privacy. Voorkomen van Ddos-aanvallen: Als iemand probeert je verbinding te verstoren tijdens het gamen (wat jammer genoeg soms gebeurt), kan een VPN helpen om dat te voorkomen. Zo werkt het in het kort: je installeert een VPN-programma op je computer of console, kiest een server in het land waar je wilt zijn, en vervolgens verbind je met die server. Het feit dat het zo snel en eenvoudig is, maakt het erg toegankelijk voor gamers. Hopelijk helpt dit je verder! Als je nog meer vragen hebt, vraag gerust! NinaSwitch Wow, dat klinkt wel handig! Maar is het ook legaal om dat te doen? TechGuru87 Ja, het gebruik van een VPN is legaal in de meeste landen. Echter, het is belangrijk om de gebruiksvoorwaarden van Steam of de specifieke game die je wilt spelen te checken. Sommige bedrijven zijn niet blij met VPN-gebruik en je kan risico lopen op een ban. Dus altijd goed om dat even te lezen! MarioFan99 Ik gebruik zelf al een tijdje een VPN en ik vind het super chill. Soms krijg je echt kortingen op games als je bijvoorbeeld je locatie wisselt naar een ander land. GamePeter Thanks voor de uitleg, TechGuru87! Best wel interessant. Maar kun je een VPN ook gebruiken als je gewoon games streamt? GameMaster88 Ja, dat kan zeker! Maar let op, sommige streamplatformen zien je misschien als een verdachte gebruiker als je met een VPN streamt. Het kan dus zijn dat je daar ook een waarschuwing voor krijgt. Gewoon voorzichtig zijn! ChillDude42 Ik heb een tijdje een VPN geprobeerd, maar ik merkte dat sommige spellen langzamer werden. Komt dat vaak voor? TechGuru87 Ja, dat kan inderdaad gebeuren! Het ligt aan de VPN-provider en welke server je kiest. Als je verbinding hebt met een server die ver weg is, kan het je snelheid beïnvloeden. Kies dan een server die dichter bij je is voor betere prestaties. NinaSwitch Dat zou het dus kunnen zijn. Ik heb een paar keer met een VPN gecheckt en het was wel trager, maar sommige games had ik echt korting op! GamePeter Geweldig, bedankt voor alle info! Ik denk dat ik het maar eens ga uitproberen. Moet ik alleen opletten bij het kiezen van een VPN-provider? TechGuru87 Zeker! Kijk naar een betrouwbare provider met goede recensies. En let op dat ze geen logs bijhouden van je activiteiten. Het is ook handig om een proefperiode te hebben zodat je het eerst kan uitproberen. Veel succes! MarioFan99 Laat ons weten hoe het gaat, GamePeter! ChillDude42 Ja, ben benieuwd of je inderdaad de kortingen vindt! Succes! Lees het volledige bericht hier
    • filmkijken
      Wat zijn jouw beste tips voor een perfecte binge-watch avond?

      Door filmkijken · Geplaatst

      Onderwerp: Wat zijn jouw beste tips voor een perfecte binge-watch avond? SmurfFan88: Hey allemaal! Ik heb een retro binge-watch avond gepland en wil wat tips vragen! Wat zijn jullie beste ideeën om het gezellig te maken? Denk aan snacks, drankjes, en misschien ook hoe je het beste kunt kiezen wat te kijken. Ik ben benieuwd naar jullie tips! BingeBoss99: Hey SmurfFan88! Wat leuk dat je een binge-watch avond plant! Hier zijn mijn tips: Comfortabele opstelling: Zorg voor een lekkere bank of stoelen, met voldoende kussens en dekens. Het moet super comfy zijn! Snack-tijd: Ga voor een mix van zoete en hartige snacks. Popcorn is altijd een must, maar probeer ook wat dips met groente of nacho’s. Voeg er een paar lekkernijen like chocolade of koekjes aan toe voor die zoete cravings! Drinks: Maak het speciaal met een lekkere drankje. Een lekkere zelfgemaakte ijsthee of een frisdrank met een schijfje citroen doet wonderen. Voor de volwassen kijkers, probeer een paar cocktails! Kijklijst: Maak een lijstje van series of films die je wil zien. Het helpt om voorbereid te zijn. Kies iets van verschillende genres zodat je niet verveeld raakt. En als je met vrienden kijkt, stem samen over wat je kijkt! Sfeer: Dim de lichten en maak het gezellig met wat kaarsen of een neutrale lamp. De juiste sfeer maakt het nog specialer. Ik hoop dat je hier iets mee kan! Als je nog vragen hebt, laat maar weten! Veel kijkplezier! Kijkgek123: Goede tips BingeBoss99! Ik voeg altijd een marathonthema toe aan mijn avonden. Bijvoorbeeld, alleen sci-fi films of trashy romcoms. Dat maakt het zo leuk! Je kunt ook wat trivia bedenken over de films of series die je kijkt. Lekker lachen om wat weetjes. EbookLezer: Leuk idee, Kijkgek123! Maar ik vind het soms moeilijk om keuzes te maken. Heb je een goed voorbeeld van een ‘thema’ dat goed werkt? Vind dat altijd wat spannend. En ik ben dol op trivia! BingeBoss99: Dat van die thema’s is echt cool, Kijkgek123! Een idee voor een thema kan zijn “jaren ’80 classics” of “de beste superheldenfilms”. Of je kan gewoon een serie pakken en de films die daarop gebaseerd zijn. Dan heb je een hele avond vol variatie! En voor trivia kan je vragen over acteurs, plot twists of fouten in films gebruiken. Dat maakt het interactief! FilmFanatic88: Ik moet echt zeggen, snacks zijn key! Ik maak vaak mijn eigen pizza’s voor een binge-watch. Dat is echt leuk om te doen en je kunt ze vullen met alles wat je wilt! CosmicDude: Haha, die pizza tips zijn perfect, FilmFanatic88! Zelfgemaakt is altijd beter! Ik zorg er ook voor dat ik voldoende water drink. Het kan makkelijk vergeten worden met al die snacks. Je wil niet dat je uitdroogt tijdens die spannende scenes, haha! EbookLezer: Dat is echt waar, CosmicDude! Water is inderdaad zo belangrijk! En zelfgemaakte pizza klinkt geweldig; misschien moet ik dat ook maar eens proberen. SmurfFan88: Thanks allemaal! Superleuke tips! Ik ga zeker ook wat trivia voorbereiden. En pizza klinkt echt als een win! Sophie_Series: Ik kom hier helemaal in de binge-watch mood! Ik vind het altijd leuk om een serie met mijn vrienden te kijken en dan elke aflevering te discussiëren na afloop. Verhoogt de spanning! Kijkgek123: Ja, dat is echt leuk, Sophie_Series! Altijd leuk om te horen wat anderen ervan vinden! Net als een mini-boekclub maar dan voor series! Dit gevoelige topic zorgt voor een levendige discussie! Hopelijk inspireert dit je om je eigen binge-watch avond perfect te maken! Lees het volledige bericht hier

  • Recente prestatie

    • 2 jaar actief
      Jason93
      Jason93 heeft zojuist een badge verdient
      2 jaar actief

  • Recente actieve topics

  • Populaire bijdragers

    Deze week heeft niemand nog waardering gekregen.

  • Willekeurige films

  • Willekeurige link

×
×
  • Nieuwe aanmaken...