1.1.1 Fichier (X)HTML

Un fichier (X)HTML renferme un texte dans lequel figure ce qui doit être porté sur l'écran.

1.1.2 Séparation entre contenu et forme

La règle d'or la plus importane de la programmation Internet moderne stipule:

Il faut séparer le CONTENU (ce qui sera représenté) de la FORME (comment ce sera représenté).

Cette séparation peut se faire à l'intérieur du fichier (X)HTML même ou encore plus radicalement en séparant le fichier (X)HTML qui porte le contenu de tout ce qui concerne la mise en forme et qu'on confie à un fichier à part appelé fichier CSS.

1.1.3 Fichiers (X)HTML et CSS

Cliquez sur la touche droite de votre souris, dans la liste qui se présente, on vous propose de voir le texte source de la présente page. Ouvrez-le: C'est le fichier XHTML. Regardez ce texte. Vous y trouverez entre beaucoup d'autres choses le texte que vous voyez sur cet écran. Cherchez dans le fichier un nom suivi des lettres .css . C'est l' URI (le nom) du fichier CSS annexé (et que vous ne voyez pas, heureusement, cela augmenterait encore la confusion!) qui renferme tous les renseignements sur la mise en forme (représentation) de la présente page (Couleurs, taille des caractères etc..), les lettres .css constituent son extension .



1.1.4 Éditeur

Dans l'exemple précédent vous avez vu le texte (code) XHTML du présent fichier dans une fenêtre spéciale. Regardez l'entête de cette fenêtre. Vous y voyez

  • l'URI du présent fichier. Il a l'extension .html
  • Le nom du programme (probablement Notepad ), qui vous permet de voir (et éventuellement de modifier) ce texte. Ce programme est un éditeur.

Un éditeur permet de voir et transformer le code-source des fichiers html.

Dans les →Utilitaires vous trouverez des éditeurs plus performants (mais aussi plus compliqués) que Notepad. Pour transporter un fichier html d'un éditeur dans un autre,

  • on marque le texte entièrement dans le premier éditeur
  • on appuie simultanément sur les touches CTRL (ou STRG ) et C
  • on ouvre une page vide dans le deuxième éditeur
  • on appuie simultanément sur les touches CTRL (ou STRG) et V

1.1.5 Disque dur

Les éditeurs permettent d'enregistrer les fichiers HTML ou CSS sur votre milieu de sauvegarde: le disque dur . Si vous faites un enregistrement, prenez garde que votre fichier aie bien l'extension .html (ou .css ou l'extension spécifique du type de fichier sur lequel vous travaillez) et organisez votre répertoire de manière que vous le retrouverez facilement.

Un disque dur permet de sauvegarder des fichiers (p.ex HTML ou CSS).

1.1.6 Navigateur

Un navigateur (browser) est un programme permettant de voir l'apparence de votre fichier XHTML sur l'écran.

Pour cela, il faut ouvrir le fichier dans le navigateur. Les navigateurs les plus utilisés sont Internet Explorer (I.E.) (encore le plus utilisé) , Firefox et Google Chrome (meilleurs et plus rapides que I.E.) Opera (voir →Utilitaires )

Certains éditeurs possèdent un navigateur incorporé. Ne confondez pas ce dernier avec I.E. ou Firefox. Il est toujours incomplet et moins performant.

1.1.7 Le contenu le plus simple: du texte

Au début, les ordinateurs reproduisaient uniquement du texte. Comme il est impossible de faire figurer sur un clavier tous les signes qu'on désire, on a recours à des →signes spéciaux dont vous trouverez des détails dans les →références.

1.1.8. Exercices

  1. Chargez le code de la présente page dans votre éditeur, enregistrez ce code sur votre disque dur, fermez la connexion Internet et regardez la page dans votre navigateur. Vous verrez seulement le texte, mais pas les couleurs et le formatage (En effet, le fichier CSS annexé manque sur votre disque dur). Essayez de faire quelques transformations simples sur le texte dans l'éditeur pour personnaliser cette page, par exemple en indiquant votre nom, la date d'aujourd'hui, etc.., enregistrez sur votre disque dur et regardez dans votre navigateur.