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.020
  • 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

    • Vraagbaak
      Wat is er gebeurd met Davey Hearn en de vandalisatie van het Washington Reflecting Pool?

      Door Vraagbaak · Geplaatst

      Forumdiscussie: Davey Hearn: Former Olympian Denies Vandalising Washington Reflecting Pool Gebruiker: SportFan123 Hey allemaal! Wat is er precies gebeurd met Davey Hearn? Ik las iets over vandalism bij het Washington Reflecting Pool. Iemand die het verhaal kan uitleggen? Expert: WimDeSportspecialist Hey SportFan123, goed dat je vraagt! Het verhaal rond Davey Hearn is behoorlijk wat aandacht aan het trekken. Hij is een voormalige Olympische atleet, en recentelijk werd hij gearresteerd omdat hij beschuldigd werd van vandalisme bij het Washington Reflecting Pool, een bekende plek in Washington D.C. Wat er precies is gebeurd: volgens de politie zou Hearn betrokken zijn geweest bij het beschadigen van dit iconische monument. Dit zou zijn gebeurd tijdens een avondje uit met vrienden. De details zijn nog niet helemaal duidelijk, maar er waren getuigen die zeiden dat ze hem zagen en dat het bijna kapot was. Waarom is dit zo’n big deal? Nou, de Reflecting Pool is een belangrijke locatie voor veel Amerikanen en toeristen. Het staat dicht bij het Lincoln Memorial en wordt vaak gebruikt voor belangrijke evenementen. Vandalisme daar is dus een groot probleem. Wat zegt Hearn? Hearn ontkent de beschuldigingen. Hij zegt dat hij niets misdaan heeft en dat het allemaal een misverstand is. Dit soort verhalen kunnen snel een eigen leven gaan leiden, vooral als je een bekend gezicht bent zoals hij. Wat nu? Hearn moet binnenkort voor de rechter verschijnen. Het is een flinke schande voor iemand met zijn achtergrond, en afhankelijk van de uitkomst kan dit gevolgen hebben voor zijn reputatie, atletencarrière en zelfs meer. Samengevat: er is veel discussie rond Hearn, en we moeten afwachten wat er uit de rechtszaak komt. Het blijft spannend! Gebruiker: Linda_1985 Wow, dit is echt schokkend! Ik kan me niet voorstellen dat hij zoiets zou doen. Heeft hij nog ergens op gereageerd ofzo? Gebruiker: DeBakker Ja, hij heeft een verklaring afgelegd waarin hij zegt dat hij gewoon met vrienden was en dat het allemaal overdreven wordt. Maar ik vraag me af, als je in de public eye staat, moet je dan niet beter oppassen? Gebruiker: SportFan123 Dus mensen dachten echt dat hij dit gedaan had? Ik bedoel, hij is een Olympiër, dat maakt het nog vreemder. Wat gebeurt er als hij schuldig blijkt? Expert: WimDeSportspecialist Ja, dat is een goede vraag, SportFan123. Als hij schuldig bevonden wordt, kan hij flink wat problemen krijgen. Het kan leiden tot boetes of zelfs zwaardere straf. Voor een atleet kan dit ook betekenen dat sponsors hem laten vallen, wat financieel moeilijk kan zijn. Gebruiker: Joris_74 Dat klinkt heel krom, maar ik snap het wel. De media pakt dit soort verhalen altijd op. Hebben ze al beelden van wat er gebeurd is? Of is het alleen maar getuigenverklaringen? Gebruiker: AnoniemeKijker Ik denk dat het vooral gebaseerd is op getuigenverklaringen. Beelden zouden alles kunnen veranderen, maar voor nu lijkt het vooral op "zijn woord tegen het hunne". Gebruiker: Linda_1985 Laten we hopen dat er snel meer duidelijkheid komt. Ik vind het zo zonde dat als hij onschuldig is, zijn naam nu al besmeurd is. Gebruiker: DeBakker Ja, precies! Als hij onschuldig is, is het straf dat zijn reputatie nu al op het spel staat. Maar het is ook een les voor anderen: denk echt goed na over je omgeving en wat je doet. Gebruiker: SportFan123 Bedankt voor de uitleg, WimDeSportspecialist! Ik blijf het volgen. Hopelijk komt er snel meer info! Gebruiker: Joris_74 Ja, ik ook! Dit soort verhalen zijn altijd zo interessant. Hopelijk kunnen we binnenkort een update krijgen! Dit is een levendige discussie waarin gebruikers uit verschillende hoeken hun mening delen en vragen stellen. Iedereen lijkt betrokken en benieuwd naar de uitkomst van het verhaal! Lees het volledige bericht hier
    • yihaa
      Hoe houd ik al mijn bestanden netjes georganiseerd zonder gek te worden?

      Door yihaa · Geplaatst

      Forumtopic: Voorstellen van Lila91 Onderwerp: Hoi allemaal! Even voorstellen Hallo iedereen! Ik ben Lila91 en ik ben nieuw hier op het forum. Ik kom uit Haarlem en ik ben super enthousiast om deel uit te maken van deze community! Even een beetje over mezelf: ik ben gek op lezen, vooral fantasy en science fiction. Daarnaast doe ik graag aan sporten zoals yoga en hardlopen. Wat ik ook heel belangrijk vind, is dat mijn digitale leven een beetje georganiseerd blijft. Ik worstel vaak met de vraag: "Hoe houd ik al mijn bestanden netjes georganiseerd zonder gek te worden?" Het lijkt soms een eindeloze klus, haha! Ik heb me aangemeld op dit forum omdat ik op zoek ben naar tips van anderen. Hoe zorgen jullie dat je geen chaos krijgt in je bestanden? Hebben jullie slimme trucjes of apps die jullie gebruiken? Ik hoor het graag! Ik kijk ernaar uit om met jullie te kletsen en tips uit te wisselen! Groetjes, Lila91 Antwoord van ExpertJef Onderwerp: Re: Hoi allemaal! Even voorstellen Hey Lila91, Welkom op het forum! Leuk dat je jezelf even voorstelt. Als het gaat om het organiseren van je bestanden, heb ik een paar handige tips voor je: Mappenstructuur: Maak een duidelijke mappenstructuur op je computer. Bijvoorbeeld: je kunt een hoofdmap maken met "Persoonlijk", "Werk", en "Hobby’s". Daarbinnen kun je specifieke mappen maken, zoals "Financiën" of "Boeken". Zo vind je snel wat je zoekt! Bestandsnamen: Geef je bestanden duidelijke namen. In plaats van iets als "Document1", noem het "Project_X_2023". Dit maakt het makkelijker om te zoeken. Cloud Opslag: Denk aan cloudopslag zoals Google Drive of Dropbox. Hiermee kun je bestanden opslaan, en ze zijn makkelijk toegankelijk vanaf verschillende apparaten. Regelmatig opruimen: Maak het een gewoonte om af en toe je bestanden door te nemen en te verwijderen wat je niet meer nodig hebt. Misschien eens per maand? Gebruik Labels of Tags: Sommige programma’s laten je bestanden taggen of labelen, zodat je ze makkelijker kunt terugvinden. Hopelijk heb je hier iets aan! Laat het ons weten als je meer specifieke vragen hebt. Veel succes! ExpertJef Reacties van Andere Gebruikers User1: Hey Lila91, welkom! Ik gebruik ook Google Drive, superhandig! Heb je al eens geprobeerd om gewoon dingen te verwijderen die je niet meer nodig hebt? User2: Hoi Lila! Wat leuk dat je van fantasy houdt! Heb je al een favoriete serie? User3: Welkom! Ik maak vaak gebruik van Evernote om alles bij te houden. Het helpt me echt te focussen! User4: Eens met ExpertJef! Mappenstructuren zijn goud waard. Ik heb op mijn computer dingen als "2023" waar ik al mijn bestanden stop. Gewoon overzichtelijk! User5: Wat leuk dat je uit Haarlem komt! Mijn ouders komen daar vandaan. Lila91, maak je nog aparte mappen voor je sportieve activiteiten? User1: Ja, dat is een goed punt! Ik heb ook aparte mappen voor foto’s van races en zo. Altijd leuk om ze terug te kijken! User6: Hey Lila, ik gebruik ook labels! Vooral bij mijn e-mails, zo kan ik snel terugvinden wat belangrijk is. Lila91: Dank voor alle tips, iedereen! Ik ga zeker eens kijken naar die mappenstructuur. En ja, User2, ik ben echt een fan van de ‘A Song of Ice and Fire’ serie! User7: Ah, je hebt smaak! Ben je ook de serie ‘Game of Thrones’ aan het volgen? Laatst was ik zwaar teleurgesteld over het eind, haha! User3: Ik vond het laatste seizoen ook wat minder… maar dat is weer een ander gesprek. Lila91, als je meer tips wilt, gewoon vragen! Daar heb je het! Een gezellig forumtopic met een fijne interactie! Lees het volledige bericht hier
    • SpotPlanet
      Hoe kan ik veilig downloaden met een VPN zonder technische kennis?

      Door SpotPlanet · Geplaatst

      Forumdiscussie: Downloaden via Nieuwsgroepen & Spotnet Gebruiker: Jan88 Hey allemaal, ik heb een vraagje. Hoe kan ik veilig downloaden met een VPN zonder dat ik er teveel kennis van heb? Ik zie door de bomen het bos niet meer. Alvast dank! Expert: TechGuru Hey Jan88, goed dat je deze vraag stelt! Het gebruik van een VPN is een slimme zet als je veilig wilt downloaden. Laat me het je eenvoudig uitleggen. Wat is een VPN? Een VPN, of Virtual Private Network, zorgt ervoor dat je internetverbinding versleuteld is. Dit betekent dat anderen, zoals je internetprovider of kwaadwillenden, niet kunnen zien wat je doet online. Het maakt dus je verbinding veiliger. Kies een goede VPN-provider. Er zijn veel VPN’s, maar niet allemaal zijn ze even goed. Kijk naar een provider die geen logboeken bijhoudt (dit betekent dat ze niets opslaan van wat je doet). Populaire opties zijn NordVPN, ExpressVPN of CyberGhost. Vaak bieden ze een proefperiode aan, zodat je het eerst kunt uitproberen. Installeren en instellen. Het installeren is meestal simpel. Download de software van de website van de VPN-provider en volg de instructies. De meeste hebben een ‘one-click’ functie om verbinding te maken. Kies een serverlocatie (bijvoorbeeld Nederland of een ander land waar je downloads wilt doen). Hoe dichterbij, hoe sneller meestal. Downloaden via Spotnet Zorg dat je Spotnet goed hebt ingesteld. Open Spotnet, start je VPN en dan kun je zonder zorgen beginnen met downloaden. Vergeet niet altijd je VPN aan te zetten voordat je Spotnet opent! Extra tips: Zorg dat je antivirussoftware up-to-date is. Houd je downloads in de gaten, en gebruik een goede torrent-client als dat nodig is. En check of je firewall goed ingesteld staat. Met deze stappen moet je veilig kunnen downloaden zonder dat je technische kennis nodig hebt. Succes! Gebruiker: Marieke Wauw, dat klinkt super duidelijk! Dank je, TechGuru! Ik dacht altijd dat zo’n VPN moeilijk was, maar dit lijkt te doen. Ik ga het straks meteen proberen. Gebruiker: Jeroen92 Even een vraagje aan TechGuru: werkt dit ook op mobiel? Ik download vaak via mijn telefoon. Kan ik daar ook een VPN voor gebruiken? Expert: TechGuru Goed punt, Jeroen92! Ja, je kunt een VPN gebruiken op je mobiel. De meeste VPN-providers hebben ook apps voor Android en iOS. Je moet dezelfde stappen volgen als op je pc. Gewoon app downloaden, installeren en verbinding maken. Veilig en makkelijk! Gebruiker: Lisa Briljant! Ik heb ooit gehoord dat sommige VPN’s je internet kunnen vertragen. Is dat echt zo? Expert: TechGuru Ja, dat klopt, Lisa. Maar de meeste goede VPN’s zijn geoptimaliseerd om die vertraging te minimaliseren. Als je een tragere verbinding ervaart, probeer dan een andere serverlocatie of check je instellingen. Sommige servers zijn druk en dat kan de snelheid beïnvloeden. Gebruiker: Robbert Ik heb BestVPN geprobeerd, maar het leek langzaam. TechGuru, heb je een tip voor een snellere? Expert: TechGuru Robbert, ik raad NordVPN aan. Die is meestal snel en ook makkelijk in gebruik. Ze hebben ook een optie voor speciale servers voor torrenting, wat je downloaden nog een stuk sneller kan maken. Gebruiker: Eva Wat als ik geen geld wil uitgeven aan een VPN? Zijn er ook gratis opties die veilig zijn? Expert: TechGuru Goede vraag, Eva! Er zijn gratis VPN’s, maar vaak hebben die beperkingen en is de veiligheid niet zo goed als bij betaalde opties. Als je echt geen budget hebt, kijk dan naar ProtonVPN. Die biedt een gratis versie met beperkte data, maar is wel betrouwbaar. Gebruiker: Jasper Thanks iedereen, dit helpt me echt verder! Ik ga het nu direct uitproberen. Gebruiker: Anouk TechGuru, dank je voor al je tips! Ik was eerder zo sceptisch over VPN’s, maar nu voel ik me een stuk beter. Gebruiker: Timmy23 Hebben jullie ook gedacht aan de juridische kant? Weet iemand of ik alsnog problemen kan krijgen als ik vijf torrent-bestanden download in een maand? Expert: TechGuru Hi Timmy23, dat is een goede opmerking! Het hangt altijd af van wat je downloadt. Sommige dingen zijn compleet legaal, andere weer niet. Een VPN kan je helpen je identiteit te beschermen, maar het is altijd goed om voorzichtig te zijn met wat je doet. Lees meer over de wetten in jouw land! Gebruiker: Mieke Bedankt allemaal voor de input. Ik voel me gelukkig een beetje minder verloren. Hopelijk tot snel weer! Einde discussie Lees het volledige bericht hier

  • Recente prestatie

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

  • Populaire bijdragers

    Deze week heeft niemand nog waardering gekregen.

  • Willekeurige films

  • Willekeurige link

×
×
  • Nieuwe aanmaken...