één bestand voor website en dan rest inlezen met parameter
Ik ben een beetje aan het spelen/prutsen met een website. Ik zou willen weten of ik juist bezig ben?
Ik heb dus een standaard pagina met een beetje divs voor titels kop menu enz. Alles werkt zoals ik wil maar is deze werkwijze correct?
Moet ik eventueel andere extensie dan txt gebruiken enz?
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE HTML >
<html lang="NL">
<head>
<title>
website titel
</title>
<style>
html, body {
height: 100%;
}
#divHeader{
height: 100px;
background-image: url("banner.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
}
#divContent{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
background-color: lightblue;
}
#divFooter, #divPush{
height: 100px; /*Push must be same height as Footer */
background-color: #41fa47;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
}
#divMenu {
background-color: red;
width: 150px;
float: left;
}
#divBody {
padding: 0 0 0 160px;
height: 100%;
}
</style>
</head>
<body>
<div id="divContent">
<div id="divHeader">
<!-- Geen tekst dit is een foto -->
</div>
<div id="divMenu">
<a href="index.php">Home</a><br>
<a href="index.php?page=clublokaal">Clublokaal</a><br>
<a href="index.php?page=fotopagina">Fotopagina</a><br>
<a href="index.php?page=modelbaan">Modelbaan</a> <br>
<a href="index.php?page=contact">Contact</a><br>
<a href="index.php?page=links">Links</a><br>
<a href="index.php?page=lidworden">Lid worden?</a><br><br>
<a href="/adressen">Leden lijst</a>
</div>
<div id="divBody">
<?php
if (isset($_GET['page'])){$pagina=$_GET['page'];}else{$pagina='home';}
$pagina .='.txt';
if ($fp = @fopen($pagina, 'r+'))
{
/* Lock log file from other scripts */
$locked = flock($fp, LOCK_EX);
/* Lock successful? */
if ($locked){$tekst=fread($fp, filesize($pagina));}
/* Release file lock and close file handle */
flock($fp, LOCK_UN);
fclose($fp);
echo $tekst;
}
else{echo 'Fout: Deze pagina werd niet gevonden';}
?>
<!-- <div id="divPush"></div> -->
</div>
<div id="divFooter">
© web.be<br>
Bedankt op onze site te bezoeken<br><br>
We hopen zo snel mogelijk een nieuwe site actief te hebben
</div>
</div>
</body>
</html>
<html lang="NL">
<head>
<title>
website titel
</title>
<style>
html, body {
height: 100%;
}
#divHeader{
height: 100px;
background-image: url("banner.jpg");
background-size:100% 100%;
background-repeat:no-repeat;
}
#divContent{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
background-color: lightblue;
}
#divFooter, #divPush{
height: 100px; /*Push must be same height as Footer */
background-color: #41fa47;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
}
#divMenu {
background-color: red;
width: 150px;
float: left;
}
#divBody {
padding: 0 0 0 160px;
height: 100%;
}
</style>
</head>
<body>
<div id="divContent">
<div id="divHeader">
<!-- Geen tekst dit is een foto -->
</div>
<div id="divMenu">
<a href="index.php">Home</a><br>
<a href="index.php?page=clublokaal">Clublokaal</a><br>
<a href="index.php?page=fotopagina">Fotopagina</a><br>
<a href="index.php?page=modelbaan">Modelbaan</a> <br>
<a href="index.php?page=contact">Contact</a><br>
<a href="index.php?page=links">Links</a><br>
<a href="index.php?page=lidworden">Lid worden?</a><br><br>
<a href="/adressen">Leden lijst</a>
</div>
<div id="divBody">
<?php
if (isset($_GET['page'])){$pagina=$_GET['page'];}else{$pagina='home';}
$pagina .='.txt';
if ($fp = @fopen($pagina, 'r+'))
{
/* Lock log file from other scripts */
$locked = flock($fp, LOCK_EX);
/* Lock successful? */
if ($locked){$tekst=fread($fp, filesize($pagina));}
/* Release file lock and close file handle */
flock($fp, LOCK_UN);
fclose($fp);
echo $tekst;
}
else{echo 'Fout: Deze pagina werd niet gevonden';}
?>
<!-- <div id="divPush"></div> -->
</div>
<div id="divFooter">
© web.be<br>
Bedankt op onze site te bezoeken<br><br>
We hopen zo snel mogelijk een nieuwe site actief te hebben
</div>
</div>
</body>
</html>
Gewijzigd op 12/05/2013 08:31:48 door Jan R
En hoe wil je de opmaak van je tekst opslaan? Ik neem aan dat je gewoon html tags gebruikt in de .txt files. Maar waarom dan niet gewoon .html bestanden?
Voor de rest ziet het er in mijn ogen wel ok uit.
Persoonlijk zou ik iets meer verschillende niveau's <div> gebruiken. Bijvoorbeeld een div #container in je #divBody. Op die manier kan je iets makkelijker verschillende delen van de site stylen m.b.v css.
Ook zou ik de opmaak (<style>) in een aparte file opslaan en deze in de head van je pagina opvragen.
En het menu zou ik opmaken in een <ul><li> formaat en deze vervolgens ook in het css bestand stylen.
Daarnaast zou ik het volledige menu ook opslaan in een apart .php bestand en deze includen in je pagina. Op die manier hoef je maar 1 bestand te wijzigen als je bijvoorbeeld een aanpassing wilt maken in je menu.
Maar zoals gezegd... Ik zou het persoonlijk op een iets andere manier aanpakken maar ik vind het er wel ok uit zien zoals je het nu hebt gedaan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
// welke pagina bekijken we?
$pagina = (isset($_GET['page']) AND is_file($_GET['page']).".txt") ? $_GET['page'] : 'home';
// open daarvan de inhoud. Niet zo moeilijk doen, gaat het ook bijna nooit fout
$tekst = file_get_contents($pagina . '.txt');
// het bestand bestaat, het is een txt, maar toch kon PHP het niet openen...
if($tekst === false)
{
echo 'Fout: Deze pagina werd niet gevonden';
}
// nu wel
else
{
// bewerk eventueel nog wat dingen.
echo $tekst;
}
?>
// welke pagina bekijken we?
$pagina = (isset($_GET['page']) AND is_file($_GET['page']).".txt") ? $_GET['page'] : 'home';
// open daarvan de inhoud. Niet zo moeilijk doen, gaat het ook bijna nooit fout
$tekst = file_get_contents($pagina . '.txt');
// het bestand bestaat, het is een txt, maar toch kon PHP het niet openen...
if($tekst === false)
{
echo 'Fout: Deze pagina werd niet gevonden';
}
// nu wel
else
{
// bewerk eventueel nog wat dingen.
echo $tekst;
}
?>
Daarnaast klopt wat Goeny zegt inderdaad (bijna) helemaal.
Als je toch maar 1 pagina-website hebt kan je daar net zo goed je menu ook in zetten. Dat extern plaatsen is handig als je toch meerdere (verschillende) pagina's krijgt. Maar als dat niet zo is, vooral niet doen.
En <ul>... in mijn optiek is dat nergens voor nodig. Gewoon een paar linkjes. Dat het misschien een 'lijst' van linkjes is is jammer. Dit werkt ook en is perfect sematisch.
De style ging normaal gezien toch in een apart bestand komen. Het is beter samen dan kreeg ik hierover misschien ook nog commentaar. :)
Ik heb ook een style voor het afdrukken. Welke sommige overbodige zaken niet afdrukt.
Ik heb geen html genomen omdat foefelaars dan ook niet weten hoe ze noemen.
De php code is op deze manier wel flink korter
Bedankt Jan
- Navigatie is een lijst van linkjes die allemaal bij elkaar horen. Ze moeten dus in een lijst. Dat is waar HTML voor gemaakt is, zeggen 'ach het is een lijst, maar dat maakt nu even niet uit' is vreselijk, want het maakt HTMl wel uit. HTML is gemaakt op aan te geven wat iets is, dus als iets iets is moet je dat ook aangeven.
- Als eerste element in de head altijd <meta charset=utf-8> (of een andere encoding)
- gebruik gewoon #header en niet #divHeader
Qua PHP, ik heb ooit dit scriptje gemaakt: http://www.phphulp.nl/php/forum/topic/paginas-includen/85274/#608793 Misschien leuk voor wat inspiratie.
Verdere dingen:
- script is lek, je kan nu elk bestand wat je maar wilt opvragen. Dat betekend ook bestanden die je niet wilt opvragen.
- gebruik gewoon file_get_contents
- check eerst of bestand aanwezig is. Fouten onderdrukken moet je noooit gebruiken
Daarbij, gebruik ipv <div id="header"> gewoon <header>...
Over die lijst... echt onnodig. Voeg gerust 2 elementen extra per <a> toe, terwijl ze niets toevoegen. Niet voor de werking, niet voor de correctheid, niet voor opmaak... met <p rol="nav"> heb je hetzelfde.
Eddy E op 12/05/2013 14:52:11:
Over die lijst... echt onnodig. Voeg gerust 2 elementen extra per <a> toe, terwijl ze niets toevoegen. Niet voor de werking, niet voor de correctheid, niet voor opmaak... met <p rol="nav"> heb je hetzelfde.
Eddy, navigatie bestaat uit een lijstje met links. Het is dan niet meer dan logisch dat je daar een lijst voor gebruikt, en niet zoals jij stelt een paragraaf. We kunnen ook html pagina's opmaken met tabellen en dat zal ook best werken, maar dat wil niet zeggen dat het de juiste manier is.
Daarom hebben ze HTML geschapen, je kan met een h1 element aangeven dat het de topic titel is. Je kan doormiddel van article elementen aangeven dat het allemaal losse reacties zijn. Je kan met een anchor element aangeven dat dat de naam van de schrijver is. Daarnaast kun je door meerdere elementen in elkaar te zetten aangeven dat ze bij elkaar horen.
Dat noemen we semantiek. Je geeft tekst een betekenis, zodat de browser weet wat het is. Tegenwoordig is er CSS bij gekomen. Deze gebruikt de elementen om te stijlen, maar dat betekend niet dat de elementen nu ineens in opdracht van CSS staan. De elementen hebben nog steeds als hoofddoel dat je semantiek geeft aan een bepaald stukje tekst.
Als we nu dit menu nemen. Als we het zonder list doen, zoals je nu hebt, heeft het de betekenis van een zin met heel veel links. Zoals deze zin. Maar het is helemaal geen zin, het is een lijst met linkjes. Daarom zeggen we tegen de browser: Kijk dit is een lijst met linkjes. Dan krijgen we:
En dat is wat we willen aangeven!
Stiekum zijn we altijd allemaal bezig met semantiek. Waarom maak je niet een hele pagina op met alleen maar <html> elementen? Kan best, maar dat doen we niet omdat dat element niet die betekenis (semantische waarde) heeft.
Hetzelfde geldt voor een menu, natuurlijk kan het, maar we doen het niet omdat het niet de juiste betekenis heeft.
En als laatst: <div id=header> kun je niet vervangen met <header>, maar met <header id=header>. Er komen veel meer header elementen in een pagina voor, dus die kunnen we nooit zo generiek maken.
Gewijzigd op 12/05/2013 16:50:44 door Wouter J
Net zoals je ook meerdere <body>'s kan hebben. Dat doe je ook niet.
Een standaard-pagina (zoals het hier waarschijnlijk om gaat gezien hij .txt-bestanden gaat inladen) heeft 1 <header> en 1 <footer> etc.
<article> kan vaker voorkomen inderdaad.
Maar goed, blijkbaar is dit gangbaar:
<nav id="navigatie">
<ul>
<li>
<a href="#" title="Wat zou het doen, denk je?">Home</a>
</li>
<li>
<a href="#" title="Opent de tweede pagina">Twee</a>
</li>
<li>
<a href="#" title="Link naar pagina drie">Drie</a>
</li>
</ul>
</nav>
Ja, werkt.
Met role="nav" (of gewoon <nav>) weet de browser ook dat het om een (lijst van) navigatie-dingen gaat.
Gewijzigd op 12/05/2013 21:12:30 door Eddy E
Zie ook bijv. http://html5doctor.com/designing-a-blog-with-html5/
Wouter J op 12/05/2013 21:26:53:
Elk sectioning element heeft een ieder header. De enige header waar men vroeger over sprak was die van het body element, omdat we toen geen andere sectioning elementen hadden. Tegenwoordig hebben we die wel, denk aan section, article, aside. Dus tegenwoordig is het zeer gangbaar dat er meer headeres headers en dis dus meer header elementen voor komen.
Zie ook bijv. http://html5doctor.com/designing-a-blog-with-html5/
Zie ook bijv. http://html5doctor.com/designing-a-blog-with-html5/
Wouter J op 12/05/2013 21:26:53:
De enige header waar men vroeger over sprak was die van het body element, omdat we toen geen andere sectioning elementen hadden. Tegenwoordig hebben we die wel, denk aan section, article, aside.
Sorry, maar ik vind dit een hoog wauwel-gehalte hebben. "Vroeger hadden we geen andere sectioning-elementen." Yeah, right. "Vroeger" spraken we HTML4, en die kende niet eens een header-element. Dat, en die hele sectioning-meuk, is toegevoegd in HTML5 en dat is nog niet eens een officiële standaard.
Dus waar hebben we het nu over? We discussiëren over het niet gebruiken van elementen die nog niet bestonden in een versie van HTML die eigenlijk nog niet bestaat. Lekker zinvol.
En, for the record, als je naar de HTML5 Candidate Recommendation kijkt, dan staat daar keihard in beschreven dat je in een <nav>-sectie niet per se een list hoeft te gebruiken. Menu's op basis van een ul-element zijn zóóó HTML4... ;-)
Gewijzigd op 12/05/2013 21:49:26 door Willem vp
Quote:
Dus waar hebben we het nu over? We discussiëren over het niet gebruiken van elementen die nog niet bestonden in een versie van HTML die eigenlijk nog niet bestaat. Lekker zinvol.
Waarschijnlijk heb je mijn post verkeerd begrepen. Ik had het over de header als semantische waarde en niet als element. Dus ik had het over <header> en bijv. <div id=header>.
Quote:
En, for the record, als je naar de HTML5 Candidate Recommendation kijkt, dan staat daar keihard in beschreven dat je in een <nav>-sectie niet per se een list hoeft te gebruiken. Menu's op basis van een ul-element zijn zóóó HTML4... ;-)
Stiekum hoop ik dat je het wel gewoon door hebt, maar hier niet durft te zeggen. Maar als je de RC leest zie je duidelijk dat ze het dan niet over een lijst met linkjes, maar een alinea met text met daarin de linkjes naar pagina's. Je merkt al, dat is totaal irrelevant voor deze discussie.
Wouter J op 12/05/2013 21:54:08:
Waarschijnlijk heb je mijn post verkeerd begrepen. Ik had het over de header als semantische waarde en niet als element. Dus ik had het over <header> en bijv. <div id=header>.
Quote:
Dus waar hebben we het nu over? We discussiëren over het niet gebruiken van elementen die nog niet bestonden in een versie van HTML die eigenlijk nog niet bestaat. Lekker zinvol.
Waarschijnlijk heb je mijn post verkeerd begrepen. Ik had het over de header als semantische waarde en niet als element. Dus ik had het over <header> en bijv. <div id=header>.
Ah, dat verklaart inderdaad het een en ander. Ik was in de veronderstelling dat je doelde op de <head>-sectie, maar omdat die een compleet andere functie heeft kwam je verhaal wat vreemd op me over.
Quote:
Stiekum hoop ik dat je het wel gewoon door hebt, maar hier niet durft te zeggen. Maar als je de RC leest zie je duidelijk dat ze het dan niet over een lijst met linkjes, maar een alinea met text met daarin de linkjes naar pagina's. Je merkt al, dat is totaal irrelevant voor deze discussie.
Quote:
En, for the record, als je naar de HTML5 Candidate Recommendation kijkt, dan staat daar keihard in beschreven dat je in een <nav>-sectie niet per se een list hoeft te gebruiken. Menu's op basis van een ul-element zijn zóóó HTML4... ;-)
Stiekum hoop ik dat je het wel gewoon door hebt, maar hier niet durft te zeggen. Maar als je de RC leest zie je duidelijk dat ze het dan niet over een lijst met linkjes, maar een alinea met text met daarin de linkjes naar pagina's. Je merkt al, dat is totaal irrelevant voor deze discussie.
Aangezien de <nav> semantisch gezien al aangeeft dat de inhoud te maken heeft met navigatie, vind ik een <ul> daarin geen toegevoegde semantische waarde hebben. Een losse verzameling links is wellicht niet handig, maar als je die wilt opmaken kun je dat net zo goed doen met een zooitje <span> of <div>-elementen. Semantisch zegt dat nog altijd meer dan een <ul>-menu dat níet in een <nav> staat. Wanneer de links weinig met elkaar te maken hebben is het wellicht juist semantischer om het niet in een <ul> te doen, omdat dat suggereert dat er samenhang in de links zit. ;-)
In mijn optiek stammen ul-menu's uit HTML4, waar het semantisch gezien niet goed op een andere manier kon worden vormgegeven. Nu dat wel kan, is de semantische noodzaak om ze te gebruiken niet meer aanwezig. De reden om nu al dan niet voor ul te kiezen lijkt me dan ook meer opmaaktechnisch of (huiver) een ingesleten gewoonte.
Enne, html opmaaktechnisch schrijven is voor mij echt een no-go...
Wouter J op 12/05/2013 23:11:06:
Enne, html opmaaktechnisch schrijven is voor mij echt een no-go...
Euh... HTML is toch een opmaaktaal? ;-)
Quote:
A (document) markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the "marking up" of manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts.
Eerst zorgen dat je pagina een logisch samenhangend geheel is... dit doen we via html.
Daarna pas gaan we de boel versieren / opleuken met css.