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

?

Pierre Corneille scribouille : Je m'appelle Pierre Corneille je suis mort le 2 décembre je meur avec la chimère Le 02 décembre, 13h49 via Résumé du livre : Le Cid de...

reptilause murmure : TG Le 02 décembre, 13h48 via Résumé du livre : Le Cid de...

reptilause scribouille : Salut bande
de BN
Le 02 décembre, 13h48 via Résumé du livre : Le Cid de...

reptilause tergiverse : Reptileuse Le 02 décembre, 13h47 via Résumé du livre : Le Cid de...

Xeno déclare : Ok on y gagne quoi Le 30 novembre, 16h38 via Texte intégral - L'Avare de...

bobo écrit : WTF le calcul !*
Des barres!
Le 28 novembre, 20h31 via Résumé : La Promesse de l'a...

bobo scribouille : Merci!
Ca va me servir!
Le 28 novembre, 20h30 via Résumé : La Promesse de l'a...

bobo s'exclame : Tchippppppppp Le 28 novembre, 20h30 via Résumé : La Promesse de l'a...

mimi déclame : Qui aime chica vampiro ou bien qui a deja vu chica vampiro Le 28 novembre, 12h24 via Résumé - Les Fourberies De ...

lol bafouille : Lol le calcul Le 27 novembre, 15h50 via Mémo de VHDL

jenpierrdecou écrit : Et les armes en diamant sur bo2 Le 26 novembre, 14h22 via Résumé : L'Avare

jenpierrdecou déclame : Ctrl+w et vous avez argent illimité sur gta Le 26 novembre, 14h21 via Résumé : L'Avare

jenpierrdecou bafouille : Lololollolol Le 26 novembre, 14h21 via Résumé : L'Avare

jen déclare : Oké Le 26 novembre, 14h20 via Résumé : L'Avare

123 gribouille : Slttttttt Le 26 novembre, 13h23 via Résumé : Le Mariage de Figa...

Bnmaster chuchote : @lali Le voici Les Fourberies de Scapin Le 24 novembre, 10h13 via Résumé - Les Fourberies De ...

lali écrit : S il vous plait est ce que vous pouvez me donner le resume de fourberie de scapin merci d avance Le 23 novembre, 13h29 via Fiches sur les personnages ...

lali griffonne : Bibi est ce que c est l histoire du fourberie de scapin? Le 23 novembre, 13h28 via Fiches sur les personnages ...

bibi dit : Yo bb Le 23 novembre, 11h40 via Fiches sur les personnages ...

Bnmaster proclame : @eddiegreatbanks Nope, désolé.N'hésite pas à me l'envoyer un si tu en écris un. Le 22 novembre, 9h50 via Accueil

Zefir scribouille : Coucou Celia Faure, je viens de terminer le tom 7 de Autre monde de Maxime Chattam. J'ai énormément apprécié ce livre et je te le conseille vivement, même si je ne connais pas tes goûts. Si tu veux d'autres conseils plus en détail, on peux me contacter par skype: zefir-0011, mail: Adresse emailm.
Très bonne journée à tous !
Le 20 novembre, 16h28

bakalaye écrit : Oee les gens Le 17 novembre, 22h01 via Résumé : Le Tartuffe de Mol...

cheick écrit : Tout seul Le 17 novembre, 20h25 via Résumé : La Promesse de l'a...

cheick murmure : Personne Le 17 novembre, 20h25 via Résumé : La Promesse de l'a...

cheick écrit : Vous Etes d acore Le 17 novembre, 20h25 via Résumé : La Promesse de l'a...

cheick proclame : Aillllll Le 17 novembre, 20h24 via Résumé : La Promesse de l'a...

cheick proclame : Pogba ballon d or Le 17 novembre, 20h23 via Résumé : La Promesse de l'a...

cheick s'exclame : Je rigole Le 17 novembre, 20h23 via Résumé : La Promesse de l'a...

cheick dit : Aller voire Le 17 novembre, 20h22 via Résumé : La Promesse de l'a...

cheick chuchote : Hhh Le 17 novembre, 20h21 via Résumé : La Promesse de l'a...

Niainez gribouille : Weshhhh Le 17 novembre, 19h17 via Résumé : La Promesse de l'a...

sophie écrit : C'est trop facile Le 17 novembre, 14h12 via Texte intégral - Le Médecin...

k proclame : K Le 13 novembre, 19h33 via Romain Gary : La Promesse d...

@eddiegreatbanks dit : Est ce que vous avez un resume de nantas de zola? Le 09 novembre, 17h21 via Recherche

Bnmaster scribouille : @celia faure Il va falloir nous dire ce que tu préfères comme style pour qu'on puisse te conseiller : fiction, fantasy, historique, ... ? Le 09 novembre, 8h54 via Centrale PC 1997 - Exercice...

tgttttg écrit : Vt Le 09 novembre, 0h17 via Accueil

tgttttg dit : Vfev Le 09 novembre, 0h17 via Accueil

lola dit : Bruuuuuuuuuh Le 08 novembre, 17h41 via Fiches sur les personnages ...

kk scribouille : Salam Le 08 novembre, 15h22 via Les avantages et les risque...

quentin déclame : Littérature : Résumé : La Promesse de l'aube Le 07 novembre, 21h36 via Résumé : La Promesse de l'a...

-yu scribouille : -èuè Le 07 novembre, 14h31 via Résumé - Le Médecin Malgrè ...

$ chuchote : 7 Le 07 novembre, 7h45 via Le raisonnement par l'absur...

Bnmaster scribouille : Ok Le 06 novembre, 21h20 via Résumé du livre : Le Cid de...

celia faure dit : Personne ne repond sa devient un peu beaucoup soulant Le 06 novembre, 9h34

celia faure griffonne : Salut auriez vous un livre bien a me conseiller pour lire ?
Merci d'avance !
PS : j'adore lire, voilà pourquoi je vous pose cette question
et aussi je n'ai plus aucun livre que je n'ai pas lu chez moi du coup voili voilou
et encore une fois merci d'avance d'avoir lu mon message
bisous a tous XXX
Le 06 novembre, 9h31

Fgcgbcgnbfg s'exclame : Salut Le 05 novembre, 18h48 via Résumé du livre : Le Cid de...

Le BG du 93 déclame : Salam les kheys, merci de le partage de le livre. nique ta mere la pute le prof qui nous dit de lire moliere sa mere. Ciao bye cimer Le 05 novembre, 14h01 via Biographie de Molière

Belle-Amie :') écrit : Coucou Le 03 novembre, 20h34 via Fiches sur les personnages ...

cecile.27* gribouille : Ftcdxdkrysryesryhsi(èrf-ylgtuèytçomdfvypccaaa Le 03 novembre, 19h09 via Français

cecile.27* écrit : Vous éte tous nul Le 03 novembre, 19h08 via Français

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