Code HTML: insertions

Les codes HTML suivants permettent d'insérer des éléments dans une page HTML:

• image
• son
• vidéo
• code Javascript
• code PHP()

---

Insertion d'une image

<IMG SRC='source' options... >
ALT='Texte alternatif au cas où l'image ne s'affiche pas'
TITLE = 'Texte alternatif au cas où l'image ne s'affiche pas'.

<img src='image.jpg' alt='Image JPG'> <img src='image.gif' title='Image GIF'> <img src='image.png' alt='Image PNG'> <img src='image.bmp' title='title BMP' alt='alt BMP'>

ALIGN = alignement de l'image.

• left : Texte à gauche
  
• center : Texte au centre
  
• right : Texte à droite
  
• top : Texte en haut
  
• middle : Texte au milieu
  
• bottom : Texte en bas
  
• texttop: En haut du Texte
  
• absmiddle : Au milieu du texte
  
• absbottom : En bas du texte
  
• baseline : En bas du texte
  

<img src='image.gif' align=left> <img src='image.png' align=center> <img src='image.jpg' align=right>

Texte et image à gauche. Texte et image au centre. Texte et image à droite.

<img src='image.gif' align=top> <img src='image.png' align=middle> <img src='image.jpg' align=bottom>

Texte et image en haut du texte. Texte et image au milieu du texte. Texte et image en bas du texte.

<img src='image.gif' align=texttop> <img src='image.jpg' align=absmiddle> <img src='image.png' align=absbottom> <img src='image.bmp' align=baseline>

Texte et image en haut du texte. Texte et image au milieu du texte. Texte et image en bas du texte. Texte et image en bas du texte.

WIDTH et HEIGHT = redimensionnement des dimensions de l'image, en pixels ou en %.

<img src='image.gif' width='120' height='50'> <img src='image.gif' width='80' height='80'> <img src='image.png' width='100%' height='100%'> <img src='image.png' width='50%' height='25%'>

HSPACE et VSPACE = espacement autour de l'image.

<img src='image.png' align='middle' > <img src='image.gif' align='middle' hspace='10' vspace='10'>

Texte autour de l'image - Texte autour de l'image - Texte autour de l'image - Texte autour de l'image - Texte autour de l'image - Texte autour de l'image - Texte autour de l'image - Texte autour de l'image

BORDER = contour de l'image.

<img src='image.jpg' border='5'>

USEMAP = Définition de zones de sélection pour rendre l'image réactive.

On attache une ou plusieurs zones de sélection à l'image en utilisant l'option USEMAP qui permet de nommer la balise MAP à utiliser.
Ensuite on définit la liste des zones et le lien de chaque zone dans la balise MAP. Ces zones peuvent être:

• Un rectangle défini par les coordonnées de son coin supérieur gauche suivies de celles de sont coin inférieur droit: "abscisse sup gauche, ordonnée sup gauche, abscisse inf droit, ordonnée inf droit".
• Un cercle défini par les corrdonnées de son centre et son rayon: "abscisse centre, ordonnée centre, rayon".
• Un polygone défini par la succession des coordonnées de ses sommets: "abscisse sommet 1, ordonnée sommet 1, abscisse sommet 2, ordonnée sommet 2, etc...".

Les coordonnées sont exprimées en relatif par rapport au coin supérieur gauche de l'image.

<img src='usemap.png' USEMAP='#Desc'> <MAP NAME='Desc'> <AREA SHAPE='rect' HREF='shape_rect.htm' COORDS='0,0,20,50'> <AREA SHAPE='circle' HREF='shape_circle.htm' COORDS='60,25,20'> <AREA SHAPE='poly' HREF='shape_poly.htm' COORDS='94,25,18,0,120,25,18,50'> </MAP> Passez la souris au-dessus des zones de sélection, et cliquez sur une zone pour activer le lien.

Autres options

LONGDESC = URL de description de l'image.
LOWSRC = Source basse résolution de l'image.
NAME = Nom de l'image. Ce nom peut ensuite être utilisé par javascript.

---

Insertion de son

---

Insertion de vidéo

Vidéo *.avi (format Microsoft)

Cette méthode utilise le lecteur Window Media Player, et ne fonctionne donc qu'avec Internet Explorer.
Cependant, le code de substitution dans la balise <embed> permet de fonctionner aussi sous firefox.

<object id="Player_1" width="320" height="240" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" border="1"> <param name="URL" value="Exemple_video.avi"> <param name="volume" value="60"> <param name="stretchToFit" value="-1"> <param name="AutoStart" value="False"> <param name="ShowControls" value="True"> <param name="ShowStatusBar" value="False"> <param name="ShowDisplay" value="True"> <param name="AutoRewind" value="True"> <embed type="application/x-mplayer2" width="320" height="240" src="Exemple_video.avi" filename="Exemple_video.avi" autostart="False" showcontrols="True" showstatusbar="False" showdisplay="True" autorewind="True"> </embed> </object>

Cette méthode utilise une autre version du lecteur Window Media Player.

<object id="Player_2" width="320" height="240" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" border="1"> <PARAM NAME="FileName" VALUE="Exemple_video.avi"> <param name="URL" value="Exemple_video.avi"> <param name="volume" value="60"> <param name="stretchToFit" value="-1"> <PARAM name="Autostart" VALUE="false"> <PARAM name="ShowControls" VALUE="true"> <param name="ShowStatusBar" value="false"> <PARAM name="ShowDisplay" VALUE="true"> <param name="AutoRewind" value="True"> <embed type="application/x-ms-wmp" width="320" height="240" src="Exemple_video1.avi" filename="Exemple_video.avi" autostart="false" showcontrols="True" showstatusbar="False" showdisplay="True" autorewind="True" loop="false"> </embed> </object>

Pour utiliser cette méthode, il est nécessaire de charger le plugin vlc, que vous pouvez charger ici.
Cette méthode fonctionne uniquement avec les navigateurs capablent d'utiliser cette ressource, comme par exemple Firefox.

<embed type="application/x-vlc-plugin" name="video1" autoplay="no" loop="no" width="320" height="240" target="Exemple_video.avi" />

Vidéo *.mp4 (format MPEG)

Vidéo *.wmv (format WMV = Window Media Vidéo)

Ce format ne nécessite rien de particulier, et fonctionne parfaitement avec Internet Explorer et FireFox.

<object id="Player_4" type="application/x-mplayer2" style="width: 320px; height: 240px;" data="Exemple_video.wmv"> <param name="filename" value="Exemple_video.wmv"/> <!-- Option pour activer la lecture automatiquement: --> <param name="autostart" value="0" /> <!-- pour Windows Media --> <param name="autostart" value="false" /> <!-- pour Real --> <param name="autoplay" value="false" /> <!-- pour Quicktime --> </object>

Vidéo *.flv (format FLASH)

Ce format nécessite un plugin particulier que vous pourez trouver ici, et fonctionne parfaitement avec Internet Explorer et FireFox.

<object id="Player_5" type="application/x-shockwave-flash" data="player_flv_maxi.swf" width="320" height="240"> <param name="movie" value="player_flv_maxi.swf" /> <param name="allowFullScreen" value="true" /> <param name="FlashVars" value="flv=Exemple_video.flv&title=Exemple vidéo& startimage=Exemple_video.jpg&width=320&height=240&margin=1& showstop=1&showvolume=1&showtime=1&showplayer=always&showloading=always& showfullscreen=1&showswitchsubtitles=1" /> </object>

Vidéo *.mov (format MOV QuickTime)

Ce format ne nécessite aucun plugin particulier, et fonctionne parfaitement avec Internet Explorer et FireFox.

<object id="Player_6" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="240"> <param name="src" value="Exemple_video.mov" > <param name="controller" value="true" > <param name="autoplay" value="false"> <!--[if gte IE 7]> <!--> <object type="video/quicktime" data="Exemple_video.mov" width="320" height="240"> <param name="controller" value="true"> <param name="autoplay" value="false"> alt : <a href="Exemple_video.mov">Exemple_video.mov</a> </object> <!--<![endif]--> <!--[if lt IE 7]> alt : <a href="Exemple_video.mov">Exemple_video.mov</a> <![endif]--> </object>

---

Insertion de fichier PDF

---

Insertion de code PHP