.org

Family WEB


73 and go to English Version..! 73 ! Cliquez ici pour la version en Français ! German spoken version ! Aqui la version en Espanol !!! Italiano verzione !! Russian !! Hungarian version !!!
english french german spanish italian russian hungarian Clik for help


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:

  • item 1

  • item 2

  • item 3

 

<OL>

<Li>item 1

<Li>item 2

<Li>item 3

</OL>

 

donnera a l'ecran: 

  1. item 1

  2. item 2

  3. 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

 

www.goto.com

 

   

  Cars | Games |  Mortgage | Music |  Travel | Weight Loss   


Copyright ©1999 - 2001 AfricWeb.net | 123Africa.org | Privacy Statement | Disclaimer | Terms and Conditions | Link to tu5ex.org | Add URL to tu5ex.org | Advertise | Affiliates, HyperBanners, and WebRingsARAI Info | Press Coverage | Feedback