Compétences :
• Insérer des images et du multimédia ;
• Créer des liens ;
• Créer des tableaux ;
• Créer des formulaires ;

III. Insérer des images et du multimédia dans une page html
L’image est la reproduction visuelle d'un objet réel.
L’image numérique désigne toute image (dessin, icône, photographie …) acquise, créée, traitée et stockée sous forme binaire.
Un format d’image est donc une représentation informatique de l’image, associée à des informations sur la façon dont l’image est codée et fournissant éventuellement des indications sur la manière de la décoder et de la manipuler (métadonnées).
III.1 Les types d’images
On distingue essentiellement deux types d’images :
• Les images matricielles (ou images bitmap)
Les formats matriciels les plus utilisés sont : JPEG, GIF, PNG et TIFF.
• Les images vectorielles
Le format vectoriel le plus utilisé est : SVG.
La balise permettant d’insérer une image dans une page web est la balise <img/>
Cette balise doit être accompagnée d’au moins deux attributs :
- src : qui signifie source. Il permet d’indiquer le chemin conduisant à l’image qu’on veut insérer.
-alt : qui signifie texte alternatif. Il permet d’indiquer un texte court qui décrit le contenu de l’image.
Deux autres attributs sont à préciser ici, ils permettent de redimensionner une image. Il s’agit de :
•width : pour définir la largeur de l’image
• height : pour définir la hauteur de l’image
La syntaxe d’insertion est la suivante

<img src = ‘’https://www.camerecole.org /images /Examens /probatoire_A/histogramme.png’’ alt = ‘’histogramme de frequence’’ width="100" height="100"/>
<img src = ‘’https://www.camerecole.org /images /Examens /probatoire_A/histogramme.png’’ alt = ‘’histogramme de frequence’’ width="200" height="200"/>

. .

III.2 Insertion d’un son et d’une vidéo
• Pour insérer un son, on utilise la balise <audio> ... </audio>
Ces deux attributs acceptent obligatoirement l’attribut src.
On peut lui ajouter des particularités avec les attributs supplémentaires. controls = "controls" qui permet d’afficher des éléments de contrôle (lecture , pause, retour, durée...) en dessous de la vidéo.

• Pour insérer une vidéo, on utilise la balise <video> … </video>

IV. Créer un lien hypertexte dans une page web
Les documents sont repérés par une adresse unique appelé URL.
L’élément HTML 5 primordial pour la création de liens est l’élément <a>, dont le contenu, situé entre les balises <a> et </a>, est la partie visible, texte ou image, sensible au clic. Ses attributs permettent de définir la cible du lien et les moyens de le déclencher.
Pour indiquer l’adresse URL de la cible d’un lien, il faut donner une valeur à l’attribut href de l’élément <a>.

Quelques attributs de l’élément <a>
• target : indique dans quelle fenêtre du navigateur doit s’ouvrir la cible du lien ; il prend les valeurs suivantes :
o _b1ank : cible dans une nouvelle fenêtre ;
o _self : cible dans la même fenêtre ;
o _parent : cible affichée dans la fenêtre parent immédiat de celle du lien ;
o _top : cible affichée dans la fenêtre parent de plus haut niveau de celle du lien.
• accesskey : permet de créer un raccourci clavier pour ouvrir le document cible sans effectuer de clic sur le contenu de l’élément <a>.

VI. Créer des tableaux dans une page html
• L’élément essentiel dans la création de tableaux est <table>.
• Chaque ligne est déclarée par un élément <tr>
• La création de chaque cellule d’une ligne est déclarée par un élément <td>
• L'élément <th> définit une cellule d'un tableau comme une cellule d'en-tête pour un groupe de cellule.
La structure générale d’un tableau

VII. Créer des formulaires dans une page html
Un formulaire HTML est une partie du document constituée d'un contenu normal, d'un balisage, d'éléments spéciaux appelés commandes (cases à cocher, boutons radio, menus, etc.) et de labels sur ces commandes. Il facilite la communication entre l’internaute et le site web, en recueillant des informations d’un utilisateur.
Le formulaire est composé de plusieurs éléments de l’interface homme-machine :
• Champ de saisie,
• Boutons à cliquer,
• Liste de choix,
• Radio bouton,
• Case à cocher.
Ces éléments sont tous placés entres les balises <form> et </form> qui délimitent le formulaire.
L’élément <fieldset> est très souvent inclus dans un formulaire. Il a pour vocation de délimiter les groupes de composants actifs du formulaire.
Chaque titre est le contenu d’un élément <legend> inclus dans <fieldset>.
Les attributs de l’élément <form>
• action : cet attribut est obligatoire car il désigne le fichier qui est chargé de traiter les données du formulaire côté serveur.
  <form action="camerecole.php">
L’attribut action peut aussi avoir la valeur mailto: qui provoque l’envoi des données (leur nom et leur valeur) à une adresse e-mail qu’il faut préciser à la suite du mot-clé mailto:,
<form method="post" action="mailto: ">
Pour que la transmission vers une adresse e-mail ait lieu, il faut que l’attribut method soit utilisé et qu’il ait la valeur post.
• method détermine la méthode d’envoi des données vers le serveur. Il peut prendre les deux valeurs get ou post. La méthode get est celle qui est utilisée par défaut
La manière la plus courante de créer les éléments d’un formulaire est d’utiliser l’élément <input/> et c’est son attribut type qui permet de lui assigner une fonction particulière.
1) Bouton d’envoi et de réinitialisation avec type qui vaut submit
Le bouton d’envoi, généralement nommé Envoi ou OK, est indispensable car il est le seul qui, après un clic, peut déclencher l’envoi des données vers le serveur

2) La saisie d’une ligne de texte
Un formulaire permet le plus souvent la saisie de texte, par exemple pour indiquer son nom ou son adresse. Comme il est nécessaire de préciser à l’utilisateur le type d’information attendue, il faut introduire le libellé de l’information dans un élément <label>. Il possède l’attribut for dont la valeur est l’identifiant du champ auquel il se rapporte, et l’attribut form qui fait référence à l’identifiant du formulaire auquel il appartient dans le cas où il y en a plusieurs sur la page.

3) La saisie de mot de passe
Les champs de saisie de mot de passe sont quasi identiques aux champs de saisie de texte. Ils ne comportent qu’une seule ligne et sont créés avec le même élément <input>
La différenciation entre ces deux champs réside dans la valeur de l’attribut type qui prend la valeur password au lieu de text.
Pour l’utilisateur le champ a le même aspect visuel, mais quand il frappe son mot de passe, les caractères qu’il utilise ne sont pas affichés dans la zone et sont remplacés par un astérisque (*), ce qui le protège des regards indiscrets.
4) La saisie de texte long
L’élément <textarea> crée un champ de saisie de texte sur plusieurs lignes. Contrairement au précédent, ce n’est pas un élément vide et son contenu n’est autre que le texte écrit par le visiteur.
Les dimensions de la zone de saisie doivent obligatoirement être définies. Pour cela, il faut utiliser les attributs suivants.
• col s="N" qui fixe la largeur de la zone à N caractères. Le retour à la ligne est automatique dans la zone.
• rows="N" qui fixe la hauteur à N lignes.

5) Les boutons radio et les cases à cocher
Pour créer un bouton radio, nous utilisons encore une fois l’élément aaaa <input /> dont l’attribut type prend la valeur radio.
Il faut que tous les attributs name de ses éléments aient la même valeur. L’attribut value de chaque bouton radio contient la valeur que l’on veut associer à chacun d’eux.