TUTORIEL BASIQUE POUR LE HTML

PAR MATTIAS REFEYTON

1) Introduction

Le HTML est un langage très simple à apprendre. Une journée est seulement nécessaire pour connaître le langage relativement bien. C'est un langage de rédaction de page WEB, c'est à dire qu'il ne sert pas à créer des programmes, mais à rédiger des textes et participer à la mise en forme de pages WEB, avec le CSS (Cascading Style Sheet) et le JS (JavaScript). Il est composé de balises pour situer et mettre en forme le texte entré. Il ne contient pas de fonctions comme la fonction ECHO du BAT. Par exemple, cette page est entièrement écrite en HTML (pour voir le code source, appuyer sur CTRL+U ou allez dans AFFICHAGE/CODE SOURCE DE LA PAGE si vous êtes sur FireFox ou AFFICHAGE/SOURCE sur IE et vous verrez ce que j'ai dû taper pour que cette page s'affiche comme telle).

2) Structure et habillage du texte

Pour souligner : <u>texte</u> Pour barrer l'écriture : <s>texte</s> Pour écrire en italique : <i>texte</i> Pour écrire en gras : <strong>texte</strong> ou <b>texte</b> Pour afficher les balises comme il a été fait dans ce texte, sans qu'elles s'exécutent : &lt;balise&gt;&lt;/balise&gt;

3) Balises principales

3.1) Principes de base

Balise : Elément (souvent lettre ou groupe de lettres) entouré de < > pour ouvrir la balise, et de </ > pour la fermer. Chaque balise a une fonction/utilité. Voir Structure et Habillage du texte pour exemples. Une ouverture et une fermeture de balise ne sont pas nécessairement placés sur la même ligne. Exemple : "<b>Bonjour, ça va ?</b>" est graphiquement correct et si vous le tapez sur un document HTML, ça donnera : Bonjour, ça va ? Le nom d'une balise est toujours écrit en minuscules. Ouverture d'une balise : <balise> (texte) Obligatoirement suivi par : (texte) </même balise> Commencement du document HTML (obligatoire): <html> (contenu du document) Fermeture du document HTML (obligatoire) : (contenu du document) </html> Commencement de l'en-tête : <head> (en-tête) Fermeture de l'en-tête : (en-tête) </head> Commencement de l'aire d'entrée du titre : <title> (titre de la page) Fermeture de l'aire d'entrée du titre : (titre de la page) </title> Commencement du corps de la page WEB : <body> (texte à afficher sur la page) Fermeture du corps : (texte à afficher sur la page) </body>

3.2) Balises

Sur Eclipse (éditeur C/C++ ; C# ; JavaScript ; PHP ; HTML ; CSS ; Ruby ; TCL/iTCL ; Fortran/Phortran téléchargeable ici), on peut obtenir le nom de toutes les balises pendant que vous éditez en HTML seulement. Appuyez sur CTRL+SPACE, et naviguez avec les flèches pour voir les balises et leurs définitions. ATTENTION cependant, vous pouvez très bien coder en HTML sans utiliser Eclipse, avec n'importe quel traitement de texte, et l'enregistrer sous le nom de votre choix tout en lui ajoutant l'extension .html

3.3) Exemples

Il faut savoir qu'un document HTML s'affiche sur les navigateurs : Internet Explorer Mozilla Firefox Opera Google Chrome Safari Mais toutes les balises ne sont pas supportées par lesdits navigateurs. Et d'autres supportent d'autres attributs dont il n'a pas été question dans ce tutoriel basique. EXEMPLES : Dans un traitement de texte (ou autre support) entrez le code suivant : <html> <head> <title>SWP</title> <body> Ce programme est un essai. </body> </head> </html>
    Enregistrez-le sous le nom
exemple1.html
    Et lancez-le en double-cliquant dessus. Si on vous demande comment l'ouvrir, cliquez sur "Choisir un programme dans la liste" et
         choisissez Internet Explorer.
         Vous avez créé votre 1er programme !
         N.D.A : J'ai choisi le titre SWP car il signifie Static Web Project, c'est-à-dire une page WEB fixe, que vous avez créée.