HTML tutorial - coder un profile layout - le texte (6)

Sep 25, 2007 20:38


CODER UN PROFILE LAYOUT
CODES DE BASE 6
Le texte

Comme d'habitude relisez les tutoriaux précédents mais peut-être pas tous maintenant.... TUT1 - TUT2 - TUT3 - TUT5
Surtout après ce grand délai d'attente depuis mon dernier post !

Aujourd'hui, ou plutôt cette nuit pour moi, je crois que ce tutorial va vous plaire car nous attaquons l'apparence du texte. De plus, maintenant que vous avez compris le système des balises et de leurs attributs, vous allez vous éclater en beauté ! (et pas la tête contre le mur.)
Donc aujourd'hui peu de balises nouvelles et peu d'attributs mais la réutilisation d'attributs déjà étudiés....

Et commençons tout de suite par un exemple....

MON TITRE

C'est ici que vous papotez sur votre vie, tout et rien... que vous décidez de parler, blablater ou juste ricaner. Vous parlez de vos joies, goûts, dégoûts et peines. Par contre je vous déconseille d'utiliser du noir mais plutôt des gris plus ou moins foncés qui fatiguent moins les yeux... et de même sur un fond foncé, n'utilisez pas du blanc pur mais nuancé pour la même raison.

"D'abord, il faut toujours écouter Dame Zaza !
Elle a toujours raison... ^__^ "
... et là ce n'est toujours pas du noir !

NIARK...NIARK...NIARK
signéFURAX ZAZA

C'est-y point bôôôôô !
Et voici le code..... c'est mâââââgiqueuhhhh !



Je crois que, rien qu'à le lire, vous comprenez déjà beaucoup... ^_^ C'est un simple tableau à une seule colonne et à deux lignes ; une pour le titre et une pour le texte à proprement parlé.

Les deux balises essentielles sont donc :

pour marquer un paragraphe (ou un titre)
pour donner toutes les caractéristiques de votre texte...

Au début je n'utilisais pas
et avait du mal à changer certaines caractéristiques de mon texte à l'intérieur même.... Avec
plus de soucis (on dirait de la pub).
En plus il crée un espace supérieur à la balise
entre deux paragraphes

ne peut avoir que les attributs left, right, center et justify...

en a beaucoup plus :

size="un nombre" pour la taille de vos lettres
family="le nom d'une police de caractères"
color="le nom d'une couleur"
...sont vraiment les trois balises essentielles.
A noter que vous trouverez le nom de votre police en allant voir Démarrer ==>Panneau de configuration ==> Polices ; mais sachez que si vous pouvez voir toutes les polices enregistrées sur votre disque dure, il n'en ai pas de même pour ceux passant sur votre Profile Layout. S'ils ne l'ont pas sur leur ordi.... ils ne verront qu'une police par défaut.... et sans doute moins esthétique...

Par ailleurs, vous pouvez utiliser les balises :

le texte en gras .... ou tout simplement texte en gras
texte en italique ou tout simplement texte en italique
texte barré

Voyons maintenant ce qui se passe lorsque nous jouons sur divers paramètres....







Sympa mais sans aucune
bordure et pas assez
d'espacement entre le titre,
le texte et le bord.... enfin, à mon
goût.....

Déjà mieux avec un
cellpadding="5"

Cette fois le padding est de
3 mais le cellspacing est de 5.
Le background du table est gris
et le background de chaque
cellule est blanc.... différent...







Et là, j'ai juste rajouté une très
fine bordure de 1 en gris foncé
dans le table.....

N'hésitez pas à jouer sur les
positifs/négatifs...
Et cette fois-ci la bordure est
blanche !

Et dans un style qui n'a
strictement rien à voir !
Il faut juste aimer jouer de la
balise Font......

Et voilà.....
Il ne manque plus qu'une chose : votre mission !

Votre mission, si vous l'acceptez, consistera à faire votre PREMIER PROFILE LAYOUT !
Certes une seule colonne mais vous voyez qu'on peut largement exploiter le thème !
Comme moi, je vous conseille du 200px de large....
Et si vous êtes bien sage et que vous faites bien vos devoirs, maîtresse Zaza vous montrera comment rajouter une belle zimage..... (pourquoi j'ai l'impression soit de gagatiser, soit de faire une promesse sado-maso ? Ô.o)

En résumé : ETONNEZ-MOI ! Et n'hésitez pas à demander de l'aide au besoin.....

[EDIT] quand je vous disais que vous seriez capable.... allez voir à CE LIEN et vous verrez que, hormis les liens, vous êtes tout à fait capable de faire autan que ce petit profile layout minimaliste... Vous pouvez faire aussi bien que sur une com' réputée pour ses layouts !

tutorial, profile layout

Previous post Next post
Up