Introduction
Nous
ne prétendons pas dans cette page, cerner toute la programmation HTML.. Ce mémo
se veut simplement une initiation . Il existe de nombreux ouvrages concernant ce
langage, que vous pourrez trouver dans les librairies spécialisées.
(1)
HTML ? c'est QUOI ?:
Le
langage HTML, (Hyper Text Markup Language) est très simple a assimiler et
à apprendre.. grâce a lui, vous allez pouvoir réaliser de très belles pages web
en couleurs, que vous pourrez utiliser pour réaliser votre page perso.
Si
vous utilisez Windows, vous pouvez écrire sous notepad ou même sur un simple
éditeur de texte permettant la sauvegarde d'un fichier ASCII.
Avec
un peu de temps et de patience, vous pourrez
réaliser sans problème de très belle pages HTML.
Pour
visionner ces pages, il suffira d'utiliser votre navigateur...
retour
sommaire
(1.1)
La Syntaxe HTML:
Pour
confectionner une page web... rien de plus simple..
En
fait, lorsque vous visionnez une page web avec votre navigateur, chaque "mot"
est une information qu'interprète votre navigateur et qui lui donne des informations
afin de les reproduire sur votre écran..
Le
navigateur reconnaît des informations HTML. Ces commandes spéciales sont placées
entre "<" et ">"... on les nomme des TAGS. Ces
informations peuvent être
écrites en majuscules ou en minuscules.. peu importe.. beaucoup de personnes
utilisent des majuscules pour faciliter leur lecture.
A
vous de choisir..
Une
page HTML vas TOUJOURS utiliser le "canevas" suivant:
<HTML>
<HEAD>
<TITLE>Titre
de la Page</TITLE>
</HEAD>
<BODY>
...votre texte viens ici...
</BODY>
</HTML>
Le
document HTML complet commence par <HTML> et fini par
</HTML>
Le
Titre de votre document sera place entre les TAGS <HEAD> et
</HEAD>
Ce
titre apparaîtra en haut du document que visionnera votre navigateur.
Le
CORPS (body) du document apparaîtra entre les TAGS <BODY> et
</BODY>
Tous
les TAGS doivent être utilises par paires bien entendu ...
Et
d'une façon logique...
<HEAD>
... <TITLE> ... </TITLE> ... </HEAD> est OK !!
<HEAD>
... <TITLE> ... </HEAD> ... </TITLE> n'est pas conforme...
La
meilleure façon d'assimiler cette syntaxe HTML, est de la tester sur votre
PC
! hi !!! Vous écrivez sous notepad, et visionnez sous nescape ou explorer.
Ouvrez
notepad et saisissez les codes HTML suivants:
<HTML>
<HEAD>
<TITLE>Salut
en Tachétémèlle</TITLE>
</HEAD>
<BODY>
<CENTER>Je
tache de mémêle...</CENTER>
</BODY>
</HTML>
Sauver
(sous notepad) dans le bureau de windows (c:\windows\bureau\toto.html)
Il est trés important de bien mentionner l'extension .html après le nom du fichier...
Maintenant,
ouvrez ce fichier avec votre navigateur préféré..
nota:
si vous désirez utiliser cette page en première page de votre future page
perso ??? nommez la: index.html La majorité des serveurs UNIX (ou LINUX
! hi !) utilisent ces noms de fichiers comme page de démarrage d'un site
utilisateur... mais nous n'en sommes pas encore la ! hi !
retour
sommaire
(2)
TRAVAILLONS sur le TEXTE:
Nous
avons vu précedément que pour faire apparaître un texte sur votre document
HTML, il fallait le placer entre les deux TAGS: <BODY> et </BODY>.
Voyons
l'exemple suivant:
<HTML>
<HEAD>
<TITLE>Ma
page web</TITLE>
</HEAD>
<BODY>
<CENTER>Centre
de ma page web</CENTER>
</BODY>
</HTML>
1.
La ligne de titre du document comprise entre les TAGS <TITLE> et </TITLE>
apparaîtra
en haut et a gauche de la page de votre navigateur.
2.
Le texte "Ma page web" compris entre les TAGS <BODY> ... <CENTER>
.. </CENTER>
... </BODY>, apparaîtra en plein centre de la page de votre navigateur.
Maintenant,
voyons comment utiliser des codes HTML pour formater le texte.
retour
sommaire
(2.1)
Les TAGS spéciaux :
1.
avec le TAG <BR> place a la fin d'une ligne, vous effectuerez un
"retour chariot".
(retour a la ligne suivante)
2.
avec le TAG <P> place a la fin d'une phrase, vous ferez un retour a la
ligne.
et
créerez un espace entre les deux paragraphes..
3.
Pour
modifier les caractères de votre texte, vous utiliserez les TAGS spéciaux
suivants:
<B>
et </B> pour mettre un texte en GRAS
<I>
et </I> pour mettre un texte en italiques
<TT>
et </TT> pour diminuer un texte style "machine a écrire"..
On
peut bien sur combiner les TAGS ... Faites divers essais.. vous serez séduits
!!!
On
peut aussi modifier la taille des caractères du texte en utilisant les TAGS
suivants:
<H1>
votre texte </H1> pour obtenir le plus grand caractère en mode HTML..
<H2>
votre texte </H2> .. ici vous diminuez d'un "cran" ! hi !
<H3>
etc... jusqu'a <H5> qui est la plus petite taille.. bons essais.
taille-1
|
taille-2
|
taille-3
|
taille-4
|
taille-5
|
taille-6
|
taille-7
|
retour
sommaire
(3)
Les FONDS de PAGES:
En
Anglais, fonds s'écrit font(s)... la syntaxe HTML est:
<FONT
SIZE=n COLOR="#nnnnnn"> .... </FONT>
ATTENTION:
L'attribut "SIZE" s'applique a la taille du texte..!!!
par
n= un chiffre de 1 a 7. le chiffre le plus utilise étant
3.
Pour
l'attribut suivant: "COLOR" il s'exprime en:
COLOR=#rrggbb
ou
COLOR=blue (couleur prédéfinie)
RRGGBB
étant une valeur héxadécimale définissant une couleur... exemple:
<FONT
COLOR="#0000FF"> Ce texte sera bleu </FONT>
<FONT
COLOR="blue"> Ce texte sera aussi bleu </FONT>
retour
sommaire
(3.1)
Les paragraphes numérotés:
Il
y a plusieurs façons de numéroter les paragraphes et de les créer en langage
HTML...
Sans
ordre défini: <UL>
Avec
classement numérique: <OL>
Exemples:
<UL>
<Li>item
1
<Li>item
2
<Li>item
3
</UL>
donnera
à l'écran:
<OL>
<Li>item
1
<Li>item
2
<Li>item
3
</OL>
donnera
a l'ecran:
-
item
1
-
item
2
-
item
3
retour
sommaire
(4)
LES IMAGES en HTML:
Il
est très facile de rajouter des images sur vos pages HTML...
Une
seule chose TRÈS IMPORTANTE, c'est que vous devrez déposer ces fichiers images
dans le même répertoire que votre fichier index.html principal. (ou
dans un répertoire parent /images s'il y en a beaucoup)
Les
fichiers image les plus utilises sont d'extension .GIF ou .JPG (JPEG)..
Je
vous suggère d'utiliser si possible le format .GIF, celui-ci étant en général
moins volumineux (taille) qu'un fichier .JPG .
Par
contre, les formats .JPEG sont d'une définition meilleure (PIXEL) et permettent
une compression supérieure..
Voici
quelques comparaisons et suggestions d'utilisation:
GIF
|
JPG
|
Page Web simple
|
Haute résolution des photos
|
Graphiques
|
Graphiques hauts en couleurs
|
Boutons de commandes
|
Besoin de + de 256 couleurs
|
Photos N&B à faible résolution
|
Photos à grande résolution
|
Graphiques à - de 256 couleurs
|
Graphiques à + de 256 couleurs
|
Comment
ajouter des photos sur vos pages HTML ??
Regardez
cette syntaxe html:
Ceci
est ma meilleure photo !hi!: <IMG
SRC:"malick-georgette.jpgf">
Cliquez
sur ce lien
|
Le
TAG <IMG SRC:" ... "> permet d'insérer simplement l'image
photo1.gif dans
votre
page HTML... ce n'est pas plus complique que cela ! hi !!
Ce
fichier se trouvait dans le même répertoire que la page HTML
S'il
s'etait trouve dans un répertoire parent, il aurait suffit de rajouter l'extension
de ce répertoire.
<IMG
SRC "images/malick-georgette.jpg">
Il
existe de nombreuses sources shareware (gratuites) de banques d'images sur
internet...
et puis une petite astuce... et vu que nos essais HTML sont tout a
fait d'ordre prives et a but non lucratif ! hi ! Lorsque vous êtes sur internet
et que vous voyez une image qui vous plait (graphique, bouton, photos,
etc...) n'hésitez pas a cliquer sur le bouton droit de votre souris pour
enregistrer cette image dans votre répertoire image ... ainsi, vous vous constituerez
un "stock" de symboles et photos qui vous servira a embellir vos pages
HTML !!!
retour
sommaire
(5)
LES LIENS HYPERTEXTES:
Il
est très facile d'ajouter un lien hypertexte dans votre page HTML..
Regardez
les exemples ci-dessous.. et vous comprendrez tout de suite le
fonctionnement..
Imaginons
que votre page est déposée sur un site perso web internet.. ou même simplement
ouverte sur votre PC.. qui est néanmoins muni d'un modem relié au réseau
internet...
.
1: Vous désirez que depuis votre page, et sur un simple click de la souris, vous
puissiez connecter une autre page HTML.. par exemple la page d'accueil du
portail AfricWeb.
la
syntaxe est simple..
<a href="http://www.africweb.net>L'Internet
Africain</a>
au
"click" de votre souris sur la phrase "L'Internet
Africain",
votre navigateur
enverra la demande de connexion vers ce portail.
.
2: Vous désirez qu'un simple "click" de souris sur votre page
provoque l'envoi
d'un message e-mail dans ma direction... La
syntaxe HTML pour ce genre d'envoi est:
<a
href="mailto:[email protected]">Envoyez un e-mail a
Didier Euzet</a>
automatiquement,
le logiciel de messagerie associé a votre navigateur s'ouvrira
vous indiquant que vous pouvez envoyer ce message, l'adresse étant
déjà automatiquement écrite.
Voila
pour les liens hypertextes... très simples en fait a mettre en oeuvre..
retour
sommaire
(6)
Les APPLETS de la Classe JAVA:
Qu'est-ce-que-c'est
?? hi ??
Un
APPLET de la CLASSE JAVA, est tout simplement un logiciel éxécutable d'un évènement
graphique qui vas se passer dans votre page HTML (Effet Neon, Bannière,
Flash, apparition et disparition d'images, etc..)
Pour
se faire, lorsque votre page se met en place, une commande HTML écrite dans
votre script vas exécuter le logiciel en question, et faire apparaître des
effets graphiques du plus bel effet et souvent magnifiques.
Les
logiciels d'APPLETS JAVA peuvent se trouver soit dans le même répertoire que
votre page.. soit dans un autre répertoire défini par vous même dans le script
HTML.
Le
script HTML paramètre au départ le logiciel exécutable avant de le "lancer"..
Comment
est la SYNTAXE HTML utilisée ?? Voici
un script APPLET de la Classe JAVA:
Cet
Applet est une sorte d'enseigne au néon, ou le texte que vous aurez écrit
clignotera alternativement avec le fond de l'image. ineon.class
Le
script APPLET commence...
<APPLET
CODE="ineon.class" ALIGN=absmidle WIDTH=150 HEIGHT=40>
...
ou le nom du logiciel: ineon.class est défini par le TAG: CODE=
l'alignement
de l'image est défini par le TAG ALIGN=, ainsi que ses dimensions
par
les TAGS WIDTH= et HEIGHT=
Ici,
le soft exécutable ineon.class (extension .class pour CLASSE JAVA) est
résident
dans le même répertoire que votre page HTML.
Ensuite,
viennent les paramètres qui paramètrerons votre exécutable lors de
son
"lancement" !!...
<PARAM
NAME="X" VALUE="24">
<PARAM
NAME="Y" VALUE="50">
ces deux paramètres définissent
les dimensions
du cadre du fond....
<PARAM
NAME="XSHIFT" VALUE="1">
... etc..
Tous
les paramètres de l'image sont définis par des valeurs numériques ou
hexadécimales
(couleurs) .. etc..
Le
script HTML fini bien sur par:
</APPLET>
retour
sommaire
Autre
exemple de JAVA SCRIPT SIMPLE:
<SCRIPT
LANGUAGE="JavaScript">
function
yaunclick()
{
alert('Copyright
1999-2000 Didier Euzet TU5EX ');
}
function
noclick(scx)
{
if
(navigator.appName == "Netscape" && scx.which == 3)
{
yaunclick();
return
false;
}
if
(navigator.appVersion.indexOf("MSIE") != -1 &&
event.button == 2)
{
yaunclick();
return
false;
}
}
document.onmousedown
= noclick
</SCRIPT>
Ce
Script protégera vos pages pour éviter qu'elles soient copiées ! hi !
Encore
un autre exemple:
<style>
<!--
A{
text-decoration: none; color: rgb(100,100,0) }
A:hover{text-decoration:
underline; color: rgb(255,0,0)}
-->
</style>
Ce
script qu'il faut placer entre les balises <HEAD>
et </HEAD> donnera à vos liens
Hypertextes les couleurs et effets que vous désirez (utilisation des
trois couleurs fondamentales: R G B )
Vous
pouvez aller télécharger ce genre de petits scripts à partir des liens
(Les bonnes adresses ...) que nous avons placé dans ce sommaire.
Bon
amusement HTML !
retour
sommaire
Pour toutes questions
complémentaires ? écrivez moi
[email protected]
retour
au menu des ressources HTML
|