Différences entre versions de « HTML5 CSS3 »
De Didaquest
Aller à la navigationAller à la recherche (Page créée avec « {{Widget:Fiche-Conceptuelle-Haut}} = {{Widget:Traduction-Fiche}} = <!-- ***********************************************************************--> <!-- *************** D... ») |
|||
| (37 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 12 : | Ligne 12 : | ||
[[{{FULLPAGENAME}}]] (Français) | [[{{FULLPAGENAME}}]] (Français) | ||
| − | / [[ | + | / [[{{FULLPAGENAME}}]] (Anglais) |
| − | / [[Concept en Arabe]] (Arabe) | + | / [[Concept en Arabe]] (Arabe "Ne possède pas de traduction") |
}}<!-- ************** Fin Fiche Didactique Traduction ********************* --> | }}<!-- ************** Fin Fiche Didactique Traduction ********************* --> | ||
| Ligne 26 : | Ligne 26 : | ||
<!--****************** Commercez les modifications: Fiche-Disciplines-Thématiques *********************--> | <!--****************** Commercez les modifications: Fiche-Disciplines-Thématiques *********************--> | ||
| − | |Domaine-Discipline-Thématique-1= | + | |Domaine-Discipline-Thématique-1= Informatique |
| − | |Domaine-Discipline-Thématique-2= | + | |Domaine-Discipline-Thématique-2= Programmation Web |
| − | |Domaine-Discipline-Thématique-3= | + | |Domaine-Discipline-Thématique-3= Design |
| − | |Domaine-Discipline-Thématique-4= | + | |Domaine-Discipline-Thématique-4= Développement |
| − | |Domaine-Discipline-Thématique-5= | + | |Domaine-Discipline-Thématique-5= Web sémantique |
|Domaine-Discipline-Thématique-6= | |Domaine-Discipline-Thématique-6= | ||
|Domaine-Discipline-Thématique-7= | |Domaine-Discipline-Thématique-7= | ||
| Ligne 49 : | Ligne 49 : | ||
<!-- *************** Commercez les modifications *******************--> | <!-- *************** Commercez les modifications *******************--> | ||
| − | * | + | *'''HTML:''' '''H'''yperText '''M'''arkup '''L'''anguage |
| − | + | **Créé en 1991 | |
| − | + | **Fonction : donner du sens et structurer le contenu | |
| − | + | *'''CSS:''' '''C'''ascading '''S'''tyle '''S'''heets | |
| − | * | + | **Créé en 1996 |
| − | + | **Fonction : mettre en forme le contenu en lui ajoutant des styles | |
| − | |||
<!-- ******** Fin Définition Générale ***************************** --> | <!-- ******** Fin Définition Générale ***************************** --> | ||
| Ligne 62 : | Ligne 61 : | ||
|Typologie= <!------------------------------------ Ne pas Modifier --> | |Typologie= <!------------------------------------ Ne pas Modifier --> | ||
<!-- ****************** Commercez les modifications ****************--> | <!-- ****************** Commercez les modifications ****************--> | ||
| − | *............. | + | *'''Le fonctionnement des sites Web:''' |
| − | + | Surfer sur le Web c’est un échange.En fait, le Web est un système d’échange entre un client et un serveur. | |
| − | ... | + | :*Le client c’est nous, c’est notre navigateur Web, c’est lui qui va nous permettre de voir le Web depuis notre ordinateur, smartphone ou tablette. C’est celui que vous connaissez sans doute sous le nom de Chrome, Firefox, Safari, Internet Explorer, etc. |
| − | + | :*Le serveur, c’est en fait un ordinateur puissant qui stocke et héberge des sites Web. C’est sur cet ordinateur que se trouvent les pages Web, c’est à dire tous les fichiers du site internet auquel on veut accéder. | |
| − | *..... | + | Le but du serveur web est de servir des clients, d’où le nom « serveur ». |
| − | + | *'''HTML5 et CSS3''' | |
| − | . | + | Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web. Quand vous consultez un site avec votre navigateur, il faut savoir que, en coulisses, des rouages s'activent pour permettre au site web de s'afficher. L'ordinateur se base sur ce qu'on lui a expliqué en HTML et CSS pour savoir ce qu'il doit afficher |
| + | *'''HTML et CSS : deux langages pour créer un site web''' | ||
| + | Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte Word, par exemple), il faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc. | ||
| + | |||
| + | *'''Les rôles de HTML et CSS:''' | ||
| + | Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est là que les choses se corsent, parce qu'il va falloir apprendre deux langages ! | ||
| + | |||
| + | *'''Pourquoi avoir créé deux langages ? Un seul aurait suffi, non ?''' | ||
| + | |||
| + | Vous devez vous dire que manipuler deux langages va être deux fois plus complexe et deux fois plus long à apprendre… mais ce n'est pas le cas ! Je vous rassure, s'il y a deux langages c'est, au contraire, pour faciliter les choses. Nous allons avoir affaire à deux langages qui se complètent car ils ont des rôles différents : | ||
| + | |||
| + | *'''HTML (HyperText Markup Language) :''' il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ». | ||
| + | |||
| + | *'''CSS (Cascading Style Sheets, aussi appelées Feuilles de style) :''' le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996. | ||
| + | |||
| + | Vous avez peut-être aussi entendu parler du langage XHTML. Il s'agit d'une variante du HTML qui se veut plus rigoureuse et qui est donc un peu plus délicate à manipuler. Elle n'est plus vraiment utilisée aujourd'hui. | ||
| + | |||
| + | Dans ce cours, nous allons travailler sur la dernière version de HTML (HTML5) qui est aujourd'hui le langage d'avenir que tout le monde est incité à utiliser. | ||
| + | |||
| + | Vous pouvez très bien créer un site web uniquement en HTML, mais celui-ci ne sera pas très beau : l'information apparaîtra « brute ». C'est pour cela que le langage CSS vient toujours le compléter. | ||
}}<!-- ******** Fin Fiche Didactique Définition ******************* --> | }}<!-- ******** Fin Fiche Didactique Définition ******************* --> | ||
| Ligne 83 : | Ligne 101 : | ||
<!-- Remplacez, Adaptez, Ajoutez ou Supprimez les images et lignes non utilisées--> | <!-- Remplacez, Adaptez, Ajoutez ou Supprimez les images et lignes non utilisées--> | ||
| − | Image: | + | Image:S14_html_CSS.jpg|L'apport du CSS3 |
| − | Image: | + | Image:IMAGE1.jpg|Titre de Votre Image 2 |
| − | Image: | + | Image:IMAGE2.jpg|Titre de Votre Image 3 |
| + | Image:images5_html.jpg|Titre de Votre Image 3 | ||
| + | Image:images6.jpg|Titre de Votre Image 3 | ||
| + | Image:images3.jpg|Titre de Votre Image 3 | ||
| + | Image:images4.jpg|Titre de Votre Image 3 | ||
</gallery><!-- ************** Fin modification images***************************--> | </gallery><!-- ************** Fin modification images***************************--> | ||
| Ligne 95 : | Ligne 117 : | ||
<!--Ajoutez ou supprimez les lignes non utilisées ---------------------------------------------------------------------------> | <!--Ajoutez ou supprimez les lignes non utilisées ---------------------------------------------------------------------------> | ||
<!-- ****************** Commercez les modifications pour les Vidéos *******************************************************--> | <!-- ****************** Commercez les modifications pour les Vidéos *******************************************************--> | ||
| − | + | <youtube width="220" height="220">adWGGnY58ek/youtube> | |
| − | <youtube width="220" height="220"> | + | <youtube width="220" height="220">vSeW6_0SMsk</youtube> |
| − | <youtube width="220" height="220"> | + | <youtube width="220" height="220">8FqZZrbnwkM</youtube> |
| − | <youtube width="220" height="220"> | + | <youtube width="220" height="220">HN4-7k0zC-Y</youtube> |
| + | <youtube width="220" height="220">z1KDrCFz1QM</youtube> | ||
| + | <youtube width="220" height="220">J9w-cir5a6U</youtube> | ||
}}<!-- ************************* Fin modifications pour les Médias *******************************************************--> | }}<!-- ************************* Fin modifications pour les Médias *******************************************************--> | ||
| Ligne 111 : | Ligne 135 : | ||
<!----------------- Commencez les modifications des Mots Clés ---------------------> | <!----------------- Commencez les modifications des Mots Clés ---------------------> | ||
| − | |Mot-Clé-1= | + | |Mot-Clé-1= Programmation Web |
| − | |Mot-Clé-2= | + | |Mot-Clé-2= Design |
| − | |Mot-Clé-3= | + | |Mot-Clé-3= Web Sémantique |
| − | |Mot-Clé-4= | + | |Mot-Clé-4= Page Web |
| − | |Mot-Clé-5= | + | |Mot-Clé-5= Attributs |
| − | |Mot-Clé-6= | + | |Mot-Clé-6= Balises |
| − | |Mot-Clé-7= | + | |Mot-Clé-7= HTML |
| − | |Mot-Clé-8= | + | |Mot-Clé-8= Texte |
| − | |Mot-Clé-9= | + | |Mot-Clé-9= Commentaires |
| − | |Mot-Clé-10= | + | |Mot-Clé-10= Listes |
| + | |Mot-Clé-11= images | ||
| + | |Mot-Clé-12= Liens | ||
| + | |Mot-Clé-13= Tableaux | ||
| + | |Mot-Clé-14= Vidéo | ||
| + | |Mot-Clé-15= Audio | ||
| + | |Mot-Clé-16= Formulaire | ||
| + | |Mot-Clé-17= Cadres | ||
| + | |Mot-Clé-18= Orienté Objet | ||
| + | |Mot-Clé-19= HyperText | ||
| + | |Mot-Clé-20= Javascript | ||
| + | |Mot-Clé-21= PHP | ||
}}<!-- ********************* FIN Fiche Didactique Mots-clés *******************--> | }}<!-- ********************* FIN Fiche Didactique Mots-clés *******************--> | ||
| − | |||
= {{Widget:Exemples-applications-utilisations-Fiche}} = | = {{Widget:Exemples-applications-utilisations-Fiche}} = | ||
| − | |||
| − | |||
<!-- *************** Début Fiche Didactique Explicitations ***************** --> | <!-- *************** Début Fiche Didactique Explicitations ***************** --> | ||
{{Fiche Didactique Explicitations <!-------------------------------------------> | {{Fiche Didactique Explicitations <!-------------------------------------------> | ||
| Ligne 135 : | Ligne 167 : | ||
<!-- ****************** Commercez les modifications *********************** --> | <!-- ****************** Commercez les modifications *********************** --> | ||
| − | + | Le HTML5 est un format de langage développé par le W3C (World Wide Web Consortium) et le WHATWG (Web Hypertext Application Technology Working Group). Le successeur de HTML5 n'aura peut-être pas de numéro : il s'agira alors non pas de HTML6, mais de HTML Living Standard... En attendant, la version HTML5.1 a paru en 2016 et HTML5.2 en 2017. | |
| − | + | Attention, dans les propos des webmasters, le terme HTML5 regroupe souvent plusieurs technologies destinées notamment au développement d'applications : HTML5, CSS3 et JavaScript. On parle aussi de DHTML : Dynamic HTML, en référence à ces technologies qui rendent les pages web aptes à se modifier au fil de la consultation, directement sur le navigateur web. | |
| − | + | {{@}}'''Les API JavaScript de HTML5:''' | |
| − | + | Le HTML5 propose également une série de nouvelles API, pour la plupart sous JavaScript, qui peuvent être implémentées sur tous les navigateurs.Voici quelques exemples d'API ajoutées pour HTML5 : | |
| − | * | + | * Dessin en 2D via la balise <canvas> et ajout de contenu 3D sur les pages avec les API tierces WebGL et Khronos Group |
| − | + | * Géolocalisation | |
| − | + | * Activation des contenus audio et vidéo via les balises <audio> et <video>, également nouvelles | |
| − | + | * Applications hors connexion : l'Application cache | |
| + | * Exécution de tâches parallèles au code de la page. Cette API peut interagir avec le script principal de la page. | ||
| + | * L'édition de contenus, qui fonctionne avec le nouvel attribut <contenteditable> | ||
| + | * Glisser-déposer activée sous l'attribut <draggable> | ||
| + | * Un web storage étendu, qui ne remplace pas les cookies mais offre une amplitude largement supérieure aux versions précédentes | ||
| + | {{@}}'''Attributs et éléments spécifiques à HTML5:''' | ||
| + | Sous HTML5, la logique et la structure du langage est restée fidèle à elle-même. Le document doit toujours être déclaré sous doctype. Cependant, la page doit intégralement respecter la syntaxe XML en spécifiant l'encodage dans le prologue. L'organisation des documents est désormais régie par des catégories qui le rendent plus lisible et compréhensible pour les moteurs de recherche. | ||
| + | * Le <header> contient tous les éléments qui doivent se trouver en introduction de la page. Il est complété par le <footer> en bas de page, où sont placées des informations relatives au contenu : date, auteur, coordonnées (importantes en référencement local). | ||
| + | * <section> regroupe le contenu selon des sections apparentes sur la page. | ||
| + | * <aside> créer une relation avec la balise précédente. | ||
| + | * <article> distingue une partie indépendante du reste du site, comme un commentaire, par exemple. | ||
| + | |||
| + | Le contenu illustratif et interactif est mieux géré : | ||
| + | * <figure>, <video>, <audio>, <embed>, <canvas> : autant d'exemples de balises permettant d'insérer du contenu non textuel mais néanmoins assimilable pour les robots des moteurs de recherche. | ||
| + | * <meter>, <time> ou <output> élargissent l’éventail des informations qui peuvent être intégrées à la page. | ||
| + | {{@}}'''Traduction du mot HTML5:''' | ||
| + | * Langage de balisage d'hypertexte | ||
| + | * La version HTML5 (pour Langage de balisage d'hypertexte en français) est sans doute la dernière version numérotée du format HTML. | ||
| + | * HTML5 version is probably the last numbered version of HTML. | ||
| + | {{@}}'''HTML5 en pratique :''' | ||
| + | * Comment faire un focus sur un élément d'un formulaire HTML ? | ||
| + | * Comment modifier la classe CSS d'un élément HTML lors d'un événement onClick ? | ||
}}<!--************** Fin Fiche Didactique Explicitations ******************* --> | }}<!--************** Fin Fiche Didactique Explicitations ******************* --> | ||
| − | |||
= {{Widget:Erreurs-confusions-Fiche}} = | = {{Widget:Erreurs-confusions-Fiche}} = | ||
| Ligne 156 : | Ligne 208 : | ||
<!-- ****************** Commercez les modifications *************************--> | <!-- ****************** Commercez les modifications *************************--> | ||
| − | * Confusion entre [[ | + | * Confusion entre [[Head et Body]] |
| − | * Confusion entre [[ | + | * Confusion entre [[Balise et Attribut]] |
| − | * Erreur fréquente: | + | * Confusion entre [[Propriété et Attribut]] |
| + | * Confusion entre [[Site statique et Site dynamique]] | ||
| + | * Confusion entre [[Lien interne et Lien externe]] | ||
| + | * Confusion entre [[Cadre et Tableau]] | ||
| + | * Confusion entre [[Bouton et Submit]] | ||
| + | * Confusion entre [[HTML et HTML5]] | ||
| + | * Erreur fréquente: Balise et Attribut | ||
| + | * Erreur fréquente: Cadre et Tableau | ||
}}<!-- ************** Fin Fiche Didactique Conceptions ********************* --> | }}<!-- ************** Fin Fiche Didactique Conceptions ********************* --> | ||
| − | |||
= {{Widget:Questions-possibles-Fiche}} = | = {{Widget:Questions-possibles-Fiche}} = | ||
| Ligne 172 : | Ligne 230 : | ||
<!-- ************ Commercez les modifications *********************--> | <!-- ************ Commercez les modifications *********************--> | ||
| − | * [[ | + | * [[Est-ce qu'on peut créer tout un site Web en utilisant seulement le langage HTML5?]] |
| − | * [[ | + | * [[Quelle est la différence entre HTML et CSS?]] |
| − | * [[ | + | * [[Quelle est la différence entre HTML, Javascript et PHP?]] |
}}<!-- ******** Fin Fiche Didactique Questions ******************* --> | }}<!-- ******** Fin Fiche Didactique Questions ******************* --> | ||
| − | |||
= {{Widget:Liens-enseignement-Fiche}} = | = {{Widget:Liens-enseignement-Fiche}} = | ||
| Ligne 190 : | Ligne 247 : | ||
<!-- Complétez les pointillés et Supprimez les lignes non utilisées -----> | <!-- Complétez les pointillés et Supprimez les lignes non utilisées -----> | ||
<!-- ****************** Commercez les modifications ************************** --> | <!-- ****************** Commercez les modifications ************************** --> | ||
| + | '''Améliorez vos compétences en intégrations avec ces 6 jeux interactifs''' | ||
| + | * '''Erase All Kittens''' | ||
| + | E.A.K ce jeu en cours de création propose d'apprendre aux enfants (et aux plus grands aussi) à utiliser le HTML et le CSS pour avancer dans le jeu. | ||
| + | |||
| + | [[Image:jeux1.jpg]] | ||
| + | * '''CSS Diner''' | ||
| + | CSS diner est un site interactif et animé permettant de mieux prendre en main les selectors CSS les plus complexes. L'objectif est toujours le même : sélectionner les bons ingrédients (oui, les assiettes sont des ingrédients) sur la table, en fonction des instructions. | ||
| + | |||
| + | [[Image:jeux2.jpg]] | ||
| + | * '''CodeAvenger''' | ||
| + | CodeAvenger se rapproche plus du tutoriel interactif que du jeu, et risque donc de ne pas intéresser les enfants. Néanmoins, il reste bien fait et peut tout à fait être utile à un adulte qui a deux heures à perdre et un manque de compétence en intégration à combler. | ||
| + | Les cours sont détaillés, intéressants, et ont une approche mobile first intéressante. | ||
| − | + | [[Image:jeux3.jpg]] | |
| − | |||
| − | |||
| − | : | ||
}}<!-- ************************* Fin Idées-Enseignement ********************** --> | }}<!-- ************************* Fin Idées-Enseignement ********************** --> | ||
| − | |||
== {{Widget:Aides et astuces-Fiche}} == | == {{Widget:Aides et astuces-Fiche}} == | ||
| Ligne 208 : | Ligne 273 : | ||
<!-- ****************** Commercez les modifications ************************** --> | <!-- ****************** Commercez les modifications ************************** --> | ||
| − | * .. | + | {{@}} '''Tutoriel''' |
| − | : | + | * https://www.cssdebutant.com/ |
| − | * .. | + | * https://www.w3.org/Style/Examples/011/firstcss.fr.html |
| − | : | + | {{@}} '''Environnement en ligne''' |
| + | * https://repl.it/repls/TiredAverageIrc#index.html | ||
| + | *https://didactique.info/formation/course/view.php?id=211 | ||
}}<!-- ************************* Fin Astuces-Enseignement ********************** --> | }}<!-- ************************* Fin Astuces-Enseignement ********************** --> | ||
| Ligne 223 : | Ligne 290 : | ||
<!-- ****************** Commercez les modifications ************--> | <!-- ****************** Commercez les modifications ************--> | ||
| − | :* ...... | + | :* https://www.w3schools.com/html/default.asp |
| − | :* .. | + | :* https://www.exercours.com/2020/03/html5-et-css3-cours-et-exercices-corriges-pdf.html |
| − | :* .. | + | :* https://fr.admininfo.info/tutoriales/335/ |
| + | :* https://developer.mozilla.org/fr/docs/Web/HTML | ||
| + | |||
}}<!-- ************ Fin Liens Education ********************** --> | }}<!-- ************ Fin Liens Education ********************** --> | ||
| Ligne 239 : | Ligne 308 : | ||
<!-- ****************** Commercez les modifications *********************--> | <!-- ****************** Commercez les modifications *********************--> | ||
| − | * ... | + | * https://www.exercours.com/2020/03/html5-et-css3-cours-et-exercices-corriges-pdf.html |
| − | * .... | + | * https://www.w3.org/Style/Examples/011/firstcss.fr.html |
| − | * ... | + | * https://www.w3schools.com/html/default.asp |
| − | * .. | + | * https://www.cssdebutant.com/ |
}}<!-- ************* Fin Fiche Didactique Bibliographie *************** --> | }}<!-- ************* Fin Fiche Didactique Bibliographie *************** --> | ||
{{Widget:Fiche-Conceptuelle-Bas}} | {{Widget:Fiche-Conceptuelle-Bas}} | ||
Version actuelle datée du 19 juin 2020 à 23:43
 Votre Publicité sur le Réseau
|
Traduction
HTML5 CSS3 (Français)
/ HTML5 CSS3 (Anglais)
/ Concept en Arabe (Arabe "Ne possède pas de traduction")
Traductions
Définition
Domaine, Discipline, Thématique
Justification
Définition écrite
- HTML: HyperText Markup Language
- Créé en 1991
- Fonction : donner du sens et structurer le contenu
- CSS: Cascading Style Sheets
- Créé en 1996
- Fonction : mettre en forme le contenu en lui ajoutant des styles
Surfer sur le Web c’est un échange.En fait, le Web est un système d’échange entre un client et un serveur.
Le but du serveur web est de servir des clients, d’où le nom « serveur ».
Les langages HTML et CSS sont à la base du fonctionnement de tous les sites web. Quand vous consultez un site avec votre navigateur, il faut savoir que, en coulisses, des rouages s'activent pour permettre au site web de s'afficher. L'ordinateur se base sur ce qu'on lui a expliqué en HTML et CSS pour savoir ce qu'il doit afficher
Pour créer un site web, on doit donner des instructions à l'ordinateur. Il ne suffit pas simplement de taper le texte qui devra figurer dans le site (comme on le ferait dans un traitement de texte Word, par exemple), il faut aussi indiquer où placer ce texte, insérer des images, faire des liens entre les pages, etc.
Pour expliquer à l'ordinateur ce que vous voulez faire, il va falloir utiliser un langage qu'il comprend. Et c'est là que les choses se corsent, parce qu'il va falloir apprendre deux langages !
Vous devez vous dire que manipuler deux langages va être deux fois plus complexe et deux fois plus long à apprendre… mais ce n'est pas le cas ! Je vous rassure, s'il y a deux langages c'est, au contraire, pour faciliter les choses. Nous allons avoir affaire à deux langages qui se complètent car ils ont des rôles différents :
Vous avez peut-être aussi entendu parler du langage XHTML. Il s'agit d'une variante du HTML qui se veut plus rigoureuse et qui est donc un peu plus délicate à manipuler. Elle n'est plus vraiment utilisée aujourd'hui. Dans ce cours, nous allons travailler sur la dernière version de HTML (HTML5) qui est aujourd'hui le langage d'avenir que tout le monde est incité à utiliser. Vous pouvez très bien créer un site web uniquement en HTML, mais celui-ci ne sera pas très beau : l'information apparaîtra « brute ». C'est pour cela que le langage CSS vient toujours le compléter. |
HTML5 CSS3 - Historique (+)
Définition graphique
L'apport du CSS3
Titre de Votre Image 2
Titre de Votre Image 3
Titre de Votre Image 3
Titre de Votre Image 3
Titre de Votre Image 3
Titre de Votre Image 3
{{{AutresMedias}}}
Concepts ou notions associés
Programmation Web / Design / Web Sémantique / Page Web / Attributs / Balises / HTML / Texte / Commentaires / Listes / images / Liens / Tableaux / Vidéo / Audio / Formulaire / Cadres / Orienté Objet / HyperText / Javascript / PHP /
HTML5 CSS3 - Glossaire / (+)
Exemples, applications, utilisations
|
Le HTML5 est un format de langage développé par le W3C (World Wide Web Consortium) et le WHATWG (Web Hypertext Application Technology Working Group). Le successeur de HTML5 n'aura peut-être pas de numéro : il s'agira alors non pas de HTML6, mais de HTML Living Standard... En attendant, la version HTML5.1 a paru en 2016 et HTML5.2 en 2017.
Attention, dans les propos des webmasters, le terme HTML5 regroupe souvent plusieurs technologies destinées notamment au développement d'applications : HTML5, CSS3 et JavaScript. On parle aussi de DHTML : Dynamic HTML, en référence à ces technologies qui rendent les pages web aptes à se modifier au fil de la consultation, directement sur le navigateur web.
Le contenu illustratif et interactif est mieux géré :
|
Erreurs ou confusions éventuelles
- Confusion entre Head et Body
- Confusion entre Balise et Attribut
- Confusion entre Propriété et Attribut
- Confusion entre Site statique et Site dynamique
- Confusion entre Lien interne et Lien externe
- Confusion entre Cadre et Tableau
- Confusion entre Bouton et Submit
- Confusion entre HTML et HTML5
- Erreur fréquente: Balise et Attribut
- Erreur fréquente: Cadre et Tableau
Questions possibles
Liaisons enseignements et programmes
Idées ou Réflexions liées à son enseignement
Améliorez vos compétences en intégrations avec ces 6 jeux interactifs
- Erase All Kittens
E.A.K ce jeu en cours de création propose d'apprendre aux enfants (et aux plus grands aussi) à utiliser le HTML et le CSS pour avancer dans le jeu.
- CSS Diner
CSS diner est un site interactif et animé permettant de mieux prendre en main les selectors CSS les plus complexes. L'objectif est toujours le même : sélectionner les bons ingrédients (oui, les assiettes sont des ingrédients) sur la table, en fonction des instructions.
- CodeAvenger
CodeAvenger se rapproche plus du tutoriel interactif que du jeu, et risque donc de ne pas intéresser les enfants. Néanmoins, il reste bien fait et peut tout à fait être utile à un adulte qui a deux heures à perdre et un manque de compétence en intégration à combler. Les cours sont détaillés, intéressants, et ont une approche mobile first intéressante.
Aides et astuces
Education: Autres liens, sites ou portails
Bibliographie
Pour citer cette page: (CSS3)
ABROUGUI, M & al, 2020. HTML5 CSS3. In Didaquest [en ligne]. <http:www.didaquest.org/wiki/HTML5_CSS3>, consulté le 22, novembre, 2024
Catégories :
- Sponsors Education
- Informatique (Concepts)
- Programmation Web (Concepts)
- Design (Concepts)
- Développement (Concepts)
- Web sémantique (Concepts)
- Programmation Web
- Design
- Web Sémantique
- Page Web
- Attributs
- Balises
- HTML
- Texte
- Commentaires
- Listes
- Images
- Liens
- Tableaux
- Vidéo
- Audio
- Formulaire
- Cadres
- Orienté Objet
- HyperText
- Javascript
- PHP
- Concepts
- HTML5 CSS3
- HTML5 CSS3 (Concepts)
- Fiche conceptuelle didactique
