• 

  POMPAGE – Emails HTML – Dompter la bête

  Tags du favori : email cebdev

• 

  Squidfingers / Patterns

  Tags du favori : motif outils design

• 

  Vérification du contraste des couleurs – Outils – Britoweb

  Tags du favori : outils contraste couleur accessibilité

• 

  A List Apart: Articles: A More Useful 404

  Tags du favori : 404 cebdev

• 

  Tous les gabarits — Gabarits HTML-CSS

  Gabarits sur Alsacréations : « Vous pouvez utiliser ces gabarits comme base de vos mises en pages, ou tout simplement étudier leur construction pour progresser en HTML et CSS.  »

  Tags du favori : gabarit css xhtml html

Synchronisation automatique et quotidienne via Blogmarks, outil de gestion de favoris en ligne.

• 

  HTML Character Entities Cheat Sheet – Cheat Sheets – Added Bytes

  Antisèche à imprimer (ou non) pour les entités caractères

  Tags du favori : cheat sheet html caractères spéciaux

• 

  Microformats Cheat Sheet – Cheat Sheets – Added Bytes

  Antisèche à imprimer (ou non) pour les microformats

  Tags du favori : cheat sheet microformat

• 

  HTML Cheat Sheet – Cheat Sheets – Added Bytes

  Antisèche à imprimer (ou non) pour le HTML

  Tags du favori : cheat sheet html

• 

  CSS Cheat Sheet (V2) – Cheat Sheets – Added Bytes

  Antisèche à imprimer (ou non) pour les feuilles de style

  Tags du favori : cheat sheet css

• 

  Regular Expressions Cheat Sheet (V2) – Cheat Sheets – Added Bytes

  Antisèche à imprimer (ou non) pour les expressions régulières

  Tags du favori : cheat sheet expression régulière

Synchronisation automatique et quotidienne via Blogmarks, outil de gestion de favoris en ligne.

• 

  CSS — Structurer, documenter et maintenir

  Tags du favori : css bonnes pratiques guide

• 

  Appel à contribution «Guide stylistique pour HTML et CSS»

  Projet pour la création d’un guide stylistique HTML et CSS. Un cahier des charges de bonnes pratiques d’intégration.

  Tags du favori : cahier des chages guide xhtml css bonnes pratiques

Synchronisation automatique et quotidienne via Blogmarks, outil de gestion de favoris en ligne.

Pour voir le code d’une page HTML :

• depuis Internet Explorer :

  • clic droit > « Afficher la source »

  • ou Menu > « Affichage » > « Source »

• depuis Firefox :

  • Ctrl + U

  • ou clic droit > « Code source de la page »

  • ou Menu > « Affichage » > « Code source de la page »

  Sur les deux navigateurs, utiliser ensuite Ctrl + F pour faire une recherche précise.

Initiation au HTML – Plan de l’article complet

• Initiation au HTML (1/5)
• HTML et Internet (Initiation au HTML 2/5)
• Le langage HTML (Initiation au HTML 3/5)
• Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
• Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
• Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
• Le W3C (Initiation au HTML – Annexe III)
• Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
• La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

Initiation au HTML – Plan de l’article complet

• Initiation au HTML (1/5)
• HTML et Internet (Initiation au HTML 2/5)
• Le langage HTML (Initiation au HTML 3/5)
• Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
• Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
• Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
• Le W3C (Initiation au HTML – Annexe III)
• Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
• La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

La séparation des différents éléments

Une page web est un ensemble de « couches » d’éléments qui, combinés ensemble, font la totalité de la page : texte, design, fonctionnalités, interactivité, etc.
Chacun de ses aspects est traité indépendamment les uns des autres par différents langages.

La structure de l’information est gérée par le HTML.

La mise en forme (couleurs, typographies, emplacements des éléments, etc.) est traitée par les feuilles de style (CSS).

Certains comportements destinés à amener une « couche de confort » (ouverture dans une nouvelle fenêtre, apparition/disparition de texte, etc) sont traiter par le Javascript.

Enfin, dans le cas de traitement de données importantes (simulation en ligne, formulaire de demande, etc.), on utilise un langage de développement ; le PHP par exemple.

Le rôle du HTML : structurer le contenu

Le langage HTML est un langage de structuration : cela veut dire qu’il indique pour chaque information donnée dans la page, le type d’information dont il s’agit : paragraphe, lien, image, citation, adresse, etc.

Le code

Les outils

Les outils du développeur sont :

• un éditeur. Cela peut être un simple éditeur de texte ou un logiciel type « WYSIWYG » : What You See Is What You Get.
• dans l’idéal, des plateformes de test. Pour pouvoir tester ses pages dans différentes configuration
• dans la plupart des cas, un logiciel FTP. Pour envoyer les fichiers créés à disposition sur le serveur, pour les mettre « en ligne ».

Un langage de balises

Le HTML est composé avec des balises. Les balises sont des éléments encadrant le contenu. Elles indiquent le type d’information donnée (titre, paragraphe, image, liste, etc). Elles permettent de structurer la page et d’indiquer le type d’information.

Ex :
<p>Cette balise indique un paragraphe.&lt/p>

Ce qui donne, dans la page :
Cette balise indique un paragraphe.

Une balise HTML est un élément de la grammaire HTML (de la « langue » HTML). La balise marche par paire : une balise ouvrante, une balise fermante. Entre les deux balises, se place le contenu.

Les attributs

Une balise HTML indique donc le type d’information qu’elle délivre. La balise peut ensuite être « paramétrée » par des éléments supplémentaires : les attributs.

Par exemple, pour indiquer un lien, on utilise la balise <a>. Mais signaler que le texte qui est encapsuler dans la balise <a> est un lien ne suffit pas. D’autres renseignements sont nécéssaires, comme par exemple la cible du lien. On utilise alors les attributs de la balises : « href » pour la destination du lien, « title » pour le titre du lien (info-bulle).

Ex :

&lt;a href= »http://www.nissone.com/ » title= »Conception de sites web »&gt;Nissone.com&lt;/a&gt;

Ce qui donne dans la page :

Nissone.com

Initiation au HTML – Plan de l’article complet

• Initiation au HTML (1/5)
• HTML et Internet (Initiation au HTML 2/5)
• Le langage HTML (Initiation au HTML 3/5)
• Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
• Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
• Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
• Le W3C (Initiation au HTML – Annexe III)
• Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
• La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

Les pages dynamiques sont des pages qui se fabriquent en fonction d’un élément extérieur (une demande, l’heure, le nombre de visiteurs, etc). Le PHP, par exemple, est un langage dynamique qui permet de créer dynamiquement du code HTML.

Imaginons, par exemple, le site d’un éditeur. Une page permet de voir la liste des auteurs en fonction de la première lettre de leur nom.
Si le développeur utilise un langage statique, il doit créer 26 pages, pour les 26 lettres de l’alphabet.
Si le langage utilisé est dynamique, le développeur crée une seule page. Cette page se construit alors dynamiquement en adoptant le comportement suivant :
Si la lettre demandée est « A », rechercher le premier auteur dont le nom commence par « A » dans une liste indiquée (une base de données, par exemple) et l’afficher ; puis, rechercher le second auteur dont le nom commence par « A » et l’afficher. Et ainsi de suite jusqu’à ce qu’il n’y en ait plus.

Initiation au HTML – Plan de l’article complet

• Initiation au HTML (1/5)
• HTML et Internet (Initiation au HTML 2/5)
• Le langage HTML (Initiation au HTML 3/5)
• Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
• Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
• Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
• Le W3C (Initiation au HTML – Annexe III)
• Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
• La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

Le but de ce document est de donner quelques clés de compréhension aux différents profil qui gravitent autour de la création de site mais qui ne sont pas intégrateurs. Il s’agit d’élargir son autonomie face à la lecture d’une page web.

Une première partie rappelle les bases : HTML et Internet. Le Langage HTML est ensuite concrètement abordé. Les premiers pas de la création d’une page HTML sont détaillés dans une troisième partie. Enfin, quelques pistes sont données pour permettre d’Exploiter le code HTML.

Chaque partie, ainsi que les annexes, feront l’objet d’un article posté ici-même dans les semaines à venir.

J’espère vivement pouvoir rendre service ainsi aux curieux qui s’intéressent à la création techniques de pages web sans avoir de compétences techniques. Si cela peut les aider à se sentir plus à l’aise dans des conversations avec les intégrateurs, mon pari sera gagné !

(PS : Merci à Jep pour sa relecture.)

Initiation au HTML – Plan de l’article complet

• Initiation au HTML (1/5)
• HTML et Internet (Initiation au HTML 2/5)
• Pages statiques et pages dynamiques (Initiation au HTML – Annexe I)
• Le langage HTML (Initiation au HTML 3/5)
• Quelle est la différence entre HTML et XHTML ? (Initiation au HTLM – Annexe II)
• Construction d’une page HTML : les éléments récurrents (Initiation au HTML 4/5)
• Le W3C (Initiation au HTML – Annexe III)
• Exploiter le code HTML : retrouver des informations utiles (Initiation au HTML 5/5)
• La barre « Web developper » de Firefox (Initiation au HTML – Annexe IV)

• Balise très importante pour le référencement
• Apparaît dans les résultats des moteurs de recherche
• Titre différent sur chaque page et adapté au contenu : pour varier les mots-clé, pour que toutes les pages ne paraissent pas identiques dans un résultat de recherche.
• Les mots-clé les plus importants au début
• 60 carctères / une 10^aine de mots environ