Bienvenue sur ma page d'aide au HTML et au CSS:


De nombreuses personnes se demandent souvent comment coder leurs pages neopets, leurs galeries, leurs boutiques, leurs guildes, etc. C'est pourquoi j'ai décidé de créer cette page afin de vous aider à comprendre comment fonctionne les codes. Pour cela en plus de vous mettre les codes à utiliser, je vous expliquerai à quoi ils servent, et comment s'en servir.
Si vous avez la moindre questions vous pouvez toujours me maillez, je suis ouverte à toutes questions. De plus veuillez accepter mes excuses pour le temps d'absence de cette page, je ne pouvais pas la mettre à jour par manque de temps, mais comme promis la revoilà.

NB: Tout ce qui est présent sur cette page (en dehors de la bannière pour me lier, qui a été réalisé par kach - voir dédicace - et en dehors de la photo utilisé pour mes exemples - voir dédicace pour cerle - ) a été fait réalisé par moi même, donc il est strictement interdit de prendre certains de mes graphs, si je retrouve une seule copie je fais un scandale, faut faire gaffe je suis très teigneuse donc... xD


I. Les Codes HTML:

(retour en haut de la page)

Ces codes, vont vous être utile pour des choses très précises, et ponctuelles, comme souligner un texte, changer sa taille...

1. Présentation:

(retour en haut de la page)

Mettre un texte en gras:
Exemple: Texte en gras
Le code à utiliser:

Mettre un texte en italique:
Exemple: Texte en italique
Le code à utiliser:

Souligner un texte:
Exemple: Texte souligner
Le code à utiliser:

Barré un texte:
Exemple: Texte Barré
Le code à utiliser:

Ligne au dessus d'un texte:
Exemple: Ligne au dessus
Le code à utiliser:

Texte Clignotant:
Exemple: Texte Clignotant
Le code à utiliser:

Changer la taille d'un texte:
Exemple:
Taille 1
Taille 2
Taille 3
Taille 4
Taille 5
Taille 6
Taille 7
Le code à utiliser:

Changer la couleur d'un texte:
Exemple:Changer la couleur d'un texte
Le code à utiliser:


NB: Pour plus de renseignement sur les couleurs et les quelques codes couleur à utiliser, je vous donne rendez vous dans la section couleur.

Changer la police d'un texte:
Exemple: Changer la police d'un texte
Le code à utiliser:

NB: Il existe d'autres types de police, comme arial, comic sans ms, georgia, time new roman, etc

Revenir à la ligne:
Exemple: Revenir à
la ligne
Le code à utiliser:

NB: on peut en ajouter plusieurs si on souhaite sauter des lignes

Sauter une ligne:
Exemple: Sauter

une ligne
Le code à utiliser:

NB: on peut en ajouter plusieurs si on souhaite sauter des lignes

Aligner son texte à gauche:
Exemple:

Aligner son texte à gauche

Le code à utiliser:

Aligner son texte à droite:
Exemple:

Aligner son texte à droite

Le code à utiliser:

Centrer son texte:
Exemple:

Centrer son texte

Le code à utiliser:

Faire une liste avec des puces:
Exemple:

  • Faire une liste avec des puces
  • Faire une liste avec des puces
  • Faire une liste avec des puces
Le code à utiliser:

NB: On peut rajouter autant de puces que l'on souhaite

Faire une liste avec des numéros:
Exemple:

  1. Faire une liste avec des numéros
  2. Faire une liste avec des numéros
  3. Faire une liste avec des numéros
Le code à utiliser:

NB: On peut rajouter autant de numéros que l'on souhaite

Faire une ligne horizontale:
Exemple:


Le code à utiliser:

Faire une case pour marquer un texte:
Exemple:

Le code à utiliser:

NB: utiliser les crochets normaux

2. Les liens et les ancres:

(retour en haut de la page)

Lier une autre page:
Exemple: Lien vers neopets
Le code à utiliser:

Les ancres:
Explications: Une ancre sert à renvoyer à un autre endroit sur une autre page.
Exemple: retour en haut de la page
Le code à utiliser:
Comment installer le code:
Etape 1: - définir ce que l'endroit où l'on souhaite renvoyer la personne, et celui où la personne va cliquer pour être renvoyée.
Etape 2: - La balise avec "h2" doit être placée au niveau de l'endroit où l'on souhaite renvoyer la personne. On doit également donner un nom quelconque à cette balise (dans mon code c'est le NOM) permettant de repérer le point d'ancrage.
Etape 3: - La balise avec le "a" doit être placée au niveau du lieu de renvoie, c'est à dire là où la personne doit cliquer pour être reportée ailleurs. On va lui donner le même nom que précédemment pour créer le lien entre les deux endroits (dans mon code c'est le NOM)
Etape 4: - Regarder si ça marche, et me dire si les explications sont claires maintenant xD

3. Les images:

(retour en haut de la page)

NB: Dans cette section, il ne faut pas oublier de mettre les deux balises d'ouverture et de fermeture utiliser habituelle
NB bis: La photo représente le chien de Cerlenea, eh oui ton chien va devenir une star xD

Mettre une image:
Exemple:

Le code à utiliser:

Faire une bordure autour d'une image:
Exemple:

Code à utiliser:

Changer la taille de l'image:
Exemple:

Code à utiliser:

Changer la taille de l'image avec une bordure:
On peut combiner deux codes comme ceci, nous retrouverons un peu plus loin de nouvelles combinaisons.
Exemple:

Code à utiliser:

4. Les Tableaux:

(retour en haut de la page)

Début du tableau:

Explications:
- table border : représente la taille de la bordure du tableau
- cellspacing : représente la distance de la bordure du tableau et du texte
- width : représente la taille du tableau

Debut d'une rangée dans la tableau:

Nouvelle case:

Exemple d'un tableau:

Case 1 Case 2 Case 3 Case 4
Case 1 Case 2 Case 3 Case 4

Code de cet exemple:

II. Les Codes CSS:

(retour en haut de la page)

Avant toute chose, sur néo chaque code CSS doit être entourée par ces deux balises:

1. Le principe du CSS:

(retour en haut de la page)

Alors les codes CSS servent à placer, et modifier un texte, une image. Ils sont un peu plus compliquer à utiliser, mais beaucoup plus pratique, car on n'est pas obliger de répéter à chaque fois le code, ils permettent également de faire plus de choses, c'est pourquoi les codes CSS sont très utilisés sur néo et ailleurs.
Dans toute cette partie je vous montrerez comment modifier et manier les codes CSS, ils sont très malléables, et ceux que je vous propose n'est pas fixe. Cependant ils demandent aussi une grande organisation, car il ne faut pas se perdre.

2. Structure de base d'une page avec les codes CSS:

(retour en haut de la page)

Une page formée de codes CSS va se structurer en plusieurs partie: ces parties vont être un tout et s'articuler ensemble (vous voyez ce que je veux dire?). Bon alors vaut mieux un bon schéma qu'une explication de 20 lignes.

En fait les codes CSS se structurent un peu en cascade, quand on rajoute un nouveau code, cela créer une sorte de nouvelle case encrer dans une autre case, etc
Bon maintenant que vous avez compris (ou du moins je l'espère) le principe des codes CSS, nous allons pouvoir voir comment se présente un code.

3. Propriété des CSS:

(retour en haut de la page)


NB: Je vais vous présenter des codes pour structurer vos pages, il faut savoir que les codes ne sont pas fixes, et vous pouvez toujours rajouter des choses

a. Modification de la police:

(retour en haut de la page)

Alors nous allons voir certaines spécificités des codes CSS.

Style de police:
Il existe 3 styles différents:
- style de police en italique, dans ce cas le code sera:

- style de police oblique, dans ce cas le code sera:

- style de police en normal, dans ce cas le code sera:

Variante de police:
C'est pour avoir le texte en capital.
Exemple: Texte en capitale
Code à utiliser:

Taille de la police:
Exemple: Taille de la police
Code à utiliser:

Grosseur de la police:
Exemple: Police dite grasse
Code à utiliser:

NB:
- Bold = gras
-Bolder = très gras
- Lighter = très fin

Etirement de la police:
Exemple: Etirement de la police
Code à utliser:

NB:
- wider = plus large
- narrower = plus serré
- condensed = condensé
- semi-condensed = à moitié condensé
- extra-condensed = très condensé
- ultra-condensed = extrêmement condensé
- expanded = étendu
- semi-expanded = à moitié étendue
- extra-expanded = très étendue
- ultra expanded = extrêmement étendue

Police en générale:
On peut mettre plusieurs code en même temps
Exemple: Plusieurs codes en même temps
Code à utiliser:

Espace entre les mots:
Exemple: Espace entre les mots
Code à utiliser:

Espace entre les lettres:
Exemple: Espace entre les lettres
Code à utiliser:

Décoration du texte:
Exemple: Décoration du texte
Code à utiliser:


NB:
- underligne = souligné
- overline = ligne au dessus
- line-through = barré
- blink = clignotant

Couleur du texte:
Exemple: Texte en couleur
Code à utiliser:

b. Couleur des liens:

(retour en haut de la page)

Couleur du lien n'ayant subi aucune intervention humaine:
Code à utiliser:

Couleur du lien survolé par la souris:
Code à utiliser:

Couleur du lien où l'individu a déjà cliqué dessus:
Code à utiliser:

Couleur du lien où l'individu a cliqué
Code à utiliser:

c. Les bordures:

(retour en haut de la page)

Couleur de la bordure:
Code à utiliser:

Style de la bordure:
Code à utiliser:


NB
- dashed = tirets
- dotted = poitillets
- double = double et plein
- groove = en relief
- inset = rentrant
- outset = sortant
- ridge = effet 3D
- solid = plein

Taille de la bordure:
Code à utiliser:

d. Fond d'une page:

(retour en haut de la page)

Couleur du fond:
Code à utiliser:

Mettre une image en fond:
Code à utiliser:

Image qui suit le déplacement de la page:
Code à utiliser:

Image qui ne suit pas le déplacement de la page:
Code à utiliser:

Image fixe:
Code à utiliser:

Taille d'une image:
Code à utiliser:

4. Faire un bloc:

(retour en haut de la page)

Un bloc ou une case, peu importe le nom ce qui compte c'est le résultat, permet de placer des éléments où on le souhaite, pour cela nous allons voir comment créer ces blocs et introduire des choses à l'intérieur.
Dans le cas de ma page il y a 6 blocs:
- le bloc de fond permettant de définir ma page que j'ai appelé "body" qui signifie corps en anglais, ce qui permet de défnir le "corps" de la page.
- le bloc central permettant de mettre les autres blocs, que j'ai appelé "container", ce qui signifie "conteneur", il représente celui qui contient le reste des éléments
- le bloc de l'image qui s'appelle "img" permettant de placer mon image.
- le bloc de la navigation que j'ai appelé "h1".
- le bloc de droite qui contient les liens divers, que j'ai appelé "colonne".
- le bloc contenant tout le reste de ma page qui s'appelle "bloc".

Comme vous voyez il y a beaucoup de "blocs" mais c'est indispensable pour bien former sa page. Ces blocs vont être définis par un code spécifique, on peut rajouter autant de blocs que l'on souhaite mais il faut bien être ordonné.
Voici comment on met un nouveau bloc:

La partie entre les styles représente le code CSS qui permet d'être définie, et la partie "div" permet de confirmer l'insertion du bloc dans le code HTML, son positionnement dans le code définira sa place finale.
Comme vous vous en doutez, plusieurs blocs peuvent se croiser.

Ceci n'est qu'un principe pour vous aider à comprendre, une dois que vous avez saisi cette nuance, vous pourrez faire ce que vous voulez.



Comme demandé je vais vous mettre un exemple de code CSS, dans cet exemple, c'est celui utilisé pour ma page, enfin juste le début qui est le plus important.


NB: vous pouvez étirer la largeur de la case en cliquant en bas à droite (pour firefox)

5. Spécificité pour neopets:

(retour en haut de la page)

Maintenant que nous avons vu les détails pour la mise en page en général, nous allons maintenant passer aux choses spécifiques sur néo. C'est à dire à tout les petits détails qui peuvent nous chagriner.

NB: Dans cette partie tous les exemples sont EXAGERES, c'est à dire qu'ils sont fait pour mettre en évidence les changements provoquer, je tiens en plus à m'excuser car ce sont de vieux exemples.

a. Background:

(retour en haut de la page)

Mettre une image en fond à l'extérieur:
Exemple:

Code à utiliser:

Mettre une couleur en fond à l'extérieur:
Exemple:

Code à utiliser:

Mettre une image en fond à l'intérieur:
Exemple:

Code à utiliser:

Mettre une couleur en fond à l'intérieur:
Exemple:

Code à utiliser:

Mettre une image à l'intérieur et à l'extérieur:
Exemple:

Code à utiliser:

b. Code pour les lookups:

(retour en haut de la page)

Mettre une image dans les en-tête:
Exemple:

Code à utiliser:

Mettre de la couleur dans les en-tête:
Exemple:

Code à utiliser:

Changer la couleur autour des parties du lookup:
Exemple:

Code à utiliser:

Changer la couleur de la barre grise autour des parties du lookup:
Exemple:

Code à utiliser:

Mettre une image dans les parties du lookup:
Exemple:

Code à utiliser:

Mettre de la couleur dans les parties du lookup:
Exemple:

Code à utiliser:

Enlever la barre du haut:
Code à utiliser:

Enlever la barre du haut mais laisse les liens de navigation:
Code à utiliser:

Enlever la barre du bas:
Code à utiliser:

Enlever le blanc autour des images:
Code à utiliser:

Enlever le nom de l'utilisateur:
Code à utiliser:

Enlever les événements:
Code à utiliser:

Mettre un nouveau bouclier:
Code à utiliser:

c. Couleur du texte:

(retour en haut de la page)

Change la couleur de tout le texte:
Exemple:

Code à utiliser:

Change la couleur des liens:
Exemple:

Code à utiliser:

Change la couleur du texte en gras:
Exemple:

Code à utiliser:

Change la couleur des liens en gras:
Exemple:

Code à utiliser:

Change la couleur du texte de la barre du bas:
Exemple:

Code à utiliser:

Change la couleur de l'horloge:
Exemple:

Code à utiliser:

Change la couleur des np, nom de l'utilisateur etc:
Exemple:

Code à utiliser:

Change la couleur des liens quand tu passes la souris dessus:
Exemple:

Code à utiliser:

Change la couleur des liens déjà visité:
Exemple:

Code à utiliser:

d. Galerie - boutiques:

(retour en haut de la page)

Mettre un cadre autour des objets de ta boutique (uniquement):
Exemple:

Code à utiliser:

Mettre un cadre autour des objets de ta galerie (uniquement):
Code à utiliser:

Changer de curseur (marche uniquement sous IE):
Exemple:

Code à utiliser:

e. Petpage:

(retour en haut de la page)

Supprime le texte de TNT à la fin de la petpage:
Code à utiliser:

NB: Dans ce cas là il ne faut pas appeler un de ces blocs "body" mais lui attribuer un autre nom

f. Barre des neoamis:

(retour en haut de la page)

Change la couleur des en-têtes:
Exemple:

Code à utiliser:

Change la couleur de l'intérieur des sections:
Exemple:

Code à utiliser:

Change la couleur de toutes les sections:
Exemple:

Code à utiliser:

5. Annexes:

(retour en haut de la page)
A venir ^.^ (soyez patient...)

III. Codes Couleurs

(retour en haut de la page)

Bon alors je vous mets une liste de codes couleurs très rapide, vous pouvez trouver les codes couleurs sur internet, ou bien en utilisant des logiciels faciles à télécharger, gratuits et qui ne prennent pas de place sur l'ordinateur (je ne vous donnerai aucun nom mais il y en a des connus ^.^)





Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions