Plan du cours

Contributeurs : Gilles G. Jobin et ...


[NP] : Notes pédagogiques

Principes directeurs ou hypothèses de travail


  1. L'enfant peut apprendre une écriture rigoureuse;
  2. On peut immédiatement marier les CSS au HTML;
  3. L'enfant peut rédiger une page à l'aide d'un éditeur plain. On devrait cependant lui suggérer un éditeur à coloration syntaxique reconnaissant le HTML. Il n'est pas question ici d'utiliser un WYSIWYG;
  4. Il faut avoir un tas d'exemples élémentaires, mais ne pas hésiter à en donner plus à celui qui désire aller plus vite.

Introduction


Travailler en mode local


Les balises «sémantiques» basiques



[NP] Il faut faire ici le lien avec les accolades, crochets et parenthèses en arithmétique : {[()]}. Cependant, il est possible que les élèves du primaire n'aient pas encore vu cette notion. Il faudra alors clairement illustrer l'idée de contenant dans un contenant dans un contenant etc. Par la suite, l'élève confronté avec les parenthèses en maths devrait sans doute faire le rapprochement avec l'idée du langage balisé en informatique.

  • Syntaxe générale (balise ouvrante, balise fermante);
  • <strong>forte emphase</strong> (se traduit généralement par du gras)
  • <em>emphase</em> (se traduit généralement par de l'italique)
  • <p>Ceci est un paragraphe</p>
  • <hn>Un titre</hn> ou n est un chiffre de 1 à 6. (Mnémo : h pour Heading = En tête)
  • <blockquote>Faire une citation</blockquote>
  • Exemple utilisant toutes les balises ci-dessus.

Les balises de liste


  • <ul><li></li></ul> : Liste non ordonnée ;
  • <ol><li></li></ol> : Liste ordonnée ;
  • <dl><dt><dd></dt></dl> : Liste de définitions ;

Algorithme de départ


Pour insérer quelques éléments graphiques


Pour effectuer un saut de ligne, <div>, <span>, <blockquote>, p, h1 à h6.
Pour centrer : CSS : text-align ;
Pour changer la police : CSS : font-style ;
Pour tracer une ligne : CSS : border ;

Balises et attributs


Je veux ....


L'esprit contenu/style


[NP] Utiliser l'exemple en ajoutant la balise <style> pour modifier l'apparence de la page. Cette présentation devrait être spectaculaire : les yeux des élèves devraient traduire une profonde jouissance intellectuelle.

Autres ressources


Lorem Ipsum : Pour copier du texte ayant une apparence de sens. Très utile pour faire des essais de mise en page.

Index des éléments HTML.

Introduction aux balises HTML

VisiBone Web designer's HTML Card Idéalement, il serait très utile de refaire un truc du même genre, en français et accompagné d'exemples, quitte à avoir plus de pages.

Du bon usage des balises sémantiques

Balises sémantiques (Excellent!)

SelfHTML (en français!)

Cours CSS (excellent!) de Jean-Claude SOHM - CERIG / EFPG