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

?

jaja tergiverse : Nnnnnnnnnnnn Aujourd'hui, 11h38 via Résumé : La Guerre de Troie...

jaja déclare : Pigjh Aujourd'hui, 11h38 via Résumé : La Guerre de Troie...

aliou super saiyan white scribouille : Hi, ls gars cmmnt aller vous? Hier, 20h49

jhbgyvfvxesryv dit : Génial !!! Le 17 avril, 15h05 via Résumé - Le Médecin Malgrè ...

fnhjyj(jy gribouille : Corniche Le 09 avril, 15h46 via Résumé scène par scène - Le...

ZEDAKA scribouille : N Le 07 avril, 13h42 via Résumé - Les Fourberies De ...

wawa bafouille : Bonjour Le 07 avril, 12h09 via Le personnage mythologique ...

mimine dit : Mdrrr Le 04 avril, 19h43 via Résumé : La Guerre de Troie...

NOOB gribouille : Bonjour je voudrai savoir le ton que doit pendre la fleche au IIIscene svp Le 02 avril, 20h04 via Texte intégral - L'Avare de...

R?elalàal déclame : Sa fait 7 Le 31 mars, 20h24 via Résumé - Les Fourberies De ...

gzhgz scribouille : Bonsoir paris Le 25 mars, 19h33 via Résumé scène par scène - Le...

kim proclame : J'ai une questions: est ce que rodrigue et chimène font passer l'honneur avant tout dans la scène 3 actes3 Le 25 mars, 14h46 via Résumé scène par scène - Le...

kim gribouille : Lol Le 25 mars, 14h44 via Résumé scène par scène - Le...

BELAMIFAN38 chuchote : Coucou les amis je suis un fan du roman Bel-ami Le 18 mars, 10h37 via Fiches sur les personnages ...

7 écrit : Tout ça est faux Le 17 mars, 15h16 via Résumé : L'Avare

mmm bafouille : Dd Le 14 mars, 19h28 via Fiches sur les personnages ...

uyftè bafouille : Bonsoir Le 12 mars, 8h21 via Fiches sur les personnages ...

Demetrius gribouille : Download fortnite crack Le 11 mars, 23h00

???????? proclame : Ce livre est bien Le 11 mars, 13h21 via Résumé - Les Fourberies De ...

???????? bafouille : Je me sair pour mon devoir de école Le 11 mars, 13h17 via Résumé - Les Fourberies De ...

lulu dit : Bonjour Le 10 mars, 21h31 via Résumé - Les Fourberies De ...

La fan du CID murmure : La gifle est donnée à Don Diegue par le Compte car le Compte juge que ça aurait dû être lui le gouverneur du prince ( vers ? ) Le 06 mars, 18h03 via Résumé scène par scène - Le...

La fan du Cod chuchote : Le page est un jeune servant qu'on les nobles et qui les suit partout ( une sorte de chien quoi ) Le 06 mars, 18h01 via Résumé scène par scène - Le...

youredese gribouille : Bonjour Le 03 mars, 12h59 via Résumé scène par scène - Le...

choco déclare : Qui d'éclanche la gifle citer le vers? Le 25 février, 17h36 via Résumé scène par scène - Le...

choco déclare : Qui est Page Le 25 février, 17h18 via Résumé scène par scène - Le...

choco écrit : Salut c'est moi choco Le 25 février, 17h17 via Résumé scène par scène - Le...

qsdfghjklm* chuchote : Resume du livre naissance du fa Le 20 février, 17h43 via Recherche

yo proclame : Yo yo Le 17 février, 20h54 via Résumé - Le Médecin Malgrè ...

eva scribouille : Qu el qu un a un resume sur le voyage de mr perrichon ? Le 11 février, 18h38 via Fiches sur les personnages ...

evalol déclare : 1a2z Le 11 février, 18h36 via Résumé - Les Fourberies De ...

sysy s'exclame : Quelqun a un resume des evenements importants ds bel ami? Le 11 février, 1h38 via Fiches sur les personnages ...

jojolerigolo tergiverse : Qui est a Léon Blum Le 10 février, 18h00 via Politique d'accessibilité

tom s'exclame : Bonjour Le 09 février, 13h39 via Résumé scène par scène - Le...

dams chuchote : Et dams lithopedion Le 02 février, 11h08 via Résumé scène par scène - Le...

dams écrit : Qui et votre rapeure prefere ou chanteure moi DAMSO DAMSO DAMSO DAMSO DAMSO c'est cqfd !! Le 02 février, 11h07 via Résumé scène par scène - Le...

dams dit : Bonjour Le 02 février, 11h05 via Résumé scène par scène - Le...

dams déclame : Elle et bien mais c'est notre prof de francais quoi qui nous demande de la faire Le 02 février, 11h05 via Résumé scène par scène - Le...

Laura.lly gribouille : BONJOUR Le 01 février, 21h00 via Résumé scène par scène - Le...

juliaaaaaa griffonne : HEYYYY!!Vous allez bien? Le 31 janvier, 18h47 via Résumé scène par scène - Le...

maelys griffonne : Le cid en soit n est pas si mal c'est juste qu il est compliqué a comprendre j ai un oral a faire devant toute ma classe et j ai a peux pres compris Le 31 janvier, 16h11 via Résumé scène par scène - Le...

leane écrit : Et le je travail sur le cid je comprend rien sa me soule Le 30 janvier, 14h51 via Résumé scène par scène - Le...

leane dit : Moi jai fait les fourberie de scapin lannee derniere quand jetais en 5eme Le 30 janvier, 14h51 via Résumé scène par scène - Le...

Charlienette déclare : Nan .. je hurle la Le 30 janvier, 9h58 via Résumé - Les Fourberies De ...

Charlienette chuchote : Je murmure pas ! Le 30 janvier, 9h58 via Résumé - Les Fourberies De ...

Charlienette murmure : JE l'ai demain Le 30 janvier, 9h58 via Résumé - Les Fourberies De ...

Charlienette griffonne : Vous avez déjà fait un cibtrole sur les fourberies de scapin acte 2 ? Le 30 janvier, 9h58 via Résumé - Les Fourberies De ...

Charlienette déclame : Coucou Le 30 janvier, 9h57 via Résumé - Les Fourberies De ...

lkjhgfds chuchote : Coucou Le 28 janvier, 20h43 via Résumé - Le Médecin Malgrè ...

kikoudu73 écrit : Octogone Le 28 janvier, 14h30 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