Création d'Applications sur Internet

Chapitre3b: Langage HTML

Fatemeh BORRAN

Sommaire

Balises embarquées (embedded tags)
Formulaires
La mise en page

Balises embarquées

Image (déjà vu en Chapitre3a img)
Audio/Vidéo
Embed/Object
Frames
Etc.

Audio

La balise audio permet d'ajouter du son ou de la musique à la page.
L'attribut src permet de spécifier le fichier audio.
L'attribut type permet de spécifier le type de fichier audio: audio/mp3, audio/ogg, audio/wav.
L'attribut controls indique que les commandes audio doivent être affichées (comme play, pause, etc.).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">   
    <title>Audio</title>     
  </head>
  <body>
    <p>Exemple d'audio:</p>   
    <audio src="horse.ogg" type="audio/ogg" controls>
      Your browser does not support the audio tag.
    </audio>
  </body>
</html>

Vidéo

La balise video permet d'ajouter un vidéo dans la page.
L'attribut src permet de spécifier le fichier vidéo.
L'attribut type permet de spécifier le type de fichier vidéo: video/mp4, video/ogg, video/webM.
L'attribut controls indique que les commandes vidéo doivent être affichées (comme play, pause, etc.).

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">   
    <title>Vidéo</title>      
  </head>
  <body>
    <p>Exemple de vidéo:</p>
    <video src="movie.mp4" type="video/mp4" 
      width="320px" height="240px" controls>
      Your browser does not support the video tag.
    </video>
  </body>        
</html>

Embed/Object

La balise embed définit un conteneur pour une application externe ou un contenu interactif (un plug-in).
L'attribut src indique l'adresse du fichier externe à intégrer.
La balise object represente une ressource externe qui, selon le type de la resource, sera traité différamment: image, audio, vidéo, etc.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">   
    <title>Embed</title>      
  </head>
  <body>
    <p>Exemple de embed:</p>
    <embed src="http://www.gamedesign.jp/flash/chatnoir/chatnoir.swf"/>
  </body>      
</html>

Frames

La notion de frame permet de créer un navigateur au sein d'un autre navigateur. Ceci permet d'ouvrir plusieurs pages en parallèles et de parcourir une page sans changer les contenus d'autres pages.
La balise iframe (inline frame) est utilisé pour insérer un frame.
L'attribut src permet de définir l'adresse de la page que frame doit contenir. L'attribut name spécifie le nom de frame.
Les attributs width et height (en pixel/pourcentage) peuvent être utilisés pour définir la largeur et l'hauteur de frame.
La balise iframe ne peut pas être utilisé à l’intérieur de la balise a.
Pour faire face à des navigateurs qui ne supportent pas iframe, on peut ajouter un texte entre la balise d'ouverture <iframe> et la fermeture </iframe>.
<iframe name="myframe" src="source.html"/> n'est pas admit.

Frames: exemple

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">   
      <title>Frames</title>      
   </head>
   <body>
      <iframe src="http://www.heig-vd.ch/" width="100%" height="350px">
      </iframe>
      <br/>
      <iframe src="http://www.w3schools.com/html/default.asp" 
      	width="100%" height="350px">
      </iframe>
   </body>      
</html>

Sommaire

Balises embarquées (embedded tags)
Formulaires
La mise en page

Formulaires

Les formulaires sont des éléments HTML permettant de récupérer des données auprès des visiteurs d'une page Web.
Grâce à eux, on peut créer une certaine interactivité avec les visiteurs:

Demande de renseignements personnels (adresse, email, ...);
Fournir l'accès à une zone privée (nom d'utilisateur, mot de passe);
Menus, choix de rubriques, choix de liens;
Zone de texte pour forums, blogs, livre d'or;
Questionnaires, sondages, etc.

Exemples de formulaires

Utilisation des formulaires

Mettre à disposition du visiteur des zones de textes, des choix, des informations
Récupérer les données qui sont fournies par le visiteur
Valider, traiter, classer ces données
Les stocker, les afficher ou les réutiliser dans un autre formulaire

Balise de formulaire

La balise form permet de définir un formulaire.
Tout le contenu du formulaire doit se trouver entre <form> et </form>.
On y placera différentes balises spécifiques aux formulaires, comme par exemple:

Des champs de saisie de texte;
Des cases à cocher ou boutons radio;
Des listes déroulantes;
Un bouton de validation.

Seules les données saisies dans les éléments placés dans la zone d'activité de form pourront être envoyées puis récupérées.
La balise fieldset est utilisée pour regrouper des éléments liés à un formulaire.
La balise legend définit une légende pour les éléments de fieldset.

Attributs de la balise `<form>`

enctype: Spécifie le type de données (ex: enctype="text/plain");
action: Désigne l'adresse du script qui va traiter les données, ou l'email;

Par exemple avec un script en PHP: action="mon_script.php" ou pour un envoi par email: action="mailto:email@domaine.com";

method: Spécifie la manière dont les données doivent être transmises. Il peut prendre 2 valeurs: post ou get. On utilise presque toujours la méthode post.

La méthode post envoie les données du formulaire dans le corps de la requête HTTP (voir Chapitre2).
La méthode get ajoute les données dans l'URL de la page d'envoi (ex : "mon_script.php?nom=toto&pass=hello") et elle est limitée à 255 caractères.

name: Précise un nom pour le formulaire.

<form action="mailto:email@domaine.com" method="post" enctype="text/plain">
  ...(éléments du formulaire ici) ...
</form>

Dans la zone d'activité de `<form>`

La balise form constitue en quelque sorte un conteneur permettant de regrouper des éléments qui vont permettre à l'utilisateur de choisir ou de saisir des données.
Il est possible d'insérer n'importe quel élément HTML de base dans une balise form (textes, boutons, tableaux, liens,...).
Il est surtout intéressant d'insérer des éléments interactifs, tels que:

La balise input: divers boutons et champs de saisie;
La balise textarea: une zone de saisie;
La balise select: une liste à choix multiples.
La balise label: définie un label pour un input.

Eléments de formulaires (1/5)

Champ de texte

<input type="text" name="nom" size="50"/>

Champ de texte avec un label

<label for="nom">Votre nom</label> : 
<input type="text" name="nom" size="50" value="Borran"/>

Zone de texte

<textarea name="nom" rows="4" cols="40">Valeur par défaut</textarea>

Eléments de formulaires (2/5)

Listes déroulantes

<select name="jour" size="1">
  <option value="lundi">lundi</option>
  <option value="mardi">mardi</option>
  <option value="mercredi">mercredi</option>
  <option value="jeudi">jeudi</option>
  <option value="vendredi">vendredi</option>
</select>

<select name="jour" size="5">
  <option value="lundi">lundi</option>
  <option value="mardi">mardi</option>
  <option value="mercredi">mercredi</option>
  <option value="jeudi">jeudi</option>
  <option value="vendredi">vendredi</option>                                      
</select>

Eléments de formulaires (3/5)

Boutons radio (pour un choix unique parmi plusieurs possibles).

L’attribut name permet de spécifier à quel groupe d’options appartient l’élément (la sélection est unique au sein d’un même groupe).
L’attribut value contient la valeur qui sera retournée par le formulaire si l’option est sélectionnée.
On peut ajouter l’attribut checked="checked" pour indiquer l’option qui doit être sélectionnée par défaut (voir exemple ci-dessous).

<input type="radio" name="couleur" value="r" checked="checked"/>rouge<br/>
<input type="radio" name="couleur" value="v"/>vert<br/>
<input type="radio" name="couleur" value="b"/>bleu<br/>

Eléments de formulaires (4/5)

Cases à cocher (pour plusieurs choix possibles parmi plusieurs).

L'attribut name permet de spécifier le nom de la case à cocher (retourné avec la valeur si la case est cochée lorsque le formulaire est envoyé).
L'attribut value contient la valeur qui sera retournée par le formulaire si l’option est sélectionnée.
On peut ajouter l'attribut checked="checked" pour indiquer les cases qui doivent être cochées par défaut.

<input type="checkbox" name="choix" value="1"/>glace vanille<br/>
<input type="checkbox" name="choix" value="2"/>chantilly<br/>
<input type="checkbox" name="choix" value="3"/>chocolat chaud<br/>
<input type="checkbox" name="choix" value="4" checked="checked"/>biscuit<br/>

Eléments de formulaires (5/5)

Boutons spéciaux:

Submit permet d'envoyer le formulaire selon les informations données par l'attribut action de la balise form. Il en faut obligatoirement un dans un formulaire!

<input type="submit" name="nom" value="Envoyer"/>

Reset est moins utilisé, il permet de réinitialiser les champs du formulaire.

Boutons cachés (ne s'affichent pas à l'écran)

<input type="hidden" name="mask" value="fantomas"/>

Intérêt: un script peut y placer une valeur qu'il retrouvera lorsque le formulaire lui sera renvoyé.

Autre type de input de HTML5: (voir avec Chrome)

http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/new-html5-form-input-types.html?

Aperçu global des balises de formulaires

Exemple de formulaire (1/3)

Ci-dessous, un exemple de formulaire. Les différents éléments ont été placés dans une table, afin de les aligner proprement (cf. code des 2 slides suivants).

Exemple de formulaire (2/3)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">   
    <title>Fromulaire</title>
  </head>
  <body>
    <form method="post" action="script.php">
      <fieldset>
        <legend>Enregistrement d'un utilisateur</legend>
        <table>
          <tr>
            <td>Nom</td>
            <td><input type="text" name="nom"/></td>
          </tr>
          <tr>
            <td>Prénom</td>
            <td><input type="text" name="prenom"/></td>
          </tr>
          <tr>
            <td>Sexe</td>
            <td>Homme : <input type="radio" name="sexe" value="M"/><br/>
            Femme : <input type="radio" name="sexe" value="F"/></td>
          </tr>
          ...

Exemple de formulaire (3/3)

...
          <tr>
            <td>Fonction</td>
            <td>
              <select name="fonction">
                <option value="enseignant">Enseignant</option>
                <option value="etudiant">Etudiant</option>
                <option value="ingenieur">Ingénieur</option>
                <option value="retraite">Retraité</option>
                <option value="autre">Autre</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Commentaires</td>
            <td>
              <textarea rows="3" name="commentaires">
                Tapez ici vos commentaires</textarea>
            </td>
            </tr>
            <tr>
              <td colspan="2"><input type="submit" value="Envoyer"/></td>
            </tr>
          </table>
        </fieldset>
      </form>
   </body>
</html>

Sommaire

Balises embarquées (embedded tags)
Formulaires
La mise en page

La mise en page

Comment structurer sa page?

En utilisant les tableaux (cf. Labo1)
En utilisant les frames et les tableaux (HTML4)
En utilisant les balises de HTML5 et CSS (cf. Chapitre4)

HTML5

HTML4 en 1999, beaucoup de changements depuis...
Cooperation entre le World Wide Web Consortium (W3C) et le Web Hypertext Application Technology Working Group (WHATWG).
WHATWG travaillait sur de nouveaux formulaires et applications, le W3C sur XHTML 2. En 2006, ils ont décidé de coopérer pour créer HTML5.
Forte implication des industriels et fabriquants de navigateurs.

Mise en Page: Structure

Les balises de structure HTML5:

header
nav
section
article
aside
footer

Application de CSS standard
CSS partageable
Reconnaissance par les navigateurs
Proposition d'un rendu spécifique
Idéal pour la table des matières et page perso.

Mise en Page: Structure `<header>`

Mise en Page: Structure `<footer>`

Mise en Page: Structure `<nav>`

Mise en Page: Structure `<section>`

Mise en Page: Structure `<aside>`

Mise en Page: Structure `<article>`

Structure HTML5 : exemple (1/2)

Structure HTML5 : exemple (2/2)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
    <title>Structure HTML5</title>      
  </head>
  <body>
    <header id="header">
      <img src="header.jpg" width="20%" height="20%"/>
    </header>
    <nav id="nav">
      <a href="http://www.w3schools.com/html/default.asp" target="content">HTML</a> |
      <a href="http://www.w3schools.com/css/" target="content">CSS</a> |
      <a href="http://www.w3schools.com/php/" target="content">PHP</a> |
      <a href="http://www.w3schools.com/js/" target="content">Java Script</a>
    </nav>
    <section id="section">      
      <iframe name="content" width="100%" height="400px"></iframe>
    </section>
    <aside id="aside">
      Les logiciels nécessaires:
      <ul>
        <li>NotePad++</li>
        <li>Firefox</li>
        <li>EasyPHP</li>
      </ul>
    </aside>
    <footer id="footer">
      Cours AP-CAI @ 2014-2015
    </footer>
  </body>
</html>