Editer sa Page Du Médecin personnelle.PréambuleCette page va vous permettre d'éditer le code HTML de la Page Du Médecin, d'en comprendre la signification et de le modifier vous-même. Ces explications prennent comme modèle la version de base de la Page Du Médecin (format 800 X 600) ; certaines pages modifiées sur d'autres sites peuvent avoir un code très différent difficile à comprendre où à modifier autrement qu'avec un éditeur HTML. Je pressens que des esprits chagrins vont me demander pourquoi
"mettre les mains dans le cambouis" du code HTML, alors
qu'il existe des éditeurs HTML performants ? Ma réponse est la
suivante : L'un des objectifs de ces pages est d'amener les médecins à
Internet, en tant que consommateurs d'information, mais aussi
peut-être en tant que producteurs, si le virus les prend un jour.
Démystifier le HTML fait partie des étapes importantes de cette
mission. L'association des Médecins
Maîtres-Toile comportait 38 membres fin 2000 ; j'espère qu'ils
(elles) seront bientôt des centaines. Si vous souhaitez continuer, il paraît préférable d'imprimer cette page, en format paysage pour que les lignes ne soient pas coupées !Partons du principe que vous disposez d'Internet Explorer sous PC (je cherche des volontaires pour reproduire ces explications pour Netscape et IE pour Mac) Gardez devant vous l'impression de cette page où vous lirez la suite des explications, et lancez votre Page Du Medecin personnelle à partir du bureau par un double-clic (celle que vous avez enregistrée sur votre disque dur). Elle s'affiche dans votre navigateur comme si vous la lisiez sur Internet. Maintenant, vous allez pénétrer dans les entrailles de votre Page Médicale en cliquant dans votre navigateur sur le menu Fichier/Modifier avec TextPad (si vous n'avez pas installé Textpad, allez d'abord sur cette page) Cette manoeuvre ouvre TextPad et vous permet de voir le code de votre page : <html><!-- Début d'un document écrit en html --> <!-- REMARQUE Début de l'en-tête (header)du document, il n'apparaîtra pas à l'écran. Cet en-tête contient des informations importantes sur le document, son titre, sa description, sa langue, ses auteurs, son jeu de caractère etc. Evitez de le modifier si vous ne maîtrisez pas ces codes --> <head> <title>LA PAGE DU MEDECIN * Moteurs et liens pour le médecin en consultation</title> <meta http-equiv="Content-Language" content="fr"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> ... etc. Vous lisez du code HTML, qui sert à générer la page. Il paraît rebutant au premier abord, mais vous allez constater qu'il est assez facile à comprendre. Tout d'abord, notez la présence de remarques encadrées par les balises <!-- au début et --> à la fin de la remarque. Pour faciliter la lecture, sur cette page, les remarques figureront en vert, comme dans TextPad. Ensuite, notez que vous pouvez ignorer le début du code ! En effet, la structure d'une page HTML est la suivante <html> : balise
indiquant le début d'une page HTML. <body> : balise
indiquant le début du "corps" du document, en pratique le contenu
lisible </html> : balise de fin de document HTML Si vous êtes particulièrement perspicace, vous avez noté qu'une balise est encadrée par un < et un >, et qu'une balise de fin commence par un "slash" : / Vous venez de comprendre les rudiments du langage HTML : il s'agit d'un langage balisé où les portions d'information sont encadrées par une balise de début et de fin qui permet au navigateur de "construire" la page qui s'affiche à l'écran. Continuons la lecture du code dans TextPad, en commençant avec le véritable contenu de votre page, c'est à dire au début de la balise <body> <!-- -------------------------- -->
<!-- Début du document lui-même -->
<!-- -------------------------- -->
<body bgcolor="white" link="blue" vlink="blue" alink="green">
<!-- Début du corps du document (body), visible à l'écran ; il est précisé la couleur du fond de
la page (bgcolor), celle des liens (link), des liens déjà consultés (vlink), et des liens que
l'on vient de cliquer (liens actifs, alink) -->
<table border="1" width="100%" cellpadding="4" cellspacing="0">
<!-- Début du tableau : largeur de la bordure (border) 1 pixel, largeur (width) de la page
100% de l'espace disponible, marge intérieure des cases (cellules) 4 pixels, espace entre
les cases 0 pixel-->
<tr><!-- Délimite le début de la première ligne (unique) du tableau -->
<td width="33%" valign="top" align="left">
<!-- Début de la première colonne largeur 33% de la page, texte commençant en haut et
à gauche. La somme des largeurs (width) des cellules doit faire 100%, dans cette page
de trois colonnes : 33 + 33 + 34% = 100% -->
<p><!-- Début de paragraphe -->
<b><!-- Début texte en gras -->
INFORMATIONS MEDICALES : <!-- Titre première colonne -->
</b><!-- Fin du texte en gras -->
</p><!-- Fin du premier paragraphe, génère automatiquement une ligne vide -->
Comme vous pouvez le constater, j'ai pris la peine d'inclure dans le code de nombreuses remarques pour que vous puissiez comprendre plus facilement le code HTML de cette page volontairement très simple. En effet, vous ne rencontrerez dans le corps du document que les
quelques balises suivantes : Et enfin une balise particulière, unique, qui provoque un saut de ligne : <br> Je ne mentionne pas les balises contenue à l'intérieur des formulaires, que vous ne devez normalement pas manipuler. La seule chose un peu complexe est le fait que la balise de début <balise> peut contenir des informations complémentaires, comme la taille du tableau, ou la largeur d'une cellule, comme vous pouvez le constater dans l'extrait précédent. Voilà, vous en savez assez pour commencer à comprendre et manipuler du code HTML ! Deux remarques avant de continuer : - Les sauts de ligne et les lignes vides dans le code ne sont pas pris en compte à l'affichage dans le navigateur. Un saut de ligne manuel nécessite une balise <br>. La balise de fin de paragraphe </p> provoque un saut de ligne et une ligne vide automatiquement. - Les espaces blanc (barre d'espace au clavier) entre les balises ne sont pas pris en compte non plus. Pour créer un espace qui sera pris en compte par le navigateur, vous devez insérer un code spécial : Modifier le codePour modifier le code de votre page, il vaut mieux commencer par
des choses simples. Supprimer ou insérer du texteRien de plus simple. Modifions par exemple le titre de la première colonne : <p><!-- Début de paragraphe --> <b><!-- Début texte en gras --> INFORMATIONS MEDICALES : <!-- Titre première colonne --> </b><!-- Fin du texte en gras --> </p><!-- Fin du premier paragraphe, génère automatiquement une ligne vide --> Ouvrez dans votre navigateur votre Page Du Médecin enregistrée sur votre bureau (double-clic sur son icône). Choisir le menu Fichier/Modifier avec TextPad (si vous n'avez pas installé Textpad, allez d'abord sur cette page) Dans TextPad, localisez et effacez INFORMATIONS MEDICALES (portion de code
reproduite en rouge et violet plus haut) . Tapez à la place
MOTEURS MEDICAUX. (remarque : les couleurs du texte dans TextPad
sont différentes) Votre navigateur s'ouvre ou se met à jour sur votre Page Du Médecin modifiée ! Pour revenir à TextPad, fermez la fenêtre du navigateur. VOUS VENEZ DE FAIRE VOTRE PREMIERE PAGE WEB ! Vous voyez à quel point c'est facile ! Imaginez maintenant que vous vouliez insérer un titre en gras après le formulaire Google, par exemple : AUTRES MOTEURS Maintenant que vous avez compris le principe c'est facile : - Retournez dans TextPad - localisez la fin du formulaire Google : </form> <!-- fin formulaire Google Pour obtenir une recherche Google toutes langues, supprimer la ligne <input type="hidden" name="restrict" value="Français"> dans le formulaire ci-dessus--> Insérez dans cet espace entre la fin du formulaire Google et le
début du formulaire fast <!-- Début formulaire Fast --> <form method="get" action="http://www.alltheweb.com/cgi-bin/search"> Choisissez dans TextPad le menu Affichage/Dans le
navigateur ou cliquez sur le bouton Vous noterez que nous n'avons pas utilisé de balise de paragraphe <p></p> car les formulaires (encadrés par <form détails></form>) sont automatiquement suivis d'un saut de ligne et d'une ligne vide. Vous aurez parfois besoin de tâtonner pour savoir si vous incluez du texte dans un paragraphe, ou si vous utilisez des sauts de ligne manuels avec la balise unique <br>. Supprimer ou insérer un formulaireJe vous déconseille d'essayer de créer vous même un formulaire. Utilisez simplement la fonction copier-coller à partir de la boîte à outils. Vous irez y faire un tour après avoir terminé de lire cette page. Supprimer ou créer un lien :Un lien internet est un code simple qui utilise la balise a La balise <a> de début
de lien doit contenir l'adresse à laquelle réfère ce lien
: href"adresse" La balise de fin <a/> termine le code du lien qui est donc :
L'adresse exacte de la page doit être placée entre les guillemets de la balise du début. Par exemple, le site Atoute, dont l'adresse est http://www.atoute.org, se lie avec le code suivant :
Qui donne dans une page web : Atoute
Vous pouvez introduire un saut de ligne après le lien : <br>
Pensez à ne pas oubliez les guillemets autour de l'adresse, qui doit commencer par http://, ainsi que l'espace entre le a et le href Vous pouvez aussi utiliser le générateur automatique de code de liens. Entre les balises, les retours charriot (Enter) les tabulations et les espaces (Barre d'espace) ne sont pas pris en compte à l'affichage dans le navigateur. N'hésitez pas à en user et à en abuser pour aérer et bien présenter votre code, qui sera ainsi plus facile à relire et à modifier ultérieurement. Une dernière remarque : pour l'écriture des noms de balises, les majuscules et les minuscules sont indifférentes, mais prenez l'habitude d'utiliser des minuscules. <a> est équivalent à <A>, </B> à </b> etc. Supprimer ou créer des colonnes ou des lignes dans le tableauRemarque : modifier un tableau est la seule chose un peu complexe de cette "leçon" de HTML. Si vous souhaitez garder le tableau de trois colonnes tel quel pour l'instant (Les explications qui suivent concernent les versions 3 colonnes de la Page Du Médecin), vous pouvez sautez ce chapitre et passer directement à la boîte à outils. La structure du code d'un tableau de deux lignes comportant chacune trois cellules (cases) est la suivante : <table>(début de tableau) <tr>(début de première ligne)
<td>(début de la cellule 1)</td>(fin de la cellule 1) <td>(cellule 2)</td> <td>(cellule 3)</td>
</tr>(fin de la première ligne)
<tr>(début de deuxième ligne)
<td>(début de la cellule 1)</td>(fin de la cellule 1) <td>(cellule 2)</td> <td>(cellule 3)</td>
</tr>(fin de la deuxième ligne)
</table>(fin du tableau) Ce code donne exactement le même résultat que celui-ci (qui est identique aux espaces et aux retours charriot près). Mais toutes les balises pourraient aussi bien être alignées sur une seule ligne. <table> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> Si l'on prend la peine de préciser dans la balise initiale que l'on souhaite une bordure de 1 pixel de large : <table border="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> On obtient ceci : Tableau minuscule car les cellules sont vides et se sont adaptées à ce vide ! Si nous mettons quelque chose dans les cellules, celles-ci s'adaptent à la taille du contenu : <table border="1"> <tr><td>contenu de la cellule 1</td> <td>bonjour</td> <td>la compagnie</td> </tr> <tr><td>comment va ?</td><td>Très bien merci, j'apprends à faire des tableaux</td><td>!</td></tr> </table>
Pour le tableau de la Page Du Medecin, j'ai choisi les options suivantes dans la balise de déclaration du tableau :
Ce qui donne pour la première balise de tableau : <table border="1" width="100%" cellpadding="4" cellspacing="0"> Notez bien la syntaxe : il s'agit d'une balise de début de tableau : <table>, dans laquelle on a ajouté des compléments d'information sur le modèle : nom_du_complément="valeur" et un espace avant le complément suivant. Après la déclaration du tableau et la déclaration de la première ligne <tr>, les déclarations de cellule <td> contiennent elle aussi des compléments : <td width="33%" valign="top" align="left"> Ce qui signifie que l'on veut pour la première cellule une largeur (width) de 33% du tableau, que le texte démarre au sommet (top) de la cellule et non au milieu et qu'il soit justifié à gauche (left). Chacune des trois cellules du tableau a été définie de la même façon, si ce n'est que la troisième fait 34% de large pour que le total atteignent 100%. Le code complet du tableau est : <table border="1" width="100%" cellpadding="4" cellspacing="0">
<tr>
<td width="33%" valign="top" align="left">
</td>
<td width="33%" valign="top" align="left">
</td>
<td width="34%" valign="top" align="left">
</td>
</tr>
</table>
L'aspect du tableau sans contenu est le suivant, vous notez que la cellule de droite est légèrement plus large ;-): Aspects pratiques Si vous souhaitez ajouter une colonne, c'est à dire une cellule sur la ligne, il vous faut :
</p><!-- Fin du paragraphe -->
</td><!-- Fin troisième colonne -->
</tr><!-- Fin de la ligne unique du tableau --> </table><!-- Fin du tableau --> Si vous souhaitez ajouter une ligne, vous devez
<tr> <td width="33%" valign="top" align="left">
je pourrai écrire ici
</td>
<td width="33%" valign="top" align="left">
je pourrai écrire ici
</td>
<td width="34%" valign="top" align="left">
je pourrai écrire ici
</td>
</tr> En pratique, copiez le code ci-dessus, et collez-le à l'emplacement indiqué dans le code de la Page Du Medecin indiqué ci-dessous. </td><!-- Fin troisième colonne --> </tr><!-- Fin de la ligne unique du tableau --> Editez votre page avec TextPad et collez le code de la deuxième ligne ici </table><!-- Fin du tableau --> Voila, la leçon d'initiation au HTML est terminée. Si vous avez tout suivi avec attention, vous êtes bientôt mûr(e) pour faire votre propre site Web. Vous utiliserez alors un programme spécialisé, mais au moins vous comprendrez en partie le code que ce programme génèrera, ce qui n'est pas le cas de tous les webmasters ! SupportAucun support par mail n'est assuré pour les modifications de la Page du Médecin. Utilisez le forum dédié à cet usage pour poster vos remarques, questions techniques ou suggestions. Avant de poster une question, vérifiez dans le moteur de recherche inclus dans le forum qu'elle n'a pas déjà été posée. Ce moteur de recherche tient lieu de FAQ. |
|||||||||||||||
ce qui revient au même.