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

?

Tibo proclame : Damn les gens Hier, 13h53 via Résumé - Le Médecin Malgrè ...

leo gribouille : Cherche filles Le 18 novembre, 16h02 via Résumé : Andromaque

leo s'exclame : Send nudes Le 18 novembre, 16h01 via Résumé : Andromaque

BERENICE bafouille : SALUUUUT Le 16 novembre, 20h55 via Accueil

kenfirstar s'exclame : Salut Le 16 novembre, 17h02 via Accueil

kenfirstar murmure : JE SUIS NOUVEAU ALOR SALUT SAVA Le 16 novembre, 16h19

kkljlk chuchote : Yoloooooooooooo Le 15 novembre, 20h15 via Fiches sur les personnages ...

crousthibax gribouille : Findus Le 14 novembre, 16h59 via Résumé : Andromaque

lol1256 murmure : Toi meme Le 11 novembre, 18h33 via Accueil

Douae doudi s'exclame : Lettres de mon moulin.le secret de maître corneille résumé Le 11 novembre, 12h22 via Résumé - Le Secret de Maîtr...

lol1234 dit : Je pense que j'ai raison Le 09 novembre, 21h04 via Fiches sur les personnages ...

... bafouille : J'ecris quoi au juste Le 08 novembre, 20h23 via Résumé - Les Fourberies De ...

vine écrit : Uh i never went to oovoo javer Le 08 novembre, 17h40 via Résumé scène par scène - Le...

rodrigue scribouille : Get out my poem Le 08 novembre, 17h17 via Résumé scène par scène - Le...

whats up écrit : H3y Le 08 novembre, 17h16 via Résumé scène par scène - Le...

Real Madame chuchote : Hey ladies Le 08 novembre, 17h15 via Résumé scène par scène - Le...

fake madame bafouille : Stregganona Le 08 novembre, 17h15 via Résumé scène par scène - Le...

jjj griffonne : Yo this class whack Le 08 novembre, 17h14 via Résumé scène par scène - Le...

jjj scribouille : SHvshvhscv Le 08 novembre, 17h14 via Résumé scène par scène - Le...

jjj bafouille : Mjjj

Le 08 novembre, 17h13 via Résumé scène par scène - Le...

hja tergiverse : Bonjour

je ne comprends pas la démonstration par récurrence de la suite de Fibonnacci de l'exemple 2
Le 07 novembre, 9h54 via Raisonnement par récurrence

Salut c qui ?? gribouille : 3+4 Le 04 novembre, 22h13 via Résumé - Le Médecin Malgrè ...

Gros zizi gribouille : Merci comme sa je vait lire le livre? Le 04 novembre, 21h52 via Résumé scène par scène - Le...

Theo écrit : Super Le 04 novembre, 10h21 via Résumé : On ne badine pas a...

momi proclame : Mdr Le 02 novembre, 19h29 via Résumé : L'Avare

kwj scribouille : Hjjj Le 30 octobre, 9h44 via Résumé scène par scène - Le...

GG tergiverse : Comment cv Le 28 octobre, 19h19 via Résumé : L'Avare

gh bafouille : Ugit Le 28 octobre, 18h08 via Résumé - Les Fourberies De ...

jule s'exclame : Cv? Le 26 octobre, 18h32

jule proclame : Hey Le 26 octobre, 18h31

popo déclare : Salam tout le monde
mini_bn <3
Le 26 octobre, 16h26 via Biographie et Bibliographie...

jujujujuju chuchote : Bonsuir
je me suis égaré sur ce site mdrr
Le 26 octobre, 14h31 via Résumé : La Promesse de l'a...

apprendre :) murmure : T chelou toi bn_big_smile
bn_neutral
Le 25 octobre, 20h21

jaja77 gribouille : Je délire, je suis entrain de me parler toute seul.
bn_big_smile mini_bn bn_wink
Le 25 octobre, 20h18

jaja77 tergiverse : Ouais et toi ?
bn_yikes
Le 25 octobre, 20h16

jaja77 scribouille : ça va bn_big_smile Le 25 octobre, 19h29

jaja77 proclame : bn_big_smile Le 25 octobre, 19h28

jaja77 bafouille : mini_bn bn_wink Le 25 octobre, 16h43

jaja77 dit : J'aime trop les BN ça tombe bien bn_big_smile Le 25 octobre, 15h46

fafa77 tergiverse : C bien le cid par contre y a des mots de l'ancien français

bn_wink mini_bn
Le 25 octobre, 12h08

conglomerat s'exclame : C un vieux resume ca Le 19 octobre, 13h41 via Résumé : La Promesse de l'a...

conglomerat déclame : Zouf Le 19 octobre, 13h41 via Résumé : La Promesse de l'a...

fff déclame : Hello Le 18 octobre, 20h06 via Résumé - Les Fourberies De ...

mllm dit : Je t'aime Le 11 octobre, 17h26 via Le raisonnement par l'absur...

mllm s'exclame : Mourir Le 11 octobre, 17h25 via Le raisonnement par l'absur...

le keneur tergiverse : Benji Le 11 octobre, 9h34 via La Fonction Mémoire

lilou écrit : Dit le resume mael Le 10 octobre, 16h27 via Résumé - Les Fourberies De ...

mael dit : Cc Le 10 octobre, 16h22 via Résumé - Les Fourberies De ...

énola proclame : Ca sert sa va Le 09 octobre, 15h44 via Résumé scène par scène - Le...

Bnmaster dit : Au fait, hubiC de OVH offre 25go de stockage gratuitement. Avec mon code parain, c'est 5go en plus pour vous et pour moi : TJHNOY
Enjoy mini_bn
Le 06 octobre, 21h17 via Accueil

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