Commencer par HTLM pour les formulaires de page web

Cet article sert d’introduction aux principes fondamentaux de HTML ; nous passerons en revue ses éléments, ses attributs et tout autre terme clé que vous avez peut-être entendu, ainsi que leur emplacement dans le langage. Nous démontrerons la structure d’un élément HTML crucial, commenterons la définition d’une page HTML standard et décrirons les autres caractéristiques déterminantes du langage. Dans cette procédure pas à pas, nous allons jouer avec HTML pour piquer votre intérêt.

Qu’est-ce que le langage de balisage hypertexte ou HTML ?

Une idée fausse courante est que HTML (Hyper Text Markup Language) est un langage de programmation, mais en fait ce n’est qu’un langage de balisage utilisé pour indiquer à un navigateur Web comment organiser le contenu d’une page. Le niveau de complexité est entièrement à la discrétion du développeur Web. Le HTML est composé de nombreux « éléments » qui peuvent être utilisés pour enfermer, encapsuler ou équilibrer certaines sections de contenu afin de modifier leur apparence ou leur comportement. Il est possible pour les balises encadrantes de transformer une petite section de texte en lien hypertexte vers une autre page web, de mettre certains mots en italique, etc.

Définition d’un diagramme d’éléments HTML

Les principaux composants de notre élément sont :

  • La balustrade ouverte : dans ce cas, le nom de l’élément (p) est terminé par un chevron () qui pointe vers l’extérieur et un chevron (>) qui pointe vers l’intérieur. Il vous indique où la chose commence, ou où ses effets commencent, dans ce cas le paragraphe.
  • Ce dont nous parlons ici, c’est du « contenu » de l’élément, ou de ce en quoi il consiste réellement. C’est juste du texte dans notre cas.
  • En français, une « balise de fermeture » est la même qu’une « balise d’ouverture », sauf qu’elle a une barre inclinée (« / ») devant le nom de l’élément. Il dénote la fin de l’élément ; dans ce cas, la fin du paragraphe. Une erreur de débutant courante qui peut conduire à des résultats inattendus est d’oublier d’inclure une balise de fermeture.

Apprentissage actif : créez votre premier élément HTML

Modifiez la ligne ci-dessous dans la zone de saisie en l’insérant entre les crochets

Cette action doit mettre en évidence la ligne en l’écrivant en italique (utilisez « mettre » avant pour ouvrir l’élément et « mettre » après pour le fermer). Vous devriez pouvoir voir la mise à jour dans la zone de rendu tout de suite.

  • Si vous faites une erreur, appuyez simplement sur le bouton Réinitialiser et recommencez. 
  • Si vous êtes vraiment perplexe, cliquez sur le bouton « Voir la solution » pour voir la réponse.

Pièces intégrales et cruciales 

Le processus d’imbrication d’un élément dans un autre est appelé « imbrication ». En plaçant le mot « très » dans la balise strong>, vous pouvez souligner l’affirmation selon laquelle votre chat est très grincheux.

Vous devez vérifier que vos éléments sont bien imbriqués : dans l’exemple ci-dessus, nous avons d’abord ouvert l’élément pen, puis l’élément strong, il faut donc d’abord fermer l’élément strong, puis l’élément p. Ce qui va suivre est faux. Un composant correctement ouvert et fermé indiquera clairement s’il se trouve à l’intérieur ou à l’extérieur.

Si les parenthèses se mélangent comme dans l’exemple précédent, votre navigateur Web essaiera de deviner ce que vous vouliez taper et vous pourriez obtenir des résultats inattendus. Raison de plus pour l’éviter !

A lire aussi : comment remplir un formulaire  pour entrer en Belgique ?

Éléments en bloc ou en ligne

Vous devez être familiarisé avec les éléments de niveau bloc et les éléments en ligne pour travailler efficacement avec HTML. Les éléments du niveau de bloc constituent un bloc visuel sur une page, commençant une nouvelle ligne quel que soit le contenu précédent et faisant en sorte que tout le contenu suivant commence également une nouvelle ligne. Les paragraphes, les listes, les barres de navigation, les pieds de page, etc., relèvent tous de la catégorie des « éléments de niveau bloc« , qui sont des renforts de page. 

Un élément de niveau bloc ne peut pas être intégré dans un élément de niveau ligne, mais il peut être intégré dans un autre élément de niveau bloc. Les éléments en ligne peuvent être trouvés à l’intérieur des éléments de niveau bloc. Ils ne renferment pas des paragraphes ou des sections entières, mais des fragments du contenu du document.

Un élément de ligne n’entraînera pas la création d’une nouvelle ligne dans le document. Il apparaît souvent dans le corps d’un paragraphe de texte, comme une balise d’ancrage (a) ou des balises d’emphase (em, strong, etc.).