Page d'accueil

Eléments avancés de HTML

Les feuilles de style Formulaires Frames Image map Animation et multimédia Inclure des objets (plug-ins) Java JavaScript Streaming Favicon Meta Tags Exercices

Feuilles de style

Le format à appliquer à un bloc de texte contenu entre des balises de formatage peut être adapté pour un document entier (ou un groupe de documents) par l'utilisation des feuilles de style. Il suffit de référencer la feuille de style à utiliser pour le document par insertion dans le bloc HEAD de la balise:
<LINK REL=STYLESHEET TYPE="text/css" HREF="style.css">

Exemple de contenu pour le fichier style.css:

balise {propriété de style: Valeur; propriété de style: Valeur ...}

Manuel de référence...
Exemples HTML avancé

Formulaires

Les formulaires permettent d'utiliser des champs, des listes déroulantes. En général, les informations collectées sont transmise à une page dynamique (par exemple page PHP ou programme CGI) ou à un script pour traitement.

<FORM ACTION="traitement.php">
<INPUT NAME="prix">
<INPUT TYPE="SUBMIT" VALUE="Envoyer">
</FORM>

Astuce: on peut éviter le traitement par une page dynamique et recevoir les données d'un formulaire par mail:

<FORM ACTION="mailto:dupond@chez.com" ENCTYPE=text/plain>


(exemple de formulaire)

Frames

exemple de iframe

Astuce: ce script permet de sortir des frames d'un autre site. 

<SCRIPT LANGUAGE="JavaScript">
if (top.frames.length!=0) 
	top.location=self.document.location;
</SCRIPT>

Image Map

Dans une balise IMG on peut ajouter l'attribut USEMAP=URL (le plus souvent lien interne au document, par exemple #map1)

Les différentes parties de l'image définies au sein de la balise MAP désignée (voir ci-dessous) se comportent alors comme des liens vers d'autres pages:

<MAP NAME=map1>
<AREA SHAPE=rect COORDS="209,90,250,186" HREF=URL>
<AREA SHAPE=circle COORDS="83,112,141" HREF=URL>
<AREA SHAPE=poly COORDS="250,10,212,90,290,90,250,10" HREF=URL>
</MAP>

Les coordonnées sont données à partir d'en haut à gauche de l'image (0,0):

(Construction d'une image map)

(Exemples HTML avancé)

Animation et multimédia

Les marquees permettent d'animer du texte avec la balise suivante (ignorée par Netscape):

<MARQUEE> Ceci est un texte. </MARQUEE>

Les arguments suivants peuvent être utilisés :

BEHAVIOR=SCROLL|SLIDE|ALTERNATE : spécifie si le texte doit disparaître sur les bords, rester visible au bord ou changer de direction au bord.
BGCOLOR, DIRECTION=LEFT|RIGHT, HEIGHT, WIDTH, LOOP=n|INFINITE, SCROLLDELAY=n (délai en millisecondes entre deux affichages)

On peut jouer un fichier son (.mid, .wav ou .au) à l'affichage d'une page HTML par la balise:

<bgsound src="music_2.wav" loop="infinite">
(Commande propre à MSIE) 

<embed width="75" height="45" src="musiques.mid" autostart="TRUE" Loop="-1" volume="100">
(Commande commune à NS et MSIE) Loop="-1" permet de boucler.

On peut spécifier dans le bloc HEAD qu'une page est à recharger dynamiquement au bout d'un délai (secondes)

<meta http-equiv="refresh" content="15; URL=next_doc.html"> 
si pas d'URL on recharge la même page)

(Exemples HTML avancé)

Inclure des objets

Pour introduire un objet vidéo, VRML (réalité virtuelle), ou autre plug-in on utilise la balise EMBED.

Insertion d'un bloc VRML:
<embed src="demo.wrl" border=1 align=center width=400 height=300>

Insertion d'un son (remplace la balise BGSOUND propre à MSIE):
<EMBED SRC="my_midi_file.mid" HIDDEN=TRUE AUTOSTART=TRUE>

exemple VRML


exemple Flash

Java

L'intégration d'une applet dans un fichier HTML se fait par la balise:

<applet code="exemple.class" width="400" height="300"> <param name=nom value=Bonjour> Votre navigateur ne gère pas JAVA </applet>

On peut transmettre des arguments à l'applet par une ou plusieurs balises PARAM. On peut spécifier l'adresse ou se trouve l'applet par l'attribut CODEBASE=URL du répertoire contenant l'Applet

(Exemples HTML avancé)

(Exemple intégration d'applets locales)

(Exemple intégration applets 2)

(Exemple intégration d'une applet distante)

(Bibliothèque d'Applets à télécharger)

JavaScript

Les scripts permettent de rendre dynamique une page.

On trouve sur le web des bibliothèques de scripts à copier, coller au sein du code source HTML.

http://chez.libertysurf.fr/webmaster/dossiers/js/js_scriptotheque.php3

L'intégration d'un script se fait par l'intermédiaire d'un bloc <SCRIPT> dans lequel sont définies des fonctions. L'appel à une de ces fonctions peut être déclenché par un évènement (au sein de la balise <A HREF=# onClick="fonction()">)

Voir aussi: Insertion de code javascript dans une page HTML


exemple de liens
Exemple de script à copier coller
Exemple de script dans fichier .js inclus

Streaming

Le principe: jouer le fim (ou le son) au fur et à mesure du téléchargement.

Le logiciel phare: realPlayer

WindowsMediaPlayer permet aussi de gérer le streaming mais moins bien.

Le principe avec real player: un lien de type <A HREF=monFilm.ram>Cliquez ici</A>

le contenu du fichier monFilm.ram est une seule ligne:

http://www.ifrance.com/monSite/monFilm.rm

C'est l'adresse du film (ou son) à proprement parler (parfois plusieurs Mo).

Par exemple:

http://www.france2.fr/video/jt8h.ram
http://www.france2.fr/video/jt13h.ram
http://www.france2.fr/video/jt20h.ram

contiennent une adresse URL du type:

rtsp://mmediag2.france2.fr:554/www.france2.fr/video/13h_20010613.rm

Lorsque l'on clique sur le lien, real Player se lance et gère en direct le téléchargement (pas forcément par protocole http).

 

Favicon

Dans le bloc head ajouter:

<LINK REL="SHORTCUT ICON" href="favicon.ico"> <link rel="icon" href="/favicon.ico"/>
une image .BMP de 16*16 pixels est idéale: la renommer en .ICO

Meta Tags

Exercices

On fera les exercices pas à pas en rechargeant la page HTML entre chaque manipulation.
On fera précéder chaque exercice d'une barre de séparation (HR) puis d'un nom pour l'exo en titre 2.

  1. Créer un bloc MARQUEE. Y inclure une image animée adaptée
  2. Créer une feuille de style (fichier style.css). Le référencer avec balise LINK à partir de deux pages HTML. Définir un format pour les titres (H1,...) et constater les résultats
  3. Créér un formulaire qui permet de vous envoyer par mail un message
  4. Intégrer une applet distante sur une page HTML
  5. Intégrer une vidéo (AVI, MOV ou MPG) sur une page HTML
  6. Accéder à cette ressource via la technique du streaming (via un fichier .ram)