HTML tutorial - coder un profile layout - tailles et couleurs (3)
CODER UN PROFILE LAYOUT
CODES DE BASE 3
Les tailles des cellules et tables et les couleurs (1° partie)
Préambule : Relisez le TUTORIAL 1 et le TUTORIAL2 avant de commencer celui-ci ne serait-ce que pour vous rafraîchir la mémoire.
Revenons à nos moutons !
Betty !!! Charlie ??? vous zêtes zou ???? (message codé)
Donc aujourd'hui nous allons décider de la taille de la table que nous utilisons et des cellules... et pour mieux voir tout cela, nous allons ajouter une bordure et des couleurs....
Rien de mieux qu'un premier exemple pour comprendre.... Reprenons le premier tableau que vous avez réalisé dans le tut1 et ajoutons une bordure simple et des couleurs à chaque cellule.
Avant avec son code.......
Et maintenant avec son nouveau code......
Epluchons-le ensemble.... toujours rien de compliqué et commençons pas le plus simple (non ! pas les >td> et faut pas pousser !)
Vous retrouvez les changement d'alignement horizontal pour deux professeurs et le changement d'alignement horizontal ET vertical pour la première ligne.
Par défaut le contenu des cellules est placé align="left" et valign="middle". Je ne peux pas changer ce placement par défaut en tapant ces deux attributs dans : ils auraient affecté le placement des cellules et non le contenu des cellules.
Plus intéressant, les nouveaux attributs du et :
width="un nombre" pour définir la largeur de la table ou de la cellule/colonne en pixels...
height="un nombre" pour définir la hauteur du tableau ou de la cellule/ligne en pixels
border="un nombre" pour définir la largeur en pixels de la bordure qui viendra se placer autour de chaque cellule ET du tableau ; à noter que lorsqu'on n'en veut pas, il est prudent d'indiquer
bordercolor="#6chiffres" pour indiquer la couleur de la bordure
bgcolor="#6chiffres" pour indique la couleur de fond de remplissage du tableau.... ce qui se trouve derrière chaque cellule. Le fait d'avoir indiqué une couleur de fond permet de mettre en valeur l'espace entre les cellules ou de ne pas retaper dans chaque balise de cellule la couleur dominante du tableau
Ainsi, pour la 3° ligne, aucun bgcolor n'a besoin d'être indiqué.
Vous avez sans doute remarqué que ..... pas de chiffres avec l'attribut bgcolor mais une couleur.... attention ! ça ne marche pas à tous les coups !
Je vous propose deux liens pour les couleurs .
Le premier c'est vers les mots de couleurs anglais fonctionnant dans l'attribut (je ne les ai pas tous testés loin de là car je n'utilise que très peu cette technique...) C'est LA TABLE DE COULEURS.
Le deuxième est un outil en ligne qui permet de se créer et utiliser un nuancier. Très pratique quand on a pas un logiciel comme PSP ou PS ; c'est LE CREATEUR DE NUANCIER DE COULEURS ....
Il existe aussi en téléchargement libre et gratuit un petit logiciel qui, grâce à une pipette, indique le code de la couleur du pixel que vous pointez à l'écran....
Autres précisions
Vous ne pouvez pas avoir dans une colonne, des cellules de largeurs différentes (enfin pas pour le moment) et de même pas de cellules de hauteurs différentes dans une ligne.... Il faut garder une cohérence de l'ensemble... c'est un tableau noudoudiou !
ULTIME PRECISION : Si jamais vous n'arrivez pas à réaliser un exercice proposé, vous pouvez m'envoyer dans un commentaire votre code placé dans une "boite" pour que Word et LJ n'abime pas vos espace et compagnie.... Pour mettre un code dans une boite, on utilise la balise suivante METTEZ TOUT ICI.... ETC..... Elle aura cette apparence là : METTEZ TOUT ICI .... LE SAUCISSON ET LA SAUCISSE DU ZOM, LES FROMAGES AUSSI, LA CREMIERE (MOI ^_^) , LE BEURRE ET L'ARGENT DU BEURRE....
Ainsi je pourrai vous aider à vous corriger...
Et maintenant, c'est à vous !
Codez moi ça ! Et qu'ça saute !!!!!
Allez, chuis gentille, une partie du code est déjà prête niéhéhé..... mais attention ! j'ai changé certains alignements... en contrepartie je vous indique que la hauteur du tableau est 400 pixels.
Bon en plus, je ne suis pas à la couleur exacte prêt !!!
LA GARDE ROBE DE SEVERUS SNAPE
Vêtements de cérémonie
Vêtements de cours,
de préparation de potions,
de tous les jours en somme...
Vêtements de nuits
et sous-vêtements
Une lourde cape de laine feutrée noire
aux larges bradebourgs
Une redingote de serge noire garnie de 69 boutons noirs
Un pantalon coordonné à la redingote
Une paire de botines noires
Une cape noire
Une veste noire
Un pantalon noir
Des chaussettes noires
Une écharpe noire et verte
Des mitaines noires
Des chaussures noires
Une chemise blanche(?) dépassant de la veste boutonnée jusqu'au col
un pyjama noir avec des pingouins oranges
un caleçon noir avec des cochons roses
Bon bin va me coucher......
Surtout n'hésitez pas à m'indiquer vos problèmes non seulement de codage mais également face aux tutoriaux, si vous voulez davantage de précisions, que j'aille moins vite (plus vite non.) , que vous m'aimez..... que vous allez faire de moi de la chair à pâté (de Sweeney Todd) pour tous les cheveux que vous vous arrachez....
Bref, tout et n'importe quoi !