Développer son propre site

: Mis à jour le 9 octobre 2014

Il vous est bien entendu possible de créer votre propre site de A à Z en le développant par vous-même. Ceci requiert un niveau de connaissances qui dépendra du type de site que vous désirez mettre en place.

1- HTML et CSS

Pour la création d’un site statique, ce qui peut suffire pour un site personnel basique, il faut connaître les langages HTML et CSS. Sachez toutefois qu’il existe des logiciels qui permettent de développer un site en HTML et CSS sans rien connaître de ces langages informatiques. Le principe de ces logiciels est le suivant : vous disposez d’une interface vous permettant de construire visuellement votre site en plaçant aux endroits souhaités les éléments que vous voulez voir apparaître sur votre site. Le logiciel se charge de traduire cela dans les langages HTML et CSS. C’est ce que l’on appelle des outils Wysiwyg (what you see is what you got, que l’on peut traduire par « ce que vous voyez est ce que vous obtiendrez»). Citons en deux, parmi les plus connus :

- Dreamweaver est un logiciel de la société Adobe dont le prix exclut toute éventualité de l’acheter uniquement pour des besoins personnels.

- Il existe des produits concurrents dans le domaine du logiciel libre, notamment Kompozer.

Il est bien sûr possible de coder directement son site en HTML et CSS, il suffit pour cela d’un éditeur de texte. Les langages HTML et CSS ne sont pas très difficiles à aborder. L’HTML est un langage descriptif, c’est-à-dire qu’il se contente de décrire pas à pas ce que doit afficher votre navigateur Web. Dans ce langage, on place entre les signes < >, qu’on appelle balises, des instructions sur la façon d’afficher les données, et en dehors de ces balises ce qui doit être réellement affiché.

Voici quel en est le principe. Ce qui est écrit entre les signes < > sera, dans la réalité, rédigé dans le langage HTML. Il est rédigé ici en langage courant pour en comprendre la logique.

<affiche avec une grande taille de police et en gras >
    Bienvenue sur mon site
    <affiche avec une petite taille de police normale>
    Voici un tableau présentant l’évolution du prix de l’essence
    <construis un tableau>
    <Crée la première ligne du tableau>
    <écris dans la première cellule avec une grande taille de caractères et en centrant>
    Date
    <ferme la première cellule>
    <écris dans la 2ème cellule avec une grande taille de caractères et en centrant>
    Prix
    <ferme la 2ème cellule>
    <ferme la première ligne du tableau>
    etc.

Voir un exemple de page HTML

On voit bien que dans ce type de structure la présentation et le contenu sont étroitement imbriqués. C’est pourquoi l’HTML ne permet de faire que des sites statiques. Grâce au langage CSS on peut renvoyer partiellement ce qui concerne la présentation dans une autre partie détaillant l’aspect que devront prendre les textes affichés. Dans le principe, un fichier en CSS a la logique suivante (là aussi ces principes sont écrits en langage courant, un fichier CSS ayant une syntaxe spécifique):

- Tous les titres en page d’accueil doivent être écrits en grande taille et en gras
- Le texte ordinaire des articles en page d’accueil doivent être écrits dans une taille normale dans la police Arial

etc.

Voir un exemple de code CSS

body, html
{
width: 100%;
height:100%;
margin:0;
background-image: url("motif.png");
background-attachment: fixed;
}

#containt
{
position:relative;
margin: auto; /* Pour centrer la page */
width:90%;
}

#en_tete
{
position:absolute;
top:0px;
left:0px;

opacity:0.6;
-moz-opacity : 0.6;
-ms-filter: "alpha(opacity=60)"; /* IE 8 */
filter : alpha(opacity=60); /* IE < 8 */
background-color: #59a68e;
width: 100%;
height: 100px;

/*border: 3px solid black;*/
}

#menu
{
width: 120px;
position:absolute;
top:110px;
left:0px;
}

.element_menu
{
border: 2px solid black;
margin-bottom: 20px;
width: 120px;
}
.element_menu h3 /* Tous les titres de menus */
{
color: #000000;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

Pour les passionnés qui souhaiteraient se lancer dans l’aventure, je conseille vivement le site suivant, proposant des cours gratuits très didactiques de formation aux différents langages informatiques et accessibles même aux débutants complets, le site OpenClassrooms (anciennement Site du Zéro) à l’adresse http://fr.openclassrooms.com/

Niveau requis: débutant à confirmé selon que l'on utilise un éditeur wysiwig ou que l'on développe en HTML et CSS.

2- PHP

Pour créer un site dynamique, il faudra recourir au langage PHP. Le PHP est un langage procédural, c’est-à-dire en mesure d’effectuer des opérations informatiques avant d’envoyer en HTML et CSS vers votre ordinateur ce qui devra être affiché. C’est pourquoi un site comportant du PHP nécessite d’être installé sur un serveur disposant d’un système d’exploitation en mesure d’interpréter ce langage pour effectuer les opérations demandées.

Le PHP est un langage en mesure de s’intégrer dans le HTML, et en mesure de générer du code HTML.

Grâce au PHP, il est possible de complètement séparer présentation et contenu du site. Les informations à afficher sont rangées dans une base de données, et c’est uniquement au moment ou un visiteur viendra se connecter sur le site que le code PHP générera, en direction du navigateur de ce visiteur, le code HTML permettant d’afficher les données qu’il ira chercher dans la base de données, et la façon de les afficher. Vous comprenez maintenant l’importance de disposer d’un hébergement disposant d’une base de données. A noter que certains outils CMS permettent de se dispenser d’une base de données type mySQL en créant leur propre base de données sous forme de fichiers sur l’espace d’hébergement. Cela permettra d’installer un site sur des espaces d’hébergement ne proposant pas de base de données.

Si vous souhaitez vous lancer dans la programmation PHP vous trouverez sur OpenClassrooms , déjà cité, un cours complet.

Niveau requis: expert.

Faire des suggestions sur cet article

Menu informatique