Retour sur l'exercice HTML - partie texte 11·12·25

- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <em>, <cite>,  , ⁥, <br>, <ol> ou <ul>, <li>, <mark>, <a href>, <small>, <sub> ou <sup> est pertinente.

Éloïse

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <em>, <cite>,  , <br>, <ul>, <li>, <mark>, <a href> est pertinente.
- Le lien vers une feuille de style externe css/style.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h1> et <h2> est logique.

Quelques améliorations à apporter⁥:
- - L'élément pour définir l'espace fine insécable ⁥ n'est pas convoqué. Il peut prendre sa place après l'item Bibliographie.
- - L'utilisation des ancres n'est pas pertinente. Établir le protocole : de <a href="#un"> dans le texte vers <span id="un">> dans la bibliographie (avec un retour, éventuellement).
- - Les éléments <small>, <sub> ou <sup> sont absents.
- - <i> est utilisé pour le sous-titre DE L'AFFICHE… : convoquer <em> ou <span> avec une classe CSS serait plus adapté.
CSS

- La feuille de styles est globalement correcte.
- Les polices sont bien importées depuis Google Fonts.
- Le reset des margin et des padding avec l'utilisation du sélecteur universel ^* { … } est correct.
- Assure-toi que la couleur de l’ombre (rgba(127, 222, 239, 0.156)) de l'élément <section> est cohérente avec ton thème général.
- L’utilisation de text-transform: uppercase; et letter-spacing pour h1 est cohérente pour un style affirmé.
- Les boutons sont bien stylisés et cohérents. L’effet de survol est clair et visible.

Quelques améliorations à apporter⁥:
- - Le fond noir #000000 et le texte blanc #ffffff offrent un bon contraste, mais le confort de lecture n'est pas optimal.
- - La typographie "Freckle Face" est une police de style cursif. Remplace system-ui par cursive pour une police de remplacement plus cohérente.
- - Pour <mark>, modifie le contraste pour éviter la vibration colorée.
- - Assure-toi que les liens <a href> restent identifiables (soulignement ou couleur différente) pour l’accessibilité.
- - La valeur "â€”" de la propriété content du sélecteur ul li::before est à corriger car le signe produit est incompréhensible dans la liste.
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Alicia

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <em>, <cite>, <blockquote>,  , <br>, <ul>, <li>, <mark>, <a href>, <small>, <sub> ou <sup> est pertinente.
- Le lien vers une feuille de style externe css/styles.css est correctement intégré dans le <head>.
- Les ancres #ref1 et #refindex et les liens internes fonctionnent correctement.

Quelques améliorations à apporter⁥:
- - L'élément ⁥ n'est pas convoqué. Il peut prendre sa place après l'item Bibliographie.
- - La balise <mark> est utilisée pour Bibliographie et Liens utiles. Elle est sémantiquement destinée à marquer du texte pour référence ou recherche, pas pour le style. Utilise plutôt une classe CSS ou <h2> et <h3> avec un style personnalisé.
- - L'élément <cite> peut remplacer l'élément <em> pour la mise en forme des références de la bibliographie.
- - Vous pouvez déplacer le style interne pour ul { … } dans la feuille de styles externe intitulée styles.css.
CSS

- La feuille de styles est globalement correcte.
- L’utilisation de @import pour intégrer les polices Kanit et LXGW WenKai Mono TC est une bonne pratique pour personnaliser la typographie.
- Le choix de la couleur #fcf8e8 pour le fond du html en juste contraste avec la couleur du texte en favorise aisément la lisibilité.
- Les styles pour :link, :visited, et :hover sont bien définis.
- Pour l'effet de survol, le changement de couleur #ff5e94 et le soulignement personnalisé text-decoration-color: #ff8fb5; sont esthétiques et fonctionnels.

Quelques améliorations à apporter⁥:
- - Le reset des margin et des padding avec l'utilisation du sélecteur universel ^* { … } est à convoquer.
- - Par défaut, <mark> a un fond jaune. Le redéfinir pour qu’il s’intègre mieux au design.
- - Ajoute un border-left: 4px solid #ff5e94; ou un fond léger à <blockquote> pour renforcer la hiérarchie visuelle.
- - Ajoute une police de secours font-family: "LXGW WenKai Mono TC", monospace, sans-serif; au cas où la police personnalisée ne se charge pas.
- - Crée une classe dédiée pour les titres comme Bibliographie et Liens utiles au lieu de solliciter l'élément mark.
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Eléa

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <cite>,  , <br>, <ul>, <li>, <mark>, <a href> est pertinente.
- Le lien vers une feuille de style externe css/style.css est correctement intégré dans le <head>.
- Les liens externes s’ouvrent dans un nouvel onglet target="_blank", ce qui est une bonne pratique pour ne pas perdre l’utilisateur.

Quelques améliorations à apporter⁥:
- - Sur le plan sémantique, on préfèrera <strong> à <b> et <em> à <i>.
- - L'élément pour définir l'espace fine insécable ⁥ n'est pas convoqué avant les :.
- - Les éléments <small>, <sub> ou <sup> ne sont pas sollicités.
- - L'utilisation des ancres n'est pas pertinente. Établir le protocole : de <a href="#1"> dans le texte vers <span id="1">> dans la bibliographie (avec un retour, éventuellement).
- - Vérifie que le contraste des couleurs entre le fond de ta page et son contenu textuel respecte les normes d’accessibilité. Ici la lecture est difficile.
CSS

- La feuille de styles est globalement correcte. Les sélecteurs sont bien organisés et ciblent les éléments HTML de manière logique.
- L’utilisation de @import pour intégrer la police Vend Sans depuis Google Fonts est correcte.
- L’effet :hover sur les liens background-color: pink est une bonne pratique pour indiquer l’interactivité.

Une correction à apporter⁥:
- - Le fond de la page rgb(194, 194, 120) est une teinte claire et jaunâtre. Le texte blanc sur ce fond peut ne pas offrir un contraste suffisant pour favoriser la lecture et considérer les utilisateurs malvoyants ou daltoniens.
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Julie

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <em>, <cite>,  , <ul>, <li>, <mark>, <a href>, <small>, <sub> ou <sup> est pertinente.
- Le lien vers une feuille de style externe css/style.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h1>, <h3> et <h4> est présente.

Quelques améliorations à apporter⁥:
- - La hiérarchie des titres (h1, h3, h4) est globalement respectée, bien que le passage de h1 à h3 soit inhabituel (un h2 serait attendu après un h1).
- - L'élément pour définir l'espace fine insécable ⁥ n'est pas convoqué avant les :.
- - L'élément <br> pour marquer le retour à la ligne n'a pas été sollicité.
- - Le style CSS est en partie intégré directement dans le <head> avec une balise <style>. Il est préférable de tout externaliser dans votre feuille de styles externe nommée styles.css.
CSS

- La feuille de styles est globalement correcte. Les sélecteurs sont bien organisés et ciblent les éléments HTML de manière logique.
- L’utilisation de @import pour intégrer les polices Montserrat Alternates et Rubik Bubbles depuis Google Fonts est correcte.
- La palette des couleurs, toute en camaïeu, est globalement cohérente.
- L'ensemble des classes est bien nommé.

Une correction à apporter⁥:
- - Vérifiez le contraste entre le texte violet foncé rgb(69, 0, 71) et le fond violet clair rgb(241, 215, 255) pour faciliter l'accessibilité.
- - Aucune taille de police font-size n’est définie.
- - Changez la couleur du h1 pour un meilleur contraste (accessibilité).
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Ayoub

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <br>, <ol>, <li>, <mark>, <a href>, <small>, <sub> ou <sup> est pertinente.
- Le lien vers une feuille de style externe css/styles.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h1> et <h2> est respectée.
- L'intégration de l'élément <blockquote>, utilisé pour une citation, est approprié.
- La palette chromatique respecte les contrastes de couleurs pour le fond, les titres, les textes et les liens.

Quelques améliorations à apporter⁥:
- - L'élément de retour à la ligne <br> après le <h1> n’est pas nécessaire. Utilisez plutôt du CSS margin ou padding pour gérer les espaces.
- - Pour engager une sémantique adaptée (accessibilité), remplacez <b> par <strong> et <i> par <em>.
- - Les éléments <cite>,   et ⁥ ne sont pas convoqués.
- - Dans la bibliographie, <small> est utilisé pour les auteurs. Cela réduit la taille du texte, mais n’est pas sémantiquement approprié. Adoptez plutôt une classe CSS pour styliser les noms d'auteurs en petites capitales : font-variant: small-caps;.
CSS

- La feuille de styles CSS est peu développée mais bien structurée et fonctionnelle.
- L’utilisation de @import pour intégrer les polices DM Sans et Funnel Sans est une bonne pratique pour personnaliser la typographie.
- Les marges margin-left, margin-right, margin-top, margin-bottom permettent de créer un espace de lecture confortable et centré.
- list-style-type: square; pour les listes <ol> est un choix esthétique intéressant.
- La personnalisation de la balise <mark> avec une couleur de fond et un texte noir améliore la visibilité des éléments mis en avant.
- La couleur de fond rgb(255, 177, 177) est cohérente avec l'esthétique générale.

Quelques améliorations à apporter⁥:
- - Ajoute des styles pour les liens <a> pour améliorer l’expérience utilisateur (couleur et survol).
- - Dans la bibliographie, <small> est utilisé pour les auteurs. Cela réduit la taille du texte, mais n’est pas sémantiquement approprié. Utilisez plutôt une classe CSS pour styliser les noms d'auteurs en petites capitales : font-variant: small-caps;.
- - Évite les marges en pourcentage : pour un contrôle plus précis, utilise des unités comme rem ou px. La syntaxe d'écriture actuelle pour les marges peut être raccourcie : margin: 3% 10%;.
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Ethan

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <em>, <cite>, <br>, <ul>, <li>, <mark>, <a href>, <small>, <sub> ou <sup> est pertinente.
- Le lien vers la feuille de style externe css/_styles.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h1>, <h2>, <h3> et <h4> est bonne et logique.
- Les liens vers les notes de bas de page fonctionnent.

Quelques améliorations à apporter⁥:
- - Attention à l'usage de l'underscore (tiret bas) pour nommer votre feuille de syles. Ceci ne procède d'une convention de nommage de fichier.
- - Les éléments de gestion des espaces   et ⁥ ne sont pas convoqués.
- - L'attribut target est sémantiquement incorrect. Vous avez oublié les guillemets pour indiquer la nature du ciblage. Corrigez par target="_blank".
- - À la toute fin de votre code, pour la liste ordonnée, vous convoquez un double attribut class, ce qui donne ceci : <ol class="centrerinfo" class="petcap">. On ne peut pas mettre deux fois l'attribut class sur une même balise. Corrigez par : <ol class="centrerinfo petcap">.
- - Il y a une espace en trop dans <a href="#3"> (sans gravité).
CSS

- La feuille de style est globalement cohérente et donne une identité visuelle forte à votre page.
- L’utilisation de @import pour intégrer les polices Kalnia Glaze, Space Grotesk et Offside est une bonne pratique et montre une volonté de hiérarchiser l'information visuellement.
- L'utilisation de font-variant: small-caps; est très élégant pour les noms propres dans une bibliographie (petites capitales).
- La personnalisation des listes list-style-type: "- "; est une bonne initiative.

Quelques améliorations à apporter⁥:
- - Dans body et h1, on trouve : font-weight: <weight>;. Il faut remplacer <weight> par un chiffre (ex: 400 pour normal, 700 pour gras).
- - L'effet de décalage au survol a:hover bouge le texte car vous changez la graisse, ce qui peut être déroutant pour l'utilisateur. Le code contient a:hover {font-weight: bolder;}. Gardez le changement de couleur et le soulignement, mais éviter de changer la graisse.
- - Pour le h2, le code demande un font-weight: 1000;. Or la police Offside ne propose qu'un seul corps qui est le Regular 400. Corrigez la valeur de 1000 par 400.
- - Restez prudent, text-align: justify; est esthétiquement intéressant, mais sur le web, cela crée souvent des lézardes .
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Thibaut

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <cite>,  , ⁥, <br>, <ol> ou <ul>, <li>, <mark>, <a href>, <small>, <sub> ou <sup> est pertinente.
- Le lien vers une feuille de style externe css/styles.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h2>, <h3> et <h4> est logique.
- La gestion des ancres fonctionne parfaitement.
- L'utilisation des guillemets français avec des espaces insécables :  ...  montre un souci du détail typographique.

Quelques améliorations à apporter⁥:
- - Un titre h1 aurait été le bienvenu dans la hiérarchie des titres.
- - Une balise de paragraphe <p> ne peut jamais contenir d'éléments de type bloc comme une liste <ol> (lignes 56 et 63 du code). Supprimez cet élément <p> autour de la liste <ol>.
- - Pour une meilleure valeur sémantique (accessibilité), remplacez le changement de graisse <b> par <strong> et l'emphase <i> par <em>.
- - L'utilisation des <br> entre les paragraphes et les titres pour faire de l'espace doivent être remplacés par la propriété margin-top ou padding-top dans le fichier CSS.
- - Dans les liens, il manque parfois des guillemets : target=_blank devrait être target="_blank". Bien que les navigateurs le comprennent souvent, c'est une habitude de codage à corriger.
CSS

- Le code de la feuille de style est propre et témoigne d'une bonne volonté de personnaliser l'interface utilisateur.
- L’utilisation de @import pour intégrer les polices Montserrat, Racing Sans One, Roboto, Fjalla One et Bebas Neue témoigne d'un bel effort sur la typographie et l'ergonomie visuelle.
- L'utilisation de la couleur darkcyan pour les titres et les liens crée une unité visuelle pertinente.
- L'utilisation de font-variant: small-caps pour les noms d'auteurs dans la bibliographie est conforme aux règles de mise en page académique.
- L'utilisation de list-style-type: "\01F3A2 "; dans le CSS est astucieuse. car l'emoji Montagnes russes 🎢 colle parfaitement au thème du Parc Astérix.

Quelques améliorations à apporter⁥:
- - Redondance des @import : La première requête @import est inutile car l'intégralité des polices importées (Montserrat, Racing Sans One et Roboto) sont aussi incluses dans la seconde requête. Cela ralentit inutilement le chargement de la page.
- - Par convention, on place les styles globaux html et body en haut du fichier, puis les titres, puis les éléments spécifiques.
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Elyse

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <em>, <cite>,  , <br>, <ol>, <li>, <mark>, <a href>, <sub> ou <sup> est pertinente.
- Le lien vers une feuille de style externe style/style.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h2> et <h3> est logique pour le référencement et l'accessibilité.

Quelques améliorations à apporter⁥:
- - Un titre h1 aurait été le bienvenu dans la hiérarchie des titres.
- - L'élément, de gestion de l'espace fine insécable, ⁥ n'est pas convoqué.
- - L'élément, de commentaires écrits en petits caractères, <small> n'est pas cité.
- - Une balise de paragraphe <p> ne peut jamais contenir d'éléments de type bloc comme une liste <ol> (lignes 32 et 46 du code). Supprimez cet élément <p> autour de la liste <ol>.
- - Il y beaucoup de balises <br> entre les articles ou les éléments de liste pour créer de l'espace. Le HTML sert au sens (le fond), pas à la forme. Utilisez le CSS pour gérer les marges avec margin-bottom ou padding. Par exemple, donner une marge aux balises <article> ou <li>.
- - Les liens (ancres) vers les notes de bas de page ne sont pas implémentés.
CSS

- Le code de la feuille de style est propre et témoigne d'une vraie recherche esthétique (choix de polices, couleurs).
- L’utilisation de @import pour intégrer les polices DM Sans, Montserrat et Bebas Neue est pertinente et les choix formels fonctionnent très bien visuellement.
- L'utilisation de font-variant: small-caps pour les noms dans la bibliographie (.petcap span) montre un souci du détail typographique académique.

Quelques améliorations à apporter⁥:
- - Le line-height de 25% sur les titres signifie que la hauteur de la ligne ne fait qu'un quart de la taille de la police. La conséquence de ce choix : les éléments constituants les titres vont se chevaucher les uns sur les autres. Pour constater cette altération des signes typographiques : faites un titre très très long et observez le résultat. Correction suggérée : line-height: 1; ou line-height: 1.1;
- - Attention à la graisse de la police pour le body : font-weight: 200;. Une graisse de 200 est Extra Light (très fin). Le risque est que sur certains écrans (non retina) ou pour des personnes ayant une vue basse, le texte risque d'être illisible ou de paraître haché . Conseil : pour le corps de texte body, il vaut mieux utiliser 300 ou 400 (normal - regular) pour assurer une bonne lecture.
- - La police Bebas Neue est, de part sa nature, une police toute en capitales et sans majuscules. La propriété text-transform: capitalize (mettre la première lettre en majuscule) est donc inutile ici, car la police force déjà tout en majuscules visuellement.
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Manon

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <article>, <p>, <h1> à <h6>, <strong>, <cite>,  , ⁥, <br>, <ul>, <li>, <mark>, <a href>, <small>, <sub> ou <sup> est pertinente.
- Le lien vers une feuille de style externe CSS/styles.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h1> et <h2> est logique.
- Le changement des puces de la liste list-style-type: "\01F3A5 "; pour afficher une petite caméra 🎥 est une bonne idée visuelle en lien avec le sujet.
- La personnalisation de la balise <mark> (texte blanc sur fond rose foncé) est esthétique.
- Les liens (ancres) vers les notes de bas de page sont fonctionnels.

Quelques améliorations à apporter⁥:
- - Attention au nommage du dossier des styles CSS tout en majuscules. Privilégiez les bas de casses pour nommer les fichiers, les dossiers, les images, etc.
- - Les éléments <section> de structuration d'une page, <em> de mise en emphase, ⁥ de gestion de l'espace fine insécable et <small> de commentaires écrits en petits caractères ne sont pas convoqués.
- - Le ciblage du lien <a href="https://dtrfigh_blankt.fr/" target=>DTR FIGHT</a> est incorrect et la balise ouvrante n'est pas fermée. Corrigez pour : <a href="https://dtrfigh_blankt.fr/" target="_blank">DTR FIGHT</a>
- - Dans plusieurs liens, les guillemets manquent autour des attributs. Par exemple : target=_blank. La bonne pratique est target="_blank".
CSS

- Le code de la feuille de style est propre, bien organisé et le choix des couleurs crée un contraste fort et une ambiance très Pop .
- L’utilisation de @import pour intégrer les polices Margarine et Stack Sans Text est pertinente. Le choix formel des deux typographiques est idéal pour allier sobriété et personnalité.
- L'utilisation de l'unité rem est parfaite pour l'accessibilité (elle s'adapte à la taille de police choisie par l'utilisateur dans son navigateur).
- L'utilisation de font-variant: small-caps pour les noms dans la bibliographie (.petcap span) montre un souci du détail typographique.

Quelques améliorations à apporter⁥:
- - Le contraste des liens avec la couleur mediumvioletred sur un fond pink pourrait être un peu juste pour les normes d'accessibilité.
- - Le texte de l'article semble dense. Ajoutez un line-height: 1.5; dans le sélecteur p pour aérer considérablement la lecture.
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥:  pour l'oubli de la feuille de styles sur le serveur distant

Tiphaine

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <cite>,  , <br>, <ol>, <li>, <mark>, <a href> est pertinente.
- Le lien vers une feuille de style externe style.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h1>, <h2> et <h3> est logique.
- Les espaces insécables   sont correctement utilisés dans les noms propres.

Quelques améliorations à apporter⁥:
- - Pour une meilleure valeur sémantique (accessibilité), remplacez le changement de graisse <b> par <strong>
- - Les éléments <em> de mise en emphase, ⁥ de gestion de l'espace fine insécable, <small> de commentaires écrits en petits caractères, <sub> de mise en indice et <sup> de mise exposant ne sont pas convoqués.
- - L'utilisation des ancres n'est pas pertinente. Établir le protocole : de <a href="#1"> dans le texte vers <span id="1">> dans la bibliographie (avec un retour, éventuellement).
- - Dans la section Bibliographie, la structure de la liste est invalide. Une liste ordonnée <ol> ne peut contenir que des éléments de liste <li>. La structure recommandée est celle-ci : mettre l'article à l'intérieur du <li> ou supprimer les balises <article> et </article>.
CSS

- Le code de la feuille de style est propre, bien organisé et le choix de composition propose une mise en page asymétrique.
- L’utilisation de @import pour intégrer les polices Bebas Neue et Kode Mono est pertinente.
- L'interlignage line-height: 1.7 est excellent. Le texte sera aéré et très agréable à lire.

Quelques améliorations à apporter⁥:
- - Vous sollicitez la police de caractères font-family: "Kedebideri" pour les h2, h3, p, article, header, ul, li et a alors que vous créez un lien (page html) avec une Google Fonts nommée family=Kode+Mono. Ça coince…
- - Le style des liens est un choix esthétique très actuel et efficace mais le soulignement jaune text-decoration-color: yellow pourrait être un peu plus marqué pour être plus visible sur le fond blanc.
- - Le texte est justifié text-align: justify, c'est esthétique (blocs carrés), mais attention aux lézardes .
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Romane

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation des éléments étudiés <section>, <article>, <p>, <h1> à <h6>, <strong>, <em>, <cite>,  , ⁥, <br>, <ul>, <li>, <mark>, <a href>, <small>, <sub> ou <sup> est complète et pertinente.
- Le lien vers une feuille de style externe css/style.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h1>, <h2>, <h3> et <h4> est respectée et logique.
- Le système de notes de bas de page avec les ancres est fonctionnel.
- Une page de code HTML de belle qualité.

Quelques améliorations à apporter⁥:
- - Attention à l'utilisation de l'antislash \ pour le nommage du chemin du fichier CSS et du fichier image car les serveurs web fonctionnent généralement sous Linux et ne le reconnaissent pas. Le site s'affichera bien sur ton ordinateur, mais le CSS et les images seront certainement cassés une fois le site en ligne. À corriger par le slash /.
CSS

- Le code de la feuille de style est très intéressant car il montre une réelle volonté de design graphique et une recherche esthétique. Mais cet élan qualitatif présente un bémol pour le titre h1 qui n'affiche pas la bonne typographie.
- L’utilisation de @import pour intégrer la police Funnel Display est pertinente.
- L'utilisation de font-variant: small-caps pour les noms d'auteurs dans la bibliographie (.smallcap span) montre un souci du détail typographique.
- Le contraste entre le fond #27131e, un prune très foncé, et le texte #d2d1dd, gris clair est efficace.

Quelques améliorations à apporter⁥:
- - La déclaration @font-face est erronée dans sa description : src: href="font\Kitsune-Light.otf";. Corrigez-la par : @font-face { font-family: 'Kitsune'; src: url('font/Kitsune-Light.otf') format('opentype'); }.
- - L'interlignage line-height est réglé sur 1em. C'est beaucoup trop serré pour la lecture d'un texte justifié. Les lignes vont se toucher, ce qui rend la lecture pénible. Conseil : pour le web, on recommande généralement entre 1.4 et 1.6.
- - Le texte est justifié text-align: justify, c'est esthétique (blocs carrés), mais attention aux lézardes .
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Flora

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <em>, <cite>,  , <br>, <ul>, <li>, <mark>, <a href>, <sub> ou <sup> est pertinente.
- Le lien vers une feuille de style externe css/style.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h1>, <h3> et <h4> est logique mais un <h2> serait le bienvenu pour respecter la hiérarchie (accessibilité). Idéalement, le titre Synthèse rédigée devrait être un <h2>.
- L'utilisation des ancres internes href="#ref1" et href="#ref2", pour lier les appels de note aux références en bas de page, est conforme (mais la destination est à revoir, explication ci-dessous).
- L'utilisation d'un caractère Unicode (un oiseau : 𓅰) comme puce de liste list-style-type dans la balise <style> est originale mais interroge sur son sens.

Quelques améliorations à apporter⁥:
- - Le lien vers l'image <a href="img/img.jpg" target= _blank> est mort car l'image est introuvable et pour le ciblage target= _blank, il manque les guillemets : target="_blank".
- - les éléments ⁥ et <small> ne sont pas convoqués dans la page. Attention à l'utilisation de <sub> qui ne produit pas son effet car il est posé sur un mot isolé.
- - Il y a une erreur de ciblage des ancres sur les balises fermantes </li id="ref1"> et </li id="ref2">. Cette mise en forme rend invisible et inopérationnelle l'usage de l'ancre interne. Correction : déplacer le ciblage sur les balises ouvrantes : <li id="ref1"> et <li id="ref2">
- - Dans le dernier article, vous avez ouvert un <p> qui contient une <ul>. En HTML, une liste <ul> ne peut pas être l'enfant d'un paragraphe <p>. Supprimez les éléments <p> et </p>.
CSS

- Le code est propre, bien organisé et montre une attention particulière à la typographie et à l'expérience utilisateur avec hover.
- L’utilisation de @import pour intégrer les polices Space Mono et Syne est pertinente. Ce contraste visuel fonctionne très bien avec le thème du vivant et numérique .
- L'utilisation de em pour les tailles de police font-size: 1.3em et l'interlignage line-height: 1.5em est une très bonne pratique. Cela permet une mise à l'échelle harmonieuse.
- Le choix des couleurs rgb(232, 235, 226) (fond gris-vert pâle) et rgb(78, 129, 78) (vert foncé) est très cohérent avec le sujet du Biodesign et de la nature.
- Bon usage de la classe .alinea avec text-indent: 2em qui respecte les codes classiques de la mise en page éditoriale.

Quelques améliorations à apporter⁥:
- - Bonne idée dans l'usage de l'attribut text-decoration: underline dotted rgb(94, 139, 94), 6px; (ligne 26 du code CSS) sur les h4 mais une simple erreur de virgule, avant la valeur d'épaisseur, le rend inefficace. Corrigez pour : text-decoration: underline dotted rgb(94, 139, 94) 6px;.
- - La classe sup { line-height: 35% } peut être améliorée. La balise <sup> (mise en exposant) a souvent tendance à briser l'interlignage du paragraphe parent. Réduire son line-height est une bonne tentative pour corriger cela, mais il est parfois plus stable d'utiliser vertical-align: baseline; avec un position: relative; top: -0.5em;.
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Lindsay

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <em>, <cite>,  , ⁥, <br>, <ol>, <li>, <mark>, <a href>, <small>, <sub> ou <sup> est complète et pertinente.
- Le lien vers une feuille de style externe css/styles.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h1> et <h2> est logique.
- L'utilisation de font-variant: small-caps pour les noms d'auteurs dans la bibliographie dans la class .petcap span montre un souci du détail typographique.

Quelques améliorations à apporter⁥:
- - Bien vu l'utilisation de la balise <blockquote> mais elle ne devrait pas être directement à l'intérieur d'un <p> (un paragraphe ne peut pas contenir un élément de bloc). Pour corriger : supprimez les éléments ouvrant et fermant <p> et </p>.
- - Ligne 56 du code HTML, la balise de fermeture </li> est manquante pour le premier élément de la liste ordonnée id="1".
CSS

- Le code CSS montre une intention esthétique marquée, avec un choix de polices original et une attention particulière aux détails typographiques. Le style graphique est affirmé avec un bleu saturé rgb(51, 0, 255), typique d'un design brutaliste, très contemporain.
- L’utilisation de @import pour intégrer les polices Quicksand et Stack Sans Notch est pertinente.
- L'état du a:hover avec un effet d'inversion est très cohérent. Au survol, le texte passe en blanc sur fond bleu, ce qui améliore l'expérience utilisateur.

Quelques améliorations à apporter⁥:
- - Vous convoquez la propriété et sa valeur font-variant-ligatures: common-ligatures; pour inviter les ligatures dans la composition de votre texte mais la typographie liée Quicksand ne les propose pas dans ces glyphes : voir….
- - Appliquer un margin: 100px directement sur la balise html est audacieux. Généralement, on applique les marges sur le body ou un conteneur (div, main) pour éviter des comportements imprévus sur certains navigateurs.
- - Pour l'interlignage du h2, le line-height: 0.05rem (0,8 pixel) 🤪 est extrêmement faible. Cela risque de faire chevaucher le texte si le titre fait plus d'une ligne.
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Océane

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <cite>,  , <br>, <ol>, <li>, <mark>, <a href>, <sub> ou <sup> est pertinente.
- Le lien vers une feuille de style externe CSS/style.css est correctement intégré dans le <head> mais attention à l'usage de la capitale pour le nommage du chemin.
- La hiérarchie des titres <h2>, <h3> et <h4> est logique.

Quelques améliorations à apporter⁥:
- - Les éléments <h1> de titre de niveau 1, <em> de mise en emphase, ⁥ pour l'espace fine insécable, <small> de commentaires écrits en petits caractères ne sont pas convoqués dans le HTML.
- - Les liens d'ancrage href="#ref" et de retour href="#refR" pour les notes de bas de page sont efficaces. Vigilance accrue pour l'usage de la majuscule pour le nommage du lien qui peut perturber l'efficacité de votre site (certains serveurs sont sensibles à la casse).
- - Attention, dans la liste ordonnée des notes de bas de page, l'attribut id="ref" est répété trois fois. La règle veut qu'un id doit être unique dans toute la page. Corrigez pour : id="note1", id="note2", etc. Remarquez aussi que dans la yntaxe de la liste <ol> vous avez écrit <li id="ref" 1>. Le chiffre 1 est placé en dehors de tout attribut, ce qui n'est pas valide. Corrigez pour : <li id="note1">.
- - Pour l'attribut target=_blank du lien vers Research Gate, il manque les guillemets autour de "_blank".
- - L'utilisation de <br> pour créer de l'espace entre les sections est à bannir. Il est préférable d'utiliser des marges en CSS avec la propriété margin-bottom sur la balise <section>.
CSS

- Le code CSS est bien rédigé et montre une intention esthétique très marquée (style Cyber-Barbie ou Electro-Pinknbsp;) avec un contraste fort entre le fond sombre et le texte néon. Restez vigilante au confort de lecture 🤯.
- L’utilisation de @import pour intégrer les polices Montserrat et Ballet est pertinente.
- La conjonction de text-align:justify; (texte justifié) et de hyphens:none; (sans césure) peut faciliter la présence des lézardes en dilatant l'espace justifiante.

Quelques améliorations à apporter⁥:
- - Il y a deux lignes @import dans le fichier CSS. La seconde inclut la première. Gardez uniquement la deuxième ligne pour alléger le chargement de la page.
- - En CSS, on applique généralement le margin et le background-color sur la balise body. Appliquer des marges sur html peut parfois causer des comportements étranges sur certains navigateurs.
COMPÉTENCES

- 10.5 Respecter les échéances⁥: 
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Miriame

HTML

- La déclaration <!doctype html> est correcte, et l’attribut lang="fr" est bien utilisé.
- Les balises <html>, <head>, et <body> sont correctement placées et fermées.
- Le <meta charset="utf-8" /> est convoqué.
- L’utilisation de <section>, <article>, <p>, <h1> à <h6>, <strong>, <em>,  , ⁥, <br>, <ol>, <li>, <mark>, <a href>, <small>, <sub> ou <sup> est pertinente.
- Le lien vers une feuille de style externe css/styles.css est correctement intégré dans le <head>.
- La hiérarchie des titres <h1>, <h2> et <h3> est correcte et logique.
- La gestion des entités HTML pour l'espace insécable   et l'espace fine insécable   garantit un bon niveau d'exigence dans la mise en forme de la typographie.
- La gestion de l'ancre est efficace.

Quelques améliorations à apporter⁥:
- - L'élément <cite>, pour la citation, n'a pas été sollicité dans le HTML.
- - Pour la structure de la liste <ol>, la balise est placée à l'intérieur d'un élément <p>. C'est une erreur de syntaxe : une liste est un élément de bloc et ne peut pas être contenue dans un paragraphe. Voyez, aussi, comment votre paragraphe ne comporte pas de balise fermante </p>.
- - L'utilisation répétée de <br> pour créer de l'espace entre les articles n'est pas recommandée. Il vaut mieux utiliser des marges en CSS margin-bottom.
- - Pour l'attribut target=_blank des liens vers ici et voilà, il manque les guillemets autour du type de ciblage : "_blank".
CSS

- La feuille de syles externe est bien structurée et bien rédigée.
- L’utilisation de @import pour intégrer les polices Playwrite et Montserrat Alternate est pertinente.

Quelques améliorations à apporter⁥:
- - Le sélecteur html applique un padding: 5px 10em 0 10em; (10em = 160px). Cela crée une colonne centrale très étroite qui risque de mettre en difficulté le contenu sur un écran de smartphone. Pour corriger cela, il vaudrait mieux utiliser une largeur maximale max-width et centrer le contenu. Attention, si vous voulez poser un padding à l'ensemble de votre page HTML, il est préférable de le mettre sur body plutôt que html⁥!.
  La correction à apporter est donc : body { max-width:900px; margin:0 auto; padding:20px; }.
COMPÉTENCES

- 10.5 Respecter les échéances⁥:  pour l'oubli des fichiers téléversés sur le serveur distant
- 11.2 Prototyper tout ou partie (fichiers téléversés et pertinence du code)⁥: 

Retour sur l'exercice HTML - partie texte 11·12·25

Éloïse

HTML

CSS

COMPÉTENCES

Alicia

HTML

CSS

COMPÉTENCES

Eléa

HTML

CSS

COMPÉTENCES

Julie

HTML

CSS

COMPÉTENCES

Ayoub

HTML

CSS

COMPÉTENCES

Ethan

HTML

CSS

COMPÉTENCES

Thibaut

HTML

CSS

COMPÉTENCES

Elyse

HTML

CSS

COMPÉTENCES

Manon

HTML

CSS

COMPÉTENCES

Tiphaine

HTML

CSS

COMPÉTENCES

Romane

HTML

CSS

COMPÉTENCES

Flora

HTML

CSS

COMPÉTENCES

Lindsay

HTML

CSS

COMPÉTENCES

Océane

HTML

CSS

COMPÉTENCES

Miriame

HTML

CSS

COMPÉTENCES