Inclusions PHP et Sémantique
Bonsoir,
J'ouvre chaque page de mon site dans des pseudo-frames, à l'aide d'includes. Problème: Avec ce procédé, je ne parviens pas à respecter la sémantique.
Voici le dernier code que j'ai testé.
Mon fichier "accueil.php" qui contient le menu principal à gauche et le contenu à droite:
Code:
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
| <?php
require('includes.php');
include('titles.php');
?>
<!DOCTYPE html>
<html lang="fr">
<head>
<title><?php
if ( (isset($_GET['category'])) && (isset($checkTitle[$_GET['category']])) ) {
echo 'www.seriemaniacs.zapto.org'.' - '.$checkTitle[$_GET['page']].' - '.$checkTitle[$_GET['category']];
}
elseif( (isset($_GET['page'])) && (isset($checkTitle[$_GET['page']])) ) {
echo 'www.seriemaniacs.zapto.org'.' - '.$checkTitle[$_GET['page']];
}
else {
echo 'www.seriemaniacs.zapto.org - Accueil';
}
?></title>
<meta charset="UTF-8">
<meta name="description" content="Site dédié aux séries TV et plus particulièrement à Star Trek.">
<meta name="keywords" content="Séries TV, Star Trek, Fiches, Vitesse de distorsion, Armement, Equipements, Personnages, Uniformes, Grades, Directives, Règles d'acquisition, Chevaliers du zodiaque, Goldorak, Icones, Wallpapers, Polices, Forum, Liens">
<meta name="abstract" content="Vous trouverez sur ce site des fiches pratiques concernant les séries TV ainsi qu'un maximum d'informations concernant Star Trek et un forum sur lequel vous pourrez discuter">
<meta name="robots" content="all">
<meta name="revisit-after" content="30">
<meta name="reply-to" content="neelix570@gmail.com">
<meta name="identifier-url" content="http://seriemaniacs.zapto.org">
<meta name="subject" content="Série TV, Star Trek, Mangas, Downloads">
<meta name="expires" content="never">
<meta name="location" content="France, FRANCE">
<meta name="rating" content="general">
<meta name="category" content="Séries TV">
<script src="js/jquery-3.5.1.min.js"></script>
<script async src="js/menu.js"></script>
<script src="../js/trekmenu.js"></script>
<script src="../js/downmenu.js"></script>
<link rel="stylesheet" href="css/accueil.css" type="text/css" />
<link rel="stylesheet" href="css/bienvenue.css" type="text/css" />
<link rel="stylesheet" href="css/navigation.css" type="text/css" />
<link rel="stylesheet" href="css/series.css" type="text/css" />
<link rel="stylesheet" href="css/series_sommaire.css" type="text/css" />
<link rel="stylesheet" href="css/startrek.css" type="text/css" />
<link rel="stylesheet" href="css/treknav.css" type="text/css" />
<link rel="stylesheet" href="css/trekaccueil.css" type="text/css" />
<link rel="stylesheet" href="css/directives.css" type="text/css" />
<link rel="stylesheet" href="css/startrek_histoire.css" type="text/css" />
<link rel="stylesheet" href="css/mangas.css" type="text/css" />
</head>
<body>
<main class="grid-container">
<aside class="navigation-container col-2">
<?php include 'navigation.php'; ?>
</aside>
<section class="accueil-container col-10">
<?php
if ( (isset($_GET['page'])) && (isset($checkPage[$_GET['page']])) ) {
include($checkPage[$_GET['page']]);
} /* if $page has a value, include it */
else {
include('bienvenue.php');
}
?>
</section>
</main>
</body>
</html> |
Le menu principal (cadre de gauche):
Code:
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
| <nav id="global">
<div id="compteur-container">
<div id="sfcmyem2k81reczgx8c7sh59rhmgf4juut7"></div>
<script type="text/javascript" src="https://counter8.stat.ovh/private/counter.js?c=myem2k81reczgx8c7sh59rhmgf4juut7&down=async&FCS_coef=1.2" async></script>
<!-- <br><a href="https://www.compteurdevisite.com">compteur blog</a> -->
<noscript>
<a href="https://www.compteurdevisite.com" title="compteur blog">
<img src="https://counter8.stat.ovh/private/compteurdevisite.php?c=myem2k81reczgx8c7sh59rhmgf4juut7" border="0" title="compteur blog" alt="compteur blog">
</a>
</noscript>
</div>
<!-- BEGIN MENU -->
<div class="menu-container">
<div class="button-container">
<a id="link-1" class="link" href="accueil.php?page=Bienvenue">
<!-- Image apparaissant au clic -->
<img id="bottom-1-clicked" class="toggle-1" src="images/button58.gif">
<!-- Image apparaissant au survol après disparition de l'image d'origine -->
<img id="bottom-1" class="toggle-1" src="images/button59.gif">
<!-- Image apparaissant au chargement de la page. Glisse vers la droite au survol puiq revient vers la gauche -->
<img id="top-1" class="toggle-1" src="images/button55.gif">
<span class="text-container">Accueil</span>
</a>
</div>
<div class="button-container">
<a id="link-2" class="link" href="accueil.php?page=Series">
<img id="bottom-2-clicked" class="toggle-2" src="images/button58.gif" alt="">
<img id="bottom-2" class="toggle-2" src="images/button59.gif" alt="">
<img id="top-2" class="toggle-2" src="images/button55.gif" alt="">
<span class="text-container">Séries</span>
</a>
</div>
<div class="button-container">
<a id="link-3" class="link" href="accueil.php?page=Star_Trek">
<img id="bottom-3-clicked" class="toggle-3" src="images/button58.gif" alt="">
<img id="bottom-3" class="toggle-3" src="images/button59.gif" alt="">
<img id="top-3" class="toggle-3" src="images/button55.gif" alt="">
<span class="text-container">Star Trek</span>
</a>
</div>
<div class="button-container">
<a id="link-4" class="link" href="accueil.php?page=Mangas">
<img id="bottom-4-clicked" class="toggle-4" src="images/button58.gif" alt="">
<img id="bottom-4" class="toggle-4" src="images/button59.gif" alt="">
<img id="top-4" class="toggle-4" src="images/button55.gif" alt="">
<span class="text-container">Mangas</span>
</a>
</div>
<div class="button-container">
<a id="link-5" class="link" href="accueil.php?page=Downloads">
<img id="bottom-5-clicked" class="toggle-5" src="images/button58.gif" alt="">
<img id="bottom-5" class="toggle-5" src="images/button59.gif" alt="">
<img id="top-5" class="toggle-5" src="images/button55.gif" alt="">
<span class="text-container">Downloads</span>
</a>
</div>
<div class="button-container">
<a id="link-6" class="link" href="accueil.php?page=http://www.internetservices-fr.net/membres/forum/forum3?user=7074&salon=7831">
<img id="bottom-6-clicked" class="toggle-6" src="images/button58.gif" alt="">
<img id="bottom-6" class="toggle-6" src="images/button59.gif" alt="">
<img id="top-6" class="toggle-6" src="images/button55.gif" alt="">
<span class="text-container">Forum</span>
</a>
</div>
<div class="button-container">
<a id="link-7" class="link" href="accueil.php?page=Liens">
<img id="bottom-7-clicked" class="toggle-7" src="images/button58.gif" alt="">
<img id="bottom-7" class="toggle-7" src="images/button59.gif" alt="">
<img id="top-7" class="toggle-7" src="images/button55.gif" alt="">
<span class="text-container">Liens</span>
</a>
</div>
</div>
<!-- END MENU -->
<div class="search-container">
<a class="search-text" href="#" onClick="window.open('recherche.php','recherche','toolbar=0,location=0,directories=0,status=0,scrollbars=0,resizable=0,copyhistory=0,menuBar=0,width=400,height=500');return(false)">Le Webmaster recherche</a>
<!-- FIN DU SCRIPT -->
</div>
<div>
<a href="accueil.php?page=Livre_Or">
<figure class="other-links">
<img id="guestbook" src="livredor/book003.gif" alt="Livre d'or">
<figcaption class="links">Livre d'or</figcaption>
</figure>
</a>
</div>
<div>
<a href="mailto:webmaster@seriemaniacs.ht.st">
<figure class="other-links">
<img id="email" src="images/10_02.gif" alt="Webmaster">
<figcaption class="links">Webmaster</figcaption>
</figure>
</a>
</div>
</nav> |
La page d'accueil (cadre de droite):
Code:
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
| <article id="accueil-container">
<h1 id="accueil-title">SERIES-MANIACS ET TREKKERS<br> BONJOUR</h1>
<!-- BEGIN DISPLAYING SCREEN RESOLUTION -->
<div class="resolution">
<span class="resolution-text">Ce site est optimisé pour un affichage 1440x900, écran 19"</span>
<span class="resolution-text">
<script language="javascript">
document.write("<br>Votre résolution est de : " + screen.width + " x " + screen.height);
</script></span>
</div>
<!-- END DISPLAYING SCREEN RESOLUTION -->
<!-- BEGIN DISPLAYING DATE -->
<div class="date">
<span>
<script language="javascript">
var d = new Date();
var year = d.getFullYear();
var month = (d.getMonth()+1);
var day = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
if (month == 1) month = " janvier";
else if (month == 2) month = " février";
else if (month == 3) month = " mars";
else if (month == 4) month = " avril";
else if (month == 5) month = " mai";
else if (month == 6) month = " juin";
else if (month == 7) month = " juillet";
else if (month == 8) month = " août";
else if (month == 9) month = " septembre";
else if (month == 10) month = " octobre";
else if (month == 11) month = " novembre";
else if (month == 12) month = " décembre";
if (day == 1) day = "1er"
else day = day;
document.write("<br>Nous sommes le " + day + " " + month + " " + year +".")
document.write("<br>Il est " + hours)
if (hours < 2)
document.write(" heure ")
else document.write(" heures ")
document.write(minutes)
if (minutes < 2)
document.write(" minute.")
else document.write(" minutes.")
</script>
</span>
</div>
<!-- END DISPLAYING DATE -->
<!-- BEGIN RECOMMEND WEBSITE -->
<div class="recommend">
<span>
<a href="#" onClick="window.open('recommander.htm','recommander','toolbar=0,location=0,directories=0,status=0,scrollbars=0,resizable=0,copyhistory=0,menuBar=0,width=470,height=215');return(false)">
Recommandez ce site à un ami!</a>
<!-- FIN DU SCRIPT -->
</span>
</div>
<!-- END RECOMMEND WEBSITE -->
<!-- BEGIN NEWS DISPLAY -->
<div class="news">
<table>
<tr>
<td id="news-table">
<img src="images/new003.gif" alt="new">
</td>
<td id="news-table">
<img src="images/new003.gif" alt="new">
</td>
</tr>
</table>
</div>
<!-- END NEWS DISPLAY -->
<!-- <div align="center">
<script type="text/javascript" language="javascript" src="http://www.i-services.net/membres/newsbox/newsbox?user=7074&idbox=1419"></script>
</div> -->
</article> |
Ensuite vient la partie Star Trek, qui affiche dans le cadre de droite, un menu dans le cadre du haut et le contenu dans le cadre du bas.
Page d'accueil de cette partie "startrek.php":
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <?php
require('includes.php');
?>
<div class="trek-grid-container">
<header class="trek-navigation-container">
<?php include 'startrek/treknav.php'; ?>
</header>
<section class="trek-accueil-container">
<?php
if ( (isset($_GET['category'])) && (isset($checkPage[$_GET['category']])) ) {
include($checkPage[$_GET['category']]);
} /* if $page has a value, include it */
else {
include('startrek/trekaccueil.php');
}
?>
</section>
</div> |
Ici le menu de la partie Star Trek (cadre du haut):
Code:
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
| <nav id="treknav">
<!-- BEGIN MENU -->
<div class="trek-menu-container">
<div class="trek-button-container">
<a id="trek-link-1" class="trek-link" href="accueil.php?page=Star_Trek&category=Histoire">
<!-- Image apparaissant au survol après disparition de l'image d'origine -->
<img id="trek-1" class="trek-toggle-1 hidden" src="../startrek/images/ufp16-09.jpg">
<!-- Image apparaissant au chargement de la page. disparaît au survol -->
<img id="trek-1" class="trek-toggle-1" src="../startrek/images/llap2.jpg">
<span class="trek-text-container">Histoire</span>
</a>
</div>
<div class="trek-button-container">
<a id="trek-link-2" class="trek-link" href="accueil.php?page=Star_Trek&category=Personnages">
<img id="trek-2" class="trek-toggle-2 hidden" src="../startrek/images/ufp16-09.jpg" alt="">
<img id="trek-2" class="trek-toggle-2" src="../startrek/images/pic-gen.jpg" alt="">
<span class="trek-text-container">Personnel</span>
</a>
</div>
<div class="trek-button-container">
<a id="trek-link-3" class="trek-link" href="accueil.php?page=Star_Trek&category=Vaisseaux">
<img id="trek-3" class="trek-toggle-3 hidden" src="../startrek/images/ufp16-09.jpg" alt="">
<img id="trek-3" class="trek-toggle-3" src="../startrek/images/1701e01.jpg" alt="">
<span class="trek-text-container">Vaisseaux</span>
</a>
</div>
<div class="trek-button-container">
<a id="trek-link-4" class="trek-link" href="accueil.php?page=Star_Trek&category=Treknologie">
<img id="trek-4" class="trek-toggle-4 hidden" src="../startrek/images/ufp16-09.jpg" alt="">
<img id="trek-4" class="trek-toggle-4" src="../startrek/images/warpc-1.jpg" alt="">
<span class="trek-text-container">Treknologie</span>
</a>
</div>
<div class="trek-button-container">
<a id="trek-link-5" class="trek-link" href="accueil.php?page=Star_Trek&category=Uniformes_Grades">
<img id="trek-5" class="trek-toggle-5 hidden" src="../startrek/images/ufp16-09.jpg" alt="">
<img id="trek-5" class="trek-toggle-5" src="../startrek/images/tosunir.jpg" alt="">
<span class="trek-text-container">Uniformes</span>
</a>
</div>
<div class="trek-button-container">
<a id="trek-link-6" class="trek-link" href="accueil.php?page=Star_Trek&category=Planetes">
<img id="trek-6" class="trek-toggle-6 hidden" src="../startrek/images/ufp16-09.jpg" alt="">
<img id="trek-6" class="trek-toggle-6" src="../startrek/images/planet.jpg" alt="">
<span class="trek-text-container">Planètes</span>
</a>
</div>
</div>
<!-- END MENU -->
</nav> |
Puis le contenu de cette partie (cadre du bas):
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <audio autoplay src="startrek/livelong.wav"></audio>
<article id="trek-accueil">
<div id="trek-container">
<div id="ufp-flag-container">
<img id="ufp-flag" src="startrek/images/desktop.jpg">
</div>
<div class="buttons">
<table id="table-trek-accueil">
<tr>
<td class="trek-accueil-cell">
<a href="accueil.php?page=Star_Trek&category=Directives"><input type="button" class="directives-button" size="23" value="DIRECTIVES FEDERALES"></a>
</td>
<td class="trek-accueil-cell">
<a href="accueil.php?page=Star_Trek&category=Regles_Acquisition"><input type="button" class="ferengi-button" size="30" value="REGLES D'ACQUISITION FERENGIES"></a>
</td>
</tr>
</table>
</div>
</div>
</article> |
Pour voir le fonctionnement du site, c'est ici.
Par avance merci à la communauté.
