Outil de travail
Il y a, pour réaliser une page web en code HTML, de nombreuses méthodes,
mais pour débuter et comprendre ce que vous aller faire, je vous détourne
d'ores et déjà des éditeurs clé-en-main du genre WYSIWYG (What You See Is
What You Get, ce que vous voyez est ce que vous obtenez). Je vous propose
ici deux manières simples et sans coût pour réaliser vos pages, et de laisser
de côté pour un temps, du moins ceux qui ont un éditeur pour faire leur
page web, ce dernier, et de prendre l'une des deux méthodes ci-dessous.
La première
La plus traditionnelle, qui consiste à avoir en mutli-fenêtrage une fenêtre
avec votre bloc-note (Notepad) et une autre avec votre navigateur (Internet
Explorer, Netscape ou même Mozilla). Pour les deux derniers, je ne puis
garantir toutes les fonctionnalités qui seront décrites dans ce cours.
Vous écrivez vos codes dans votre Bloc-Note, vous enregistrez votre travail
dans un répertoire donné en format .html, puis vous ouvrez ce fichier HTML
dans votre navigateur préféré.
La seconde
C'est un petit programme qui, à lui seul, inclus les deux précités ci-dessus,
soit Bloc-Note et Navigateur.
Il a l'avantage de vous proposer l'insertion des balises au moyen d'icône,
ce qui vous donne à chaque "clic" la balise d'ouverture et la balise de
fermeture. Il ne vous reste plus qu'à mettre vos éléments entre ces deux
balises.
Je me permets de vous citer ce programme car il est libre de droit, c'est
ce que l'on appelle communément un Freeware.
Cet utilitaire s'appelle Script Edit, vous le trouvez chez
Script Zone, dans
sa rubrique "Logiciel". Il a de nombreux avantage, dont sa taille (1.22 Mo),
sa simplicité et il est en français.
La page HTML basique
Une page HTML est un simple fichier texte commençant par <HTML>, c'est
le début absolu de votre page, et se terminant par </HTML>, qui est
la fin absolu de votre page.
Il contient un en-tête décrivant le titre de la page ...., oui oui, le titre
de la page .... STOP !!!!! LE TITRE, avez-vous déjà vu un livre sans titre ?
un film sans titre ? une société sans titre ? non ? moi non plus, et je
trouve qu'il n'y a rien de plus laid qu'une page web sans titre, ou alors
une page web où il est écrit dans la barre de titre : "Sans Titre", qui est
souvent le texte par défaut de certain programme. Alors s'il vous plait,
il n'y pas besoin de beaucoup de créativité pour cela. C'est le seul élément
visible qui se trouve dans l'en-tête, et c'est ici qu'il apparaît, lisez,
Script Ulysses - Html :
Dans l'en-tête, on trouve également tout ce qui peut donner des indications à votre page, pour sa mise en forme, afin de ne pas répéter certaines indications sur toute la page une multitude de fois. Mais cela sera une leçon beaucoup plus "tardive", du moins en profondeur.
Donc l'en-tête est délimité par les balises <HEAD> et </HEAD>
Après l'en-tête, il y a le corps (Body), dans lequel on place le contenu de la page, c'est-à-dire tout ce que vous désirez que le visiteur doit voir.
Le corps est délimité par les balises <BODY> et </BODY>
En résumé, le minimum d'une page HTML, pour qu'elle soit opérationnelle est :
|
<HTML> <HEAD> <TITLE> Script entre Amis </TITLE> </HEAD> <BODY> Votre page html </BODY> </HTML> |
Si vous pensez faire ce cours avec votre bloc note Les normes HTML demandent de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés.
Pourtant, les navigateurs actuels reconnaissent les caractères accentués, ainsi vous pouvez entrer des caractères accentués directement sous votre éditeur de texte, mais votre page sera vraisemblablement illisible dans la plupart des pays du monde non-francophone ... par conséquent cela reste à votre libre arbitre, à savoir à qui sont destinées en majeur partie vos pages HTML.
Maintenant que vous avez vu de quoi ce compose basiquement une page, vous allez très rapidement créer votre premier document. Pour cela prenez donc ce Canevas HTML, faites un copier-coller de <html> à </html>, inclus chacun, et placez-le dans votre éditeur HTML (Notepad ou Script Edit). Sauvegardez-le en le nommant Base1.html. Vous pouvez indépendemment nommer votre fichier avec une extension .htm ou .html
L'extension .htm date de la période DOS, période où les noms de fichiers étaient limités à 8 caractères et les extensions à 3 caractères.
Et pour conclure cette partie d'introduction au HTML, nous allons réaliser encore un petit tableau. Pour ce faire, vous prenez à nouveau le Canevas HTML, que vous copier dans un nouveau document d'édition. Puis vous prenez cet autre Canevas Tableau, que vous allez insérer dans le document en cours entre <BODY> et </BODY>. Sauvegarder ce fichier en le nommant Base2.html puis exécutez-le dans votre navigateur
Voici ce que vous devez obtenir :
| Titre Colonne 1 | Titre Colonne 2 |
|---|---|
| Colonne 1 - Ligne 1 | Colonne 2 - Ligne 1 |
| Colonne 1 - Ligne 2 | Colonne 2 - Ligne 2 |
Pour conclure ce cours, je vous suggère de faire en petit travail, et de répondre à trois questions :
- Exercice N° 1 : En prenant les deux Canevas, insérez les dans votre éditeur (le but étant de placer la base, puis le Tableau entre les bonnes balises. Et non pas d'essayer de comprendre le Tableau). Faites un essai pour visualiser le résultat, et si vous en êtes content, sauvegarder le fichier, et envoyez-le moi, en fichier joint. Mais rappelez-vous : vous avez placé votre premier Canevas, où devez-vous logiquement placé le second ? ne répondez pas, faites-le
- Exercice N° 2 : Quelle est la seule partie de l'en-tête qui se voit sur une page ?
- Exercice N° 3 : Quelles sont les trois balises "indispensables" d'une page web (ou d'un mail).