Métaneo

Palette de couleurs

Flo, Zopa — 2015-11-16T19:13:48Z

Les couleurs en HTML nécessitent une syntaxe de codage un peu particulière basée sur le codage RVB (Rouge Vert Bleu).

Sur le principe des couleurs complémentaires et autres règles de physique optique, la syntaxe prendra cette forme :

couleur=#RRVVBB

RR, VV et BB correspondent à un nombre en 00 et FF pour le rouge, le vert et le bleu respectivement.

En appliquant cette syntaxe, il est possible d'obtenir une palette de plus de seize millions de couleurs.

Afin de simplifier la palette, une centaine de couleurs a été choisie. Ces couleurs possèdent un nom en toutes lettres en plus de leur code RVB. Il est donc possible d'utiliser la syntaxe :

couleur=nom_de_couleur

Cependant, il existe une multitude d'autres couleurs qui ne portent pas de noms.

Palette de couleurs

Cette palette reprend la centaine de couleurs identifiées par un nom.

Aperçu	Code RVB	Nom courant
	`#00FFFF`	aliceblue
	`#F0FFFF`	azure
	`#0000FF`	blue
	`#4582B4`	steelblue
	`#483D88`	darkslateblue
	`#7B68EE`	mediumslateblue
	`#6495ED`	cornfloweblue
	`#5F9EA0`	cadetblue
	`#87CDEB`	skyblue
	`#87CEFA`	lightskyblue
	`#00BFFF`	deepskyblue
	`#ADD8E6`	lightblue
	`#00008B`	darkblue
	`#4B0082`	indigo
	`#E6E6FA`	lavender
	`#000080`	navy
	`#191970`	midnightblue
	`#0000CD`	mediumblue
	`#B0E0E6`	powderblue
	`#000099`	pressibusblue
	`#4169E1`	royalblue
	`#1E90FF`	dodgerblue
	`#262BE2`	blueviolet
	`#00FFFF`	cyan
	`#E0FFFF`	lightcyan
	`#AFEEEE`	paleturquoise
	`#40E0D0`	turquoise
	`#48D1CC`	mediumturquoise
	`#00CED1`	darkturquoise
	`#008B8B`	darkcyan
	`#DCDCDC`	gainsboro
	`#D3D3D3`	lightgrey
	`#C0C0C0`	silver
	`#808080`	gray
	`#696969`	dimgray
	`#000000`	black
	`#778899`	lightslategray
	`#708090`	slategray
	`#2F4F4F`	darkslategray
	`#F4FFE0`	lightyellow
	`#FAFAD2`	lightgoldenrodyellow
	`#FFFEAD`	navajowhite
	`#EEE8AA`	palegoldenrod
	`#F5DEB3`	wheat
	`#DAA520`	goldenrod
	`#B8840B`	darkgoldenrod
	`#FFFF00`	yellow ou gold
	`#FFA500`	orange
	`#FF8C00`	darkorange
	`#FF4500`	orangered
	`#FF7F50`	coral
	`#F08080`	lightcoral
	`#FA7872`	salmon
	`#FFA07A`	lightsalmon
	`#E9967A`	darksalmon
	`#FF0000`	red
	`#B22222`	firebrick
	`#DC143C`	crimson
	`#8B0000`	darkred
	`#CD5C5C`	indianred
	`#FF6347`	tomato
	`#FFC0CB`	pink
	`#FFE4FF`	mistyrose
	`#FFB6C1`	lightpink
	`#FF69B4`	hotpink
	`#FF1493`	deeppink
	`#EE82EE`	violet
	`#FF30DC`	cornsilk
	`#D8BFD8`	thistle
	`#9400D3`	darkviolet
	`#FF00FF`	fuschia
	`#C71585`	mediumvioletred
	`#DA70D6`	orchid
	`#9932CC`	darkorchid
	`#BA55D3`	mediumorchid
	`#DB7093`	palevioletred
	`#DDA0DD`	plum
	`#800080`	purple
	`#9370DB`	mediumpurple
	`#FF00FF`	magenta
	`#8B008B`	darkmagenta
	`#008000`	green
	`#7FFF00`	chartreuse
	`#90EE90`	lightgreen
	`#7FFFD4`	aquamarine
	`#66CDAA`	mediumaquamarine
	`#228B22`	forestgreen
	`#006400`	darkgreen
	`#ADFF2F`	greenyellow
	`#9ACD32`	yellowgreen
	`#2E8B57`	seagreen
	`#20B2AA`	lightseagreen
	`#8FBC8F`	darkseagreen
	`#3CB371`	mediumdarkseagreen
	`#808000`	olive
	`#6B8E23`	olivedrab
	`#556B2F`	darkolivegreen
	`#98FB98`	palegreen
	`#7CFC00`	lawngreen
	`#99CC99`	pressibusgreen
	`#00FF7F`	springgreen
	`#00FA9A`	mediumspringgreen
	`#008080`	teal
	`#00FF00`	lime
	`#32CD32`	limegreen
	`#F5F5DC`	beige
	`#FAEBD7`	antiquewhite
	`#FFEBCD`	blanchedalmond
	`#FFE4BA`	bisque
	`#FFFACD`	lemonchiffon
	`#FFEFD5`	papayawhip
	`#FFE4B5`	mocassin
	`#FFDAB9`	peachpuff
	`#FFFFFF`	white
	`#FFF5EE`	seashell
	`#FDF5E6`	oldace
	`#F8F8FF`	ghostwhite
	`#FFFAF0`	floralwhite
	`#FFFFF0`	ivory
	`#F5F5F5`	whitesmoke
	`#FFF0F5`	lavenderblush
	`#FAF0E6`	linen
	`#F5FFFA`	mintcream
	`#FFFAFA`	snow
	`#A5292A`	brown
	`#DEB887`	burlywood
	`#D2691E`	chocolate
	`#8B4513`	saddlebrown
	`#F0E68C`	khaki
	`#BDB76B`	darkkhaki
	`#800000`	maroon
	`#CD8540`	peru
	`#BC8F8F`	rosybrown
	`#D2B48C`	tan
	`#F4A460`	sandybrown
	`#A0522D`	sienna

HTML

Dina, Flo — 2013-10-06T04:30:00Z

Le HTML ou Hypertext Markup Language est un langage utilisé dans le monde du web ; il s'agit d'un des langages de base qui permet de structurer les pages web. Actuellement, c'est la version 5 du HTML qui est utilisée. Celle-ci se veut plus simple que les autres puisque qu'elle ne prend plus en compte la mise en forme du texte (par exemple : couleur du texte), laissant cette fonction au CSS.

Sur Neopet, il permet de personnaliser sa fiche utilisateur, ses pages de Neopets, sa page de guilde etc. Pour résumer, le HTML est la base à connaître pour structurer ses pages sur Neopets.

Sommaire

Avant de se lancer
Structure d'une page web
Balises de mise en forme du texte

Balises de listes
Balises de tableaux
Balises génériques
Conclusion

Avant de se lancer

Voici quelques petites recommandations, avant d'apprendre les chemins tortueux du HTML :

Ceci « <> » est une balise. Une balise s'ouvre : « < » et se ferme : « > » . N'oubliez jamais de fermer une balise ou tout votre code pourrait être faussé.

Le HTML étant un langage international, la langue à utiliser est donc l'anglais. On n'utilisera pas les guillemets français : « » mais les guillemets anglais " ".

Les bases du langage HTML présentées ici ne concernent que le site de Neopets et seraient donc incomplètes si vous souhaitiez coder vos propres pages web. En effet, il manquerait des éléments importants qui ne sont pas nécessaires lorsque vous codez sur Neopets puisqu'ils sont déjà pris en compte.

Structure d'une page web

Avant de s'intéresser aux différents codes disponibles, il s'agira de comprendre comment est structurée une page web.

Une page est composée, comme tout document, d'une en-tête, d'un corps et d'un pied de page. Cependant sur Neopets, seul le corps compte puisque les autres parties sont déjà gérées par le site. C'est pourquoi nous allons uniquement voir des éléments permettant de structurer le corps de la page.

Le corps de la page peut lui aussi contenir différents éléments qui vont permettre de le structurer. Il est très important de délimiter correctement les différents éléments d'une page car ceux-ci pourront ensuite être personnalisés grâce au CSS. Il faut donc regrouper les éléments qui vont ensemble, ainsi quand il faudra les mettre en forme avec le CSS, ceux-ci prendront les mêmes caractéristiques.

Balises de mise en forme du texte

Ces balises vont permettre de mettre en forme et structurer un texte avec cohérence et uniformité.

Note : certaines balises n'ont pas d'effets visibles sur Neopets mais elles sont importantes si vous les associez à du CSS.

Style du texte
Dans le tableau ci-dessous, vous allez retrouver les différents éléments permettant de mettre en forme un texte.

Description	Balise	Exemple
Titre de niveau 1	`Texte ici`
Titre de niveau 2	`Texte ici`
Titre de niveau 3	`Texte ici`
Titre de niveau 4	`Texte ici`
Titre de niveau 5	`Texte ici`
Titre de niveau 6	`Texte ici`
Abbréviation	`Texte ici`
Longue citation	`Texte ici`
Citation d'une oeuvre ou autre	`Texte ici`
Citation courte	`Texte ici`
Exposant	`^{Texte ici}`
Indice	`_{Texte ici}`
Texte en gras	`Texte ici`
Texte en italique	`Texte ici`
Texte normal	`Texte ici`

Insertion d'éléments
Dans le tableau ci-dessous, vous allez retrouver les différents éléments permettant d'ajouter des images, des liens, des sauts de lignes, etc.

Description	Balise	Exemple
Retour à la ligne
Paragraphe	`Texte ici`
Ligne de séparation
Adresse de contact	`Texte ici`
Définition	`Texte ici`
Date ou heure	`Texte ici`
Image
Lien	`Texte/Image visible par l'utilisateur`

Balises de listes

Dans le tableau ci-dessous, vous allez retrouver les types de listes qui existent en HTML.

Description	Balise	Exemple
Liste à puces	`Texte ici Texte ici Texte ici`
Liste numérotée	`Texte ici Texte ici Texte ici`

Balises de tableaux

Voici les balises qui vont permettre de créer facilement un tableau. Ces éléments doivent être utilisés ensemble pour le former.

Un guide pour former ses propres tableaux sera prochainement réalisé.

Eléments du tableau ici

Description Balise

Définition du tableau

Eléments du tableau ici

Titre du tableau

Nouvelle ligne du tableau

Cellule d'en-tête Texte ici

Cellule Texte ici

Balises génériques

Les quelques balises de code vu ci-dessus ne suffisent pas la plupart du temps pour faire tout ce que nous souhaitons, il faut donc avoir des balises dîtes génériques.

Ces balises sont appelées ainsi car, contrairement aux autres, elles n'ont pas de signification propre. La balise

, par exemple, signifie paragraphe, puisqu'elle permet de délimiter un nouveau paragraphe. Ces balises vont donc acquérir la signification que nous leur donnerons.

Ces balises sont les plus utilisées car, possédant les caractéristiques définies par le codeur, elles sont souvent plus commodes pour construire sa page web.

Description	Balise
Balise générique	`Texte ici`

Il est important de noter que cette balise doit impérativement s'utiliser avec d'autres attributs car sinon elle n'est d'aucune utilité. Il existe deux types d'attributs :

id : identifiant unique d'une balise ;
class : identifiant commun à un groupe de balises.

Ces deux attributs vont permettre de définir la propriété de la balise : unique ou répétitive. Pour les utiliser, il faudra écrire le code suivant :

id : Texte ici ;
class : Texte ici.

Conclusion

Avec la lecture de ce guide, vous connaissez à présent quelques éléments importants pour commencer à mettre en forme vos pages web. Il est fortement recommandé d'acquérir toutes les notions de cette page avant de passer à la suite car ceci est la base de la programmation web.

Avant toutes choses, il est important de comprendre la logique du HTML et non pas de tout retenir par cœur (ce qui se fait au fur et à mesure de pratique). Un autre point essentiel est, qu'au début de la programmation web, il ne faut pas se fixer des objectifs trop hauts mais commencer par des choses basiques car on peut facilement perdre le fil. Il faut donc y aller étape par étape.

Maintenant que les différents éléments d'une page ont été exposés, nous pouvons passer à l'étape suivante qui consiste à les mettre en forme, de façon esthétique, grâce au CSS.

Capture d'écran

Moineau — 2013-01-19T16:14:42Z

Une capture d'écran (couramment appelée screenie ou screenshot) est une image de ce qui se trouve sur l'écran de votre ordinateur à un moment donné.

Voici les étapes pour effectuer une capture d'écran, puis l'afficher sur une page de Neopets.

Note : il vous est possible d'afficher une plus grande version des images de cet article en cliquant sur celles-ci.

1. Capturer l'écran

Avant tout, il faut faire la capture d'écran en tant que telle. Tout ce qui se trouve sur l'écran apparaîtra dans l'image, sauf le curseur de la souris. Par contre, si celle-ci se trouve sur un lien ou une image qui fait apparaître un petit encadré contenant le nom de l'élément survolé, celui-ci apparaîtra dans l'image.

Une fois que ce qui doit être copié est affiché à l'écran, il faut appuyer sur la touche d'impression de l'écran.

Cette touche se trouve habituellement tout en haut du clavier, à droite des touches F#. Elle se nomme « Impécr/Syst », « Impr écran/F10 » ou « PrntScr ». Son emplacement et son nom exacts dépendent du clavier utilisé.

Lorsque l'on appuie sur la touche en question, rien ne semble se passer, mais en fait, l'image est sauvegardée de la même façon que lorsque vous utilisez le raccourci clavier Ctrl + C. Si vous copiez autre chose (image ou texte, peu importe), la capture d'écran sera alors remplacée. Il faut donc immédiatement aller la coller pour ne pas la perdre.

2. Sauvegarder l'image

Pour sauvegarder l'image, il faut la coller dans un logiciel d'édition graphique. Il en existe une panoplie ; en voici quelques uns qui se trouvent gratuitement sur Internet (ils sont tous disponibles en français).

À défaut d'avoir mieux, les ordinateurs sous Windows ont tous Microsoft Paint.

Microsoft Word est une option, mais il ne permet pas de sauvegarder le ficher ainsi créé sous forme d'image, puisqu'il s'agit d'un logiciel de traitement de texte. Il ne convient donc pas dans le cas où vous voulez afficher l'image sur une page web.

Une fois le logiciel choisi ouvert, il faut coller l'image dans un nouveau ficher. Il suffit de passer par le raccourci clavier Ctrl + V ou de choisir « Coller » (ou « Paste ») dans le menu contextuel qui apparaît lorsque l'on appuie sur le bouton droit de la souris.

Voici, ci-dessous, un exemple avec le profil d'un utilisateur.

Il est ensuite possible de modifier l'image avec les divers outils disponibles (variables selon le logiciel utilisé). Il est fortement recommandé d'enlever toute information confidentielle qui pourrait apparaître et de rogner l'image de façon à ne garder que la partie pertinente de celle-ci.

Finalement, il faut sauvegarder l'image en sélectionnant « Sauvegarder sous... » (ou « Save as... »), choisir l'endroit où l'image sera sauvegardée et entrer un nom pour celle-ci. Avant de cliquer sur le bouton de sauvegarde, il est très important de choisir le format de l'image (située dans le menu déroulant sous le nom).

Pour une image de qualité supérieure, le format idéal est PNG, mais JPEG ou GIF peuvent aussi faire l'affaire. Le format par défaut de Microsoft Paint, BMP, est à éviter.

3. Héberger l'image

Une fois l'image sauvegardée, il faut trouver un site d'hébergement d'images gratuit. Il en existe plusieurs, tous offrant différentes conditions et limites. Certains requièrent un compte utilisateur, d'autres non. Pour être en mesure de gérer ses images, un compte utilisateur sur le site choisi est fortement conseillé. En voici quelques uns.

Casimages (disponible en français)
Flickr (disponible en français)
HostingPics (disponible en français)
ImagUp (disponible en français)
Imgur
TinyPic (disponible en français)

La façon de télécharger l'image diffère selon le site d'hébergement choisi. Habituellement, il suffit de trouver un bouton « Télécharger des images » (« Upload Images »), d'appuyer sur « Parcourir » (« Browse ») et de trouver l'image voulue sur son ordinateur. Il est important de s'assurer que l'image ne sera pas redimensionnée ou que d'autres options indésirables ne sont pas activées.

Une fois l'image téléchargée, le site offre habituellement différentes URL à utiliser. Puisque Neopets n'accepte pas les liens externes, il faut choisir l'URL directe de l'image. Pour la copier, il suffit de la surligner et de passer par le raccourci clavier Ctrl + C.

4. Afficher l'image

Sur Neopets, il est possible d'afficher une image partout où l'on peut modifier une page (fiche utilisateur, fiche Neopet, boutique, galerie et petpage).

Dans le cas où l'on veut montrer une image à un ami, il est préférable de mettre celle-ci sur une petpage.

Pour y arriver, il suffit d'aller sur la page de Référence Rapide puis de cliquer sur « Éditer la page d'accueil » dans le menu déroulant du Neopet choisi.

Une page permettant de modifier la petpage du Neopet apparaît alors. Par défaut, la petpage générée automatiquement par Neopets est affichée. Il faut donc d'abord supprimer tout le code présent. Cela peut être facilement effectué en cliquant dans l'encadré : il faut utiliser le raccourci clavier Ctrl + A, puis presser la touche « Suppr » (« Delete ») du clavier. L'encadré devrait alors être vide.

Il ne suffit pas de copier l'URL d'une image pour que celle-ci s'affiche : il faut utiliser le code HTML qui permet de l'afficher.

Ce code doit être copié dans l'encadré, puis il faut remplacer les mots « URL de l'image » dans celui-ci par l'URL directe de l'image voulue donnée par l'hébergeur. Il est très important que les guillemets dans le code ne soient pas effacés.

Il suffit ensuite de cliquer sur « Afficher les Changements », puis sur « Sauvegarder les Changements », pour que l'image s'affiche finalement sur la petpage.

Le principe est le même pour afficher une image sur une fiche utilisateur ou une fiche Neopet, et dans une boutique ou une galerie.