# Programmation et design d'interface - Partie #1 (24/25) # [QCM](https://forms.gle/VagoEgcnB86gpGna8) ## Introduction L'objectif principal de cet atelier est de vous fournir une base de certains langages utiles pour la création web. pour travailler avec WordPress, que ce soit pour la création de blogs, de sites web personnels, de portfolios ou même de sites e-commerce. Vous trouverez également des termes et/ou des pistes à explorer tout au long de ce fascicule. Libre à vous de les explorer par la suite et ainsi approfondir des notions qui vous semblent pertinentes dans le cadre de votre projet professionnel ou personnel. L'intervention orale complète cet écrit. Au sommaire : [TOC] ## Rappels Vous trouverez ci-dessous quelques petits rappels (ou peut être pas). Certains servent votre culture du numérique et d'autres sont plus utiles à la compréhension plus profonde de la suite de l'atelier. ## La structure d'un site web [La structure d'un site web en HTML](https://developer.mozilla.org/fr/docs/Web/HTML) est cruciale pour sa conception et sa lisibilité, et le concept de [HTML sémantique](https://developer.mozilla.org/fr/docs/Glossary/Semantics) (ou encore [ici](https://www.w3schools.com/html/html5_semantic_elements.asp)) y joue un rôle majeur. Tout commence avec la balise `<html>`, qui enveloppe l'ensemble du contenu de la page. À l'intérieur de cette balise, la `<head>` est utilisée pour stocker des informations importantes telles que le titre de la page et les métadonnées. La partie la plus significative est le corps `<body>`, où la structure réelle du contenu se trouve. Le HTML sémantique implique l'utilisation de balises telles que `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`, etc., qui donnent un sens et une structure clairs au contenu, améliorant ainsi l'accessibilité et l'indexation par les moteurs de recherche. Cela permet également une meilleure compréhension du contenu par les navigateurs et les technologies d'assistance pour les personnes en situation de handicap, améliorant ainsi l'expérience globale des utilisateurs sur le site web. ![](https://static.semrush.com/blog/uploads/media/cc/85/cc85d452a743e27f68d426df35e4da7d/EN-Semantic-Search-Non-Semantic.webp) [Le CSS](https://developer.mozilla.org/fr/docs/Web/CSS) est une composante cruciale dans la création de sites web. Elle permet de séparer la structure HTML du design et de la mise en page. En utilisant des règles CSS, on peut définir comment chaque élément HTML doit être présenté visuellement, notamment en termes de couleurs, de polices de caractères, de marges, de largeurs, de hauteurs, de bordures, et bien plus encore. #### Logiciels utiles pour présenter en HTML/CSS - [Visual Studio Code](https://code.visualstudio.com/Download) - Sublime Text - ... Lorsque vous éditez un fichier HTML, enregistrez-sous... et sélectionnez HTML ou HyperText Markup Language et de même pour les fichiers CSS avec CSS ou Cascading StyleSheet. #### Extraits de code Structure de base d'un fichier .html. ```htmlmixed <html> <head> <!-- Métadonnées, ex : nom du site, favicon, etc. --> <meta charset="UTF-8"> </head> <body> <!-- Contenu du site --> </body> </html> ``` Pour lier une feuille de style .css à un fichier .html ; à placer dans la balise `<head></head>`. ```htmlmixed <link href="/media/examples/link-element-example.css" rel="stylesheet" /> ``` ### Exercice Dans cet exercice, vous devrez créer deux pages avec ces formats présentant un sujet de votre choix (site personnel, site à propos de votre passion, etc.). Il s'agit souvent d'une page d'accueil et d'une page de contenu. Le but est d'utiliser un maximum de balises et propriétés différentes. ### Présenter plus rapidement... Nous explorons maintenant l'utilisation d'un framework CSS. Ici, nous prendrons l'exemple de [TailwindCSS](https://tailwindcss.com/) mais il en existe bien d'autres, à l'image de [Bootstrap](https://getbootstrap.com/), etc. Ces frameworks simplifient et accèrelent la création du design d'un site web. Ils permettent, par l'ajout de simple attributs (classes), de personnaliser le style d'un conteneur. Pour des raisons de simplicité, nous travaillons ici avec l'ajout d'un CDN. Il s'agit d'une ressource distante que l'on ajoute dans le `<header>` d'un fichier HTML. ```htmlmixed <!doctype html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html> ``` Dans l'exemple, avec les classes `text-3xl font-bold underline` ajoutées au conteneur `h1`, le titre est alors présenté en police de grande taille, en gras et souligné. ### Exercice A l'aide de la [documentation](https://tailwindcss.com/docs/), convertissez le site web précédemment créé en utilisant uniquement des classes fournies par TailwindCSS. Par exemple, si votre texte est rouge, alors, cherchez `text color` dans la barre de recherche de la documentation, et vous trouverez la documentation appropriée. ### Liens supplémentaires - Les règles de base pour rendre [un site accessible](https://developer.mozilla.org/fr/docs/Learn/Accessibility/HTML) et [le référentiel associé (RGAA)](https://accessibilite.numerique.gouv.fr/) ; - [Un très bon document traitant le référencement par Alexandre Tourette](https://alyze.info/doc/cours-seo.pdf).