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

?

7 tergiverse : Neredesin samet dersini calistin Le 18 janvier, 19h07 via Résumé - Le Médecin Malgrè ...

7 écrit : 7 Le 18 janvier, 19h06 via Résumé - Le Médecin Malgrè ...

7x8rq331 griffonne : <a href="http://www.3191jzrh.com/air-jordan-1-clover-guld-scarpec">air jordan 1 clover guld</a> <a href="http://www.te73uevz.com/air-jordan-10-alle-wei%C3%9F-for-verkauf-schuhee">air jordan 10 alle wei? for verkauf</a> <a href="http://www.1wk531nc.com/vintage-nike-internationalist-for-vendita-scarpeb">vintage nike internationalist for vendita</a> <a href="http://www.miuwhy36.com/maschio-nike-shox-2016-verde-blu-schuhee">maschio nike shox 2016 verde blu</a> <a href="http://www.yoes39mj.com/air-max-1-ultra-moire-wolf-grigio-bianca-butyf">air max 1 ultra moire wolf grigio bianca</a> <a href="http://www.bm067skf.com/asics-asics-gel-kayano-20-s%C3%B8lv-lyser%C3%B8d-obuve">asics asics gel kayano 20 s?lv lyser?d</a>
7x8rq331
Le 17 janvier, 15h24

caca gribouille : 3+4=7 Le 16 janvier, 6h05 via Résumé - Les Fourberies De ...

7ku554mk proclame : <a href="http://www.6464l4ua.com/nike-mercurial-vapor-9-bl%C3%A5-lyser%C3%B8d-kurpesa">nike mercurial vapor 9 bl? lyser?d</a> <a href="http://www.pkwq01vv.com/kd-8-hombres-barato-oil-kurpesc">kd 8 hombres barato oil</a> <a href="http://www.5kya44jr.com/kvinners-air-max-90-blomsts-hvit-gr%C3%A5-obuva">kvinners air max 90 blomsts hvit gr?</a> <a href="http://www.ax619meh.com/nike-roshe-run-schwarz-dark-armory-blau-schuhef">nike roshe run schwarz dark armory blau</a> <a href="http://www.172h9yel.com/nike-free-tr-kvinders-himmelbl%C3%A5-orange-chaussuresg">nike free tr kvinders himmelbl? orange</a> <a href="http://www.wo90dhgd.com/lebron-12-rojo-and-negro-obuvd">lebron 12 rojo and negro</a>
7ku554mk
Le 11 janvier, 10h16

7ro66zgi proclame : <a href="http://www.nfabag21.com/air-jordan-14-retro-baskets-vente-obuvc">air jordan 14 retro baskets vente</a> <a href="http://www.ui94pysr.com/nike-zoom-pegasus-32-oro-plata-scarped">nike zoom pegasus 32 oro plata</a> <a href="http://www.j55wlfhw.com/femmes-nike-kd-8-rouge-vert-obuvc">femmes nike kd 8 rouge vert</a> <a href="http://www.2o14lqiq.com/adidas-neo-guld-prix-chaussuresg">adidas neo guld prix</a> <a href="http://www.43mpu1b4.com/air-jordan-super-fly-mintgr%C3%B8n-lilla-chaussuresa">air jordan super fly mintgr?n lilla</a> <a href="http://www.iwayvx85.com/adidas-zx-flux-bleu-galaxy-butya">adidas zx flux bleu galaxy</a>
7ro66zgi
Le 11 janvier, 4h44

youyou déclare : Champs requis Le 06 janvier, 20h33 via Français

Samantha déclare : C'est tres simple Le 06 janvier, 17h51 via Résumé scène par scène - Le...

Samantha dit : CC Le 06 janvier, 17h51 via Résumé scène par scène - Le...

bande de ouff déclare : Ou vous étè vivant Le 06 janvier, 16h38 via Résumé : Le Tartuffe de Mol...

bande de ouff chuchote : Yo bande de ouff Le 06 janvier, 16h35 via Résumé : Le Tartuffe de Mol...

LE BG griffonne : HELLO MA MAN Le 04 janvier, 7h18 via Résumé scène par scène - Le...

. gribouille : ; Le 02 janvier, 19h37 via Résumé : Le Mariage de Figa...

loo griffonne : Looo Le 02 janvier, 19h18 via Les avantages et les risque...

aaaaa murmure : Cacas Le 02 janvier, 13h25 via Les avantages et les risque...

lu proclame : Que tal? Le 01 janvier, 17h06 via Les avantages et les risque...

lu écrit : Hey Le 01 janvier, 17h06 via Les avantages et les risque...

ribou proclame : Coucou Le 30 décembre 2018, 11h52 via Fiches sur les personnages ...

aziz proclame : Toutoutoutou Le 28 décembre 2018, 15h30 via Comment fonctionne le mini-...

aziz chuchote : Waw made in china Le 28 décembre 2018, 15h29 via Comment fonctionne le mini-...

aziz murmure : Je suis hiybjgujh Le 28 décembre 2018, 15h29 via Résumé - La Chèvre De M. Se...

Moi s'exclame : Nb k Le 18 décembre 2018, 23h12 via Résumé scène par scène - Le...

yuiooyo tergiverse : Jouon ensemble Le 17 décembre 2018, 21h19 via Résumé scène par scène - Le...

Tom déclare : Ça va Le 17 décembre 2018, 10h25 via Résumé - Les Fourberies De ...

Carla proclame : Caca Le 17 décembre 2018, 10h22 via Résumé - Les Fourberies De ...

Moi écrit : Génial ? Le 17 décembre 2018, 10h21 via Résumé - Les Fourberies De ...

yi déclare : Ipmuo Le 16 décembre 2018, 17h45 via Résumé scène par scène - Le...

Moi chuchote : Bvvgvv Le 16 décembre 2018, 15h22 via Résumé scène par scène - Le...

Moi tergiverse : Bbcgd Le 16 décembre 2018, 15h22 via Résumé scène par scène - Le...

)à)ào$ bafouille : Jiojiij Le 16 décembre 2018, 13h22 via Résumé scène par scène - Le...

atuil dit : Zzeee Le 15 décembre 2018, 21h47 via Résumé scène par scène - Le...

? ??????????????? gribouille : Ugvygvygvyu Le 14 décembre 2018, 15h11

? ??????????????? chuchote : F Le 14 décembre 2018, 15h11

? ??????????????? tergiverse : F Le 14 décembre 2018, 15h11

? déclare : Salut Le 14 décembre 2018, 15h11

Lol murmure : Salut chien Le 14 décembre 2018, 15h10

Chien gribouille : Salut lol Le 14 décembre 2018, 15h10

Lol s'exclame : Bjr Le 14 décembre 2018, 15h10

Bjr gribouille : Bjr et merci ?? Le 03 décembre 2018, 7h49 via Résumé scène par scène - Le...

amel proclame : Bonjour* Le 02 décembre 2018, 13h42 via Résumé scène par scène - Le...

amel scribouille : Boujour Le 02 décembre 2018, 13h41 via Résumé scène par scène - Le...

JADOU griffonne : FG Le 02 décembre 2018, 12h17 via Résumé - Le Médecin Malgrè ...

JADOU bafouille : LOVE Le 02 décembre 2018, 12h17 via Résumé - Le Médecin Malgrè ...

JADOU tergiverse : FEA Le 02 décembre 2018, 12h17 via Résumé - Le Médecin Malgrè ...

JADOU écrit : Oiii guk,l;  ; yghbioklllllllllllllllllllllllllllllllllldsffffeyh Le 02 décembre 2018, 12h17 via Résumé - Le Médecin Malgrè ...

Bjr bafouille : Bjr Le 29 novembre 2018, 7h47 via Résumé scène par scène - Le...

7x8rq331 déclare : <a href="http://www.lahjeh.com/plata-blanco-nike-air-max-plus-zapatosw">plata blanco nike air max plus</a> <a href="http://www.mcrocks.net/air-jordan-12-retro-zapatoss">air jordan 12 retro</a> <a href="http://www.moombaki.net/order-new-balance-shoes-online-uk-zapatoss">order new balance shoes online uk</a> <a href="http://www.oyunkafesi.com/football-shoes-for-kids-zapatosr">football shoes for kids</a> <a href="http://www.avoqyd09.com/nike-air-max-93-monochrome-black-zapatosw">nike air max 93 monochrome black</a> <a href="http://www.cumcumshot.com/pink-and-gold-womens-nikes-zapatosr">pink and gold womens nikes</a>
<a href="http://www.7x8rq331.com/" >7x8rq331</a> 7x8rq331
Le 29 novembre 2018, 4h05

binane chuchote : 3+4=7 Le 28 novembre 2018, 15h59 via Résumé scène par scène - Le...

martinus008 bafouille : Hgg Le 25 novembre 2018, 19h48 via Ah les p'tits potes

yutuik dit : Yo! Le 22 novembre 2018, 17h52 via Fiches sur les personnages ...

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