The big tuto du html !

Invité

Bonsoir !
Mon activité approchant du néant au niveau des RP, j'ai cependant trouvé le temps pour travailler, et vous offrir un petit cadeau bonux : le big tuto du HTML !

Alors, le HTML, couplé au CSS, est un langage qui sert à coder des sites dits "statiques" au contraire des sites dynamiques qui contiennent plus de fonctionnalités (les onglets par exemple tiens, mais on en reparlera !)
Le CSS3 contient d'innombrables possibilités de mise en forme, mais n'est pas supporté par tous les navigateurs. En clair, si vous voulez des arrondis, bannissez Google Chrome. Et si vous voulez un site qui ne soit pas hideux, bannissez également Internet Explorer.

Le fait est que Firefox est le navigateur le plus prisé des développeurs, et de la plupart des utilisateurs, tout simplement parce qu'il est l'un des rares à se mettre à jour au niveau des normes HTML et CSS3.

Bref, cette fois-ci, je vais vous apprendre à faire quelque chose de très simple :

Mettre un beau titre au dessus de vos rps

Et bien oui, on va pas mettre la charrette avant les bœufs que voulez-vous ! Alors, pour vous simplifier la vie, on ne va considérer qu'il n'existe que trois hiérarchies de titres qui peuvent se décliner à volonté et sous toutes les sauces. En parfaite personne très mal organisée que je suis, sachez que je m'emmêle sans arrêt les pinceaux avec les différents niveau de priorité qui sont pourtant simplement numérotés.

Votre gros titre

Votre titre de niveau 2

Votre titre de niveau 3

Code:: <h1>Votre gros titre</h1>
<h2>Votre titre de niveau 2</h2>
<h3>Votre titre de niveau 3</h3>

Vous aussi vous voyez le bins ? Oui, le niveau prioritaire est plus petit que les autres. Et pourtant, je peux vous assurer que tous les navigateurs reconnaissent le H1 comme prioritaire sur le H2.

Ce qui ne vous laisse qu'une seule solution *rire démoniaque* Apprendre à customiser votre texte !

Il y a trois manières de customiser un texte en CSS

Coder le style à même le code html

Coder le style dans le d'une page HTML

Coder le style dans une page CSS externe et la lier à la page HTML en question (méthode utilisée sur ce forum pour la tête des fiches de présentation par exemple)

Nous ne verrons pas la méthode du head, à moins que vous ne vouliez en apprendre plus sur la méthode de codage d'une page HTML basique ^^. Alors, voyons comment nous ajoutons un style à une balise html simple.

Code:: <h1 style="votre style détaillé ici;">Votre titre</h1>

Eh oui. Pour avoir du style, votre titre doit avoir une place pour... et bien le style. Pour vous illustrer ceci par exemple, nous allons faire très simple.

Newbie a écrit:: Et si moi je veux mettre mon titre en taille 24, et blanc ?

Rien de plus simple cher newbie, il suffit de mettre dans tes guillemets de style les propriétés correspondant à la couleur et à la taille. Comme la majorité des codeurs parlent anglais, je suis navrée d'annoncer aux anglophobes que le code va leur donner du fil à retordre. Enfin, quelques mots de vocabulaire vont vite rentrer (à force de manipuler les codes on les connaît par coeur, et on peut faire peur aux gens en discutant avec qqun à l'autre bout de la pièce, niark !)

Alors, la couleur, en anglais, ça se dit color. Pour la définition, en css elle se fait par le signe des deux points. Et une fois votre propriété codée, n'oubliez pas de la fermer par un point virgule, sans quoi vous risquez de créer un vortex et ON VA TOUS MOURIR.

*tousse tousse*

Pour définir une couleur vous avez trois possibilités dont une que je ne connais pas du tout et qui je ne trouve pas pratique du tout. La première, c'est de l'appeler par son nom.

Par exemple, pour blanc, vous mettrez color:white;

Ou alors, vous pouvez l'appeler par son code Hexadécimal (plus pratique selon moi)

Par exemple pour blanc, vous mettrez color:#FFFFFF;

Le pourquoi le code Hexadécimal est plus pratique est une simple question d'utilisation de normes de couleur web. Pour ceux qui ont photoshop, ce sont les couleurs listées dans votre bibliothèque. Pour les autres, tapez "code hexadécimal" dans wikipédia, vous les aurez aussi. Si cela peut vous aider, on a #000000 le noir, #FFFFFF le blanc, #FF0000, le rouge pétant (les autres couleurs étant du vert et du bleu pétant je les bannis de ce tuto, nah.)

Pour revenir à nos moutons

Pour définir une taille de police, il suffit de traduire bêtement en anglais ce que vous voulez faire en français. Police en anglais se dit font. Et taille se dit size. Ainsi, pour définir une taille de police, on utilisera l'attribut font-size.

Alors, voyons ce que ça donne

Titre en blanc de taille 24px

Code:: <h1 style="font-size:24px;color:#FFFFFF;">Titre en blanc de taille 24px</h1>

Vous aussi vous avez dû surligner le texte pour y voir quelque chose ? Il existe une propriété CSS3 très pratique qui permet d'appliquer derrière votre texte... une ombre portée =)

Elle se code de la façon suivante :

Code:: text-shadow:#couleur Xpx Ypx Zpx

Avec x le décallé horizontal, Y le décallé vertical et Z la diffusion (si votre ombre s'étend ou est plutôt compacte)

Mettons donc une ombre noire, pour bien trancher !

Titre en blanc de taille 24px

Code:: <h1 style="font-size:24px;color:#FFFFFF;text-shadow:#000000 1px 1px 2px">Titre en blanc de taille 24px</h1>

Aah, tout de suite, ça va mieux !

newbie a écrit:: Oui mais moi, je n'aime pas trop le texte à gauche comme ça, ça m'agresse les nyeux. J'aime ce qui est symétrique, et je veux que ce soit bien centré.

Pas d'inquiétude mister newbie, réfléchissons à ce que vous voulez faire. Aligner le texte au centre. Si vous vous souvenez de ce que j'ai écris plus haut, il suffit de traduire ce que vous voulez faire. Texte se dit text. Aligner se dit align. Et centre se dit center. Pour aligner un texte au centre, vous ajoutez donc l'attribut text-align:center;

newbie a écrit:: Et si je veux le mettre en petites majuscules, hein ?

Pas d'inquiétude monsieur Newbie, ce que vous voulez créer c'est une variante de texte en petites majuscules ! Donc, un text-variant:small-caps; avec caps qui veut dire majuscules, bien sûr Wink

Codons donc vos exigences.

Titre en blanc de taille 24px

Code:: <h1 style="font-size:24px;color:#FFFFFF;text-shadow:#000000 1px 1px 2px;font-variant:small-caps;text-align:center;">Titre en blanc de taille 24px</h1>

Maintenant que monsieur Newbie est satisfait, je vais pouvoir vous apprendre deux ou trois astuces plutôt sympa, sur les quatre points les plus utiles pour coder un beau titre =)

Mettre un fond sur son titre

Vous avez trois choix.

Mettre un fond uni

Mettre un fond dégradé (que je n'utilise jamais, mais il existe)

Mettre un fond avec une image

Puisqu'une image vaut mieux qu'un discours, je vous montre ce que ça fait, et après j'explique !

Avec un fond uni

On utilise la propriété background-color:couleur; Avec la couleur en hexadécimal ou textuel, à votre convenance.

Avec un fond imagé

On utilise la propriété background-image:
Il y a deux façons de le construire :

background-image:url('adressedel'image'); si votre style s'ouvre sur des guillemets

background-image:url("adressedel'image"); si vous style s'ouvre sur un apostrophe.

Faites attention à ce détail. Généralement les navigateurs n'aiment pas trop qu'on ferme un truc en plein milieu, et si vous mettez des guillemets après le style ET avant l'url, il va considérer que votre style se ferme avant l'url. Un ordinateur, c'est super bête, ça fait tout ce qu'on lui dit.

Maintenant, on va se pencher sur mon super coupaing !

Le border-radius !

C'est quoi ça ? Un cousin du cubitus ? Que nenni jeunes gens, il s'agit d'une propriété CSS3 qui vous permet... d'arrondir les angles. Au sens propre.

Il fonctionne de la manière suivante :

Code:: border-radius:anglehautgauchepx anglehautdroitepx anglebasgauchepx anglebasdroitepx;

Je vous vois venir "HEEEEIN J'AI RIEN COMPRIS" Alors, démonstration :

border-radius:10px 0px 10px 0px;

border-radius:10px 10px 0px 0px;

border-radius:10px;

(Eh oui, si tous les angles ont la même valeur, on peut tricher =3
En toute rigueur il faudrait aussi rajouter le paramètre webkit-border-radius et o-border-radius mais je vous ai déjà dit que Chrome et IE c'est du caca.

Alors, on va passer à un petit paramètre bien sympa dans la foulée: le line-height.

Quand votre texte dépasse -comme sur le titre au dessus là- il vous suffit de définir un line-height de la taille de votre police pour régler le problème.

Cela dit, passons enfin à notre dernière propriété pour les titres.

Le border (tout court)

Il se construit sur trois paramètres

L'épaisseur du bord

La couleur du bord

Le style du bord

Là, de même que pour le border on peut choisir de modifier tous les bords à la fois (au quel cas on code avec border:couleur épaisseur style) Ou bien de coder un bord à la fois.
Par exemple si moi je ne veux que mes bords latéraux qui soient de couleur, allez, dorée, je ne vais appeler que les propriétés border-right et border-left. (border-top et border-bottom étant les deux dernières).

Pour l'épaisseur du bord, elle se définit en px. Plus le chiffre est élevé, plus le bord sera épais.

Pour la couleur du bord, hexadécimal ou texte, à votre convenance.
Pour le style, j'en connais trois, mais je suis sûre qu'il en existe d'autres. Solid fait un trait continu. Dotted fait des pointillés. Dashed fait de "longs" pointillés.

Pour vous donner un exemple on va souligner un titre de ces trois manières-là.

border-bottom:#ec8c0b 2px solid;

border-bottom:#ec8c0b 2px dotted;

border-bottom:#ec8c0b 2px dashed;

Et je terminerai donc avec un dernier point :

Quelques titres tout faits pour vous encourager à coder vous-même !

So british

Code:: <h1 style="background-image:url('http://obsession27.free.fr/divers/fonds/ray4.gif');font-size:18px;color:#9a003c;text-shadow:#FFFFFF 1px 1px 2px;font-variant:small-caps;text-align:center;border-radius:10px 0px 10px 0px;line-height:24px;border-top:#9a003c 2px solid;border-bottom:#9a003c 2px solid;">So british</h1>

Printanier tout rond

Code:: <h1 style="background-color:#5fbd2a;font-size:18px;color:#230f08;font-variant:small-caps;text-align:center;border-radius:10px;line-height:24px;border:#230f08 1px solid;">Printanier tout rond</h1>

Personnel

Code:: <h1 style="padding:5px;width:500px;margin:auto;line-height:50px;border-radius:10px 10px 0px 0px;background-image:url('http://i363.photobucket.com/albums/oo73/minaeris/sharky.png');color:#000000;text-shadow:1px 1px 2px;font-family:calibri;letter-spacing:-2px;font-size:200%;text-align:center;border:#000 1px dotted;">Personnel</h1>

Note :
width:500px; la largeur est de 500px
margin:auto; Le cadre ainsi créé est centré sur la page

A vos claviers !