Web

HTML5

Télécharger le pdf


Document

<!DOCTYPE html> indique le langage de la page
<html></html> englobe toute la page HTML
<head></head> En-tête de la page
<nav></nav> menu de navigation
<body></body> le corps de la page
<footer></footer> pied de page


En-tête

<meta charset=”utf-8” /> Indique que le document est encodé en utf-8 (pour bien mettre les accents)
<title></title> titre de la page (dans l’onglet)
<link rel=»stylesheet» href=»stylesheet.css» /> ajouter une page CSS
<base target=»_blank» href=»http://www.exemple.com/» /> définit l’URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu’un seul élément <base> au sein d’un document.
<style ></style> insérer des informations de style (CSS) directement dans la page
permet d’insérer un code java script ou lier un fichier javascript


Body

<h1></h1> Titre de 1 à 6 (1 étant le plus grand et obligatoirement unique)
<p></p> Paragraphe

Balise sectionnement neutre
<span></span> section inligne (alignée horizontalement) ou boite utilisée pour grouper les éléments afin de changer leur design.
<br/> aller à la ligne
<hr/> Crée une ligne horizontale
<section></section> section de page
<article></article> article
<aside></aside> informations complémentaires
<audio></audio> insérer de l’audio
<video></video> insérer de la vidéo


Formulaire

<form action=»» method=»post» enctype=»multipart/form-data»></form> Créer un formulaire

Ses attributs :

  • action=”” L’URL du programme qui traitera les informations soumises par le
    formulaire
  • method=”get/post” Cet attribut définit la méthode HTTP qui sera utilisée pour
    envoyer les données au serveur. get = Les données du formulaires sont ajoutées
    à l’URI de l’attribut action avec ‘?’ comme séparateur. post = les données du
    formulaires sont incluses dans le corps du formulaire et envoyées vers le server.
  • enctype=”” SEULEMENT AVEC POST! utilisé pour encoder les données envoyées
    au serveur. Peut prendre : “application/x-www-form-urlencoded” (valeur par
    défaut si l’attribut n’est pas défini), “multipart/form-data” (la valeur utilisée par un
    élément <input> dont l’attribut typevaut «file»), “text/plain”
  • autocomplete=””
    • “on” : Le navigateur peut remplir automatiquement les valeurs.
    • “off” : L’utilisateur doit remplir lui-même la valeur de chaque champ
  • novalidate Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission.
  • accept-charsets Une liste des ensembles de caractères que le serveur accepte.
  • target Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé
    le formulaire.

    • “_self “ (valeur par défaut quand cet attribut n’est pas défini ),
    • ” _parent” : (charge la réponse dans le frameset parent de la frame actuelle)
    • “_top” (charge la réponse dans la fenêtre complête originale, annulant toutes les autres frames)
    • “_blank” : ( charge la réponse dans une fenêtre HTML 4 non nommée ou
      dans un contexte de navigation HTML5.)

<fieldset></fieldset> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<label>) dans un formulaire web.
<textarea name=»textlibre» placeholder=»article»></textarea> créer un espace texte de plusieurs lignes
<label></label> légende pour un objet d’une interface utilisateur
<select></select> représente un contrôle qui présente un menu avec des options

Ses attributs :

  • name=”” Le nom du contrôle.
  • size=”” Si le contrôle est présenté sous la forme d’une liste déroulante, cet attribut
    représente le nombre de lignes qui doivent être visibles.
  • multiple Cet attribut booléen indique si oui ou non, plusieurs options peuvent être
    choisies simultanément dans la liste. S’il n’est pas renseigné, une seule option peut
    être choisie à la fois.
  • required Un attribut booléen indiquant si une option (dont le contenu n’est pas
    une chaîne de caractères vide) doit être sélectionnée.
  • autofocus Cet attribut booléen permet de spécifier si oui ou non la page devrait
    sélectionner le contrôle après son chargement

<option></option> utilisé dans un formulaire web pour utiliser un élément de contrôle

Ses attributs :

  • value Le texte contenu dans cet attribut représente l’étiquette fournissant une
    explication pour l’option
  • selected Si cet attribut booléen est présent, il indique l’option sélectionnée
    initialement

<button></button> créer un contrôle interactif ayant la forme d’un bouton.
<legend></legend> représente une légende pour le contenu de son élément parent
<fieldset>.
<input /> créer des contrôles interactifs dans les formulaires web.

Ses attributs :

  • type=”” type de contrôle à afficher
    • “button” : Un bouton
    • “checkbox” : Une case à cocher
    • “color” : choisir une couleur
    • “date” : saisir une date
    • “datetime” : saisir une date et une heure
    • “datetime-local” : saisir une date et une heure sans fuseau horaire
    • “email” : éditer une adresse e-mail.
    • “file” : permet à l’utilisateur de sélectionner un fichier
    • “hidden” : Un contrôle qui n’est pas affiché mais dont la valeur est envoyée
      au serveur
    • “month” : saisir un mois et une année, sans fuseau horaire.
    • “number” : saisir un nombre flottant
    • “password” : Un champ de texte sur une seule ligne dont la valeur sera
      masquée
    • “radio” : Un bouton radio
    • “range” : HTML5 Un contrôle permettant de saisir un nombre dont la
      valeur exacte n’est pas importante. Ce contrôle utilise les valeurs par défaut
      suivantes pour les attributs correspondants : “min : 0”, “max : 100”, “value :
      min + (max-min)/2, ou min si max est inférieur à min” “step : 1”
    • “reset” : Un bouton qui réinitialise le contenu du formulaire avec les valeurs
      par défaut.
    • “search” : HTML5 Un champ de texte sur une seule ligne qui permet de saisir
      des mots-clés pour une recherche
    • “submit” : Un bouton pour soumettre le formulaire.
    • “tel” : HTML5 saisir un numéro de téléphone.
    • “text” : Un champ de texte sur une seule ligne.
    • “time” : HTML5 Un contrôle pour saisir une heure, sans fuseau horaire
    • “url” : HTML5 Un champ pour éditer une URL.
    • “week” : HTML5 Un contrôle permettant de saisir une date formée d’une
      année et d’un numéro de semaine, sans fuseau horaire.
  • name=”” Le nom du contrôle qui est envoyé avec les données du formulaire.
  • value=”” La valeur initiale du contrôle
  • size=”” La taille initiale du contrôle
  • maxlength=”” nombre de caractère max autorisé
  • required l’utilisateur doit renseigner la valeur avant d’envoyer le formulaire
  • step=”” Fonctionne avec les attributs min et max pour limiter l’incrément qui peut
    être utilisé pour fixer une valeur numérique ou une date
  • width=”” largeur de l’image à afficher pour le bouton.
  • height=”” hauteur de l’image à afficher pour le bouton.
  • placeholder=”” indication pour l’utilisateur sur ce qui peut être saisi dans le contrôle
  • pattern=”” expression régulière qui sert à vérifier la valeur.
  • min=”” max=”” min & max pour les champs autofocus Cet attribut booléen permet
    de spécifier si oui ou non la page devrait sélectionner le contrôle après son chargement
  • autofocus Cet attribut booléen permet de spécifier si oui ou non la page devrait
    sélectionner le contrôle après son chargement
  • readonly le texte ne peut être modifié par l’utilisateur
  • disabled champ non pris en compte

Personnalisation du Texte

<strong></strong> gras
<b></b> met le texte en gras
<em></em> italique
<q cite=”http://…”></q> Pour les Citations
<abbr></abbr> abréviation
<accronym></accronym> accronymes non supporté dans html5
<address></address> Contact de l’auteur
<i></i> représente un morceau de texte qui se différencie du texte principal (italique)
<tt></tt> (pour Teletype Text ) crée un élément inline affiché dans la police à chasse fixe
<dfn></dfn> définition
<code></code> utilisée pour l’affichage de blocs de code dans la page.
<strike></strike> barrer le texte
<font></font> XX ne fonctionne plus avec html5 définit la taille du texte, sa couleur et la
police utilisée.
<cite></cite> contient le titre d’une œuvre telle qu’un livre, une chanson, un film, une
sculpture…
<sub></sub> utilisé, pour des raisons typographiques, pour afficher du texte en indice
<del></del> représente une portion de texte ayant été supprimée d’un document. Cet
élément est souvent (mais pas nécessairement) affiché rayé.
<ins></ins> représente une morceau de texte qui a été ajouté à un document.
<sup></sup> représente un morceau de texte qui devrait être, pour des raisons typographiques, sur une ligne plus haute et souvent plus petit que le texte principal.
<small></small> eprésente du texte avec une police dont la taille est plus petite que celle
utilisée pour le texte environnant (jusqu’à atteindre la taille de police minimale du navigateur).
En HTML5, cet élément a pour but de représenter des annotations et des petits caractères
comme les informations légales ou liées au copyright, indépendamment de la mise en forme utilisée.
<bdo></bdo> utilisé afin d’outrepasser la direction du texte. Cela permet d’imposer une
direction donnée à un texte.
<blockquote></blockquote> indique que le texte contenu dans l’élément est une citation
longue. Le texte est généralement affiché avec une indentation
<time></time> date/heure


Liens

<a href=””></a> lien hypertexte
<a href=”mailto:”></a> permet à l’internaute de vous envoyer un E-mail à partir de la page HTML.
<A HREF=»MAILTO: votre adresse E-mail?SUBJECT=Mon formulaire&CC=dmc@nomade.fr»> permet de remplir l’objet du mail.
<A HREF=»MAILTO: votre adresse E-mail?SUBJECT=Mon formulaire &CC=dmc@nomade.fr &BCC=dmc@nomade.fr»> permet d’envoyer une copie a une adresse e-mail.
<A HREF=»MAILTO: votre adresse E-mail? SUBJECT=Monformulaire &CC=dmc@nomade.fr &BCC=dmc@nomade.fr &BODY=texte»> permet d’envoyer une copie cachée a une adresse e-mail.
<A HREF=»#bas»>lien</A> permet de se déplacer dans la page
<A NAME=»nom»></A> vous pouvez cibler la valeur de l’ID de n’importe quelle balise.
<a href=”tel://###-###”></a> permet de créer un numéro cliquable par les utilisateurs


Images

<img /> permet d’incruster une image

Ses attributs :

  • src=”url” URL de l’image
  • alt=”txt” Cet attribut définit le texte alternatif décrivant l’image
  • height=”12px” La hauteur de l’image en pixels CSS
  • align=”” Obsolète depuis HTML4.01, Obsolète depuis HTML5 Utiliser la propriété
    CSS vertical-align border Obsolète depuis HTML4.01, Obsolète depuis HTML5 La largeur de la bordure autour d’une image.
  • hspace Obsolète depuis HTML4.01, Obsolète depuis HTML5 Le nombre de pixels
    de blanc à insérer à droite et à gauche de l’image.
  • vspace Obsolète depuis HTML4.01, Obsolète depuis HTML5 Le nombre de pixels
    de blanc à ajouter au-dessus et en-dessous de l’image.
  • usemap L’URL partielle (commençant par un ‘#’) d’un élément <map> associé avec
    l’élément.

<map> </map> utilisé en association avec des éléments <area> afin de définir une carte
d’image (image map).
<area> définit une zone particulière d’une image et peut lui associer un lien hypertexte.


Listes

<ul></ul> Liste à non ordonnée
<ol></ol> Liste ordonné
<li></li> éléments d’une liste
<dl></dl> Est le conteneur de la liste de définitions
<dt></dt> : Est le conteneur d’un terme à définir
<dd> </dd> : Est le conteneur de la définitions
<lh></lh> : Titre d’une liste


Tableaux

<table></table> Balises pour indiquer qu’on fait un tableau
<caption></caption> titre d’un tableau
<thead></thead> lignes d’en-tête
<tbody><tbody> corps au sein d’un tableau
<tfoot></tfoot> définit un ensemble de lignes résumant les colonnes d’un tableau.
<tr></tr> définit une ligne de cellules au sein d’un tableau
<td></td> définit une cellule d’un tableau contenant des données.
<th> </th> définit une cellule qui est un en-tête pour un groupe de cellules du tableau.
<colgroup></colgroup> définit un groupe de colonnes au sein d’un tableau.
<col></col> définit une colonne appartenant à un tableau et est utilisé afin de définir l
sémantique commune à toutes ses cellules.


Objets et contexte de navigation

représente une ressource externe qui peut être interprétée comme une
image, un contexte de navigation imbriqué ou une ressource à traiter comme un plug-in.

Ses attributs :

  • height La hauteur de la ressource à afficher, exprimée en pixels CSS.
  • width La largeur de la ressource à afficher, exprimée en pixels CSS.
  • type Le type MIME de la ressource définie par data.
  • usemap Une référence à l’élément <map>. La valeur de cet attribut doit être un ‘#’
    suivi de la valeur d’un attribut name d’un élément <map>.

représente un contexte de navigation imbriqué, ce qui se traduit par
l’intégration d’une page HTML dans la page courante

Ses attributs :

  • name=”” Un nom pour désigner le contexte de navigation intégré
  • src=”” L’URL de la page à intégrer.
  • srcdoc=”” HTML5 seulement Le contenu de la page que le contexte intégré est
    supposé contenir.
  • width=”” Indique la largeur de l’élément

<param /> définit les paramètres d’un élément <object>.
représente un point d’intégration pour une application externe ou pour du contenu interactif (autrement dit, pour un plug-in).

Ses attributs :

  • height=”” La hauteur utilisée pour l’affichage de la ressource, exprimée en pixels
    CSS.
  • src=”” L’URL de la ressource à intégrer.
  • type=”” Le type MIME à utiliser pour sélectionner le plug-in à instancier.
  • width=”” La largeur utilisée pour l’affichage de la ressource, exprimée en pixels
    CSS.

HTML5 Nouvelles balises

<header></header> représente un groupe de contenu introductif ou de contenu aidant à
la navigation.
<nav></nav> représente une section d’une page ayant des liens vers d’autres pages ou des
fragments de cette page. C’est une section qui permet de naviguer dans un document avec
divers liens.
<footer></footer> représente le pied de page de la section
<menuitem></menuitem> represente une commande que l’utilisateur peut invoquer.
<main></main> représente le contenu principal du <body> du document ou de l’application.
<meter></meter> représente une mesure scalaire dans un intervalle connu, ou une proportion connue
<article></article> représente du contenu autonome dans un document, une page, une
application
<progress></progress> utilisé pour visualiser l’avancement d’une tâche.
<aside></aside> section de la page dont le contenu est indirectement lié à ce qui l’entoure et qui pourrait être séparé de cet environnement.
<rp></rp> utilisé pour fournir ce qui fera office de parenthèse aux navigateurs qui n’offrent pas le support des annotations Ruby
<section></section> représente une section générique d’un document, c’est à dire un groupement thématique de contenu, généralement avec un en-tête.
<details></details> utilisé comme un outil de communication à partir duquel l’utilisateur peut récupérer des informations supplémentaires.
<ruby> </ruby> représente une annotation ruby. Les annotations Ruby servent à afficher la
prononciation des caractères Est Asiatiques.
<dialog></dialog> représente une boite de dialogue ou un composant interactif

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.