NOTES DE COURS 3
Utilisation d'un éditeur HTML
- Un éditeur de code HTML est un logiciel, comme un traitement de texte, qui permet de faire la mise en page plus facilement
- Quoique dans la plupart des cas l'éditeur crée le code pour les fonctions qu'on veut exécuter, il reste toujours une certaine quantité de mise au point que le programmeur doit faire
- Notez: dans ce cours, même si vous utilisez un éditeur, vous devez apprendre le code! Lors des devoirs et des examens, vous devez connaître la syntaxe de toutes les commandes que nous étudions en classe; par exemple, si vous voulez tracer une ligne horizontale avec l'éditeur, vous cliquez sur le bouton HR et le tag est inséré dans le code; cependant, en examen, vous devez pouvoir écrire le tag <HR> avec ses paramètres: align, size et width
- Pour trouver un éditeur approprié à vos besoins vous pouvez commencer par une recherche Internet - vous devez maîtriser au moins un des engins de recherche communs:
- Vous pouvez aussi aller directement sur un des sites de Shareware et chercher un "HTML editor" - en voici des exemples:
- Shareware.com
- Jumbo
- Tucows (Ce site est précieux! Vous y trouverez de tout!)
- Si vous n'avez pas d'autres préférences, en voici deux que je vous recommande d'évaluer:
- WebExpert a l'avantage d'être en français.
- EditPlus a l'avantage d'être compact.
- Arachnophilia est un excellent éditeur et gratuit en plus!
Le codage en HTML
- Mettre des commentaires dans le code pour donner des explications au programmeurs qui suivront - on utilise le tag <!-- commentaire --> - le commentaire n'est pas affiché sur la page, il n'est visible que dans le code
- Laisser des lignes blanches pour faciliter la lecture
- Utiliser le Tab pour décaler le code et le rendre plus lisible
Création de listes
- Une liste à puces (Unordered List)
- Chaque item identifié par une puce (bullet)
- Puce différente pour chaque niveau
- Chaque liste commence par un <UL>
- Il doit y avoir un </UL> pour fermer la liste
- Voici le code qui a créé la liste qui précède:
Fig. 3-1
- Une liste numérotée (Ordered List)
- J'ai maintenant un numéro pour chaque item de la liste
- J'utilise le tag <OL> pour commencer la liste
- Remarquez que le code est presque le même - comme dans la <UL>, chaque item de la liste est identifié par un <LI> (List Item)
Fig. 3-2
- Une liste de glossaire (Definition List)
- La liste est identifiée par le <DL>
- Les items sans retrait sont identifiés par le <DT>
- Les items en retrait portent le tag <DD>
- Il peut y avoir plusieurs <DD> sous un <DT>
- Contrairement aux autres listes, celle-ci exige les tags de fermeture, </DT> et </DD>
Fig. 3-3
Couleur et grosseur du texte
- Le tag <FONT> .... </FONT> est utilisé pour mettre le texte en couleur ou pour changer la grosseur des lettres
- Ce texte est de couleur #FF9900 et de grosseur 7
- Pour obtenir ce résultat j'ai écrit:
<FONT COLOR="#FF9900" SIZE=7>Ce texte est de couleur #FF9900 et de grosseur 7</FONT>
- Les valeurs pour le paramètre SIZE sont 1 à 7 et la couleur est représentée par un nombre hexadécimal de 6 chiffres - on obtient la valeur des couleur en consultant une charte de couleurs qu'on peut obtenir sur le Web - tous les éditeurs HTML ont une charte de couleurs incluse
Centrage
- Dans les exemples de code plus haut, vous remarquerez que je n'ai pas utilisé <CENTER> ... </CENTER> pour centrer les images - comme mentionné plus tôt, le tag <CENTER> est un tag propre à Netscape et il se peut qu'il ne fonctionne pas avec un autre fureteur
- Le tag <DIV> ... </DIV> identifie une Division dans le code, une partie du code qu'on identifie d'une façon particulière - il sera utilisé plus tard dans les feuilles de style - pour le moment on peut l'utiliser avec ALIGN=center pour centrer un élément du texte
- Pour attirer l'attention sur un point important vous pouvez le faire clignoter en l'entourant de <BLINK> ... </BLINK>
[ PAGE D'ACCUEIL ] 
[ PRÉCÉDENTE ] 
[ SUIVANTE ]
