|
|
visiteurs depuis le 3 mai 2005 !
|
Sommaire
Suppléments 
|
Bonjour guest, je vois que tu t'intéresses au HTML. Comme tu n'es pas le seul (ou la seule), et que moi aussi je suis passée par là, j'ai décidé de faire ce petit cours. Je l'ai organisé par leçon, de la plus basique à la plus "compliqué", quoi que compliqué, ce n'est pas vraiment le bon mot puisque le HTML, est assez simple à étudier, si on s'y prend correctement. Je te conseille, si tu débutes de ne pas sauter de leçon, surtout si tu ne comprends pas ce qu'il y avait au cours précédent. De plus, le mieux est de s'entraîner, essayes les codes, mélanges les pour voir ce que ça donne ! Tu apprendras mieux et plus vite, au lieu de recopier bêtement les codes que l'on te donnes. Si tu as quand même quelques soucis, tu peux me néomaillez ici !
|
|
Pour commencer, il faut savoir que le html est un langage de base permettant de créer des pages web. Les pages de néopets sont toutes des pages web faite avec le html. Ce codage va vous permettre de décorer votre boutique, votre look-up, votre galerie et les pages de vos neopets ! Mais où faut-il aller pour modifier les codes ? Pour : |
| Pour aller à la ligne | Et hop ! Je vais à la ligne |
|
| Pour sauter une ligne | Et hop ! Je saute une ligne |
|
| Pour mettre ton texte en gras | Bonjour | Pour mettre ton texte en italique | Bonjour |
| Pour souligner ton texte | Bonjour | |
| On peut mixer les effets, ici en mettant par exemple en gras et souligné. | Youpi | |
| On peut modifier la taille du texte en mettant un chiffre de 1 (plus petit) à 7 (plus grand) |
Taille 2size> Taille 5 |
|
| On peut modifier aussi la couleur du texte en mettant à la place de red :
|
Salut | |
| On peut aussi mixer la couleur et la taille dans une seule balise "font". | Hey | |
| On peut bien sur placer le texte à gauche (left), à droite (right) ou au centre (center) |
A gauche
A droite
Au centre
|
| Le fond de ta page sera jaune | Ton fond est jaune | |
| Pour insérer une image. (dans l'exemple l'URL est http://images.neopets.com/template_images/achy_yellowcans_dance.gif) |  |
|
| On peut aussi mettre une bordure pour les images. Sachant que border=1, on a une fine bordure, pour border=2 la bordure est plus épaisse... | |
|
| On peut aussi mettre l'image où l'on veut. Dans l'exemple, on l'a met à droite. | |
|
| Te voilà avec un joli fond d'écran, mais pense à prendre une image assez grande sinon ça va pixélliser | - | |
| Ajouter la propriété fixed permet d'avoir un fond d'écran qui ne bouge pas quand on descend dans la page. | - |
| En cliquant sur le "Nom de votre lien", tu te retrouveras sur la page de ton choix. Dans l'exemple, j'ai mis comme Nom "La Tombola" et comme adresse, l'adresse de la page de la tombola. C'est un "lien externe" car comme son nom l'indique, il t'amène sur une page extérieure. Mais bien sur, tu peux mettre une autre adresse ! | La tombola | |
| Pour le lien interne, c'est un peu différent, car une page ne contient qu'une seule adresse donc il faut marquer les endroits où tu veux que tes liens mènent. Il faut donc mettre les deux codes qui suivent. | ||
| Ce code, s'appelle un marqueur. Il s'utilise avec un lien. Seul, il ne sert à rien. Tu dois le mettre à l'endroit où tu veux que le visiteur se retrouve. | - | |
| Voici le lien. Il est important qu'il ait le même nom que ton marqueur. Dans mon exemple, j'ai mis un marqueur au dessus de mon sommaire, c'est à dire a name=sommaire , puis j'ai fait un lien dans la case à coté vers ce marqueur (c'est à dire : (a -disallowed_word- sommaire)Exemple(/a) ) | Exemple | |
| Au cours n°2, nous avions vu comment mettre des images. Maintenant, nous allons faire un mixage avec le code pour les liens et celui pour les images. A la place du nom du lien, on mets juste le code de l'image. |  |
| Avec juste la balise "li", on obtient des petits points. On n'est pas obligé de sauter des lignes, la balise le fait tout seul, mais c'est mieux pour une question de lisibilité. |
|
|
| Contrairement, à l'exemple précédent, on ajoute la balise OL, on a alors une liste numérotée. |
|
| Ce code est un code de base. Les balises "tr" ouvrent une nouvelle ligne, ensuite les balises "td" permettent d'aller d'une colonne à l'autre (donc ici d'une case à l'autre). Comme vous le constatez, il n'y a pas de bordure, nous allons les rajouter plus tard. |
|
||||||
| On peut changer la taille de la bordure et changer la couleur (voir cours antérieur pour les couleurs) |
|
||||||
| On peut aussi changer la couleur du fond !Ici, on change la couleur du fond du tableau car la balise bgcolor est dans la balise table. |
|
||||||
| On peut aussi changer la couleur d'une case, d'une ligne ou d'une colonne ! |
|
||||||
| On peut aussi changer la taille du tableau sachant que width, c'est la largeur et heigth est la longueur. Ces deux balises, peuvent s'utiliser dans "table", "tr" et "td". A vous de tester ! |
|
||||||
| Ces petits codes sont important car quand vous ferez votre tableau, vous verrez que votre texte se place toujours au milieu à gauche.(comme tout les textes de mes cours). On peut alors y remédier en utilisant valign=top qui mettra notre texte en haut. |
|
||||||
| Ici, on dit au tableau, grâce à la balise colspan de faire une case (la cellule 3) qui prends la taille de 2 colonnes. |
|
||||||
| Ici, on dit au tableau, grâce à la balise rowspan de faire une case (la cellule 2) qui prends la taille de 2 lignes. |
|
||||||
| Pour faire défiler le texte | Hello | Comme la plupart des balises (maintenant vous en avez l'habitude), on peut modifier la taille, la couleur... |
| On peut aussi modifier le comportement du texte avec "behavior". A la place de "alternate", on peut aussi mettre "slide", à vous d'essayer ! | Hop | |
| On peut bien sur choisir la direction dans laquelle on veut que le texte défile, en mettant à la place de "up" (haut), "down" (bas), "left"(gauche) et "right" (droite). On peut aussi mettre en même temps dans la balise, "behavior", alors amusez vous à faire des mixage de codes ! | Super ! | |
| On peut aussi faire varier la vitesse de défilement. | Lentement Rapidement |
|
| Pour créer une séparation (ou ligne horizontale) | ||
| Pour changer la taille de la ligne, on utilise width | ||
| Pour changer l'épaisseur de la ligne, on utilise size | ||
| Pour changer l'épaisseur de la ligne, on utilise size et pour enlever l'ombre, on utilise noshade | ||
| Ici, on dit qu'on veut une ligne de 50 points de longueur (width), une couleur jaune (yellow), une hauteur de 5 points, un alignement au centre, une bordure de 2 points dépaisseur et que cette bordure soit bleue (blue). On peut bien sur modifier tous ces paramètres grace à ce qu'on a vu dans les autres cours ! | ||
| Voici le code pour pouvoir mettre vos propres codes. On peut bien sur changer la taille de cet encadré en mettant à l'intérieur de la balise TEXTAREA cols="le nombre de colonne que vous voulez" et rows="le nombre de ligne que vous désirez". Important : Entre text et area, il y a _ . |
| On peut donc modifier la couleur en mettant à la place de ****** le nom ou le code d'une couleur. Et on peut aussi changer la taille en remplaçant le 4 par un autre chiffre. |
Exemple |
|
Les néoécritures fonctionnent dans les forums. Elles fonctionnent de la même manière que le codage html normal sauf que ce ne sont pas les mêmes balises utilisées depuis le début mais celles ci [ et ]. Pour pouvoir la modifier, il faut aller dans "Forum", puis "Préférence chat". A partie de là, tu peux modifier ce que tu veux pour le forum. C'est à dire, tu peux choisir ton avatar (c'est le petit dessin), ton néotitre, ton néoHTML et ta néosignature. Ce sont ces deux dernières choses que je vais t'expliquer. Le néoHTML donne la mise en forme de ton texte pour tout les messages que tu posteras dans les forums. On peut utiliser : A la place de 4, red, tu peux utiliser ce qu'on a déjà vu dans le cours 1. Pour l'écriture, il y a : On peut bien sur tout mixé, à partir du moment où tu n'oublies pas de mettre neoHTML au centre de tout tes codes. De plus, il faut savoir qu'il y a un nombre limité de caractère à mettre pour le code. Maintenant, à toi d'essayer !!!! Pour les néosignatures, ça fonctionne de la même manière que précedemment. Toutefois, les néosignatures apparaissent au bas de chaque message. Par exemple, la mienne est la suivante : [font c=orange]Les Néo-Astuces c'est ici http://www.neopets.com/~Serenity_93130[/font] A toi de jouer !!! |
|
Voici les logiciels que j'utilise et que je trouve indispensable pour faire du graphisme, et pour faire une page web. Ces logiciels sont gratuits mais peuvent contenir des virus ou spyware (tout dépend sur quels sites vous les avez eu) : Voici quelques sites vous donnant des codes tout fait pour des lookup, des blogs, des images scintillantes.... Si vous en connaissez d'autres commençant par neopets.com, faites profiter tout le monde !
|
NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2012.
® 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
