Travail Autonome

Pour expérimenter vous-même

L'idéal serait de disposer d'un éditeur de pages HTML évolué (DreamWeaver par exemple)
offrant de larges facilités pour créer des pages Web attractives,
avec couleurs, polices de caracères esthétiques, images, vidéos, son, etc.
sans oublier des facilités pour y écrire des scripts.

C'est un outil indispensable aux professionnels.
Mais avant d'en payer le prix, un partculier astucieux et habile peut s'en passer,
au prix de quelques lignes de texte à écrire à l'aide d'un traitement de texte simplisime et gratuit.

Je me propose ici de vous montrer qu'avec les "moyens du bord"
on peut réaliser des pages HTML simples, certes,
mais avec des scripts qui permettront de réaliser de petites applications pesonnelles de toute sorte.

Au travail !

Il vous faut seulement un logiciel pour écrire des textes.

Pas un sophistiqué comme "Word" ! Surtout pas !
Ces logiciels introduisent dans le texte, sans que vous le voyiez
des codes permettant de gérer les polices, les localisations de texte, etc...
Ces codes interfèrent avec ceux de HTML et de JavaScript
et c'est la CA-TA-STROPHE !

Comment procéder ?

Ouvrez tout simplement "NotePad" (ou WordPad) livré avec Windows.
Icône :
Ou un programme de texte analogue si vous êtes basé sur un autre système d'exploitation.

Ecrivez simplement ceci dans la page blanche à l'ouverture de NotePad

<html>

<head>

<title>MON TITRE</title>

</head>

<body bgcolor="#FFFFFF" text="#000000">

Du texte pour que la page ne soit pas vide

</body>

</html>

Enregistrez cette page dans un répertoire de travail que vous saurez retrouver par la suite...
Mais ATTENTION !, changez l'extension (.txt pour notepad) par .htm
Par exemple "MaPgeHTMLdeBase.htm"

Vérification
Retrouvez ce fichier dans votre arborescence
(grâce à votre explorateur de fichiers, pas avec l'explorateur internet ! Bien sûr.)
Cliquez dessus.
Grâce à l'extension "htm" que vous lui avez donnée,
c'est l'Explorateur internet - et pas Notepad - qui ouvrira désormais votre page.
Vous pourrez observer les effets à l'écran du code HTML écrit dan la page.

Comment opérer pour mettre au point une application personnelle ?

Une fois votre page HTML créée comme indiqué ci-dessus,si vous voulez la modifier,
il faudra l'ouvrir, non pas dans l'explorateur internet, mais dans WodPad ou NotePad.

Pour cela :

Retrouver ce fichier dans votre arborescence (utiliser l' Explorateur de fichiers )
Cliquer du bouton droit de la souris sur l'icône à côté du nom de votre fichier.
Apparaît une fenêtre qui vous donne entre autre le choix "Ouvrir avec".
Si ce n'est pas le cas (rare), voyez la note ci-contre :
Choisissez "Notepad" ou "WordPad" (Pas "Word", attention !)
La page s'ouvre alors dans NotePad (ou WordPad) et vous pouvez la modifier à votre guise.
N'oubliez pas d'enregistrer cette nouvelle version. Veillez que son extension reste bien "htm"

Visualisation du code source d'une page HTML

C'est un accéssoire, mais peut rendre service.
Lorsque vous visualisez votre page avec l'explorateur internet,
pensez à utiliser l'option de l'explorateur : Clic droit + "Examiner le code source de la page"
Cà peut servir...à découvrir des erreurs par exemple...
Mais pour les corriger, il faudra ouvrir cette page avec NotePad (ou WordPad).
Comme indiqué ci-dessus.

Rappel

Pour ouvrir un fichier HTM ou HTML avec NotePad (ou WordPad)
Cliquez droit sur l'icône à gauche du nom de fichier dans son répertoire.
Option "Ouvrir avec"
Choisir NotePad.

Quelques exercices servant d'exemples

Faites donc ces expériences, c'est à la fois efficace et amusant...

1° Expérience :
changement de courleurs du texte et fond de page

Revenons à la page quasi-vierge créée ci-dessus.

<html>
<head>
<title>MON TITRE</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
Du texte pour que la page ne soit pas vide
</body>
</html>

Vous pouvez modifier le texte contenu entre <body>...et...</body>

<body bgcolor="#FFFFFF" text="#000000"
Couleur d'arrière-plan : blanc ( bgcolor="#FFFFFF" ) du texte : noir : (text="#000000" )

Vous pouvez les changer facilement, voir les codes de couleurs ici :

Un cours sur les codage HTML existe ici dans ce même site :

2° Expérience : Faire apparaître un tableau coloré

Code de la page

<html>
<head>
<title>MON TITRE</title>

<script language="JavaScript">
</script>

</head>
<body bgcolor="#FFFFFF" text="#000000">
Du texte pour que la page ne soit pas vide
<br>

On peut y placer un tableau :
<table width="400" height="50" border="1" cellpadding="0" bgcolor="#FFFF99" >
<tr>
<td>Texte dans la ligne 1</td>
</tr>
<tr>
<td>Texte dans la ligne 2</td>
</tr>
</table>
</body>
</html>

J'ai intégré ce code ici même, voilà son effet :

Texte de la ligne 1

Texte de la ligne 2

.
Explications
Le contenu des balises <tr>...</tr> correspond à une ligne du tableau
<td>...</td> correspond à une colonne (ici il n(y en a qu'une par ligne)

Mais vous pouvez changer tout çà !
width=largeur, ici 400 pixels ; height=hauteur, ici 50 pixels ;
border=largeur de bordure, ici 1 pixel ;
cellpaddig= espace vide entre texte et bordure, ici 0 ;
bgcolor=couleur d'arrière-plan, ici #FFFF99 jaune :

Un cours sur les codage HTML des tableaux existe ici dans ce même site :

Essayez vous-même !

3° Expérience : ajout d'un script

Ajouter une Balise de script à la page blanche

Les scripts JavaScript permettent d'ajouter de l'inteactivité sur les pages HTML
Le code doit s'écrire entre les balises
<script language="JavaScript">
et
</script>

Un tout petit essai ?

<html>
<head>
<title>MOYENNE</title>
<script language="JavaScript">
function Moyenne(a,b){return (a+b)/2}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
Un tout petit debut :
Moyenne de 4 et 13 = <script language="JavaScript">document.write( Moyenne(4,13) )</script>

</body>
</html>

J'ai placé ces scripts dans le cadre ci-dessous (je n'ai pas écrit la phrase ni le résultat)
c'est donc votre Explorateur Internet qui l'a fait en lisant les codes.

Moyenne de 4 et 13 =

Essayez d'en faire autant !
Un cours pour débutants sur le codage JavaScript existe ici dans ce même site :
Un cours complet sur le codage JavaScript existe ici dans ce même site :

4° Expérience, déjà plus "cossue"

Voici un formulaire : une fenêtre "texte" pour entrer des valeurs,
Une "Case à cocher". - Un "Bouton Radio" pour entrer des choix particuliers...
Un bouton pour déclencher une action quelconqe.

Ce formulaire correspond au code ci-dessous

<html>
<head>
<title>MON TITRE</title>

<script language="JavaScript" src="Communs/javascripts/conversions.js">
</script>

</head>
<body bgcolor="#FFFFFF" text="#000000">
Du texte pour que la page ne soit pas vide
<br>

On peut y placer un formulaire :

<form method="post" action="" name"MonFormulaire">
<input type="text" name="NomFenetreTexte">
<input type="button" name="NomDeMonBouton" value="MonBouton">
<input type="checkbox" name="MaCaseACocher" checked>
<input type="radio" name="MonBoutonRadio" checked>
</form>

</body>
</html>

Un cours sur les Formulaires existe ici dans ce même site :

Je veux maintenant en faire un traducteur décimal hexadécimal.

On entre un nombre dans la fenêtre de texte
On choisit en quel type on veut le convertir grâce à la case à cocher.
Et on clique sur le bouton [Traduction].

Le résultat apparaît dans la fenêtre de texte

Essayez !:

Voici le code ajouté

//.......
<head>
<title>MON TITRE</title>
//.......
<script language="JavaScript" src="Communs/javascripts/conversions.js"> </script>
//.......
</head>

<body bgcolor="#FFFFFF" text="#000000">
//. . . . . .
<form method="post" action="" name="FormConversion">
<input type="text" name="FenSaisie" size="50">
<input type="button" name="BoutTrad" value="Traduction" onClick="Convertir(document.FormConversion)" >
<input type="checkbox" name="DecHex" checked>
</form>

<script>
function Convertir (F){
var t = F.FenSaisie
if (F.DecHex.checked) {t.value = ConvDecHex(t.value) ; F.DecHex.checked = false}
else {t.value = ConvHexDec(t.value) ; F.DecHex.checked = true }
}
</script>
//. . . . . .

Vous observerez que les fonctions de conversion ConvDecHex(n) et ConvHexDec(n)
n'ont pas été détaillées car elles font partie de scripts externes logés en :
src="Communs/javascripts/conversions.js"
comme indiqué dans le script d'en-tête : voir code ajouté ci-dessus.

La fonction Convertir(F) {....
prend comme paramètre le nom du formulaire : ici : F = document.FormConversion
Lit la valeur entrée : F.FenSaisie.value
Appelle la fonction de conversion idoïne : ConvDecHex ou ConvHexDec
Affiche cette valeur dans la même fenêtre : F.FenSaisie.value

Le test de la cade à cocher est :
if(F.DecHex) équivalent anrégé de if(F.DecHex == true)
La réponse peut être ou ou non (true false). C.à.d. cochée : OUI/NON.

Pour changer le cochage de la case :
F.DecHex.checked = false : décochée
F.DecHex.checked = true : cochée

Un cours sur les Formulaires existe ici dans ce même site :

Ce n'étaient que de modestes exemples
pour vous montrer ce que,
avec de l'inventivité,
on peut faire des pages HTML
avec les moyens du bord, sans logiciels spécialisés ...très chers...

Le reste du site vous indique comment aller plus loin...

Sujets traités dans cette page	Lien local

Sujet 1

ModemploiNotes("true");Courriel(true);