OWN 439 - Web Met Boer
Welkom!
Welkom terug! Fijn dat je het weer wilt gaan lezen wat ik je vandaag ga leren. We gaan weer verder waar we gebleven waren natuurlijk, ik hoop dat jullie na deze les ook weer iets wijzer zijn geworden! Succes!
Wat nu?
Terug naar de code van vorige week:
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <title>Football Manager</title> </head> <body> <div> <h1>Football Manager</h1> </div> <div> <p>Welkom op mijn site over Football Manager</p> </div> <div> <span>Football Manager is een voetbalmanagerspel van de Britse computerspellenfabrikant Sports Interactive voor de PC, waarbij de speler in de huid kruipt van een manager van een bestaand team. De speler heeft leiding over de transfers, het elftal zelf, het trainingsschema en nog veel meer. Het spel ontstond nadat Championship Manager-ontwikkelaar Sports Interactive en software-uitgever Eidos Interactive in 2004 tot een breuk kwamen. Sports Interactive besloot vervolgens om een nieuwe voetbalmanagementserie te beginnen onder de naam Football Manager, terwijl Eidos de naam Championship Manager behield en zelf zijn eigen weg ging.</span> </div> </body> </html>
Ik heb mijn spel erin verwerkt, namelijk Football Manager. Ik vind het er zomaar saai uit zien dus ik wil iets aan de opmaak gaan doen. In eerste instantie moeten we zorgen dat hetgeen wat we willen stylen benaderbaar is. Dat doen we d.m.v. een id of een class. Het verschil is dat je een id maar één keer kunt gebruiken en een class meerdere malen op een element.
Hoe dan?
Heel simpel, neem het onderstaande over:
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <title>Football Manager</title> </head> <body> <div id="titel"> <h1>Football Manager</h1> </div> <div id="subtitel"> <p>Welkom op mijn site over Football Manager</p> </div> <div id="tekst"> <span>Football Manager is een voetbalmanagerspel van de Britse computerspellenfabrikant Sports Interactive voor de PC, waarbij de speler in de huid kruipt van een manager van een bestaand team. De speler heeft leiding over de transfers, het elftal zelf, het trainingsschema en nog veel meer. Het spel ontstond nadat Championship Manager-ontwikkelaar Sports Interactive en software-uitgever Eidos Interactive in 2004 tot een breuk kwamen. Sports Interactive besloot vervolgens om een nieuwe voetbalmanagementserie te beginnen onder de naam Football Manager, terwijl Eidos de naam Championship Manager behield en zelf zijn eigen weg ging.</span> </div> </body> </html>
Op deze wijze kan ik deze 3 blokjes heel makkelijk benaderen. We beginnen door de volgende code toe te voegen aan de head:
<style type="text/css"> </style>
En dat integreren wij zo:
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <title>Football Manager</title> <style type="text/css"> </style> </head> <body> <div id="titel"> <h1>Football Manager</h1> </div> <div id="subtitel"> <p>Welkom op mijn site over Football Manager</p> </div> <div id="tekst"> <span>Football Manager is een voetbalmanagerspel van de Britse computerspellenfabrikant Sports Interactive voor de PC, waarbij de speler in de huid kruipt van een manager van een bestaand team. De speler heeft leiding over de transfers, het elftal zelf, het trainingsschema en nog veel meer. Het spel ontstond nadat Championship Manager-ontwikkelaar Sports Interactive en software-uitgever Eidos Interactive in 2004 tot een breuk kwamen. Sports Interactive besloot vervolgens om een nieuwe voetbalmanagementserie te beginnen onder de naam Football Manager, terwijl Eidos de naam Championship Manager behield en zelf zijn eigen weg ging.</span> </div> </body> </html>
Nu zoom ik even in op alleen de style:
<style type="text/css"> </style>
We benaderen de id's als volgt:
<style type="text/css">
#titel{
}
#subtitel{
}
#tekst{
}
</style>
Om een ID te benaderen gebruik je dus een hashtag (#). Om een class te benaderen gebruik je een punt (.). Binnen de accolade's ({ }) gaan we de opmaak zetten.
Ik wil de titel namelijk de kleur groen hebben en in het midden van de pagina. Dat doen we als volgt:
<style type="text/css">
#titel{
color: green;
text-align: center;
}
#subtitel{
}
#tekst{
}
</style>
De subtitel wil ik er eigenlijk ook onder hebben. Maar wel met de rode kleur en ik wil eigenlijk de subtitel ook een andere lettertype geven. Dat doen we als volgt:
<style type="text/css">
#titel{
color: green;
text-align: center;
}
#subtitel{
color: red;
text-align: center;
font-family: cursive;
}
#tekst{
}
</style>
De lettertype verander je dus door het element font-family. Achter de dubbelepunt ( 
zet je de waarde daarvan. Dit keer wil ik de lettertype cursive ervoor gebruiken.
De tekst wil ik niet over de hele website hebben. En ik wil de tekst dikgedrukt. Ook wil ik de tekst een randje geven. Dat doen we als volgt:
<style type="text/css">
#titel{
color: green;
text-align: center;
}
#subtitel{
color: red;
text-align: center;
font-family: cursive;
}
#tekst{
width: 350px;
border: 2px solid #000;
text-align: center;
font-weight: bold;
}
</style>
Het enige waar in we vandaag bezig zijn geweest is in CSS. Later in deze cursus gaan we hiervoor een apart bestand aanmaken. Dat wordt ook wel dus een CSS bestand. Cascading Style Sheets zorgt puur voor de opmaak van je site. Als je alles goed hebt gevolgd vandaag komt er dit uit:
Met deze code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Football Manager</title>
<style type="text/css">
#titel{
color: green;
text-align: center;
}
#subtitel{
color: red;
text-align: center;
font-family: cursive;
}
#tekst{
width: 350px;
border: 2px solid #000;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="titel">
<h1>Football Manager</h1>
</div>
<div id="subtitel">
<p>Welkom op mijn site over Football Manager</p>
</div>
<div id="tekst">
<span>Football Manager is een voetbalmanagerspel van de Britse computerspellenfabrikant Sports Interactive voor de PC, waarbij de speler in de huid kruipt van een manager van een bestaand team. De speler heeft leiding over de transfers, het elftal zelf, het trainingsschema en nog veel meer. Het spel ontstond nadat Championship Manager-ontwikkelaar Sports Interactive en software-uitgever Eidos Interactive in 2004 tot een breuk kwamen. Sports Interactive besloot vervolgens om een nieuwe voetbalmanagementserie te beginnen onder de naam Football Manager, terwijl Eidos de naam Championship Manager behield en zelf zijn eigen weg ging.</span>
</div>
</body>
</html>
Wat deden we nou?
Wat we dus hebben gedaan is door middel van een ID ervoor gezorgd dat wij het blokje kunnen benaderen om style-elementen mee te geven. Later in de cursus gaan we dit dus via een ander bestand doen om het overzichtelijk te houden. Maar zo weten jullie al wel een beetje hoe CSS in elkaar zit.
Volgende keer!
Volgende les; een menu! We gaan een heel mooi menu bij onze site maken zodat hij makkelijk te navigeren wordt!
Hopelijk tot de volgende week, en als je vragen hebt stel ze dan gerust! Enné, laat je ook even weten of het gelukt is?
2 reacties
Recommended Comments