Structure standard d'une page html

Structurer sa page HTML

On trouvera sur internet une multitude de documents expliquant comment structurer sa page web.

Par exemple ici .

L'objectif pour nous est de découvrir rapidement comment faire interagir différentes technologies.

  • HTML pour l'affichage du contenu

  • CSS pour la mise en page

  • PHP pour l'interaction avec le serveur

  • Javascript pour :

    • l'interactivité avec l'utilisateur

    • le fonctionnement de type web2

Structurer sa page :

Comme indiqué dans le listing ci-dessous, on trouve quelques balises obligatoires,.

On notera l'appel aux feuilles de style (ligne 10) dans le head et l'appel au javascript (ligne 17) en fin de body.

1
<!DOCTYPE html>
2
<html lang="fr">
3
	<head>
4
		<meta charset="utf-8"/>
5
		<title> titre de la page</title>
6
    <!-- Ceci est un commentaire -->
7
    <!-- icône pour le site -->
8
		<link rel="shortcut icon" href="../images/icon.ico" />
9
    <!-- lien vers une feuille de style -->
10
		<link rel="stylesheet" type="text/css" href="css/styles.css">
11
	</head>
12
13
	
14
	<body>
15
     <!-- Contenu de la page -->
16
	  
17
<script src="https://pbellevue.libreedu.ovh//dev/components/jquery-1.11.3/jquery-1.11.3.min.js" type="application/javascript"></script>
18
	</body>
19
</html>
Exemples d'usage
Pour les élèves développant au lycée Bellevue ALBI
Ces exemples sont valables dans tous les cas , pour nos développeurs, vous pouvez les mettre en pratique sur l'espace de développement .
Développement :
Pour une station sous GNU/Linux, l'accès se fait via davs://pbellevue.libreedu.ovh/devpub/view,
pour une station Windows https://pbellevue.libreedu.ovh/devpub/view.
Consultation : à venir ...
Utiliser des modèles partie 1
ExempleFaire une mise en page rapide
Le premier exemple consiste utiliser une feuille de style toute prête : bootstrap.
Le modèle proposé ici est assez simple, comme page d'accueil, on désire une barre en haut (fixe) et trois série de 4 cases. Un petit tour sur le site de bootstrap ou ici par exemple permet de démarrer rapidement.
Notre page d'accueil
On commence par le tableau de 12 cellules
1
<!DOCTYPE html>
2
<html lang="fr">
3
 	<head>
4
   	<title>
5
   	   	</title>
6
    	<meta charset="utf-8">
7
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
8
    	<!-- Viewport pour une interface Responsive -->
9
    	<meta name="viewport" content="width=device-width, initial-scale=1">
10
    	<meta name="description" content="">
11
    	<meta name="author" content="yves" >
12
    	<link rel="shortcut icon" href="favicon.ico" />
13
<link href="https://pbellevue.libreedu.ovh//dev/components/jquery-ui-1.12/jquery-ui.min.css" rel="stylesheet">
14
<link href="https://pbellevue.libreedu.ovh//dev/components/jquery-ui-1.12/jquery-ui.theme.min.css" rel="stylesheet">
15
<link href="https://pbellevue.libreedu.ovh//dev/components/bootstrap-4.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
16
    	 
17
    	</head><div class="container">
18
19
<!-- Premiere ligne -->
20
<div class="row">
21
  <div class="col">1</div>
22
  <div class="col">2</div>
23
  <div class="col">3</div>
24
  <div class="col">4</div>
25
</div>
26
<!-- Deuxième ligne   -->
27
<div class="row">
28
  <div class="col">1</div>
29
  <div class="col">2</div>
30
  <div class="col">3</div>
31
  <div class="col">4</div>
32
</div>
33
<!-- Troisième ligne -->
34
<div class="row">
35
  <div class="col">1</div>
36
  <div class="col">2</div>
37
  <div class="col">3</div>
38
  <div class="col">4</div>
39
</div>
40
</div>
41
  
42
<script src="https://pbellevue.libreedu.ovh//dev/components/jquery-1.11.3/jquery-1.11.3.min.js" type="application/javascript"></script>
43
<script src="https://pbellevue.libreedu.ovh//dev/components/popper/popper.min.js" type="application/javascript"></script>
44
<script src="https://pbellevue.libreedu.ovh//dev/components/bootstrap-4.0.0/dist/js/bootstrap.min.js" type="application/javascript"></script>
45
       
46
</body>
47
</html>   
Le visuel correspond à ce que l'on attendait, c'est à dire un tableau de 3 fois 4 = 12 cellules .
Il nous manque la barre du haut , un petit tour sur les exemples officiels va nous aider :
Choisissons un modèle .
Le code ci-dessous contient maintenant la barre de navigation entre les lignes 19 à 43.
1
<!DOCTYPE html>
2
<html lang="fr">
3
 	<head>
4
   	<title>
5
   	   	</title>
6
    	<meta charset="utf-8">
7
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
8
    	<!-- Viewport pour une interface Responsive -->
9
    	<meta name="viewport" content="width=device-width, initial-scale=1">
10
    	<meta name="description" content="">
11
    	<meta name="author" content="yves" >
12
    	<link rel="shortcut icon" href="favicon.ico" /><link href="https://pbellevue.libreedu.ovh//dev/components/jquery-ui-1.12/jquery-ui.min.css" rel="stylesheet">
13
<link href="https://pbellevue.libreedu.ovh//dev/components/jquery-ui-1.12/jquery-ui.theme.min.css" rel="stylesheet">
14
<link href="https://pbellevue.libreedu.ovh//dev/components/bootstrap-4.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
15
<link href="https://pbellevue.libreedu.ovh//dev/view/css/style.css" rel="stylesheet">
16
    	 
17
    	</head>
18
<body>
19
<!-- barre de navigation -->
20
21
 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
22
      <a class="navbar-brand" href="#">Fixed navbar</a>
23
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
24
        <span class="navbar-toggler-icon"></span>
25
      </button>
26
      <div class="collapse navbar-collapse" id="navbarCollapse">
27
        <ul class="navbar-nav mr-auto">
28
          <li class="nav-item active">
29
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
30
          </li>
31
          <li class="nav-item">
32
            <a class="nav-link" href="#">Link</a>
33
          </li>
34
          <li class="nav-item">
35
            <a class="nav-link disabled" href="#">Disabled</a>
36
          </li>
37
        </ul>
38
        <form class="form-inline mt-2 mt-md-0">
39
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
40
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
41
        </form>
42
      </div>
43
    </nav>
44
45
<main class="container">
46
47
<!-- Premiere ligne -->
48
<div class="row">
49
  <div class="col">1</div>
50
  <div class="col">2</div>
51
  <div class="col">3</div>
52
  <div class="col">4</div>
53
</div>
54
<!-- Deuxième ligne   -->
55
<div class="row">
56
  <div class="col">1</div>
57
  <div class="col">2</div>
58
  <div class="col">3</div>
59
  <div class="col">4</div>
60
</div>
61
<!-- Troisième ligne -->
62
<div class="row">
63
  <div class="col">1</div>
64
  <div class="col">2</div>
65
  <div class="col">3</div>
66
  <div class="col">4</div>
67
</div>
68
</main>
69
  
70
<script src="https://pbellevue.libreedu.ovh//dev/components/jquery-1.11.3/jquery-1.11.3.min.js" type="application/javascript"></script>
71
<script src="https://pbellevue.libreedu.ovh//dev/components/popper/popper.min.js" type="application/javascript"></script>
72
<script src="https://pbellevue.libreedu.ovh//dev/components/bootstrap-4.0.0/dist/js/bootstrap.min.js" type="application/javascript"></script>
73
       
74
</body>
75
</html>   
76
77
    	
78
Méthode de travail proposée
Un site en reconstruction ...
Pour garder une certaine cohérence dans le site et surtout ne pas taper des lignes de code identiques dans toutes les page, on va utiliser le modèle de développement suivant en utilisant un framework (code igniter).
Sur le principe, vous aller créer un page (en php ) dans le répertoire viewn/en-preparation
Vous pourrez utiliser le code de base ci-dessous :
1
<?php
2
3
defined('BASEPATH') OR exit('No direct script access allowed'); 
4
5
6
$data['css']= Array(
7
			"jquery-ui-1.12/jquery-ui.min.css",
8
			"jquery-ui-1.12/jquery-ui.theme.min.css",
9
			"bootstrap-4.0.0/dist/css/bootstrap.min.css"
10
			);
11
$data['persocss'] = Array(
12
	"/dev/view/css/style.css"
13
	);
14
$this->load->view("templates/headersite0",$data);
15
16
?>
17
18
<body>
19
<!-- barre de navigation -->
20
<?php
21
$this->load->view("templates/barre_navigation");
22
?>
23
 <main class="container">
24
25
</main>
26
  
27
<?php
28
$data['js'] = Array("jquery-1.11.3/jquery-1.11.3.min.js",
29
	"popper/popper.min.js",
30
	"bootstrap-4.0.0/dist/js/bootstrap.min.js");
31
     
32
$this->load->view("templates/footersite",$data);
33
?>
34
   
35
36
    	
37
Commentaires :
lignes 1 à 16, on utilise php pour charger les feuilles de style et écrire l'entête
lignes 20 à 22, on utilise php pour charger la barre de navigation
Vous pouvez copier ce code, l'enregistrer dans view/en-preparation avec l'extension php, par exemple plancite.php,
la page sera alors accessible via le lien https://pbellevue.libreedu.ovh/index.php/bellevue/index/plancite
Noter qu'on indique pas l'extension php dans l'URL.
Quand vos pages sont prêtes, on les protégera en les plaçant dans le répertoire site.