4.22. Introduction au HTML : structure de base, balises et attributs : Media Queries
HTML, ou HyperText Markup Language, est le langage standard pour la création de pages Web et d'applications. Il s'agit d'un langage de balisage, ce qui signifie qu'il fournit une structure au contenu sur le Web et décrit à quoi ressemble ce contenu.
Structure de base
Un document HTML de base a une structure spécifique, comprenant des éléments doctype, header et body. Le doctype déclare que la page est un document HTML. L'élément d'en-tête contient des métadonnées sur le document, telles que le titre de la page, tandis que le corps contient le contenu de la page, tel que du texte, des images, des listes, des liens, etc.
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
≪/head>
<body>
Contenu de la page ici.
</body>
</html>
Balises et attributs
Les balises HTML sont les éléments constitutifs d'une page HTML. Ils définissent et décrivent le contenu. Chaque balise commence par un crochet angulaire (<) et se termine par un crochet angulaire (>). Quelques exemples de balises HTML incluent <h1> pour les titres, <p> pour les paragraphes, <a> pour les liens, etc.
Les attributs HTML fournissent des informations supplémentaires sur les éléments. Ils se présentent sous forme de paires nom/valeur et sont toujours inclus au début de la balise. Par exemple, la balise de lien (<a>) inclut souvent l'attribut « href », qui indique l'URL vers laquelle mène le lien.
<a href="https://www.example.com"> Ceci est un lien vers Exemple.com</a>
Requêtes multimédias
Les Media Queries sont une technique CSS qui vous permet d'adapter la mise en page et le design d'une page Web à différents appareils et tailles d'écran. Ils constituent un élément crucial du design réactif.
Une requête multimédia se compose d'un type de média et d'une ou plusieurs expressions qui vérifient les conditions de certaines ressources du périphérique. Par exemple, vous pouvez utiliser une requête multimédia pour appliquer un ensemble de styles CSS si la largeur de la fenêtre du navigateur est inférieure à 600 px.
Écran @media et (largeur maximale : 600 px) {
corps {
couleur de fond : bleu clair ;
}
}
Dans cet exemple, l'arrière-plan de la page sera bleu clair si la largeur de la fenêtre du navigateur est inférieure à 600 px.
Les Media Queries sont un outil puissant permettant de créer une expérience utilisateur optimisée pour différents appareils. Ils vous permettent de créer des conceptions qui répondent aux changements de l'environnement de l'utilisateur, tels que la taille de l'écran, l'orientation (portrait ou paysage) et la résolution de l'écran.
En conclusion, HTML est le fondement de toute page Web. Comprendre la structure de base du HTML, les balises et les attributs, ainsi que comment utiliser Media Queries pour créer des conceptions réactives est essentiel pour devenir un développeur front-end efficace.
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.