Image de l'article Introduction au HTML : structure de base, balises et attributs : modèle de boîte

4.19. Introduction au HTML : structure de base, balises et attributs : modèle de boîte

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.

Répondez maintenant à l’exercice sur le contenu :

Qu’est-ce que le modèle Box dans la conception Web ?

Tu as raison! Félicitations, passez maintenant à la page suivante

Vous avez raté! Essayer à nouveau.

Image de l'article Introduction au HTML : structure de base, balises et attributs : positionnement en CSS

Page suivante de lebook gratuit :

24Introduction au HTML : structure de base, balises et attributs : positionnement en CSS

0 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !

Get it on Google Play Get it on App Store

+ 6,5 millions
d'étudiants

Certificat gratuit et
valide avec QR Code

48 mille exercices
gratuits

Note de 4,8/5 dans les
magasins d'applications

Cours gratuits en
vidéo, audio et texte