L'aide-mémoire HTML Essentials: balises, attributs, etc.

La création de pages Web commence par HTML. Les embellir et les rendre interactifs vient plus tard. Mais pour commencer à créer des sites Web statiques fonctionnels, vous devez comprendre le HTML. (Vous voulez une introduction rapide à ce langage de balisage? Lisez notre FAQ HTML.)

Dans le cadre de l'apprentissage de la langue, il existe une longue liste d'éléments que vous devez ajouter à votre vocabulaire HTML. Et cette tâche peut sembler intimidante au début, c'est pourquoi nous avons mis au point l'aide-mémoire suivant. Il vous permet de découvrir/comprendre/rappeler facilement des éléments HTML à tout moment.

L'aide-mémoire couvre les balises et les attributs pour la structuration des pages Web, la mise en forme du texte, l'ajout de formulaires, d'images, de listes, de liens et de tableaux. Il comprend également des balises qui ont été introduites dans les codes HTML5 et HTML pour les caractères spéciaux couramment utilisés.

TÉLÉCHARGEMENT GRATUIT: Cette aide-mémoire est disponible sous forme de

PDF téléchargeable de notre partenaire de distribution, TradePub. Vous devrez remplir un court formulaire pour y accéder pour la première fois seulement. Télécharger La feuille de triche HTML Essentials.

La feuille de triche HTML Essentials

... ... ... ... ...

...

Raccourci	action
Balises de base
...	La première et la dernière balise d'un document HTML. Toutes les autres balises se trouvent entre ces balises d'ouverture et de fermeture.
...	Spécifie la collection de métadonnées pour le document.
	Décrit le titre de la page et apparaît dans la barre de titre du navigateur.
...	Comprend tout le contenu qui sera affiché sur la page Web.
Informations sur les documents
Mentionne l'URL de base et tous les liens relatifs au document.
Pour plus d'informations sur la page comme l'auteur, la date de publication, etc.
Liens vers des éléments externes tels que des feuilles de style.
	Contient des informations de style de document telles que CSS (feuilles de style en cascade).
	Contient des liens vers des scripts externes.
Formatage de texte
... OU ...	Met le texte en gras.
...	Met le texte en italique et le met en gras.
...	Met le texte en italique mais ne le met pas en gras.
...	Texte barré.
...	Cite un auteur d'une citation.
...	Étiquete une partie supprimée d'un texte.
...	Affiche une section qui a été insérée dans le contenu.
...	Pour afficher les devis. Souvent utilisé avec le étiqueter.
...	Pour des devis plus courts.
...	Pour les abréviations et les formes complètes.
...	Spécifie les coordonnées.
...	Pour les définitions.
...	Pour les extraits de code.
...	Pour écrire des indices
...	Pour écrire des exposants.
...	Pour réduire la taille du texte et marquer les informations redondantes en HTML5.
Structure du document
...	Différents niveaux de titres. H1 est le plus grand et H6 est le plus petit.
...	Pour diviser le contenu en blocs.
...	Inclut des éléments en ligne, comme une image, une icône, une émoticône, sans ruiner le formatage de la page.
...	Contient du texte brut.
	Crée une nouvelle ligne.
	Dessine une barre horizontale pour montrer la fin de la section.
Listes
...	Pour la liste commandée d'articles.
...	Pour une liste d'articles non ordonnée.
...	Pour les éléments individuels dans une liste.
...	Liste des éléments avec définitions.
...	La définition d'un terme unique en ligne avec le contenu du corps.
...	La description du terme défini.
Liens
...	Balise d'ancrage pour les liens hypertexte.
...	Balise pour lier aux adresses e-mail.
...	Balise d'ancrage pour lister les numéros de contact.
...	Balise d'ancrage pour un lien vers une autre partie de la même page.
...	Navigue vers une section div de la page Web. (Variation de la balise ci-dessus)
Images
	Pour afficher des fichiers image.
Attributs pour le étiqueter
src="url"	Lien vers le chemin source de l'image.
alt="texte"	Le texte affiché lorsqu'une souris passe sur l'image.
hauteur = " "	Hauteur de l'image en pixels ou en pourcentages.
largeur = " "	Largeur de l'image en pixels ou en pourcentages.
aligner=" "	Alignement relatif de l'image sur la page.
bordure=" "	Épaisseur de bordure de l'image.
	Lien vers une carte cliquable.
	Nom de l'image de la carte.
La zone d'image d'une image cliquable.
Attributs pour le étiqueter
forme=""	Forme de la zone d'image.
coordonnées=" "	Coordonnées de la zone de l'image de la carte.
Formes
...	La balise parent d'un formulaire HTML.
Attributs pour le étiqueter
action="url"	L'URL où les données du formulaire sont soumises.
méthode = " "	Spécifie le protocole de soumission de formulaire (POST ou GET).
enctype=" "	Le schéma de codage des données pour les soumissions POST.
Saisie automatique	Spécifie si la saisie semi-automatique du formulaire est activée ou désactivée.
novalider	Spécifie si le formulaire doit être validé avant la soumission.
accept-charsets	Spécifie le codage des caractères pour les soumissions de formulaire.
cible	Indique où la réponse de soumission de formulaire sera affichée.
...	Regroupe les éléments liés dans le formulaire/
...	Spécifie ce que l'utilisateur doit saisir dans chaque champ de formulaire.
...	Une légende pour l'élément fieldset.
Spécifie le type d'entrée à prendre de l'utilisateur.
Attributs pour le étiqueter
tapez=""	Détermine le type de saisie (texte, dates, mot de passe).
nom=""	Spécifie le nom du champ de saisie.
valeur=""	Spécifie la valeur dans le champ de saisie.
taille=""	Définit le nombre de caractères du champ de saisie.
longueur max=""	Définit la limite de caractères d'entrée autorisés.
obligatoire	Rend un champ de saisie obligatoire.
largeur=""	Définit la largeur du champ de saisie en pixels.
hauteur = ""	Définit la hauteur du champ de saisie en pixels.
placeholder=""	Décrit la valeur de champ attendue.
motif=""	Spécifie une expression régulière, qui peut être utilisée pour rechercher des modèles dans le texte de l'utilisateur.
min=""	La valeur minimale autorisée pour un élément d'entrée.
max=""	La valeur maximale autorisée pour un élément d'entrée.
désactivée	Désactive l'élément d'entrée.
...	Pour capturer des chaînes de données plus longues de l'utilisateur.
...	Spécifie une liste d'options parmi lesquelles l'utilisateur peut choisir.
Attributs pour le étiqueter
nom=""	Spécifie le nom d'une liste déroulante.
taille=""	Nombre d'options offertes à l'utilisateur.
plusieurs	Définit si l'utilisateur peut choisir plusieurs options dans la liste.
obligatoire	Spécifie si le choix d'une ou plusieurs options est nécessaire pour la soumission du formulaire.
mise au point automatique	Spécifie qu'une liste déroulante s'affiche automatiquement après le chargement d'une page.
...	Définit les éléments dans une liste déroulante.
valeur=""	Affiche le texte d'une option donnée.
choisi	Définit l'option par défaut qui s'affiche.
...	Balise pour créer un bouton pour la soumission de formulaire.
Objets et iFrames
	Décrit le type de fichier intégré.
Attributs pour le
hauteur = ""	La hauteur de l'objet.
largeur=""	La largeur de l'objet.
tapez=""	Le type de média que contient l'objet.
	Un cadre en ligne pour intégrer des informations externes.
nom=""	Le nom de l'iFrame.
src=""	L'URL source du contenu à l'intérieur du cadre.
srcdoc=""	Le contenu HTML dans le cadre.
hauteur = ""	La hauteur de l'iFrame.
largeur = " "	La largeur de l'iFrame.
Ajoute des paramètres supplémentaires pour personnaliser l'iFrame.
...	Intègre une application ou un plugin externe.
Attributs pour le
hauteur = " "	Définit la hauteur de l'insert.
largeur=""	Définit la largeur de l'intégration.
tapez=""	Le type ou le format de l'intégration.
src=""	Le chemin source du fichier incorporé.
les tables
...	Définit tout le contenu d'une table.
Une description du tableau.
En-têtes de chaque colonne du tableau.
Définit les données de corps de la table.
Décrit le contenu du pied de page du tableau.
Contenu pour une seule ligne.
	...	Les données dans un seul élément d'en-tête.
	...	Contenu dans une seule cellule de tableau.
Colonnes de groupes pour la mise en forme.
Une seule colonne d'informations.
Nouvelles balises HTML5
...	Spécifie l'en-tête de la page Web.
	Spécifie le pied de page de la page Web.
...	Marque le contenu principal de la page Web.
...	Spécifie un article.
	Spécifie le contenu de la barre latérale d'une page.
...	Spécifie une section particulière de la page Web.
...	Pour décrire des informations supplémentaires.
...	Utilisé comme titre pour la balise ci-dessus. Est toujours visible pour l'utilisateur.
...	Crée une boîte de dialogue.
...	Utilisé pour inclure des graphiques et des figures.
	Décrit un élément.
...	Met en évidence une partie spécifique du texte.
	Ensemble de liens de navigation sur une page Web.
...	Un élément particulier d'une liste ou d'un menu.
...	Mesure les données dans une plage donnée.
...	Place une barre de progression et suit les progrès.
...	Affiche le texte qui ne prend pas en charge les annotations Ruby.
...	Affiche les détails des caractères typographiques de l'Asie de l'Est.
...	Une annotation Ruby pour la typographie d'Asie de l'Est.
...	Identifie l'heure et la date.
Un saut de ligne dans le contenu.
Objets caractères HTML5
" OU &quot ;	Guillemets
< OU &Lt ;	Signe inférieur à (
> OU &gt ;	Signe supérieur à (>)
OU &nbsp ;	Espace non-cassant
© OU &copie ;	Symbole du droit d'auteur
™ OU &ucirc ;	Symbole de marque
@ OU &Uuml ;	symbole "à" (@)
& OU &	Symbole esperluette (&)
• OU &ouml ;	Petite balle
Ignorez l'espace avant le point-virgule lors de la saisie de caractères HTML.

Créez un site Web pour une expérience pratique

Une fois que vous avez compris les bases du code HTML et avoir une connaissance pratique de CSS et JavaScript, essayez-vous à la création d'un site Web Comment créer un site Web: pour les débutantsAujourd'hui, je vais vous guider à travers le processus de création d'un site Web complet à partir de zéro. Ne vous inquiétez pas si cela semble difficile. Je vous accompagnerai à chaque étape. Lire la suite . Aussi, assurez-vous de sauvegarder notre Aide-mémoire des propriétés CSS3 La feuille de triche des propriétés essentielles CSS3Maîtrisez la syntaxe CSS essentielle avec notre aide-mémoire des propriétés CSS3. Lire la suite et Aide-mémoire JavaScript L'aide-mémoire JavaScript ultimeObtenez un rappel rapide sur les éléments JavaScript avec cette aide-mémoire. Lire la suite pour une utilisation future !