1. Les formulaires
1.1. Le construire
1.1.1. <form> </form>
1.2. L'organiser
1.2.1. <fieldset> </fieldset>
1.2.2. <legend> </legend>
1.2.3. Regrouper les éléments d'un fomulaire
1.2.4. Exemple
1.3. Les Attributs obligatoires
1.3.1. method
1.3.1.1. get
1.3.1.1.1. les données transitent par l'url
1.3.1.2. post
1.3.1.2.1. pour la majorité des cas
1.3.2. action
1.3.2.1. la redirection du formulaire
1.3.2.2. Attribut obligatoire pour une validation en W3C
1.3.3. Le code
1.3.3.1. <form method="post" action="traitement.php">
1.4. Les boutons
1.4.1. Cases à cocher
1.4.1.1. cheackbox
1.4.1.2. Exemple
1.4.2. bouton radio
1.4.2.1. radio
1.4.2.2. Attributs
1.4.2.2.1. checked
1.4.2.3. Exemple
1.4.3. Envoyer
1.4.3.1. submit
1.4.4. Annulation
1.4.4.1. reset
1.5. Zones de saisie
1.5.1. Libellés
1.5.1.1. <label for="pseudo"> votre pseudo </label>
1.5.1.2. Exemple
1.5.2. Monoligne
1.5.2.1. Texte
1.5.2.1.1. <input type="text" name="pseudo">
1.5.3. Multiligne
1.5.3.1. <textarea> </textarea>
1.6. Les input
1.6.1. email
1.6.1.1. Exemple
1.6.2. url
1.6.2.1. Exemple
1.6.3. nombre
1.6.3.1. <input type="number" name="number" id="number" />
1.6.3.2. Minimum-max
1.6.3.2.1. min="5" max="10"
1.6.3.3. Avancement
1.6.3.3.1. step="2"
1.6.3.4. Exemple
1.6.4. Texte
1.6.4.1. taille du champ
1.6.4.1.1. size="4"
1.6.4.2. limite de caractères
1.6.4.2.1. maxlength="5"
1.6.4.3. Exemple
1.7. Regrouper les zones
1.7.1. <fieldset> </fieldset>
1.7.2. les identifier
1.7.2.1. <legend> groupe1 </legend>
1.8. Zone de texte
1.8.1. <textarea> </textarea>
1.8.1.1. Zone de texte de plusieurs lignes
2. L'auteur : Olivier Legrand
2.1. Formateur du Web
2.2. Olivier Legrand - Concepteur pédagogique multimédia
3. Les tableaux
3.1. Créer
3.1.1. Le tableau
3.1.1.1. <table> </table>
3.1.2. Un titre/légende
3.1.2.1. <caption> </caption>
3.1.2.1.1. Css
3.1.3. des entêtes
3.1.3.1. <th> </th>
3.1.4. des lignes
3.1.4.1. <tr> </tr>
3.1.5. des cellules
3.1.5.1. <td> </td>
3.1.6. Une fusion de bordure
3.1.6.1. Dans la CSS
3.1.6.2. border-collapse: collapse;
3.1.6.3. Exemple en code
3.1.7. Bien structurer
3.1.7.1. Entête
3.1.7.1.1. <thead> </thead>
3.1.7.2. Corps
3.1.7.2.1. <tbody> </tbody>
3.1.7.3. Pied
3.1.7.3.1. <tfoot> </tfoot>
3.1.8. fusion de cellules
3.1.8.1. Horizontalement
3.1.8.1.1. colspan
3.1.8.2. Verticalement
3.1.8.2.1. rowspan
3.1.9. Exemple en code
3.2. Mise en forme CSS
3.2.1. Bordures en CSS
3.2.1.1. border-collapse: collapse
3.2.1.1.1. Donne une bordure unique au tableau
3.2.1.1.2. Fusionne les bordures adjacentes
3.2.1.2. border: 1px solid black;
3.2.1.3. Exemple en code
3.2.2. Centrer le tableau
3.2.2.1. margin-left: auto;
3.2.2.2. margin-right: auto;
3.2.2.3. Exemple en code
3.2.3. Ajuster le titre
3.2.3.1. caption-side
3.2.3.1.1. top
3.2.3.1.2. bottom
3.2.3.1.3. caption { caption-side: bottom; }
4. Vidéo et Audio
4.1. Audio
4.1.1. <audio> </audio>
4.1.1.1. Exemple
4.1.2. Attribut
4.1.2.1. controls
4.1.2.1.1. affiche une barre de contrôle
4.1.2.2. loop
4.1.2.2.1. Joue en boucle le titre
4.1.2.3. autoplay
4.1.2.3.1. Joue le titre dès la page affichée
4.1.3. Si différents formats Audio
4.1.3.1. <source> </source>
4.1.4. Exemple
4.2. Vidéo
4.2.1. <video> </video>
4.2.1.1. Exemple
4.2.2. Attribut
4.2.2.1. poster
4.2.2.1.1. Affiche une image sur la vidéo
4.2.2.1.2. poster="oiseaux.png"
4.2.3. Si différents formats Vidéo
4.2.3.1. <source> </source>
4.2.4. Exemple
4.3. Important
4.3.1. Les navigateurs ne lisent pas tous les mêmes formats vidéos/audios
4.3.2. Il faut proposer différents formats vidéos/audios
5. Responsive webdesign
5.1. Définition
5.1.1. Adapter son site en fonction de la taille de l'écran
5.1.1.1. Ordinateur
5.1.1.2. Tablette
5.1.1.3. Smartphone
5.2. Ressource
5.2.1. http://mediaqueri.es/
5.3. 2 méthodes
5.3.1. Création de plusieurs fichiers CSS
5.3.2. Travailler dans la même feuille de style CSS
5.4. La requête média
5.4.1. @media screen and (max-width: 900px)
5.4.2. Exemple
5.5. Quelques régles
5.5.1. (max-width: 900px)
5.5.1.1. L'écran doit faire au maximum 900px de large
5.5.2. (min-width: 900px)
5.5.2.1. L'écran doit faire au minimum 900px
5.6. Pour les mobiles
5.6.1. Dans le HTML
5.6.1.1. <meta name="viewport" content="width=device-width"/>
5.6.2. Dans le CSS
5.6.2.1. @media all and (max-device-width: 1024px)