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.234
  • Waardering:   2.930
  • Prestatiepunten:  24.957
  • 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

    • yihaa
      Wat maakt jou een echte anime fan en welke series kunnen niet ontbreken?

      Door yihaa · Geplaatst

      Forumtopic: Hallo allemaal! Geplaatst door: AnimeLover99 Hey allemaal! Ik ben net lid geworden van dit forum en wilde me even voorstellen! Ik ben 22 jaar en kom uit Amsterdam. Al sinds mijn kindertijd ben ik een huge anime fan. Wat me echt aanspreekt aan anime is de diepe verhalen en de unieke karakters. Ik kan zo genieten van de verschillende werelden die worden gecreëerd. De series die voor mij echt niet mogen ontbreken zijn Naruto, Attack on Titan en My Hero Academia. Ik vind het tof hoe ze thema’s behandelen zoals vriendschap, opoffering en groei. En wie kan de epische gevechten en de spannende plottwists vergeten, toch? Naast anime ben ik ook dol op gamen en manga lezen. Ik ben hier lid geworden omdat ik graag met andere fans wil praten en mijn favoriete series wil delen. Ook ben ik benieuwd naar wat jullie favoriete series zijn en waarom! Dus, wat zijn jullie aanraders voor nieuwe anime? Hopelijk leren we elkaar goed kennen! Groetjes! AnimeLover99 Reactie van: AnimeExpert123 Welkom, AnimeLover99! Leuk dat je hier bent! Je hebt een paar geweldige series genoemd! Naruto is voor veel mensen een echte klassieker. Het laat zien hoe belangrijk doorzettingsvermogen is en hoe vrienden je kunnen helpen groeien. De series die je noemt, zoals Attack on Titan, hebben echt een duistere maar intrigerende plot. Een aanrader van mij is Demon Slayer. Het heeft prachtige animation en een emotioneel verhaal over broederliefde. Ik vind het ook leuk dat je manga noemt! Het is een geweldige manier om meer verhalen van je favoriete series te ontdekken. Heb je al One Piece gelezen? Dat is ook een lange reeks maar écht de moeite waard! Voor nieuwe anime zou ik zeggen: kijk Jujutsu Kaisen. Het heeft een mix van actie en humor. Als je vragen hebt over specifieke series, laat het gerust weten! Reacties van andere leden: Reactie van: MangaFan88 Hey! Welkom! Demon Slayer is echt een aanrader, je moet het echt proberen! Reactie van: AnimeGeek77 Hallo AnimeLover99! Ik ben ook een grote fan van My Hero Academia! Wat vind je van de karakterontwikkeling daar? Ik vind het geweldig hoe ze allemaal hun eigen quirks leren beheersen! Reactie van: KawaiiBeans Hai! Leuk dat je hier bent! Zou je ooit zelf een anime willen maken? Ik vind dat altijd zo interessant om over na te denken! Reactie van: ChibiNerd Hey! Wat vind je van de muziek in anime? Ik denk dat het de sfeer zo erg kan maken. Ik heb laatst een concert van anime muziek bezocht, dat was super gaaf! Reactie van: SenpaiNoticed Welkom! De D&D aanpak van anime is best uniek. Heb je al Death Note gezien? Het heeft een super intrigend verhaal! Reactie van: OtakuMaster Heey! Wat een leuke hobby interesses! Heb je trouwens al Fate/Zero gekeken? Dat heeft zo’n goede verhaalstructuur en mooie graphics. Reactie van: ShonenKing Yo, je noemt Naruto, maar heb je ook Boruto gekeken? Veel mensen hebben gemengde gevoelens over die serie. Wat vind jij er van? Reactie van: AnimeLover99 Dank jullie allemaal voor de leuke reacties! Ik heb One Piece nog niet gelezen, maar dat komt zeker op mijn lijstje! En ik ben het eens met jullie, muziek in anime maakt echt een verschil. Wellicht ga ik ook eens naar een concert! En Boruto… tja, ik kijk het niet echt, ik ben stiekem een beetje nostalgisch over Naruto’s verhaal. Heb je nog tips voor andere series? Reactie van: AnimeExpert123 Ja, Boruto is anders, maar het heeft ook zijn charme, vooral als je van de oudere generatie houdt! En wat je tips betreft, probeer ook Mob Psycho 100; dat is echt een meesterwerk! Zo, een levendig en gezellig forumtopic! Lees het volledige bericht hier
    • SpotPlanet
      Hoe kan ik zelf mijn Par2-bestanden herstellen zonder technische kennis?

      Door SpotPlanet · Geplaatst

      Onderwerp: Hoe kan ik zelf mijn Par2-bestanden herstellen zonder technische kennis? Gebruiker123: Hey allemaal! Ik heb laatst wat bestanden gedownload via nieuwsgroepen en ik zie dat er Par2-bestanden bij zitten. Ik snap er helemaal niks van. Hoe kan ik die Par2-bestanden gebruiken om mijn downloads te herstellen? Ik ben echt geen techneut, dus als iemand simpele uitleg heeft, graag! ExpertFred: Hey Gebruiker123! Geen zorgen, ik help je graag! Par2-bestanden zijn bedoeld om corrupte of incomplete bestanden te herstellen. Het mooie is dat je er niet veel technische kennis voor nodig hebt. Hier is een stap-voor-stap uitleg: Download een reparatietool: Er zijn verschillende programma’s beschikbaar, maar een populaire keuze is QuickPar. Je kunt het gratis downloaden. Installeer QuickPar: Gewoon de stappen volgen zoals bij elke andere software. Is echt simpel! Open QuickPar: Zodra je het hebt geopend, klik je op ‘Bestand’ en dan ‘Open’. Selecteer je Par2-bestand: Zoek het Par2-bestand dat je hebt gedownload en klik erop. QuickPar zal daarna automatisch kijken welke bestanden gerepareerd kunnen worden. Start de reparatie: Als QuickPar aangeeft dat er problemen zijn met je bestanden, klik dan op de knop ‘Herstel’. Het programma doet de rest! Denk eraan dat je dus ook de werkelijke bestanden (de .par2, .ovf, en andere gerelateerde bestanden) in de map hebt staan. Het is ook handig om te kijken of er genoeg Par2-bestanden zijn om de bestanden te herstellen, want als je weinig hebt, kan het zijn dat niet alles te repareren is. Als je ergens vastloopt, laat het me weten. Succes! Johan1980: Dus je hebt eigenlijk gewoon dat programma nodig? Dat klinkt best te doen, man! Bedankt voor de uitleg, ExpertFred! KarinGee: Ik heb ook QuickPar gebruikt! Heel handig inderdaad. Soms heeft het me echt geholpen als er iets mis was met mijn downloads. Gewoon niet vergeten dat je ook die andere bestanden nodig hebt! Gebruiker123: Bedankt voor de tips, iedereen! En dat programma, is dat ook veilig? Want ik laat liever niet zomaar van alles op m’n pc. ExpertFred: Goede vraag, Gebruiker123! QuickPar is over het algemeen veilig, maar zorg ervoor dat je het altijd van de officiële site downloadt. Dan komt het goed! Mike92: Ik gebruik zelf een ander programma, namelijk MultiPar. Het doet ongeveer hetzelfde, maar ik vind de interface ietsjes makkelijker. Kan ook veel verschillende par-bestanden tegelijk aan. Het is het proberen waard! KarinGee: MultiPar is ook goed! Maar ik heb het idee dat QuickPar gewoon iets bekender is. Zoals Mike al zegt, interface is heel belangrijk, vooral als je niet zo technisch bent. Gebruiker567: Paar weken terug had ik ook een probleem met Par2-bestanden. Ik had geen idee hoe te repareren. Dus ik huurde nog net geen IT-er in! Nu snap ik het een stuk beter. Focus je vooral op die uitleg van Fred, dat is gold. Johan1980: Haha, IT’er inhuren is misschien een beetje overkill Maar goed, je leert het zo wel snel. Ik ga ook MultiPar eens proberen, zien wat ik ervan vind! ExpertFred: @Johan1980, altijd goed om te experimenteren met verschillende software! Iedereen heeft zo zijn voorkeur, dat is niks mis mee. En als je hulp nodig hebt, vraag maar raak! Gebruiker123: Ik voel me al een stuk zekerder, bedankt allemaal! Ik ga het deze week eens proberen. Jullie zijn top! Lees het volledige bericht hier
    • Mandyyy
      Hoe kan ik de Grand Prix van Nederland in Zandvoort gratis en via VPN kijken?

      Door Mandyyy · Geplaatst

      MarkNL: Hey allemaal! Ik wil graag de Grand Prix van Nederland in Zandvoort kijken, maar ik ben op vakantie in het buitenland. Heeft iemand een idee hoe ik dit gratis kan doen? Vooral als je geen toegang hebt tot de officiële streams? Alvast bedankt! F1Fan88: Hoi Mark! Ik snap je struggle! Het is eigenlijk vrij simpel om de race te kijken met een VPN. Een VPN (Virtual Private Network) laat je je internetverbinding via een andere locatie lopen, zodat het lijkt alsof je daar bent. Dit helpt je toegang te krijgen tot streams die anders niet beschikbaar zijn in jouw regio. Mijn favoriete keuze is PIA VPN (Private Internet Access) omdat het super stabiel en snel is. Het werkt heel goed met Nederlandse en buitenlandse streams, en je kunt het makkelijk installeren op je laptop, smartphone, en zelfs op een smart TV! Om de Grand Prix te bekijken, kun je PIA gebruiken om je IP-adres naar Nederland te veranderen. Dan kun je gewoon de Nederlandse zenders of streamingdiensten zoals F1TV of Viaplay gebruiken. Eenwin-win dus! Als je meer vragen hebt, laat het weten! Veel kijkplezier! RacingJules: Goede tip, F1Fan88! Gebruik PIA zelf ook, vooral bij Viaplay en F1TV – echt topspul! Bobbert: Werkt PIA ook op smart TV? Of beperk je je daar tot je laptop? F1Fan88: Ja, het werkt ook op smart TV! Je kunt het op je router installeren, zodat al je apparaten via de VPN verbonden zijn. Of je kunt het direct op je smart TV zetten als je dat kan. VitesseFan: Maar waarom niet gewoon een gratis VPN? F1Fan88: Gratis VPN’s zijn vaak sloom en kunnen uitvallen tijdens de race. Ook is de privacy meestal een beetje twijfelachtig. PIA is betaalbaar en je krijgt echt waar voor je geld! LotteF1: Ik heb PIA laatst ook geprobeerd voor de race en ik was verrast door hoe goed het werkte! Super gemakkelijke installatie. RaceGuru: Let wel op dat je een stabiele internetverbinding hebt, anders gaat het streamen niet helemaal lekker. Speedy: Benieuwd, zijn er nog andere voordelen aan PIA behalve de snelheid? F1Fan88: Zeker! PIA heeft ook een kill switch, zodat je gegevens veilig zijn als de verbinding wegvalt. Plus, heel veel servers wereldwijd, zodat je echt snel verbinding kunt maken. MarkNL: Super dank voor de tips, iedereen! Ik ga PIA proberen. Hopelijk kan ik genieten van de race! Lees het volledige bericht hier

  • Recente prestatie

    • 3 jaar actief
      Imac
      Imac heeft zojuist een badge verdient
      3 jaar actief

  • Recente actieve topics

  • Populaire bijdragers

    Deze week heeft niemand nog waardering gekregen.

  • Willekeurige films

  • Willekeurige link

×
×
  • Nieuwe aanmaken...