Projet Mastermind : HTML, CSS et programme en C

Résumé du document

Difficultés à surmonter

Cela peut paraître surprenant, mais le plus compliqué dans ce projet a été le contenu du site. En effet, le Mastermind peut être connu, les informations à son sujet restent très vagues. C'est pourquoi après une première recherche, nous avons dû en faire une autre dans le but de confirmer ou infirmer les informations recueillies lors de la première.

[...] - Header : c'est l'en-tête du site, là où il y a le nom, le logo et éventuellement le support de navigation.
- Nav : la navigation sur le site, c'est une suite de liens vers d'autres pages du site, généralement positionnées dans le header ou entre le header et la bannière.
- Bann : la plupart des sites ont une bannière illustrée par des images. Elles permettent aussi un lien vers les autres pages du site et mettent en avant quelque chose en particulier (généralement, sur un site d'actualité, les dernières nouvelles ou les critiques les plus attendues.)

[...] Comme vu précédemment, on peut remarquer qu'on a d'abord le nom de la balise que l'on veut « habiller », puis des accolades entre lesquelles on définit les propriétés puis les valeurs qu'on lui attribue de cette façon :

<balise>
{
Propriété1 : valeur1 ;
Propriété2 : valeur2 ;
}

Si l'on reprend le code précédent, on veut définir la police du gros titre. Pour cela, on prend la propriété font-family et on lui attribue comme valeur la police qu'on souhaite, ici, Davrom. C'est pourquoi nous allons voir les principales balises utilisées dans le CSS à travers une progression structurée du codage des pages de notre site sur le Mastermind

[...] 1. La première étape est d'initialiser nos variables, et particulièrement le tableau de présentation et le code secret à deviner. Pour cela nous avons juste créé le nom des variables dont nous allions avoir besoin, en leur attribuant une valeur selon leur utilisation. En ce qui concerne le tableau, l'initialisation consiste à faire une présentation esthétique. Enfin pour le code secret, on appelle une autre fonction « initialisationCode » qui utilise la fonction aléatoire : srand (time(NULL)) générant un nombre aléatoire. De cela on va opérer « %6 » qui va nous permettre d'associer une lettre à un nombre parmi 6 choix de lettre. (...)

Extraits

[...] Néanmoins, si elle n'est pas disponible, on peut définir d'autres polices au cas où celle choisie au départ ne marche pas. Pour cela, il suffit de mettre font-family : police1, police police3 ; qui signifie : je veux la police1, sinon la police2, sinon la police3 Notons que nous avons un nombre illimité de polices « de rechange ». Eléments principaux de la page Ici, nous allons surtout définir la base du site, comme par exemple la police des titres dans le corps, le header et le footer, la couleur ou motif de fond etc . [...]

[...] C'est son « nom » qui sera utilisé dans le CSS. On trouve également la balise class, où au lieu de mettre le symbole # on met un point, qui à la différence de id, peut être sollicité plusieurs fois dans le code en CSS. Navigation nav Propriétés appliquées à toute la { navigation width: 740px; text-align: right; La largeur est de 740 pixels } Le texte sera aligné à droite Bannière #banniere_description Propriétés appliquées au texte de { la bann position: absolute; bottom: La position est absolue : placée où border-radius: 0px 0px 5px 5px; on veut width: 99.5 La position par rapport au bas est height: 33px; de 0 pixels padding-top: 15px; Le bordure arrondie est à 0,0,5,5 padding-left: 4px; La largeur est à background-color: La hauteur est à 33 pixels rgba( La marge intérieure haute est de 15 background-color: rgb(24,24,24); pixels color: white; La marge intérieure gauche est à 4 font-size: 0.8 em; pixels } La couleur de fond est rgba Même code pour Internet Explorer La couleur du texte est blanche La taille du texte est de 0.8 em Corps .*ico_categorie Propriétés appliquées à l'icône { vertical-align: middle; L'alignement vertical est centré margin-right: 8px; La marge à droite est à 8 pixels } Footer footer Propriétés appliquées à tout le { footer *background: url('ico_top.png') no-repeat top center, Le fond sera composé de plusieurs url('separateur.png') repeat-x top, images non répétées ou non url('ombre.png') repeat-x top; positionnées en haut padding-top: 25px; } La marge intérieure haute sera à 25 pixels *La propriété background est en fait une « super propriété » : elle regroupe en fait plusieurs propriétés associées au fond : background-image, background-repeat etc Dans cette propriété on ne met que background : image, répétition, position. [...]

[...] Aussi, je sais maintenant comment est composé un site web, ce qui le constitue et je connais quelques bases du CSS ainsi que l'HTML. [...]

[...] Il a la possibilité de pouvoir revenir au menu. ← La fonction « Jeu » : C'est la fonction la plus importante et également la plus compliquée du programme. On peut la découper en cinq grands points : La première étape est d'initialiser nos variables, et particulièrement le tableau de présentation et le code secret à deviner. Pour cela nous avons juste créé le nom des variables dont nous allions avoir besoin, en leur attribuant une valeur selon leur utilisation. [...]

[...] Pour cela, on prend la propriété font-family et on lui attribue comme valeur la police qu'on souhaite, ici, Davrom. C'est pourquoi nous allons voir les principales balises utilisées dans le CSS à travers une progression structurée du codage des pages de notre site sur le Mastermind : tout d'abord la définition des polices utilisées sur le site, ensuite ce qui constitue les éléments principaux de la page, puis le header, la navigation et la bannière, puis le corps et pour terminer le footer. [...]