Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

MOOC HTML5/CSS3 semaine 4 Fonctionnalités avancées by Mind Map: MOOC HTML5/CSS3
semaine 4 
Fonctionnalités avancées
5.0 stars - 1 reviews range from 0 to 5

MOOC HTML5/CSS3 semaine 4 Fonctionnalités avancées

Les formulaires

Le construire

<form> </form>

L'organiser

<fieldset> </fieldset>

<legend> </legend>

Regrouper les éléments d'un fomulaire

Exemple

Les Attributs obligatoires

method, get, les données transitent par l'url, post, pour la majorité des cas

action, la redirection du formulaire, Attribut obligatoire pour une validation en W3C

Le code, <form method="post" action="traitement.php">

Les boutons

Cases à cocher, cheackbox, Exemple

bouton radio, radio, Attributs, checked, Présélectionne le bouton radio, Exemple

Envoyer, submit

Annulation, reset

Zones de saisie

Libellés, <label for="pseudo"> votre pseudo </label>, Exemple

Monoligne, Texte, <input type="text" name="pseudo">, Exemple

Multiligne, <textarea> </textarea>

Les input

email, Exemple

url, Exemple

nombre, <input type="number" name="number" id="number" />, Minimum-max, min="5" max="10", Avancement, step="2", Exemple

Texte, taille du champ, size="4", limite de caractères, maxlength="5", Exemple

Regrouper les zones

<fieldset> </fieldset>

les identifier, <legend> groupe1 </legend>

Zone de texte

<textarea> </textarea>, Zone de texte de plusieurs lignes

L'auteur : Olivier Legrand

Formateur du Web

Olivier Legrand - Concepteur pédagogique multimédia

Les tableaux

Créer

Le tableau, <table> </table>

Un titre/légende, <caption> </caption>, Css

des entêtes, <th> </th>

des lignes, <tr> </tr>

des cellules, <td> </td>

Une fusion de bordure, Dans la CSS, border-collapse: collapse;, Exemple en code

Bien structurer, Entête, <thead> </thead>, Corps, <tbody> </tbody>, Pied, <tfoot> </tfoot>

fusion de cellules, Horizontalement, colspan, Verticalement, rowspan

Exemple en code

Mise en forme CSS

Bordures en CSS, border-collapse: collapse, Donne une bordure unique au tableau, Fusionne les bordures adjacentes, border: 1px solid black;, Exemple en code

Centrer le tableau, margin-left: auto;, margin-right: auto;, Exemple en code

Ajuster le titre, caption-side, top, titre en haut du tableau, bottom, titre en bas de tableau, caption { caption-side: bottom; }

Vidéo et Audio

Audio

<audio> </audio>, Exemple

Attribut, controls, affiche une barre de contrôle, loop, Joue en boucle le titre, autoplay, Joue le titre dès la page affichée

Si différents formats Audio, <source> </source>

Exemple

Vidéo

<video> </video>, Exemple

Attribut, poster, Affiche une image sur la vidéo, poster="oiseaux.png"

Si différents formats Vidéo, <source> </source>

Exemple

Important

Les navigateurs ne lisent pas tous les mêmes formats vidéos/audios

Il faut proposer différents formats vidéos/audios

Responsive webdesign

Définition

Adapter son site en fonction de la taille de l'écran, Ordinateur, Tablette, Smartphone

Ressource

http://mediaqueri.es/

2 méthodes

Création de plusieurs fichiers CSS

Travailler dans la même feuille de style CSS

La requête média

@media screen and (max-width: 900px)

Exemple

Quelques régles

(max-width: 900px), L'écran doit faire au maximum 900px de large

(min-width: 900px), L'écran doit faire au minimum 900px

Pour les mobiles

Dans le HTML, <meta name="viewport" content="width=device-width"/>

Dans le CSS, @media all and (max-device-width: 1024px)