SurfWeb en html

codage en HTML

SurfWeb en HTML

Cette semaine, la demande était de reproduire la maquette du site de vente de surf effectuée la semaine dernière en HTML et CSS. Homepage intiale La première démarche a été de reprendre la version SVG de la homepage et d'étudier comment la reproduire de la manière la plus précise. Dans un premier temps, j'ai créé un fichier HTML dénommé "home.html". Les premières lignes de code de ce fichier spécifique, reprennent le type du document(ici HTML), la feuille de CSS à consulter et les "meta"(donnant les mots clés, le sujet, etc.). Une fois cette partie remplie, je me suis penché sur les parties que l'intenaute retrouvera sur chaque page. Je souhaite que l'internaute retrouve: l'entête de la hompage ainsi que le bas le page. Dans l'entête, on peut retrouver un logo, une image et un dégradé de couleur ainsi que le menu de navigation.

Le Header

Je me suis donc attelé à l'écriture de cette partie, d'abord en HTML pour en découvrir les différentes balises. La version HTML ayant été écrite, tous les éléments apparaissaient les uns à la suite des autres. Le CSS permet de remettre en page ces éléments de manière à ressembler à la maquette initiale. Ainsi avec ces premières lignes de code, j'ai decouverts les balises et instructions de base. J'ai aussi découvert les premiers problèmes à résoudre et les solutions à y apporter. Une fois chaque ligne inscrite, une vérification est effectuée dans un navigateur permettant de corriger les erreurs éventuelles. La mise en page du menu a demandé un effort particulier car sous chaque lien (en texte) se trouve une illustration (petite planche de surf) qui change au suvol de la souris. Des balises et instructions ont donc été utilisées telle que "display:flex" ou encore "justify-content :space-around" permettant l'espacement automatique de chaque élément du menu.

Le corps de la page

Par la suite, jai découpé ma page (homepage) en diférentes parties. J'ai suivi l'orde d'apparition à l'internaute. Ainsi, juste au dessous du menu se trouve la partie "personnalise ton surf". Partie qui est mise en avant car c'est le "plus" du site. Ce block a un lien sur l'outil de personnalisation. Cette partie est plus simple car elle se compose d'un texte avec liens et d'un photo sur le côté. Ensuite, on retrouve la galerie des type de surf. Cette galerie a été effectuée sur le même principe que le menu mais en utilisant un "space-between" plutôt que le "space-around". Les block qui suivent se présentent sous forme de deux blocks en colonne. Ces différents éléments on été mis en page en utilisant des balises "display:left". Chaque block a été codé en étant englobé dans "figure" ou "div". A ce moment de l'éciture,il convient d'être prudent car il faut se repérer dans les différents block. Pour cela, j'ai utilisé des "id" et "class" permettant de nommer les blocks et donc de faciliter leurmise en page. Une fois le corps de la page codé, on m'a demandé de faire une transition sur la galerie des types de surf. Chaque fois que l'internaute survol un des types de surf, le bouton (photo) se transforme laissant apparaître un des surfs du type survolé. Cette "animation" m'a permi de découvrir une nouvelle partie du CSS qui gére des opérations plus complexes et une commande de type "transition" dans l'opacité été utlisée. Pour terminer, j'ai mis en place le "footer" du site reprenant le principe du menu mais en utilisant des "margins" pour séparer le texte. Afin de découvrir le repérage dans les balises, j'ai utlisé les "child" permettant d'appeler directement une ligne de code. En une semaine, j'ai découvert un maimum de balise et intructions de base. Un beau début d'aventure.

 17 janv. 2019 -  franck S - integrateur web ,   html css