Hoi jobovdijke,
Even vanaf de zijlijn wat opmerkingen.
Leuk dat je zelf een site in elkaar wilt draaien met van alles erop en eraan! :thumb:
Met wat je tot nu toe gemaakt hebt, komt op het scherm wat je bedoeld zal hebben.
Toch zitten er wat probleempjes in.
Het is altijd verstandig om een gemaakte pagina even te laten controleren door de html-validator. Die controleert of alle html correct is. Daarvoor hoeft een pagina niet online te staan, het kan ook met een pagina die nog alleen lokaal op je pc staat:
validator.w3.org/#validate_by_upload.
Ik heb je code even online gezet ...
... en 'm laten testen door de html-validator.
16 code-regels, en 15 dingen die verbeterd moeten worden: hoei!
Wat is er aan de hand? Nog even je code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><FONT face color="blue"><small>UPDATE : 1.0 </small></FONT>
<title>jvd-games</title>
</head>
<body bgcolor="grey">
<ul>
<li><a href="games.htm"><FONT color="blue">games</FONT></a></li><li><a href="tuts.htm"><FONT color="blue">tuts</FONT></a></li>
</ul>
<center><FONT face="verdana" color="blue"><h1>jvd-games</h1></FONT></center>
</body><center><FONT face="verdana" color="blue"><h2>de enige echte computer site</h2></FONT</center>
<center><FONT face="verdana" color="blue"><h3>welkom op jvd-games de site met tuts en games</h3></FONT></center
<br>
<hr size="3" width="100%" color="blue">
</script>
</html>
De opmerkingen:
- Het "Doctype" is niet helemaal compleet, daar hoort nog wat achter.
- Er staat een regel pagina-tekst in de <head>. Dat mag niet, alle pagina-tekst hoort bnnen de <body>...</body>.
- Er mist in de <head> een regel met de "charset", dat is hoe de browser de lettertekens moet gaan interpreteren die in de code staan.
- In regel 4 mist er een waarde voor de face-eigenschap.
- In regel 12 eindigt de </body>, maar daarna komt nog pagina-tekst: ook verboden.
- Regel 13 eindigt met </center zonder afsluitend haakje: </center>.
- In regel 16 staat </script>, maar er nergens daarvoor een openingstag <script> (en er is ook geen script op de pagina te zien).
- Ook is het een goede gewoonte om in de code netjes in te springen, zodat je goed kunt zien waar iets begint en eindigt.
Als we de opmerkingen verwerken, komt er uit:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test 2 :: jvd-games</title>
</head>
<body bgcolor="grey">
<FONT color="blue"><small>UPDATE : 1.0 </small></FONT>
<ul>
<li><a href="games.htm"><FONT color="blue">games</FONT></a></li>
<li><a href="tuts.htm"><FONT color="blue">tuts</FONT></a></li>
</ul>
<center><h1><FONT face="verdana" color="blue">jvd-games</FONT></h1></center>
<center><h2><FONT face="verdana" color="blue">de enige echte computer site</FONT></h2></center>
<center><h3><FONT face="verdana" color="blue">welkom op jvd-games de site met tuts en games</FONT></h3></center>
<br>
<hr size="3" width="100%" style="color: blue;">
</body>
</html>
Maar ... dit is het begin, wij gaan door met de strijd!
Want het is nu wel correcte html4.01 van het type "Transitional", het type "Transitional" zelf is een verouderd type!
Niet een beetje verouderd, maar nogal heel erg: het dateert van 1999. En het was toen alleen maar bedoeld voor de toen in omloop zijnde oude websites (die anders in nieuwere browsers niet goed te zien zouden zijn). Al vanaf 1999 vond w3c (zeg maar: de baas van internet, die alle standaarden vastlegt), dat je voor nieuwe sites geen "Transitional" zou moeten gebruiken, maar de "Strict" versie.
Deze "Strict" versie is strenger; veel dingen die nog met "Transitional" mochten, mogen nu niet meer, bv.:
- de tags <FONT> en <center>,
- de eigenschap bgcolor="...",
- enz.
Dit zijn allemaal opmaak-dingen, die niet gemengd horen te worden met de html-code. De opmaak hoort gescheiden te zijn: daar is CSS voor (Cascade Style Sheets).
Even later kwam ook "xhtml1.0" uit, dat is een versie van html waarin ook voor de html zelf wat strengere regels werden ingevoerd.
Passen we dit allemaal toe, dan wordt het zoiets:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test 3 :: jvd-games</title>
<style type="text/css">
body {
background: grey;
color: blue;
}
#linkerkolom {
position: absolute;
}
.klein {
font-size: .8em;
}
a {
color: blue;
}
h1, h2, h3 {
font-family: verdana, sans-serif;
text-align: center;
}
h3 {
padding-bottom: 25px;
border-bottom: 3px solid blue;
}
hr {
color: blue;
}
</style>
</head>
<body>
<div id="linkerkolom">
<span class="klein">UPDATE : 1.0</span>
<ul>
<li><a href="games.htm">games</a></li>
<li><a href="tuts.htm">tuts</a></li>
</ul>
</div>
<h1>jvd-games</h1>
<h2>de enige echte computer site</h2>
<h3>welkom op jvd-games de site met tuts en games</h3>
</body>
</html>
Je ziet: in de html-code van de <body> staat niets meer over de opmaak.
Alle opmaak zit in een stijl-blok met css in de <head>.
Tenslotte kan er ook nog een "jobo-best.htm" gemaakt worden. Daarin is dan het stijlblok uit de <head> weggehaald, en ondergebracht in een apart css-bestandje. Dit kan dan meteen gebruikt worden voor alle andere pagina's van de site.
===========
Al met al:
Eigenlijk denk ik (als ik je code zo zie), dat je het beste eerst nog wat meer studie kunt maken van goede html en css, voordat je aan dingen als inlogsystemen met PHP en databases gaat denken. Die vallen meer onder "Geavanceerd", en dat is wat lastig als je de basis nog niet zo goed beheerst.
Succes!
Met vriendelijke groet,
CSShunter
