Création et hébergement d’un site

Pour cette nouvelle évaluation, M. Martin nous a demandé de créer un site et de le mettre en ligne. Pour cela, on a dû passer par plusieurs étapes.

Etape 1 : création du site en HTML, CSS, JavaScript et PHP avec les documents source donnés par le formateur

Le code HTML de la page ‘formation’ :

Mon code en CSS :

@import url(‘https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i|Orbitron:400,500,700’);

*,
::after,
::before {
box-sizing: border-box;
}

html {
font-size: 100%;
background: url(../images/bgBody.png);
background-repeat: repeat-x;
}

body {
font-family: ‘Open Sans’, sans-serif;
font-size: .8em;
margin: 0;
padding: 0;
}

h1,
h2 {
font-family: ‘Orbitron’, sans-serif;
margin: 0;
padding: 0;
}

h3 {
margin: 0;
padding: 0;
}

a {
text-decoration: none;
color: inherit;
}

img {
max-width: 100%;
vertical-align: middle;
}

.gras {
font-weight: 700;
}

.italique {
font-style: italic;
}

.enveloppe {
width: 840px;
margin: 0 auto;
display: flex;
flex-direction: column;
background: url(../images/bgWrapper.png);
}

.entete {
height: 96px;
background: url(../images/bgHeader.png) no-repeat;
}

.entete h1 {
display: block;
background-color: black;
color: white;
width: 300px;
font-size: 1.5em;
font-weight: 100;
top: 20px;
margin-left: 72px;
margin-top: 56px;

}

.navigation {
padding-left: 70px;
margin-top: -16px;
}

.navigation ul {
display: flex;
}

.navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}

.navigation ul li a {
display: block;
border-left: solid 1px #ccc;
padding: 0 10px 0 10px;
}

.navigation ul li a:hover:not(.active) {
background-color: #f80;
color: white;
}

.active {
background-color: black;
color: white;
}

.corps {
display: flex;
padding-top: 40px;
padding-right: 35px;
width: 840px;
}

.liens {
display: flex;
flex-direction: column;
width: 300px;
padding-left: 70px;
padding-right: 20px;
}

.image-liens {
display: block;
margin: 0;
}

.titre-liens {
display: block;
background-color: #f80;
color: white;
text-transform: uppercase;
padding-left: 10px;
}

.liens ul {
padding: 0;
margin: 0;
}

.liens li {
position: relative;
list-style: none;
display: block;
padding: 6px 0 6px 16px;
border-bottom: solid 1px #ccc;
}

.liens li::before {
position: absolute;
content: « \0025B8 »;
margin-left: -18px;
padding-right: 10px;
margin-top: -5px;
font-size: 1.5em;
}

.bloc-programme,
.bloc-contact,
.bloc-formation,
.bloc-galerie {
display: flex;
flex-direction: column;
width: 540px;
border-left: dotted 1px #ccc;
padding-left: 16px;
padding-top: 48px;
line-height: 1.6em;
}

.titre-principal {
color: #f80;
}

.bloc-programme ul {
padding-left: 0;
}

.bloc-programme ul li {
position: relative;
list-style: none;
display: block;
padding: 6px 0 6px 16px;
}

.bloc-programme li::before {
position: absolute;
content: « \0025B8″;
margin-left: -18px;
padding-right: 10px;
color: #c30;
font-size: 1.5em;
}

.bloc-programme ul>li>ul>li {
position: relative;
list-style: none;
display: block;
padding: 6px 0 6px 16px;
line-height: .8em;
}

.bloc-programme ul>li>ul>li::before {
position: absolute;
content:  » \0025A0″;
margin-left: -18px;
padding-right: 10px;
color: #c30;
font-size: .8em;
}

.liste-images {
display: flex;
flex-wrap: wrap;
padding-left: 15px;
}

.liste-images li {
list-style: none;
}

.liste-images img {
margin: 1px;
border: solid 1px #ccc;
}

.galerie {
background-color: #eee;
width: 460px;
border: solid 1px #999;
}

.pied {
position: relative;
height: 56px;
background: url(../images/bgFooter.png) no-repeat;
}

.pied p {
position: absolute;
text-align: right;
font-family: ‘Orbitron’, sans-serif;
color: #999;
font-size: 10px;
padding-top: 6px;
padding-right: 10px;
margin-right: 36px;
background-color: white;
width: 130px;
right: 0;
}

Mon code en PHP pour les include à insérer dans chaque page HTML :

?php
include « inclusions/entete.php » ;
include « inclusions/liens.php »;
include « inclusions/pied.php »;
?

Principe de la commande include :

En PHP, on peut facilement insérer d’autres pages (on peut aussi insérer seulement des morceaux de pages) à l’intérieur d’une page.

Le principe de fonctionnement des inclusions en PHP (include) est le suivant : le site web est composé de quatre pages. Sur chaque page, il y a une entête, toujours la même. Pourquoi ne pas écrire cette entête une seule fois dans une page entete.php?

En PHP, on va pouvoir inclure entête sur toutes les pages. Lorsqu’on voudra modifier cette entête, on n’aura qu’à modifier entete.php et l’ensemble des pages du site web sera automatiquement mis à jour !


Etape 2 : ouverture d’un compte chez l’hébergeur de site
 o2switch :

  • Choix d’une offre d’hébergement
  • Inscription, commande et règlement de  l’offre d’hébergement choisie
  • Choix du nom de domaine : pascalfurlan.com
  • Avec les accès reçus par email, connexion sur cpanel d’o2switch
  • Création d’un sous-domaine pour l’exercice évalué : imep.pascalfurlan.com

 

Etape 2 : envoi des fichiers avec un client FTP (Filezilla) vers le serveur d’o2switch.

Pour se connecter au serveur, il faut entrer dans le champ « Hôte » l’IP ou le nom du serveur qui a été fourni.
Dans le champ « Identifiant », taper le pseudo puis le mot de passe dans le champ « Mot de passe ». Enfin dans le champ « Port », soit laisser le champ vide et Filezilla le remplira, soit entrer « 21 ».

Une fois la connexion lancée, le client et le serveur peuvent s’échanger des informations. Pour envoyer un fichier sur le serveur, sélectionner le fichier/dossier que l’on souhaite transférer, faire un clic droit et cliquer sur « Envoyer ». On peut aussi faire glisser le fichier dans le répertoire du serveur.