|
(01) Un guide pour vos débuts... |
  copyleftSee You Why ? |
Les documents HTML sont des fichiers écrits sous forme de texte simple, sans mise en forme (on les appelle aussi document ASCII ou document "texte") ; ces fichiers peuvent être écrits à l'aide de simples éditeurs de texte ( p.ex., Emacs ou vi sur des machines UNIX ; SimpleText sur un Macintosh ; Notepad ou Bloc-Note sous Windows).
Vous pouvez aussi employer un "traitement de texte" si et seulement si vous n'oubliez pas de "sauver" votre document "sous" un format "texte avec sauts de lignes".
Certains éditeurs WYSIWYG sont également disponibles sur le marché (p.ex. : Claris Home Page or Adobe PageMill, tous deux fonctionnant sous Windows ou sous Macintosh ; Frontpage écrit par Microsoft, HotDog et autre DreamWeaver).
Commerciaux (payant) ou libres (licence GPL, gratuite), Wysiwyg ou non, il peut être intéressant d'en essayer l'un ou l'autre, mais nous vous conseillons d'apprendre d'abord les principes de base des langages HTML et HTML5 et l'usage de ses "tags" ou "balises".
WYSIWYG n'est rien d'autre qu'un acronyme pour "What You See Is What You Get" ou, pour les non anglophones "ce que tu vois est ce que tu auras" ; cela signifie que l'on peut dessiner ses documents HTML de manière visuelle, comme si l'on employait un traitement de texte (qui, lui, fera la traduction de ce que vous écrivez en HTML ou HTML5), plutôt que d'écrire en langage HTML ou HTML5, en employant les différents "tags" et en devant "imaginer" ce que cela donnera lorsqu'un "browser" lira la page.
Nous les appelerons ci-après des logiciels graphiques, par opposition aux éditeurs textuels.
Il nous semble plus important de connaître les bases du langage HTML et HTML5 et de pouvoir l'utiliser avant de commencer à utiliser les éditeurs WYSIWYG... n'est pas fiscaliste celui qui peut employer un logiciel qui calcule les impôts, n'est pas prof celui qui peut lire un livre devant ses élèves, etc.
Cela permet de pouvoir ajouter certaines particularités que votre éditeur ne peut gérer ou éviter des pages avec des informations redondantes ;-))) rendant votre code très lourd...
Graphiques et payants :
Dreamweaver (Mac, Windows) - Disponible en plusieurs langues
Sans doute le plus complet et le plus puissant de cette catégorie. Excellente intégration avec les autres produits de Macromedia, dont Flash. Nombreuses extensions disponibles. Mac et Windows seulement. Exige un environnement informatique passablement musclé. Génère du code relativement valide et propre, si bien configuré. La version MX 2004 rend passablement correctement les feuilles de styles (mais pas complètement). Utilisation assez complexe. Version démo 30 jours disponible.
Une version 2, assez ancienne est disponible à usage d'apprentissage non commercial (disponible ici).
Adobe GoLive (Mac, Windows) - Disponible en plusieurs langues
Très complet et très puissant. Peu d'extension, mais excellente intégration avec les autres produits d'Adobe, dont Photoshop, Illustrator, In Design et Acrobat de même que les objets multimédia tels les séquences vidéos, sonores et les animations. Ne rend pas toujours correctement les feuilles de styles. Génère du code souvent invalide et malpropre, notamment pour le XHTML. Mac et Windows seulement. Utilisation assez complexe.
Graphiques et libres (ou gratuits)
Nvu (Mac, Linux, Windows) - Logiciel libre - Multilingue
Multiplateforme. Intègre en plus un excellent éditeur graphique de feuilles de styles, un gestionnaire de site, de même qu'un outil de "nettoyage" du code HTML et de validation. Le copier/coller d'un texte en provenance d'autres logiciels, dont Word, est particulièrement bien géré. Le tout, compatible XHTML. Un projet prometteur qui pourrait rivaliser avec Dreamweaver et GoLive. À suivre...
Mais qui n'a pas été suivi... la dernière version officielle de NVU date de 2005... Cela aurait été une grande perte si le logiciel n'était pas libre (et encore bien coté aujourd'hui), mais le code a été repris par une autre équipe, et le logiciel reprend vie sous le nom de Kompozer.
Nvu est une solution complète de création de sites Web capable de rivaliser avec les plus grands (Dreamweaver, FrontPage). L'application regroupe un gestionnaire de fichiers Web et un éditeur de page graphique, du type WYSIWYG. Le gestionnaire de sites permet de publier rapidement la dernière version de votre site en quelques clics ! La plupart des fonctionnalités permettant de créer facilement des pages sophistiquées sont présentes, comme l'intégration de tableaux, de formulaires, d'images, le formatage du texte, gestion du CSS, etc.
Pour une documentation en français, voir :
Framasoft : Tutoriel NVU
Conclusion : aucun des éditeurs graphiques ne répond, pour l'instant, complètement à nos exigences. Seul Dreamweaver (et seulement à compter de la version MX 2004) s'y rapproche. Nvu semble prometteur, mais encore trop buggé. Il y a aussi NVU qui existe en version portable (sur clé usb).
Dreamweaver - version 2 (Mac, Windows) - Disponible en plusieurs langues
Un des ancêtres de la version actuelle du Dreamweaver. Pour son âge, assez complet et puissant. Excellente version pour apprendre. Cette version est librement accessible ici à tout utilisateur enseignant et/ou enseigné. Génère du code relativement valide et propre, si bien configuré... mais devenu inutilisable sous Windows Vista, pour redevenir utilisable sous Windows 7 et suivants.
Evrsoft First Page - 
version 2 - Un éditeur HTML avec le support complet de HTML, XHTML, PHP, ASP, Cold Fusion, Javascript, CSS, SSI et Perl. Permet la prévisualisation dans les différents navigateurs, un éditeur de tag, autocomplétion des balises. Outils de nettoyage de code. Éditeur d'images map. Nombreux scripts inclus. Client FTP inclus, etc.
TOWeb - (15 Mo, version 5.23) - 
La création d'un site web n'est plus l'apanage particulier des professionnels. Désormais, même un profane a la possibilité de concevoir son propre site personnel, associatif, professionnel ou votre site e-Commerce.
TOWeb permet de monter un seul site web complet et limité à 10 Mo avec sa version Standard gratuite, sans aucune connaissance dans la programmation ou dans la retouche d'images (pour info, le site CUY.BE occupait 30506 Mo en septembre 2015). Tout ce dont vous devez faire est de saisir votre texte, d'ajouter des images et de laisser TOWeb se charger de tout.
TOWeb comprend un correcteur orthographique multilingue. Pour vos photos, il comprend un outil de retouches d'images et un outil de création et de publication d'albums photo.
La version gratuite est limitée en taille et en option. Mais pour 49 €, on a l'espace illimité et les options complementaires (jusqu'à 199 €). C'est sur que pour ceux qui veulent faire des super sites web de la mort qui tuent c'est pas la peine ! Pour eux il y a Dreamweaver, mais pour les novices (et les moins novices, comme moi, qui ne veulent pas trop se prendre la tête) TOWeb standard suffit largement !
IziSpot - (22,9 Mo, version 4.60 aout 2014) - 
Entièrement gratuit, IziSpot est un logiciel qui vous permettra de créer des sites Internet de manière simple et intuitive. Ce programme est rapide à maîtriser, et possède de nombreuses fonctionnalités telles qu'un éditeur de chartes graphiques, une bibliothèques de chartes et d´animations flash, un module de gestion de catalogues de produits, ou encore la création de formulaires, de galeries photos ou de pages de téléchargement. Bref, IziSpot offre à ses utilisateurs, spécialistes ou novices dans la création de sites web, la possibilité de créer gratuitement un site de qualité en un temps record.
KompoZer - 
Basé sur Nvu, projet resté bloqué à la mouture 1.0 depuis le mois de juin 2005, KompoZer est un éditeur de pages Web gratuit, opensource et disponible en version française. Bien qu'étant un successeur non officiel de Vnu, il est néanmoins recommandé, du fait qu'il apporte de nombreuses corrections de bogues et quelques améliorations.
Il est conçu pour être extrêmement facile à utiliser, le rendant idéal pour les utilisateurs d'ordinateurs non-techniques qui souhaitent créer un site web d'aspect professionnel attrayant sans avoir besoin de connaître le langage HTML ou le codage Web.
SeaMonkey 2.30 30 MB oct 2014 - 
SeaMonkey est une suite de logiciels comprenant un navigateur Internet, un client de messagerie électronique, un éditeur HTML et un client IRC. Pour ceux et celles qui ne connaissent pas SeaMonkey, il s'agit d'un projet initié en 1998 par la Fondation Mozilla. Cette dernière s'était alors lancée dans le développement de Mozilla Suite, une suite d'applications intégrant un navigateur Internet, un client de messagerie électronique, un éditeur HTML et un client IRC. Son développement fût par la suite abandonné, au profit de celui d'autres applications indépendantes, comme le célèbre Firefox et son proche cousin Thunderbird. Depuis, quelques passionnés issus de la communauté opensource ont ravivé la flamme et continuent d'animer le projet répondant désormais au nom de SeaMonkey. (existe en version française, il faut chercher un peu)
Scite disponible sous Linux/Windows - en anglais, paramétrable pour d'autres langues
Il permet la colorisation syntaxique pour html/php/java/c/python etc. Un must !
Et en plus c'est un logiciel libre, lui aussi.
Les éditeurs textuels
Ce sont ceux en général qui offrent la plus grande souplesse, la meilleure conformité aux normes et standards et la grande productivité et rapidité pour constuire rapidement un site web de qualité, une fois le codage (X)HTML et CSS bien maîtrisé.
Textuels et commerciaux
BBedit (Mac) - Anglais seulement
L'un des meileurs et des plus puissants éditeur HTML textuel, toute plateforme confondue. Définitement le choix de très nombreux développeurs de sites web. Génère du code HTML, XHTML et CSS très propre et toujours valide, de nombreux assistants, palettes et raccourcis facilitant la production et l'édition de pages web. Fenêtre de prévisualisation en temps réel. Ouverture et enregistrement direct d'un fichier sur un serveur distant via FTP. Très spartiate à prime abord, l'interface s'avère rapidement très convivial et puissant. Version démo 30 jours disponible.
Textuels et libres (ou gratuits)
Borak HTML (Mac, Linux, Windows) - Logiciel libre - Français
Ultra simple et grande souplesse (via une librairie de codes paramétrables). Produit du code propre et valide. Enregistrement direct sur un serveur distant via FTP. Éditeur de CSS. Pas de coloration du code. Excellent outil d'apprentissage. Une version pour SPIP avec éditeur de boucles est aussi disponible : Spip Squelette .
NoteTab Light (Windows) - Gratuit - Anglais seulement
Interface léger et simple. Nombreuses librairies disponibles (à ajouter en plus) HTML, XHTML, CSS. Génère du code propre et valide. Installatioin de base facile, mais pour une installation dans un contexte de production professionnelle, il faut installer quelques librairies supplémentaires. Utilisation facile et agréable.
NotePad++ Windows - Gratuit - en Français ou autres langues
Mon préféré pour écrire en HTML, en Javascript ou en PHP...
HTML-Kit (Windows) - Gratuit - Disponible en plusieurs langues
Très complet... peut-être trop. Interface touffu. Nombreuses extensions. Nombreux assistants. Génère du code propre et valide. Installation relativement facile. Utilisation parfois déroutante, pas toujours facile de s'y retrouver. Probablement qu'avec l'habitude... Documentation en français disponible... et il y a pleins de plugins pour gérer plus efficacement le php et les css...
Weaverslave
Gratos, Coloration syntaxique pour plusieurs langages, etc.
Si vous avez accès à un serveur, que ce soit à l'école, sur votre lieu de travail ou chez vous, prenez contact avec votre "webmaster" (la personne qui tient votre serveur à jour) pour voir s'il est possible de placer vos pages sur le serveur (local) ou sur le WEB.
À défaut, vous devrez probablement demander à votre "FAI" ou "provider" (la société qui vous donne l'accès à Internet [pour les Belges, nous ne citerons que Skynet, Télé2 ou Proximus]) qui, selon les cas, vous ouvrira (gratuitement ou non) quelques pages (place) sur le réseau.
Contactez-nous (adresse : cuy(dot)w(at)skynet(dot)be ) [remplacer (dot) par un point et (at) par @], nous pouvons vous offrir ce service.
Quelques notions de "serveur", "hébergeur" et langage "ftp" vous seraient utiles... Mais c'est un autre domaine ;o)
Un élément est une composante fondamentale de la structure générale du texte qui forme la traduction HTML de votre page. Certains de ces éléments peuvent être :
| 1re ligne, 1re colonne | 1re ligne, 2e colonne |
| 2e ligne, 1re colonne | 2e ligne, 2e colonne |
texte fait partie du 4e point...Songez-y dans ce sens :
vous employez des tags ou balises HTML pour marquer des "éléments" de votre fichier texte, pour que le browser (=navigateur) s'y retrouve ;
ces éléments peuvent être aussi divers que du texte, un paragraphe, une musique de fond, une partie de paragraphe, une image, un tableau ou divers de ces éléments pris conjointement.
Pour bien marquer les différents éléments de votre document-texte écrit en HTML, vous utiliserez des tags. Tous les tags HTML consistent en un caractère "plus petit que" (<), un nom de tag (liste à connaître !!!), et un caractère "plus grand que" (>).
Les tags s'emploient généralement par paires. Par exemple : <H1> et </H1>) qui entourent un titre de niveau 1.
Le tag de fin d'élément ressemble généralement à celui de début d'élément, sauf que le texte situé entre les "crochets" de celui de fin commence par un "slash". Une liste de quelques tags se situe ci-dessous.
|
la balise |
|
| <HTML> | Ceci est le début d'un document de type HTML. |
| </HTML> | Ceci est la fin d'un document de type HTML. |
| <HEAD> | Ceci est le début de la zone d'en-tête. (Prologue au document proprement dit contenant des informations destinées au browser) |
| </HEAD> | Ceci est la fin de la zone d'en-tête. |
| <TITLE> | Ceci est la début du titre de la page. |
| </TITLE> | Ceci est la fin du titre de la page. |
| <BODY> | Ceci est le début du document proprement dit. |
| </BODY> | Ceci est la fin du document proprement dit. |
Certains éléments peuvent contenir des attributs, qui ne sont rien de plus que des informations supplémentaires qui doivent être incluses dans le tag de début.
Par exemple, si vous incluez une image, vous pouvez précisez la manière dont le navigateur doit la situer (au centre, texte aligné sur le bas de l'image ...). Les attributs sont généralement facultatifs et si vous voulez en savoir plus, allez voir plus bas.
REMARQUE : le HTML n'est pas "case sensitive", c'est-à-dire que vous pouvez employer majuscules et minuscules (mieux : capitales et bas de casse) indifféremment. <title> est équivalent à <TITLE> ou à <TiTlE>. Il y a cependant quelques exceptions notées dans Caractères spéciaux ci-après.
Le HTML5, contrairement au XHTML, mais comme le HTML4 n'est pas "case sensitive" non plus. Par convention, les balises de HTML5 seront cependant notées en bas de casse (minuscules pour les non initiés [voir ici]). On y verra deux avantages majeurs ; d'une part les lettres en bas de casse sont plus faciles à lire que les capitales, et d'autre part, la traduction en XHTML sera plus facile, car le XHTML exige les bas de casse et est "case sensitive".
Tous les tags ne sont pas supportés par tous les browsers. Facile, si un browser ignore le sens d'un tag, il n'en tient pas compte et ignore le sens du tag, mais pas le texte écrit entre le tag ouvrant et le tag fermant ; dangereux, car en cas d'erreur, le browser ne fera pas ce que vous attendez de lui.
Tout document HTML doit contenir un minimum de tags. Tout document contient au minimum un "en-tête" [head] et un corps [body]. L'en-tête contient un titre [title] et le corps contient au minimum le texte que vous voulez voir dans votre page faite de paragraphes, images, listes ou autres éléments.
Les browsers ont été conçus pour trouver un minimum d'informations, fixées par les spécifications du HTML et du SGML.
Les éléments requis sont montrés dans le document qui suit :
Exemple
|
Les éléments (et tags ou balises) indispensables sont <html>, <head>, <title>, et <body> (et leurs tags équivalents de fin). Puisque ces tags doivent être inclus dans tous les documents HTML, vous pourriez créer un modèle vierge qui les inclut déjà. Certains browsers fonctionnent correctement, même si ces tags minima ne sont pas présents... mais pas tous ! Donc... n'oubliez pas de les inclure.
Le HTML5 exige la présence de ces balises et de leurs balises fermantes équivalentes.
Cliquez ici pour voir la version vue sur le WEB de cette version HTML ci-dessus.
N'oubliez pas de revenir à cette page en cliquant sur le bouton "Back" ou "Précédent" de votre browser pour voir la suite du cours. Le longer example est aussi disponible sur le Web, mais nous vous conseillons de poursuivre la lecture avant d'y jeter un coup d'œil. Il vous reste à apprendre ces quelques tags explicités dans la suite.
Pour voir comment est écrite la page que vous avez sous les yeux, mais dans sa version HTML, il suffit de choisir [Affichage][View] puis [Source] dans la barre de menu de votre browser (la plupart des browser dispose de ces options dans le menu), les navigateurs plus récents permettent la séqunce suivante [alt-f]>[Outils]>[Afficher la source] ; vous pouvez aussi cliquer avec le bouton droit de la souris et faire le même choix. On peut aussi, le plus souvent, faire un "clic droit" de la souris, puis choisir "afficher la source" dans le menu contextuel qui s'affiche. Le contenu du fichier et tous ses tags HTML apparaît alors dans une nouvelle fenêtre (window).
Cette méthode est peut-être la meilleure pour apprendre le langage HTML, pour voir comment on peut l'employer et pour découvrir les trucs et astuces des concepteurs de pages Web. Il vous sera bien sûr difficile de distinguer la "bonne" programmation de la "mauvaise", mais en pratiquant de la sorte, vous vous améliorerez et y arriverez.
N'oubliez pas qu'il vous est toujours possible de sauver un fichier source HTML (avec les tags) et l'employer comme modèle pour l'une ou l'autre de vos pages Web ou d'en modifier le format pour mieux répondre à vos besoins.
Cet élément signale à votre browser (ou à ceux d'autres personnes qui liront vos pages), que votre fichier contient du code HTML. L'extension de ces fichiers doit nécessairement être .html ou .htm, ce dernier surtout pour les utilisateurs de WIN3.11 ou DOS (s'il en reste ;o) ) qui limitaient les extensions à 3 caractères. Vous pouvez vérifier, ce fichier-ci s'appelle "html01fr.htm".
Comment vérifier ? Cliquez du bouton droit de la souris et demandez "propriétés"... il ne vous reste qu'à lire la réponse.
La balise <HTML> est parfois (rarement, sauf en hébreu et en arabe) accompagné de paramètres, comme celui du sens de la lecture... Ainsi, <HTML dir = LTR> ou dir=RTL spécifie la direction par défaut pour du texte neutre en terme de directionalité contenu dans l'élément dans lequel il apparaît (gauche-à-droite ou droite-à-gauche) dans ce document. Valeurs possibles :
En plus de spécifier la langue primitive d'un document, les auteurs pourront spécifier la direction d'écriture de texte par défaut pour des tronçons de texte, ou le document entier.
Si la balise (ou le tag) <HTML> est la première balise de votre document HTML, il paraitra normal que la balise fermante équivalente </HTML> soit la dernière de votre document...
Une ligne pourra être écrite avant la balise <HTML>, voir doctype
Cet élément sert d'en-tête à votre page HTML. L'en-tête contient au moins le titre de votre page qui se trouve affiché tout en haut de votre fenêtre, dans la bande (anciennement bleue) de titre (voir ci-après).
L'autre élément essentiel sera le corps de votre page, signalé par les balises <body> et </body>.
Dans cet en-tête, on trouve, outre la balise de titre <title> et sa balise fermante </title>, les balises <meta> qui renseignent les moteurs de recherche sur la description du site, les mots clés, la langue utilisée sur la page, sur l'auteur du site et bien d'autres. Nous y reviendrons plus tard. Voir Meta.
L'élément (et le tag) TITLE contient le titre de votre page (il faut être prof pour en dire une pareille). Ce titre se trouve affiché tout en haut de votre fenêtre, dans la bande (anciennement bleue) de titre ou dans l'un des onglets ; mais ce titre est aussi utilisé pour reconnaître (qui depuis 1990 peut s'écrire sans accent circonflexe, voir orthographe) votre page chez un lecteur qui veut l'ajouter à ses sites favoris et y accéder rapidement sans devoir retenir l'adresse de votre page.
Comment ajouter une page dans ses favoris ? Il suffisait de cliquer sur "favoris" puis "ajouter" avec les vieux Internet Explorer. Dans le dernier Google Chrome, on clique sur le menu (trois barres horizontales) à droite de la ligne des adresses URL du browser, on clique ensuite sur l'option Favoris, puis on choisit 'ajouter cette page aux favoris'.
Choisissez donc un titre suffisamment descriptif, unique et relativement court. Un titre peut aussi identifier votre page dans un moteur de recherche, parmi lesquels :
Par exemple, vous pourriez inclure un titre raccourci d'un livre avec le contenu du chapitre : CUY - Un Guide pour vos débuts en HTML. Ceci donne une idée relativement précise du contenu de la page, est certainement préférable à un titre tel que : Guide ; on aurait pu y ajouter le nom d'une plate-forme (Windows), mais cela nous a paru inutile, puisque le HTML est multi-plateforme.
N'employez jamais plus de 64 caractères pour le titre d'une page.
La seconde et la plus grande partie de votre document HTML est le corps [BODY], qui contient tout ce que votre lecteur pourra voir de votre page HTML [ce qui apparaîtra dans la page lue par votre browser (ou celui de votre lecteur)], y compris le texte à lire, les images, etc.
Les tags qui suivent sont ceux que l'on retrouve dans le corps [BODY] de votre document HTML.
La balise <BODY> peut avoir certains paramètres que nous illustrerons plus tard, à savoir <BODY BACKGROUND="nom_de_fichier.gif"> qui, comme ici place une image en fond d'écran (pour en savoir plus) ou <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> qui va créer une fenêtre de fond noir (BGCOLOR, aucune couleur, donc 0 partout) avec du texte blanc (TEXT, mélange de toutes les couleurs au maximum) et des liens de couleur gris argenté (LINK, savant mélange de trois couleurs fondamentales du système RGB pour RedGreenBlue (pour en savoir plus).
Le lecteur aura remarqué que chaque propriété est suivie d'un signe =, suivie d'une valeur entre guillemets. Les guillemets ne sont pas indispensables en HTML4, mais le sont en HTML5... d'où notre conseil de les utiliser toujours.
<body topmargin="150" leftmargin="80" marginheight="500" marginwidth="3500" bgcolor="#FFFFFF"> crée une fenêtre de fond blanc, mais dont le contenu commencera sous une marge supérieure de 150 pixels et dont la marge de gauche sera de 80 pixels. Cette marge gauche existe sur cette page, l'aviez-vous remarqué ?
HTML est prévu pour 6 niveaux de titres ; le niveau 1 est le niveau supérieur et 6 celui de niveau inférieur. Ces titres de niveaux différents sont généralement écrits en caractères plus grands et/ou plus gras que les caractères (ou les fontes) utilisés pour un texte normal.
Le niveau 1 devrait être marqué (taggé) par <H1>.
La syntaxe de ces niveaux de titres est la suivante :
<Hy>Texte du titre de ce niveau </Hy>
où y est un nombre compris entre 1 et 6, précisant ainsi le niveau de titre.
définira un titre de faible niveau. Pour preuve :
Exemple
|
N'omettez pas de niveaux, lorsque vous travaillez dans un document. Par exemple, ne commencez pas par le niveau 1 (<H1>) pour continuer avec le niveau 3 (<H3>), sans passer par le niveau 2 (<H2>).
Et songez que des titres peuvent avoir une typographie redéfinie par l'auteur de la page (c'est le cas ici pour les titres de niveaux 1 à 5 dans le texte ci-dessus, mais pas dans notre testeur de code - Exemple - ci dessus).
Contrairement aux traitements de texte, les retours à la ligne dans les fichiers HTML sont sans effet. En fait, tous les blancs — y compris les espaces, les retours à la ligne, les tabulations — sont automatiquement convertis en une espace unique (N.D.L.R.: féminin en orthotypographie) lorsque votre fichier HTML est affiché par un browser (=navigateur).
Ne vous inquiétez donc pas de la longueur de vos lignes de texte, la mise en page se fera automatiquement lorsque votre page apparaîtra dans un browser, sans affecter la disposition prévue pour vos pages.
Dans la partie intitulée "Un document HTML minimum", vue précédemment, le premier paragraphe était :
<P>Bienvenu dans le monde HTML.
Ceci est le premier paragraphe. Bien que court, c'est un paragraphe!</P>
Dans ce fichier source, on compte 2 lignes dont la seconde commence par le mot 'Ceci' et semble constitué un nouveau paragraphe. Un navigateur (=browser) va ignorer ce saut de fin de paragraphe, s'il ne rencontre pas un nouveau tag <P> ou éventuellement un saut de ligne noté par la balise <br>. Si vous voulez vérifiez, cliquez ici.
ATTENTION : Important : Vous devez donc utiliser le tag <P> pour marquer les éléments 'paragraphes' de vos pages Web, tout browser (=navigateur, tel Internet Explorer) ignorera la disposition (paragraphes, indentations, lignes vierges).
Sans utilisation du tag <P>, tout votre document ne serait qu'un seul paragraphe (sauf utlilisation du tag <PRE> pour un texte préformaté et du tag <BR> pour une "cassuture" de ligne [= line BReak] que nous expliquerons plus loin.
Si l'auteur d'une page souhaite passer un grand espace sans texte à lire, il est inutile de mettre plusieurs balises <p> en suivant, le navigateur ne fera qu'un seul saut de paragraphe, tout comme il ignore plusieurs espaces consécutifs. Deux solutions s'offrent cependant :
Ceci ne vous empêche pas de construire proprement vos fichiers source ; même si le résultat sera le même, nous pensons que l'un des fichiers ci-dessous est plus lisible que l'autre :
<html><head><TITLE>Un exemple simple de fichier
HTML</TITLE></head><body><H1>HTML
est un langage facile à apprendre</H1><P>Bienvenu dans le monde
HTML. Ceci est le premier paragraphe. Bien que court, c'est un
paragraphe!</P><P>Et ceci est un second paragraphe.</P><P>Et
3e paragraphe : N'oubliez pas de revenir à la page
précédente en cliquant <br> sur le bouton "Back" ou
"Précédent" de votre browser pour voir la suite du
cours.</P></body></html>
<html>
<head>
<TITLE>Un exemple simple de fichier HTML</TITLE>
</head>
<body>
<H1>HTML est un langage facile à apprendre</H1>
<P>Bienvenu dans le monde HTML.
Ceci est le premier paragraphe. Bien que court, c'est un paragraphe!</P>
<P>Et ceci est un second paragraphe.</P>
<P>Et 3e paragraphe : N'oubliez pas de revenir à la page précédente en cliquant <br>
sur le bouton "Back" ou "Précédent" de votre browser pour voir la suite du cours.</P>
</body>
</html>
Pour rendre vos fichiers source (texte HTML) plus lisibles, nous vous conseillons de :
NOTES : Le tag </P> de fin de paragraphe peut être omis en HTML4, mais pas en XHTML ni en HTML5. Les navigateurs (récents) qui rencontrent un tag <P> de début de paragraphe comprendront que le paragraphe précédent est terminé. Cependant, bien qu'ils puissent être omis, nous croyons, surtout au début, qu'il est utile de fermer vos paragraphes avec le tag </P>.
Le mot "espace" est féminin s'il est employé en orthotypographie (voir ici).
De plus, utiliser les tags <P> et </P> comme conteneurs d'un élément 'paragraphe', vous permettra de spécifier des attributs propres à ce paragraphe, tels que le centrage, la couleur des caractères ou autres.
Pour centrer (ou aligner) un paragraphe, il suffit d'y ajouter à l'intérieur du tag ouvrant <P>, l'attribut ALIGN=attribut d'alignement , cet attribut pouvant être CENTER (pour centrer), LEFT (pour aligner à gauche) ou RIGHT (pour aligner à droite) dans votre fichier source.
<TT><P ALIGN=CENTER></TT>
Ceci est un paragraphe centré.
[Voir résultat ci-dessous.]
</P>
Ceci est un paragraphe centré. [Voir résultat ci-dessous.]
Aviez-vous remarqué que les 2 lignes du fichier source ne se sont écrites qu'en une seule ligne (voir ce qui a été dit précédemment).
Si vous aviez utlisé RIGHT ou LEFT, vous auriez obtenu les résultats suivants :
Ceci est un paragraphe justifié à droite. [Voir résultat ci-dessous.]
Ceci est un paragraphe aligné à gauche... ce qu'il y a de plus courant. et donc probablement inutile à signaler. [Voir résultat ci-dessous.]
HTML accepte trois types de listes :
Les listes peuvent être imbriquées les unes dans les autres... prudence et soin sont alors exigées, car un trop grand nombre de niveaux engendre souvent des erreurs et est souvent difficile à suivre.
Listes à puces : Unnumbered Lists
Pour faire une liste à puces (unnumbered list), il suffit de :
Ci-dessous, un exemple de liste à puces :
<UL>
<LI> secteur primaire (toute activité liée au travail du sol, du sous-sol ou de la mer)</LI>
<LI> secteur secondaire (toute activité liée à la transformation des ressources naturelles en produits manufacturés ) </LI>
<LI> secteur tertiaire (autres activités économiques qui n'utilisent ni les procédés agricoles, ni les procédés industriels.
Il s'agit principalement de la production des services marchands et des services non marchands)</LI>
</UL>
Qui donnera pour résultat :
Les éléments compris entre les tags <LI> et </LI> peuvent contenir de multiples paragraphes, s'ils contiennent un ou plusieurs tags <P>.
Le lecteur attentif aura remarqué qu'il eut fallu noter é au lieu de é dans la source ci-dessus.
listes ordonnées ou numérotées [Ordered List]
Pour faire une ordonnée ou numérotée (Ordered List), il suffit de la même façon de :
par exemple, pour des listes numérotées et imbriquées :
<OL>
<LI> population inactive
<OL>
<LI> scolarisés obligatoires (jusque 18 ans en Belgique)</LI>
<LI> scolarisés libres (étudiants du supérieur)</LI>
<LI> ... </LI>
</OL>
</LI>
<LI> population active
<OL>
<LI> travailleurs occupés dans un emploi</LI>
<LI> ...</LI>
</OL>
qui donnera le résultat suivant :
Les attributs caractéristiques des balises UL et OL sont :
- type : (pour UL) apparence de la puce :
disc : pour un disque plein,
circle : pour un cercle,
square : pour une puce carrée,
ainsi que
(pour OL) :
1 : pour des nombres en chiffres arabes 0, 1, 2, 3 ...
A : pour des lettres alphabétiques capitales (majuscules) A, B, C ...
a : pour des lettres alphabétiques bas-de-casse (minuscules) a, b, c ...
i : pour des nombres en chiffres romains bas-de-casse (minuscules) i, ii, iii ...
I : pour des nombres en chiffres romains capitales (majuscules) I, II, III ...
- start : spécifie quel sera l'indice de départ de la liste (on doit toujours indiquer un chiffre (nombre) arabe : 3, 24 ou 102 [attention, à ne pas essayer avec A ou a, car il n'y a que 26 lettres ;o)) ]) ;
ainsi, noter <ol type="a" start="4"> signifierait que la balise <li> suivante, engendrerait un numérotation lettrée minuscule, dont le premier élément serait la lettre 'd' ;
de même, noter <ol type="i" start="4"> signifierait que la balise <li> suivante, engendrerait un numérotation 'chiffres romains' minuscule, dont le premier élément serait la lettre 'iv'.
- compact
par exemple, pour des listes numérotées et imbriquées :
<ol type="1" start="0">
<li>Rubrique 1</li>
<ol type="i" start="4">
<li>Sous Rubrique 1
<li>Sous Rubrique 2
</ol>
<li>Rubrique 2
<li>Rubrique 3
<ol type="a" start="10">
<li>Sous Rubrique 1
<li>Sous Rubrique 2
<ol type="1" start="12">
<li>Paragraphe 1
<li>Paragraphe 2
</ol>
</ol>
</ol>
le lecteur aura noté l'absence de certaines balises fermantes... ce qui ne rendra le fichier lisible que pour le HTML4
et qui donnera le résultat suivant :
Exemple
>> Essayez vous-même » |
Listes définition = Definition Lists
Un exemple typique de listes de définition serait un dictionnaire qui distingue les mots à définir de leurs définitions.
Il suffit dès lors de :
Les navigateurs se chargent généralement de mettre la liste des définitions en forme en indentant d'une manière qui leur est propre.
L'exemple qui suit vous montre comment encoder :
<DL>
<DT><I> WWW</I>
<DD> World Wide Web, aussi appelé "réseau Internet"
<DT> <br> <I> HTML</I>
<DD> HyperText Markup Language--HTML est un SGML DTD <br>
En termes plus précis, HTML est une partie d'un langage, indépendant des
plateformes (mainframes ou desktop, Dos ou Windows [3.11, 95 ou 98], System7 ou 8, Unix,
Linux...) sur lesquelles il travaille, n'utilisant que des styles (reconnaissables aux "tags", ou
"markup tags" du type <b><br><b>) qui définissent les différents
composants d'un document présent sur le World Wide Web (p.ex.: texte simple, gras,
italique, images, liens, sons...). Le langage HTML a été inventé par
Tim Berners-Lee pendant qu'il travaillait au CERN, le laboratoire européen des
particules physiques à Genève (Suisse)
</DL>
ici aussi on remarquera l'absence des balises fermantes, nécessaires en XHTML et en HTML5,
et le résultat que cela donne sur votre browser :
Les éléments compris entre les tags <DT> et </DD> peuvent contenir de multiples paragraphes, s'ils contiennent un ou plusieurs tags <P>; de multiples listes, s'ils contiennent un ou plusieurs des tags de listes<LI> avec <UL>, <OL> ou...
L'attribut COMPACT peut être employé si les termes à définir sont très courts et que la définition peut commencer sur la même ligne. Voyez plutôt :
<DL COMPACT> <DT> + <DD>se lit "plus...". <DT> : <DD>se lit "divisé par...". </DL>dont le résultat sera sur votre browser :
Exemple
|
Listes imbriquées
Des listes peuvent être imbriquées l'une dans l'autre, comme signalé et montré plus haut (rappel : section régendat).
En voici un autre exemple :
<UL>
<LI> Quelques provinces du Nord de la Belgique (flamandes) :
<UL>
<LI> Antwerpen
<LI> Limburg
<LI> Oost Vlanderen
</UL>
<LI> Quelques provinces du Sud de la Belgique (wallonnes) :
<UL>
<LI> Hainaut
<LI> Namur
</UL>
</UL>
Absence des balises fermantes, attention
Qui affichera :
Nous vous suggérons d'employer le tag <PRE> (pour "PREformatted") dans le but de générer un texte dont les caractères sont de longueur fixe, les espaces successives acceptées, les tabulations et lignes vierges multiples également. Le texte disposé entre les tags <PRE> et </PRE> aura une allure très proche de celui qui apparaîtra dans votre fichier source HTML.
Un usage pratique de cet élément PREformatté est la transcription de listing de programme comme ci-après :
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
qui se représentera, lu par le navigateur comme suit :
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
Le tag <PRE> peut être employé avec l'attribut optionnel WIDTH qui stipule le nombre maximum de caractères d'une ligne. WIDTH peut aussi servir à signaler au navigateur de choisir une fonte de caractères précise ou une indentation pour le texte.
Des hyperliens peuvent apparaître entre les tags <PRE> et </PRE> . Nous vous déconseillons d'employer d'autres tags HTML à l'intérieur de ces tags de préformatage.
Sachez que les caractères :
| < . . . . . début de tag . . . . . |
> . . . . . . . . . . fin de tag . . . . . . . . . |
& contenu dans +ieurs tags |
ont un sens particulier pour le langage HTML.
Vous devez dès lors les remplacer par :
| < < Less Than = moins que |
> > Greater Than = plus grand que |
& & . . . . . . . . . . . . . . . . . . . . . . . . . . |
pour pouvoir faire apparaître correctement ces caractères à l'écran de votre browser, mais surtout sur les écrans de n'importe quel internaute, quels que soient sa langue ou le clavier qu'il possède.
Voyez les Séquences d'Escape pour plus d'informations.
Employez le tag <BLOCKQUOTE> pour y inclure un élément qui doit former un "bloc" séparé à l'écran. La plupart des navigateurs placent ce "bloc" dans des marges particulières pour mettre ce bloc en évidence du texte environnant.
Dans l'exemple suivant :
<P>Soyez concis.</P>
<BLOCKQUOTE>
<P>Un écrit fort doit être concis. Une phrase
ne devrait contenir aucun mot inutile, un paragraphe aucune
phrase inutile, pour la même raison qu'un dessin ne peut
contenir de traits inutiles, ou une machine de parties inutiles.
</P>
<P>de William Strunk, Jr., 1918 </P>
</BLOCKQUOTE>
Voyez comment votre browser réagit :
Soyez concis.
.Un écrit fort doit être concis. Une phrase ne devrait contenir aucun mot inutile, un paragraphe aucune phrase inutile, pour la même raison qu'un dessin ne peut contenir de traits inutiles, ou une machine de parties inutiles.
de William Strunk, Jr., 1918
Le tag <BR> effectue un retour à la ligne forcée, sans interligne supplémentaire (lignes vierges entre les lignes). L'emploi (quasi) équivalent du tag <P> pour séparer de courtes lignes de texte aurait pour conséquence d'y insérer un espace trop important entre chaque ligne.
Prenons l'exemple suivant :
C.U.Y.<BR>
Département pédagogique<BR>
Rue des Forges 39<BR>
7350 Montroeul-sur-Haine<BR>
qui donnerait, en utilisant des tags <BR> :
C.U.Y.
Département pédagogique
Rue des Forges 39
7350 Montroeul-sur-Haine
et, en remplaçant les tags <BR> par des tags <P> donnerait :
C.U.Y.
Département pédagogique
Rue des Forges 39
7350 Montroeul-sur-Haine
.
Le lecteur soucieux de suivre nos conseils serait tenté de placer une balise fermante après la balise <br>... quel en serait le sens ? Peut-on envisager un début de saut à la ligne et une fin de saut à la ligne ? Non, bien sûr. La balise <br> n'a pas de balise fermante.
Les langages XHTML et HTML5 demandent alors d'écrire les balises qui n'ont pas d'équivalents fermants, de les noter suivis d'une espace, puis d'un 'slash' avant le > final. Ainsi, la balise HTML4, notée <br> sera notée <br /> en XHTML et en HTML5.
Le tag <HR> (pour Horizontal Rules) a pour effet de tracer une ligne horizontale de la largeur de la fenêtre de votre navigateur.
Une ligne horizontale peut être utile pour séparer des parties de texte, ou de séparer les parties essentielles de votre document.
Vous pouvez fixer les dimensions d'une ligne (son épaisseur par l'attribut SIZE et sa longueur [%age de la largeur de la fenêtre couvert par la ligne] par l'argument WIDTH).
À vous de multiplier les expériences pour obtenir le résultat escompté. Par exemple :
<HR SIZE=4 WIDTH="50%">
vous dessinera la ligne suivante :
Pour les raisons invoquées ci-dessus, on écrira en XHTML et en HTML5 :
<HR SIZE=4 WIDTH="50%" />
HTML dispose de deux types de styles pour mettre du texte en évidence, à savoir le style logique et le style physique :
S'ils produisent le même effet, pourquoi les retenir tous les deux ?
Dans l'univers idéal du SGML, le contenu et le contenant (le fond et la forme) sont très différentiés.
Ainsi, un titre de niveau UN (=1) est un titre de niveau 1... mais pas une chaîne de caractères de police "Times", "centrée" et en caractères "gras" d'une hauteur de 24 points. L'avantage de cette approche (songez aux "styles" propres à votre traitement de texte) est que si vous souhaitez modifier votre titre de niveau 1 en une chaîne de caractères de police "Arial", "justifiée à droite" et en caractères "italiques" d'une hauteur de 18 points, il suffit de redéfinir le niveau 1 dans votre browser plutôt que de modifier chaque occurence des titres de niveau 1.
Les nouveaux browsers actuels vous permettent de définir vous-mêmes la manière d'afficher à l'écran les divers tags employés en HTML, ce qui dépasse ce que nous voulions développer dans cette première approche. En deux mots, on parle de cascading style sheets, ou CSS. Si vous souhaitez en savoir plus, consultez le site World Wide Web Consortium .
Un autre avantage des tags de style logique est qu'ils aident à garder la consistance de vos documents. Il est plus facile de retenir le tag <H1> que de retenir que les titres de niveau 1 doivent être une chaîne de caractères de police "Times", "centrée" et en caractères "gras" d'une hauteur de 24 points [ou tout autre formule d'un type semblable].
En clair, préférez-vous retenir :
<H1>Titre 1</H1>
ou
Considérons un autre exemple : le tag <STRONG> : la plupart des browsers le traduisent par des caractères "gras". Rien n'empêche un lecteur de pages Web de préférer que ces caractères apparaissent en rouge. (Ceci est possible grâce au fichier cascading style sheet, ou CSS, propre à l'ordinateur de votre lecteur : les styles logiques offrent ces avantages.)
Bien sûr, si vous souhaitez écrire quelque chose en caractères italiques [par exemple], et que vous ne souhaitez pas que votre lecteur ne le voit autrement, il ne vous reste qu'à employer les styles physiques.
Les styles physiques, quant à eux, offrent l'avantage de montrer à votre lecteur exactement ce que vous souhaitez qu'il voit.
Essayez d'être cohérent dans votre choix de tags de style logique ou physique. Si vous employez des tags de style physique, employez-les (les mêmes) jusqu'à la fin de votre document. Si vous employez des tags de style logique, faites de même.
N'oubliez jamais que certaines versions de certains browsers pourraient ne pas comprendre vos tags logiques. Le tag <DFN>, pour DeFiNition, généralement affiché en italiques, n'est pas très courant et pourrait être ignoré par le browser de votre lecteur s'il ne le comprend pas.
<stdio.h> header file)
Les caractères spéciaux ont deux usages :
Trois caractères ASCII (ou norme American Standard Code of Information Interchange), à savoir :
Nous avons vu ci-avant que ces 'caractères spéciaux', utilisés dans un texte HTML, doivent s'écrire :
D'autres caractères spéciaux, tels tous les caractères accentués des diverses langues :
NOTE: Contrairement aux autres "tags" HTML, certains caractères spéciaux sont 'case sensitive' (c-à-d sensible à la casse [maj/min]) ;
Toute chaîne de caractères commençant par : <!-- et finissant par --> permet d'écrire des commentaires qui n'ont d'autres buts que de faciliter la lecture et la compréhension du langage HTML de la source de la page. Aucun navigateur ne lira ces lignes qui seront donc ignorées, mais utiles au rédacteur de la page. Un exemple pourraît être :
Ce tableau (les tableaux sont expliqués ici) :
| première en-tête | dernière en-tête |
|---|---|
| contenu de première ligne, première cellule | contenu de première ligne, dernière cellule |
| contenu de dernière ligne, première cellule | contenu de dernière ligne, dernière cellule |
qui a pour source commentée :
<TABLE bordercolor="#ff0000" border="1"> <!-- début de la définition du tableau --> <CAPTION> contenu du titre (caption) </CAPTION>
<!-- caption : definition titre --> <tr class="n2"> <!-- début de la ligne (row) d'en-tête --> <TH> première en-tête </TH> <TH> dernière en-tête </TH> </TR> <!-- fin de la ligne (row) d'en-tête --> <tr class="n2"> <!-- début de la première ligne --> <TD> contenu de première ligne, première cellule </TD> <TD> contenu de première ligne, dernière cellule </TD> </TR> <!-- fin de la première ligne (row) --> <tr class="n2"> <!-- début de la dernière ligne --> <TD> contenu de dernière ligne, première cellule </TD> <TD> contenu de dernière ligne, dernière cellule </TD> </TR> <!-- fin de la dernière ligne (row) --> </TABLE> <!-- fin de tableau -->
Désolé d'introduire le sujet en vous informant que le HTML5 décourage son emploi, car leur usage est uniquement à usage esthétique de la page et cet aspect est règlé en HTML5 par les styles et les formats CSS (voir ici ou encore ici). Nous préférons cependant laisser cette présentation propre au HTML4 et laisserons le lecteur s'imprégner des feuilles de style au moment où il le souhaitera.
Outre les mises en évidence de texte par les balise <b>, <i>, <strong>, <u>, <h3> et autres expliquées ci-dessus, un texte peut voir ses paramètres modifiés par les attributs que prendra la balise <font>. Le nom de cette balise doit vous faire penser au terme d'imprimerie fonte ou police de caractères.
Profitons cependant de l'occasion pour montrer comment le HTML5 obtiendrait le même résultat :
>>dans le code CSS :
body * p { font-family:"verdana"; font-size:1.2em; color:"#6600FF"; }
>>dans le code HTML :
<p> texte plutôt bleu en verdana plus grand (120% de la taille de la balise parent)</p>
ou autre variante
>>dans le code CSS :
body .zonemee { font-family:"verdana"; font-size:1.2em; color:"#6600FF"; }
>>dans le code HTML :
<p class="zonemee"> texte plutôt bleu en verdana plus grand (120% de la taille de la balise parent)</p>
Le grand avantage du langage HTML vient de sa facilité à créer des hyperliens (au départ de texte ou d'image), renvoyant, suite à un simple 'clic' de souris à un autre document ou à une autre partie du document en cours.
Un navigateur (browser) mettra ce texte ou cette image en évidence en la marquant d'une autre couleur et/ou en la soulignant ; pour indiquer qu'il s'agit d'un lien hypertexte, d'un hyperlien, ou même d'un lien.
Le tag relatif au lien hypertexte est le <A>, qui signifie Anchor ou (en français, Ancre) . Ainsi, pour inclure des ancres dans votre texte, il faut :
Voici d'ailleurs un exemple de référence hypertexte dans un fichier appelé "index.html" :
Vous souhaitez en savoir plus sur
l'<A HREF="sa_org.htm">Organisation du C.U.Y.</A> : il
vous ...
Cette phrase fera de l'expression "Organisation du C.U.Y.", l'hyperlien du fichier "index.html" qui appellera le fichier "sa_org.htm" qui se trouve dans la même directory (dossier ou répertoire) que le fichier "index.html".
Vous pouvez faire des liens vers d'autres fichiers, situés dans d'autres dossiers (=répertoires=directory) en spécifiant un chemin (=path) relatif à partir du fichier courant vers le fichier cible (celui vers lequel vous voulez faire un lien).
Ainsi, si dans le fichier appelé "quest001.html" vous souhaitez faire un lien vers un fichier "rep0001.html" qui se trouve dans le même répertoire que celui qui contient "quest001.html", il faudra écrire :
<A HREF="rep0001.html">réponses au test n°1</A>
Mais, si dans le fichier appelé "quest002.html" vous souhaitez faire un lien vers un fichier "rep0002.html" qui se trouve dans un sous-répertoire "Reponse" de celui qui contient "quest002.html", il faudra écrire :
<A HREF="Reponse/rep0002.html">réponses au test n°2</A>
Dans ce cas, on parle d'adresses relatives, parce que l'on spécifie le chemin (=path) vers le fichier lié rep0002.html relativement au fichier courant "quest002.html".
Vous pouvez aussi faire appel à des adresses absolues (l'adresse URL complète) de fichiers, tels que :
<A HREF="/Question/Reponse/rep0002.html">
réponses au test n°2</A>
Mais les adresses relatives sont moins lourdes à écrire, et rendent vos fichiers HTML plus "transportables" d'un site à l'autre. Vous pouvez par exemple créer plusieurs pages Web sur votre ordinateur (dans un ou plusieurs répertoires) avec des hyperliens établis entre eux, puis seulement les télécharger (=upload) en n'exportant que le répertoire concerné et ses éventuels sous-répertoires. Ainsi, tant que vous travaillerez sur votre ordinateur, vous pourrez tester votre travail, sans connexion à Internet (et donc sans frais téléphoniques du temps où l'on payait par seconde passée sur le Net). Les mêmes liens existeront et fonctionneront une fois que vos fichiers seront téléchargés.
Il nous semble utile de vous informer ici que le système d'exploitation UNIX est sensible à la casse (maj/min), alors que ni le DOS, ni le MacOS, ni le Windows ne le sont. Par exemple, sur un Macintosh ou un PC, "DOCUMENT.HTML", "Document.HTML" et "document.html" designent tous trois le même fichier.
Ainsi, si vous créez un hyperlien vers "DOCUMENT.HTML" et que le fichier est en fait nommé "document.html", l'hyperlien restera valable en Dos, MacOS ou Windows ; par contre, si vous travaillez sur un server Web sous UNIX ou LINUX et y "uploadez" (="téléchargez") vos fichiers, l'hyperlien ne trouvera pas le fichier cherché.
On dit que les noms de fichiers sous Linux sont "case sensitive" et la majorité des serveurs hébergeurs sont en Linux.
Veillez donc à vérifier vos fichiers et leur casse (maj/min).
Les chemins (=path ou pathnames) sont notés selon les conventions de la syntaxe UNIX, proche de celle du DOS. La syntaxe UNIX, pour faire appel au répertoire (=directory = dossier) parent (c-à-d. le répertoire qui contient le répertoire actuel, emploie la notation "..". (Pour plus de détails, vous pouvez consulter des ouvrages pour débutants, tels que Learning the UNIX Operating System, édité chez O'Reilly and Associates, Inc.)
Si vous étiez dans un fichier Hainaut.html et souhaitiez faire une référence à un fichier plus général, situé dans un répertoire parent Belgique.html, votre hyperlien devrait ressemblé à :
<A HREF="../Belgique.html">en Belgique</A>
En général, on conseille d'employer des liens (links) relatifs, autant que possible, car :
Cependant, on préférera employer des adresses absolues si l'on établit des liens vers des documents qui ne sont pas directement liés à celui que vous traitez.
Par exemple, les liens à travers un même site, ou dans un même document, se noteront en adresse relative :
Mais les liens qui font appel à d'autres fichiers, plus particulièrement s'ils sont gérés par d'autres que vous, se noteront en adresse absolue. Ainsi, si vous placez vos pages ailleurs [autre site, ou autre répertoire], aucun de vos liens ne doit être modifié.
Le Web (ou WWW ou W3 ou Internet) emploie des ressources différentes selon l'activité souhaitée. Ces ressources, appelées URLs (Uniform Resource Locators), mentionnent :
La syntaxe en est :
service appelé://host.domain [:port]/chemin (path)/ fichier (filename)
où le service appelé est l'un des :
Le port est un nombre généralement omis (ce qui signifie que vous ne le préciserez que si on vous invite à le faire (p.ex. fichiers non accessibles au grand public)
Par exemple, pour inclure un lien vers l'organisation générale du Centre Universitaire de Yellowstone, il suffit de noter :
<A HREF="/presentation/sa_org.htm"> organisation du C.U.Y.</A>
Ce qui aura pour effet que le texte organisation du C.U.Y. de votre fichier sera un hyperlien vers le document sa_org.htm situé sur notre serveur dont l'adresse partagée au grand public est "http://cuy.be dans un répertoire /presentation/.
Comme signalé plus haut, il existe un service mailto , employé comme hyperlien vers une adresse d'un individu, pour lui envoyer immédiatement un Email (ou courriel) ; ce service n'emploie que le double-point (:) en lieu et place des habituels :// situés entre le service et l'adresse. Plus d'informations à propos de mailto suivront (pour voir).
Pour les fins limiers, signalons qu'une URL peut aussi commencer par son adresse IP, à savoir (actuellement) une suite de 4 nombres tous inférieurs à 256, séparés par un point [bon courage pour retenir vos adresses IP] ; les deux notations pourraient être équivalentes :
Quelques adresses pour mieux comprendre les URLs :
Les "ancres" peuvent aussi servir pour permettre à un lecteur d'accéder à une "section spécifique" d'un de vos documents, au lieu de lire cette page depuis le début, ce qui se fait par défaut. En langage HTML, ce type d'ancre est souvent appelée named anchor que nous remplacerons banalement par ancres nommées, car il s'agira de donner un nom [name] à la section à laquelle vous voulez faire un renvoi.
Ce (gros) fichier écrit en HTML est un exemple typique de l'emploi d'ancres nommées. Ce document unique, pour pouvoir être facilement imprimable, est rempli d'ancres nommées.
L'exemple de ce document est typique d'ancres nommées situées dans un même fichier. Il est cependant possible de faire des hyperliens avec ancres nommées sur des fichiers "distants", ce qui est le cas du sommaire présenté ici.
C'est pour une raison méthodologique [après tout on est dans l'enseignement supérieur pédagogique ou pas...] que nous avons présenté les ancres nommées avec liens internes à un fichier.
Exemple
|
Imaginons que de ce document, je souhaite informer mon public d'informations précises situées dans le document propre à notre site et qui concerne l'organisation d'une école normale.
Un lecteur intéressé par une formation de "régent en math, option sciences économiques" perdrait beaucoup de temps s'il lui fallait rechercher (sans "ancres nommées") l'information souhaitée.
Rappelons que ce document s'appelle "html01fr.htm" (html01fr.htm) ; vous pourriez y noter pour faire un lien avec le fichier du Centre Universitaire de Yellowstone qui s'appellerait "sa_orgreg.htm",
html01fr.htm:
En plus des différentes formations décrites, si vous voulez
en savoir plus à propos de notre formation en sciences économiques, cliquez
<a href="/sa_orgreg.htm"> ici </a>.
mais "sa_orgreg.htm" est un gros fichier qui présente l'organisation générale de votre institution, et pour économiser le temps de votre lecteur potentiel, vous noterez dans l'adresse un caractère #, suivi du nom de la section à laquelle vous renvoyez (ici : hor_eco) :
html01fr.htm:
En plus des différentes formations décrites, si vous voulez
en savoir plus à propos de notre formation en sciences économiques", cliquez
<a href="/s_orgreg.htm#hor_eco"> ici </a>.
Imaginez que les caractères qui suivent le # sont une sorte de signet qui permet au browser de votre lecteur de placer en première ligne non pas le début du fichier "sa_orgreg.htm" , mais l'endroit où l'information recherchée se trouve.
Il ne faut cependant pas oublier de placer une "ancre nommée" (ici : hor_eco) dans votre fichier "sa_orgreg.htm", juste à l'endroit où vous souhaitez que le renvoi se fasse :
<h2><a name="hor_eco">Le programme de cours de la section éco :</a> </h2>
Avec ces deux éléments mis en place, vous pouvez amener votre lecteur à accéder immédiatement à l'information voulue dans le fichier "sa_org.htm".
NOTE: Il n'est donc pas possible de faire des liens entre sections de documents différents, puique vous devez pouvoir éditer ces fichiers, pour "nommer" la section vers laquelle vous voulez faire le lien.
Deux exceptions cependant :
Ainsi, vous pouvez faire des liens vers ce fichier, mais ne pouvez pas en créer d'autres, puisque vous n'avez pas l'autorisation (ni la possibilité) d'éditer les fichiers présents sur un site qui n'est pas le vôtre.
La technique est la même, sauf que le nom (et chemin) du fichier est omis.
Par exemple, si vous êtes dans (vous éditez) le fichier "sa_org.htm", et que vous voulez atteindre la section qui informe concernant la formation en sciences économiques", marquée du nom "hor_éco", il vous suffirait d'écrire :
html01fr.htm:
En plus des différentes formations décrites, si vous voulez en savoir plus à propos de la formation en sciences économiques, cliquez <a href="#hor_éco"> ici </a>.
Et voilà une erreur à ne jamais commettre... pas de caractères accentués ni dans les noms de fichiers, ni dans les signets des ancres. Donc, pas de "#hor_éco" mais éventuellement un "#hor_eco"...
N'oubliez pas le signet (nom) par le tag "ancre nommée" <A NAME="hor_eco"> à l'endroit où vous souhaitez que le renvoi se fasse :
<h2><a name="hor_éco">Le programme de cours de la section éco :</a> </h2>
Les caractères accentués sont aussi à éviter, surtout s'ils sont à lire dans un pays ou une région qui n'utilise pas l'accentuation des lettres. Au lieu d'écrire différentes, vous écrirez différentes et aussi pour les autres caractères spéciaux.
Rappelons que les "ancres nommées" sont particulièrement intéressantes lorsque vous pensez que vos lecteurs pourraient souhaiter imprimer vos informations dans leur intégralité ou si vous avez de nombreuses petites infos à placer dans un même fichier.
Plusieurs attributs peuvent accompagner les balises <a>.
suivie de l'adresse de destination...
Ainsi, si vous suivez la syntaxe <a href="adresse_destination">Texte_ou_image_à_cliquer</a>, vous atteindrez l'adresse de destination en cliquant sur le 'Texte_ou_image_à_cliquer'.
Quelques exemples :
Exemple 1,
si dans le fichier actuel, "html01fr.htm", je souhaite atteindre le fichier "htmldepfr.htm", qui se trouve sur le même site, dans le même dossier (ou répertoire), il vous suffirait d'écrire :
dans 'html01fr.htm':
Si vous souhaitez retourner à notre page de départ de ce guide pour vos débuts en HTML,<br> cliquez <a href="htmldepfr.htm">ici</a>.
Ce qui donnerait le résultat suivant :
Si vous souhaitez retourner à notre page de départ de ce guide pour vos débuts en HTML,
cliquez ici.
Exemple 2,
si dans le fichier actuel, "html01fr.htm", je souhaite atteindre le fichier "index.html", qui se trouve sur le même site, dans un sous-dossier (ou sous-répertoire) "td1_2009", lui-même contenu dans le sous-dossier (ou sous-répertoire) "travetud", il vous suffirait d'écrire :
dans 'html01fr.htm':
Si vous souhaitez voir le travail n°1 des étudiants de 2009,<br>
cliquez <a href="travetud/td1_2009/index.html">ici</a>.
Ce qui donnerait le résultat suivant :
Si vous souhaitez voir le travail n°1 des étudiants de 2009,
cliquez ici.
Exemple 3,
si dans le fichier actuel, "html01fr.htm", je souhaite atteindre le fichier "distinct.htm", qui se trouve sur le même site, dans le dossier père (ou répertoire père) de niveau supérieur (peu importe son nom), il vous suffirait d'écrire :
dans 'html01fr.htm':
Si vous souhaitez voir quelques mails encourageants reçus par le webmaster de CUY,<br>
cliquez <a href="../distinct.htm">ici</a>.
Ce qui donnerait le résultat suivant :
Si vous souhaitez voir quelques mails encourageants reçus par le webmaster de CUY,
cliquez ici.
Exemple 4,
si dans le fichier actuel, "html01fr.htm", je souhaite atteindre dans le même fichier "html01fr.htm", une section de ce même fichier qui se trouve sur le même site, dans le même dossier (mais dans une section qui traite des caractères spéciaux), il vous suffirait d'écrire :
dans 'html01fr.htm':
Si vous souhaitez en savoir plus sur les caractères spéciaux,<br>
cliquez <a href="#ES">ici</a>.
Ce qui donnerait le résultat suivant :
Si vous souhaitez en savoir plus sur les caractères spéciaux,
cliquez ici.
N'oubliez pas le signet (nom) par le tag "ancre nommée" <A NAME="ES"></A> dans votre fichier "html01fr.htm" à l'endroit où vous souhaitez que le renvoi se fasse.
Exemple 5,
si dans le fichier actuel, "html01fr.htm", je souhaite atteindre dans un autre fichier "chap5.htm", une section dans cet autre fichier qui se trouve sur le même site, dans un autre dossier (mais dans une section qui traite du crénage des caractères), il vous suffirait d'écrire :
dans 'html01fr.htm':
Si vous souhaitez en savoir plus sur le crénage des caractères,<br>
cliquez <a href="typoweb/chap5.htm#positionhor_5">ici</a>.
Ce qui donnerait le résultat suivant :
Si vous souhaitez en savoir plus sur le crénage des caractères,
cliquez ici.
N'oubliez pas le signet (nom) par le tag "ancre nommée" <A NAME="positionhor_5"></A> dans votre fichier "chap5.htm" à l'endroit où vous souhaitez que le renvoi se fasse.
<h2><a name="hor_éco">Le programme de cours de la section éco :</a> </h2>
Rappelons qu'on ne peut avoir de caractères accentués dans les ancres et noms de fichiers et que les "ancres nommées" sont particulièrement intéressantes lorsque vous pensez que vos lecteurs pourraient souhaiter imprimer vos informations dans leur intégralité ou si vous avez de nombreuses petites infos à placer dans un même fichier.
Vous pouvez permettre à l'un de vos lecteurs d'écrire facilement à une personne déterminée en envoyant un courrier électronique (E-mail ou courriel) en incluant le tag mailto, suivi de son adresse courrier, dans un hyperlien.
Le format général en est :
<A HREF="mailto:[email protected]">Nom</a>
Par exemple, entrez :
<A HREF="mailto:[email protected]"> Direction du centre CUY, catégorie pédagogique</a>
ou tout autre adresse [sinon, ils seront noyés de courrier] pour ouvrir votre logiciel de mail (eudora, outlook express, Windows live mail...) et l'adresse du destinataire déjà écrite.
L'élément est à placer dans partie <head> ... </HEAD> du document. Il indique la présence d'un lien entre le document et un ou plusieurs autres pouvant être utilisés par un outil d'automatisation quelconque, par opposition à <A>, qui marque une action de la part de l'utilisateur dans le corps de la page...
Les utilisations privilégiées sont:
-> Personnellement, je n'ai jamais utilisé que pour l'appel d'une feuille de style !
Vous aurez remarqué que, par défaut, les ancres sont marqués dans un texte par des caractères bleus soulignés. Il existe cependant des procédures pour modifier ces formats existant par défaut. Deux solutions existent :
<h1 style="margin-top:10px">
<table width="100%">
<tr class="n2">
<td>Publicité Premium Sponsorship </td>
</tr>
</table>
</h1>
Voici un exemple de styles redéfinis entre doubles balises (première méthode) et modifiant les liens de la page.
Ce résultat a été obtenu grâce à ces instructions :
<style>
<!--
all.clsMenuItemNS{font: bold x-small Verdana; color: yellow; text-decoration: none;}
.clsMenuItemIE{text-decoration: none; font: bold xx-small Verdana; color: white; cursor: hand;}
A:link ,A:visited,A:active {color: yellow; text-decoration: none; }
a:hover{background:#b96f00 ;color:white} -->
</style>
Le lecteur attentif aura remarqué que, quelle que soit la façon de définir un style, on commence à définir ce que l'on va reparamétrer :
puis l'on définit le format entre accolades {...}, ce formattage pouvant comprendre plusieurs paramètres séparés par des points-virgules et se terminant par un point-virgule [ex. : la couleur du texte, la couleur de fond du texte, la police de caractères à utiliser, le soulignement ou non, etc.]
Voir aussi <DIV>
Vous aurez remarqué que, par défaut, les ancres sont marqués dans un texte par des caractères bleus soulignés, les titres de niveau <H1> plus grands que ceux de niveau <H4>. Il existe cependant des procédures pour modifier ces formats existant par défaut. Parmi les solutions qui existent, nous développons ici la technique des feuilles de styles :
Les feuilles de styles permettent de simplifier et de rendre plus puissant un codage HTML :
Simplifier :
Rendre plus puissant :
Les classes et leurs ID...
Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe.
La définition des classes est aussi simple que celles des styles. Elle consiste à préciser la balise sélectionnée (comme pour une déclaration de style), puis de lui ajouter un point (.) et le nom que l'on souhaite donner à la classe. Le nom de la classe peut-être composé de lettres (de préférence non-accentuées), de chiffres et de tirets :
Selecteur_de_balise.Nom-de-la-classe
{ propriété de style: Valeur;
propriété de style: Valeur; ...; }
Où « Nom-de-la-classe » représente le nom donné à la classe.
Appel d'une classe
Pour appeler une classe dans le code HTML, il suffit de rajouter un attribut class à la balise :
Soit la classe Rouge appliquée à la balise b :
B.rouge
{font: Verdana 12px; color: #FF0000; }
L'appel à cette classe dans le code se fera de la façon suivante :
<b class="Rouge"> Texte à mettre en rouge et en gras </b>
Il est possible de ne pas préciser de balise, auquel cas la classe pourra être utilisée dans n'importe quelle balise pour laquelle le style sélectionné a un sens ! On parle alors de classe universelle (parfois classe indépendante). La définition d'une telle classe se fait en précédant tout simplement le nom de la classe d'un point :
.Nom-de-la-classe
{propriété de style: Valeur; propriété de style: Valeur ...}
Soit la classe « important » suivante :
.important
{font-type: arial; color: red; font-weight: bold}
L'appel de cette classe peut être fait à partir de n'importe quel élément HTML pour lequel la définition est valide :
<h1 class="important">Attention ceci est un avertissement</h1>
<i class="important">(prière d'en tenir compte)</i>
Notez l'absence de point dans l'appel à la classe.
Les différents chapitres du cours de comptabilité de ce site font usage de cette technique...
Une page plus précise sur les feuille de style se trouve dans le chapitre "Typo du web", chap5
Ce résultat a été obtenu grâce à ces instructions, notées dans un fichier unique :
A:link,A:visited,A:active{
color: #557799; text-decoration: underlined;
}
a:hover{
background:#33BB00 ;color:white
}
BODY {
background-color: #ffffff;
margin-left : 70px;
margin-right: 50px;
line-height=100%;
font-family: Verdana, Times, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
text-indent: +0px;
}
h1 {
line-height:280%;
margin-top :20px;
margin-bottom:20px;
color: #B3B3B3;
background-color: #222222;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 20pt;
font-weight: bold;
}
h2 {
line-height:220%;
margin-left : 50px;
margin-right: 30px;
color: #D280D2;
background-color: #444400;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 18pt;
font-weight: bold;
}
h3 {
line-height:160%;
margin-left : 80px ;
margin-right: 40px;
color: #F2A4F2;
background-color: #330033;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
}
h4 {
line-height:140%;
margin-left : 100px ;
margin-right: 60px;
color: #A9CCA9;
font-family: Arial, Helvetica, sans-serif;
background-color: #224422;
text-align: center;
font-size: 13pt;
font-weight: bold;
}
h5 {
line-height:120%;
margin-left : 110px ;
margin-right: 70px;
color: #AADDAA;
font-family: Arial, Helvetica, sans-serif;
background-color: #112211;
text-align: center;
font-size: 12pt;
font-weight: normal;
}
h6 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
}
.n2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
text-indent: +0px;
line-height: normal;
font-weight: normal;
color: #332233;
margin-left : 50px;
margin-right: 30px;
}
.n3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
line-height: normal;
text-indent: +0px;
font-weight: normal;
color: #224422;
margin-left : 80px;
margin-right: 40px;
}
.n4 {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
text-indent: +0px;
font-weight: normal;
color: #523452;
margin-left : 100px;
margin-right: 60px;
}
.n5 {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 16px;
font-style: normal;
line-height: normal;
text-indent: +0px;
font-weight: normal;
color: #624462;
margin-left : 110px;
margin-right: 70px;
}
.fine {
font-size: 50%;
}
C'est la définition de la classe "fine" ci-dessus qui nous permet d'utiliser l'espace fine dans toutes les pages de notre site CUY devant les signes de ponctuation double,
à savoir ; : ! et ?, sans que ces signes ne soient renvoyés à la ligne suivante du texte (voir 'espace fine')
N'oubliez pas aussi qu'il existe des familles de fontes (polices) dont voici un court extrait :
| Nom | Famille | Commentaire |
|---|---|---|
| Arial | Sans serif | Copie vulgaire de l'Helvetica sur Mac. Adapté à l'écran. Lisible au-dessus de 10 points. |
| Comic Sans MS | Cursive | Police enfant. Ne convient pas pour des sites professionnels. Peu lisible à l'écran. |
| Courier New | Monospace | Police à espacement fixe. Utilisée pour reproduire du code. |
| Georgia | Serif | Meilleure police à empattements. Lisible au-dessus de 10 points. |
| Impact | Sans serif | Très peu adapté pour du contenu en ligne. Très peu lisible. |
| Times New Roman | Serif | Peu adapté à l'écran surtout dans des petites tailles. |
| Trebuchet MS | Sans serif | Moderne et simple. Lisible au-dessus de 10 pts. |
| Verdana | Sans serif | La plus utilisée sur le web. Lisible même dans de petites tailles. |
Vous avez peut-être compris les grandes lignes, mais maintenant il vous faut passer à l'action et ce n'est pas toujours facile de tester ses polices sur son site web. Pour cette raison, je vous conseille d'aller faire un tour sur Typetester. Vous comparez trois fontes en même temps avec une série de réglages : choix de la police, couleur, alignement...
Si vous souhaitez en savoir plus sur les feuilles de styles CSS, voici quelques liens intéressants :
[1]"Indenter" son code, c'est l'aérer un peu, faire apparaître une hiérarchie, et ça facilite énormément sa lecture.
Par exemple:
<table>
<tr class="n2">
<td>Coucou</td>
</tr>
<tr class="n2">
<td>C'est moi</td>
</tr>
</table>
est beaucoup plus facile à lire (et par conséquent à déboguer!)
que :
<table> <tr class="n2"> <td>Coucou</td> </tr><tr class="n2"> <td>C'est moi</td> </tr> </table>