GroupesFAQAccueilRechercherMembresS'enregistrerConnexion

Partagez | 
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Naru-manga
Cease to Exist
Cease to Exist
avatar

Masculin Nombre de messages : 2287
Date d'inscription : 20/12/2008
Age : 24

MessageSujet: [Cours] Le html pour les nuls - Partie 2 : La présentation   Ven 25 Nov 2011 - 8:39

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:
<html>
<head>
</head>

<body>
</body>
</html>

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:
<html>
<head>
</head>

<body>
Coucou les amis !!





Ca va ?
</body>
</html>

Mais sur votre page cela donnera :
Spoiler:
 

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:
<br>

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

<body>
Coucou les amis !!<br>
<br>
<br>
<br>
<br>
<br>
Ca va ?
</body>
</html>

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:
<hr>

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:
<html>
<head><body>Hey, les amis, je suis un super

<u>CODE RATE !!</b>

Et j'ai pas mal de fautes !

Mais c'est <b>pas grave puis que je suis là <u>pour ça!</u></body></head>

Allez bonne chance ! ^^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Fate
Rédacteur
Rédacteur
avatar

Masculin Nombre de messages : 5724
Date d'inscription : 19/12/2009
Age : 24
Humeur : Nunununutella!

MessageSujet: Re: [Cours] Le html pour les nuls - Partie 2 : La présentation   Ven 25 Nov 2011 - 8:46

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)

_________________




Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Dragon-blue
Administrateur
Administrateur
avatar

Masculin Nombre de messages : 12949
Date d'inscription : 03/11/2008
Age : 24
Humeur : 5 ans o/

MessageSujet: Re: [Cours] Le html pour les nuls - Partie 2 : La présentation   Ven 25 Nov 2011 - 9:44

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

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Naru-manga
Cease to Exist
Cease to Exist
avatar

Masculin Nombre de messages : 2287
Date d'inscription : 20/12/2008
Age : 24

MessageSujet: Re: [Cours] Le html pour les nuls - Partie 2 : La présentation   Ven 25 Nov 2011 - 12:42

Je tiens à préciser : vous m'envoyez le réponse par MP si vous voulez vos résultats. Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
LeYoshiMetalleux
Newbie
Newbie
avatar

Masculin Nombre de messages : 18
Date d'inscription : 29/11/2011
Age : 28
Humeur : Niark niark niark!

MessageSujet: Re: [Cours] Le html pour les nuls - Partie 2 : La présentation   Mer 30 Nov 2011 - 9:40

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:
<br/>
. Les deux fonctionnent mais la norme W3C demande la deuxième version.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Naru-manga
Cease to Exist
Cease to Exist
avatar

Masculin Nombre de messages : 2287
Date d'inscription : 20/12/2008
Age : 24

MessageSujet: Re: [Cours] Le html pour les nuls - Partie 2 : La présentation   Mer 30 Nov 2011 - 11:08

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

Alors perso, on s'en fout. x)
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




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

Revenir en haut Aller en bas
 
[Cours] Le html pour les nuls - Partie 2 : La présentation
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Génération Nintendo :: Forums Nintendo :: Dossiers & Tutoriels-
Sauter vers: