Le texte
Bonjour/bonsoir/bonne nuit.
Voici le tutoriel n°3, très important, vu que c'est grâce à ces balises qu'on va pouvoir déclarer qu'on écrit
du texte. Pour le tuto précédent, c'est ici :
un petit clic et on y est.
Ce tuto sera divisé en trois parties distinctes, selon le type de texte. Ce tuto là ne sera pas très long, et les balises à apprendre ne sont pas très compliquées. Par ailleurs, ce tutoriel/cours sera essentiellement de l'apprentissage de balises que je vous invite à réessayer de vote côté.
Le paragraphe
La balise p, c'est la plus simple à connaître, et comme vous le devinez aisément, c'est p pour paragraphe.
- Code:
-
<p>Ici mon paragraphe. </p>
Ici mon paragraphe.
C'est une balise en paires, comme toutes les balises de texte, ce qui semble logique vu qu'on marque où commence le texte et où se termine le texte. Bon, on n'a pas de changement particulier hein, mais c'est toujours pratique de connaître cette balise quand on fait du code avec une feuille HTML par exemple. Savoir dire que ceci est un paragraphe est toujours important.
Les citations
Il existe deux balises pour les citations, que l'on utilise selon la longueur de la citation.
A) Pour les longues citations : blockquote - Code:
-
<blockquote>- Un jour viendra, ai-je dit, où nous serons tous morts. Tous. Un jour viendra où il ne restera plus aucun être humain pour se rappeler l'existence des hommes. Un jour viendra où il ne restera plus personne pour se souvenir d'Aristote ou de Cléopâtre, encore moins de toi. Tout ce qui a été fait, construit, écrit, pensé et découvert sera oublié et tout ça, ai-je ajouté avec un geste large, n'aura servi à rien. Ce jour viendra bientôt ou dans quelques millions d'années. Quoi qu'il arrive, même si nous survivons à la fin du soleil, nous ne survivrons pas toujours. Du temps s'est écoulé avant que les organismes acquièrent une conscience et il s'en écoulera après. Alors si l'oubli inéluctable de l'humanité t'inquiète, je te conseille de l'ignorer. C'est ce que tout le monde fait.</blockquote>
- Un jour viendra, ai-je dit, où nous serons tous morts. Tous. Un jour viendra où il ne restera plus aucun être humain pour se rappeler l'existence des hommes. Un jour viendra où il ne restera plus personne pour se souvenir d'Aristote ou de Cléopâtre, encore moins de toi. Tout ce qui a été fait, construit, écrit, pensé et découvert sera oublié et tout ça, ai-je ajouté avec un geste large, n'aura servi à rien. Ce jour viendra bientôt ou dans quelques millions d'années. Quoi qu'il arrive, même si nous survivons à la fin du soleil, nous ne survivrons pas toujours. Du temps s'est écoulé avant que les organismes acquièrent une conscience et il s'en écoulera après. Alors si l'oubli inéluctable de l'humanité t'inquiète, je te conseille de l'ignorer. C'est ce que tout le monde fait.
Citation de John Green, Hazel Grace à Augustus Waters dans
Nos étoiles contraires. (Oui, je suis ce genre de fille qui lit les livres d'amour. Et ouais.)
Comme vous le voyez, cela donne une marge autour du texte, ce qui est plutôt sympa. Certains qui ne font pas de code utilisent d'ailleurs simplement cette balise pour leurs RPs, vous pouvez en faire de même, je le fais parfois. (Quand j'ai la flemme de coder. (a))
Le texte est relativement long, c'est pour ça que j'utilise blockquote. Puis block et quote voilà voilà, moyen mnémotechnique. Et si un jour vous l'oubliez, vous aurez toujours des mementos de balise quelque part sur le net.
Sachez que je détourne souvent l'utilisation de blockquote, et que jusqu'à maintenant il n'y pas eu d'explosion. (Puis je détourne pas les fonds d'une entreprise alors je suis pas en prison.) Un exemple de détournement d'utilisation ? Bah tout le tutoriel que vous lisez est à l'intérieur d'une jolie balise blockquote, d'où les marges intérieures. o/ (Puis on le voit bien là non ? Avec la balise dont l'arrière-plan est de couleur bleue claire.) Voili voilou !
B) Pour les citations courtes : q - Code:
-
<q> Mes pensées sont des étoiles qui ne veulent plus former de constellation. </q>
Mes pensées sont des étoiles qui ne veulent plus former de constellation.
Encore tiré de
Nos étoiles contraires.
Merci John Green.
Comme vous le voyez, la citation est plutôt courte cette fois-ci. Et puis un autre moyen mnémotechnique, la balise est plus courte quand la citation est courte !
Et là, ça nous rajoute des guillemets tout seul. C'est sympa quand on se rappelle pas de l'alt code pour les guillemets, que l'alt code ne marche pas sur son ordi ou qu'on a la flemme d'en copier/coller quelque part.
PS : Alt + 174 = « et Alt + 175 = »
Donc voilà, niveau citations, on est bien. o/ Et maintenant, on passe aux titres. Parce que c'est cool les titres.
Les titres
Pour bien structurer sa page, c'est toujours bien de mettre un titre, surtout quand on a nos titres de RPs.
- Code:
-
<h1>Mon titre très important. </h1>
<h2>Mon titre moins important. </h2>
<h3>Mon titre peu/presque pas important. </h3>
Mon titre très important.
Mon titre moins important.
Mon titre peu/presque pas important.
Là, vous voyez que chez moi, les titres apparaissent différemment, ils ne sont pas censés apparaître différemment en réalité. C'est à cause du CSS que j'ai appliqué partout sur le forum qu'on obtient un effet différent. Il y a deux choses à savoir :
• Les titres ont un ordre d'importance. h1 est plus importante que h2, h2 est plus importante que h3, h3 est plus importante que h4, et ainsi de suite jusqu'à l'infini. Vous pouvez donc changer le nombre après h à l'infini.
• Dans le code de base de votre forum, h1 est déjà utilisé, h2 aussi (il me semble). Pour être sûr de ne pas utiliser les mêmes balises que dans le code de base (en particulier quand vous voudrez personnaliser et mettre en forme avec le CSS), il est préférable que vous commenciez avec un nombre plutôt grand. À partir de h4 par exemple (ou h10, là on est sûrs).
Les listes
Passons maintenant aux listes, qui sont toujours pratiques. Il existe deux sortes de liste : les listes ordonnées et les listes non ordonnées.
A) Liste ordonnée - Code:
-
<ol><li>Premier élément. </li><li>Deuxième élément. </li> <li>Troisième élément. </li></ol>
- Premier élément.
- Deuxième élément.
- Troisième élément.
Ce qu'il faut savoir :
• On utilise la balise ol pour "entourer" toute la liste ordonnée.
• Chaque élément est "entouré" de li, ce qui permet d'avoir le retour à la ligne automatique et le nombre et le point au début.
B) Liste non ordonnée Et bien là, c'est le même principe, mais on échange ol par ul.
- Code:
-
<ul><li>Premier élément. </li><li>Deuxième élément. </li> <li>Troisième élément. </li></ul>
- Premier élément.
- Deuxième élément.
- Troisième élément.
Ça nous donne donc de jolies puces. o/
Ce qu'il faut savoir :
• On utilise la balise ul pour "entourer" toute la liste ordonnée.
• Chaque élément est "entouré" de li, ce qui permet d'avoir le retour à la ligne automatique et la puce au début.
Mettre en valeur quelques mots
Bon. Passons maintenant à des balises qui ne sont quasiment jamais utilisées. Mais je les aime bien quand même parfois. (Oui enfin... Souvent j'utilise une balise universelle, qui sera l'objet d'un prochain cours.)
Enfin bref ! Passons à mes petites balises qui permettent de
mettre certains mots en valeur. Oui. Certains mots seulement. De plus, selon à quel point on veut mettre en valeur le mot et ce pour le navigateur. J'ai conscience qu'en disant cela, ça paraît abstrait, mais vous comprendrez au fur et à mesure. (Ou pas.
)
A) Mettre un peu en valeur : em - Code:
-
La vie est <em>belle</em>.
La vie est
belle.
Par défaut, et je dis bien
par défaut, le navigateur le mettra en italique. Mais em n'est pas un moyen de mettre en italique. SURTOUT PAS. Parce qu'il faut se le rappeler : le HTML est le squelette, le CSS la peau, les muscles, tout ça tout ça. Donc, c'est avec le CSS qu'on mettra en italique. Ça ne sert strictement à rien d'utiliser em pour mettre en italique, ce n'est pas son but.
B) Mettre beaucoup en valeur : strong (oui non c'est pas français ? Chuuuuut.)
- Code:
-
La vie est super <strong>belle</strong>.
La vie est super
belle.
Par défaut encore, le navigateur mettra en gras. Mais là encore, strong ne sert pas à mettre en gras.
C) Mettre énormément en valeur : mark - Code:
-
La vie est gavé <mark>belle</mark>.
La vie est gavé
belle. Oui je suis bordelaise. Roh.
Par défaut, le navigateur surlignera. C'est moche, et la balise ne sert pas à ça, autant le répéter.
Sachez que l'italique de em, l'épaisseur de strong et le surlignement de mark peuvent tout à fait être changés par le CSS. Mais on apprendra cela plus tard voulez-vous ?
Le chouchou
Gardons maintenant le meilleur pour la fin, le simple et pratique que l'on a tendance à oublier, j'ai nommé... La balise du
retour à la ligne !
En effet, quand c'est pour des fiches sur le forum, cette balise ne sert à rien, mais elle vous sauve la vie pour créer une PA par exemple. Et puis parfois, si vous la voyez, au moins vous la reconnaîtrez.
- Code:
-
Mon petit texte. <br /> Et la fin.
Mon petit texte.
Et la fin.
Comme vous le voyez, c'est une balise orpheline, parce que ce n'est qu'à un seul endroit qu'on trouve un retour à la ligne.
Le tuto se termine ici et on se retrouve au prochain ou au sujet d'aide par
ici pour des questions ou autre. Je vous encourage à utiliser vous-mêmes toutes les balises apprises jusqu'ici pour comprendre leur effet. ^^