4.19 : Introduction au HTML : structure de base, balises et attributs : modèle de boîte
HTML, qui signifie HyperText Markup Language, est le langage de balisage standard pour la création de pages Web et d'applications. Avec CSS et JavaScript, HTML est une technologie fondamentale utilisée par la plupart des sites Web pour créer des pages Web visuellement attrayantes, des interfaces utilisateur pour les applications Web et des interfaces utilisateur pour de nombreuses applications mobiles.
Structure de base du HTML
Un document HTML est structuré comme un livre : il comporte un en-tête et un corps. L'en-tête, contenu dans les balises <head>, contient généralement des méta-informations sur le document, y compris le titre affiché dans la barre de titre du navigateur. Le corps, contenu dans les balises <body>, contient le contenu principal du document HTML.
À un niveau plus détaillé, la structure de base d'un document HTML est constituée d'éléments HTML imbriqués. Un élément HTML est défini par une balise de début, du contenu et une balise de fin. Par exemple, un paragraphe, représenté par la balise <p>, peut être écrit comme suit : <p> Ceci est un paragraphe.</p>.
Balises et attributs HTML
Les balises HTML indiquent le type d'élément inséré, comme un titre (<h1> à <h6>), un paragraphe (<p> ), une liste (<ul> ou <ol> avec les éléments de la liste <li>) ou un lien (<a> ).
Les attributs HTML fournissent des informations supplémentaires sur les éléments. Ils se présentent sous forme de paires de nom et de valeur et sont placés à l'intérieur de la balise de début de l'élément. Par exemple, l'élément link possède un attribut href qui indique l'URL vers laquelle mène le lien : <a href="https://www.example.com">Il s'agit d'un lien</a>.
Modèle de boîte
Dans la conception Web, un modèle de boîte est une boîte qui entoure chaque élément HTML. Il se compose des marges, des bordures, du remplissage et du contenu réel. Ce modèle permet aux développeurs de contrôler la disposition et le positionnement des éléments HTML sur une page.
Contenu : il s'agit de la zone dans laquelle le texte et les images apparaissent.
Remplissage : il s'agit de la zone autour du contenu, à l'intérieur de la bordure. Le remplissage augmente la taille de la boîte.
Bordure : il s'agit de la zone située à l'extérieur du remplissage. La bordure entoure le remplissage et le contenu.
Marge : il s'agit de la zone située à l'extérieur de la frontière. La marge est transparente et sépare la boîte des boîtes environnantes.
Comprendre le modèle de boîte est essentiel pour pouvoir créer des mises en page complexes et réactives. C'est la base de presque toute conception CSS et l'un des concepts fondamentaux pour comprendre le fonctionnement de CSS.
En conclusion, HTML est un langage de balisage essentiel pour le développement Web. Il permet aux développeurs de créer des structures complexes et significatives avec leurs balises et attributs, tandis que le modèle de boîte permet un contrôle précis sur la mise en page et la conception. Comprendre ces concepts est la première étape pour devenir un développeur front-end compétent.
Cookies and similar technologies are used on our sites to personalize content and ads. You can find further details and change your personal settings below. By clicking OK, or by clicking any content on our sites, you agree to the use of these cookies and similar technologies.
When you visit any of our websites, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and manage your preferences. Please note, that blocking some types of cookies may impact your experience of the site and the services we are able to offer.