Le langage HTML (Hyper Texte MarkUp) est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et logiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques.

Un document HTML est un fichier texte qui contient des balises (ou tag en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.

Les nouvelles balises structurelles du HTML5 intègrent les habitudes des web développeurs.

Une liste des balises principales.

Les feuilles de style en cascade1, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Où sont déclarés les styles dans une page HTML ? En principe ils doivent être réunis dans un fichier au format .css et sont donc extérieurs à la page HTML. Ce fichier externe est appelée feuille de styles externe.Toutefois, l'ensemble des styles peut être contenu dans la page HTML dans la partie Head. On dit qu'il s'agit d'une feuille de style interne où toutes les règles sont écrites dans une balise <style>. Enfin ils peuvent être déclarés dans le body en affectant l'élément Html dans lequel les styles sont écrits. Ce sont des styles en ligne.

A partir d'une maquette d'une page, on va délimiter les grandes zones principales qui seront mises en forme en CSS par la suite. On prévoit également une version Responsive Design pour l'affichage sur les smartphones.

On va appliquer les premières règles aux éléments de la page

La bannière a une largeur fixe pour l'écran de bureau (960px) qui sert de mise en page pour le contenu de page.

Le contenu principal gère le bandeau de bracelets images et les trois modules découvertes.

Le footer doit venir calé en bas de la fenêtre, il sera noir et étendu sur toute la largeur de la fenêtre du navigateur.

il faut distinguer la taille effective des écrans en pixels et la surface utilisée en CSS

Pour rappel, le menu responsive a un toute autre apparence que le menu bureau.

Il faut utiliser un langage de programmation, le Javascript pour commander par un clic sur le bouton l'affichage ou le masquage du menu et la transformation du bouton barres en bouton croix.