Handleiding - Maak een (download) website | HTML, Structuur, CSS

Jeroen · December 8, 2013

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!

Duken · December 9, 2013

En weer zo een mooie handleiding!

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

Damn, your good!

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/

Aanmelden

Handleiding - Maak een (download) website | HTML, Structuur, CSS

Aanbevolen reactie

Link naar opmerking

Deel via andere websites

Top Posters In Dit Topic

Populaire dagen

Top Posters In Dit Topic

Populaire dagen

Populaire berichten

Jeroen

Link naar opmerking

Deel via andere websites

Doe je mee?

Vergelijkbare bijdragen

Wie zijn er online? 3 leden zijn actief

Mededelingen

Aanbevolen nieuws

Recent nieuwsbericht

Willekeurig topic

Nu op het forum

Recente prestatie

Recente actieve topics

Populaire bijdragers

Willekeurige films

Willekeurige link