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

?

cokdflvkskl,vflsqr déclame : Cc les gamer Aujourd'hui, 18h30 via Texte intégral - Le Médecin...

wallislapis100 dit : Salut Aujourd'hui, 18h30 via Texte intégral - Le Médecin...

yayoub dit : Merci Le 18 janvier, 19h56 via Résumé - Les Fourberies De ...

Cc griffonne : ALGERIE MAROC Le 17 janvier, 18h12 via Accueil

Ferret_Max scribouille : Http://la-bnbox.fr/38-Resume--L-Avare.cahier Le 17 janvier, 14h29 via Résumé : L'Avare

Ferret_Max déclare : Ta gueule tier moche Le 17 janvier, 14h28 via Résumé : L'Avare

sousouubg griffonne : Salut,jrouilleeuuhh Le 16 janvier, 13h34 via Résumé scène par scène - Le...

bg gribouille : Algerie Le 15 janvier, 17h58 via Résumé : On ne badine pas a...

lilicaca déclame : Le la il nous vous ils elle elles je tu on vous elles ils il elle Le 13 janvier, 16h32 via Résumé - Le Médecin Malgrè ...

coincoin griffonne : Par contre Cléone est la confidente à Hermione pas sa suivante Le 10 janvier, 16h52 via Résumé : Andromaque

mesar bafouille : Cool ce site Le 10 janvier, 13h54 via Résumé scène par scène - Le...

mesar s'exclame : Cool ce site Le 10 janvier, 13h54 via Résumé scène par scène - Le...

andro gribouille : Ce livre est incompreensible merci Le 09 janvier, 22h11 via Résumé : Andromaque

Glouglou scribouille : Je déteste le français Le 09 janvier, 18h51 via Biographie de Molière

G dit : F Le 09 janvier, 18h24 via Résumé scène par scène - Le...

hahaha tergiverse : Le pire livre que j'ai jamais lu Le 08 janvier, 20h01 via Résumé : Le Tartuffe de Mol...

ayoub bafouille : Merci parce que javais un magazine literraire a faire sur chaque resumé Le 08 janvier, 18h48 via Résumé - Les Fourberies De ...

vicki gribouille : Ce livre est nul merci pour les resumes Le 07 janvier, 12h43 via Résumé : La Promesse de l'a...

Amina s'exclame : Ce livre set dur a comprendre heureusement qu il y ces résumers. Le 05 janvier, 17h18 via Résumé scène par scène - Le...

liam12344 murmure : Je suis entrain de l'étudier j'éspere que ces bien Le 03 janvier, 12h32 via Résumé - Les Fourberies De ...

dadadarrt dit : Cool lol Le 28 décembre 2017, 16h35 via Résumé - Les Fourberies De ...

drag0nb0rndg dit : Siphano1991? Le 19 décembre 2017, 17h55 via Fiches sur les personnages ...

Siphano1991 bafouille : Bonjour Le 19 décembre 2017, 17h53 via Fiches sur les personnages ...

7 déclame : 7 Le 18 décembre 2017, 10h42 via L'homme et les mouettes

j'aime pas l'ecole tergiverse : Est ce que je suis le seul a ne pas aimer l'ecole ? je pense que non mdrrr Le 17 décembre 2017, 19h21 via Résumé - Le Médecin Malgrè ...

yrtd murmure : Uf Le 17 décembre 2017, 13h10 via Romain Gary : La Promesse d...

de bafouille : 3 +4=7 Le 14 décembre 2017, 17h31 via Résumé - Les Fourberies De ...

DAVID KOUNDA murmure : SKIRIRIR PA PA NOT KETCHUP JUST SOUSE PA PA PAPA NA PA Le 12 décembre 2017, 20h51 via Résumé : On ne badine pas a...

cheie chuchote : Aider moi comment faire un journaal de lecture ? Le 11 décembre 2017, 19h31 via Résumé : Le Tartuffe de Mol...

shaiii la best écrit : Wshhh Le 11 décembre 2017, 17h09 via Les avantages et les risque...

ugjujh s'exclame : Saluuuuut Le 11 décembre 2017, 17h09 via Les avantages et les risque...

ugjujh déclare : Tyvhbyju Le 11 décembre 2017, 17h09 via Les avantages et les risque...

joyce scribouille : Ce roman tres passionant Le 11 décembre 2017, 8h58 via Résumé scène par scène - Le...

joyce chuchote : Quel operation facile Le 11 décembre 2017, 8h53 via Résumé scène par scène - Le...

ok proclame : Qui aurais une carte mentale sur Mr Forestier de Bel-Ami svp? Le 09 décembre 2017, 14h11 via Fiches sur les personnages ...

ok griffonne : Salut Le 09 décembre 2017, 14h10 via Fiches sur les personnages ...

mamou murmure : Mamou 278 Le 08 décembre 2017, 11h48 via Fiches sur les personnages ...

Dranreb dit : Merci pour le résumé des Fourberie de Scapin ! Mais pourriez-vous faire relire le texte par un élève de CM2 pour qu'il corrige la douzaine de GROSSES fôtteu qu'il contient ? Ça serait bien ! Le 05 décembre 2017, 14h15 via Accueil

la perle des ocens chuchote : Hum Le 04 décembre 2017, 18h03 via Fiches sur les personnages ...

bruh s'exclame : On 3+4 pas nous ?! Le 04 décembre 2017, 8h19 via Résumé - Le Médecin Malgrè ...

1% déclare : C'est moi à 99% Le 03 décembre 2017, 12h48 via Résumé : Le Tartuffe de Mol...

la mouche proclame : Je suis un bourdon Le 03 décembre 2017, 11h52 via Résumé : Le Tartuffe de Mol...

meuh bafouille : 85+
3---9339=12
Le 30 novembre 2017, 17h53 via Résumé scène par scène - Le...

1234 scribouille : D Le 26 novembre 2017, 12h17 via Fiches sur les personnages ...

Akuu s'exclame : Yo Le 24 novembre 2017, 16h09 via Résumé : Andromaque

oui chuchote : Voila Le 23 novembre 2017, 19h15 via Résumé : Andromaque

arif tergiverse : Trop facile Le 22 novembre 2017, 18h53 via Résumé - Le Médecin Malgrè ...

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

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

kenfirstar s'exclame : Salut Le 16 novembre 2017, 17h02 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