[Cours] Le html pour les nuls - Partie 2 : La présentation

Hey, les gens, me revoilà pour le second cours de html !

Ici, nous allons approfondir le sujet de la présentation, à la fois intérieur et extérieur... Qu'est-ce que je veux dire ? Vous allez vite le découvrir...


La formation d'une page html

Attention, on attaque le vif du sujet, l'élément principal de la création d'une page html. On va établir sa structure, son squelette, si vous voulez.
Bref, créez une nouvelle page html.
Maintenant, voici le fameux squelette que vous devez absolument mémoriser.

Code:

Qu'est-ce que c'est que tout ça, allez vous me dire. Ne vous inquiétez pas, je vous explique.

Tout d'abord, la balise "html"
Elle sert à délimiter le code html. Bien que les navigateurs et autres logiciels qui lisent ces pages peuvent à présent s'en passer, il resté néanmoins très conseillé d'écrire cette balise au début et la fin de votre code, puisqu'il s'agit d'une balise symétrique qui se doit de tout englober.

La balise "head"
Cette balise permettra de gérer tout ce qui ne s'affiche pas dans la page elle-même. Que ce soit des couleurs dans un texte (mais on y reviendra plus tard) ou l'ajout d'un titre à votre page. C'est aussi une balise symétrique, que l'on place juste après l'ouverture du "html"

La balise "Body"
Il s'agit, comme le nom l'indique, du corps de votre page. C'est ici que se fera tout l'affichage, quel qu'il soit. (Texte, image, tableaux...)
C'est aussi une balise symétrique, que l'on place après le "head"


Bon, jusque là, on n'a pas fait grand chose. C'est pas le plus intéressant, mais c'est obligatoire.
De même, je vous ait parlé de présentation intérieure. Ce que je veux dire par là, c'est que beaucoup de personnes, dont vous, d'ailleurs, vont lire le code de votre page, en tout cas, si vous projetez de la mettre en ligne.
De ce fait, il faut respecter certains critères de présentation dans votre code.
Notez le "Retours chariots" (quand on appuie sur Enter, pour les incultes) que j'ai fait après chaque balise. Ils vont permettre de bien marquer le moment où on commence le "head" puis celui où on passe au "body".
Ce sera toujours plus ou moins la même chose avec chaque balise. Donc, prenez bien garde à ce que votre code soit lisible, sinon, personne ne voudra vous aider si vous avez un problème.


Bon, maintenant, on va en venir avec des choses plus drôles.


Un petit saut de ligne !

Hey, mes amis, vous voulez faire une page internet qui a la classe ?
Bha faut d'abord connaitre les bases !

Donc, nous allons nous attaquer à quelques petites balises bien utiles.

Commençons par le passage de ligne.
En effet, vous pouvez le tester, si vous faites que ce soit un ou des milliers de retour chariots dans votre page html, il n'y aura aucun changement dans votre présentation.
Un exemple :

Voici ce que j'ai tapé dans mon code :
Code:

Mais sur votre page cela donnera :


C'est tout à fait normal ! Car pour faire un saut de ligne en html, il faut penser à mettre une certaine balise !
En effet, rappelez-vous que votre code doit être lisible, de ce fait, vous allez abuser des retours chariots à l'intérieur.
Si vous sautiez une ligne à chaque fois, votre rendu final serait bourré de grands espaces vides !
C'est pour ça que nous avons cette petite balise :
Code:

Si vous l'inscrivez dans votre code, vous effectuerez un saut de ligne.
Donc, dans l'exemple donné avant, il faudrait écrire :
Code:

Notez que, pour votre grand plaisir, il s'agit d'une balise simple et non pas symétrique. Pratique, non ?

Dans le même genre, vous avez une balise qui va non seulement vous faire un saut de ligne mais va aussi vous tirer un trait, histoire de démarquer un peu vos espaces.

La voici :
Code:

Je ne vous donne pas d'exemple, je vous laisse tester par vous-même.

Bref, sur ce, je vais vous laisser... Mais cette fois-ci, avec un petit exercice, pour vous. Vous ne le faites que si vous avez envie.
Je vais vous donner un code. Assez basique, ma fois.
Vous allez devoir me lister toutes le fautes commises à l'intérieur.
Ou du moins, toutes celles que vous verrez.

Allez, à la prochaine leçon ! ^^

Le code :
Code:

Allez bonne chance ! ^^

Ouch, c'est super complet, mais je vais prendre pas mal de temps pour réfléchir à ton exo, en tout cas, super initiative x)

C'est vraiment les bases x)
Ca devient vraiment intéressant quand on mélange avec le Css
Bonne continuation sinon =)

Je tiens à préciser : vous m'envoyez le réponse par MP si vous voulez vos résultats.

J'ajouterai quand même que pour la balise de saut de ligne, il est préférable de mettre un slash avant la fermeture, comme ceci :
Code:
. Les deux fonctionnent mais la norme W3C demande la deuxième version.

La norme W3C n'est même pas respectée sur des sites comme Facebook, Dailymotion, etc.

Alors perso, on s'en fout. x)