La Bnbox !

Créateur de sourires...

Mon compte

S'inscrire

Recherche

Vous êtes ici : Accueil » Atelier Webmaster » Cours HTML » TD - entrainement/les listes

Atelier Webmaster



< Cours précédent - Sommaire du cours

Cours HTML : TD - entrainement/les listes

dgsdf

Explication du sujet


Voilà votre premier TD (travaux dirigés) bien que celui ci soit mini. En fait il va vous faire apprendre des choses d'une manière un peu différente et plus pédagogique, c'est tout! Alors ne stressez pas!

Imaginons que nous sommes une entreprise du nom de Noisy Fish qui a débuté dans la vente de VHS et qui maintenant vend aussi des DVD. Grâce à l'avènement du DVD ses affaires réussissent plutôt bien, et elle passe en SARL avec 3 collaborateurs qui... (oups pardon, je suis repartie dans les cours d'économie là!) Donc notre entreprise évolue, et plusieurs clients aimeraient savoir avant de lui téléphoner comment cela se passe chez elle.
Elle décide donc de créer un site internet que les visiteurs professionnels puissent visiter pour voir plusieurs informations sur Noisy Fish.
  • Nombres d'employés
  • La hiérarchie et principalement la composition de la direction.
    L'entreprise aimerais aussi que les visiteurs est accès à un numéro de téléphone, qu'ils puissent visualiser les différents lieux où Noisy Fish est implanté et bien sur les horaires d'ouverture et de fermeture de l'entreprise. (pour un premier TD je me suis dit qu'il fallait rester dans le domaine du travail, comme tout le monde! On va continuer un peu avec Noisy Fish et puis vous inquiétez pas, après on retombera sur des TD et TP moins dans les normes...)


Pour l'instant on pas trop encore appris à classer les mots, c'est ça qui vous bloque ? Allez, stressez pas, vous allez bientôt savoir le faire...

Mise en page


Avant toute chose faire un brouillon! ça vous parait peut-être idiot mais ça gagne pleins de temps! Oui c'est vrai quand on fait des pages pas très compliqués, on peut bien ne pas faire de brouillon, n'est ce pas? Pas de ça... Souvent on visualise mal et on se perd dans les codes et là... c'est le drame!
Donc le brouillon...
La page va se présenter ainsi :
  • Une couleur de fond. On choisira une couleur plutôt beige.
  • Un titre : "Noisy fish" en grand, gras et centré! Comme couleur on mettra un vert.
  • En dessous et centré aussi, un petit message de bienvenue. Du style "bienvenue sur le site de l'entreprise qui fait du bruit !".
  • On saute quelques lignes et on place les informations que l'on veut. Nombre d'employés, la hiérarchie, bref, tout ce qu'on a dit plus haut. Mais c'est bien beau ça, avec ce qu'on a appris on va avoir du mal à faire un truc classe... Avez vous vu comment est positionné mon texte par rapport au titre? Il est un peut en retrait. J'ai utilisé (tada !) "les listes"! Et c'est ça qu'on va apprendre et qui va nous permettre de créer une page de présentation de Noisy Fish bien organisé...
  • Puis grâce aux listes on affichera le numéro de téléphones et les différentes adresses de Noisy Fish avec les différentes horaires de fermeture! (je ne vous raconte même pas le bazar que ça va être!)

- Puis on finit en disant "au revoir" ! et "à bientôt" ! Avec en prime un petit logo de l'entreprise! (non c'est pas encore une image... bn_tongue)

Cela vous semble-t-il faisable ? Vous êtes capables de tout faire, sauf les listes et le logo ! Si vous ne vous souvenez plus comment traiter le texte ou mettre une couleur au fond, relisez moi les 2 derniers chapitres ! Et plus vite que ça ! Pour le reste, on y passe tout de suite...

Apprentissage


Le logo

On commence par le plus simple, normal! Vous connaissez les petits smiley qu'on utilise de temps en temps sur les mails du style : bn_wink :'-) :'\ :-@ ? Et bien on va faire un logo de ce style la, mais en mieux! (normal!)

Pour cela il suffit d'utiliser <pre></pre> En fait ce tag prend compte de tout. Si vous mettez 2 espaces entres 2 lettres, sur la page html on verra ces 2 espaces. Si vous sautez une ligne pareil... Et à quoi ça va nous servir pour notre logo? Et bien regardez...
Code :
<html>
  <head>
    <titleE>Un joli logo!</title>
  </head>
  <body>
Le logo de Noisy Fish...<p>

<pre>

<pre>
<b>|\ |</b>               <u>      </u>/(Video compagny)/
<b>| \|(<u> </u>)O / \/   |<sup>----</sup>  / |</b>
   ><> <b>| \ /    |-- o \ |</b>
><>     <b>//     |   | / |^|</b>
</pre>
</pre>

  </body>
</html>



Et le résultat ça donne un joli petit logo! (vous avez l'autorisation de faire du copier-coller si vous avez du mal avec des espaces !
Si vous voulez vous amuser avec, c'est assez marrant et on peut faire de jolis petit logo! Vous pouvez utiliser toutes les balises que vous voulez, mais il faut faire attention aux espaces. En fait c'est un tag un petit peu aléatoire, on ne sait jamais précisément où va tomber tel tiret, tel lettre, etc... Il faut faire des tests...

Vous l'avez peut-être vu, j'ai utilisé un tag que l'on ne connait pas <sup></sup>. C'est un tag que je n'avais jamais utilisé car on en a rarement l'occasion, mais ça peut toujours être utile. Les lettres entre <sup></sup> sont placés à l'exposant, comme ça! x<sup>3</sup>+4x<sup>2</sup>-3x+10=0 (il ne vous manque plus qu'à trouver \Delta et ainsi avoir à vu de nez, les 3 solutions de cette équation^^) En l'occurrence ça m'a permis de surélevés mes tirets pour qu'ils soient bien placés pour faire une barre du "F".

Donc voilà, vous savez tout sur <pre></pre> ! Amusez vous bien ^-^
Les listes

Après relecture de mon cours sur les listes, je l'ai vraiment trouvé... Nul... Je suis donc en train de le refaire et vu qu'on me force à sortir la Bnbox au plus vite (bn_tongue) et bien je n'ai pas encore eu le temps d'y retravailler !
Ceci dit, j'ai pensé qu'il était intéressant pour vous d'avoir cette page, pour que vous puissiez commencer à la faire. (oui oui, allez hop c'est pas grand chose, fond, titre, invitation, br br br, et logo ! Tout petit... petit... travail !) En plus comme ça vous avez du temps pour réfléchir au numéro de téléphone et à l'adresse de Noisy Fish bn_lol

Cela dit je suis quand même désolé de ne pouvoir vous faire lire ce cours tout de suite.
Je me dépêche...


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