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 :
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 !
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>
► Le positionnement du texte
De base votre texte est positionné ainsi : . En 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> |
|
| |
► La couleurJe 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.
Résultat :
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
Messages
En donner pour mieux en prendre ça procure du reconfort a l'âme
En donner pour mieux en prendre ça procure du reconfort a l'âme
En donner pour mieux en prendre ça procure du reconfort a l'âme
En donner pour mieux en prendre ça procure du reconfort a l'âme