Vous trouverez dans cette page, comment construire pas à pas, les pages de votre tutoriel
Il n'est pas nécessaire d'apprendre tout le langage html, car nous n'utiliserons que très peu d'instruction de celui-ci Le code html se présente sous la forme de balises
Une balise se présente sous la forme de mots-clefs, placés entre les caractères < et > La signification d'une fin de balise se fait avec le signe /
Par exemple, <html> ... </html> correspond à la balise html. Entre la balise html de début, et la balise /html de fin, on trouvera d'autres balises, comme head, tittle...
Pour alléger la notation, on ne fait pas toujours figurer les signes < et > dans les tutoriels. ON utilise aussi le mot "tag" au lieu du mot "balise", pour désigner ces instructions du langage html. Certaines balises comme <br> n'ont pas de balise de "fin" La balise <br> permet d'aller à la ligne. De même, la balise <p> permet de sauter une ligne, pour marquer un début de paragraphe. ces 2 balises sont maintenant obsolètes, et l'on utilisera de préférence la balise :
<p> ... </p>
pour indiquer le début et la fin d'un paragraphe.
Plutôt que d'apprendre par coeur la syntaxe pour l'écriture d'une balise, le plus simple est de consulter la source d'un fichier .html Ceci peut se faire dans internet explorer, en choisissant source dans le menu affichage
On peut alors lire le contenu du fichier .html, dans l'éditeur bloc note de WINDOWS.
Faites maintenant cette démarche, en utilisant par exemple le raccourci ALT + A puis S. (ou ALT + H puis S suivant la version d'internet explorer !)
Lisez le fichier tutor3.html. Quittez le bloc note par ALT + F4, sans sauver les modifications que vous auriez pû faire.
Remarque : de toute façon, ces modifications ne sont pas prises en compte, car le fichier qui se trouve sur le serveur est protégé en écriture.
Si vous avez fait la lecture comme indiquée, vous avez remarqué des instructions écrites entre soufflets. Ce sont les balises (ou tags) du langage html. Elles n'apparaissent pas quand on lit la page, dans le navigateur, mais on peut les lire, quand on envoie la source .html dans un éditeur de texte, comme le bloc note.
Pour construire une page, on peut choisir une source .html par ALT + A puis S, la modifier dans le bloc note, puis enregistrer les modifications, en utilisant dans le bloc note, le menu Fichier et enregistrer sous un nom de fichier Vous allez mettre en pratique ces remarques, en suivant les indications qui suivent
J'ai construit pour vous, le fichier modele.html, qui contient le squelette d'une page de tutoriel Pour voir sa source, activez le lien modele.html, puis faites ALT + A puis S pour voir sa source dans le bloc note puis fermez le blocnote par ALT + F4 puis revenez dans cette page par ALT + FLECHE_GAUCHE ou par le lien retour à la page conseils pratiques
Faites maintenant les actions indiquées ci-dessus
modele.html : activez ce lien modèle
après avoir lu les instructions qui précèdent
Si vous avez suivi scrupuleusement les indications précédentes, vous avez pû voir dans la source modele.html, les balises suivantes :
html ... /html
head ... /head
tittle ... /tittle
body ... /body
a href="..." ... /a
Leur signification est assez simple
html signifie que l'on écrit du code html entre la balise de début, et la balise de fin, notée /html
head permet d'écrire des instructions valables dans tout le corps du document. Ici, on a simplement placé dans la balise head, la balise tittle, qui permet d'indiquer le titre de la page
La balise body contient le corps du document
Dans ce corps, on a placé 2 liens, matérialisés par des balises a href...
a signifie adresse, et href permet d'indiquer quel est le chemin du fichier qui correspond au lien Pour un lien avec une page d'un site sur le web, on utilisera http:www. dans l'écriture de son chemin. Pour ses pages personnelles, on utilisera des noms de fichiers avec leur suffixe, en plaçant tous ces fichiers dans un même répertoire Par exemple, tous les liens de ce tutoriel, sont indiqués par des noms de fichiers, qui sont tous placés dans le répertoire tutor, sur le serveur
On y trouve tutor_sommaire.html tutor_1.html tutor_2.html...
Les illustrations sont définies par les liens avec les fichiers raccourci.html modele.html...
Il est conseillé d'utiliser un même préfixe, pour désigner toutes les pages d'un même tutoriel. Ici, j'ai choisi le préfixe tutor. Pour un tutoriel sur le langage c++, on pourrait choisir par exemple, le préfixe cpp.
Le choix d'un préfixe est pratique, pour permettre de copier toutes les pages, sans copier les illustrations.
En résumé, vous avez appris dans cette page, comment consulter et modifier la source d'une page.
Vous avez remarqué que les balises apparaissent dans la source html, par des instructions, placées entre soufflets. Vous verrez plus loin comment les réaliser. Il vous reste maintenant à mettre en pratique ces remarques.
Dans le lien suivant, vous construirez votre premier tutoriel.
suivant : mon premier tutoriel
retour dans le sommaire de la rubrique tutor du site studyvox webups