LE HTML & XHTML
Le HTML & XHTML POUR LES DEBUTANTS
Conseilé au Debutants !!!
|
Auteur : NTmichel e-mail : noutchamichel@yahoo.fr Tel : (+237)77-48-51-49/94-37-80-98 |
| I. Petit Historique |
Le langage HTML tire son origine du langage SGML (Standard Generalized Markup Language). Il s'agit d'un type particulier d'annotations destiné au WWW et qui correspond à une collection de styles reconnaissables par les navigateurs. Un navigateur (en anglais "browser") est donc un logiciel qui interprète à l'écran les commandes HTML contenues dans un document accessible sur le WWW. Le langage HTML est utilisé sur le WWW depuis 1990. La version actuellement en vigueur est HTML 2.0. Des discussions sont en cours (voir le document de Berners-Lee et Connolly en bibliographie) pour l'adoption de nouvelles annotations pour une version HTML 3.0 notamment en matière de tableaux et de commandes de formatage définissant les exposants et indices.
| II. HTML = Hyper Texte Mark-up Langage. |
C'est un langage de description qui utilise des marqueurs et permet de faire de la navigation (lecture non linéaire). Il permet de présenter des documents, ce qui actuellement est banal, mais ces documents seront lisibles sur tout navigateur (enfin presque), quelquesoit le système ou l'ordinateur, c'est fondamental. Avec l'HTML vous pourrez être lu par de nombreux systèmes. Après la parole, l'écriture, l'imprimerie, l'informatique permet un pas de plus : permettre à chacun de publier dans le monde entier ! C'est l'HTML qui permet de "surfer" sur Internet.
| II.I Les outils nécessaires Pour le programmeur(HTML; XHTML) |
Les interpréteurs traduisent les programmes(code source) instruction par instruction, et soumettent immédiatement chaque instruction traduite au processeur, pour exécution. Un langage de programmation pour lequel un interpréteur est disponible est appelé un langage interpreté.
Le HTML est un langage interpreté
Voici le strict minimum pour un programmeur :
- un éditeur de texte pour écrire le code source du programme. En théorie un logiciel comme le Bloc-notes sous Windows, fait l'affaire. L'idéal, c'est d'avoir un éditeur de texte intelligent qui colore tout seul le code, ce qui vous permet de vous y repérer bien plus facilement ; comme Notepad++ et autres
- un Interpréteur pour transformer ( Interpréter ) votre code source en binaire ;
| III. Pages HTML |
Il faut d'abord spécifier qu'un document contenant des annotations en HTML n'est rien de plus qu'un fichier texte. Il peut donc être reconnu sans problèmes de conversion d'un environnement à un autre. Une page peut donc être lue et interprétée par n'importe quel navigateur sur n'importe quelle plateforme.
Pour créer un document HTML, il faut insérer les commandes suivantes au début du document:
"première ligne du document"
"ouverture de la zone d'entête"
"titre de la page suivi de "
"fermeture de la zone d'entête."
"ouverture du corps du document"
"Mettre le texte et les images ici"
"fin du corps du document"
"fin du document HTML"
| Vos documents HTML doivent comporter : |
Les marqueurs généraux <HTML>...</HTML>
L'entête. <HEAD>....</HEAD>
Le corps du document : <BODY>...</BODY>
Voici le document de base qui montre comment sont imbriqués les conteneurs :
- <HTML>
- <HEAD>
- C'est le conteneur de l'entête.
- </HEAD>
- <BODY>
- C'est le conteneur du corps.
C'est ici que nous écrirons. - </BODY>
- </HTML>
♠ Remarquez que les annotations HTML viennent pour la plupart en paires. Ainsi, on marque un élément avec la commande et on la referme avec comme dans l'exemple ici:
Exemple de code source :
Voici un titre.
Notez qu'un programmeur a aussi certaines qualités comme :
- la patience : un programme ne marche jamais du premier coup, il faut savoir persévérer !
- le sens de la logique : pas besoin d'être forts en maths certes, mais ça ne vous empêchera pas d'avoir à réfléchir. Désolé pour ceux qui pensaient que ça allait tomber tout cuit sans effort !
- le calme : non, on ne tape pas sur son ordinateur avec un marteau. Ce n'est pas ça qui fera marcher votre programme.
au début et à la fin de votre selection selon votre commande. Avec HTML vous posez les marqueurs "à la main", comme ceci : En gras souligné
resultat :
Voici un titre.
Notez qu'un programmeur a aussi certaines qualités comme :
- la patience : un programme ne marche jamais du premier coup, il faut savoir persévérer !
- le sens de la logique : pas besoin d'être forts en maths certes, mais ça ne vous empêchera pas d'avoir à réfléchir. Désolé pour ceux qui pensaient que ça allait tomber tout cuit sans effort !
- le calme : non, on ne tape pas sur son ordinateur avec un marteau. Ce n'est pas ça qui fera marcher votre programme.
au début et à la fin de votre s´lection selon votre commande. Avec HTML vous posez les marqueurs "à la main", comme ceci : En gras ouligné
| > Première page : "NTmichel.htm" |
- <HTML>
- <HEAD>
- <title>PREMIERE PAGE</title>
- </HEAD>
- <BODY>
- Après la parole, l'écriture, l'imprimerie,
Voici le HTML, pour publier dans le monde entier ! - </BODY>
- </HTML>
Méthode :
- Sélectionnez ce document de <HTML> à </HTML>
- Copiez-le pour le coller dans le bloc-note.
- Enregistrez-le sous le nom NTmichel.htm . Notez bien le chemin de votre disque : C:\...\
- Lancez votre navigateur (Netscape, Mozilla Firefox...) et ouvrez votre fichier : NTmichel.htm
Deuxième page : "jojo.htm" - Je vous propose de réaliser un tableau comme celui-ci :
(Les tableaux sont très pratiques)
Titre Col 1 Titre Col 2 Texte Col1 Lig1 Texte Col2 Lig1 Texte Col1 Lig2 Texte Col2 Lig2 - Méthode :
- Je vous propose de réaliser un tableau comme celui-ci :
- Dans votre éditeur, ouvrez un nouveau fichier.
- Faites les conteneurs d'entête et de corps. (Revoir NTmichel.html)
- Dans le corps, c'est à dire entre <BODY> et </BODY> copiez ou recopiez le code suivant :
<table border> <tr> <th>Titre Col 1 </th> <th>Titre Col 2</th> </tr> <tr> <td>Texte Col1 Lig1</td> <td>Texte Col2 Lig1</td> </tr> <tr> <td>Texte Col1 Lig2</td> <td>Texte Col2 Lig2</td> </tr> </table>
- Enregitrez ce fichier sous le nom : "jojo.htm"Mettez-le dans le même dossier qu' "NTmichel.htm"
- Ouvrez-le dans votre navigateur.
Bilan Si vous avez vu votre travail : BRAVO ! et bienvenue dans le monde des Internautes créateurs; Vous venez de franchir le premier pas !
Votre travail peut faire le tour du monde si vous le déposez dans un serveur http ! Il suffit de l'archiver sur le disque de votre prestataire comme vous l'avez fait sur votre disque. (Demandez lui l'autorisation)
Avant, nous allons apprendre les Liens
Remarque :
Il existe de plus en plus de méthodes pour éditer des codes sources automatiquement. Les avantages sont le confort et la rapidité, les inconvénients sont la dépendance et la difficulté d'exploiter toutes les possibilités du HTML. Je vous conseille de faire quelques pages à la main afin de comprendre les codes sources que fournissent les nombreux éditeurs modernes. Ainsi vous pourrez prendre le relai quand ils ne seront plus capables d'accomplir vos ambitions.Exercice 1 : À la ligne.
Exercice 2 : Réaliser un conteneur..Comment aller à la ligne ? Vous avez dû remarquer qu'HTML ne respecte pas les passages à la ligne. C'est normal, vous devez les marquer avec <br>.
Si vous tapez :première lignedeuxième ligne
vous obtenez :
première ligne deuxième ligneSi vous tapez :première ligne <br> deuxième ligne
vous obtenez :
première lignedeuxième ligne
Placez quelques <br> dans une de vos pages.
N'oubliez pas de mettre à jour en enregistrant votre fichier, et en actualisant le navigateur.
<u> marque le début d'un conteneur dans lequel le contenu sera souligné (Underline). On arrête le soulignement en marquant la fin avec </u>Réaliser un conteneur.
En général, les mots soulignés sont ceux qui permettent la navigation. Il est donc déconseillé de souligner.
Nous verrons de nombreux marqueurs pour faire des conteneurs. Puisque souligner est à éviter, je vous propose de marquer quelques mots avec <b> (bold), <i>. N'oubliez pas de les fermer !
Après avoir testé <b> et <i> essayez la question suivante :Comment seront affichés les mots suivants ?
<b>Conteneur1</b>
<i>Conteneur2</i>
<b><i>Conteneur3</i></b>
Que pensez-vous de <b><i>Conteneur4</b></i> ?
Comprendre HTML - Simplement :
- HTML est un langage de marqueurs (tags en anglais). Si vous placez le marqueur
, tout ce qui suit sera engras, (bold en anglais). C'est comme si vous aviez changé de crayon. Pour retrouver le texte par défaut, vous pouvez, et devez, arrêter l'effet avec. - Emboîtement :
- Il est possible de superposer des effets :
grasetitalique, lapreuve! Dans ce cas, respectez la règle : le premier ouvert est le dernier fermé. On emboîte :preuve - Attributs :
- Beaucoup de marqueurs acceptent des attributs. Ce sont eux qui vous donneront les effets que vous souhaitez. Exemple :
< FRAME NORESIZE > - Valeurs :
- Presque tous les attributs acceptent des valeurs. Elles permettent de personnaliser votre présentation.
Exemple : < BODY BGCOLOR = " GREEN " > Retenir : < MARQUEUR ATTRIBUT = " VALEUR " > On dit aussi < BALISE ATTRIBUT = " PARAMETRE " >
- On ferme le marqueur sans ses attributs.
- Les attributs sont souvent facultatifs. Certains, comme
NAMEsont très conseillés voire obligatoires !
Qu'est-ce que faire un lien ? (Ancrage) C'est permettre de naviguer ! On réalise des hypermots ou des hyperimages, c'est à dire des objets qui réagissent avec la souris le plus souvent, pour atteindre d'autres objets. C'est la base de la navigation.
Un lien se fait obligatoirement entre deux objets : celui qui envoie et celui qui reçoit.
On place le lien dans le fichier qui envoie.
Au début, limitez-vous à des fichiers dans un même dossier, et réalisez des liens entre eux.- Deux types de liens dominent la navigation :
- Relatifs et locaux pour lier vos pages. ( C'est le lien le plus fréquent )
- Absolues et globaux pour lier des sites.
- Il faut connaître aussi :
- les liens vers un point précis d'une page : Ancre.
- les liens vers une adresse e-mail.
- les liens relatifs.
- les liens vers des fichiers (Téléchargement).
Lier des pages locales C'est permettre d'atteindre un autre fichier dans un même dossier, sur une même machine.
Pour des documents placés dans un autre dossier, voyez liens relatifs.
1. On réalise d'abord le fichier cible
Faites très attention à l'archivage. Notez bien le chemin du dossier et le nom du fichier.2. Dans le fichier source, on réalise le lien vers ce fichier cible :
Pour cela, on marque un texte, ou bien une image, avec le tag <a> et l'attribut href :
<a href="fichier.htm"> Texte de l'hyper lien vers le document</a>
Exemple dans le fichier jojo.html : <a href="NTmichel.html">Voir NTmichel</a>
Voici le résultat : Voir NTmichel Vous pouvez l'essayer.Lier des sites. Liens absolus. C'est atteindre un document ou une adresse à l'aide du chemin complet et de son nom.
- 1. Il faut connaître tous les éléments :
- Le type de protocole http:// ou ftp:// ... et pour des références locales : file://
Le nom de l'ordinateur pour des liens locaux sur le serveur.
Le chemin complet ainsi que le nom de fichier. - 2. On confie le tout a l'attribut href du tag <a> :
- Syntaxe : <a href="Protocole Serveur Chemin Fichier"> Texte du lien</a>
- Exemple : <a href="../../index.htm">Site Web chenu</a>
- Résultat : Site Web ntmichelauto Pointez dessus sans cliquer et regardez la barre d'état.
Liens relatifs C'est atteindre un fichier situé dans un autre dossier, sur la même machine.
- 1. On réalise l'arborescence.
- Il est très important d'archiver ses documents de façon structurée.
- Voici un exemple, celui de ce cours (figure ci-contre)
- 2. On indique le chemin par rapport au document utilisé.
- Syntaxe : <a href="../chemin/fichier> Texte hyper lien </a>
../ remonte d'un niveau et chemin/ descend.
Exemple : Avec l'arborescence ci-contre, nous sommes dans le document "relatif.htm" du dossier "lien". Pour atteindre le document "index.htm" il faut remonter d'un niveau, ce qui s'écrit ../ en HTML. D'où le lien relatif suivant :
<a href="../index.htm">Index</a>Il est possible de remonter de plusieurs niveaux :
<a href="../../courhtml/index.htm">Index</a> donne le même résultat !
- 1. On réalise l'arborescence.
