Accueil Casino argent reel Meilleur casino Nouveaux casinos Live casino
vk ok fb

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="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 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.htm">


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.