La Bnbox !

Créateur de sourires...

Mon compte

S'inscrire

Recherche

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

Atelier Webmaster



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

Cours HTML : Chapitre 2


Traitementdu texte


On reste sur le texte, mais accrochez vous, y a pleins de choses à retenir et tout ce qu'on voit là sera très utile pour la suite...
Vous connaissez Word ? (GNNNNNNNUUUUU !) Et bien en gros on va apprendre à faire pareil, en mieux bien sûr !

Gras italique, souligné, barré


Allez hop, recopiez moi tout ça !
Code :

<html>
  <head>
    <title>Le traitement du texte en HTML</title>
  </head>
  <body>
    <b>Bienvenue sur mon site<b>
    <br>
    <br>
    S'il n'est pas encore <i>magnifique</i>, il le sera <u>tout bientôt!</u>
    <p>
    Animation du texte, l'alignement et la couleur qui arrive !
    </p>

    <p>
    <b>
<i>Bonne visite!</b></i>
    <br>
    <br>
    <u>P.S:</u> J'ai oublié de vous dire au début du cours que le HTML c'était tout facile!.
    <br>
    <u>P.S:</u> <s>C'est les vacances!</S> heu non, désolé je me suis trompé...
  </body>
</html>



Ouhahou, ça fait un petit tas de balises, hein ? Vous avez vu ce que ça donne ? Et pourtant c'est pas des longs trucs..
Je suppose que vous avez devinez, mais on récapitule:
<b></b> : Gras
<i></i> : Italique
<u></u> : Souligné
<s></s> : Barré

Vous l'avez peut-être remarquez on peut les mixer. Mais dans ce cas là il faut faire attention de respecter l'ordre. <i><b>J'ai faim</b></i> et non pas <i><b>Je suis bête !</i></b> Dans la plupart des cas ça marche, mais pas partout, alors autant respecter cette règle.

Regardez sur Word pour mettre en gras la lettre c'est "b" (tiens tiens, étrange) en italique c'est "i" (je crois comprendre) et souligné c'est "s" ??? Quoi ? Mais c'est quoi ce truc bizarre ! Je croyais que "s" c'était pour barrer! Heu bah bonne question, j'ai pas encore trouvé la réponse !

Dans le temps les machines ne comprennez pas <i></i>, <i></i> et <u></u>. On a donc créer une balise qui mettait en valeur le texte. (selon les machines c'était du gras, de l'italique, etc... On s'en fiché ce qui comptait c'était de mettre en valeur.) vous pouvez les utiliser, si vous voulez :
- <b></b> est égale à <strong></strong>.
- <i></i> est égale à <em></em>.
- Je ne crois pas qu'il y est de concordance pour le <u></u>.

Sautement de lignes


Vous avez aussi certainement remarqué qu'il y a des sautements de ligne dans votre page .html... Et si vous regardez cela correspond aux <br> et aux <p>. Vous avez peut-être remarqué une différence entres les deux ? Allez, cherchez mieux... Bon je vous le dis!
  • Le <p> : Il fait aller le texte à la ligne et saute une ligne. En gros on a un espace entres les 2 lignes. Par contre on ne peut en mettre qu'un seul... Essayez d'en mettre plusieurs ça fera toujours la même chose.
    (Plus: Vous verrez qu'après on peut rajouter quelque chose au <p>. Par exemple <p align=\"right\">. Mais vu qu'on a pas encore vu tout ça, je n'en parlerai pas, pour l'instant...)
  • Le <br>, Lui par contre il ne fait que revenir à la ligne. Mais comme vous l'aurez remarqué on peut en mettre plusieurs! A chaque fois qu'on en rajoute un, ça saute une autre ligne... (regardez l'exemple, vous avez tout ce que je viens de dire dedans! Vous croyez que je fais des exemples pour rien ou quoi?)

L'amélioration du texte !


Bon, très bien... On sait comment écrire de différentes façon et aussi sauter des lignes! Mais, moi par exemple j'aimerais bien que mon "Bonne visite!" soit décalé vers la droite, que "Bienvenue sur mon site" soit centré et aussi de couleur marron avec...
Recopiez moi tout ça, on va apprendre un truc hyper pratique... On l'appelera "The FONT and DIV technology"! bn_accord Heu, oui bon... Restons sérieux !

Code :
<html>
  <head>
    <title>Le traitement du texte en HTML</title>
  </head>
  <body>

<font size="5" color="purple"><div align="center">
<b>Bienvenue sur mon site</b>
</font></div>


<font color="green">
S'il n'est pas encore <t>magnifique</i>, il le sera <u>tout bientôt!</u>
<p>
La couleur est là, ainsi que l'alignement, bientôt je m'amuserais encore avec le texte!
</font>



<font color="#5588CC"><div align="right">
<i><b>Bonne visite!</b></i>
</div>
<p>
<p align="center">
Et amusez vous bien!</p>
</font>

  </body>
</html>



Oui, bon je vous l'accorde c'est très très moche !
Bon, structurons... On va commencer par l'alignement, ensuite on passera à <font> sur lequel il y a pleins de choses à dire...

Aligner. Avec <div></div> et autres!
Aligner à gauche, à droite, ou au centre avec HTML, c'est très simple! Il suffit de mettre la balise
et dans la balise ouvrante on rajoute de quel côté est ce qu'on veut aligner... C'est une chose qu'on avait pas encore vu ça, dans la balise ouvrante on peut rajouter des "options" ou des "mot clés" (j'utiliserais option, je préfère!) vous allez voir il y en souvent plus qu'il n'en faut.
Pour <div></div> vous pouvez rajouter align=\"right\" align=\"left\" align=\"center\". En gros <div align=\"right\">Phrase</div> veut dire: aligne moi "Phrase" vers la droite.

Vous vous souvenez ce que j'avais dit sur <p> ? Et bien faites un test avec <p align=\"left\"> C'est exactement pareil que <div></div>, sauf que lui y saute une ligne en plus... Moi j'ai pas préférence, choississez ce que vous préférez...)
Pour le texte c'est vrai, c'est pas hyper hyper utile (quoi que...) mais vous verrez que la plupart des choses qu'on utilise avec le texte, on peut s'en servir aussi sur des images, des tableaux... Et ça c'est utile !


Il n'y a pas que <div></div> qui sert à aligner. On peut utiliser des mots seuls. On l'a vu avec <center></center> ça centre tout seul ! (ça ne marche pas avec right et left) Une balise très utile pour le texte c'est <blockquote></blockquote>. Si vous avez un petit paragraphe de texte, <blockquote></blockquote> va vous le rendre tout bien nikel chrome ! On fait un essai vous allez voir c'est sympa...
Code :
<html>
  <head>
    <title>Le traitement du texte en HTML</title>
  </head>
  <body>

<font size="5" color="purple"><div align="center">
<b>Bienvenue sur mon site</b>
</font></div>
<br>
<br>
<font color="green">
S'il n'est pas encore <i>magnifique</i>, il le sera <u>tout bientôt!</u>
<P>
<blockquote>

La couleur est là, ainsi que l'alignement, bientôt je m'amuserais encore avec le texte! Le colorier plus finement, changer sa police... L'embellir quoi! Comment ça vous voulez des images? Attendez un peu, ça arrive... (ahhhh... la HTMLème6, quel classe que je vous jure!)
</font>
</blockquote>
<br>
<br>
<font color="#5588CC"><div align="right">
<i><b>Bonne visite!</b></i></div>
<p>
<center>
Et amusez vous bien!</center>
</font>

</body>
</html>



Pas mal, hein? Je sais pas vous, mais moi quand j'ai appris que ce tag existait, j'étais tout content ! Maintenant je l'utilise tout le temps ! (trop peut-être, lol !) C'est très pratique !
The FONT technology

Bon, et "The FONT technology" alors ?
Comme vous le voyez cela peut servir à plusieurs chose. Et on a pas tout vu dans l'exemple. Je vais vous classer ça, avec toutes les carractèristiques, n'hésitez pas à tout tester pour vous familiariser avec... (vous retrouverez à chaque fois tous les tags qu'on a vu dans la banque de données HTML! Quand elle sera faites bien sûr )
  • SIZE=\"\" : On met un chiffre entre les deux ". Plus le chiffre est grand, plus le texte sera grand... Votre texte normal est d'une taille de 3, donc à vous de choisir pour les titres, etc... les chiffres décimaux ça marche aussi !
    Hx: Variante de SIZE... La balise c'est <Hx></Hx> on remplace le "x" par un chiffre de 1 à 7. Les nombres décimaux ne marchent pas et c'est différent de SIZE: 1 le texte est le plus grand, 7 le plus petit. Et surtout lui y se place pas dans <font></font>, vous l'aurez bien compris !
  • COLOR=\"\" : On met une couleur en anglais entres les deux "". Et vous avez remarqué qu'on peut aussi mettre des chiffres bizarres. On voit ça juste après !
  • FACE=\"\" : On met un nom de police entre les deux "". Et ouais, ça change la police du texte... (vous savez: Times new roman, Arial, etc...) Par exemple si on veut Comic sans ms, on mettra: FACE=\"Comic Sans Ms\"... (majuscule au début des mots pas obligatoire, mais fortement conseillé ! par contre les epaces sont plus qu'obligatoire!)


Alors j'vous avais dit qu'on pouvait faire pleins de choses avec FONT ! Moi j'aime bien, à vous de voir si vous voulez l'utiliser souvent ou pas.
Et la couleur ?

Ah oui, la couleur, on a dit qu'on regarderait ça après.
Partout en HTML on peut mettre la couleur en anglais, seulement on est vite dépasser et ça permet pas beaucoup de teinte différente. Donc on utilise les nombres héxadécimaux.
Héxa quoi ????

Héxadécimaux... On commence toujours par une dièse (#) pour les mettre et ensuite on met une suite de 6 chiffres ou lettres. C'est un petit peu compliquer à comprendre, alors pour faire plus simple regardez ça: Fiche couleur. (merci et bravo à la personne qui a fait cette page !)
Ça vous parait plus clair là ?
Si vous voulez comprendre un peu plus comment ça marche je donne un petit exemple. (a terme je ferais un petit cours sur les couleurs...) Par exemple la couleur #5583C8 le teinte de rouge cela correspond au deux premiers chiffres "55", la part de vert aux deux suivants "83" et la part de bleu aux deux derniers "C8".
Vous êtes peut-être habitués au couleur décimal gràce a votre logiciel graphique R=245 V=17 et B=107. Mais là c'est du héxadécimal... C'est différents quoi! Gràce à vos logiciels de programtions ou graphiques (même paint, le tout petit logiciel de windows) vous pouvez trouver la valeur héxadécimal d'une couleur. Si vous ne trouvez pas comment faire, demandez sur le forum

On tire un trait


Vous croyez quand même pas vous en tirez comme ça ? Ingurgiter quelques données et finir pof comme ça ? Halala... Allez juste un petit plus avant de finir.

Imaginons qu'on veuille tracer une ligne entre "Bienvenue sur mon site!" et "S'il n'est pas encore magnifique..." Rien de plus simple! On rajoute un petit tag et le tour est jouer! Faites le test avec ça...
Code :
<html>
  <head>
    <title>Le traitement du texte en HTML</title>
  </head>
  <body>

<font size="5" volor="purple"><div align="center">
<b>Bienvenue sur mon site</b>
</font></div>
<br>

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

<br>
<blockquote>
La couleur est là, ainsi que l'alignement! On a colorier plus finement, changer la police... C'est tout beau maintenant! On a même une jolie ligne!<br>
- Toi là bas au fond! On ne parle pas pendant mon cours, allez hop! Au coin!
</font>
</blockquote>
<br>
<br>
<font color="#5588CC"><div align="right">
<i><b>Bonne visite!</b></i>
</div>
<p>
<center>
Et amusez vous bien!</center>
</font>

  </body>
</html>



Et une jolie petite ligne rouge, une ! Vous avez compris le code ? Il suffit de mettre <hr>. Et comme vous l'avez vu, on peut même rajouter des options! Voici de petites explications... Ce n'est qu'une ligne, mais on se servira des même options dans beaucoup de cas! Donc essayer de le retenir ! (mais ça veut aussi dire qu'on le reverra, donc vous aurez le temps de s'y habituer...)
[lien]width=\"\" : en français ça veut dire largeur. Vous devinez ce qui vous reste à faire pour l'aggrendir ou la rétrécir? On diminue le pourcentage. Vous pouvez aussi enlever le "%" et ça vous donnera une taille en pixel. Essayer par exemple: <hr width=\"400\">.
  • noshade : Si on met noshade alors il n'y aura pas d'effet d'ombre. Si on ne le met pas, il y aura l'effet d'ombre.
  • size=\"\" : On a déjà vu ça, non? Ici cela ne vous donne pas la taille du texte, mais la hauteur de la ligne...
  • color=\"\" : ça aussi on a déjà vu. Et on le reverra très souvent ! ça marche de la même manière, relisez plus haut si vous avez oublié.
  • align="" : Devinez quoi? On l'a déjà vu! C'est l'alignement de la ligne par rapport à la page... left, right, center... (où le lieux dans lequel elle est. On le verra plus tard !)[/liste]

    Bon ! Bah mine de rien, on a bien avancé pendant ce "petit" chapitre! Encore une fois, tout ça, c'est les bases! Le cap dur à passer, après ça vient tout seul, alors bosser dur et n'hésitez pas à relire si certaines choses vous paraissent flou! Et si vous avez encore des problèmes, le reflexe: Le forum !

    L'heure du bilan

    • Mettre en gras, italique, souligné, barré.
    • Sauter des lignes.
    • Aligner le texte.
    • Mettre de le texte en couleur, l'agrandir, changer la police.
    • Tracer une ligne.
  • 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 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