La Bnbox !

Créateur de sourires...

Mon compte

S'inscrire

Recherche

Vous êtes ici : Accueil » Atelier Webmaster » Cours HTML » Chapitre 3

Atelier Webmaster



< Cours précédent - Sommaire du cours - Cours suivant >

Cours HTML : Chapitre 3


Traitrement de la page


Voilà un tout petit chapitre qui va nous permettre d'appronfondir les bases qu'on vient d'apprendre et d'embellir encore la pseudo- page de notre exemple... On vient de voir qu'on pouvait ajouter des "options" dans la partie ouvrante d'une balise et dans beaucoup de cas c'est possible et cela nous sera grandement utile !

Réfléchissons un peu. Pour dire à tel phrase d'être de tel couleur on a rajouté "l'option": <font color=\"tel couleur\">. Et à votre avis, où est ce qu'on va rajouter une option pour changer la couleur de la page...?
Dans <body> !
Il suffit de rajouter bgcolor=\"#xxxxxx\" (=<b>b</b>ack<b>g</b>round<b>color</b>. Soit en français couleur du fond.) dans <body></body>. Allez un petit exemple pour bien intégrer tout ça.
Code :
<html>
  <head>
    <title>Une page toute en couleur!</title>
  </head>
  <body bgcolor="#118855">

<font size="5" color="purple" face="Comic Sans Ms"><p align="center">
<b>Bienvenue sur mon site!</b>
</font></P>

<hr width="80%" size="3" color="red" align="center">

<font color="blue">
<blockquote>
Maintenant que je sais mettre une couleur sur le fond, je vais pouvoir y ajouter une image, changer la couleur des liens, que sais-je encore?
<font>
<blockquote>

</body>
</html>



Et voilà votre page est en couleur ! Il vous suffit juste de changer le "nom" de la couleur pour chanegr encore la couleur de la page! Faites un test en mettant "black" à la place de "#118855". Puis remplacez "black" par "#cc9933" pour vous entrainer!

Je vais vous faire un petit topo de ce qu'on peut mettre dans <body>, vous verrez qui a vraiment pleins, pleins de choses et tout n'y est pas ici... (par exemple quand on met certains scripts java il faut rajouter quelque chose dans je vous expliquerez ça vers la fin du cours...)
  • bgcolor=\"#xxxxxx\" : Pour changer la couleur du fond. Un fond en couleur c'est vraiment plus jolie que tout blanc... Reportez vous au chapitre 2 la partie sur les couleurs si vous ne vous souvenez plus bien comment ça marche !
  • background=\"\" : Pour mettre une image de fond. Il suffit de mettre le nom de l'image et sa terminaison entre les deux "". (par exemple si c'est une image gif qui s'appelle poisson, on mettra: poisson.gif) Les images on verra ça un peu plus loin, je sais que c'est ce que vous attendez le plus, mais ne vous inquiètez pas on y arrive rapidement. Si vous voulez vous amuser en attendant, mettez l'image en question dans le même dossier que le fichier .html.
  • bgproperties=\"fixed\" : Quand on fait descendre la page, l'image du fond reste figé! Cela rend bien dans certains cas. Quand on ne le met pas, l'image descend avec la page.
  • text=\"#xxxxxx\" : Gràce à "text", vous changez la couleur de tout votre texte. (vous changez les #xxxxxx par des carractères héxadécimaux.) Au lieu que la couleur par défaut sois noir, ce sera la couleur que vous avez mis dans "text". Et vous pourrez toujours utiliser <font> pour mettre une couleur spécial à certaines parties de votre texte.
  • link=\"#xxxxxx\" : Ce sera la couleur de vos liens! (pour cela il vous suffit de mettre une couleur à la place des xxxxxx, enfin vous avez l'habitude maintenant...) Oui, vous pouvez changer la couleur de vos liens... Ah mais on n'a pas encore vu comment faire des liens, bête ça bn_tongue ça arrive, ne vous inquiètez pas ^-^
  • vlink=\"#800080\" : Et ça, c'est la couleur de vos liens quand vous cliquez dessus.
  • alink=\"#ff0000\" : Si on a cliquez sur vos liens alors ils deviendront de cette couleur. Cela veut dire qu'ils été "utilisé". Cela correspond au violet sur les liens par défaut.
  • class=\"blabla\" : C'est une particule pour le CSS ! On le verra tout à la fin du cours ! Ne vous inquiètez pas si je vous parle de beaucoup de choses que l'on fera plus tard cela vous met l'eau à la bouche et ça vous permet de vous y connaitre un peu plus en HTML!
  • leftmargin=\"11\" : Vous mettez n'importe quel chiffre à la place du "11". L'unité est le point, c'est une unité spécial plus petite que le pixel. En fait vous déterminer à quel distance votre texte, vos images, enfin votre page va être du bord gauche...
  • rightmargin=\"11\" : La marge de droite de votre page. Ce que vous déterminez c'est comme une marge sur word.
  • topmargin=\"19\" : la marge du haut. Ici il y aura 19pixels entre le bord haut de la page et le début de votre texte, image etc...
  • marginwidth=\"11\" : ça c'est la largeur de votre marge.
  • marginheight=\"19\" : La hauteur de la marge de votre page.


Quand vous mettez un background, n'hésitez pas à mettre aussi une couleur de fond, comme ça le temps que l'image arrive, il y a de la couleur !


Ça fait pas mal de choses tout ça! Vous utiliserais souvent bgcolor et background, les autres aussi, mais plus rarement...

Comme souvent en HTML, il n'y a pas qu'une seul méthode pour faire une chose... Et pour changer la couleur du texte il existe une autre méthode. En fait, pour cette autre méthode on utilise plus le HTML, mais le CSS, c'est un autre style de language très très proche du HTML. On en reparlera vers la fin des cours! Pour l'instant on reste sur le HTML !


C'était petit comme chapitre, n'est ce pas? Je n'ai pas voulu le mélanger avec celui du "traitement du texte" car j'avais peur que cela vous embrouille. Je pense que c'est mieux ainsi car vous avez le temps de souffler entres les chapitres.
De plus, à partir de maintenant vous pouvez commencer à faire des tests tout seul! Créer des pages, vous en êtes capables ! Bien sûr ce ne sera pas très élaboré, mais cela vous entrainera! Un petit exemple ? Une page avec comme fond votre tête qui ne suit pas la page quand on descend. Il faut une couleur adéquate pour qu'on arrive à bien lire le texte (photo adéquate aussi !) et comme sujet, le projet d'un site que vous aimeriez faire ! (si vous la trouvez magnifique vous pouvez la mettre sur le forum )

L'heure du bilan

  • Mettre une couleur de fond.
  • Les différentes options de <body>.

Ailleurs sur la Bnbox

Ailleurs sur la Toile

Mini-tchat

?

opopopopopop murmure : Hello Le 10 novembre, 19h49 via Utiliser des liens chronolo...

658392 déclare : =7 Le 07 novembre, 17h23 via Résumé scène par scène - Le...

Pseudo gribouille : mini_bn Le 30 octobre, 18h18 via Comment fonctionne le mini-...

Pseudo griffonne : 1+1=11 Le 30 octobre, 18h18 via Comment fonctionne le mini-...

Pseudo déclame : 3+4=7 Le 30 octobre, 18h16 via Comment fonctionne le mini-...

sundergirl tergiverse : Les résumés sont un peut cours a m ont avis ! Le 25 octobre, 14h38 via Résumé : L'Avare

bonjour s'exclame : Je bafouille 3+4=7 Le 19 octobre, 18h56 via Résumé scène par scène - Le...

bonjour murmure : Peuple je sus en Stream a partir de 18 heures fortnite epicgames !!!!!! Le 19 octobre, 18h53 via Résumé scène par scène - Le...

omg bafouille : L or Le 19 octobre, 15h58 via Accueil

omg tergiverse : L or Le 19 octobre, 15h58 via Accueil

omg déclare : Omg Le 19 octobre, 15h58 via Accueil

cc s'exclame : Cc Le 16 octobre, 21h31 via Mais qu'est ce qu'un ROC en...

7 murmure : Code noir nul c nul Le 15 octobre, 12h28 via Le Code Noir

lol déclare : Nul Le 15 octobre, 12h26 via Le Code Noir

bg18 tergiverse : Jtm Le 15 octobre, 12h16 via Le Code Noir

bg18 dit : Jtm Le 15 octobre, 12h16 via Le Code Noir

lol dit : Non en fait Le 15 octobre, 12h16 via Le Code Noir

lol scribouille : Lol Le 15 octobre, 12h16 via Le Code Noir

isy déclame : Dom Juan Le 11 octobre, 15h09 via Résumé scène par scène - Le...

badr murmure : Il y a pas les chapitres 20, 21... Le 03 octobre, 21h01 via Résumé : La Promesse de l'a...

badr scribouille : Sa fait sept Le 03 octobre, 20h59 via Résumé : La Promesse de l'a...

biloutedu14 tergiverse : Trois + quatre égale sept Le 02 octobre, 14h21 via Unités SI, conversion des m...

G gribouille : Facile Le 27 septembre, 22h28 via Recherche

def chuchote : Fr Le 21 septembre, 19h00 via Résumé scène par scène - Le...

Triss déclame : Blip bloup Le 21 septembre, 18h50 via Sans-jambe repose

ManouDu95 proclame : WSH LES GENS,PERSO CTTE HISTOIRE C DLA MERDE SUIS EN 5ÈME ET J'ETUDIE SA VS ETES SEH LA Le 20 septembre, 19h09 via Résumé - Les Fourberies De ...

hylona bafouille : Ki a lu tartuffe Le 15 septembre, 12h15 via Résumé : Le Tartuffe de Mol...

hylona chuchote : 3+4=7 Le 15 septembre, 12h14 via Résumé : Le Tartuffe de Mol...

Bnmaster proclame : @Etudiant Merci ! Le 06 septembre, 8h48 via Résumé du livre : Le Cid de...

Etudiant murmure : Salut, je voulais vous remercier pour vos magnifiques cours, je suis en prépa MPSI et ça m'est d'une aide tellement précieuse!!! 1000 mercis !!! Le 05 septembre, 19h08 via Le raisonnement par analyse...

478 s'exclame : Glo
ver vfrehy bg
Le 02 septembre, 16h35 via Ah les p'tits potes

petitchat gribouille : Facile Le 20 juin, 13h06 via Unités SI, conversion des m...

College Charles Péguy dit : J'etudie cette piece de théatre avec mess 6eme de beauvoir Le 11 juin, 21h45 via Résumé - Les Fourberies De ...

cc déclare : Cc Le 04 juin, 17h59 via Résumé scène par scène - Le...

Marius Okoko déclame : J'aime L'histoire. Le 31 mai, 16h23 via Utiliser le module Math de ...

kk écrit : 0. Le 30 mai, 16h15 via Résumé du livre : Le Cid de...

JUIELJD E griffonne : KDOEKNCZF£2 Le 30 mai, 14h56 via Résumé scène par scène - Le...

Tamagochi chuchote : -.../---/-./.---/---/..-/.-. Le 29 mai, 14h45 via Apprendre le Morse

lea83 écrit : Jihohio bafouille t'as deux ans d'age mentale ou quoi mdrr Le 27 mai, 15h36 via Résumé du livre : Le Cid de...

lea83 déclame : Cc Le 27 mai, 15h35 via Résumé du livre : Le Cid de...

Jacky chuchote : WSH SAHRTEK LES BABEKS Le 25 mai, 10h16 via Résumé scène par scène - Le...

Jacky gribouille : Ongles, manucure Le 25 mai, 10h16 via Résumé scène par scène - Le...

mimilechat dit : 4+3=7 Le 23 mai, 13h01 via Résumé - Les Fourberies De ...

céline murmure : 3+4=7 Le 20 mai, 15h08 via Résumé - Les Fourberies De ...

expert des bouquins murmure : Jene Le 17 mai, 11h34 via Résumé scène par scène - Le...

le Mathématicien de l'extreme déclare : A Le 17 mai, 11h33 via Résumé scène par scène - Le...

le Mathématicien de l'extreme bafouille : A Le 17 mai, 11h33 via Résumé scène par scène - Le...

le Mathématicien de l'extreme déclame : A Le 17 mai, 11h33 via Résumé scène par scène - Le...

le Mathématicien de l'extreme chuchote : A
a
a
a
a
a
Le 17 mai, 11h33 via Résumé scène par scène - Le...

le Mathématicien de l'extreme scribouille : Je pense que la question etait d'une facilité extreme Le 17 mai, 11h32 via Résumé scène par scène - Le...

Publicité



Articles suivants

Articles précédents

©Bnbox (Infos) - Cahier de l'élèves - Atelier webmaster - Boîte à Nuts - Bar à Nougat - Plus ou moins valide XHTML 1.0, CSS 2, RSS 2.0
Flux RSS