Créer sa page perso : FTP et erreurs fréquemment commises /03

La preuve par 9 (mis à jour 09.2003)

Vous venez de concevoir " la structure simplifiée de votre Site " et maintenant vous avez une magnifique feuille remplie de petits carrés contenant des repères, avec en tête votre homepage et plusieurs niveaux, le tout formant une maquette qui devra plus tard être complétée par des liaisons appelées liens hypertextes

Mais vous allez commencer les travaux pratiques en réalisant trois expériences, qui vont vous faire comprendre rapidement la fonction du code HTML.

1- Premier essai, vous ouvrez un logiciel de traitement de texte, comme Wordpad pour Windows ou Teachtext (SimpleText) pour Macintosh par exemple et vous tapez la phrase suivante :

Ceci est ma première expérience de programmation
je rentre enfin dans le vif du sujet, et j'en suis heureux

signé: Moi

vous l'enregistrez avec le nom de fichier essai1.htm et après avoir ouvert votre navigateur en local, vous y glissez/posez le fichier pour constater qu'il ne se passe rien ?

j'en étais sûr, ça marche jamais au premier coup...

2- Deuxième essai, vous ouvrez maintenant une nouvelle page blanche pour y taper ce texte:

<HTML>
<HEAD>
<TITLE>essai 2.htm</TITLE>
</HEAD
<BODY>
Ceci est ma deuxième expérience de programmation
je rentre enfin dans le vif du sujet, et j'en suis heureux

signé: Moi
</BODY>
</HTML>

enregistrez cette fois essai2.htm et visualisez, ce qui donne

ceci est ma deuxi*me exp*rience de programmation je rentre enfin dans le vif du sujet, et j'en suis heureux sign*:Moi

c'est déjà mieux, mais curieux la mise en page n'est pas respectée, on dit que le texte est imprimé au kilomètre, et de plus ses voyelles accentuées sont remplacées par un signe bizarre.

3- Troisième essai, que vous réalisez enfin en recopiant à l'identique le texte suivant :

<HTML>
<HEAD>
<TITLE>essai 3.htm</TITLE>
</HEAD>
<BODY>
Ceci est ma troisième expérience de programmation 
je rentre enfin dans le vif du sujet, et j'en suis heureux
signé: Moi
</BODY>
</HTML>

enregistrez essai3.htm, visualisez et voici le résultat,

Ceci est ma troisième expérience de programmation
je rentre enfin dans le vif du sujet, et j'en suis heureux

signé: Moi

enfin ça marche correctement, et vous pouvez vérifier que le texte source (texte codé) contient des tags qui dans le deuxième essai permettaient de visualiser le fichier, mais avec des signes cabalistiques.
Ensuite vous avez inséré des tags supplémentaires grâce auxquels la présentation du texte a été conservée, avec les retours à la ligne , et le retour à la ligne y compris un interligne , sans oublier le codage des caractères accentués qui n'existent pas dans la langue anglaise. Faut pas oublier que c'est pas nous qui avons inventé l'Internet et rien ne poussait alors à s'intéresser aux accents. Plus loin vous apprendrez à réaliser une mise en page parfaite, l'alignement "justifié" étant alors employé.

Ci-après retrouvez les tags de base constituant l'armature de tout fichier, avec les tagsdouverture et fermeture de page en rouge. Entre les tags HEAD vous pourrez porter certaines informations particulières. Par exemple ici le titre choisi pour le fichier qui se trouve mentionné entre les tags TITLE et va apparaître dans la " barre de titre " de votre navigateur, ce qui permettra par exemple à un visiteur de noter cette référence dans son Bookmark ( signets, favoris ) et de pouvoir y accéder directement la prochaine fois. Ensuite entre les tags BODY en vert, le contenu du fichier. Les tags peuvent être imprimés en majuscules ou minuscules mais un conseil qui vaut de l'or, tapez toujours, tous vos tags en minuscules :

<HTML>
<HEAD>

TITLE> ....... le titre ....... </TITLE>

</HEAD>

<BODY> .... le contenu du document .....</BODY>

</HTML>

-- Composition de base d'une page --

Avant de poursuivre, je vous propose de vous entraîner, en ajoutant lors de vos essais les tags ,et dont la signification est donnée dans le " Lexique ". (I = Italique et B = corps des caractères en gras)

Retour images : Ne faites pas attention à moi, je sers pour un test.

Sommaire Page perso ... @ ... Premiers liens hypertextes

- Source : ce mot désigne la partie constituée dans notre cas de code HTML et destinée au navigateur qui pourra ainsi restituer le texte correctement. Un "Programme objet" (object program) est chargé de traduire en langage machine un programme non utilisable en l'état, et qui est alors appelé "Programme source". Dans Netscape Navigator. vous déroulez le menu "Affichage" et vous sélectionnez "source du document" et dans Explorer Internet sélectionnez "source". retour au texte