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 (voir ici).

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>. Ils sont devenus rares, mais on peut configurer son ordinateur pour que les scripts ne soient pas exécutés (dommage). 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 :

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 [écrit en JavaScript ou VBScript], (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... (pour les intéressés, voir ici)

 

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

Élément de liste

<OL>

<LI>...</LI>

</OL>


Liste numérotée

Élé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="https://...">...</A>


Lien vers une page Web

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


Lien vers une adresse Email

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


Lien vers la page locale fichier.php 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 class="n2">...</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.php">


Fichier affiché dans une fenêtre de frames

<NOFRAMES>...</NOFRAMES>


Contenu pour les browsers non prévus pour les frames

 

 

 

Nouveautés HTML5

 

Les nouvelles balises du HTML5

Balise Description
<article> D�finit un article
<aside> D�finit un contenu « mis � part » dans un contenu du document
<bdi> Isol� une partie du texte qui peut �tre format� dans une direction diff�rente du texte dont il est exclu.
<command> D�finit un bouton de commande que l’utilisateur peut appeler
<details> D�finit les d�tails suppl�mentaires que l’utilisateur peut afficher ou masquer
<summary> D�finit un �l�ment visible pour un �l�ment <details>
<figure> Sp�cifie un contenu autonome, comme des illustrations, des diagrammes, des photos, des listes de codes, etc
<figcaption> D�finit une l�gende pour un �l�ment <figure>
<footer> D�finit le pied de page d’un document ou d’un article
<header> D�finit une introduction, une en-t�te ou un groupe d’�l�ments de navigation pour un document
<hgroup> Regroupe un ensemble d’�l�ments � <h1> <h6> quand une rubrique a plusieurs niveaux
<mark> Pass� un coup de marquer sur vote texte – mise en �vidence
<meter> D�finit une mesure scalaire dans une gamme connue (une jauge)
<nav> D�finit un men�, des liens de navigation
<progress> Repr�sente l’�tat d’avancement d’une t�che
<ruby> D�finit une annotation ruby ??(pour la typographie d’Asie orientale)
<rt> D�finit une explication / prononciation des caract�res (pour la typographie d’Asie orientale)
<rp> D�finit un texte d’erreur pour les navigateurs ne supportant pas la notations Ruby
<section> D�finit une section dans un document
<time> D�finit une date / un horaire
<wbr> D�finit un saut de ligne possible

 

Les nouveaux éléments de formulaires du HTML5

Balise Description
<datalist> Sp�cifie une liste de pr�-d�finis pour les options des contr�les d’entr�e
<keygen> D�finit un champ g�n�rateur de cl�s (pour les formulaires)
<output> D�finit le r�sultat d’une op�ration

 

Les nouveautés pour les médias du HTML5

Balise Description
<audio> D�finit un contenu audio – En savoir plus sur la lecture d’un fichier audio
<video> D�finit une vid�o ou un film
<source> D�finit de multiples ressources pour les m�dias <video> et <audio>
<embed> D�finit un conteneur pour une application externe ou un contenu interactif (un plug-in)
<track> D�finit des pistes de texte pour les m�dias <video> et <audio>

 

La nouvelle balise <canvas> du HTML5

Balise Description
<canvas> Utilis� pour dessiner des graphiques, des dessins, � la vol�e, via des scripts (habituellement en JavaScript)

 

Les balises supprimées ou abandonnées du HTML4

 

La liste des balises suivantes appartenant au HTML 4.01 a �t� retir�e du HTML5.

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.