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

?

olivierrcpm gribouille : 7 Le 16 novembre, 15h47 via Résumé scène par scène - Le...

9vxefFmPNRk murmure : buy viagra online blog Le 14 novembre, 18h38

Thaddeus griffonne : I am really impressed with your writing skills and also with the layout on your weblog.
Is this a paid theme or did you modify it yourself?
Either way keep up the nice quality writing,
it is rare to see a nice blog like this one nowadays.
______ betman99.com
Le 14 novembre, 17h14

hayhay déclare : 7 Le 13 novembre, 19h17 via Résumé scène par scène - Le...

opopopopopop murmure : Hello Le 10 novembre, 19h49 via Utiliser des liens chronolo...

awuiitnuUz8P proclame : car insurance with no license in Brentwood NY Le 09 novembre, 12h27

bxvcy griffonne : Cjg,nlkhdn Le 08 novembre, 15h17 via Résumé : La Promesse de l'a...

IULvqJJW6 proclame : best car insurance in WI Le 07 novembre, 19h56

658392 déclare : =7 Le 07 novembre, 17h23 via Résumé scène par scène - Le...

Pseudo gribouille : mini_bn Le 30 octobre, 18h18 via Comment fonctionne le mini-...

Pseudo griffonne : 1+1=11 Le 30 octobre, 18h18 via Comment fonctionne le mini-...

Pseudo déclame : 3+4=7 Le 30 octobre, 18h16 via Comment fonctionne le mini-...

sundergirl tergiverse : Les résumés sont un peut cours a m ont avis ! Le 25 octobre, 14h38 via Résumé : L'Avare

bonjour s'exclame : Je bafouille 3+4=7 Le 19 octobre, 18h56 via Résumé scène par scène - Le...

bonjour murmure : Peuple je sus en Stream a partir de 18 heures fortnite epicgames !!!!!! Le 19 octobre, 18h53 via Résumé scène par scène - Le...

omg bafouille : L or Le 19 octobre, 15h58 via Accueil

omg tergiverse : L or Le 19 octobre, 15h58 via Accueil

omg déclare : Omg Le 19 octobre, 15h58 via Accueil

cc s'exclame : Cc Le 16 octobre, 21h31 via Mais qu'est ce qu'un ROC en...

7 murmure : Code noir nul c nul Le 15 octobre, 12h28 via Le Code Noir

lol déclare : Nul Le 15 octobre, 12h26 via Le Code Noir

bg18 tergiverse : Jtm Le 15 octobre, 12h16 via Le Code Noir

bg18 dit : Jtm Le 15 octobre, 12h16 via Le Code Noir

lol dit : Non en fait Le 15 octobre, 12h16 via Le Code Noir

lol scribouille : Lol Le 15 octobre, 12h16 via Le Code Noir

isy déclame : Dom Juan Le 11 octobre, 15h09 via Résumé scène par scène - Le...

badr murmure : Il y a pas les chapitres 20, 21... Le 03 octobre, 21h01 via Résumé : La Promesse de l'a...

badr scribouille : Sa fait sept Le 03 octobre, 20h59 via Résumé : La Promesse de l'a...

biloutedu14 tergiverse : Trois + quatre égale sept Le 02 octobre, 14h21 via Unités SI, conversion des m...

G gribouille : Facile Le 27 septembre, 22h28 via Recherche

def chuchote : Fr Le 21 septembre, 19h00 via Résumé scène par scène - Le...

Triss déclame : Blip bloup Le 21 septembre, 18h50 via Sans-jambe repose

ManouDu95 proclame : WSH LES GENS,PERSO CTTE HISTOIRE C DLA MERDE SUIS EN 5ÈME ET J'ETUDIE SA VS ETES SEH LA Le 20 septembre, 19h09 via Résumé - Les Fourberies De ...

hylona bafouille : Ki a lu tartuffe Le 15 septembre, 12h15 via Résumé : Le Tartuffe de Mol...

hylona chuchote : 3+4=7 Le 15 septembre, 12h14 via Résumé : Le Tartuffe de Mol...

Bnmaster proclame : @Etudiant Merci ! Le 06 septembre, 8h48 via Résumé du livre : Le Cid de...

Etudiant murmure : Salut, je voulais vous remercier pour vos magnifiques cours, je suis en prépa MPSI et ça m'est d'une aide tellement précieuse!!! 1000 mercis !!! Le 05 septembre, 19h08 via Le raisonnement par analyse...

478 s'exclame : Glo
ver vfrehy bg
Le 02 septembre, 16h35 via Ah les p'tits potes

petitchat gribouille : Facile Le 20 juin, 13h06 via Unités SI, conversion des m...

College Charles Péguy dit : J'etudie cette piece de théatre avec mess 6eme de beauvoir Le 11 juin, 21h45 via Résumé - Les Fourberies De ...

cc déclare : Cc Le 04 juin, 17h59 via Résumé scène par scène - Le...

Marius Okoko déclame : J'aime L'histoire. Le 31 mai, 16h23 via Utiliser le module Math de ...

kk écrit : 0. Le 30 mai, 16h15 via Résumé du livre : Le Cid de...

JUIELJD E griffonne : KDOEKNCZF£2 Le 30 mai, 14h56 via Résumé scène par scène - Le...

Tamagochi chuchote : -.../---/-./.---/---/..-/.-. Le 29 mai, 14h45 via Apprendre le Morse

lea83 écrit : Jihohio bafouille t'as deux ans d'age mentale ou quoi mdrr Le 27 mai, 15h36 via Résumé du livre : Le Cid de...

lea83 déclame : Cc Le 27 mai, 15h35 via Résumé du livre : Le Cid de...

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