Galerie de créations pour RPG par Joy
 
AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  
Le Deal du moment :
Google Pixel 7 5G – Smartphone 6,3″ OLED ...
Voir le deal
316 €

Partagez
 

 Tuto 3 | Le texte

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Joy
FondAdmin narcissique
Joy

Messages : 628
Date d'inscription : 06/06/2012
Âge : 25
Localisation : Derrière son écran, confortablement installée au pays des licornes pégases.

Tuto 3 | Le texte  Empty
Message(#) Sujet: Tuto 3 | Le texte    Tuto 3 | Le texte  EmptySam 20 Déc - 12:50

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>
  1. Premier élément.
  2. Deuxième élément.
  3. 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. Fail)

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. ^^
Revenir en haut Aller en bas
https://dream.forumsactifs.net
 

Tuto 3 | Le texte

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Tuto 2 | Sujet d'aide
» Tuto 3 | Sujet d'aide
» Tuto 1 | Programme & Le HTML
» Tuto 1 | Sujet d'aide
» Tuto 2 | Les liens et les images

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Dream :: Tutoriels :: Tutoriels HTML/CSS-