De nieuwe wereld van HTML5
@George, heb je al eens in je eigen broncode gekeken? Alles staat door elkaar, een nieuwe doctype + head opeens in het body element...
Inderdaad, er staan 3 complete HTML pagina's na elkaar...
Andre Sep op 24/01/2012 11:49:06:
@Frank
Ik ben het met je eens wat didactiek betreft, maar om te zeggen dat het geen fouten zijn is kort door de bocht. Ze raden je zaken aan met aanbevelingen en voorbeelden die gewoon NIET WAAR zijn op basis van argumenten die ze ofwel zelf verzinnen ofwel argumenten die niet van toepassing zijn op dat specifieke voorbeeld.
Ik ben het met je eens wat didactiek betreft, maar om te zeggen dat het geen fouten zijn is kort door de bocht. Ze raden je zaken aan met aanbevelingen en voorbeelden die gewoon NIET WAAR zijn op basis van argumenten die ze ofwel zelf verzinnen ofwel argumenten die niet van toepassing zijn op dat specifieke voorbeeld.
Dat zal best, André, maar feit blijft dat geen der fouten als fataal bestempeld kan worden (ik heb niet gezegd dat het geen fouten zijn), en dat het aantal fouten in het niet valt bij de gigantische omvang van W3 Schools.
Die HTML-codes van 3 pagina's worden veroozaakt door twee keer een include-opdracht vanuit mijn index.php.
Een include is niet hetzelfde als een iframe. Bij een include wordt de pagina opgevraagd door een browser aan een server. De server ziet vervolgens de include en haalt de content van het include-bestand op. Deze content plaatst hij op de plek waar de include staat en vervolgens verzend hij dus 1 pagina terug naar de browser. Het browser wil maar 1 doctype, 1 head en 1 body tag zien. Dus deze moet je in de include-bestanden niet plaatsen.
Een iframe werkt anders. Een browser vraagt een pagina op van de server. De server zendt de pagina terug. Nu komt het browser erachter dat er een iframe in de code zit, vervolgens haalt hij die pagina ook op en plaatst die in het iframe. Doordat een browser hier 2 pagina's ophaalt verwacht hij ook dat beide pagina's een doctype, head en body hebben.
Ome Ko op 24/01/2012 15:02:45:
Ja inderdaad, Andre. Tabellen zijn ontzettend handig en geven NOOIT crossbrowser gezeik. En het blijft gewoon werken, browserversie na browserversie! Het scheelt zoveel tijd en ergenis, nooit zeurende klanten, en nooit ergenis omdat je weer eens in die kutcss-en te hoeven duiken omdat goegel met een nieuwe browser komt.
HTML5 kost alleen maar geld, terwijl HTML1.1 geld oplevert.
Het staat best heel interessant, dat HTML5 en tablelessdesign, maar het is businesswise gewoon ontzettend onnozel omdat het moeilijk doen is waar het makkelijk kan.
HTML5 kost alleen maar geld, terwijl HTML1.1 geld oplevert.
Het staat best heel interessant, dat HTML5 en tablelessdesign, maar het is businesswise gewoon ontzettend onnozel omdat het moeilijk doen is waar het makkelijk kan.
Ome Ko,
Jij bouwt zeker ook op elke pagina nog een navmenu in, zodat als je de site wilt veranderen ook weer al die menu's moet gaan veranderen? In ieder geval moet je dat wel met de rest van je pagina's als je nog steeds tabellen gebruikt. En probeer dit eens te maken met een tabel en een overzichtelijke, intuïtieve code, waar je klanten recht op hebben:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#header {
height: 20%;
background: yellow;
}
#navigation {
float: left;
height: 80%;
width: 20%;
background: orange;
}
#subheader {
float: left;
height: 5%;
width: 80%;
background: black;
color: white;
}
#content {
float: left;
height: 75%;
width: 60%;
background: lime;
}
#side {
float: left;
height: 75%;
width: 20%;
background: pink;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="subheader">Subheader</div>
<div id="content">Content</div>
<div id="side">Side</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#header {
height: 20%;
background: yellow;
}
#navigation {
float: left;
height: 80%;
width: 20%;
background: orange;
}
#subheader {
float: left;
height: 5%;
width: 80%;
background: black;
color: white;
}
#content {
float: left;
height: 75%;
width: 60%;
background: lime;
}
#side {
float: left;
height: 75%;
width: 20%;
background: pink;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="navigation">Navigation</div>
<div id="subheader">Subheader</div>
<div id="content">Content</div>
<div id="side">Side</div>
</body>
</html>
Gewijzigd op 25/01/2012 19:16:50 door Frank C