Bienvenue sur le forum !

Si vous souhaitez rejoindre la communauté, cliquez sur l'un de ces boutons !

Anniversaires du jour

Maixem jhczmaigh Agamarilmaigh Sabersong LarryErosy MisHomia

[Tuto] Le Html

Choupa51Choupa51 VIP
juillet 2016 modifié dans Aide
image

Le Html semble souvent compliqué, et sa simple maîtrise semble, pour tout débutant, un peu "magique" (d'où cette représentation un peu plus haut).
Cependant, avec une bonne base, et quelques connaissances, vous arriverez bientôt à faire de très jolis post !

Qu'est-ce-que le Html ?

Selon notre ami google, voici la définition du Html : Le Html est un langage informatique utilisé sur Internet. Ce dernier n'est pas vraiment un langage de programmation, mais de mise en page. Et c'est exactement ce que nous allons apprendre à faire !

Il y a deux manières d'utiliser le Html sur ce forum. Grâce aux raccourcis, ou vos pitites mains !

- Les raccourcis : image

Il sont assez pratiques pour ceux qui n'y connaissent rien, mais on se retrouve assez limité dés qu'on cherche à faire dans l'esthétique.

- Les balises : Tout ceux qui ont fait du BBcode savent de quoi je parle. Cependant, ces balises sont différents du BBcode, ou même du Css, pour ceux qui les utilisent. technique un peu plus longue, mais parfaite pour ceux qui aiment les choses à leur manière : C'est ce que vous verrons ici !

Avant commencer ...

Si vous avez un oeil avertis et que vous avez fait un tour sur votre signature, vous aurez sûrement remarqué que le cadre était légèrement vert lorsque vous vouliez écrire dessus, et non votre post sur le forum. Ce petit cadre vert signifie que vous êtes à la "source" de votre message. Pour traduire, si le fond de votre post est blanc quand vous rédigez, les balises html ne marcheront pas.

Pour accéder à la source du message, et donc utiliser les balises, il suffit juste de cliquer sur la feuille à coté de l'imprimante, dans les raccourcis !

image

Et voilà, c'est partit !

/!\ Chez certaines personnes, l'icône du Smiley peut cacher l'icône Page : Si cela arrive, pensez à dezoomer votre page Internet !

Les Balises 

► La base

Pour utiliser les balises, ils faut les "encadrer" par des crochets. On ouvre la balise par <...> et on la ferme par </...>.
Avant toute chose, il faut impérativement encadrer votre message par la balise <p> </p>. Sans cela, certaines de vos balises ne seront pas prises en compte.


Code :
<p>Oy !</p>
Résultat : 
Votre texte

► Le positionnement du texte
De base votre texte est positionné ainsi : imageEn gros, votre marge se trouve à gauche. Et bien nous allons apprendre à changer cela !
Nous allons ajouter un attribut à notre fameuse balise <p>. Rassurez vous, il n'y a rien de plus simple !
Nous allons rajouter l'attribut align à notre <p>. Cet attribut nous permettra d'attribuer une valeur à notre paragraphe concerné. Pour positionner notre texte, nous avons 3 valeur différentes :
left : Aligne le texte vers la gauche.
center : Centre le texte
right : Aligne le texte vers la droite.

/!\ Il est très important que les valeurs soit encadrées ainsi : "valeur" !


Code :
<p align="left">Blablabla</p>
Code :
<p align="center">Blablabla</p>
Code :
<p align="right">Blablabla</p>
Résultat :

Blablabla

Résultat :

Blablabla


Résultat :

Blablabla

 ► La couleur
Je ne sais pas pour vous, mais moi, j'adore pouvoir colorer mes messages ! Puis j'ai vue la palette de couleur disponible dans les raccourcis. Mais arrêtez de pleurer, car les balises sont là pour ça !
/!\ Avant toute chose : Afin d'utiliser les couleurs, il vous faudra leur ID. Si vous ne savez pas comment faire, il y a plusieurs site. je vous renvois vers celui-ci : http://www.code-couleur.com/
Mais il existe plein d'autre site pour ça !
Bien, maintenant que cela est fait, passons à la balise.

Nous allons utiliser une toute nouvelle balise : <font></font> .
Cette balise sert avant tout à modifier votre texte (couleur, taille, police, etc ...). Voilà pourquoi c'est elle que nous utilisons pour la couleur.
Nous allons utiliser un nouvel attribut : color (Wow !) et la valeur ici sera l'ID de la couleur voulue !

/!\ Cette fois, en plus de devoir mettre la valeur entre guillemets, il ne faudra pas oublier de mettre le signe # devant l'ID de la couleur, comme ça : "#IDcouleur"



Code :
<font color="#59C1AC">Votre texte</font>
Résultat :
Votre texte

Vous pouvez même faire un dégradé de couleur, pour les plus courageux !


Code :
<font color="#de5959">V</font><font color="#cf665d">o</font><font color="#c07462">t</font><font color="#b18166">r</font><font color="#a28e6b">e </font><font color="#949c6f">t</font><font color="#85a973">e</font><font color="#76b678">x</font><font color="#67c37c">t</font><font color="#58d181">e</font>

Résultat :
Votre texte

► Les images
Voici la partie la plus demandée. "Choupa, dit moi comment mettre une image dans ma signature, pitiiiiéééé !"
Et bien voilà mes amis, je vais vous révéler ... le secret !

Tout d'abords, découvrons une nouvelle balise ensemble, mes amis ! La balise <img/>.
La balise ne contiendra pas un ou deux attributs, mais bien 4, que nous allons voir tout de suite !
src : Cet attribut aura pour valeur l'URL de l'image souhaitée, tout simplement ! C'est tout simplement la source de la page !
alt : Cet attribut est un texte alternatif : C'est une description de ce qu'est l'image. Cet attribut est obligatoire : Si l'image n'est pas téléchargé, c'est ce texte qui apparaîtra. Cependant, vous n'êtes pas obligés de faire une description très détaillée non plus ...
width : Attribut qui prendra pour valeur la largeur de l'image.
- height : Attribut qui prendra pour valeur la hauteur de l'image.

/!\ Ne fermez la balise qu'une fois tout les attributs rentrés, de cette sorte :
<img src="..."
alt="..."
width="..."
height="..." />
La largeur se mesure en pixel.



Code :
<img src="http://image.noelshack.com/fichiers/2016/30/1469975622-591115t8qpmw0bs5.gif"
alt="Séparateur de texte"
width="85"
height="13"/>

Résultat :
Séparateur de texte
Voilà, vous savez à peu près la base du HTML !
Si vous avez des questions, ou si vous voulez un tuto sur d'autre balise, je ferais de mon mieux !
En espérant que cela vous aide :3


Ban'

Messages

  • Volcy_Volcy_ Administrateur
    Merciiiiiiii :3
    Tenter de donner du plaisir je crois bien que c'est à ça qu'on sert
    En donner pour mieux en prendre ça procure du reconfort a l'âme

    Poulet

  • Y en a qui n'ont pas compris comment dimensionner les images en signature ;)
  • Volcy_Volcy_ Administrateur
    juillet 2016 modifié
    Je vois pas de quoi tu parles Koxxy :P
    Et boommmm je l'ai même centré ! Alors ça dit quoi là ? :P
    Tenter de donner du plaisir je crois bien que c'est à ça qu'on sert
    En donner pour mieux en prendre ça procure du reconfort a l'âme

    Poulet

  • ChocoPurChocoPur Réserviste
    j'adore ta signature vovo =)
    PurHapiste (ou chocoPur, pour les intimes)

  • WuStyWuSty Modérateur
    C'est génial, merci Choupa ! :champignon3
    I put my socks on my feet, just so that my soul won't fall through my toes
  • Volcy_Volcy_ Administrateur
    @Choupa51 Question ! Pour les videos on fait comment ? Enfin si on peut faire.

    J'aurais bien mit un GIF en signature :s
    Tenter de donner du plaisir je crois bien que c'est à ça qu'on sert
    En donner pour mieux en prendre ça procure du reconfort a l'âme

    Poulet

  • ... La balise image prend les gif en compte x]
    Pour les balises vidéo, tout comme celles audio, je crois qu'elles ne marchent pas.


    Ban'

  • Volcy_Volcy_ Administrateur
    Vovo te remercie :DDDDD
    Tenter de donner du plaisir je crois bien que c'est à ça qu'on sert
    En donner pour mieux en prendre ça procure du reconfort a l'âme

    Poulet

Connectez-vous ou Inscrivez-vous pour répondre.