Créer un site gratuitement    Webmasters    Par où commencer ?    Les différents langages de développement
Mes favoris    Ajouter l'article à vos favoris

Les différents langages de développement

Il existe plusieurs langages qu'il faut connaître pour créer un site internet, ceux-ci ont tous un rôle différent mais s'utilisent ensemble.
Je vais vous présenter les langages les plus courant et qui vous seront expliqués sur ce site.

Le HTML


Le langage HTML est le premier à connaitre, il vous permettra de "concevoir" votre site, c'est grâce à celui-ci que vous pourrez afficher du texte, une image, un tableau, etc. sur un site.
Le HTML est un langage composé de balises (<b>, <u>, <div>, <center>, ..) permettant de lui appliquer des effets tous différents les-un des autres (mettre du texte en gras, centrer un texte, ..).
Ces balises doivent, après leur utilisation, être fermées, par exemple, si je veux afficher du texte en gras, la syntaxe serait la suivante :
<b>Mon texte en gras</b>
Pour créer un site en HTML , il n'y a besoin que d'un simple éditeur de texte (bloc note, ..) dans lequel on code notre page grâce aux différentes balises.
Le HTML est éxecuté par votre navigateur internet, c'est à dire qu'il vous est possible de créer un site < interne > (sur votre disc dur) sans avoir à le mettre en ligne pour le consulter (mais vous serez le seul visiteur de ce site ...).

Comme rien n'équivaut un exemple détaillé, je vais vous expliquer les premières bases à savoir concernant la structure d'une page HTML :
<html>
 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Titre de ma page</title>
        <meta name="description" lang="fr" content="Description de ma page" />
    </head>
 
    <body>
        <p>
            Ici j'insère mon texte qui sera visible dans ma page.
            <br />
            Je peux même insérer un lien vers <a href="page-de-contact.html">
            ma page de contact</a>
        </p>
    </body>
 
</html>
Explications :
<html>
...
</html>
La balise html définie le début du document HTML (là où commence notre page), elle doit être située en première dans votre page.
Il ne faut surtout pas oublier de refermer cette balise afin de préciser où se trouve la fin du document.
<head>
...
</head>
Comme le nom de cette balise l'indique (head en anglais signifie tête), elle définie l'entête du document HTML , elle contiendra différentes informations visibles seulement dans la source de votre page (donc pas sur l'aperçu de votre page).
Ces informations sont de tous genres (titre de la page, description de la page, nom de l'auteur, ..).
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Il s'agit du type d'encodage de votre page, il en existe différents, mais les plus connus et utilisés en france sont UTF-8 et ISO-8859-1.
Il existe une multitude de balises meta avec différents attributs (http-equiv, name, ...), nous les verrons plus tard dans les tutoriels HTML .
<title>Titre de ma page</title>
La balise title permet de définir un titre à votre page qui s'affichera dans la barre de titre (en haut de votre écran).
Elle vous sera très utile dans votre référencement car les moteurs de recherche prennent en compte le contenu de cette balise.
<meta name="description" lang="fr" content="Description de ma page" />
Il s'agit encore d'une balise meta qui vous permet d'insérer une description de votre page.
Cette description n'est pas prise en compte lors de votre référencement, elle servira par contre de visuel lorsque votre site apparaitra dans Google (Cf. image).

Meta description

<body>
...
</body>
La balise body définie le début de ce qui va être visible par le visiteur sur la page.
Elle contiendra votre texte, vos images, liens, vidéos, ...
Comme pour toutes les balises, il ne faut pas oublier de la refermer à la fin de votre document.
<p>
...
</p>
La balise p est une balise contenant votre texte (vos "paragraphes").
Vous n'êtes pas obligés de l'utiliser, vous pouvez faire apparaitre votre texte à même la balise body, mais il aura moins d'impacte vis-à-vis des moteurs de recherche, et de plus, vous verrez par la suite que d'un aspect visuel, l'insertion d'un texte dans une balise spécifique vous aidera à lui donner un style (couleur de fond, couleur du texte, marges, ...).
<br />
Une des balises les plus fréquentes, voir "LA" plus fréquente !
Mais de quoi s'agit-il ?
Cette balise vous permet de faire un saut à la ligne (et oui, coder un site, ça n'est pas du traitement de texte, il faut spécifier le moindre comportement voulu)
<a href="http://monsite.fr/page-de-contact.html">ma page de contact</a>
La balise a vous permet d'insérer un lien dans votre page.
L'url vers laquelle pointe le lien doit être comprise dans l'attribut href.
Le contenu de la balise "ma page de contact" sera le texte affiché (et souvent souligné) sur lequel nous viendrons cliquer pour nous rendre sur la page de contact.

Le CSS


Le CSS est, comme les langages que nous verrons par la suite, un complément du HTML , il va vous permettre de modifier les propriétés des balises HTML dans le but de créer un style, c'est à dire colorer du texte, mettre une image en arrière plan, souligner du texte, le centrer, modifier les curseurs, ...
Dans une feuille de style (fichier regroupant les propriétés CSS ) on retrouvera les sélecteurs (le nom des balises auxquelles attribuer un style) et les blocs de règles (les styles à appliquer à ces sélecteurs).
Pour l'exemple, nous allons concerver le fichier HTML utilisé précédement et appliquer un style à la balise <p> :
p {
    background : #FF0000;
    border : 1px solid #000000;
    color : #000000;
    text-decoration : underline;
}
Ici, p est le sélecteur, il signifie que le style qui est contenu dans le bloc de règles s'appliquera à toutes les balises <p> .
Regardons en détail le contenu du bloc de règles :
background : #FF0000;
Signifie que la couleur de fond de la balise <p> sera de couleur #FF0000 (ici rouge).
border : 1px solid #000000;
Signifie que la balise <p> sera munie de bordures fermés de 1 pixel de largeur et de couleur #000000 (ici noir).
color : #000000;
Signifie que la couleur du texte de la balise <p> sera de couleur #000000 (ici noir).
text-decoration : underline;
Signifie que le texte contenu dans la balise <p> sera souligne.

Il existe des centaines de de paramètres comme ceux-ci en CSS qui vous permettent d'obtenir un site personnalisé à votre "sauce".

Le JavaScript


Vous avez surement dû entendre parler du JavaScript, il n'est pas indispensable lors de la création d'un site, mais il est util.
Ce langage va vous permettre d'intégrer un côté dynamique dans vos pages HTML , par exemple, afficher / cacher un menu, afficher une boite de dialogue, détecter la résolution de l'écran du visiteur, etc.
Un script (code) JavaScript peut se coder dans la page HTML elle même, ou dans une page d'extension .js qui sera incluse à la page HTML par une ligne que nous verrons dans les tutoriels JavaScript.
Un code JavaScript est contenu entre les balises <script type="text/javascript"> /* Code */ </script> .
Voici un exemple concret d'un code permettant d'afficher une boite de dialogue lors de l'arrivée d'un visiteur sur la page :
<script type="text/javascript">
<!--
    alert('Bonjour cher visiteur !\n\nNous vous souhaitons la bienvenue');
-->
</script>
Ici, alert() est une fonction permettant d'afficher son contenu dans une boite de dialogue munie du bouton " OK ".
Il existe une multitude de fonctions en tous genres (communication, mathématiques, informations, etc.) en JavaScript vous permettant d'arranger votre site pour qu'il paraisse plus dynamique et personnalisable par le visiteur.
Il ne faut pas oublier non plus qu'il est possible que certains visiteurs aient désactiver l'execution du JavaScript (volontairement ou non) ce qui fait que le script ne sera pas éxecuté sur leur ordinateur.

Le PHP


Le PHP est un langage éxecuté par le serveur qui renvoi un code généré en HTML à votre navigateur qui va enfin pouvoir vous afficher la page.
Je pense qu'un petit schéma s'impose pour mieux " capter " la façon de procéder :

Interpretation du PHP

Le PHP sert à récolter des données envoyées par un formulaire (de contact, de sondage, de livre d'or, etc.) et à les afficher / enregistrer dans une page, à envoyer des mail, afficher la date, convertir une chaine de caractères, etc.
Il existe une multitude de fonctionnalités en PHP que je ne pourrais toutes vous les énumérer !
Vous comprendrez par la suite, dans les tutoriels PHP , quel est la puissance de ce langage !
Voici un bout de code PHP pour vous donner une idée de sa présentation :
<?php
function tronquer($texte, $i)
{
    $caracteres = strlen($texte);
    $boucle = true;
 
    if($caracteres > $i)
    {
        $texte = substr($texte, 0, $i);
        $position_espace = strrpos($texte, " ");
        $texte = substr($texte, 0, $position_espace).' ...';
    }
 
    return $texte;
}
?>
Cet exemple est une fonctions php permettant de tronquer un texte au nombre de caractères voulus.
function
Désigne le début d'une nouvelle fonction.
tronquer()
Il s'agit du nom de la fonction.
$texte, $i
Ce sont les arguments, des variables contenant le texte à tronquer (variable $texte) et le nombre de caractères à garder avant de tronquer (variable $i).
if(...)
{
...
}
Il s'agit ici d'une structure conditionnelle permettant de vérifier si une condition (ici $caracteres > $i) est juste.
return $texte;
Il s'agit d'une commande qui a pour but de retourner la valeur de la variable $texte (ici la phrase tronqué).

Comme vous avez pu le voir, le PHP n'est pas très facile !
Je vous rassure, après quelques jours de manipulations de PHP , ceci vous semblera enfantin !

Et voila, le cours sur les langages est finit, mais il n'est pas impossible qu'il soit retouché par la suite, il ne s'agit d'ailleur pas d'une liste définitive car il existe d'autres langages que je viendrais décrire par la suite !
J'espère avoir été assez clair dans mes explications, si ce n'est pas le cas, je vous invite à me joindre par mail via la page contact afin de me guider sur quelques points un peu trop flou à vos yeux, j'éditerai donc l'article afin de répondre à vos questions le plus clairement possible !


Participez au développement du site en laissant vos impressions.

Commentaire/demande concernant l'article :


Recopiez le contenu de cette image :
Code anti-robot  »