Top Maroc
 
Annuaire et Classement

 Cours HTML débutant PART 1

21/12/2009

                                     

 

                                  Cours débutant sur le langage HTML

 

 

 Plan du cours

 

  Ce cours est réalisé sur des machines sous système unix et n'a pour but, que celui de permettre, aux personnes le lisant ou suivant le cours donné par des membres du C.I.C.R.P, de pouvoir réaliser une page en langage HTML simple, contenant du texte, des images et des liens hypertextes.

 

I Introduction

II Ma première page en HTML

 

II.1 Qu'est ce que le langage HTML ?

II.2 Comment structurer une page HTML ?

II.3 Les formats de Texte

II.4 Comment insérer une image au texte ?

II.5 Utilisons l'hypertexte et réalisons nos premiers liens

II.6 Compliquons et réalisons un tableau

II.7 Comment mettre un fond à sa page ?

II.8 Ajouter son adresse électronique

II.9 Les mots clés importants

III Conclusion

 

 

I Introduction

HTML signifie HyperText Markup Language. Ce langage permet de presenter des informations d'ordre privé ou publique accessibles de n'importe quel endroit du monde et pouvant rassembler des textes, images et autres de sources géographiquement éloignées.

Pour cela, bien entendu, vous devez avoir accès à internet et utiliser un butineur ou navigateur ou browser selon l'appellation du pays.

 

Pourquoi faire une page en langage HTML ?

 

 

C'est un nouveau moyen de communiquer. Cela vous permet de présenter vos travaux, que se soit pour un enseignant ou un étudiant. Ce que vous réalisez peut être visible du monde entier ce qui augmente considérablement le nombre de personnes qui peuvent être intéressées ou qui peuvent vous apporter des informations sur le sujet que vous traitez.

 

Quel autre moyen peut aussi simplement vous permettre d'allier du texte à des graphiques, des images et ainsi rendre beaucoup plus attrayant la lecture d'un document ?

 

Comme pour toutes constructions importantes il est nécessaire de participer et de mettre sa pierre pour agrandir l'édifice. Il est très intéressant de regarder, de sauter de pages en pages, mais dans ce cas votre attitude est une attitude passive. Si vous créez votre page, sur n'importe quel sujet, vous devenez actif et là votre contribution à cet édifice, même minime, permet de faire avancer le tout.

 

Il est toujours agréable de créer et d'apprendre.

 

Il est important lorsqu'un nouveau moyen de communication se crée de l'utiliser pour ne pas être, surtout en informatique oš tout va très vite, laissé de coté et très vite dépassé. Il est étonnant de voir le peu d'intérêt que suscite l'internet dans son ensemble en France par rapport aux autres pays (USA, Angletterre ...).

 

Les possibilités qu'offrent ce moyen de communication sont gigantesques, il est nécessaire de l'utiliser.

II Ma première page en HTML

La création d'une page web en langage HTML n'est pas très compliquée car ce dernier, en restant dans la limite du raisonnable (sans programmation annexe), est très simple et ne nécessite aucun "don particulier". Le plus long, lors de la création est de rechercher les éléments (texte, icÙnes ...) à insérer puis de réaliser la mise en page du document (couleur, disposition ...).

 

Nous allons donc commencer, pour cela lancez votre butineur (netscape le plus souvent) et ouvrez un fichier avec votre éditeur préféré (vi, asedit ...) ayant l'extension html ou htm.

 

Attention :

Les butineurs utilisent un cache qui permet de recharger une page, image ... déjà consultée sans devoir pour cela faire une requête réseau afin de la rechercher. Ceci implique qu'en cas de modification vous pouvez conserver l'ancienne version et ne pas voir les modifications qui lui ont été apportées malgré un "reload". Je vous conseille donc lorsque vous developpez une page de mettre vos caches à zéro, ainsi les éléménts seront rechargés à chaque lecture et seront donc à jour.

Pour cela allez dans "options" puis "preferences" (netscape Version 1) ou "general preferences" (netscape Version 2) puis "cache and network" (Version 1) ou "Network Preferences" (Version 2).

II.1 Qu'est ce que le langage HTML ?

Le langage HTML est un langage à balises :

texte

Chaque balise a une signification particulière. Les éléments qui se trouvent entre ces balises seront affectés par ce balisage.

Exemple :

En italique  En italique

Remarque :

Si vous oubliez de fermer une balise elle affectera tout le reste du texte tant qu'une autre du même type ne prend pas le relai.

 

 

II.2 Comment structurer une page HTML ?

Même si vous ne respectez pas cette structure, votre page sera lisible par un butineur mais par contre vous aurez peut être vous du mal à relire le code de votre page car cela risque d'être le bazar. Il est donc préférable de prendre de bonnes habitudes dès le début et de structurer vos pages de la faÁon suivante, afin de vous offrir une meilleure lisibilité :

 

  début du document 

  entête du document 

........ 

  Fin de l'entête du document 

  corps du document 

........ 

  Fin du corps du document 

  Fin du document 

 

Les balises HTML indiquent que le document est dans ce langage.

 

Entre les balises HEAD vous devez mettre tout ce qui concerne l'environnement de votre page, le titre, les couleurs du texte, des liens et autres informations. Ces éléments n'apparaissent pas directement dans la page.

 

Entre les balises BODY vous insérez les éléments qui constitueront votre page, les informations texte, images, liens, le fond d'écran si c'est une image ...

 

Afin de vous repérer dans vos pages il est conseillé d'utiliser des majuscules pour tout ce qui est balise et mot clé du langage. De cette faÁon vous augmentez la lisibilité de votre document source.

 

Vous pouvez aussi insérer des commentaires afin de marquer les parties importantes de votre document source.

Les commentaires sont définies par la balise suivante :

 

Il est aussi nécessaire de signer toutes vos pages afin que les personnes qui les consultent, connaissent l'auteur et puissent le joindre.

 

Il est aussi trés apprécié de dater ses pages en insérant la date de la dernière modification ainsi au premier coup d'oeil il est possible de déterminer si de nouvelles informations sont disponibles depuis la dernière consultation.

 

Toutes ces recommandations vous permettrons de respecter la fameuse "netiquette".

 

Exemple d'une page html simple

II.3 Les formats de Texte

L'exemple précédent n'a rien de très exitant que ce soit par son contenu mais aussi surtout par sa mise en page. C'est pourquoi nous allons voir maintenant ce qu'offre le langage HTML, dans un premier temps pour du texte, pour égayer la présentation.

Attention : le type de couleur, de caractères utilisés peuvent donner l'impression que la balise n'a pas d'effet.

 

Les différents formats de texte : en gras   en gras

en italique   en italique

citation   citation

style machine   style machine

affiche un exemple   affiche un exemple

texte rayé   texte rayé

caractère épais   caractère épais

texte qui clignote   texte qui clignote

texte en relief  texte en relief

 

 

Taille 1

Taille 1

Taille 2

Taille 2

Taille 3

Taille 3

Taille 4

Taille 4

Taille 5
Taille 5

Taille 6
Taille 6

Bien évidemment les balises peuvent être combinées :

Italique et rayé Italique et rayé

Les accents : à  à

 

â   â

 

ç   ç

 

é   é

 

è   è

 

ë   ë

 

ê   ê

 

ï   ï

 

ö   ö

 

ô   ô

 

ù   ù

 

û   û

 

 Vous pouvez aussi les tapez directement sur votre clavier mais attention si une personne n'utilise pas le même codage de caractères que vous (ici isolatin1) il ne verra pas ces accents et cela risque de perturber son affichage. Il est donc plutÙt conseillé d'utiliser, même si cela est plus lourd, la syntaxe précédente.

Les paragraphes :

Si vous avez un texte déjà écrit et que vous voulez le mettre sur une page il peut être long de devoir le reformater en HTML afin d'avoir la même présentation (ajout de
à chaque fin de ligne, repositionner le texte ...). Vous pouvez utiliser alors une balise très pratique qui conservera le format originel de votre texte.

Texte formaté

 

Vous pouvez aussi directement formater votre texte en titre, sous-titre ... précédés d'indication de niveaux (Un caractére ou un numéro).

La balise

    ou
      permet de définir le niveau.

      En combinant ces balises vous définissez plusieurs niveaux d'affichage.

      La balise

    • permet de définir le type d'indication de niveau voulu (caractère ou numéro).

       

        Entete du document

      1. Titre

        1. Sous-titre

        2. Sous-titre

      2. Titre

         Entete du document

      Titre

      Sous-titre

      Sous-titre

      Titre

       

       OU

       

        Entete du document

      • Titre

        • Sous-titre

        • Sous-titre

      • Titre

         Entete du document

      Titre

      Sous-titre

      Sous-titre

      Titre

       

       

      II.4 Comment insérer une image au texte ?

      Vous devez utiliser la balise . Cette balise peut être agrémentée d'options de positionnement.

      Les images doivent être au format gif ou jpg.

        

       

      Afin de positionner le texte par rapport à l'image vous pouvez ajouter à la balise l'option d'alignement ALIGN=TOP|MIDDLE|BOTTOM|LEFT|RIGHT|CENTER.

        la flèche est au-dessus du texte

       

      Remarque :

       

      Vous avez deux possibilités pour insérer une image :

       

      L'image est sur votre compte

      L'image est sur un autre site

      Le premier cas utilise de l'espace disque mais très peu de ressource réseau à l'inverse du deuxième cas. Mais attention dans le deuxième cas si le site distant n'est plus accessible ou si le chemin d'acces vers l'image à été modifié vous vous trouverez avec un ralentissement conséquent lors du chargement de la page et d'une icÙne  comme celle-ci.

      Attention au copyright.

      II.5 Utilisons l'hypertexte et réalisons nos premiers liens

      Pour le moment nous avons réalisé une page simple contenant du texte et une image. Mais l'un des intérêts de ce langage est de pouvoir réaliser des documents pointant vers d'autres documents et ainsi d'explorer une nouvelle dimension.

      La balise est :

      Zone cliquable

      Lorsque vous cliquez sur "Zone cliquable", votre butineur charge la page référencée par "adresse".

      Cette page peut être, sur votre serveur comme à l'autre bout du monde, mais pour vous ce sera transparent.

      Réalisons un lien sur google.

      Google Google

       

       

    • Category : Cours débutant sur le langage HTML | Write a comment | Print

      Comments

      | Contact author |
      Moteur de Recherche. Inscription Gratuite.
      Le Moteur
      Recherche-Web