Coder en Html (sur le forum)

J'ai chercher pendant environ très longtemps l'endroit idéal pour ce que je vais fièrement nommer : Tutoriel du HTML !

Bref je suis content.

Je vais partager avec vous mes petite connaissance en HTML qui vous permettrons ainsi de donner un peut de gueule à vos message :

Bon commençons par les base que vous avez même pas besoin de savoir (eh oui les balise sont automatiquement placée lorsque vous cliquez sur la barre d'outil en haut)

Souligner : <U>...</U> (a savoir que vous mettiez des majuscule ou non ne change rien à partir du moment ou c'est la même chose sur les deux balise)

En gras : <strong>...</strong> ou <B>...</B> (au choix pour moi il n'y a pas photo mais bon...)

Italique : <I>...</I>

En Barré : <strike>...</strike> ou <s>...</s> (bah pareil...)


Il est possible que certain des code demande des "[ ]" au lieux des "< >"

Bon après deux trois truc moins évident :

Passage a la ligne : <br>... (tout a fait inutile sur ce forum, mais des éditeur Html ne prenne pas en compte "entrer" donc peut servir quand même)

Ensuite les lien :

Tout d'abord vous devez savoir que plusieurs type de lien existe :

Lien vers une même page :

D'abord faite un point d'ancrage : <a href="nom de votre ancre">texte qui seras ciblé</a>

Puis fait votre lien :
<a name="nom de l'ancre ciblé">texte qui apparaitra</a>


Le lien vers une autre page :

<a href="Nom précis de la page">texte qui apparaitra</a>

Malgré ça ce forum (je pense) dispose de ce qu'on appèle le "magic link" ("lien magique" pour les inculte) il vous suffit de copier l'adresse de la page ou vous voulez aller et le lien se fait tous seul... (encore une technique bon pour les assisté du cerveau)


Et maintenant un truc assez fastidieux : les tableau

Pour démarrer un tableau : <table>
si vous voulez des bordure a votre tableau <table border>

Pour démarrer une ligne <tr>

Pour démarrer une cellule <td>

soit :

<table>
<tr>
<td>...</td><td>...</td>
</tr>
<tr>
<td>...</td><td>...</td>
</tr>
</table>

Personnellement j'utilise cette présentation mais si vous avez pas peur de vous perdre vous pouvez faire tout d'une traite :

<table><tr><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td></tr></table>

Bref...


Ensuite les couleur

Pour un texte vous faite <font color="#******">...</font>
Ne surtout pas oublier le "#" les six "*" étant le code hexadécimal de la couleur.

Pour le fond d'un tableau : <table bgcolor="#******">...</table>
Pour le fond d'une cellule : <td bgcolor="#******">...</td>

Petite astuce pour les code hexadécimaux :
la numération exadécimale se fait de cette manière : 0 1 2 3 4 5 6 7 8 9 a b c d e f;
puis ensuite on passe à : 10 11 12 13...1a 1b 1c etc.

Les deux premier chiffre du code de couleur représente le rouge, ensuite le vert et enfin le bleu (pour ceux qui connaisse suffisamment le binaire vous devriez comprendre assez vite, voir vous avez déjà compris).

Donc tous simplement plus vous mettez un grand chiffre au rouge plus la couleur seras rouge de la même manière que sur un logiciel de dessin lorsque cous avez de 0 à 255. Donc vous pouvez mixer vos couleur à volonté !

quelques couleur de base :
Rouge : FF0000
Bleu : 0000FF
Vert : 00FF00

sera ajouter prochainement :

Mise forme textuel : taille; police; Titre; alignement
Liste : numéroté; ordonné
Tableau : mise en forme cellulaire et autre.

Et plein d'autre mais plus tard quand même...

°°'

Merci pour ce bon tutorial qui apprendra rapidement les bases du HTML aux néophytes. + 4

Bien bien bien; (well well well, mister...) ceci n'a aucun rapport avec se dont je doit vous parler, n'en prenez donc pas compte dans votre apprentissage du HTML :

Nous disions donc la mise en forme textuel :

Pour changer les taille d'un texte : <font size="*">...</font>
"*" étant un chiffre, la taille de base est 3, vous pouvez aussi mettre "+1" ou "-2" ce qui diminuera ou augmentera la taille mais par rapport à la taille standard et non la taille actuel.

Pour mettre en exposant : ^...
Pour mettre en indice : _...

Les titre maintenant :

il existe plusieurs tailles :

<h*>...</h>

avec "*" un chiffre de 1 à 6; 1 étant le plus grand

Pour changer de police : <font face="nom de la police">...</font>

alignement a gauche : <p align="left">...</p>
Centrer <p align="center">...</p> ou <center>...</center>
a droite <p align="right">...</p>

les balises <pre>...</pre> marque une zone préformaté
(en gros elle garde la mise en forme de votre code source, donc si vous faite deux espace au lieu d'un elle vous garde les deux espace, et pareil pour les enter et autres, ces balise sont inutile sur ce forum mais bon je l'ait déjà écrit tous les éditeur ne prenne pas en compte votre mise en forme.)


Ensuite un truc très pratique du HTML, les listes :

D'abord les liste de définition :

ouvrir la liste : <dl>
puis <dt> pour le titre (il seras mit en gras)
et enfin <dd> pour votre paragraphe (le texte seras légèrement décaler par rapport au titre

soit :
<dl>
<dt>titre
<dd>...
<dd>...
<dt>titre 2
<dd>...
<dd>...
</dl>

Là encore la présentation n'a pas d'importance mais est préférable lorsque vous en êtes a vos débuts


Ensuite les liste dites "a puces" :

Plusieurs code existe pour obtenir un rond plein :
des balise <li> en début de ligne (attention ne pas fermer la balise)
ou sinon ouvrer des balise <ul> ou <dir> (que vous refermerez apprès)
puis faite <li> a chaque début de ligne

soit :
<li>...
<li>...

ou :

<ul>
<li>...
<li>...
</ul>

ou encore :

<dir>
<li>...
<li>...
</dir>

Bref je ne ferais plus de commentaire sur la présentation du code source.

pour des liste a puce spéciale
carré : <ul type="square">
cercle : <ul type="circle">


Pour des liste dite ordonnée :

pour une liste numéroté de 1 à ...
<ol>
<li>...
</ol>

Pour démarrer a un chiffre spécifique : <ol start="*"> "*" étant le numéro de départ

<ol type="A"> pour une liste alphabétique en majuscule
ou
<ol type="a"> pour une liste alphabétique en minuscule.

Pour une Liste en chiffre romain :<ol type="I">

Vous pouvez faire ce que l'on appel une liste emboitée :
<ol type="I">
<li>Titre 1
<ol>
<li>petit 1
<li>petit 2
</ol>
<li> Titre 2
<ol start="3">
<li>petit 3
<li>petit 4
</ol>
</ol>

Vous pouvez en additionner autant que vous voulez mais souvenez vous de fermer les balise au bonne endroit, sans quoi toute votre présentation seras a corriger (ce qui peut prendre énormément de temps, si par exemple vous faite tout d'une traite...)


Bien maintenant nous allons finir par deux trois chose sur la mise en forme des tableau :

Fusionner des cellule :
Colonne :
<td colspan="*">texte qui apparaitra dans les colonnes fusionnées</td>

Ligne :
<td rowspan="*">texte qui apparaitra dans les ligne fusionnées</td>

A chaque fois "*" est le nombre de colonne ou de ligne que vous fusionné à partir de la cellule ouverte

Pour aligner les texte dans :
les cellule : <td align="*">
tous le tableau <table align="*">
vous savez déjà quoi mettre à la place de "*"... (j'espère, si non revenez au début du message et relisez)

Pour attribuer une légende au cadre :

en haut : <table><caption valign="top">...</caption>
en bas : <table><caption valign="bottom" align="right">...</caption>

C'est pas mal pour aujourd'hui non ? si vous avez des code ou des astuce d'HTML n'hésiter pas à les mettre, merci de votre lecture !

Ca a de la gueule, merci pour ton boulot

Merci ^^
mais j'ai vraiment pas chercher trop loin j'ai aligné mes connaissance et puis point barre... Enfin c'est un peu brouillon et j'aurais essayer ne serait ce que faire des catégorie... Et je suis arriver au bout de mes connaissance (si un jours j'en ait le temps et le courage je remanierais tous ça pour que ce soit plus simple de compréhension et aussi pour ajouter les truc que je ne connais pas (il suffit de chercher pendant 15 sec sur internet pour comprendre que si vous voulez tous connaitre il vous faudra plus que ces deux post ^^) Bref... c'est pas pour aujourd'hui quoi ^^

Ca apprend tout de même les bases,histoire de programmer un petit truc en html sympa.

Mouais... c'est suffisant pour un forum où de toute façon on utilise pas trop ce genre de mise en forme...

Mais si j'arrive a suffisamment comprendre, je posterais peut être un tutoriel sur le ruby (nettement plus utile quoi que clairement inaccessible a certain pour ne pas te citer Dunkel...)
J'en suis encore à la phase d'apprentissage ^^...