Premiers pas en HTML
(04)
Un guide pour vos débuts...
cuy copyleft
  See You Why?  

précédent (03) | menu (00)

 

Quelques autres questions :

...sur la balise <SCRIPT>

Nous ne développerons pas le sujet ici ; le lecteur aura certainement remarqué qu'entre des balises <SCRIPT> et </SCRIPT> se trouvait des infos qui ne correspondent en rien à ce qu'il connaît du langage HTML... c'est normal, il s'agit de fonctions [observez le nombre de mots function] écrites le plus souvent dans un langage comme JavaScript ou VBScript... mais il s'agit là d'un autre cours.

La balise Html SCRIPT contient les scripts. La balise Html SCRIPT contient en général, des fonctions JAVASCRIPT qui vont vous permettre d'animer votre document Html. La balise Html SCRIPT peut être mise à n'importe quel endroit dans le code Html. Exemple d'écriture : 


  <script language="javascript" type="text/javascript"> 
  <!-- 
		function mafonction()
			{
		/*code*/ 
			}
  //--> 
  </script>

...sur les fichiers appelés à l'intérieur des balises <SCRIPT>

Il s'agit d'une procédure par laquelle, au lieu d'écrire les fonctions en JavaScript entre les balises <script> et </script>, on les écrit dans une page séparée qui doit avoir l'extention ".js" et qui peut être appelée par une ou plusieurs pages HTML de votre site... avantages : chaque page n'est pas chargée de toutes les fonctions à écrire ; de même, seuls des lecteurs de source plus chevronnés pourront aller voir ces mini-programmes que vous avez écrits.

Un exemple (merci Mélanie ;-)) :

    <script language="JavaScript" SRC="scripts/moveobj.js"> </script>
    <script language="javascript" SRC="scripts/js.js"> </script>

 

...sur la balise <NOSCRIPT>

La balise Html NOSCRIPT permet d'avertir les utilisateurs dont le navigateur ne peut pas lire des scripts introduits par la balise Html <script>. On y place en général un texte comme ceci : 

<SCRIPT>
	 <!--
	 /*ici vos scripts et vos fonctions*/
	 function prem
		{....}
	 //
	 --> 
 </script>
	<noscript> Votre navigateur ne reconnaît pas les scripts. 
	</noscript>

La majorité des navigateurs sont capables de lire les scripts. Pour les navigateurs qui ne lisent pas les scripts, les instructions à exécuter seront comprises entre les balises <noscript>... et ... </noscript>. La balise Html NOSCRIPT devient obsolète. Voir aussi la balise NOFRAMES.

 

...sur la balise <SPAN>

La balise Html <SPAN> permet de regrouper plusieurs éléments HTML. La balise Html SPAN est aussi utilisée pour faire de calques dynamiques (menu déroulant par exemple). La balise Html SPAN est utilisée pour créer des propriétes css à un endroit précis dans ce cas balise n'introduit pas de saut de lignes. La balise Html SPAN s'utilise de la même façon que la balise Html <div>

 

...sur la balise <PARAM>

La balise PARAM est utilisée avec les balises Html OBJECT ou APPLET (application écrite en Java, appliquette disent les Canadiens...) pour définir des propriétés. Elle suppose quelques connaissances en Java (les classes), Javascript ou autre langage...

 

...sur la balise <DIV> et son éventuel argument "class=..."

<div style="width:250px;">
<h1 style="border:1cm solid blue; font-family:Arial; font-size:20pt;">Peu de contenu</h1>
</div>

ce qui donnerait :


Peu de contenu


Ceci est un exemple de l'utilisation de la balise <div> ... </div> qui permet de regrouper plusieurs paragraphes ou si vous préférez, de délimiter une zone comportant plusieurs paragraphes. Dans l'exemple ci-dessus, on redéfinit le style des titres de niveau 1, mais uniquement applicable à ce titre-là...

Dans l'exemple qui suit, on cumule ici 3 balises qui se complètent :



<style type="text/css">
.zone{font-size: x-small}
</style>
 
<div class=zone> 
    <p>Commentaire :</p>
    <p>N'oubliez pas l'attribut class!</p>
</div>

Ce qui donne comme résultat :

La balise

Commentaire :

N'oubliez pas l'attribut class!

On notera que l'attribut class est applicable dans beaucoup d'autre cas, il spécifie que l'élément HTML fait partie d'une certaine classe de feuille de style. L'élément adopte le format défini globalement pour cette classe :

n'aura d'autre effet que de produire le résultat suivant :

H5 tout à fait normal, seulement un peu formaté
H5 avec arrière plan jaune vif

paragraphe tout à fait normal et pourtant aussi sur un fond.

 

...sur la balise <EMBED> et ses arguments

Cette commande <EMBED> permet d'insérer dans un document HTML, des fichiers multimédias vidéos ou audios de différents types ; on pensera aux fichiers AVI, Quicktime et MPEG pour les vidéos, et aux fichiers MIDI, WAVE, AU, etc, pour l'audio.

La commande "<EMBED ...>" insère un fichier multimédia.
La commande "</EMBED>" termine la commande précitée.
L'attribut "SRC="Adresse du média"" indique l'adresse du fichier multimédia à jouer.
L'attribut "PLUGINSPACE="Adresse de l'application"" indique l'adresse de l'application.
L'attribut "TYPE="Type d'application"" spécifie le type d'application destinée à lancer le fichier.

<HTML>
<HEAD>
<TITLE>Un titre pertinent</TITLE>
<META NAME="Description" CONTENT="...">
<HTTP-EQUIV="Date" CONTENT="01/01/2000">
...
</HEAD>
<BODY>
<EMBED
     SRC="Adresse du média"
     PLUGINSPACE="Adresse de l'application"
     TYPE="Type d'application">
...
Diverses commandes HTML
...
</BODY>
</HTML>


...sur les attributs "onload", "onunload" et autres "onxxx" de la balise <BODY>

La balise <BODY> est parfois suivie d'un paramètre "onload" suivi d'un signe égal, lui-même suivie d'une expression qui contient des parenthèses... de quoi s'agit-il ? [exemple : <body onLoad="LoadData()"...>].

Dans l'exemple ci-dessus, dès que la page HTML sera chargée, la fonction LoadData (charger des données) définie dans un script, (souvent plus haut, ou dans une page de script) sera exécutée. Si l'attribut "onunload", la fonction sera exécutée au moment où le lecteur tente de quitter la page en cours...mais cela suppose la connaissance d'un peu de javascript...

 

...sur cette ligne qui précède parfois la balise <HTML>

Avant <HTML>, une seule sorte d'information est acceptée : celle qui indique la version HTML employée, la nature des éléments HTML et la forme de l'en-tête.

Exemples :

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<!Doctype HTML PUBLIC "-//SQ//DTD HTML 2.0 HoTMetaL + extensions//EN">
<!Doctype HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!Doctype HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

Examinons de près l'information

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

Doctype = type du document

Cette ligne n'apparaît pas à l'écran, ne sera donc jamais accessible aux utilisateurs de ton application. Elle indique que tu suis la norme W3C (voir : HTML - l'aspect historique) correspondant à la version 3.2 HTML. Au cas où tu te sers d'un éditeur HTML tel que, par exemple, HoTMetaL, l'information sera modifiée de la manière suivante :

<!DOCTYPE HTML PUBLIC "-//SQ//DTD HTML 3.2 HoTMetaL//EN">

SQ = SoftQuad Inc., l'entreprise qui distribue le logiciel HoTMetaL

Mais, pour le moment, nous avons pas encore besoin de nous préoccuper de ce genre d'informations ; d'autant plus que, pour nous faciliter le travail, la plupart des éditeurs HTML introduisent automatiquement les lignes nécessaires.

 

Pour plus d'informations...

Ce document n'est qu'une introduction au langage HTML, pas une référence se prétendant complète et scientifique. Ci-dessous, vous trouverez quelques sources d'informations qui nous paraissent bien utiles pour parfaire vos connaissances en HTML. N'oubliez pas les livres et autres ouvrages à acheter chez votre libraire, ou à consulter en bibliothèque.

...sur quelques guides pour un bon style d'écriture

...sur le choix d'un éditeur HTML...

 

...plutôt classique

WebEdit / HTMLed / HTML Assistant Pro / Dida / EdWin / Html Builder / Html Editor / WSKA HTML / Web-It / WebThing / Webmania / Almost Reality / HtmlPad ... et bien d'autres encore que vous pouvez découvrir en lançant les Google, Yahoo, Lycos ou Alta Vista sur une recherche avec pour objet "Html Editor".

...ou plutôt Wysiwyg

Les autres...Que nous ne connaissons que de nom.

...sur d'autres sites proposant une formation semblable

 

...sur d'autres références utiles

 

 

 

Principales balises

 

Fichier Html

<HTML>...</HTML>


Début et fin de fichier Html

<HEAD>...</HEAD>


Zone d'en-tête d'un fichier Html

<TITLE>...</TITLE>


Titre affiché par le browser (élément de HEAD)

<BODY>...</BODY>


Début et fin du corps du fichier Html

<BODY bgcolor="#XXXXXX">


Couleur d'arrière-plan (en hexadécimal)

<BODY background="xyz.gif">


Image d'arrière-plan

 

Mise en forme des caractères

<B>...</B>


Texte en gras

<BIG>...</BIG>


Agrandissement de la taille des caractères

<BLINK>...</BLINK>


Texte clignotant (Netscape seul)

<EM>...</EM>


Texte en italique

<FONT color="#XXXXXX">...</FONT>


Texte en couleur où XXXXXX est une valeur hexadécimale

<FONT size=X>...</FONT>


Taille des caractères où X est une valeur de 1 à 7

<I>...</I>


Texte en italique

<NOBR>...</NOBR>


Empêche les ruptures automatiques de ligne des navigateurs

<PRE>...</PRE>


Texte préformaté, soit avec affichage de tous les espaces et sauts de ligne

<SMALL>...</SMALL>


Réduction de la taille des caractères

<STRONG>...</STRONG>


Mise en gras du texte

<SUB>...</SUB>


Texte en indice

<SUP>...</SUP>


Texte en exposant

<U>...</U>


Texte souligné

 

Mise en forme du texte

<!--...-->


Commentaire ignoré par le navigateur

<BR>


A la ligne

<BLOCKQUOTE>...</BLOCKQUOTE>


Citation (introduit un retrait du texte)

<CENTER>...</CENTER>


Centre tout élément compris dans le tag

<DIV align=center> ...</DIV>


Centre l'élément encadré par le tag

<DIV align=left> ...</DIV>


Aligne l'élément à gauche

<DIV align=right> ...</DIV>


Aligne l'élément à droite

<Hx>...</Hx>

<Hx align=center>...</Hx>

<Hx align=left>...</Hx>

<Hx align=right>...</Hx>


Titre où x a une valeur de 1 à 7

Titre centré

Titre aligné à gauche

Titre aligné à droite

<P>...</P>

<P align=center>...</P>

<P align=left>...</P>

<P align=right>...</P>


Nouveau paragraphe

Paragraphe centré

Paragraphe aligné à gauche

Paragraphe aligné à droite

 

Listes

 

<UL>

<LI>...</LI>

</UL>

 



Liste non numérotée (dite à puces)

Elément de liste

<OL>

<LI>...</LI>

</OL>

 



Liste numérotée

Elément de liste

<DL>

<DT>...</DT>

<DD>...</DD>

</DL>

 

 


Liste de glossaire

Terme de glossaire (sans retrait)

Explication du terme (avec retrait)

Ligne de séparation

<HR>


Trait horizontal (centré par défaut)

<HR width="x%">


Largeur du trait en %

<HR width=x>


Largeur du trait en pixels

<HR size=x>


Hauteur du trait en pixels

<HR align=center>

<HR align=left>

<HR align=right>


Trait centré (défaut)

Trait aligné à gauche

Trait aligné à droite

<HR noshade>


Trait sans effet d'ombrage

 

 

Hyperliens

<A href="http://...">...</A>


Lien vers une page Web

<A href="mailto:...">...</A>


Lien vers une adresse Email

<A href="fichier.htm">...</A>


Lien vers la page locale fichier.htm située dans le même répertoire

<A name="xyz">...</A>


Définition d'une ancre

<A href="xyz">...</A>
<A href="fichier#xyz">...</A>



Lien vers une ancre

 

Images

<IMG scr="xyz.gif">
<IMG scr="xyz.pjg">



Insertion d'une image au format Gif ou Jpg (voir liens pour l'adressage)

<IMG ... width=x height=y>


Mise à l'échelle de l'image en pixels ( a comme effet d'accélérer l'affichage de la page)

< IMG ... border=x>


Définition de la bordure d'une image avec lien

<IMG ... alt="votre texte">


Texte alternatif lorsque l'image n'est pas affichée

<IMG ... align=bottom>

<IMG ... align=middle>

<IMG ... align=top>

<IMG ... align=left>

<IMG ... align=right>


Aligne l'image en bas

Aligne l'image au milieu

Aligne l'image en haut

Aligne l'image à gaughe

Aligne l'image à droite

<IMG ... hspace=x>

<IMG ... vspace=y>


Espacement horizontal entre l'image et le texte

Espacement vertical entre l'image et le texte

 

Tableau

<TABLE>...</TABLE>


Définition d'un tableau

<TABLE width="x%">


Largeur du tableau en %

< TABLE width=x>


Largeur du tableau en pixels

<TABLE border=x>


Largeur de la bordure

<TABLE cellpadding=x>


Espace entre la bordure et le texte

<TABLE cellspacing=x>


Epaisseur du trait entre les cellules

<TR>...</TR>


Ligne du tableau

<TD>...</TD>


Cellule du tableau

<TD bgcolor="#XXXXXX">


Couleur d'une cellule de tableau

<TD width="x%">

<TD width=x>


Largeur de colonne en %

Largeur de colonne en pixels<

<TD align=center>

<TD align=left>

<TD align=right>


Texte dans la cellule centré

Texte dans la cellule aligné à gauche

Texte dans la cellule aligné à droite<

<TD valign=bottom>

<TD valign=middle>

<TD valign=top>


Alignement vers le bas du contenu d'une cellule

Centrage vertical du contenu d'une cellule

Alignement vers le haut du contenu d'une cellule

<TD colspan=x>

<TD rowspan=x>


Nombre de cellules à fusionner horizontalement

Nombre de cellules à fusionner verticalement

 

Cadres ou Frames

<FRAMESET>...</FRAMESET>


Définit une structure de frames (remplace alors le tag BODY)

<FRAMESET rows="x%,y%,...">


Division horizontale de la fenêtre en deux ou plusieurs lignes
en % (row signifie ligne)

<FRAMESET cols="x%,y%,...">


Division verticale de la fenêtre en deux ou plusieurs colonnes
en % (col pour colonne)

<FRAME src="fichier.htm">


Fichier affiché dans une fenêtre de frames

<NOFRAMES>...</NOFRAMES>


Contenu pour les browsers non prévus pour les frames

 

 

Remerciements

remercie les utilisateurs de cette formation, ainsi que tous les "vieux routiers" du Web qui nous ont aidés en commentant et critiquant ces quelques lignes d'une formation que nous avons eu plaisir à vous donner. Merci aussi à mes collaborateurs et aux auteurs dont nous nous sommes inspirés pour la rédaction de ces notes.

précédent (03) | menu (00)

Et après lecture et quelques mots explicatifs complémentaires pendant les cours, voilà ce que les étudiants ont réalisé.

Il ne leur reste plus qu'à aborder le langage JavaScript qui leur permettra de rendre leurs pages plus dynamiques... rendez-vous ici.