Devoir 5: La publicité de M. Krab

Depuis quelques mois, Plankton réussit de plus en plus à voler les clients de M. Krab (ci-dessus), ce qui dérange ce dernier beaucoup car c'est de l'argent qui ne rentre pas dans sa poche. Quelle horreur!

M. Krab a alors besoin de toi pour bâtir une affiche publicitaire en HTML. Bien sûr, tu ne seras pas rémunéré(e), parce qu'il ne paierait jamais personne pour faire ça (il te rappelle que tu es très chanceux.se de pouvoir mettre cette expérience sur ton CV par la suite...)

Consignes

SVP lisez-les bien, le futur du Crabe Croustillant (Krusty Krab) dépend de vous! Chaque erreur commise est une monnaie de moins dans la poche de M. Krab.

Où écrire le devoir?

Utilisez le code de Code pour la remise du devoir 5 à la section ci-dessus pour le fichiers intitulé devoir5.html (vous pouvez utiliser toujours un éditeur de texte à part et les coller après sur nano)

Le devoir est a remettre le vendredi prochain, 18 février, à minuit. Une fois que vous aurez fini, le fichiers doit se retrouver dans le même dossier que où se trouvent vos devoir 1, devoir 2, etc. Il devrait donc être accessible (pas d'erreur forbidden ni not found) aux adresses:

De plus, vous devez vous assurer que vos fichiers ift1005 et tp0 on les permissions drwxr-xr-x et que votre devoir5.html a bien la permission -rw-r--r—, sans quoi nous ne pourrons récuperer votre devoir. Un tutoriel sur ceci est disponible ici


xxxxxxxxxx
         	     
	 
         
         
         
             
                 
                 
                 https://www-ens.iro.umontreal.ca/~votreusername/ift1005/tp0/devoir5.html

(ce qui implique que vous devez vous connecter sur arcade pour le deposer)

Notez que l'adresse complete de cet emplacement sur ssh avec la commande pwd est


/home/www-ens/votreusername/public_html/ift1005/tp0/

Code pour la remise du devoir 5

Si votre fichier html ne contient pas tout ce qui est écrit ici, rien de moins, M. Krab pleure :(

Assurez-vous d'écrire votre code en dessous de la ligne 

L'affichage ne sera pas bizzarre dans ce devoir! Si l'affichage est bizarre, vous avez brisé quelque chose :)

N'oubliez pas que vous pouvez vérifier s'il y a des erreurs dans votre html ici: https://validator.w3.org/nu/#textarea


x
     
     
     
     
         
             <!DOCTYPE html>
         
         
             <html lang="en">
         
         <head>
             <title>Devoir 5</title>
         
                 <!-- NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER -->
         
             <link rel="stylesheet" href="https://laura-salas.github.io/ift1005/krustyStyleSheet.css">
             <meta charset="UTF-8">
         </head>
         

         
             <body>
         
             <!-- ton code commence en dessous de cette ligne! -->
         
             
             
             

         
         

         

         

         

         
                 <!-- NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER  NE PAS ENLEVER -->
         
         
                 <script src="https://laura-salas.github.io/ift1005/evil.js"></script>
         
         </body>
         
             </html>

Un mot d'avertissement: vos CSS

Ce devoir vous fournit déjà les styles CSS à utiliser, faits avec soin par votre tpiste :-)

C'est les seuls styles qui peuvent être utilisés pour ce devoir. Rappel que nous verrons le CSS à la semaine prochaine - vous pourrez commencer à show-off votre côté artistique sous peu!

Les éléments que vous pouvez utiliser pour l'affiche

Pour ce devoir, vous devrez avoir:

Au moins 2 <div> différents,
Au moins 2 <p> différents,
Au moins 2 <img> différentes dans la liste fournie,
Au moins 2 parmi les <h1>, <h2>,...,<h6>
Au moins 1 liste qui peut être désordonnée ou ordonnée

À partir de maintenant, vos pages commenceront à avoir l'air de quelque chose de digne d'un cours de design web!

Éléments typiques de HTML

(pour savoir comment les utiliser -> notes de la demo!)


xxxxxxxxxx
     
     
     
     
         
             
             
             <a href="..."></a>


xxxxxxxxxx
     
     
     
     
         
             
             
             <ol>
         
         
               <li>...</li>
         
         </ol>
         et 
         <ul>
         
               <li>...</li>
         
         
             </ul>


x
     
     
     
     
         
             
             
             <h1>...</h1>
         
         
             et
         
         
             <h2>...</h2>
         
         
             et
         
         <h3>...</h3>
         
             et
         
         <h4>...</h4>
         
             et
         
         <h5>...</h5>
         
             et
         
         
             <h6>...</h6>


xxxxxxxxxx
     
     
     
     
         
             
             
             <!-- attention avec span, il peut désaligner certains attributs d'alignement! -->
         
         
             <span>
         
         
               ...
         
         
             </span>

Images à utiliser

(Vous pouvez en utiliser plusieurs d'entre elles - au moins 2 de celles-ci doivent être utilisées). Pour ce devoir, n'utilisez pas d'autres images que celles-ci. Notez que si vous avez des problèmes avec des images qui ne s'affichent pas, vous pouvez lire la section a la fin de cette page


x
     
     
     
     
         
             
             
                 <!--bob l'eponge -->
         
         
                 <img src="https://pngimg.com/uploads/spongebob/spongebob_PNG61.png" alt="bob">
         
             
         
                 <!-- patrick-->
         
         
                 <img src="http://assets.stickpng.com/thumbs/5cb78e957ff3656569c8cec0.png" alt="patrick">
         
         
             

         
         
                 <!-- squidward-->
         
         
                 <img src="https://i.imgur.com/hY92h3E.png" alt="squidward">
         
         

         
                 <!-- m. krab-->
         
         
                 <img src="https://i.imgur.com/a79thFE.png" alt="mr_krab">
         
         

             <!-- plankton -->
         
                 <img src="https://i.imgur.com/1gMqbl2.png" alt="plankton">
         
             
         
                 <!-- krabby patty -->
         
         
                 <img src="https://64.media.tumblr.com/d0df97346b89340700265569fd6777a2/tumblr_muxysn6fhE1spsp70o1_400.png" alt="krabbypatty">
         
         
             

         
         
                 <!--client eating krabby patty -->
         
         
                 <img src="https://i.imgur.com/b2HVBEL.png" alt="client">

Les STYLES que vous pouvez rajouter grâce aux classes

Notez que parfois je regroupe plusieurs classes, séparées par des virgules, dans une même rangée si elles partagent la même description

Styles pour span

Je vous conseille d'éviter l'usage des styles sur span, sauf pour les styles qui s'appliquent aux textes, car les span ne suivent pas le formattage de la même manière.

Styles pour div

Rappel: Utilisez au moins un <p> quand vous écrivez du texte, s'il n'est pas déjà dans des <h1>,<h2>, etc.

NOM DE LA/LES CLASSE(S)	DESCRIPTION
`centre`	Centre le div par rapport à l'espace alloué par son parent
`largeur_entiere` , `largeur_trois_quarts`, `largeur_un_demi ,` `largeur_un_quart`	Prend une place horizontale equivalente a son nom (par exemple, `largeur_un_demi` occupe la moitie (1/2) de l'espace horizontal de son parent.
`coins_ronds`	Donne des coins ronds aux coins du div (rounded corners en anglais)
`bord_noir` , `bord_blanc`	Donne une bordure de la couleur indiquée
`bord_epais`	Donne des bords plus épais (doit être combiné avec bord_noir ou bord_blanc)
`fond_a` , `fond_b ,`fond_c`,` `fond_d` , `fond_e` , `fond_f`	Des différentes images de fond que vous pouvez mettre. Notez que ceci peut être mis en classe également pour votre body.
`fond_blanc` , `fond_blanc_transparent`	Donne une couleur de fond blanche pour `fond_blanc`, et pour `fond_blanc_transparent` la couleur blanche est semi-transparente

Styles pour img

Par défaut, les images ont une taille "mini".

NOM DE LA/LES CLASSE(S)	DESCRIPTION
`meme_ligne`	Permet d'afficher plusieurs images sur le même espace horizontal. Peut permettre de les aligner avec du texte, mais va pas toujours marcher.
`geante` , `large` , `petite ,` `moyenne`	Donne une taille respective au nom de la classe. Par défaut, l'image `petite` donne une image plus grande que la taille par défaut (mini).
`centree` , `gauche` , `droite`	Aligne l'image au centre, ou bien a gauche ou a droite selon l'espace horizontal donné par son parent

Styles pour texte (`<p>` et `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` et `<h6>`)

Rappel: Utilisez au moins un <p> quand vous écrivez du texte, s'il n'est pas déjà dans des <h1>,<h2>, etc.

NOM DE LA/LES CLASSE(S)	DESCRIPTION
`texte_centre`	Centre le texte par rapport à l'espace alloué par son parent
`texte_blanc` , `texte_noir`, `texte_bleuvert` , `texte_rouge`, `texte_jaune`	Couleurs de texte respectives
`ombrage_texte`	Donne de l'ombrage
`brillance_texte`	Fait briller le texte
`justifier`	Justifie le texte
`super_gras` , `gras` , `mince`	Permet de mettre votre texte en gras, ou en plus fin que normal
`un_peu_plus_grand`	Rend le `<p>` un petit peu plus grand que sa taille normale (ne pas utiliser pour les `<h1>` etc)

Styles pour `<ol>` et `<ul>` (listes ordonnées, desordonnées)

(notez que vous avez juste besoin de mettre la classe dans la balise <ol> ou<ul> et pas dans chaque <li>)

NOM DE LA/LES CLASSE(S)	DESCRIPTION
`liste_jaune`	Rend les marqueurs de la liste de couleur jaune

Style special pour le texte :)

NOM DE LA/LES CLASSE(S)	DESCRIPTION
`spongebob`	Essayez le sur un `<p>` ou un `<h1>`

Au cas où vos images ne marchent pas toujours

Fix des images qui chargent pas toujours pour le devoir 5 si jamais vous avez de la misère à faire loader les images du devoir, on va faire quelque chose de différent à la place:

1. Mettre les images sur votre arcade: Sur ssh, (remplacez VOTREUSERNAMEICI par votre username arcade) copiez collez ceci AU COMPLET, c'est 1 seule commande


/home/www-ens/VOTREUSERNAMEICI/public_html/ift1005/tp0/; 
chmod 755 /home/www-ens/VOTREUSERNAMEICI/public_html/ift1005/tp0/assets; 
chmod 644 /home/www-ens/VOTREUSERNAMEICI/public_html/ift1005/tp0/assets/*

2. Mettre les images sur votre ordi Téléchargez ce fichier, assets.zip et dézippez le DANS votre fichier de travail du devoir (sur mac vous n'aurez peut etre pas besoin de dezipper - copiez-le simplement), de telle sorte que votre structure de dossier ou se trouve votre devoir5.html devrait être votre fichier html, et puis un dossier assets qui contient les images pour le devoir:


xxxxxxxxxx
devoir5.html
assets/
   patrick.jpg
   spongebob.jpg
   etc.

3. Utiliser les images Au lieu d'utiliser les lien des addresses données dans le devoir, vous pouvez faire alors (en vous assurant que votre devoir5.html se trouve bien a la meme place que assets)


xxxxxxxxxx
<!-- image de bob l'eponge -->
<img src="assets/bob.png">

Les noms possibles d'images sont bob.png, patrick.png, squidward.png, roach.png, plankton.png, krabby.png, krab.png

Pourquoi est-ce qu'il y a parfois des erreurs dans les chargement d'images? Honnêtement je suis un peu confuse et je ne sais pas si le blâme va sur les serveurs où l'on va chercher les images ou sur la technique, on reverra ça lors de la prochaine démo :)