Le jargon des codeurs – quelques définitions

I – Les langages

Il existe plusieurs langages dans le vaste monde du codage. Voici une petite liste des plus utilisés et leurs caractéristiques.

le HTML et le CSS

Le HTML (Hypertext Markup Language)

c'est comme le squelette humain, il permet de gérer et organiser le contenu. Avec le HTML on définit que tel ligne de texte est un titre, qu’en dessous on aura un tableau à 3 colonnes, et que dans une, on affichera une image.

Le CSS (Cascading Style Sheets)

va alors pouvoir venir compléter le langage HTML. C’est le côté esthétique du code ! Il va peaufiner ce qu'on a construit, grâce à des couleurs, des polices, des bordures. Grâce à lui, on va pouvoir dire que nos titre doivent être en rouge et en gros.


Ces deux types de langages sont des langages dits de description. Ils permettent de construire et décorer un élément.

En ce moment, nous en sommes à la version 5 du langage HTML et à la version 3 du CSS qui donnent respectivement HTML5 et CSS3. Ces versions correspondent aux mises à jour effectuées par W3C, l'organisme qui gère les langages codés du web.

PHP, Javascript, jQuery

Un autre type de langage existant et souvent retrouvé dans les codes sont les langages de programmation.

Le PHP (Hypertext Preprocessor)

est un langage de programmation, avec lequel on peut créer un site web par exemple ou une plateforme comme Forumactif ^^ Vous ne toucherez pas au PHP sur FA, ils s'occupent de ça pour nous, en tout cas, pour l'instant.

Le JavaScript (JS)

est extrêmement puissant et permet de dynamiser vos page, souvent utilisé ici pour faire des onglets (= réagir à des clics), il peut faire bien plus. Par exemple, après avoir fini de rédiger votre post, en cliquant sur le bouton "Envoyer" vous utilisez un élément programmé avec du JS qui va aller effectuer une action et activer une fonction précise.

Le jQuery

n'est rien d'autre qu'un dérivé du JS, créé à l'origine pour simplifier l'utilisation du JS en allégeant son écriture.

II – Les balises

Les balises sont facilement reconnaissables avec les sigles : < et >, appelés chevrons. Les balises servent à indiquer la nature du texte qu'elles encadrent.  La balise h1 est interprétée comme : « ceci est le titre de la page le plus important ». La balise img va permettre au navigateur de comprendre que « ceci est une image ». Chacune a une fonction, a un poids.

1) Le poids sémantique des balises

Le poids sémantique ou la valeur sémantique est une expression qui signifie le degré d'importance que certains mots portent en eux-même.

Et cette notion est importante, car dans le monde du web, notamment sur Google, lorsqu'on tape une petite phrase ou une question, il va chercher l'information parmi des dizaines de milliers de sites web. Je passe les algorithmes utilisés par cet outil, mais il extrait de ces données des résultats qui correspondent plus ou moins à ce qu'on cherche.

En fait, Google va aller faire matcher dans son immense base de données les mots qu'on a tapés contre les mots qui ont été signalés comme important, c'est-à-dire qui ont été placés dans des balises de poids sémantiques forte.

L'utilisation de la balise strong va signifier au navigateur : mots/phrases importantes. D’ailleurs, il est préférable d'utiliser la balise strong à la balise b, car cette dernière n'a pas de poids sémantique.

La balise h1 (h pour hiérarchisation) va signifier : titre d'importance 1.
Une balise h4 : titre de moindre importance.
La balise paragraphe un texte.
Et la balise div, va signifier ... un cadre. Un truc de base.

La balise div ainsi que la balise span sont des balises dites génériques. Elles ont l'avantages de pouvoir être utilisées partout et à toutes les sauces, mais elles ont des poids sémantique plus faible.

Cela peut sembler dérisoire, mais si vous êtes malin et utilisez les bons termes, vous remonterez dans les recherches google et positionnerez votre site plus haut que les autres.

2) Les balises en paires & orphelines

Les balises paires s'ouvrent < nom_balise > et se ferment plus loin, après leur contenu en utilisant le slash < /nom_balise  >.

Code:

<div> une balise générique </div>
<span> une autre balise générique </span>
<td> une cellule du tableau </td>

Les balises orphelines servent à insérer un élément à un endroit précis un élément. Etant donné que cet élément est défini par la balise, il n'est pas nécessaire de délimiter le début et la fin. On veut juste dire à l'ordinateur « insère une image ici ». Le slash de fin est optionnel et se place à la fin de la première balise.

Code:

<image />
<br />

La balise div vs span

La seule différence entre ces deux balises réside dans le fait qu’une div crée automatiquement un saut de ligne et ce n’est pas le cas de la span.

On dit que la balise div est une balise block: elle créé donc un bloc par définition. La balise span ne crée pas de block : elle est inline.

Donc si par exemple on veut personnaliser un élément dans une phrase, il faut utiliser span. Cette différence entre les balises me permet d'amorcer la notion d'imbrication des balises. C'est très simple et logique, chaque balise est d'un type : inline ou bien bloc. La règle est tout aussi simple et logique, une balise inline ne peut pas contenir une balise bloc. Par contre, une balise bloc peut contenir des balises inlines.

Des balises inline :
imgage (img), lien (a), span ...

Des balises bloc :
div, tableau (table), saut de ligne (br), paragraphe (p), titre (h de 1 à 6) ...

III – Les attributs & les propriétés

Les attributs dites-vous que c’est les options des balises. Ils viennent les compléter pour donner des informations supplémentaires. L'attribut se place après le nom de la balise ouvrante et renvois à une liste de propriété associé à une valeur.

Notez qu’on met les attributs uniquement dans la balise ouvrante, pas dans la balise fermante.

C’est grâce à ces attributs et ces propriétés qu’on va pouvoir donner l’apparence à notre texte. Par exemple background-color est une propriété, le font-size est une propriété etc…

L'attribut class VS style

Dans les codes sur forums, on retrouve très souvent ces deux attributs dans nos balise : style ou alors class.

La différence entre les deux réside dans le fait que l'attribut class nous permet de mettre le CSS à part (dans la feuille CSS par exemple) contrairement à l'attribut style qui permet d'inclure le CSS et le HTML ensembles dans le même code.

Ces deux attributs bien que conduisant tous deux au même résultat ne sont pas utilisé de la même façon. Le style va être suivit (après un égal, et ouverture de guillemet) d’une liste de différentes propriétés avec leur valeur séparé par des points virgule.

Code:

<div style="propriété:valeur; propriété:valeur; propriété: valeur;">TEXTE</div>

L'attribut class lui est suivit par un égal ainsi que l’ouverture d’un guillemet mais ne contient qu’un mot (ou plusieurs mots séparé par un tiret du bas, le tout étant de faire simple et lisible). En effet ce mot va envoyer l’ordinateur chercher dans votre liste de CSS les propriétés et les valeurs s’y rapportant.

Code:

<div class="nom_de_la_class">TEXTE</div>

=> L'attribut class est très utile pour alléger les codes. Au lieu d’avoir trois lignes de propriétés et valeurs, on remplace par un mot. De plus, cette class peut être utilisée plusieurs fois, sans pour autant à avoir à répéter le code.

Dans la feuille CSS, il faudra écrire alors le nom de la class PRECEDEE par un petit point. Puis les propriétés et leur valeurs seront répertoriés toujours séparer par un point-virgule entre accolade.

Schématiquement on aura :

Code:

.nom_de_la_class{
  propriété: valeur;
  propriété: valeur;
  propriété: valeur;
}

J’attire votre attention sur la ponctuation, qui est très importante ! Si vous oubliez les accolades, le point avant le nom de class, ou encore les points virgule comme séparateur, les deux petits points, les guillemets ou autre vos codes ne marcherons pas !!!

Et l'attribut id ?

L'attribut id s'organise un peu comme celui de la class, il est également suivi par un signe égal ainsi que d'une ouverture de guillemets ne contenant qu’un mot. Il va également renvoyer le navigateur chercher dans votre CSS les propriétés et les valeurs s’y rapportant. Et c'est là que sera la différence.

Code:

<div id="nom_de_la_class">TEXTE</div>

En effet, le nom d'un id sera précédé par un signe dièse # et non par un point, pour signifier qu'il s'agit d'un identifiant. A l'identique, on retrouvera la liste des propriétés:valeur; entre accolade.

Code:

#nom_de_la_class{
propriété: valeur;
propriété: valeur;
}

Remarque: Il n'est pas possible, comme pour l'attribut class, de créer plusieurs id dans le même attribut id. En effet, un id est unique, c'est à dire qu'il ne peut y avoir qu'un seul id de tel nom et ne sera pas répété ailleurs sur la page dans le HTML.

---

En espérant que ce tuto, vous a permis d’y voir un plus clair ! Si une question subsiste, n'hésitez pas à répondre à ce sujet pour demander des éclaircissements.

Enjoy coding !