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

?

Nimabbbhhhhhh proclame : Pamale Le 21 avril, 11h10 via Résumé - Le Médecin Malgrè ...

booba déclame : 7 Le 20 avril, 19h12 via Résumé : La Guerre de Troie...

lolilol écrit : Ca fait 7 Le 19 avril, 11h07 via Résumé du livre : Le Cid de...

sltje suis scribouille : Slt je suis nouvelle sur ce sit esque vous pouver medir si se cite eet bien Le 16 avril, 10h01 via Résumé - Le Médecin Malgrè ...

Latzo 109 écrit : Slt comme rooro l a dit c est pas le bn site mais moi aussi je joue a Fortnite mn compte c est PlayerSarro.
BYE
Le 15 avril, 22h23 via Résumé du livre : Le Cid de...

587564 griffonne : 3+4=7 Le 14 avril, 18h51

92000 scribouille : Trop facile Le 12 avril, 10h36 via Résumé - Le Médecin Malgrè ...

Okee25 bafouille : La réponse est 7 car 1+1+1(3)+1+1+1+1(4)=7.
C'est une logique mathématiques qui revient le plus souvent au classe de CP et GS.
Le 08 avril, 13h08 via Résumé scène par scène - Le...

milena bafouille : ùùmm Le 02 avril, 16h13 via Résumé - Les Fourberies De ...

sdefef" griffonne : Savazf Le 30 mars, 22h58 via Texte intégral - Le Médecin...

linabourhrou écrit : Bonjour Le 30 mars, 13h14 via Résumé - Les Fourberies De ...

Sora dit : Merci j'ai aussi un control tout à l'heure Le 26 mars, 8h09 via Résumé - Les Fourberies De ...

yoan déclare : Lol Le 25 mars, 21h01 via Résumé - Les Fourberies De ...

IKG murmure : GO Le 24 mars, 18h57 via Résumé : L'Avare

Canada griffonne : Qui aime la POUTINE Le 23 mars, 18h45 via Résumé scène par scène - Le...

Vladimir Poutine dit : Essaye Le 23 mars, 18h44 via Résumé scène par scène - Le...

Kim Jong Hun scribouille : Attention je vais envoyer un missile thermo-nucléaire Le 23 mars, 18h44 via Résumé scène par scène - Le...

Mac Gyver scribouille : Bon écoutez faut s'barrer d'ici donnez moi un trombone Le 23 mars, 18h41 via Résumé scène par scène - Le...

Don Diegue proclame : Je suis déshonoré Le 23 mars, 18h39 via Résumé scène par scène - Le...

Anonymous2.0 écrit : Wsh y a u bot Le 23 mars, 18h39 via Résumé scène par scène - Le...

bOTbUG dit : COPY/SITE/ROOM Le 23 mars, 18h38 via Résumé scène par scène - Le...

Yoo0Thy dit : Grace a se cite j ai remonter ma moyenne de 2 ptns franchement merci au createur de se cite merci beaucoup Le 18 mars, 14h32 via Résumé - Les Fourberies De ...

Bnmaster murmure : @Anonymous C'est un moyen simple de se prémunir contre les bots postant (au mieux) de la publicité. Le 16 mars, 12h56 via Résumé : Andromaque

Anonymous 2.0 chuchote : 3+4 est = à 7? Je ne comprend pas pourquoi ils ont mit ça.. Le 15 mars, 16h14 via Résumé - Le Médecin Malgrè ...

* dit : Que font les personnage les personnage dans cette scene 1 Le 13 mars, 17h58 via Résumé - Le Médecin Malgrè ...

* déclare : Rien Le 13 mars, 17h56 via Résumé - Le Médecin Malgrè ...

* griffonne : Je fait 555555 Le 13 mars, 17h55 via Résumé - Le Médecin Malgrè ...

marius déclame : Slt qui joue a last day on earth ? Le 12 mars, 19h57 via Résumé - La Chèvre De M. Se...

marius déclare : C trop bête Le 12 mars, 19h53 via Résumé - La Chèvre De M. Se...

marius s'exclame : Fastoche Le 12 mars, 19h44 via Résumé - La Chèvre De M. Se...

555555 gribouille : 3+4=7
sa va ?
Le 09 mars, 9h30 via Résumé - Les Fourberies De ...

louis s'exclame : Sklt Le 08 mars, 18h38 via Résumé scène par scène - Le...

louis klepak proclame : Salut les gars Le 08 mars, 18h38 via Résumé scène par scène - Le...

lol déclame : 3+4=7 Le 08 mars, 12h07 via Résumé - Les Fourberies De ...

rooro726bf s'exclame : Ca m'a aidé pour ma disertation Le 08 mars, 10h49 via Résumé du livre : Le Cid de...

rooro726bf déclare : Mais sinon très bien le résumé Le 08 mars, 10h49 via Résumé du livre : Le Cid de...

rooro726bf proclame : Ouais je sais que c'est pas le bon site mais si vous voulez jouer avec moi sur fortnite sur xbox one s mon pseudo c'est DemonZero61721 Le 08 mars, 10h44 via Résumé du livre : Le Cid de...

rooro726bf s'exclame : 7 Le 08 mars, 10h43 via Résumé du livre : Le Cid de...

rooro726bf griffonne : 7 Le 08 mars, 10h43 via Résumé du livre : Le Cid de...

nbh scribouille : 7 Le 07 mars, 19h53 via Résumé scène par scène - Le...

5OP s'exclame : 9RT788TY67 Le 07 mars, 17h20 via Résumé - La Chèvre De M. Se...

Mi écrit : Les gars vous me sauvez merci? Le 05 mars, 23h38 via Résumé scène par scène - Le...

Amisko chuchote : Ohh !!! Grace a vous uje sort de la gualere parceque je 'ai pas lu mon livre que je devait lire pour les petit vacance mtn !!OMG ce site est vraiment incroyab els!!! Le 04 mars, 19h20 via Résumé : L'Avare

Amisko écrit : Jadore !!! Oh.. Un père noel !!! Le 04 mars, 19h19 via Résumé : L'Avare

lili scribouille : J'aime beaucoup cette pièce, et elle est encore mieux quand on la joue tout les jours! Le 03 mars, 10h20 via Résumé - Le Médecin Malgrè ...

l gribouille : F Le 27 février, 21h11 via La Compagnie du Saint-Sacre...

Dionisio murmure : Merci Le 25 février, 17h42 via Résumé scène par scène - Le...

Bonjour bafouille : Cette pièce de théâtre est simplement NUL Le 23 février, 13h48 via Résumé : Le Mariage de Figa...

lolman dit : ZZzzZZZZZzzzzzZZzZzz Le 22 février, 17h24 via Résumé - Les Fourberies De ...

cgff bafouille : 22222222 Le 21 février, 19h02 via Résumé scène par scène - Le...

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