1)Les bases du HTML

 

 

Les bases du langage HTML

        L’écriture des pages web est basée sur un langage nommé HTML (HyperText Markup Language). C'est un langage de description et non pas un langage algorithmique : il permet de décrire un document hypertexte de façon à ce qu’il soit lisible sur n’importe quel ordinateur connecté à internet. Un hypertexte est simplement un ensemble de documents reliés les uns aux autres par des liens cliquables (ces liens qui apparaissent en bleu souligné et sur lesquels on clique frénétiquement...)

        Le langage HTML est basé sur l’utilisation de balises (tags en anglais). Une balise est un code placé entre les caractères ' < ' et ' > '. Pour créer votre première page web, lancez un simple éditeur de texte (par exemple le bloc-notes de Windows dans le menu 'Démarrer/Programmes/Accessoires'). Tapez à l'identique le code HTML ci-dessous et sauvegardez-le sous le nom essai.html :

 

       Attention ! Vous veillerez toujours à ce que vos noms de fichier ne comportent que des minuscules sans accents, espaces ou caractères spéciaux, afin d'éviter tout problème avec certains systèmes informatiques. En effet, si Windows ne distingue pas majuscules et minuscules, ce n'est pas le cas de Linux. Or, de nombreux serveurs utilisent Linux.

        Maintenant, allez dans votre gestionnaire de fichier et double-cliquez sur le fichier essai.html. Celui-ci doit normalement s'ouvrir dans votre navigateur préféré. Voici ce que vous devez obtenir :

  1er essai

        Si votre page ne s'affiche pas ainsi, c'est que vous avez fait des erreurs. Voici les plus courantes :

  • vous avez introduit des espaces dans les balises, par exemple < html> ou
  • vous avez oublié de fermer une balise, par exemple
  • vous avez oublié le '/' de la balise fermante, par exemple au lieu de

        Avant d'aller plus loin, observez le résultat, comparez avec le code que vous avez tapé et essayez de deviner la signification de chaque balise (.

        Voici quelques balises et leur effet :

et

 

Encadrent un paragraphe. Deux paragraphes successifs sont séparés par un passage à la ligne.

et

 

Encadrent un titre de niveau 1 (header).

 

et

 

Encadrent un titre de niveau 6.


Passe à la ligne suivante (break) tout en restant dans le même paragraphe.

et

Le texte encadré est en gras (bold).

et

Le texte encadré est en italique.

et

Le texte encadré est souligné (underligned).

   

        Reprenez votre fichier essai.html et essayez d'y apporter quelques améliorations en utilisant les balises ci-dessus. Essayez par exemple de mettre le mot 'paragraphe' en gras et le mot 'page' en italique. Sauvegardez le fichier et chargez-le à nouveau dans votre navigateur.

            Problème des caractères accentués

        Vous avez peut-être remarqué que nous n'avions pas mis d'accent dans notre premier essai. Si vous voulez que votre texte soit lisible dans n'importe quelle région du monde, mieux vaut savoir que les caractères spéciaux ou spécifiques à une langue donnée sont codés d'une manière particulière :

  • le ' é ' est représenté par le code ' é '
  • le ' è ' est représenté par le code ' è '
  • le ' ê ' est représenté par le code ' ê '
  • le ' à ' est représenté par le code ' à '
  • etc.

        Par exemple, modifiez votre fichier essai.html de la façon suivante :



  



  

Premier titre   


  

Ceci est le premier paragraphe de la page.


  

Première partie


  

Ceci est le deuxième paragraphe, à vous de jouer !

 

 
   

       Vous devriez obtenir le résultat suivant :

 

 

        Remarquez les accents, les mots 'premier' en italique et 'vous' en gras. Pour plus de précisions sur les accents et caractères spéciaux, vous pouvez consulter la page ci-dessous :
http://www.ccim.be/ccim328/html/speciaux.htm

                Liens hypertexte

        Le principe fondamental du Web est l’usage de liens hypertextes, qui apparaissent généralement en bleu souligné à l’écran. Il en existe trois types :

  • Lien vers une autre page du site.
  • Lien vers un autre site.
  • Lien vers un autre endroit d’une même page.

Nous ne nous intéresserons qu'aux deux premiers :

               1) Lien vers une autre page du site:

Ajoutez dans votre fichier HTML la ligne suivante :

Lien vers une autre page

Le ' A ' signifie ancrage et ' HREF ' signifie Hypertext Reference. Une telle ligne de code crée un lien vers une page contenu dans le fichier ' autrepage.html ' et apparaît généralement dans le navigateur en bleu souligné : Lien vers une autre page

        Créez donc une seconde page autrepage.html sur le même modèle que la première et insérez-y un lien vers la première page. Vous pourrez alors naviguer de l'une à l'autre.

               2) Exemple d’un lien vers un autre site:

        Ajoutez la ligne suivante dans l'une de vos pages :

Serveur de l'EUDIL

        Vous avez ainsi créé un lien vers le site de l'EUDIL.

               Mise en page:

        Alignement du texte:

        Pour aligner le texte, on peut définir l'attribut ALIGN à la balise de début de paragraphe :

  • pour aligner à gauche.

  • pour centrer le texte.

  • pour aligner à droite.

               Insertion d’une image:

        Une particularité importante d'un hypertexte est l'inclusion de documents multimedia tels que des images, des sons, des vidéos, etc. Ajoutez dans l'une de vos pages la ligne suivante et ajoutez dans le même répertoire un fichier image de type GIF que vous appellerez logo.gif :

        Si vous n'avez pas d'image de type GIF, vous pouvez simplement récupérer le logo Polytech'Lille qui se trouve en haut à gauche de la page d'accueil de ce cours. Pour cela, cliquez dessus avec le bouton droit de la souris et choisissez 'Enregistrer l'image sous...'

        Cette ligne de code permet d’insérer dans le document une image enregistrée dans le fichier ' logo.gif '. Les attributs ' HEIGHT' et ' WIDTH' permettent de définir la taille en pixels de l’image. Si vous connaissez cette taille, il est conseiller d'utiliser ces attributs : vous accélérerez ainsi l’affichage de la page car le navigateur pourra effectuer la mise en page avant que les images soit complétement chargées. Notez qu'il est également possible de redimensionner une image en indiquant la taille voulue.

        L’attribut ' ALT ' associe à l’image un texte alternatif destiné à être affiché en lieu et place de celle-ci lorsque le navigateur est configuré pour ne pas charger les images (diminution du temps de chargement).

        Afin de limiter le temps de chargement, la taille des images doit de préférence être inférieure à 10 Ko (avec un modem classique, on charge en moyenne 2 ou 3 Ko par seconde). Il peut donc être nécessaire de redimensionner celles-ci au plus juste (pas la peine d’avoir des images en 800x600 pixels !) avec un logiciel spécifique tel que Paint Shop Pro (Shareware) ou The Gimp (gratuit). De plus, on utilise généralement des formats d’images compressés tels que le format GIF entrelacé (v89a-interlaced) pour les images du type dessin, et le format JPG progressif pour les images du type photo (avec un taux de compression bien choisi). Le format PNG se répend également. Et l'on attend avec impatience le JPEG2000 !

               Comment imposer un fond de page ?

         Il suffit d'ajouter un attribut 'background' dans la balise . Par exemple, la page que vous êtes en train de lire utilise comme fond de page l'image 'papier.jpg' :

    Enfin, je vous laisse réfléchir à la façon de transformer une image en un lien HTML. Un indice : les balises HTML peuvent s'imbriquer.

            Universalité du HTML ?

        Si vous avez accès à différents navigateurs ou différents systèmes d'exploitation, visualisez vos fichiers HTML successivement avec par exemple :

  • Nestcape ou Mozilla sous Windows
  • Internet Explorer sous Windows
  • Nestcape ou Mozilla sous Linux

        Vous vous rendrez compte que le résultat n’est pas toujours exactement identique suivant le système d’exploitation utilisé, le navigateur et le mode graphique de votre écran. Le HTML ne permet pas pour L’instant de maîtriser complètement l’apparence d’un document.

              Pour aller plus loin avec HTML:

        De temps en temps, regardez le code HTML des sites que vous visitez. Si vous utilisez Netscape ou Mozilla, allez dans le menu 'Afficher' puis sélectionnez 'Source de la page'. Avec Internet Explorer alez dans 'Affichage / Source'. Une fenêtre s'ouvre alors et vous présente le code de la page. En devinant l'usage de certaines balises vous apprendrez beaucoup. Vous pourrez également faire du copier/coller afin de réutiliser des morceaux de code dans vos pages.

        Pour aller plus loin, vous pouvez consulter les sites suivants en français :





Page suivante

       

       


Créer un site gratuit avec e-monsite - Signaler un contenu illicite sur ce site