Un document HTML5 minimal:
section <section> générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d’application web
section <article> Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension
section <nav> Section possédant des liens de navigation principaux (au sein du document ou vers d’autres pages)
section <aside> Section dont le contenu est un complément par rapport à ce qui l’entoure, qui n’est pas forcément en lien direct avec le contenu mais qui peut apporter des informations supplémentaires.
section <header> (en-tête de page).
section <footer> (pied de page).
les codes spéciaux:
| Codes spéciaux | Résultat dans le navigateur |
|---|---|
| | [Espace] |
| " | " |
| ’ | ’ |
| < | < |
| > | > |
| « | « |
| » | » |
| & | & |
| € | € |
les liens et ancres:
Utilisez l’élément HTML target="_blank" pour ouvrir un lien dans un nouvel onglet.
les images :
flotte a gauche du texte.
Utilisez l’élément HTML <img> pour définir une image.
Utilisez l’attribut HTML src pour définir l’URL de l’image.
Utilisez l’attribut HTML alt pour définir un texte alternatif pour une image, si elle ne peut pas être affichée .
Utilisez la largeur et la hauteur des propriétés CSS pour définir la taille de l’image .
Utilisez la propriété CSS float pour laisser l’image float.
Utilisez le code HTML <map> pour définir une image-carte.
Utilisez le code HTML <zone> pour définir les zones cliquables dans l’image-carte.
Utilisez l’élément HTML <img> usemap pointe vers une image-carte.
En gros , pour une image :
- Si elle n'apporte aucune information (c'est juste une illustration pour décorer) : placez l'image dans un paragraphe.
- Si elle apporte une information : placez l'image dans une figure ,la balise figcaption sert d'info ou titre.
Une figure peut très bien comporter plusieurs images.
Les listes :
- chien
- chat
- serpent
- chien
- chat
- serpent
- chien
- chat
- serpent
- chien
- chat
- serpent
- chien
- chat
- mâle
- femelle
- serpent
les tableaux :
Les tables sont définies avec la balise <table>.
Les tableaux sont divisés en lignes avec la balise <tr>.
les cellule de la ligne d’en-tête se crée avec la balise <th>.
Les lignes de tableau sont divisées en cellules avec la balise <td>.
Le titre du tableau se crée avec la balise <caption>.
exemple avec le cichier css:
| Nom | Âge | Niveau |
|---|---|---|
| Yohan | 8 ans | moyen |
| Clara | 5 ans | débutante |
Pour les gros tableaux, il est possible de les diviser en trois parties :
- En-tête : <thead></thead>.
- Corps du tableau : <tfoot></tfoot>.
- Pied de tableau: <tbody></tbody>.
exemple avec le cichier css:
| Nom | Âge | Niveau |
|---|---|---|
| Yohan | 8 ans | moyen |
| Clara | 5 ans | débutante |
| pierre | 7 ans | débutant |
| josé | 8 ans | débutante |
| bob | 6 ans | fort |
| céline | 5 ans | débutante |
| Nom | Âge | Niveau |
La fusion de colonnes : attribut colspan
La fusion de lignes : attribut rowspan
exemple :
| Nom | Âge | Niveau |
|---|---|---|
| Yohan | 8 ans | moyen |
| Clara | 5 ans | débutante |
| pierre | 7 ans | débutant |
| josé | 8 ans | moyen |
| bob | 6 ans | |
| céline | 5 ans | débutante |
| Nom | Âge | Niveau |
Les formulaire :
method="get" : c'est une méthode en général assez peu adaptée car elle est limitée à 255 caractères. La particularité vient du fait que les informations seront envoyées dans l'adresse de la page (http://…).
method="post" : c'est la méthode la plus utilisée pour les formulaires car elle permet d'envoyer un grand nombre d'informations. Les données saisies dans le formulaire ne transitent pas par la barre d'adresse.
action="test.php" : c'est l'adresse de la page ou du programme qui va traiter les informations.
Quelques attributs :
- On peut agrandir le champ avec size.
- On peut limiter le nombre de caractères que l'on peut saisir avec maxlength.
- On peut pré-remplir le champ avec une valeur par défaut à l'aide de value.
- On peut donner une indication sur le contenu du champ avec placeholder.Cette indication disparaîtra dès que le visiteur aura cliqué à l'intérieur du champ.
Zone de mot de passe :
On à différent type que text dans type="text":
Si vous êtes sur smartphone le clavier s'adaptera en fonction du type , et vous proposera des chiffres ou les .com, @, etc...
- email:
- url:
- tel:
- number:
- search:
- range:
- Etc ....
Zone de texte multiligne:
Pour créer une zone de texte multiligne, on change de balise : nous allons utiliser <textarea> </textarea>.
Les cases à cocher:
vous pouvez cocher par défaut avec l'attribut checked :
<input type="checkbox" name="choix" checked ></code>
Les zones d'options:
Les listes déroulantes:
Si vous voulez qu'une option soit sélectionnée par défaut, utilisez cette fois l'attribut selected :
Avec des groupes:
Regrouper les champs:
Sélectionner automatiquement un champ: attribut: autofocus
Rendre un champ obligatoire, attribut: required
Le bouton d'envoi:
type="submit" : le principal bouton d'envoi de formulaire. C'est celui que vous utiliserez le plus souvent. Le visiteur sera conduit à la page indiquée dans l'attribut action du formulaire.
type="reset" : remise à zéro du formulaire.
type="image" : équivalent du bouton submit, présenté cette fois sous forme d'image. Rajoutez l'attribut src pour indiquer l'URL de l'image.
type="button" : bouton générique, qui n'aura (par défaut) aucun effet. En général, ce bouton est géré en JavaScript pour exécuter des actions sur la page.
exemple: