FORMATION: HTML DE A à Z

Présentation

Bienvenue à la formation sur le HTML !

Dans ce cours, nous allons explorer les fondamentaux du HTML (Hypertext

Markup Language), le langage de balisage de texte utilisé pour créer des
pages web.

Que vous soyez un débutant complet ou que vous ayez une expérience
limitée dans la création de pages web, cette formation vous fournira les
compétences nécessaires pour concevoir des pages web attrayantes et
fonctionnelles.

Au cours de cette formation, vous apprendrez à structurer le contenu de

votre page en utilisant des balises HTML, à ajouter des images, des vidéos et
d'autres types de médias, à créer des liens hypertexte vers d'autres pages et
sites web.

Nous aborderons également les bonnes pratiques en matière d'accessibilité

web et de référencement (SEO), afin que vos pages soient optimisées pour
être accessibles aux personnes en situation de handicap et pour être
facilement trouvables sur les moteurs de recherche.

Cette formation sera dispensée par un formateur expérimenté et qualifié, et

sera interactive et pratique.

Vous aurez l'occasion de travailler sur des exercices pratiques pour renforcer
vos compétences et de poser des questions en temps réel.

À la fin de la formation, vous serez en mesure de créer des pages web de

qualité professionnelle qui répondent aux normes actuelles du web.

Bon courage,

Jonathan (La Minute de code)

INFORMATIONS

La bonne nouvelle est que pour suivre cette formation sur le HTML, aucun
prérequis n'est nécessaire, à part disposer d'un ordinateur et d'un éditeur de
code.

Peu importe votre niveau d'expérience en informatique, vous pouvez

commencer à apprendre le HTML dès maintenant. Tout ce dont vous avez
besoin est un ordinateur avec une connexion internet et un éditeur de code.

Les éditeurs de code sont des outils qui vous permettent d'écrire et d'éditer du
code HTML et d'autres langages de programmation. Il existe de nombreux
éditeurs de code disponibles gratuitement en ligne, tels que Notepad++, Visual
Studio Code, Atom et Sublime Text, pour n'en citer que quelques-uns.

Même si vous êtes complètement novice en matière de programmation, vous

pouvez commencer à apprendre le HTML en suivant cette formation.

Nous avons conçu cette formation pour les débutants, en utilisant des termes
simples et en fournissant des explications claires et précises pour vous guider
tout au long du processus d'apprentissage.

PLAN DE LA FORMATION

Introduction à HTML 5 Intégrer du CSS

Préparation à la formation Intégrer du Javascript

La structure HTML Les tableaux

Les balises de base La sémantique

Les balises liées aux textes Typographies

Les éléments block et inline

Rajouter une favicon

Les listes
La balise meta description

Les liens et les boutons

La balise meta OG

Les classes et les ids

L'accessibilité

Système Parent / Enfants

Tabindex

Les formulaires
Les attributs ARIA

Les types d'inputs

Les raccourcis EMMET en HTML

Les attributs des inputs

Créer ces propres raccourcis

Les selectbox et datalist

Astuces Visual studio code

Les médias

Les entités, les emodjis et les icones

INTRODUCTION HTML

HTML (Hypertext Markup Language) est un langage de balisage utilisé pour

créer des pages web. Il est considéré comme la base de la création de sites web
et est utilisé conjointement avec d'autres langages tels que CSS et JavaScript.

HTML permet de définir la structure et le contenu d'une page web, en utilisant

des balises pour indiquer les différents éléments tels que le titre, les
paragraphes, les images, les liens, les tableaux, les formulaires, etc.

Les balises sont ensuite interprétées par les navigateurs web pour afficher la
page dans un format cohérent.

Le langage HTML a évolué au fil des ans, avec de nouvelles versions qui ont
ajouté des fonctionnalités et amélioré la syntaxe.

La dernière version majeure, HTML5, offre des fonctionnalités avancées telles

que la prise en charge des vidéos et de l'audio intégrés, la géolocalisation, la
création de graphiques vectoriels, la prise en charge des appareils mobiles,
entre autres.

En résumé, HTML est un langage de base utilisé pour créer des pages web,
permettant aux créateurs de contenu de définir leur structure, leur contenu et
leur présentation. Sans HTML, l'Internet tel que nous le connaissons ne serait
pas possible.

préparation

Le HTML est un langage de programmation relativement simple à apprendre, qui

ne nécessite aucun prérequis en termes de connaissances techniques.

Tout ce dont vous avez besoin pour commencer à apprendre le HTML est un
ordinateur, une connexion Internet et un éditeur de code.

Un éditeur de code est un logiciel qui vous permet d'écrire et de modifier du

code HTML. Il existe de nombreux éditeurs de code disponibles gratuitement sur
Internet, tels que Sublime Text, Visual Studio Code, Notepad++, Atom, entre
autres.

Sublime Text : éditeur de code populaire et largement utilisé par les

développeurs web. Il est facile à utiliser, rapide et dispose de fonctionnalités
avancées telles que la coloration syntaxique, la complétion automatique, la
gestion de projet et la prise en charge de plugins. [Link]

Visual Studio Code : éditeur de code open source développé par Microsoft. Il
offre des fonctionnalités avancées telles que la coloration syntaxique, la
complétion automatique, la débogage, la prise en charge de Git et des plugins.
[Link]

Notepad++ : éditeur de code gratuit pour Windows, qui est simple et facile à
utiliser. Il offre des fonctionnalités telles que la coloration syntaxique, la
numérotation des lignes et la recherche et remplacement de texte. https://
[Link]/

Atom : éditeur de code open source développé par GitHub. Il offre des
fonctionnalités avancées telles que la coloration syntaxique, la gestion de projet,
la complétion automatique et la prise en charge de plugins. https://
[Link]/windows

LA STRUCTURE HTML

La structure HTML (Hypertext Markup Language) est la base de toute page

web. Elle permet de définir la structure et le contenu de la page à l'aide de
balises HTML. La plupart des balises HTML sont des paires de balises ouvrantes
et fermantes qui encadrent le contenu qu'elles décrivent.

<!-- DOCTYPE = indique que nous somme dans un fichier HTML -->

<!DOCTYPE html>

<!-- HTML = enveloppe de votre document -->

<!-- LANG = indique la langue de votre document -->

<html lang="fr">

<!-- HEAD = en-tête de votre document -->

<head>

<!-- CHARSET = encodage de nos caractères -->

<!-- UTF-8 = caractères latin -->

<meta charset="UTF-8">

<!-- balises de compatibilitées -->

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- TITLE = titre de votre document -->

<title>HTML</title>

</head>

<!-- BODY = corp de votre document -->

<body>

</body>

</html>

balises de base

HTML (HyperText Markup Language) est un langage de balisage utilisé pour

créer des pages web. Il permet de structurer les contenus de la page en utilisant
des balises qui indiquent au navigateur comment afficher le contenu. Voici
quelques-unes des balises de base du HTML qui sont utilisées pour structurer et
formater le texte sur une page web :

<!-- BALISES DE BASE -->

<!-- balises de texte -->

<p>Je suis du texte</p>

<span>Je suis du texte</span>

<p>Je suis du <span>Texte</span></p>

<!-- Les headings titles (balises de titre) -->

<h1>Je suis un titre</h1>

<h2>Je suis un titre</h2>

<h3>Je suis un titre</h3>

<h4>Je suis un titre</h4>

<h5>Je suis un titre</h5>

<h6>Je suis un titre</h6>

<!-- les balises de structure -->

<!-- balise qui englobe -->

<div><p>je suis du texte</p></div>

<!-- balise qui englobe -->

<section></section>

<!-- balise de navigation-->

<nav></nav>

<!-- balise de footer-->

<footer></footer>

<!-- balise pour article-->

<article></article>

<!-- balise qui englobe (main correspond au contenu le plus important de votre site) -->

<main></main>

<!-- balise header (en tete de votre site)-->

<header></header>

<button>Je suis un bouton</button>

<!-- balise de navigation -->

<summary></summary>

<!-- balise de texte preformaté -->

<pre>

je suis

du texte

preformaté

</pre>

<!-- balise de lien-->

<a href="">Je suis un lien</a>

<!-- Les balises auto-fermentes -->

<!-- balise image -->

<img src="" alt="">

<!-- balise espace -->

<br><br>

<!-- balise demarcation -->

<hr>

<!-- balise champ de saisi -->

<input type="text">

Balises de base

<h1> à <h6> : Les balises de titre

Les balises de titre sont utilisées pour indiquer la hiérarchie du texte. <h1> est le
titre principal de la page, tandis que <h2> est un titre secondaire, et ainsi de
suite jusqu'à <h6>. Les balises de titre sont importantes pour le référencement
car elles aident les moteurs de recherche à comprendre la structure de la page.

Exemple :

h Titre principal</h1>

< 1>
<h2>Titre secondaire</h2>

< > p : Le paragraphe

La balise <p> est utilisée pour indiquer un nouveau paragraphe de texte. Les
navigateurs ajoutent automatiquement un espace blanc avant et après chaque
paragraphe.

Exemple :

p Ceci est un paragraphe de texte.</p>

< >
<p>Ceci est un autre paragraphe.</p>

< > a : Le lien hypertexte

La balise <a> est utilisée pour créer un lien hypertexte vers une autre page web
ou un autre emplacement de la même page. Il suffit de spécifier l'URL ou
l'emplacement de destination dans l'attribut href.

Exemple :

< a href="[Link] est un lien hypertexte</a>

Balises liées aux textes

< ul> et <li> : La liste non ordonnée

Les balises <ul> et <li> sont utilisées pour créer une liste non ordonnée. <ul>
crée la liste, tandis que <li> crée chaque élément de la liste.

Exemple :

< ul>

<li>Élément 1</li>

<li>Élément 2</li>

<li>Élément 3</li>

</ul>

Il y a bien sûr de nombreuses autres balises HTML qui sont utilisées pour
formater le texte et structurer le contenu d'une page web. Mais ces balises de
base sont un bon point de départ pour comprendre comment fonctionne HTML.

<!-- LES BALISES LIÉES AUX TEXTES -->

<!-- Ajouter du gras -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <b>Provident, possimus?</b></p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <strong>Provident, possimus?</strong></p>

<!-- italic -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <i>Provident, possimus?</i></p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <em>Provident, possimus?</em></p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <cite>Provident, possimus?</cite></p>

<!-- surligner le texte -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <mark>Provident, possimus?</mark></p>

<!-- small = rend le texte petit -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <small>Provident, possimus?</small></p>

<!-- blockquote = citation -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <blockquote>Provident, possimus?</blockquote></p>

<!-- Ajouter des guillemets -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <q>Provident, possimus?</q></p>

<!-- souligner le texte -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <ins>Provident, possimus?</ins></p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <u>Provident, possimus?</u></p>

<!-- barrer le texte -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <del>Provident, possimus?</del></p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <s>Provident, possimus?</s></p>

<!-- Ajouter description -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <abrr title="je suis une description">Provident, possimus?</abrr></p>

<!-- inferieur / superieur -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. _{Provident, possimus?}</p>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. ^{Provident, possimus?}</p>

<!-- separe les thermes -->

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <dfn>Provident, possimus?</dfn>Lorem ipsum dolor sit amet.</p>

éléments block et inline

En HTML, les éléments sont catégorisés en deux types : les éléments block et
les éléments inline. La catégorisation dépend de la façon dont l'élément est
affiché sur la page.

Les éléments block

Les éléments block sont des éléments qui prennent toute la largeur disponible et
commencent sur une nouvelle ligne. Les éléments block sont souvent utilisés
pour structurer le contenu d'une page en sections distinctes. Voici quelques
exemples d'éléments block
p : le paragraph
< >
<div> : la divisio
<h1> à <h6> : les titre
<ul> : la liste non ordonné
<ol> : la liste ordonnée

Liste élément block: [Link]

level_elements

Les éléments inline

Les éléments inline sont des éléments qui s'affichent sur la même ligne que le
contenu environnant et ne prennent que la largeur nécessaire.

Les éléments inline sont souvent utilisés pour formater le texte. Voici quelques
exemples d'éléments inline
a : le lien hypertext
< >
<strong> : le texte en gra
<em> : le texte en italiqu
<span> : le conteneur générique en ligne

Liste éléments inline: [Link]

Inline_elements

LES LISTES

En HTML, une liste est une collection d'éléments qui sont organisés les uns sous
les autres. Les listes sont souvent utilisées pour présenter du contenu dans un
ordre spécifique ou pour créer une hiérarchie visuelle.

Il existe trois types de listes en HTML: les listes non ordonnées, les listes
ordonnées et les listes de définitions.

Les listes non ordonnées sont

créées avec la balise "ul" (pour <!-- LISTE NON ORDONNÉE -->

"unordered list").

<ul>

<li>Lait</li>

Les éléments de la liste sont créés <li>Pain</li>

avec la balise "li" (pour "list item"). <li>Oeufs</li>

Par exemple, pour créer une liste de <li>Savon</li>

courses, on pourrait utiliser le code

suivant:

</ul>

<!-- LISTE ORDONNÉE -->

Les listes ordonnées sont créées
<ol>

avec la balise "ol" (pour "ordered list").

<li>item</li>
Comme pour les listes non ordonnées,
<li>item</li>
les éléments de la liste sont créés
<li>item</li>
avec la balise "li".

<li>item</li>

</ol>

Par exemple, pour créer une liste

numérotée , on pourrait utiliser le code
suivant:

LES LISTES

Les listes de définitions sont créées <!-- LISTE DE DEFINITIONS -->

avec les balises "dl" (pour "definition

list"), "dt" (pour "definition term") et <dl>

"dd" (pour "definition description").

<dt>Je suis un titre</dt>

<dd>Je suis une description</dd>

Les termes de la liste sont créés avec <dt>Je suis un titre</dt>

la balise "dt" et les définitions sont <dd>Je suis une description</dd>

<dt>Je suis un titre</dt>

créées avec la balise "dd".

<dd>Je suis une description</dd>

</dl>
Par exemple, pour créer une liste de
termes et de définitions, on pourrait
utiliser le code suivant:

<!-- IMBRIQUER DES LISTES -->

Imbrication de listes

<ul>
Il est possible d'imbriquer des listes
<li>item</li>
les unes dans les autres pour créer
<li>item</li>
des structures plus complexes.

<li>item: <ol>

<li>item</li>
Pour cela, il suffit de créer une liste à
<li>item: <ul>

l'intérieur d'un élément de liste.

<li>item</li>
Par exemple, si l'on souhaite créer une
<li>item</li>
liste avec des catégories d'articles, on
<li>item</li>
peut utiliser la structure suivante :
<li>item</li>

</ul></li>

<li>item</li>

<li>item</li>

</ol>

</li>

<li>item</li>

<li>item</li>

</ul>

LIENS ET BOUTONS

En HTML, les liens sont créés à l'aide de la balise "a" (pour anchor), qui permet
de définir un hyperlien vers une autre page Web ou vers une autre partie de la
même page. L’attribut target avec la valeur “_blank” permet d’ouvrir le lien dans
un autres onglet du navigateur. Voici un exemple de code HTML pour créer un
lien :

<!-- Lien vers un URL-->

<a href="[Link] target="_blank">Accéder à google</a>

<!-- Liens vers une page -->

<a href="./[Link]">Accéder à la page contact</a>

<a href="./pages/[Link]">Accéder à la page portfolio</a>

Les boutons en HTML sont créés à l'aide de la balise "button", qui permet de
créer un bouton cliquable. l'attribut "type" est utilisé pour définir le type de
bouton, qui est "submit" pour l’envoi de formulaire ou “action” pour intéragir
avec l’utilisateur. Voici un exemple de code HTML pour créer un bouton :

<!-- BOUTONS -->

<!-- type="button" = action -->

<button type="button">Bouton d'action</button>

<!-- type="submit" = soumission d'un formulaire -->

<button type="submit">Envoyer le message</button>

<!-- BOUTONS DIV -->

<div type="button">Je suis un bouton</div>

Classes et ids

En HTML, les classes et les identifiants (IDs) sont des attributs que vous pouvez
ajouter à vos balises HTML pour identifier et différencier les éléments.

Les classes permettent de regrouper plusieurs éléments HTML sous un même

nom de classe, ce qui permet de leur appliquer des styles CSS ou de les cibler
avec du code JavaScript.

Pour ajouter une classe à une balise HTML, vous pouvez utiliser l'attribut "class"
suivi du nom de la classe.

<div class="box container">Box1</div>

<div class="box2 container">box2</div>

<div class="box container">box3</div>

Les identifiants (IDs) sont similaires aux classes, mais ils sont censés être
uniques sur une même page HTML.

Cela signifie que chaque élément ne doit avoir qu'un seul identifiant,
contrairement aux classes qui peuvent être appliquées à plusieurs éléments.

Pour ajouter un identifiant à une balise HTML, vous pouvez utiliser l'attribut "id"
suivi du nom de l'identifiant.

<div id="cont"></div>

<div id="cont2"></div>

PARENT / ENFANT

En HTML, les éléments peuvent être imbriqués les uns dans les autres pour
former une structure de parent-enfant.

Cela signifie qu'un élément peut contenir d'autres éléments à l'intérieur de lui-
même, et ces éléments peuvent eux-mêmes contenir d'autres éléments, créant
ainsi une hiérarchie d'éléments.

Voici un exemple de code HTML pour illustrer le concept de parent-enfant :

<div class="parent">

<h1>Titre de la section</h1>

<p>Contenu de la section</p>

<ul>

<li>Élément 1</li>

<li>Élément 2</li>

<li>Élément 3</li>

</ul>

</div>

Dans cet exemple, la balise "div" est utilisée pour créer un conteneur de parent.

Elle contient plusieurs autres éléments imbriqués à l'intérieur d'elle-même.

Le titre "Titre de la section" est un enfant direct de la balise "div", tout comme le
paragraphe "Contenu de la section".

La liste non ordonnée "ul" est également un enfant direct de la balise "div", mais
elle contient plusieurs éléments "li" à l'intérieur d'elle-même.

Il est important de noter que chaque élément peut avoir un seul parent, mais
plusieurs enfants peuvent être imbriqués à l'intérieur d'un même parent. Cette
structure de parent-enfant permet de créer des mises en page complexes et de
hiérarchiser les éléments de votre page Web.

FORMULAIRE

En HTML, les formulaires permettent aux utilisateurs de saisir et d'envoyer des

informations à un serveur Web.

Les formulaires peuvent être utilisés pour recueillir des informations telles que le
nom, l'adresse e-mail, les commentaires, les préférences de l'utilisateur et bien
plus encore.

Les formulaires peuvent également être utilisés pour effectuer des opérations
plus complexes telles que la recherche de données, la création de compte ou la
validation de données.

Voici un exemple de code HTML pour créer un formulaire simple :

<form action="/url-de-destination" method="POST">

<label for="nom">Nom :</label>

<input type="text" id="nom" name="nom" required>

<label for="email">E-mail :</label>

<input type="email" id="email" name="email" required>

<label for="message">Message :</label>

<textarea id="message" name="message" required></textarea>

<button type="submit">Envoyer</button>

</form>

FORMULAIRE

Dans cet exemple, la balise "form" est utilisée pour créer le formulaire et définir
l'adresse URL de destination où les données du formulaire seront envoyées
lorsqu'il sera soumis.

L'attribut "method" est utilisé pour spécifier la méthode HTTP utilisée pour
envoyer les données du formulaire, ici "POST".

Les éléments du formulaire tels que "label", "input" et "textarea" sont utilisés
pour créer des champs de saisie où les utilisateurs peuvent entrer des
informations.

Chaque élément a un "name" qui est utilisé pour identifier les données
lorsqu'elles sont envoyées au serveur.

Le champ "required" est utilisé pour spécifier que le champ est obligatoire et
doit être rempli par l'utilisateur avant de pouvoir soumettre le formulaire.

Enfin, le bouton "submit" est utilisé pour soumettre le formulaire.

Lorsque l'utilisateur clique sur ce bouton, les données du formulaire sont

envoyées au serveur pour traitement.

L’attribut "for" du label est défini sur la valeur "nom", qui correspond à l'attribut
"id" de l'input. Cela signifie que si l'utilisateur clique sur le label "Nom :", le
champ de saisie "input" correspondant sera mis en évidence.

Il est important de noter que l'utilisation de labels et d'inputs liés est une bonne
pratique de développement Web et est également recommandée par les normes
d'accessibilité Web (WCAG) pour améliorer l'accessibilité de votre site Web pour
tous les utilisateurs.

LES TYPES D’inputs

En HTML, il existe plusieurs types d'entrées (ou inputs) que vous pouvez utiliser
pour permettre à vos utilisateurs de saisir des informations ou de sélectionner
des options sur une page web. Voici quelques exemples courants :

Texte : Le type d'entrée texte est utilisé pour permettre à l'utilisateur de saisir du
texte. Vous pouvez spécifier la taille de la zone de texte à l'aide de l'attribut
"size" et la longueur maximale de la saisie à l'aide de l'attribut "maxlength".

<input type="text" name="nom" size="30" maxlength="50">

Mot de passe : Le type d'entrée "password" est utilisé pour permettre à

l'utilisateur de saisir un mot de passe. Le texte saisi est masqué par des
astérisques ou des cercles pour des raisons de sécurité.

<input type="password" name="motdepasse" size="30">

Case à cocher : Les cases à cocher (ou checkboxes) permettent à l'utilisateur

de sélectionner une ou plusieurs options. Chaque case à cocher est associée à
une valeur et un nom pour permettre au formulaire de récupérer les choix de
l'utilisateur.
<input type="checkbox" name="couleur" value="rouge">

Boutons radio : Les boutons radio (ou radio buttons) permettent également à
l'utilisateur de sélectionner une option parmi plusieurs. Cependant, avec les
boutons radio, l'utilisateur ne peut sélectionner qu'une seule option.

<input type="radio" name="sexe" value="homme">

LES TYPES D’inputs

File : Cet attribut crée un champ de saisie de fichier qui permet aux utilisateurs
de sélectionner un fichier à télécharger à partir de leur ordinateur.
<input type="file" >

Email : Le type d'entrée "email" est utilisé pour permettre à l'utilisateur de saisir
une adresse e-mail valide.

<input type="mail" >

URL : Le type d'entrée "url" est utilisé pour permettre à l'utilisateur de saisir une
URL valide.
<input type="mail" >

Téléphone : Le type d'entrée "tel" est utilisé pour permettre à l'utilisateur de

saisir un numéro de téléphone.

<input type="tel" >

Couleur : Le type d'entrée "color" est utilisé pour permettre à l'utilisateur de

sélectionner une couleur.

<input type="color" >

Date et Heure : Les types d'entrée "date" et "time" permettent à l'utilisateur de

sélectionner une date et/ou une heure.

<input type="date" >

LES TYPES D’inputs

Color : Cet attribut crée un sélecteur de couleur qui permet aux utilisateurs de
sélectionner une couleur à partir d'une palette de couleurs.
<input type="color" >

Submit : Cet attribut crée un bouton qui envoie le formulaire à un serveur pour
traitement.

<input type="submit" value="Envoyer" >

Reset : Cet attribut crée un bouton qui réinitialise tous les champs d'un
formulaire à leur valeur par défaut.

<input type="reset" >

Button : Cet attribut crée un bouton qui ne fait rien par défaut, mais qui peut
être utilisé pour déclencher une action spécifique à l'aide de JavaScript.

<input type="button" value="Cliquer ici" >

Search : Cet attribut crée un champ de saisie de recherche qui peut être utilisé
pour saisir des termes de recherche.

<input type="search" >

Number : Cet attribut crée un champ de saisie numérique qui ne permet que les
entrées de nombres. Vous pouvez également spécifier des paramètres tels que
la valeur minimale et maximale, ainsi que l'incrément pour les valeurs.

<input type="number" >

les attributs

En plus des types d'entrées HTML que nous avons mentionnés précédemment,
il existe également de nombreux attributs supplémentaires que vous pouvez
utiliser pour personnaliser davantage vos formulaires HTML. Voici quelques-uns
des attributs les plus couramment utilisés
required - Cet attribut indique que le champ est obligatoire et doit être rempli avant que le
formulaire ne puisse être soumis
placeholder - Cet attribut spécifie un texte de rappel qui apparaît dans le champ de saisie avant
que l'utilisateur n'entre une valeur. Il peut être utilisé pour fournir des instructions ou des exemples
de données attendues
maxlength - Cet attribut spécifie le nombre maximum de caractères qui peuvent être entrés dans
un champ de saisie
min et max - Ces attributs peuvent être utilisés avec les types d'entrées number, date, time, et
range pour spécifier les valeurs minimale et maximale autorisées
step - Cet attribut peut être utilisé avec les types d'entrées number, date, time, et range pour
spécifier l'incrément de valeur autorisé pour la sélection
pattern - Cet attribut peut être utilisé avec les types d'entrées text et password pour spécifier une
expression régulière qui doit correspondre à la valeur entrée
autocomplete - Cet attribut peut être utilisé pour activer ou désactiver la fonction d'autocomplétion
du navigateur pour le champ de saisie
readonly - Cet attribut spécifie que le champ est en lecture seule et ne peut pas être modifié
disabled - Cet attribut désactive le champ et empêche l'utilisateur de l'interagir
name - Cet attribut spécifie le nom du champ, qui est utilisé pour identifier la valeur du champ
lorsqu'elle est soumise au serveur
id - Cet attribut spécifie un identifiant unique pour le champ, qui peut être utilisé pour le cibler à
l'aide de CSS ou JavaScript
class - Cet attribut spécifie une ou plusieurs classes CSS pour le champ, ce qui permet de
personnaliser son apparence à l'aide de styles CSS.

Voilà quelques-uns des attributs supplémentaires les plus couramment utilisés

pour personnaliser les champs de saisie HTML. En général, il existe de
nombreux autres attributs que vous pouvez utiliser pour personnaliser
davantage les champs de saisie, mais ces exemples devraient vous donner une
idée de ce qui est possible.

select box

Les select box sont des éléments de formulaire HTML qui permettent à
l'utilisateur de sélectionner une option à partir d'une liste déroulante. Voici un
exemple de code pour créer une select box :

<select name="fruits">

<option value="pomme">Pomme</option>

<option value="banane">Banane</option>

<option value="orange">Orange</option>

<option value="kiwi">Kiwi</option>

</select>

Dans cet exemple, la balise select crée la select box et l'attribut name spécifie le
nom de la donnée qui sera envoyée au serveur lorsque le formulaire sera
soumis.

Les balises option définissent les différentes options de la liste déroulante, avec
l'attribut value qui spécifie la valeur de chaque option qui sera envoyée au
serveur et le contenu de la balise qui sera affiché dans la select box.

Il existe également d'autres attributs que vous pouvez utiliser pour personnaliser
davantage vos select box, tels que
size : spécifie le nombre de lignes visibles de la select box
multiple : permet à l'utilisateur de sélectionner plusieurs options à la fois
disabled : désactive la select box et empêche l'utilisateur de la sélectionner
selected : spécifie l'option par défaut qui sera sélectionnée lorsque la page est chargée.

Datalist

La balise datalist permet de fournir une liste de suggestions à l'utilisateur

lorsqu'il remplit un champ de formulaire input. Voici un exemple de code pour
créer une datalist :

<label for="fruits">Fruits :</label>

<input list="fruits" name="fruits">

<datalist id="fruits">

<option value="Pomme">

<option value="Banane">

<option value="Orange">

<option value="Kiwi">

</datalist>

Dans cet exemple, la balise input crée un champ de formulaire où l'utilisateur

peut saisir une valeur.

L'attribut list est utilisé pour lier ce champ à la datalist correspondante. L'attribut
id de la datalist doit correspondre à la valeur de l'attribut list de l'input.

Les balises option définissent les différentes options de la datalist, avec

l'attribut value qui spécifie la valeur de chaque option qui sera suggérée à
l'utilisateur.

Il existe également d'autres attributs que vous pouvez utiliser pour personnaliser
davantage vos datalist, tels que
label : spécifie une étiquette pour la datalist
disabled : désactive la datalist
autocomplete : spécifie si le champ de formulaire doit activer l'autocomplétion en utilisant les
options de la datalist. Les valeurs possibles sont "on" (par défaut) et "off".

LES Médias

Images :

Pour ajouter une image à une page HTML, vous pouvez utiliser la balise img.
Voici un exemple de code :

<img src="chemin/vers/[Link]" alt="Description

de l'image" width="400" height="300">

Dans cet exemple, l'attribut src spécifie le chemin vers l'image, l'attribut alt
fournit une description textuelle de l'image pour les utilisateurs qui ne peuvent
pas la voir, et les attributs width et height spécifient la largeur et la hauteur de
l'image en pixels.

Il existe également d'autres attributs que vous pouvez utiliser pour personnaliser
davantage vos images, tels que
title : spécifie un texte qui apparaîtra lorsqu'un utilisateur survolera l'image
class et id : permettent de cibler l'image à l'aide de CSS ou JavaScript
loading : spécifie quand l'image doit être chargée, avec les options "eager" (immédiatement) ou
"lazy" (lorsque l'image entre dans le champ de vision de l'utilisateur)
decoding : spécifie comment l'image doit être décoder (avec l'option "async" pour une lecture
différée).

Vidéos :

Pour ajouter une vidéo à une page HTML, vous pouvez utiliser la balise video.

<video controls >

<source src="chemin/vers/video.mp4" type="video/mp4">

<source src="chemin/vers/[Link]" type="video/webm">

Votre navigateur ne supporte pas la balise vidéo.

</video>

LES Médias

Dans cet exemple, les balises source spécifient les différents formats de vidéo
que vous proposez, avec l'attribut src qui indique le chemin vers chaque fichier
et l'attribut type qui spécifie le type de fichier.

La balise video inclut également l'attribut controls, qui ajoute des contrôles de
lecture (play, pause, etc.) à la vidéo, et l'attribut width, qui spécifie la largeur de
la vidéo en pixels.

Il existe également d'autres attributs que vous pouvez utiliser pour personnaliser
davantage vos vidéos, tels que
autoplay : spécifie que la vidéo doit être lue automatiquement dès qu'elle est chargée
loop : spécifie que la vidéo doit être lue en boucle
muted : spécifie que la vidéo doit être lue sans son
poster : spécifie une image qui sera affichée avant que la vidéo ne soit lue.

Audio :

Pour ajouter de l'audio à une page HTML, vous pouvez utiliser la balise audio.
Voici un exemple de code :

<audio controls>

<source src="chemin/vers/audio.mp3" type="audio/mpeg">

Votre navigateur ne supporte pas la balise audio.

</audio>

LES Médias

Dans cet exemple, les balises source spécifient les différents formats audio que
vous proposez, avec l'attribut src qui indique le chemin vers chaque fichier et
l'attribut type qui spécifie le type de fichier.

Il existe également d'autres attributs que vous pouvez utiliser pour personnaliser
davantage vos audios, tels que
autoplay : spécifie que l'audio doit être joué automatiquement dès qu'il est chargé
controls : ajoute des contrôles de lecture (play, pause, etc.) à l'audio
loop : spécifie que l'audio doit être joué en boucle
muted : spécifie que l'audio doit être joué sans son
preload : spécifie quand l'audio doit être chargé, avec les options "none" (pas de préchargement),
"metadata" (chargement des métadonnées) et "auto" (préchargement complet)
src : spécifie le chemin vers le fichier audio
type : spécifie le type de fichier audio, avec des valeurs telles que "audio/mpeg", "audio/ogg" et
"audio/wav"
volume : spécifie le volume de l'audio, avec une valeur entre 0 (muet) et 1 (volume maximum).

émojis et entités

Les entités HTML sont des séquences de caractères spéciales qui sont utilisées
pour représenter des caractères qui ne peuvent pas être directement insérés
dans le code HTML. Voici quelques exemples d'entités HTML courantes
&lt; pour représenter le symbole "<
&gt; pour représenter le symbole ">
&amp; pour représenter le symbole "&

&quot; pour représenter le symbole "

Les entités HTML peuvent être utiles pour afficher des caractères spéciaux tels
que les symboles de devises, les marques de ponctuation, les caractères
diacritiques, etc. Voici un exemple de code HTML utilisant des entités HTML :

<p>Le symbole & euro; représente l'euro.</p>

Dans cet exemple, l'entité HTML &euro; est utilisée pour afficher le symbole de
l'euro.

Les emojis sont des symboles graphiques qui sont souvent utilisés dans les
messages et les discussions en ligne.

Depuis HTML5, il est possible d'insérer des emojis dans du code HTML en
utilisant des codes de caractères Unicode. Voici un exemple de code HTML
utilisant des emojis :

<p>Voici un exemple d'emoji : &# x1F60A;</p>

Dans cet exemple, le code &#x1F60A; représente l'emoji souriant avec les yeux
en forme de coeur.

Vous pouvez trouver une liste complète des codes de caractères Unicode pour
les emojis sur des sites tels que [Link].

Notez que la prise en charge des emojis peut varier selon les navigateurs et les
appareils, il est donc important de tester votre code sur différents
environnements.

Intégrer du css

Il existe trois façons d'intégrer des styles CSS dans une page HTML :

Lien externe : cette méthode consiste à créer un fichier CSS séparé et à le lier à
la page HTML à l'aide d'un élément link. Voici un exemple de code HTML :

<!DOCTYPE html>

<html>

<head>

<title>Ma page</title>

<link rel="stylesheet" type="text/css" href="[Link]">

</head>

<body>

<h1>Titre</h1>

<p>Paragraphe</p>

</body>

</html>

Dans cet exemple, le fichier CSS [Link] est lié à la page HTML à l'aide de la
balise link. Tous les styles définis dans le fichier CSS seront appliqués à la page
HTML.

Style interne : cette méthode consiste à intégrer les styles CSS directement
dans l'élément head de la page HTML à l'aide d'un élément style. Voici un
exemple de code HTML :

Intégrer du css

<head>

<title>Ma page</title>

<style>

h1 {

color: red;

p {

font-size: 18px;

</style>

</head>

Dans cet exemple, les styles sont intégrés directement dans l'élément head à
l'aide de la balise style. Tous les styles définis dans cet élément seront
appliqués à la page HTML.

Style en ligne : cette méthode consiste à ajouter des styles CSS directement à
un élément HTML à l'aide de l'attribut style. Voici un exemple de code HTML :

<h1 style="color: red;">Titre</h1>

<p style="font-size: 18px;">Paragraphe</p>

Intégrer du Javascript

Il y a deux façons principales d'intégrer du code JavaScript dans une page

HTML :

Lien externe : cette méthode consiste à créer un fichier JavaScript séparé et à

le lier à la page HTML à l'aide d'un élément script. Voici un exemple de code
HTML :

<!DOCTYPE html>

<html>

<head>

<title>Ma page</title>

</head>

<body>

<h1>Titre</h1>

<p>Paragraphe</p>

<script src="[Link]"></script>

</body>

</html>

Dans cet exemple, le fichier JavaScript [Link] est lié à la page HTML à l'aide
de la balise script. Tout le code JavaScript défini dans le fichier sera exécuté
lorsque la page HTML est chargée.

Code en ligne : cette méthode consiste à ajouter du code JavaScript

directement à la page HTML à l'aide de la balise script. Voici un exemple de
code HTML :

Intégrer du Javascript

<!DOCTYPE html>

<html>

<head>

<title>Ma page</title>

</head>

<body>

<h1>Titre</h1>

<p>Paragraphe</p>

<script>

alert("Bonjour !");

</script>

</body>

</html>

Dans cet exemple, du code JavaScript est ajouté directement à la page HTML
à l'aide de la balise script. Ce code sera exécuté lorsque la page HTML est
chargée.

Il est important de noter que l'inclusion de scripts dans une page HTML doit
être effectuée avec prudence. Le code JavaScript peut potentiellement
affecter la performance de la page, en particulier si le code est lourd ou mal
optimisé.

De plus, il peut y avoir des problèmes de sécurité si le code est malveillant ou

exploitable. Il est donc recommandé de toujours valider et tester
soigneusement le code JavaScript avant de l'inclure dans une page HTML.

LES TABLEAUX

Les tableaux sont un moyen commun de présenter des données tabulaires

dans les pages HTML. Voici un exemple de code HTML pour créer un tableau
simple :

<table>

<caption>Titre du tableau</caption>

<thead>

<tr>

<th>Colonne 1</th>

<th>Colonne 2</th>

<th>Colonne 3</th>

</tr>

</thead>

<tbody>

<tr>

<td>Ligne 1, Colonne 1</td>

<td>Ligne 1, Colonne 2</td>

<td>Ligne 1, Colonne 3</td>

</tr>

<tr>

<td>Ligne 2, Colonne 1</td>

<td>Ligne 2, Colonne 2</td>

<td>Ligne 2, Colonne 3</td>

</tr>

</tbody>

</table>

LES TABLEAUX

Dans cet exemple, l'élément table est utilisé pour créer un tableau. L'élément tr
(pour "table row") est utilisé pour créer une nouvelle ligne dans le tableau.
L'élément th (pour "table header") est utilisé pour définir une cellule d'en-tête,
tandis que l'élément td (pour "table data") est utilisé pour définir une cellule de
données.

Il est également possible d'ajouter des attributs aux éléments du tableau pour
modifier leur apparence ou leur comportement. Voici quelques exemples
border : spécifie l'épaisseur de la bordure du tablea
cellspacing : spécifie l'espace entre les cellules du tablea
cellpadding : spécifie l'espace entre le contenu des cellules et leur bordur
colspan : spécifie le nombre de colonnes que doit occuper une cellul
rowspan : spécifie le nombre de lignes que doit occuper une cellule

Voici un exemple de code qui utilise certains de ces attributs :

<table border="1" cellspacing="0" cellpadding="10">

<tr>

<th colspan="2">Entête de tableau</th>

</tr>

<tr>

<td>Ligne 1, colonne 1</td>

<td>Ligne 1, colonne 2</td>

</tr>

<tr>

<td rowspan="2">Ligne 2, colonne 1</td>

<td>Ligne 2, colonne 2</td>

</tr>

<tr>

<td>Ligne 3, colonne 2</td>

</tr>

</table>

LA sémantique

La sémantique en HTML fait référence à l'utilisation de balises HTML pour

donner un sens et une structure sémantique à une page web. Cela signifie que
chaque balise HTML doit être utilisée de manière appropriée pour décrire son
contenu de manière précise et cohérente.

Les balises HTML sémantiques sont celles qui fournissent des informations sur
la structure de la page web, plutôt que simplement son apparence.

Ces balises sont importantes car elles permettent aux moteurs de recherche
et aux lecteurs d'écrans de comprendre le contenu de la page et de
l'interpréter correctement.

Voici quelques exemples de balises HTML sémantiques :

<h eader> : Cette balise est utilisée pour définir l'en-tête ou la section
supérieure de la page. Elle peut contenir des éléments tels que des logos, des
titres, des menus de navigation, etc.

<header>

<h1>Mon site web</h1>

<nav>

<ul>

<li><a href="#">Accueil</a></li>

<li><a href="#">À propos</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

LA sémantique

< main> : Cette balise est utilisée pour contenir le contenu principal de la page
web. Elle est souvent utilisée en conjonction avec <header> et <footer>.

<main>

<h2>Bienvenue sur mon site web</h2>

<p>Ce site web contient des informations sur mon

entreprise</p>

<section>

<h3>Nos produits</h3>

<ul>

<li>Produit 1</li>

<li>Produit 2</li>

<li>Produit 3</li>

</ul>

</section>

</main>

< section> : Cette balise est utilisée pour diviser le contenu en sections
distinctes. Elle peut être utilisée pour séparer les articles, les chapitres, les
groupes de contenu connexes, etc.

LA sémantique

<section>

<h2>Nos services</h2>

<ul>

<li>Service 1</li>

<li>Service 2</li>

<li>Service 3</li>

</ul>

</section>

En utilisant ces balises HTML sémantiques de manière appropriée, vous

pouvez aider les moteurs de recherche et les lecteurs d'écrans à mieux
comprendre votre contenu et à améliorer l'accessibilité de votre site web.

Typographies

Tout d'abord, accédez à la page des polices Google Fonts (https://

[Link]/) et choisissez une police que vous souhaitez utiliser.

Cliquez sur le bouton "Select This Font" pour ajouter la police à votre collection
de polices.

Cliquez sur le bouton "Embed" pour afficher le code HTML à utiliser pour
importer la police. Vous pouvez choisir de n'inclure que les styles de police
dont vous avez besoin pour votre site.

Voici un exemple de code HTML pour importer et utiliser la police Google Font
"Open Sans" avec les styles regular et bold:

<!DOCTYPE html>

<html>

<head>

<link href="https://
[Link]/css2?
family=Open+Sans:ital,wght@0,400;0,700;1,400
;1,700&display=swap" rel="stylesheet">

</head>

<body>

<h1 style="font-family: 'Open Sans',

sans-serif; font-weight: 400;">Titre de
niveau 1</h1>

</body>

</html>

La balise meta description

La balise <meta> description en HTML est utilisée pour fournir une description
courte et concise du contenu d'une page web.

Cette description est souvent affichée dans les résultats de recherche des
moteurs de recherche tels que Google, Bing, etc. afin d'aider les utilisateurs à
comprendre le contenu de la page avant de cliquer sur le lien.

Voici un exemple de code HTML pour la balise <meta> description:

<head>

<meta name="description" content="Description courte

et concise de la page web.">

</head>

Les règles à suivre pour la balise <meta> description sont les suivantes
La balise <meta> doit être placée dans la section <head> de la page HTML
L'attribut name doit être défini sur "description"
L'attribut content doit contenir la description courte et concise de la page web (généralement
moins de 160 caractères)
La description doit être pertinente et décrire avec précision le contenu de la page
La description doit être unique pour chaque page de votre site web
Évitez d'utiliser des mots-clés ou des phrases qui ne sont pas liés au contenu de la page.

Il est important de noter que bien que la balise <meta> description ne soit pas
utilisée par les moteurs de recherche pour déterminer le classement d'une
page web, elle peut affecter le taux de clics (CTR) de votre page dans les
résultats de recherche en fournissant une description précise et convaincante
du contenu de la page.

Les balises meta OG

Les balises Meta Open Graph (ou balises Meta OG) sont des balises <meta>
supplémentaires qui peuvent être ajoutées à la section <head> de la page
HTML pour fournir des informations supplémentaires sur le contenu de la page
web. Ces balises sont utilisées principalement par les réseaux sociaux pour
afficher des extraits enrichis de contenu lorsqu'un lien vers votre page web est
partagé sur un réseau social. Voici un exemple de code HTML pour les balises
Meta OG:

<head>

<meta property="og:title" content="Titre de la page">

<meta property="og:description" content="Description de

la page">

<meta property="og:image" content="URL de l'image">

<meta property="og:url" content="URL de la page">

</head>

Les balises Meta OG courantes sont

og:title : le titre de la page, généralement le même que le titre de la balise <title>
og:description : une description de la page, généralement plus courte que la balise <meta>
description et optimisée pour les réseaux sociaux
og:image : l'URL d'une image représentative de la page, qui sera affichée avec le lien partagé
og:url : l'URL de la page.

Il est important de noter que les balises Meta OG doivent être utilisées avec
précaution, car elles peuvent potentiellement contenir des informations
sensibles ou confidentielles. Assurez-vous de ne pas inclure d'informations
personnelles ou sensibles dans les balises Meta OG.

De plus, toutes les balises Meta OG ne sont pas obligatoires. Seule la balise
og:title est considérée comme obligatoire pour une utilisation efficace des
extraits enrichis sur les réseaux sociaux.

Enfin, il est important de valider les balises Meta OG à l'aide de l'outil de

validation Open Graph de Facebook ([Link]
debug/) pour s'assurer qu'elles sont correctement configurées.

accessibilité

L'accessibilité en HTML fait référence à la conception de sites Web de manière

à ce qu'ils soient accessibles à tous les utilisateurs, y compris ceux qui ont des
limitations physiques, sensorielles ou cognitives. Cela implique notamment
l'utilisation de balises et d'attributs HTML appropriés pour permettre
l'accessibilité des éléments à des technologies d'assistance telles que les
lecteurs d'écran.

Dans l’exemple qui suit, nous pouvons voir que le code utilise des balises
HTML appropriées pour structurer le contenu du site. Le header contient le
titre du site et une navigation, le main contient le contenu principal de la page,
et le footer contient des informations sur l'entreprise.

En outre, les liens dans la navigation sont identifiés à l'aide de la balise a avec
un texte de lien significatif, ce qui permet aux utilisateurs de technologies
d'assistance de comprendre où ils sont et où ils peuvent aller sur le site.

Enfin, la balise img est utilisée pour inclure des images, et chaque image a une
description textuelle alternative (indiquée par l'attribut alt) pour les utilisateurs
qui ne peuvent pas voir l'image elle-même. Cela permet à ces utilisateurs de
comprendre le contenu visuel de la page.

accessibilité

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<title>Exemple d'accessibilité en HTML</title>

</head>

<body>

<header>

<h1>Mon site Web accessible</h1>

<nav>

<ul>

<li><a href="#">Accueil</a></li>

<li><a href="#">À propos</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</header>

<main>

<article>

<h2>Introduction</h2>

<p>Cet exemple de site Web a été conçu en gardant à

l'esprit l'accessibilité. Toutes les images ont des
descriptions textuelles alternatives et les liens sont
clairement identifiés.</p>

</article>

</main>

<footer>

<p>&copy; 2023 Mon entreprise. Tous droits réservés.</p>

</footer>

</body>

</html>

Attributs aria

Les attributs ARIA en HTML (Accessible Rich Internet Applications) sont une
série d'attributs qui peuvent être ajoutés aux éléments HTML pour améliorer
l'accessibilité des applications Web. Les personnes ayant des handicaps, tels
que les troubles visuels ou moteurs, peuvent avoir des difficultés à naviguer
sur des pages Web si celles-ci ne sont pas correctement structurées ou si les
éléments ne sont pas correctement étiquetés.

Les attributs ARIA fournissent un moyen d'ajouter des informations

supplémentaires aux éléments HTML pour aider les lecteurs d'écran et les
autres technologies d'assistance à comprendre l'interface utilisateur d'une
page Web. Ces attributs peuvent être utilisés pour spécifier des rôles, des
états et des propriétés pour les éléments HTML.

Par exemple, l'attribut aria-label peut être utilisé pour fournir une étiquette
alternative pour un élément, qui sera lue par un lecteur d'écran. L'attribut aria-
hidden peut être utilisé pour indiquer qu'un élément ne doit pas être visible
pour les lecteurs d'écran, tandis que l'attribut aria-describedby peut être utilisé
pour fournir une description détaillée d'un élément.

En utilisant des attributs ARIA, les développeurs peuvent créer des pages Web
plus accessibles et offrir une expérience utilisateur améliorée pour les
personnes ayant des handicaps.

Sa principal règle est de ne pas les utilisées.

Table Index

L'attribut tabindex en HTML permet de spécifier l'ordre dans lequel les

éléments d'une page Web reçoivent le focus à l'aide de la touche Tab du
clavier. Le focus est l'état d'un élément qui est actuellement sélectionné et prêt
à être utilisé, comme un bouton qui peut être cliqué ou un champ de saisie qui
peut être rempli.

En utilisant l'attribut tabindex, les développeurs peuvent définir l'ordre des

éléments interactifs sur une page Web, qui est généralement déterminé par
l'ordre dans lequel ils apparaissent dans le code HTML. L'attribut tabindex peut
être appliqué à n'importe quel élément interactif, y compris les liens, les
boutons, les champs de saisie, les zones de texte, les éléments de formulaire,
les images, les éléments d'interface utilisateur personnalisés, etc.

L'attribut tabindex accepte une valeur numérique, qui représente l'ordre dans
lequel l'élément recevra le focus. Les valeurs positives indiquent l'ordre normal,
tandis que les valeurs négatives indiquent que l'élément est sauté dans l'ordre
normal et que le focus est déplacé à l'élément suivant dans l'ordre normal. Si
deux éléments ont le même tabindex, l'ordre sera déterminé par l'ordre dans
lequel ils apparaissent dans le code HTML.

Il est important de noter que l'utilisation excessive de l'attribut tabindex peut

compliquer la navigation au clavier pour les utilisateurs, il est donc
recommandé de l'utiliser avec parcimonie

Raccourcis emmet

<!-- ! + entr = ouvre le dcotype -->

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Emmet</title>

<!-- link + entre = Balise de lien css -->

link

</head>

<body>

<!-- nonBalise + entre = créer un element html -->

section

footer

div

nav

ul

<!-- lorem(nombreDeMotSouhaiter) + entr = integrer du lorem ipsum -->

lorem

<!-- Rajouter des classes ou des id -->

<!-- [Link] = donner une classe à un element -->

[Link]

<!-- [Link].Classe2 = mettre plusieurs classes -->

[Link]

<!-- element#nomId = donner un ID un ID a un element -->

div#container

<!-- Pour une div vous pouvez ecrire directement .div -->

.card

<!-- element#[Link] Rajouter une classe et un id a un element -->

element#[Link]

Raccourcis emmet

<!-- {} = rajouter du contenu à l'interieur dun element -->

h1{je suis un titre}

[Link]#Iden{Je suis un titre}

<!-- > = imbrication -->

div>ul>li>a

<!-- + = rajoute un element frere (de même niveau) à un element -->

div>p+ul>li

[Link]>p>[Link]>[Link]

<!-- * = multiplier un element -->

div>ul>li*6

<!-- $ = indexer des elements -->

ul>[Link]$*5

<!-- ^ = monter d'un etage -->

div>ul^p

<!-- () = créer des groupe d'elements -->

section>(header>div>ul>li*2)+footer>p{je suis le footer}

<!-- [] = appliquer les attribut directement -->

a[href="[Link]" target="_blanck" title="Google"]

<!-- form et inputs -->

form

form:get

form:post

input:radio

input:checkbox

input:submit

<!-- lab = pour les label -->

lab

h ttps://[Link]

@laminutedecode

h ttps://[Link]/invite/HErpkxbmbS