Abonnez-vous à DeepL Pro pour éditer ce document.
Visitez www.DeepL.com/pro pour en savoir plus.
GOMYCODE
CHEAT SHEET
<page> 1
Résumé du document
Informations sur le
document
<page> 2
Structure du document
Formatage du texte
<page> 3
Liens
Images
<page> 4
Listes
de
formu
laires
<page> 5
Attributs du type d'entrée
Sélectionner les
<page> 6
attributs Option
Attributs
Tableau Objets de
<page> 7
formatage et iFrames
Attributs des iFrames
Attributs d'intégration
HTML5 Nouvelles balises
Objets à caractère collectif
www.gomycode.co
Voyons comment nous pouvons diviser le <base/>
code en différents composants :
Utilisée pour spécifier l'URL de base de votre
site, cette balise facilite la création de liens
<html> ... </html>
internes sur votre site.
Cette balise indique que la page web est écrite
en HTML. Il apparaît à la toute première et à la <meta/>
dernière ligne de la page web. Elle est
Il s'agit de la balise de métadonnées de la page web.
principalement utilisée pour indiquer que la
Peut être utile pour mentionner l'auteur de la page, les
page utilise HTML5, la dernière version du mots-clés, la date de publication originale, etc.
langage. Également connue sous le nom
d'élément racine, cette balise peut être <link/>
considérée comme la balise parent de toutes
Il est utilisé pour établir un lien avec des
les autres balises utilisées dans la page.
scripts externes à la page web. Il est
généralement utilisé pour inclure des
<haut> ... <haut>
feuilles de style.
Cette balise est utilisée pour spécifier les
métadonnées de la page web. Elle comprend le <style> ... </style>
nom de la page web,
La balise de style peut remplacer ou
ses dépendances (scripts JS et CSS), l'utilisation des compléter une feuille de style externe.
polices de caractères, etc. Comprend des informations sur l'apparence de la page
web.
<title> ... </title>
Comme son nom l'indique, cette balise contient <script> ... </script>.
le titre/nom de la page web. Vous pouvez le voir Utilisé pour ajouter des extraits de code,
dans la barre de titre de votre navigateur pour généralement en JavaScript, afin de rendre une
chaque page web ouverte dans le navigateur. Les page web dynamique. Il peut également être
moteurs de recherche utilisent cette balise pour utilisé pour créer un lien vers un script externe.
extraire le sujet de la page web, ce qui est très
pratique pour classer les résultats de recherche
pertinents. Exemple
<body> ... </body> <html>
Tout ce que l'utilisateur voit sur une page web <b>En-tête>
est écrit à l'intérieur de cette balise. Il s'agit d'un
conteneur pour tout le contenu de la page web.
Exemple <meta charset="utf-8">
<base href="http://myfirstwebsite.com"
target="_blank" />
<html>
<title>Mon beau site web</title>
<b>En-tête> <link rel="stylesheet" href="/css/master.css">
<title>Mon premier site <script type="text/javascript">
web</title> var dummy = 0 ;
</head> </script>
<body> </head>
<body>
</body>
</html> </body>
</html>
www.gomy
code.co
<i> ... </i>
Permet également d'afficher du texte en italique,
mais ne le met pas en valeur comme la balise ci-
dessus.
<h1..h6> ... </h1..h6>
Six variantes de rédaction d'un titre.
<h1> a la taille de police la plus grande, tandis
que <h6> a la plus petite.
<div> ... </div>
Le contenu d'une page web est généralement
divisé en blocs, spécifiés par la balise div.
<span> ... </span>.
Cette balise injecte des éléments en ligne,
comme une image, une icône, une émoticône,
sans ruiner le formatage.
/ style de la page.
<p> ... </p> <p>
Du texte en clair est placé à l'intérieur de cette balise.
<br/>
Un saut de ligne pour les pages web. Il est
utilisé pour écrire une nouvelle ligne.
<hr/>
Similaire à la balise précédente. Mais en
plus de passer à la ligne suivante, cette balise
dessine également une barre horizontale
pour indiquer la fin.
de la section.
Exemple
<div>
<h1>Top 5 des plus grands films</h1>
</p> <p>Ils sont considérés comme les plus
grands
<span>Icône de bobine</span> de tous les
temps </p>
<hr/>
<h2>1. le Parrain</h2>
<Ce classique de 1972 met en vedette Marlon
Brando et Al Pacino.
</div>
<strong> ... </strong>
Met le texte en gras. Utilisé pour mettre l'accent sur
un point
<b> ... </b>
Alternative à la balise ci-dessus, crée également du
texte en gras.
<em> ... </em>
Une autre balise d'emphase, mais qui affiche
le texte en italique.
<tt> ... </tt>
Formatage du texte à la manière d'une machine à
écrire. N'est plus pris en charge par le HTML5.
<strike> ... </strike>
Autre vieille balise, elle sert à tracer une www.gomycode.co
ligne au centre du texte, de manière à le
faire paraître sans importance ou sans
utilité.
<cite> ... </cite>
Étiquette pour citer l'auteur d'une citation.
<del> ... </del>
Texte préformaté, "monospace", présenté
avec un espace blanc intact à l'intérieur de
l'élément.
<ins> ... </ins>
Indique un texte qui a été inséré dans la
page web.
<blockquote> ... </blockquote>
Les citations sont souvent placées dans cette balise.
Elle est utilisée en tandem avec la balise <cite>.
<q> ... </q>
Similaire à la balise ci-dessus, mais pour des citations plus
courtes.
<abbr> ... </abbr>
Indique les abréviations, ainsi que les formes complètes.
<acronym> ... </acronym>
Tag pour les acronymes. Pas de support HTML5.
<address> ... </address>
Balise permettant de spécifier les coordonnées de l'auteur.
<dfn> ... </dfn>
Étiquette dédiée aux définitions.
<code> ... </code>
Elle permet d'afficher des extraits de code
dans un paragraphe.
<sub> ... </sub>
Utilisé pour écrire un indice (police plus petite
juste en dessous du point médian de la police
normale). Exemple : ax
<sup> ... </sup>
Similaire à la balise ci-dessus, mais pour l'écriture en
exposant.
<small> ... </small>
Réduit la taille du texte. En HTML5, il s'agit
souvent d'informations redondantes ou
invalides.
Exemple width=""
Spécifie la largeur de l'image en pixels ou en
<p><strong>Texte en gras</strong> Texte normal pourcentage.
<em>Certains mots en italique</em> texte
régulier à nouveau.</p> align=""
L'alignement relatif de l'image. Peut changer en
<blockquote> fonction des modifications apportées à d'autres
Quiconque n'a jamais fait d'erreur n'a jamais rien éléments de la page web.
essayé de nouveau.<cite>- Albert Einstein</cite>
</blockquote> border=""
Spécifie l'épaisseur de la bordure de l'image. Si elle
<pre> n'est pas mentionnée, la valeur par défaut est 0.
Quelques textes préformatés
</pre> <map> ... </map>
</p> <p>Un extrait de code : <code>un peu de Indique une image interactive (cliquable).
code</code></p> <p>La page de garde du site web
de la Commission européenne <map name=""> ... </map>
Nom de la carte associée à l'image et à la carte.
<area />
Spécifie la zone de la carte d'image.
shape=""
<a href=""> ... </a>
Forme de la zone.
Balise d'ancrage. Principalement utilisée pour
inclure des hyperliens.
coords=""
Coordonnées des informations vitales de la forme.
<a href="mailto :"> ... </a>
Exemple : sommets pour les rectangles,
Balise dédiée à l'envoi de courriers électroniques.
centre/rayon pour les cercles.
<a href="tel://###-####"> ... </a>
Balise d'ancrage pour la mention des Exemple
numéros de contact. Comme les numéros
sont cliquables, cela peut être <img src="planets.gif" width="145" height="126"
particulièrement utile pour les alt="Planets" usemap="#planetmap">
utilisateurs mobiles. <map name="planetmap">
<area shape="rect" coords="0,0,60,100"
<a name="name"> ... </a> href="sun.htm" alt="Sun">
Cette balise peut être utilisée pour naviguer <area shape="circle" coords="90,58,3"
rapidement vers une autre partie de la href="mercur.htm" alt="Mercure">
page web. <area shape="circle" coords="124,58,8"
href="venus.htm" alt="Venus">
<a href="#name"> ... </a> </map>
Variante de la balise ci-dessus, elle permet
uniquement de naviguer vers une section div de
la page web.
<img />
Une balise pour afficher les images dans la page web.
src="url"
L'URL ou le chemin d'accès où se trouve l'image
sur votre disque ou sur le web.
alt="text"
Le texte écrit ici s'affiche lorsque l'utilisateur
passe la souris sur l'image. Il peut être utilisé
pour donner des détails supplémentaires sur
l'image.
height=""
Spécifie la hauteur de l'image en pixels ou en pourcentage.
www.gomycode.co
enctype=""
Uniquement pour la méthode POST, ceci
dicte le schéma d'encodage des données à
utiliser lorsque le formulaire
<ol> ... </ol>
Étiquette pour une liste ordonnée ou numérotée est présenté.
d'éléments.
autocomplétion
<ul> ... </ul> Détermine si l'auto-complétion est activée dans le
formulaire.
Contrairement à la balise précédente, elle est
utilisée pour les listes non ordonnées
d'éléments. novalidate
Détermine si le formulaire doit être validé avant d'être
<li> ... </li> soumis.
Élément individuel faisant partie d'une liste.
accepter les jeux de caractères
<dl> ... </dl> Détermine l'encodage des caractères
lorsque le formulaire est soumis.
Étiquette pour une liste d'éléments avec des
définitions.
cible
<dt> ... </dt> Après soumission, la réponse du formulaire est
affichée à l'endroit indiqué, avec les valeurs
La définition d'un seul terme en ligne avec le
suivantes : _blank, _self, _parent, _top
corps du texte.
<fieldset> ... </fieldset>
<dd> ... </dd>
Identifie le groupe de tous les champs du formulaire.
La description du terme défini.
<label> ... </label>
Exemple Ce champ est utilisé pour étiqueter un champ dans le
formulaire.
<ol>
<li>Lundi</li> <légende> ... </légende>
<li>Mardi</li> Il s'agit d'une légende pour l'élément
<li>Mercredi</li> <fieldset>.
</ol>
<ul> <input />
<li>France</li> Cette balise est utilisée pour recueillir les données de
<li>Allemagne</li> l'utilisateur.
<li>Italie</li> Le type d'entrée est déterminé par un certain nombre
</ul> d'attributs.
<dl>
<dt>Toyota</dt>
<dd>Marque automobile japonaise</dd>
<dt>Armani</dt>
<dd>Marque de mode italienne</dd>
</dl>
type=""
Détermine le type d'entrée (texte, dates, mot
de passe) demandé à l'utilisateur.
name=""
Spécifie le nom du champ de saisie.
<form> ... </form>
La balise parent d'un formulaire HTML. value=""
Spécifie la valeur contenue actuellement
action="url" dans le champ de saisie.
L'URL indiquée ici est l'endroit où les
données du formulaire seront envoyées size=""
une fois que l'utilisateur l'aura rempli. Détermine la largeur de l'élément d'entrée
(nombre de caractères).
method=""
Il spécifie la méthode HTTP (POST ou GET) à
utiliser pour soumettre le formulaire.
www.gomycode.c
o
maxlength=""
requis
Spécifie le nombre maximal de caractères autorisés
Indique si le choix d'une ou de plusieurs options
dans le champ de saisie.
est nécessaire pour l'envoi du formulaire.
requis
Rend obligatoire le remplissage d'un champ de saisie autofocus
par Spécifie qu'une liste déroulante est
l'utilisateur. Le formulaire ne peut pas être soumis si un automatiquement mise en évidence après le
élément obligatoire chargement d'une page.
est laissé vide.
<option> ... </option>
width="" Étiquette permettant d'énumérer des
Détermine la largeur de l'élément d'entrée, éléments individuels dans la liste
en valeurs de pixels. d'options.
height=""
Détermine la hauteur de l'élément d'entrée,
en valeurs de pixels.
placeholder=""
value=""
Peut être utilisé pour donner des indications à
l'utilisateur sur la nature des données demandées. Texte visible par l'utilisateur pour une option
donnée.
pattern=""
Spécifie une expression régulière qui peut être sélectionné
utilisée pour rechercher des motifs dans le texte de Détermine l'option sélectionnée par défaut au
l'utilisateur. chargement du formulaire.
min="" <button> ... </button>
Valeur minimale autorisée pour un élément <input>. Balise permettant de créer un bouton pour la
soumission d'un formulaire.
max=""
Valeur maximale autorisée pour un élément <input>.
Exemple
autofocus
<form action="form_submit.php" method="post">
Force la focalisation sur l'élément de saisie lors du
chargement complet de la page web. <fieldset>
<légende>Bio:</
handicapé légende> Prénom:<br>
Désactive l'élément de saisie. L'utilisateur ne <input type="text" name="first-name"
peut plus saisir de données. value="John" placeholder="Please
enter your first name here"><br>
<textarea> ... </textarea> Nom de famille:<br>
Pour les chaînes de caractères plus longues. <input type="text" name="last-name"
Peut être utilisé pour obtenir un texte de value="Doe" placeholder="Please
plusieurs phrases de la part de l'utilisateur. enter your last name
here"><br><br>Sport préféré :<br>
<select> ... </select> <sélection>
Cette balise spécifie une liste d'options parmi <option value="soccer">Soccer
lesquelles l'utilisateur peut choisir. </option>
<option value="tennis">Tennis
</option>
<option value="golf">Golf
</option>
</select>
<textarea name="description">
</textarea>
name="" <input type="submit" value="Submit">
Le nom d'une liste particulière d'options. </fieldset>
</form>
size=""
Nombre total d'options proposées à l'utilisateur.
multiples
Indique si l'utilisateur peut choisir plusieurs
options dans la liste.
www.gomycode.co
<table> ... </table> <objet> ... </objet>
Marque un tableau dans une page web. Cette balise est utilisée pour intégrer des éléments
multimédias supplémentaires dans une page web. Il
<caption> ... </caption> peut s'agir d'un son, d'une vidéo, d'un document (pdf),
La description du tableau est placée dans cette etc.
balise.
height=""
<thead> ... </thead> Détermine la hauteur de l'objet en pixels.
Spécifie les informations relatives à des
colonnes spécifiques du tableau. width=""
Détermine la largeur de l'objet en pixels.
<tbody> ... </tbody>
Le corps d'un tableau, où les données sont type=""
conservées. Le type/format du contenu de l'objet.
<tfoot> ... </tfoot> <iframe> ... </iframe>
Détermine le pied de page du tableau. Il s'agit d'un bloc de contenu en ligne, utilisé comme
conteneur pour le multimédia de manière flexible. Il
<tr> ... </tr> flotte à l'intérieur de
Désigne une seule ligne dans un tableau. une page web, ce qui signifie qu'il est placé par
rapport à d'autres éléments de la page web.
<th> ... </th>
La valeur de l'en-tête d'une colonne d'un tableau.
<td> ... </td>
Une seule cellule d'un tableau. Contient la
valeur/donnée réelle.
name=""
<colgroup> ... </colgroup> Le nom de l'iFrame.
Utilisé pour regrouper des colonnes.
src=""
<col> L'URL/chemin source de l'objet multimédia à
Indique une colonne à l'intérieur d'un tableau. contenir dans l'iFrame.
srcdoc=""
Exemple Tout contenu HTML à afficher à
l'intérieur de l'iFrame.
<b>Tableau>
<colgroup> height=""
<col span="2"> Détermine la hauteur de l'iFrame.
<col>
</colgroup> width=" "
<tr> Détermine la largeur de l'iFrame.
<th>Nom</th>
<param />
<th>Majoritaire</
Pour la personnalisation de l'iFrame.
th>
Cela inclut des paramètres
</tr> <th>GPA</th>
supplémentaires pour accompagner le
<tr>
contenu.
<td>Bob</td>
<embed> ... </embed>
<td>Droit</td>
Il est utilisé pour intégrer des objets externes,
</tr> <td>3.55</td>
tels que des plugins (par exemple, une vidéo
<tr> flash).
<td>Alice</td>
<td>Médecine</td>
</tr> <td>3.61</td>
</
tableau>
www.gomycode.c
o
<figure>...</figure>
Balise réservée aux figures (diagrammes, graphiques) en
HTML5.
height="" <figcaption> ... </figcaption>
Détermine la hauteur de l'élément incorporé. Une description de la figure est placée à l'intérieur de
celles-ci.
width=""
Détermine la largeur de l'élément incorporé. <marque>...</marque>
Permet de mettre en évidence une partie particulière du
type=""
texte.
Le type ou le format du contenu incorporé.
<nav>...</nav>
src=""
Liens de navigation pour l'utilisateur dans une page web.
L'URL/chemin de l'élément incorporé.
<menuitem>...</menuitem>
Exemple Un élément particulier d'une liste ou d'un menu.
<objet width="1000" height="1000"></objet>
<meter>...</meter>
<iframe src="some_other_webpage.html"
Mesure des données dans un intervalle donné.
width="500" height="500"></iframe>
<embed src="some_video.swf" width="500"
<progress>...</progress>
height="500"></embed>
Généralement utilisée comme barre de
progression, elle permet de suivre les progrès
accomplis.
<rp>...</rp>
Cette balise est destinée à afficher du texte pour les
<en-tête> ... </en-tête> navigateurs qui ne prennent pas en charge les
Spécifie l'en-tête de la page web. Peut également annotations ruby.
être utilisé pour des objets à l'intérieur de la page
web. <rt>...</rt>
Affiche les détails des caractères typographiques de l'Asie
<footer> ... </footer> de l'Est.
Spécifie le pied de page de la page web. Peut
également être utilisé pour des objets à l'intérieur <ruby>...</ruby>
de la page web. Décrit une annotation Ruby pour la typographie de
l'Asie de l'Est.
<main>...</main>
Marque le contenu principal de la page web. <time>...</time>
Étiquette de formatage de la date et de l'heure.
<article>...</article>
Indique un article. <wbr>
Un saut de ligne dans le contenu.
<aside> ... </aside>
Désigne le contenu affiché dans une barre
latérale de la page web. " ; " ; & ; & ;
Guillemets - " Ampoules - &
<section>...</section>
Spécifie une section particulière de la page < ; < ; @ ; Ü ;
web. Signe moins que - < Symbole @ - @
<details> ... </details> > ; > ; • ; ö ;
Utilisé pour des informations Signe plus grand Petite balle - -
supplémentaires. L'utilisateur a la possibilité que - >
de les afficher ou de les masquer. ™ ; û ;
  ;   ; Symbole de la
<summary> ... </summary> Espace insécable marque - ™
Utilisé comme titre pour la balise ci-dessus.
Est toujours visible pour l'utilisateur. © ; © ;
Symbole du droit
<dialog>...</dialog> d'auteur - ©
Permet de créer une boîte de dialogue.
www.gomycode.co
