Introduction au HTML : structure de base, balises et attributs
HTML (HyperText Markup Language) est le langage fondamental utilisé pour développer des pages Web. Il s'agit d'un langage de balisage, ce qui signifie qu'il structure le contenu de la page à l'aide de balises. Ces balises sont utilisées pour créer des éléments tels que des titres, des paragraphes, des listes, des liens, des images, etc.
Structure de base du HTML
Une page HTML de base a une structure spécifique. Cela commence par une déclaration de type de document () pour indiquer au navigateur qu'il s'agit d'une page HTML5. La page est ensuite enveloppée par la balise <html>, qui contient deux sections principales : <head> et <body>.
La <head> contient des informations sur la page, telles que le titre (qui s'affiche dans la barre de titre ou l'onglet du navigateur) et des liens vers CSS (Cascading Style Sheets) ou JavaScript, si nécessaire. Le <body> C'est ici que est placé le contenu visible de la page.
Balises et attributs HTML
Les balises HTML sont utilisées pour créer des éléments sur la page. Chaque balise a un nom spécifique et est écrite entre crochets angulaires (< et >). La plupart des balises ont une balise d'ouverture et une balise de fermeture, avec le contenu entre les deux. Par exemple, le symbole <p> est utilisé pour créer un paragraphe.
Les attributs HTML sont utilisés pour fournir des informations supplémentaires sur un élément. Ils sont inclus dans la balise d'ouverture et ont un nom et une valeur. Par exemple, le symbole <a> (qui crée un lien) peut avoir un attribut "href" qui définit l'URL du lien.
Manipulation du DOM
Le DOM (Document Object Model) est une représentation de la page HTML sous forme d'arborescence d'objets. Chaque élément de la page est un objet dans le DOM et nous pouvons les manipuler à l'aide de JavaScript.
Sélection d'éléments
Nous pouvons sélectionner des éléments dans le DOM en utilisant différentes méthodes. Les plus courants sont getElementById (qui sélectionne un élément avec un identifiant spécifique), getElementsByClassName (qui sélectionne des éléments avec une classe spécifique) et getElementsByTagName (qui sélectionne des éléments avec une balise spécifique).
Modifier les éléments
Après avoir sélectionné un élément, nous pouvons le modifier de plusieurs manières. Nous pouvons modifier le contenu d'un élément à l'aide de la propriété innerHTML, modifier le style d'un élément à l'aide de la propriété style et modifier les attributs d'un élément à l'aide des méthodes setAttribute et removeAttribute.
Ajout et suppression d'éléments
Nous pouvons également ajouter et supprimer des éléments dans le DOM. Pour ajouter un élément, nous créons un nouvel élément à l'aide de la méthode createElement, définissons son contenu et ses attributs selon les besoins, puis l'ajoutons à la page à l'aide de la méthode appendChild ou insertBefore. Pour supprimer un élément, nous sélectionnons d'abord l'élément, puis utilisons la méthode RemoveChild.
La manipulation du DOM est un élément fondamental du développement front-end, car elle vous permet de créer des sites Web dynamiques et interactifs. En combinant HTML, CSS et JavaScript, vous pouvez créer pratiquement n'importe quel type de site Web ou d'application Web que vous pouvez imaginer.
