1 - Qu'est ce qu'un curseur?

C'est très simple. Vous voyez la petite flèche que vous agitez là? Oui, oui, le pointeur de votre souris? et bien c'est ça. Pour être plus concis: c'est un fichier (*.cur) et il peut être animé, ou non. Alors, seriez vous intéressés si je vous disais que, afin de personnaliser au maximum votre site web, il était possible de remplacer cette flèche toute moche par un autre curseur? Oui, hein? ( celui qui dit non je le **** XD )

2 - Comment modifier le curseur par défaut général de mon site?

Là aussi c'est très simple. Tout d'abord, choisissez votre curseur (dans un site de curseurs) ou faites en un (avec votre logiciel de graphisme). Ensuite, uploadez le fichier de votre curseur sur votre FTP. Il ne vous reste plus qu'à coller ce code dans votre feuille de style (CSS):

body {
    cursor: url("adressedevotrecurseur.cur");
}

3 - Comment modifier mon curseur seulement lorsqu'il y a un lien?

Encore et toujours très simple. C'est le même principe que pour modifier le curseur par défaut général de votre site, sauf que le code à coller change:

a:hover {
     cursor: url("adressedevotrecurseur.cur");
}

Toutes les petites bases à savoir ! Alors tout d'abord, une feuille CSS ( une feuille de style ) sert à personnaliser certains aspects de votre site, comme les liens, les titres, le fond, etc.. C'est vraiment très utile, et je pense que tous les sites en utilisent une, à présent =).
Créez donc une nouvelle feuille, que vous appèlerez nomdefeuille.css.

Et mettez ces codes :
 

body {
   font-family: nom de votre police;
   font-size: taille de votre police en px;
   color: # code couleur du texte;
   background-image: url("lien de votre bg");
   background-repeat: repeat-y;
   background-color: #code couleur du fond de votre page;
}

a:link, a:visited {
   cursor:nw-resize;
   font-size: taille de la police du lien en px;
   color: #code couleur de la police du lien;
   font-family: police du lien;
   font-weight: normal;
}

a:hover {
   cursor:nw-resize;
   font-size: taille de la police du lien survolé en px;
   color: #code couleur de la police du lien survolé;
   font-family: police du lien survolé;
   font-weight: normal;
}

Et voilà pour les balises principales ! Après, on peut personnaliser différemment. Par exemple, faire des codes différents pour les liens du menu et les liens normaux, ou changer la couleur lorsqu'on met les balises de gras. On verra ça dans d'autres tutos =). Pour le moment, ce sont les bases ^^.

TP : Vérifier la mission habbo en PHP
Language : PHP | Aperçu | Niveau : Moyen

La vérification d'une mission habbo n'a pas grand chose à voir avec le design, mais vous êtes plusieurs à me l'avoir demandé et donc comme HabbDesign se veut être un fansite d'entraide, nous allons vous guider à la création d'un algorithme en PHP permettant de réaliser cette vérification de mission ou aussi appelé humeur. Vous l'avez sans doute compris, je ne vais certainement pas vous lâcher ce code si facilement puisqu'il est très simple à faire mais cet article sera un TP (travaux pratique).

Objectif du TP : Créer un algorithme permettant de chercher un code dans la page perso d'un habbo.

Tout d'abord, nous allons créer un formulaire pour pouvoir faire le même système que dans l'aperçu, c'est-à-dire que l'on devra entrer le nom du habbo dont lequel on va vérifier la mission. Ce formulaire devra contenir un input de type text où l'on inscrira le pseudo du habbo et un autre de type submit qui nous permettra de rafraîchir la page pour la vérification.

La partie HTML est maintenant finit, on va s'occuper maintenant de la partie PHP. On va d'abord commencer par dire que "Si le champ habbo n'est pas vide, la variable $habbo prendra la valeur de l'input" (n'oubliez pas de mettre à l'input text le name "habbo").

if(isset($_POST['habbo'])) {
   $habbo = $_POST['habbo'];
}

Un code très simple, je ne vous montre là rien de spécial, c'est après que ça se complique. N'oubliez pas de rajouter un value à votre input texte qui aura pour valeur la variable $habbo.
Maintenant, vous devez créer une variable $pos qui va chercher une chaîne de caractère, que vous allez préciser (dans l'aperçu "habbdesign.fr"), puis la page dans laquelle vous voulez chercher votre chaîne de caractère grâce à la fonction php strpos. Voici le lien de la page dont vous voulez chercher la chaîne de caractère avec le nom du habbo qui variera en fonction de la variable $habbo que vous avez créé plus tôt :

"http://www.habbo.fr/home/".$habbo.""

Ensuite, après que votre variable $pos ait cherché la chaîne de caractère, vous allez créer un simple algorithme avec if else qui vérifiera si $pos n'est pas vrai (donc qui n'a pas trouvé chaîne de caractère), alors il affiche "Le code est introuvable" sinon il affiche "Le code est bon !".

Ce script est très simple et peut s'adapter pour n'importe quoi. Vous pourrez l'utiliser pour vérifier si un habbo est bien à son propriétaire et donc l'intégrer dans votre formulaire d'inscription ou pour autre chose. Ce script peut bien sûr être amélioré et il existe aussi beaucoup d'autre moyen de faire cette vérification.

Poster un commentaire avec un lien vers votre formulaire pour que je l'essaye ou pour montrer votre avancement, je vous donnerai ensuite une correction. Si vous n'arrivez pas du tout demandez la correction par commentaire, je vous contacterai directement sur Habbo, mais il faudra biensûr avoir commencé quelque chose pour que je vous aide.

Les "border" sont les bordures d'un élément permettant de le délimiter par rapport aux autres comme les boîtes que vous pouvez voir à l'accueil d'HabbDesign qui sont tous délimité grâce à une bordure qui est arrondi.

Nous allons voir ici comment utiliser cette propriété "border" de différente manière avec des styles et des effets spéciaux.

border-width /* épaisseur */
border-style /* style */
border-color /* couleur */

Voici les 2 différentes propriétés liés au "border" que nous allons d'abord étudier. Vous pouvez voir qu'il y a un texte entre "/*" et "*/" qui sert à délimiter une zone de "commentaire" que vous pouvez utiliser dans vos feuilles de styles pour mieux vous retrouver. Cette zone ne sera pas éxécuté par les navigateurs, elle ne sert que pour le codeur.

Donc comme il est écrit, le "border-width" sert à délimiter l'épaisseur de la bordure. Il doit prendre une valeur numérique en pixel (px) comme par exemple 1px.

Le "border-style" sert à donner le style de la bordure, c'est-à-dire que vous pourrez avoir des bordures en pointillet, en tiret ou autre. Cette propriété peut prendre les valeurs suivantes : 
dotted (pointillé), dashed (tirets), solid (solide), double (double), groove (rainurée), ridge (relief), inset (relief intérieur), outset (relief extérieur).

Le "border-color" permet de donner une couleur à la bordure et prend donc comme valeur un code couleur en HTML comme par exemple #000000.

Il est possible de fusionner ces trois propriétés en une seule. En effet, ces trois propriétés peuvent être contracté et devenir "border" qui prendra tout d'abord comme valeur l'épaisseur, puis ensuite le style et enfin la couleur, le tout séparé par des espaces comme ceci :

border: 1px dotted #000000; /* width style color */

Maintenant vous savez comment faire des bordures de différentes épaisseurs, donc nous allons voir un effet que vous pouvez apporter à vos borders : l'effet de coin arrondi.

Pour cet effet, nous allons utiliser la propriété "border-radius" qui prend une valeur numérique en pixel (px).

border-top-left-radius /* coin en haut à gauche */
border-top-right-radius /* coin en haut à droite */
border-bottom-left-radius /* coin en bas à gauche */
border-bottom-right-radius /* coin en bas à droite */

Vous l'avez donc remarqué, il existe des sous-propriétés au "border-radius" qui permettent de contrôler les arrondis de chaque coin grave au "-top-" (haut), "-bottom-" (bas), "-left-" (gauche), "-right-" (droite).

Comme pour la première propriété que l'on a vu, celle-ci peut aussi se contracter en un seul "border-radius" : tout d'abord on met le coin en haut à gauche puis à droite, ensuite en bas à gauche puis à droite. Mais vous pouvez aussi ne mettre qu'une seule valeur pour que tous les coins ont le même arrondi.

border-radius: 5px 0 0 5px; /* top-left top-right bottom-left bottom-right */

Comme tout, cet effet à un inconvénient, il ne marche pas sur tous les navigateurs, c'est pourquoi il existe d'autre sous-propriétés permettant de le faire apparaître sur tous les navigateurs.

-webkit-border-radius: 5px; /* Chrome, Safari, Android... */
-moz-border-radius: 5px; /* Mozilla */
border-radius: 5px;

Voilà la fin de cet article, en espérant qu'il vous a été utile. Si vous avez un problème ou que vous voulez partager vos screens de bordure ou bien que vous voulez tout simplement donner un avis sur cet article, n'oubliez pas que la boîte à droite est faites pour ça, alors écrivez nous un commentaire!

Le Cascading Style Sheets, plus communément appeler CSS ou feuilles de style est important pour toutes sortes des choses. Il est surtout très utile pour éviter de surcharger ses codes HTML et facilite la conception de site web. En soi, la feuille de style peut être incorporer dans un code HTML par plusieurs manières. Les informations suivantes sont complémentaires à l'article précédent sur la structure d'une page HTML que vous pouvez retrouver ici : http://habbdesign.fr/article/22.

D'ailleurs, l'un des outils pouvant vous facilitez la vie pour coder est : Notepad++ qui vous offres une grande liste d'extensions de fichiers dont le .html et le .css. Il sera votre meilleur ami certifié gratuit pour vous aidez à apprendre le codage.

Donc, il existe un moyen simple de rajouter une feuille de style directement dans votre page html, ce n'est pas vraiment conseiller pour éviter de surchargez votre page, mais parfois utile dans certains cas. Pour rajouter une feuille de style dans une page html, il suffit de rajouter les balises comme ceci :

<HTML>
   <HEAD>
      <TITLE>Votre titre de page</TITLE>
      <STYLE>
      </STYLE>
   </HEAD>
   <BODY>
   </BODY>
</HTML>

En soit, un code en CSS se présente comme ceci dans une feuille de style, il doit toujours être composer comme ceci " titre du code " { " code " } :

.HabbDesign {
   margin: auto;
   border: 1px solid black;
   background-color: white;
   width: 100px;
   height: 100px;
   padding: 3px;
}

#HabbDesign {
   margin: auto;
   border: 1px solid black;
   background-color: white;
   width: 100px;
   height: 100px;
   padding: 3px;
}

Bien évidemment, votre titre de code de devra pas être identique à un autre, c'est important pour se retrouver dans vos différents codes. Mais si vous avez un oeil perçant, vous devriez avoir vu que sur l'image plus haut, j'indique le début du code par un " . " ou un " # ". Pourquoi ?

Enfaîte c'est très simple, le croisillon ou " #"  indique une ID tandis que le point indique que c'est une class, alterner entre ID et Class est souvent utile pour ne pas vous embrouillez après avoir intégrer votre code dans votre page html. En parlant d'intégration du CSS dans votre page html, il est facilement indiquable comme ceci :

.HabbDesign : <div class="HabbDesign"></div>
#HabbDesign : <div id="HabbDesign"></div>

Mais il existe aussi un moyen simple mais qui surchargera forcément votre page, en effet on peut les indiquez comme ceci :

<div style="width: 100px; height: 100px; background-color: white; margin: auto;
border: 1px solid black; padding: 10px;"></div>

On indique le tout en tant que " style ". Ce sera tout pour cette article, les propriétés et leurs valeurs en CSS seront expliqués plus tard dans un autre article. En espérant que cet article vous soit utile.