FRFAM.COM >> Famille >> Technologie &Innovation >> Informatique

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 langage HTML. (Vous souhaitez 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 élaboré la feuille de triche suivante. Il vous offre un moyen simple de découvrir/comprendre/rappeler des éléments HTML chaque fois que vous en avez besoin.

La feuille de triche couvre les balises et les attributs pour structurer les pages Web, formater le texte, ajouter des formulaires, des images, des listes, des liens et des tableaux. Il inclut également les 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échargez la feuille de triche HTML Essentials.

L'aide-mémoire HTML Essentials

Raccourci Action Balises de base ... La première et la dernière balise d'un document HTML. Toutes les autres balises se situent 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 s'affiche dans la barre de titre du navigateur. ... Inclut tout le contenu qui sera affiché sur la page Web.Informations sur le document Mentionne l'URL de base et tous les liens relatifs au document.Pour des informations supplémentaires sur la page comme l'auteur, la date de publication, etc.Liens vers des éléments externes comme les 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 du 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. ... Étiquette une partie supprimée d'un texte. ... Affiche une section qui a été insérée dans le contenu.
...
Pour afficher les citations. Souvent utilisé avec la balise . ... Pour les guillemets 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 la mise en forme 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 une liste ordonnée d'éléments.
    ...
Pour une liste non ordonnée d'éléments.
  • ...
    • Pour des éléments individuels dans une liste.
    ...
    Liste des éléments avec définitions.
    ...
    La définition d'un seul terme en ligne avec le contenu du corps.
    ...
    La description du terme défini.Liens ... Balise d'ancrage pour les hyperliens. ... Balise pour créer un lien vers les adresses e-mail. ... Balise d'ancrage pour lister les numéros de contact. ... Balise d'ancrage pour créer un lien vers une autre partie de la même page . ... Navigue vers une section div de la page Web. (Variante de la balise ci-dessus)Images Aide-mémoire HTML Essentials :balises, attributs, etc.
    Pour afficher les fichiers image.Attributs de la balise src=”url”Lien vers le chemin source de l'image.alt=”text”Le texte affiché lorsqu'une souris passe sur l'image.height=” ”Hauteur de l'image en pixels ou pourcentages.width=” ”Largeur de l'image en pixels ou pourcentages.align=” ”Alignement relatif de l'image sur la page.border=” ”Épaisseur de la bordure de l'image. ... Lien vers une carte cliquable. . ..
    Nom de l'image de carte.La zone d'image d'une carte d'image.Attributs pour la balise shape=” "Forme de l'image area.coords=” ”Coordonnées de la zone de l'image de la carte.Formulaires
    ...
    La balise parent d'un formulaire HTML.Attributs de la balise
    action=”url”L'URL où les données du formulaire sont soumises.method=” ”Spécifie le protocole de soumission du formulaire (POST ou GET).enctype=” ”Le schéma de codage des données pour les soumissions POST.autocompleteSpécifie si la saisie semi-automatique du formulaire est activée ou désactivée.novalidateSpécifie si le formulaire doit être validé avant la soumission.accept-charsetsSpécifie l'encodage des caractères pour les soumissions de formulaire.targetMontre 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 du formulaire. ... Une légende pour l'élément fieldset.Spécifie le type d'entrée à prendre l'utilisateur.Attributs de la balise type=""Détermine le type d'entrée (texte, dates, mot de passe).name=""Spécifie le nom du champ d'entrée.value=""Spécifie la valeur dans le champ d'entrée.size=""Définit le nombre de caractères pour le champ de saisie.maxlength=””Définit la limite de caractères de saisie autorisés.requiredRend un champ de saisie obligatoire.width=””Définit la largeur du champ de saisie en pixels.height=””Définit la hauteur du champ de saisie en pixels.placeholder =””Décrit le champ attendu value.pattern=””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é pour un élément d'entrée.disabledDé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 que l'utilisateur peut choisissez parmi.Attributs pour la balise