Introduction au HTML
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.
