The Webmaster - Le début

Je crée ma première page :

1) Avec quoi ?

Tout le monde connaît le bloc-note de windows ? Et bien c'est avec lui que nous allons créer un site internet digne de ce nom. Pas besoin de logiciel générateur de code. Nous allons tout faire à la main. Bloc-note, ou tout autre éditeur de texte comme word ou les équivalent sous d'autres systèmes d'exploitations. L’avantage du bloc-note est qu’il est simple d’utilisation, et qu’il est parfaitement adapté au type de travail que nous allons réaliser. Pour l’ouvrir vous allez dans “Démarrer” “Programme” “Accessoire” et sélectionnez Bloc-note.

2) "Bonjour !"

Nous allons créer une page web avec en titre : "D-2 Première page" et en contenu : "Bonjour !". La syntaxe d'une page étant toujours la même, nous pouvons écrire le code suivant dans le bloc-note précédemment ouvert :

<HTML>
<HEAD>
<TITLE>D-2 Première page
</HEAD>
<BODY>Bonjour !
</HTML>

Nous voyons que le titre est bien compris entre la balise d'ouverture <TITLE> et la balise de fermeture </TITLE>. Nous remarquons que ces balises sont dans l'entête du document (ou HEAD) et que " Bonjour " est dans le corps du document (ou BODY).

Cela nous donne dans le bloc-note :

Il ne nous reste plus maintenant qu'à nommer ce fichier. Il faut savoir que tout document HTML porte l'extension .htm ou .html, donc nommons par exemple ce document: exercice_1.htm. Tous au long de cet ouvrage nous conserverons l’extension .htm. Nous ne prendrons jamais l’extension .html qui est identique. Pour des raisons pratiques il faut choisir ou l’une ou l’autre des extensions et s’y tenir. Cela sera plus facile quand plus tard nous aurons plusieurs dizaine de fichiers, pour faire les liens valide.

Maintenant avec la souris, cliquer sur Fichier et sélectionner Enregistrer sous, comme ci-dessous :

Une boite de dialogue s’affiche :

Nous voyons que par défaut les noms de fichiers vont porter l’extensions “.txt”. Pour éviter cela, cliquer sur la petite flèche du bas de la case TYPE. Vous obtenez l’affichage suivant :

Maintenant il faut nommer le fichier. Nous avons dit que nous l’appelerions exemple_1.htm :

Nous rappelons qu’il est déconseillé de donner des noms de fichiers contenant des majuscules et des minuscules. Cela est source d’erreur pour une exportation sur d’autre système d’exploitation. La société qui hébergera votre site internet aura certainement un système d’exploitation qui fera la différance entre les majuscules et les minuscules. Si dans votre code vous n’avez pas écris correctement vos liens, vous aurez des erreurs. En mettant tout en minuscule dès le départ, en ne mettant pas d’espace entre les mots mais en employant le caractère underscore “_”, vous éviterez bons nombres d’erreurs. Il ne vous reste plus qu’à bien vérifier vos extensions.

NOTE :
Voici donc notre convention :
- Ecrire les noms de fichiers en minuscule.
- Ne pas mettre d’espace dans les noms de fichiers.
- Toujours utiliser la même et unique extension ex: .htm

Ouvrons ce fichier en double-cliquant dessus. Nous obtenons cela :

3) Encore plus d'exercice :

a) Ecrire en gras :

Pour écrire en écrire en gras, vous devez utiliser la balise (Bold):

<HTML><HEAD>
<TITLE>D-3 Gras</TITLE>
</HEAD><BODY>
Bonjour !
</BODY>
</HTML>

Nous enregistrons ce code sous "D-3_Gras", et nous obtenons cela :

b) Ecrire en italique :

Pour écrire en italique, vous devez utiliser la balise (Italic):

<HTML><HEAD>
<TITLE>D-3 Italique</TITLE>
</HEAD><BODY>
Bonjour !
</BODY>
</HTML>

c) Ecrire en souligné :

Pour écrire en souligné, vous devez utiliser la balise (Underline):

<HTML><HEAD>
<TITLE>D-3 Souligné</TITLE>
</HEAD><BODY>
Bonjour !
</BODY>
</HTML>

d) Rayer des mots :

Pour rayer des mots, vous devez utiliser la balise <STRIKE>:

<HTML><HEAD>
<TITLE>D-3 Mots barrés</TITLE>
</HEAD><BODY>
<STRIKE>Je ne vous dit pas</STRIKE> bonjour !
</BODY>
</HTML>

e) Centrer un texte:

Pour centrer un texte, vous devez utiliser la balise <CENTER>:

<HTML><HEAD>
<TITLE>D-3 Centrer</TITLE>
</HEAD><BODY>
<CENTER>Bonjour !</CENTER>
</BODY>
</HTML>

NOTE :
Ecrire : <CENTER>Bonjour !><CENTER>
est équivalent à : <CENTER>Bonjour !<CENTER>
mais par contre ne jamais écrire :
<CENTER>Bonjour !<CENTER>
Il faut être rigoureux dès le départ sinon vous allez vite avoir des erreurs et vous ne pourrez pas progresser.

f) Aligner à droite :

Nous avons remarqué que par défaut le texte est aligné à gauche. Nous avons vu comment centrer un texte et maintenant nous allons voir comment aligner un texte à droite. Comme vous devez vous en douter nous allons utiliser une balise, qui est :

texte

P est la balise, elle introduit un nouveau paragraphe (retour à la ligne + ligne vierge). Son attribut est ALIGN, qui a pour valeur RIGHT. Nous obtenons le code suivant :

<HTML><HEAD>
<TITLE>D-3 Alignés à droite</TITLE>
</HEAD><BODY>
Bonjour !
</BODY>
</HTML>

NOTE :
ALIGN peut prendre plusieurs valeur :
- LEFT : aligne un texte à gauche (par défaut)
- CENTER : centre un texte
- RIGHT : aligne un texte à droite
- JUSTIFY : justifie un texte

NOTE :
Il est également possible d’écrire :
Bonjour!, à la place de :
<CENTER>Bonjour !</CENTER>

g) Une couleur de fond :

Nous allons maintenant mettre une couleur de fond à notre page. La balise qui définit la page est: <BODY>, son attribut qui modifie la couleur de fond est BGCOLOR. Nous allons mettre une couleur bleue dont la valeur hexadécimal est : #5039FF.

<HTML><HEAD>
<TITLE>D-3 couleur de fond</TITLE>
</HEAD>
<BODY BGCOLOR="#5039FF">
<CENTER>Bonjour !</CENTER>
</BODY>
</HTML>

La couleur d’arrière plan est blanche par défaut. Il est également possible de mettre une image, l’attribut à utiliser est BACKGROUND=”path”, avec “path” étant le chemin de l’image. Nous reviendrons en détail sur l’utilisation des images d’arrière plan un peu plus loin. Ajoutons que ces deux balises peuvent être utilisé en même temps. Cependant BACKGROUND à la priorité sur BGCOLOR. Si l’image est absente, la couleur sera alors celle spécifié.

Nous obtenons donc:

h) Image d'arrière plan :

Le langage Html nous offre également la possibilité de mettre une image de notre choix en fond de page. Ainsi le code suivant nous dévoile l’attribut BACKGROUND :

<HTML><HEAD>
<TITLE>D-3 Image de fond</TITLE>
</HEAD>
<BODY BACKGROUND="fond01.jpg">
<CENTER>Bonjour !</CENTER>
</BODY>
</HTML>

NOTE :
Nous voyons que l’image de fond se répète.

4) Le texte :

Nous venons de voir comment modifier la couleur de fond, voyons maintenant comment modifier la couleur du texte, la taille et la police. Nous allons employer la balise

a) La couleur du texte :

Pour modifier la couleur du texte, il faut ajouter l’attribut COLOR à la dernière balise. Si nous reprenions le code précédent et que nous voulions écrire dans un ton gris, nous aurions par exemple :

<HTML><HEAD>
<TITLE>D-3 couleur du texte</TITLE>
</HEAD>
<BODY BGCOLOR="#5039FF">
Bonjour !
</BODY>
</HTML>

b) La taille du texte :

La taille du texte se modifie par l’ajout de l’attribut SIZE. La taille ne peut varier que de 1 à 7, la valeur 3 correspondant à l’absence de l’attribut SIZE (à vous de modifier la valeur de SIZE en exercice). Voyons l’exemple de dans l’exemple ci-dessous :

<HTML><HEAD>
<TITLE>D-3 couleur du texte</TITLE>
</HEAD>
<BODY BGCOLOR="#5039FF">
Bonjour !
Bonjour !
</BODY>
</HTML>

c) La police du texte :

Il existe différente police fourni en standard avec les systèmes d’exploitations. Il nous est possible de choisir notre police grâce à l’attibut FACE. Il est possible et conseillé de mettre plusieurs police à la suite, séparé par des virgules. En effet si la première police n’existe pas chez l’internaute, la deuxième sera choisie. Si cette dernière n’existe pas, la troisième sera choisi et ainsi de suite avant de choisir la police par défaut du navigateur. Voici un exemple de code :

<HTML><HEAD>
<TITLE>D-3 couleur du texte</TITLE>
</HEAD>
<BODY BGCOLOR="#5039FF">
Bonjour !
Bonjour !
</BODY>
</HTML>

Bienvenue

Hébergements

Référencement

Nos cours