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

?

Cc dit : Cc cv Le 23 juin, 11h52 via Accueil

liliswag bafouille : Zz Le 20 juin, 19h13 via Résumé - Les Fourberies De ...

liliswag s'exclame : Z Le 20 juin, 19h13 via Résumé - Les Fourberies De ...

liliswag s'exclame : Z Le 20 juin, 19h13 via Résumé - Les Fourberies De ...

liliswag proclame : Zz Le 20 juin, 19h13 via Résumé - Les Fourberies De ...

liliswag gribouille : Zzzzzzzzzzzzzzzzzz Le 20 juin, 19h13 via Résumé - Les Fourberies De ...

liliswag tergiverse : Zzzzz Le 20 juin, 19h13 via Résumé - Les Fourberies De ...

liliswag s'exclame : Zzzzzzzzzzzzzzzz Le 20 juin, 19h13 via Résumé - Les Fourberies De ...

liliswag dit : Zzzzz Le 20 juin, 19h12 via Résumé - Les Fourberies De ...

liliswag s'exclame : Zzzzzzzz Le 20 juin, 19h12 via Résumé - Les Fourberies De ...

liliswag murmure : Zz Le 20 juin, 19h12 via Résumé - Les Fourberies De ...

liliswag chuchote : Vous êtes gentils Le 20 juin, 19h11 via Résumé - Les Fourberies De ...

polo murmure : Hrllo Le 19 juin, 9h11 via Résumé - La Chèvre De M. Se...

yooss chuchote : Je passe mon oral de frrancais demain comment faire pour preparer mon entretien svp Le 13 juin, 15h44 via Le déïsme selon Voltaire

olivier de carglass scribouille : Dou tu prend mon nom ta cru ttu te leve tout les matin pour faire mon job ou quoi
!!!
Le 13 juin, 9h38 via Résumé du livre : Le Cid de...

Mr scribouille : Débilité Le 11 juin, 22h17 via Résumé scène par scène - Le...

bruh dit : Bonjour je suis olivier de carglass Le 11 juin, 10h39 via Résumé : Andromaque

lulu890 tergiverse : JE M EN CHOU DES MéRESil vont rien Le 10 juin, 19h50 via Résumé - Les Fourberies De ...

lulu890 scribouille : SALUT Le 10 juin, 19h49 via Résumé - Les Fourberies De ...

cc déclame : Cc Le 08 juin, 18h04 via Résumé - Les Fourberies De ...

Water chuchote : CAC les gens vous habiter ou ? ? Le 07 juin, 19h25

Bobi proclame : Qui peut m'aider à faire un devoir svp ? Le 07 juin, 19h16 via Résumé - Le Médecin Malgrè ...

cc dit : Cc Le 06 juin, 17h55 via Résumé scène par scène - Le...

L'homme différent des autres dit : Toi même Le 06 juin, 10h59 via Les avantages et les risque...

P'tit lu déclame : Coucou Le 05 juin, 14h07 via Fiches sur les personnages ...

cool tergiverse : Coucou Le 28 mai, 18h22 via Résumé : La Promesse de l'a...

bois griffonne : Ouké Le 26 mai, 20h08 via Résumé scène par scène - Le...

loganisa déclare : Iiiiiiibonju Le 22 mai, 3h25 via Résumé scène par scène - Le...

mae déclame : En quoi la fin de la pièce les fourberies de scapin correspond bien au gore de la comedie Le 20 mai, 19h19 via Littérature

rimi bafouille : Moliere Le 17 mai, 16h40 via Résumé - Les Fourberies De ...

lucy écrit : Salut ce texte est pour ma mère, elle doit m'aider pour mon devoir... Le 14 mai, 13h37 via Texte intégral - Le Médecin...

lol scribouille : Mdr Le 14 mai, 11h38 via Résumé scène par scène - Le...

lol dit : Mdr Le 14 mai, 11h37 via Résumé scène par scène - Le...

jules tergiverse : ANNIVERSAIRE toi jules Le 12 mai, 16h09 via Résumé - Les Fourberies De ...

jules gribouille : A qui tu parle Le 12 mai, 16h09 via Résumé - Les Fourberies De ...

jules dit : -_- Le 12 mai, 15h14 via Résumé - Les Fourberies De ...

jules proclame : Salut Le 12 mai, 15h12 via Résumé - Les Fourberies De ...

j déclare : Slt Le 12 mai, 15h06 via Résumé - Les Fourberies De ...

ojzbd v s'exclame : Pourquoi ?? Le 12 mai, 8h28 via Accueil

micheloiseau écrit : 3+4=6 Le 11 mai, 21h42 via Résumé : Andromaque

waw j'aime le Cid murmure : Waw j'aime le Cid Le 11 mai, 3h57 via Résumé scène par scène - Le...

Lolo proclame : Cc moi j ai fait de la littérature Le 10 mai, 18h18 via Résumé - Le Médecin Malgrè ...

mimi2780 griffonne : 3+4=7 Le 08 mai, 12h42 via Résumé - Les Fourberies De ...

nite chuchote : Slt Le 08 mai, 10h03 via Résumé scène par scène - Le...

nite gribouille : Cc Le 08 mai, 10h02 via Résumé scène par scène - Le...

. bafouille : Cc Le 04 mai, 18h47 via Résumé : L'Avare

7877 écrit : Bonjour hey les gens j espere que tout le monde vaa bien est squezzie bisous bisous Le 04 mai, 8h34 via Des codes pour crypter ses ...

7877 écrit : 987987987 Le 04 mai, 8h33 via Des codes pour crypter ses ...

vivepoutine écrit : Keh Le 30 avril, 18h08 via Résumé : Le Tartuffe de Mol...

evapedersen écrit : Merci Le 30 avril, 18h07 via Résumé : Le Tartuffe de Mol...

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