Code : HTML et CSS

Articles de cette rubrique

• Préparation au cours : logiciels utilisés

  Dans le cours Arts numérique 1, on code à la main. Si on travaille avec une structure Xhtml respectueuse des normes, c’est aussi rapide qu’avec un éditeur Wysiwyg comme Dreamweaver.

• 1) Introduction : partager des contenus

  L’idée de partager des contenus de type texte est assez vieille. Douglas C. Engelbart (pionnier absolu de la notion d’interface, inventeur de la souris) en avait déjà une version dans les années 60, à (...)

• 2) Le html

  Le html est un langage de description (et pas un langage de programmation), ce qui signifie qu’il décrit un contenu à un logiciel (le navigateur) chargé de l’afficher. Une page web un simple fichier (...)

• 3) Principales balises en html

  Il existe beaucoup de balise html, mais on peut faire ici une liste courte des principales balises employées. En-tête de la page meta : balise permettant de déclarer au navigateur et aux moteurs de (...)

• Exercice : Structuration sémantique d’un texte brut

  Il s’agit ici de prendre un document en texte brut et de le baliser, c’est à dire identifier les différentes parties et placer des balises sémantiques. Placez ce code dans un code complet html, avec (...)

• 4) Les Cascading style sheets

  Nous avons précédemment créé une page et l’avons nourrie de contenus, encapsulés dans des balises qui permettent qui permettent de comprendre la logique du document. Mais le résultat lorsque l’on (...)

• 5) Principaux attributs employés en CSS

  Consultez régulièrement la documentation complète des déclarations css (sur yoyodesign), mais on peut établir ici un liste courte des principales déclarations css : font-family permet de déterminer une (...)

• 6) ID et classes

  Nous avons jusqu’à présent modifié le comportement visuels de certains tags (ou balises) à l’aide des css. Mais on peut être plus fin dans la manière de modifier ces comportement, grâce aux classes et (...)

• 7) Elements inline et block

  Tous les éléments présents dans le body, d’une page ont un comportement "en ligne" ou "bloc". Cette différence est déterminante dans l’écriture de votre code : les éléments inline et bloc n’ont pas le (...)

• Exercice : Un site de trois pages

  3 pages web liées avec des contenus différents. Il s’agit de les rendre les plus différentes possibles, et de jouer avec le positionnement et toutes les déclarations css dont vous disposez. Il y a une (...)

• Exercice : 3 positionnements différents

  Cet exercice est destiné à tester le positionnement css. 3 positionnements différents à tester sur 3 pages au code identique. Le dossier zippé joint contient 3 pages, 4 css, un dossier d’image et un (...)

• Extra : Pense-bête html-css-javascript

  Les codes qu’on oublie toujours en tant que jeune codeur. Code pour inclure une css distante, généralement placé dans le head de la page <link href="macss.css" rel="stylesheet" (...)

• Extra : Petit matériel graphique de test

  Ici on trouvera en pièce jointe quelques dossiers zippés contenant des icônes, des motifs de fond (patterns) et des cartouches pour créer des blocs.