http://slamwiki2.kobject.net/ 2026-05-04T19:44:32+00:00 http://slamwiki2.kobject.net/ http://slamwiki2.kobject.net/lib/tpl/bootstrap3/images/favicon.ico text/html 2023-03-20T01:30:42+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/debug?rev=1679272242&do=diff Coder en HTML Ecriture du code Le rendu HTML d'une page n'est pas sensible à la mise en forme du code source HTML écrit : * Espace * Tabulations * Sauts de lignes Ne sont pas interprétés par le navigateur. Ils permettent par contre de rendre plus lisible un code source :<div class="imageB"></div><div class="imageB"></div><div class="imageB"></div> text/html 2023-03-28T17:52:40+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/formulaires?rev=1680018760&do=diff Formulaires Ils permettent à l'utilisateur de faire des choix, puis de les envoyer vers le serveur. Ils nécessitent donc d'utiliser une technologie backend. <style> td,th { vertical-align: middle!important; </style> Form * method correspond à la méthode HTTP qui sera utilisée lors de la soumission, et laisse le choix entre : <table border=0 width="100%"> <tr><td></td><td><label for="nom">Votre nom :</label> <input type="text" id="nom" placeholder="Entrez votre nom"></td></tr></table> <t… text/html 2023-03-19T21:17:37+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/liens?rev=1679257057&do=diff Liens La balise a permet de créer des liens hypertextes. Il s'agit d'une balise inline non orpheline (elle peut avoir du contenu). Bonnes pratiques : * Ne pas faire de lien Cliquer ici, mais exprimer avec précision ce que va ouvrir le lien Visiter Slamwiki 2.0 * Préciser le type de document associé s'il n'est pas en text/html 2023-03-28T11:06:09+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/media?rev=1679994369&do=diff HTML - médias Images L'insertion d'image peut se faire avec la balise auto-fermante img : Alt L'attribut alt doit être présent pour fournir un texte alternatif à l'image. Le texte alternatif est utile : * Si l'image n'est pas chargée (introuvable ou désactivée par l'internaute), <table border=0> <tr><td></td><td><figure> <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg" alt="The head and tor… text/html 2023-03-19T23:21:23+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/pratique1?rev=1679264483&do=diff HTML - Formatage simple et liens hypertextes Documents à créer dans un dossier pratique1 (à créer) Dans les versions décrites ci-dessous [Documents modèle] Version 1 Il s'agit de formater en HTML le document “Mentions légales” à disposition sur le drive. text/html 2023-03-19T20:14:47+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/pratique2?rev=1679253287&do=diff HTML - Formatage de listes Présenter le document suivant : * à partir du texte “Recette de la pâte à crêpe” * en respectant la mise en forme ci-dessous Nommer le fichier listes.html et la feuille de style css/listes.css A reproduire <div class="imageB"></div> text/html 2023-03-19T20:36:53+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/pratique3?rev=1679254613&do=diff HTML - Tableaux Création et formatage de tableaux Présenter le document suivant : * à partir du texte “Mentions légales” * en respectant la mise en forme ci-dessous Nommer le fichier mentions-legales.html et la feuille de style css/tableau.css<div class="imageB"></div> text/html 2023-03-19T20:49:47+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/pratique4?rev=1679255387&do=diff HTML - Structuration de page 1. About us * Reproduire le document ci-dessous (web-arena-about-us.html associé à la feuille de style web-arena.css). * Intégrer fontawesome-web pour les icônes * Utiliser les ressources sur le drive * Respecter les caractéristiques du modèle (police à utiliser font-family: montserrat,sans-serif) text/html 2023-03-20T02:16:22+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/pratique5?rev=1679274982&do=diff HTML - Conception de formulaire * Reproduire le document ci-dessous (contact-form.html associé à la feuille de style form.css). * Respecter les caractéristiques du modèle (types des champs, css) * Tous les champs sont obligatoires * Valider le formulaire par un post vers text/html 2023-05-09T02:31:35+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/semantic?rev=1683592295&do=diff HTML sémantique Il consiste à utiliser certaines balises donnant un sens au travers de la structure du document. Sémantique et structure <div class="imageB"></div> Balise Rôle h* Titres header En-tête général de la page main Zone de contenu principal aside Zone supplémentaire de complément <table border=0> <tr><td></td><td><div class="imageB"></div></td></tr></table> <table border=0> <tr><td></td><td><div class="imageB"></div></td></tr></table> <table border=0> <tr><td></td><td><div clas… text/html 2023-03-19T21:18:01+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/tableaux?rev=1679257081&do=diff Tableaux Les tableaux en HTML permettent de structurer des données tabulaires, et non de disposer du contenu (comme c'était le cas à une époque non flex). Balises * Le tableau est défini par la balise table * Il contient des lignes (ou rangées) <table border=0> <tr><td></td><td><div class="imageB"></div></td></tr></table> <table border=0> <tr><td></td><td><div class="imageB"></div></td></tr></table> <table border=0> <tr><td></td><td><div class="imageB"></div></td></tr></table> text/html 2024-09-05T07:27:29+00:00 Anonymous (anonymous@undisclosed.example.com) http://slamwiki2.kobject.net/web/html/text-structure?rev=1725514049&do=diff Structuration de texte Niveaux de titre Bonnes pratiques : * Le document doit respecter la hiérarchie des titres (pas de h2 sans ou avant un h1 précédant). * Eviter de dépasser le niveau 3 (la structure du document devient trop complexe au delà) <table border=0> <tr><td></td><td><div class="imageB"></div></td></tr></table> <table border=0> <tr><td></td><td><div class="imageB"></div></td></tr></table> <table border=0> <tr><td></td><td><div class="imageB"></div></td></tr></table> <table bor…