Le HTML

Créer votre première page
 

Le HTML (Hypertext Markup Language) est un langage utilisé pour créer des pages Web et pour créer des liens entre elles. Il est très utilisé sur Internet et il est lu avec un navigateur Internet.

Nous allons créer une page web en utilisant le BlocNote. Le BlocNote est installé sur tous les systèmes Windows. Ouvrez le BlocNote en cliquant sur Démarrer/Tous les programmes/Accessoires et cliquez sur BlocNote.

Le BlocNote s'ouvre.

Le HTML est constitué de balises. La plupart de ces balises ont une balises "ouvrante" et "fermante". La première balises sert à identifier votre fichier comme une page HTML.

  C'est la balise ouvrante HTML. C'est la premiere ligne de votre page Web. Toutes les balises sont entourées de ces symboles < >. Tous ce qui se trouve entre ces symboles ne sera pas affiché dans le navigateur.

C'est la balise fermante HTML. C'est la derniere ligne de votre page Web. C'est une balise fermante car elle contient un slash "/".

Maintenant que votre page web est définie, il faut écrire les différentes parties en utilisant toujours des balises HTML.



Cette balise définie l'en-tête de votre page. C'est ici que votre titre et vos paramètres doivent être mis.

C'est balise définie le corps de votre site, c'est la que se trouvera votre texte et vos images.

 


Pour donner un titre à votre page: Le titre apparait en haut de la fenêtre du navigateur. Votre balise titre doit se trouver dans votre en-tête (entre et ).

 


Ma première page Web


C'est ici que vous mettez votre texte, ce qui apparaitra dans le navigateur.

 

Le texte entre les balises TITLE est votre titre. Vous noterez que les balises peuvent être ouvertes et fermées sur la même ligne. Tout le texte que vous taperez entre les balises BODY s'affichera tel-quel dans votre navigateur.

Maintenant sauvegardez votre fichier: Cliquez sur Enregistrer-Sous et apres le nom du fichier, mettez l'extension .html . Si vous appelez votre page test le nom sera test.html.

Vous pouvez maintenant afficher votre page à l'aide de votre navigateur. Ouvrez votre navigateur (Internet explorer par exemple ou Netscape). Vous n'avez pas besoin d'être connecté à internet pour afficher votre page (elle est dans votre machine pas sur le web).

Quand votre navigateur est ouvert, faites fichier/ouvrir. Indiquez ensuite où se trouve votre fichier (l'endroit où vous venez de l'enregistrer). Cliquez sur OK quand vous avez réussi à retrouver votre fichier.

Maintenant vous devriez voir votre page web dans votre navigateur.

Félicitations, vous venez de creer votre première page Web.

 

Mise en page du texte

Si vous voulez commencer une nouvelle ligne, vous devez définir cela avec une balise. < P > commence une nouvelle ligne. N'oubliez pas de fermer vos balises.

 


Ma page Web


C'est ici que vous entrez votre texte

Ce qui est écrit ici apparaitra sur la ligne suivante.


 

 

Cliquez ici pour voir ce que ça donnerait

Vous pouvez changer l'aspect visuel de votre texte en changeant sa taille. Vous pouvez faire ça avec la balise pour définir la police. Si vous voulez changer la taille tapez . Le HTML défini les tailles autrement que les traitements de texte comme WORD, au lieu d'utiliser une taille de 12 pt en HTML on mettra une taille de 3. La taille 3 est celle utilisée par défaut. Les tailles peuvent aller juque 7 au maximum et au minimum jusque 1. Si vous ne définissez pas de taille, celle de 3 sera retenue.

  

Vous pouvez aussi augmenter la taille d'origine en utilisant +1ou de la même manière la diminuer en utilisant -1. Si vous êtes en taille 1 vous pourrez aumaximum utilisez +6 pour augmenter la taille à 7.

  

Essayons des tailles différentes. Souvenez vous que vous pouvez copier le code directement dans le BlocNote plutôt que de le saisir vous-même.

  

 

  


Ma Page Web

  


Taille 1.


Taille 2.

 

 


Taille 3.

 

 


Taille 4.

 

 


Taille 5.

 

 


Taille 6.

 

 


Taille 7.

 

 


 

 

  

 

  

Cliquez ici pour voir ce que ça donnerait

  

Si vous sauvegardez cette page avec le même nom (test.html), vous n'aurez pas besoin de réouvrir la page dans votre navigateur (si vous avez laissé ouvert le navigateur montrant le test précédent), Cliquez simplement sur le bouton actualiser de votre navigateur et cela affichera directement votre nouveau test.html.

  

La balise FONT peut aussi contenir une couleur et un style. Mettra votre police en rouge. Vous pouvez entrer différentes couleurs (en anglais), et entrez les entre des guillemets "".

  

Définir un style de police est un peu plus compliqué car vous ne savez pas quels styles de police a la personne, qui regarde votre page, sur son ordinateur. Si vous indiquez une police que l'ordinateur de votre "spectateur" n'a pas, il verra la page avec la police par défaut. Heureusement, le HTML vous permet de stipuler plusieurs polices alternatives. La balise Indique 4 styles de polices par ordre de priorité. Si Garamond n'est pas disponible, le navigateur choisira Times; si Times n'est pas disponible il choisira Times Roman et ainsi de suite.

  

En utilisant la taille, la couleur et le styles vous pouvez formatter votre police:

  

 

  


Ma Page Web

  


Le formattage de vos balises textes peut être très utiles.

Particulièrement si vous voulez changer la taille, la couleur ou le style de votre texte.

  

 

  

Cliquez ici pour voir ce que ça donnerait

  

Il y a beaucoup d'autres balises qui vous permettent d'éditer vos polices de diverses manières. Par exemple, vous pouvez mettre en gras votre texte en utilisant la balise <"bold"> ou < B > ou mettre en italique en utilisant des < ITALICS > ou < I >. N'oubliez pas de fermer ces balises pour indiquer la fin du gras ou italique.

  

La balise < CENTER > alignera le texte au centre de la page. N'oubliez pas de fermer: .

  

Vous pouvez même mettre votre texte en indices ou en exposant en utilisant les balises < SUP > et < SUB > .

  

Le HTML vous permet également d'utiliser la fonction de strikethrough. la balise barrera le texte à l'intérieur de cette balise. Employez ceci pour montrer le texte qui a été supprimé.

  

Un autre paramètre, la balise souligné, peut preter à confusion si elle n'est pas utilisée correctement: < U > ajoutera un souligné au texte qui se trouve dans cette balise. Le HTML définit également des liens en les soulignant alors si vous voulez être sûr les personnes accédant à votre page comprennent que vous ne montrez pas un lien, utilisez cette balise prudemment. 

  

Vous pouvez noter que nous avons maintenant un peu plus de code HTML dans notre BlocNote et pour mieux vous y retrouver vous pouvez ajouter des commentaires cachés. Les commentaires cachés sont un texte que vous pouvez lire dans le code HTML mais n'apparaîtront pas sur votre page Web. Pour ajouter des commentaires cachés, dactylographiez votre texte entre la balise d'ouverture .

  

Essayez ces balises maintenant. Vous pouvez copier directement le code ci-dessous dans votre BlocNote.

  

 

  


Ma PageWeb

  

 

  

 

Formatter vos balises texte peut être très utile.

  

 

Je suis à la 3eme pour mon projet sur H2O.

 

 

  

 

J'aime les nouillesle riz

 

 

  

 

Ceci n'est pas un lien.

 

 

  

  

 

  

 

  

Cliquez ici pour voir ce que ça donnerait

  

Souvenez vous que votre navigateur ne met pas a jour tout seul la page quand vous enregistrez une nouvelle version de test.html, vous devrez cliquer sur le bouton actualiser de votre navigateur après enregistrement.

  

Maintenant que vous pouvez changer votre police vous voulez certainement pouvoir changer l'aspect général de votre page. La manière la plus rapide et la plus simple est de changer la couleur de fond.

  

Vous changez la couleur de fond dans la balise BODY. < BODY BGCOLOR="green "> vous pouvez encore employer une des 16 couleurs de base que le HTML reconnait. Alors que vous changez votre couleur de fond, il est important d'être sûr que vous pouvez toujours lire le texte sur vous page. Si vous avez un fond de couleur foncée, changez votre couleur de police en couleur claire.

  

 

  


Ma Page Web

  


C'est pas beau ça ?

 

 

 

Cliquez ici pour voir ce que ça donnerait

 
 

 

 

insèrer une image

 

Une Page Web avec du seulement du texte peut être jolie mais ennuyeuse. Ajouter des images peut ajouter une dimension supplémentaire.

 

Avant d'ajouter une image, vous devez être sûr qu'elle est dans un format supporté par le HTML. HTML supporte différents types d'image, mais principalement, le JPEG, le GIF et le BITMAP (BMP).

 

La taille du fichier est à prendre en considération. Un fichier de taille importante sera plus long à charger et vos "spectateurs" risquent de ne pas avoir la patience d'attendre. En reduisant la taille physique de votre image, cela reduira automatiquement sa taille de fichier sans compromettre la qualité.

 

Pour insèrer une image, il faut utiliser la balise image (IMG). La source de l'image (SRC) est l'endroit où elle se trouve et le nom de cette image. Une balise image N'A PAS BESOIN de balise fermante.

 

 

La balise ci-dessus indique que image.gif se trouve dans le même dossier que test.html. Si l'image se trouve dans un dossier images, lui-même situé dans le même dossier que test.html, la balise ressemblera à ceci :

 

Vous pouvez également modifier la taille de l'image que vous voulez ajouter à votre page. Définissez la taille et la largeur de l'image comme ceci: < IMG SRC="image.gif "width="300" height="200 ">. L'unité de mesure pour une image est en Pixel. Le HTML reduira les images si elles ne sont pas ajustées à la taille indiquée. Pour empêcher ceci vous pouvez indiquer seulement une taille ou une largeur. Si vous voulez que l'image apparaîsse à taille réelle, n'incluez pas de largeur ou de taille.

 

Une autre possibilité du HTML est d'inclure dans la balise IMG le parametre ALT. De cette manière un texte apparaitra quand le pointeur de souris passera sur l'image.

 

Votre pointeur est sur l'image

 

Si votre image ne s'affichait pas, vous verriez comme ci-dessous à côté du x(qui indique que l'image ne peut pas être trouvée) le nom indiqué dans la paramêtre ALT.

 

 

Ajoutons maintenant une image à notre test.html . N'oubliez pas que si vous ajoutez une image, elle doit se trouver dans le même dossier que test.html.

 

 

 


Ma Page Web

 


C'est une photo de mon chat.

C'est mon chat


 

 

 

 

Cliquezicipour voir ce que ça donnerait

 
 

Insérer un lien

 

Maintenant que vous savez créer une Page Web vous pouvez créer des pages multiples en utilisant les mêmes principes. Les pages multiples liés ensembles sont un site Web. Une fois que vous apprenez comment lier des pages ensembles, les possibilités sont inimaginables.

 

Liez une page en utilisant cette balise:

 

 

 

HREF défini quelle page vous voulez lier. Dans notre exemple, nous voulons lier test1.html. Un lien a besoin d'une balise fermante. Faisons notre deuxième page Web liée à la première:

 

Cette page sera sauvegardée sous le nom test8.html.

 

 

 


Ma deuxième Page Web

 

 

 

Si vous voulez voir une photo de mon chat
cliquez ici

 

 

 

Cliquez icipour voir ce que ça donnerait

 

Vous pouvez maintenant cliquer sur votre lien et ouvrir test1.html.

 

Deux pages liées ensembles, Vous venez de créer votre premier site Web !

 
 

Couleurs

 

Peut-être préféreriez vous avoir une image dans le fond de votre Page Web. Le HTML vous permet de changer facilement votre fond blanc en image de votre choix. L'image que vous voulez pour votre fond doit être dans le dossier où vous avez sauvegardé test.html.

 

L'image de fond s'insère dans votre balise body de la même façon que la couleur de fond

 

 

 


Ma Page Web

 


C'est pas beau ca?

 

 

 

Cliquez icipour voir ce que ça donnerait

 
 

Il y a plusieurs façons de mesurer la couleur. Chaque nuance de rouge, vert ou bleu sont placée sur une échelle de 0 à 255. Les valeurs des couleurs sont exprimés en RGB (Red, Green, Blue) .
Le blanc serait R=0, G=0, B=0.

 

Le noir serait R=255, G=255, B=255.

 

Le rouge lumineux: R=255, G=0, B=0.

 

Le rouge foncé: R=109, G=20, B=19

 

Vert olive: R=110, G=143, B=39 

 

Dans n'importe quel programme graphique d'édition vous pouvez observer la couleur en RGB. Dans Paint (qui est installé sur tous les systèmes Windows), vous avez accès au menu couleurs pour les éditer.

 

 

Ensuite choisissez vos couleurs dans la fenêtre suivante.

 

 

Vous pouvez aussi définir une couleur personnalisée, en cliquant sur "définir les couleurs personnalisées" par ses paramètres RGB (3 valeurs de 0 à 255).

 

 

Mais le HTML ne sait pas lire les couleurs quand elles sont définies par ces 3 paramètres (RGB) ou RVB, il faut convertir ces 3 valeurs en hexadécimal.

 

Regardez le tableau ci-dessous, vous pouvez y voir les valeur RGB et les valeurs hexadécimales correspondantes (Hex.).

No. Hex. No. Hex. No. Hex. No. Hex. No. Hex. No. Hex. No. Hex. No. Hex.
0 00 32 20 64 40 96 60 128 80 160 A0 192 C0 224 E0
1 01 33 21 65 41 97 61 129 81 161 A1 193 C1 225 E1
2 02 34 22 66 42 98 62 130 82 162 A2 194 C2 226 E2
3 03 35 23 67 43 99 63 131 83 163 A3 195 C3 227 E3
4 04 36 24
Ajouter un commentaire

Vous utilisez un logiciel de type AdBlock, qui bloque le service de captchas publicitaires utilisé sur ce site. Pour pouvoir envoyer votre message, désactivez Adblock.

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

×