Cours d'initiation HTML+CSS (sur covertprestige.info), votre avis ?

Bonjour à tous,

J'aurais besoin d'avis et critiques mais qui n'ont pas grand chose à voir avec l'esthétique ou l'ergonomie du site (à moins que celle-ci ne pose problème), pour le site suivant :

[lien supprimé car mort + domaine squatté]

Il s'agit en fait d'un cours HTML et CSS (niveau initiation/débutant) que j'ai rédigé, afin d'avoir un support pour un cours de soutien que j'ai organisé en février et début mars.
Je ne suis pas enseignant, mais j'ai essayé d'être aussi pédagogue que possible (je crois d'ailleurs m'en être plutôt bien sorti, ou du moins n'était-ce pas un flop sans nom).
Il manque encore quelques éléments au cours, que je pourrais sans doute étoffer un peu (je pensais en particulier à la gestion des images, images de contenu et images de fond... par contre les questions liées au positionnement des éléments étant plutôt bien traitées ailleurs, je me suis contenté des liens qui vont bien), mais pour l'essentiel tout est là.

Maintenant que ce cours est en ligne, j'aimerais :
1/ L'"optimiser" en corrigeant les erreurs éventuelles et les manquements les plus flagrants. J'avoue avoir rédigé ce cours de tête, sans trop me référer à des sources solides, et il se peut que je traîne des amalgames ou des approximations qui pourraient se retrouver dans ce cours.
2/ Le rendre utile en le communiquant peut-être un peu plus largement (ce n'est pas une nécessité, mais si ça peut être utile...).

Voilà, qu'en pensez-vous ?
Modifié par fvsch (10 Dec 2018 - 14:50)

Salut,

S'il s'agit bien d'un cours initiation/débutant la première question que je poserais serait :

c'est quoi un navigateur ?

Question 2 : c'est quoi une extension, à quoi ça sert ?

a écrit :

Bien entendu, pour s'éviter des problèmes, on utilisera l'extension .html pour nos fichiers HTML.

G pas compris msieur

Si vous relevez des imprécisions ou des erreurs, ça serait sympa de dire dans quelle page
Bien sûr je peux trouver sans ça, mais ça me facilite la tâche (un peu flemmard sur les bords).

Bonjour,

petite coquille très mal placée (dans l'URL): htLM

@ clb56 :

a écrit :
Le code HTML du document est écrit directement dans un fichier texte simple. On peut donc créer des documents HTML avec des éditeurs plein texte comme Wordpad, le Bloc-note de Windows, SimpleText ou TextEdit, par exemple. À condition de connaître la syntaxe du langage HTML.

Cela signifie également qu'un fichier portant une extension en .txt peut très bien être un document HTML, si le texte qu'il contient est rédigé en langage HTML. Bien entendu, pour s'éviter des problèmes, on utilisera l'extension .html pour nos fichiers HTML.

Note : on trouve des documents HTML portant l'extension .htm, en trois lettres. À l'heure actuelle, il est tout à fait possible d'utiliser des extensions de plus de trois lettres, quel que soit le système d'exploitation (Windows, Mac OS, Linux…) utilisé. On préfèrera donc l'extension .html, plus cohérente.

Passage écrit un peu à l'arrache (pas super cool, vu qu'il s'agit du début du cours ...). Pour la partie que tu relèves, le propos est de dire que ce n'est pas l'extension qui fait le format de fichier, mais que celle-ci permet aux logiciels devant interpréter le fichier, comme un navigateur web par exemple, de reconnaître à quel fichier il a affaire.

Il s'agit à mon avis d'une approximation grossière. Dans la pratique, il me semble que c'est le serveur qui, en se basant sur les extensions des fichiers, en déduit un type MIME à envoyer au navigateur via les en-têtes HTTP.

Une modification de ce passage comme suit te paraît-elle appropriée ?

a écrit :
Bien entendu, pour s'éviter des problèmes, on utilisera l'extension .html pour nos fichiers HTML.
---- devient ----
Par contre, pour que les navigateurs web qui devront lire ces fichiers HTML les reconnaissent comme tels, on prendra soin d'utiliser l'extension .html pour nos fichiers.

Modifié par fvsch (10 Dec 2018 - 14:51)

Felipe a écrit :
petite coquille très mal placée (dans l'URL): htLM

J'y crois pas...

Bon, je corrige ça.
Merci à toi, Œuil de Lynx.

Au passage, je remarque que si je tape `http://example.com/cours-htm` ou `http://example.com/cours-htlm` (deux adresses erronées, donc) dans la barre d'adresse de mon navigateur (en l'occurence Firefox), il me réécrit à chaque fois "html" à la place de "htm" ou "htlm"... Surprenant.
Modifié par fvsch (10 Dec 2018 - 14:52)

mpop a écrit :
Pour la partie que tu relèves, le propos est de dire que ce n'est pas l'extension qui fait le format de fichier, mais que celle-ci permet aux logiciels devant interpréter le fichier, comme un navigateur web par exemple, de reconnaître à quel fichier il a affaire.

Ah ben voilà, il suffisait de le dire

Et un navigateur c'est un logiciel (comme il y a des logiciels pour l'image , le son, les films etc...)

Attention quand même si tu demandes à un navigateur d'ouvir un fichier.txt alors il affichera le code source dans sa fenêtre et pas du tout la page.

Et moi je continuerai à pleurer parce que j'ai rien compris et que toi tu m'auras dit :

a écrit :

un fichier portant une extension en .txt peut très bien être un document HTML, si le texte qu'il contient est rédigé en langage HTML

___seb a écrit :
Moi, j'aurais posté un tel sujet dans le bar ...

J'y ai pensé. Il y a toujours moyen de le déplacer s'il le faut, ça ne me gênerait pas.

___seb a écrit :
La pédagogie, ça ne s'improvise pas comme ça !!!

Ouch…
C'est une évidence. Mais je n'ai pas la prétention de faire quelque chose de parfait et de parfaitement "efficace" (même si ça me plairait, bien sûr).

___seb a écrit :
A qui est destiné ce cours ? Quelles connaissances doivent être acquises au final ? Quelles sont les connaissances des sujets dans des domaines connexes et eloigné ?

Question difficile …
Au départ, il s'agissait d'un cours de soutien pour les élèves d'une Licence pro Communication électronique (dont les étudiants viennent de profils différents, et certains n'ont pas de formation technique préalable). Il s'agit de personnes n'ayant pas forcément de connaissances solides dans le domaine, mais qui ont déjà vu un code source HTML (sans forcément y comprendre grand chose...).
Effectivement, étendre la cible à un public plus large, ou à un public précis de grands débutants, est peut-être illusoire.

De même, il s'agissait au départ d'un support de cours, dont les défauts étaient compensables via l'interaction lors du cours lui-même.

___seb a écrit :
Tu devrais dire que les balises s'écrivent en minuscule et basta, pas de discution sur majuscule/minuscule (de toute façon, un code valide requière des balises ne minuscule, alors ya même pas besoin d'en parler).

Oui, si on remanie ce cours HTML/CSS pour en faire un cours XHTML/CSS.
Au sujet des "digressions" (notes divers qui émaillent le cours), je ne suis pas sûr qu'il faille les faire sauter pour éviter de troubler le lecteur. Tu conseillerais d'attendre que ce dernier soit mieux familiarisé avec du XHTML standard avant d'aborder le fait que la pratique est plus souple et moins catégorique que la théorie, et que les exemples qu'il peut rencontrer de cette souplesse ne sont pas des erreurs mais des alternatives ?

___seb a écrit :
Idem pour la css, tu parles des façons de lier une feuille css a une html. Tu devrais te limiter a une façon puis au final expliquer qu'il y en a plusieurs.

Là ça me semble plus évident, je pense qu'il faut modifier cette page. Présenter une seule possiblité (dans ce cas laquelle, feuille de style externe ou interne ?), puis donner un lien vers une page en annexe.

Ce qui donnerait un cours à deux niveau. Un "chemin de construction d'une page web minimale", comme tu dis, et des liens (mis en évidence par un style particulier, et pages avec une couleur de fond différente, par exemple, pour indiquer une annexe) vers un deuxième niveau.

Ça m'intéresse beaucoup. Comment verrais-tu la chose, concrètement ?

___seb a écrit :
1 - connaissances fonctionnelles (cas particuliers, concret, fonctionnel, simple)
2 - connaissances structurelles. (généralisation, abstrait, généralisable, structurel)

Tu as fais l'inverse.

Commence par montrer un bout de code et explicite le. A la fin, tu ouvres, tu généralises, tu formalises, mais pas trop vite.

C'est là que j'ai le plus de mal.
Concrètement, qu'est ce que ça pourrait donner ?

On présente un exemple, très bien. Mais ensuite, si on veut l'expliciter, comment faire sans un minimum de bases théoriques (notions d'éléments, de balises, d'attributs...) ? Ou alors, on se sert de l'explicitation de l'exemple pour introduire progressivement ces notions, pour enfin les reprendre sous une forme plus ordonnée ?

Salut,

Désolé pour le délai, j'ai du faire des choix pour continuer a bosser et ne pas sacrifier ma vie privée.

mpop a écrit :

seb :
La pédagogie, ça ne s'improvise pas comme ça !!!

Ouch…
C'est une évidence. Mais je n'ai pas la prétention de faire quelque chose de parfait et de parfaitement "efficace" (même si ça me plairait, bien sûr).

La perfection n'existe pas, il y a juste a se demander si la forme et le fond sont adaptés au public, tu l'avais compris.

mpop a écrit :

Question difficile
Au départ, il s'agissait d'un cours de soutien pour les élèves d'une Licence pro Communication électronique (dont les étudiants viennent de profils différents, et certains n'ont pas de formation technique préalable). Il s'agit de personnes n'ayant pas forcément de connaissances solides dans le domaine, mais qui ont déjà vu un code source HTML (sans forcément y comprendre grand chose...).
Effectivement, étendre la cible à un public plus large, ou à un public précis de grands débutants, est peut-être illusoire.

De même, il s'agissait au départ d'un support de cours, dont les défauts étaient compensables via l'interaction lors du cours lui-même.

mpop a écrit :

Donc, partir du plus petit dénominateur commun, rapidement puisque tu pourra expliciter, si nécessaire en cours, et penser à utiliser les connaissances préalables des élèves (même éloignées, si l'analogie est claire). Une bonne analogie c'est puissant, c'est un pied d'appui solide.

mpop a écrit :

___seb a écrit :
Tu devrais dire que les balises s'écrivent en minuscule et basta, pas de discution sur majuscule/minuscule (de toute façon, un code valide requière des balises ne minuscule, alors ya même pas besoin d'en parler).


Oui, si on remanie ce cours HTML/CSS pour en faire un cours XHTML/CSS.
Au sujet des "digressions" (notes divers qui émaillent le cours), je ne suis pas sûr qu'il faille les faire sauter pour éviter de troubler le lecteur. Tu conseillerais d'attendre que ce dernier soit mieux familiarisé avec du XHTML standard avant d'aborder le fait que la pratique est plus souple et moins catégorique que la théorie, et que les exemples qu'il peut rencontrer de cette souplesse ne sont pas des erreurs mais des alternatives ?

oui, je conseillerai ça. Pas de surchage inutile, d'abord les grandes lignes.

mpop a écrit :

___seb a écrit :
Idem pour la css, tu parles des façons de lier une feuille css a une html. Tu devrais te limiter a une façon puis au final expliquer qu'il y en a plusieurs.

Là ça me semble plus évident, je pense qu'il faut modifier cette page. Présenter une seule possiblité (dans ce cas laquelle, feuille de style externe ou interne ?), puis donner un lien vers une page en annexe.

Ce qui donnerait un cours à deux niveau. Un "chemin de construction d'une page web minimale", comme tu dis, et des liens (mis en évidence par un style particulier, et pages avec une couleur de fond différente, par exemple, pour indiquer une annexe) vers un deuxième niveau.

Ça m'intéresse beaucoup. Comment verrais-tu la chose, concrètement ?

C'est une question intéressante, en effet. J'ai conçus des guides d'autoformation et là, c'était simple, un premier avec la conception d'une pièce, en CAO, basique, puis un second guide avec plus de subtilité. Dans le cas d'un cours ça n'est pas adapté. Comme tu le proposes, tu peux soit mettre des liens vers des annexes au fur et a mesure, soit les mettres a la fin, dans les 2 cas ils risquent d'être considérés comme secondaires. Par contre l'idée d'un cours à deux niveaux me semble très bonne. Mon idée a priori serait de diviser les parties en 2. Une partie 'base' et une partie 'aller un peu plus loin' (ou un terme plus motivant). On peut s'immaginer que le lecteur comprendra facilement la partie base et 'tout content' d'avoir compris plongera dans les détails avec l'idée de 'je vais maîtriser ce sujet'.
( On peut aussi s'immaginer, que certains lirons d'abord juste les 'bases' puis reliront en prenant en compte la partie 'aller plus loin', d'autres liront les deux d'un trait mais ils distingueront bien ce que sont les 'bases de chez base' et ce qui commence a devenir sérieux.)
Tu vois ce que je veux dire... En plus en faisant comme ça, on maintient des parties courtes, ce que tu as déjà bien fait.
A réfléchir tout de même ...

mpop a écrit :

___seb a écrit :
1 - connaissances fonctionnelles (cas particuliers, concret, fonctionnel, simple)
2 - connaissances structurelles. (généralisation, abstrait, généralisable, structurel)
Tu as fais l'inverse.
Commence par montrer un bout de code et explicite le. A la fin, tu ouvres, tu généralises, tu formalises, mais pas trop vite.

C'est là que j'ai le plus de mal.
Concrètement, qu'est ce que ça pourrait donner ?

On présente un exemple, très bien. Mais ensuite, si on veut l'expliciter, comment faire sans un minimum de bases théoriques (notions d'éléments, de balises, d'attributs...) ? Ou alors, on se sert de l'explicitation de l'exemple pour introduire progressivement ces notions, pour enfin les reprendre sous une forme plus ordonnée ?

C'est l'idée, on part du concret pour introduire le théorique, t'as bien compris et tu n'a pas attendre, tu enchaines les deux. L'exemple sert de support pour poser la théorie, qui est ainsi moins abstraite

A ce sujet, il ne faut pas se méprendre, l'individu en apprentissage ne raisonne pas l'expert. L'expert a assimiler a la théorie et il part du structurel pour traiter le fonctionnel. L'individu en apprentissage par du fonctionnel (l'exemple pour en déduire une autre représentation fonctionnelle) (en passant par la représentation structurelle) (a terme il partira du structurel comme l'expert).

J'espère que c'est plus clair,
encore désolé pour le délai, bon courage.
Modifié par ___seb (04 Apr 2006 - 10:43)

___seb a écrit :
...
La pédagogie, ça ne s'improvise pas comme ça !!!

Ah? Etrange, il y'a des gens qui sont naturellement pédagogues, d'autres non.

C'est un peu comme la créativité.

Pur le reste on parle de "techniques" et "d'outils" qui comme toujours doivent-être choisis et adaptés à la situation.

Il est vrai qu'actuellement il est de bon ton de se positionner en démarches pédagogiques dites "Actives" ça fait hype dans les milieu de la formation.

Tu te positionne en démarche pédagogique inductive (en gros d'un cas particulier on en tire les généralités et règles via l'expérimentation). En théorie c'est beau, mais il faut pour cela avoir un public qui possède déja des connaissances ou outils pour décrypter ton apport initial. Ne pas oublier non plus que ce type de démarche n'est pas tout le temps réalisable dans une formation intensive ou rapide.

Il est sur que cette démarche est en général plus valorisante pour l'aprenant car il est acteur de sa formation, seulement il ne faut pas oublier les "frustrations" que peuvent entrainer au sein d'un groupe des différences de niveau de connaissances initiales.

La démarche déductive (à l'invers, partir des règles/concepts et leur donner un champs d'applications..en gros) est a mon avis plus aisément applicable pour de l'initiation, surtout si les apprenants n'ont pas un apport en connaissances initial suffisant.

Le must dans ce genre de cours est de commencer effectivement par un apport ou rappel global de connaissances, puis par la suite quand on a généralisé le niveau passer si possible en démarche inductive.

Mais pour ça, il n'y a que l'expérience sur le terrain qui permet de faire des constructions de scénarios pédagogiques en adéquation avec les conditions d'application de l'action de formation (niveau des apprenants, rapport contenu/temps etc).

La théorie c'est beau sur le papier, mais comme souvent dans la vraie vie, ce n'est pas à 100% exploitable.

Pour le reste Mpop, dés que ma fille me lache la jambe j'essaie de prendre le temps détudier ton cours. N'hésite pas au cas ou à me contacter en PM, je pourrais peut-être te filer des exemples de structures de cours sur des sujets techniques qui sont une bonne base de travail à adapter à ton sujet.
Modifié par AymericJ (08 Apr 2006 - 10:01)

Bonjour à tous,

Quel bel étalage, très dogmatique, des théories de la pédagogie !

Alors, je vais en rajouter une couche :

La définition de l'objectif pédagogique va peut-être permettre aux apprenants de se repérer dans la formation qu'ils vont suivre, et ce, quelle que soit la méthode employée.

Il s'agit de décrire l'objectif pédagogique par un comportement observable, permettant à l'apprenant, quels que soient ses prérequis, de se situer à chaque étape de l'apprentissage.

En gros, cela donne :

- Ce que nous allons faire (en terme d'action)
- Comment nous allons le faire
- Nos critères de réussite

Et il existe un petit tuto, plutôt basé sur la pédagogie active, en méthode déductive.

<edit> Tutoriel qui propose un découpage fort pertinent des actions<edit>

Efficace, non ?

Quant à savoir si le topic est hors sujet dans ce salon, voire dans ce forum : c'est un peu vrai, surtout si on s'évade dans les théories de l'apprentissage ...

Telle n'était pas l'intention de son auteur, qui s'improvise, et il l'a bien précisé dans son introduction.

J'ai le sentiment que l'objectif de mpop, à l'origine de ce topic, se limite à ce que nous l'aidions dans la définition des concepts qu'il présente, s'entend des concepts du langage web et non des concepts clés de la pédagogie ...






Modifié par Vero (08 Apr 2006 - 14:41)

Vero a écrit :
...
J'ai le sentiment que l'objectif de mpop, à l'origine de ce topic, se limite à ce que nous l'aidions dans la définition des concepts qu'il présente, s'entend des concepts du langage web et non des concepts clés de la pédagogie ...

Clair, je crois que j'étais un poil hors sujet.

Par contre ton rajout, Vero, est très utile car c'est un peu la base pour construire une formation car en decoule globalment le contenu, et cela réponds assez bien a la question de mpop.

Vero a écrit :
J'ai le sentiment que l'objectif de mpop, à l'origine de ce topic, se limite à ce que nous l'aidions dans la définition des concepts qu'il présente, s'entend des concepts du langage web et non des concepts clés de la pédagogie ...

AymericJ a écrit :
Clair, je crois que j'étais un poil hors sujet.

C'est pas grave, les concepts clés de la pédagogie ça m'intéresse aussi.

Merci à tous pour votre intervention. Je m'y replonge dès que j'ai un peu plus de temps.
Ah la la, j'avais pas vu qu'il y avait de nouvelles réponses à ce sujet. Ce forum manque cruellement d'un système d'alertes…
Modifié par mpop (24 Apr 2006 - 09:53)

Hello !
Ce qui m'étonne c'est que tu écris covertprestige avec un "c" et pourtant avec un "k" dans le logo.

edit : ah zut j'ai visité le mauvais lien! sorry
Modifié par Ralfman68 (25 Apr 2006 - 15:10)

Ralfman68 a écrit :
Ce qui m'étonne c'est que tu écris covertprestige avec un "c" et pourtant avec un "k" dans le logo.

Ah ah, c'est sans doute un peu trop cryptique.

« covert prestige » est un terme de sociolinguistique (William Labov), et je me suis donc amusé, pour les lettres initiales, à prendre les phonèmes (enfin les sons quoi) correspondant, en alphabet phonétique international. D'où les « square brackets » (crochets, en bon français).