page1
1. Coder une page web en HTML et CSS
Le HyperText Markup Language, généralement abrégé HTML ou dans sa dernière version HTML5, est le langage de balisage conçu pour représenter les pages web. C’est un langage 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. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec le langage de programmation JavaScript et des feuilles de style en cascade (CSS).
Pour un site web, il est primordiale de garder une identité visuelle (la charte graphique). Avec la solution unique du HTML, la moindre modification doit être réalisée sur chaque page… imaginez devoir les lignes de de tous les titres de type « h2 » sur toutes les pages… quand on en a que quelques-unes ce n’est pas long mais prenons un site web de centaines de pages… cela devient très vite très long et fastidieux !
Pour gagner du temps, on utilise maintenant le langage HTML pour programmer le contenu et le langage CSS pour indiquer la forme visuelle désirée.
Pour une question de simplicité, créer un dossier « Site Web » sur votre ordinateur, puis rendez-vous sur le site https://liveweave.com/ pour réaliser le travail en ligne ou bien sur http://brackets.io/index.html pour télécharger et installer Brackets sur votre ordinateur (voir l’aide pour Brackets à la fin de l’activité) .
C’est un site en ligne qui permet d’écrire à la fois le code en HTML et lui appliqué le code CSS et de visualiser le résultat en temps réel !
Page en HTML
CSS
Résultat
Pour sauvegarder le travail, il faut cliquer sur « Download », on obtient dans ce cas un fichier qu’il faudra dézipper afin d’obtenir les fichiers du site web réalisé (dossiers CSS & JS pour le style ainsi que la page web d’accueil du site : index.html).
Captures d’écran de liveweave.com