Fondamentaux du HTML et du CSS
HTML et CSS sont les éléments constitutifs les plus fondamentaux d'une page Web, et ils constituent également votre première étape pour devenir développeur Web. HTML fournit la mise en page et le contenu de la page Web, et CSS définit son style et son apparence. Dans ce didacticiel, nous allons aborder les bases du HTML et du CSS et, à la fin, vous serez en mesure de concevoir des pages Web réactives qui fonctionnent de manière transparente sur des appareils de toutes tailles.
Qu’est-ce que le HTML ?
HTML est le langage de balisage standard utilisé pour créer des pages Web. Il définit la structure et le contenu des pages Web à l'aide d'éléments HTML tels que des titres, des paragraphes, des images, des liens, des formulaires, etc.
Pour commencer à écrire du code HTML, vous pouvez utiliser la démo CodePen ci-dessous :
Démo de code ?
Sur le côté gauche, vous trouverez le code source HTML, qui est essentiellement le plan de ce qui sera affiché. Le navigateur transformera ensuite ce plan en la page Web que vous voyez sur le côté droit.
Vous pouvez modifier le code source directement pour voir comment il affecte la page Web affichée.
Préparez votre ordinateur pour le développement Web
Bien sûr, dans la pratique, vous ne pouvez pas compter sur des outils tels que CodePen pour créer une application Web fonctionnelle et complète. Vous avez besoin de quelque chose de plus puissant, alors configurons votre ordinateur pour le développement Web.
Pour commencer, assurez-vous qu'un navigateur est installé. N'importe quel navigateur Web populaire tel que Google Chrome, Microsoft Edge, Safari ou Firefox devrait suffire pour ce cours. Vous pouvez télécharger et installer le navigateur à partir des sites Web liés.
De plus, vous aurez besoin d'un éditeur de code pour écrire et modifier votre code. Visual Studio Code est une excellente option pour les débutants (et les professionnels, d'ailleurs). C'est l'éditeur de code le plus utilisé au monde. Téléchargez simplement le programme d'installation approprié pour votre système d'exploitation depuis leur site officiel.
Après avoir installé VSCode, assurez-vous d'installer également l'extension Live Server. Accédez à l'onglet Extensions dans la barre latérale gauche et saisissez Live Server dans la zone de recherche. À partir de là, vous pourrez télécharger et installer l'extension.
Live Server créera un serveur de développement local avec la fonction de rechargement automatique. Par exemple, créez un nouveau répertoire de travail et ouvrez-le à l'aide de VSCode.
Créez un nouveau fichier nommé index.html sous ce répertoire. L'extension .html indique qu'il s'agit d'un document HTML. Tapez ! dans VSCode, et vous verrez des suggestions comme celle-ci :
Il s'agit d'un raccourci permettant de créer rapidement des documents HTML. Vous pouvez naviguer avec les touches ↑ ou ↓. Sélectionnez la première option et le code suivant devrait être généré.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
Remarquez que dans le coin inférieur droit de la fenêtre VSCode, il y a un bouton Go Live.
Cliquer sur ce bouton activera l'extension Live Server. Un serveur de développement local sera démarré, hébergeant le fichier index.html que vous venez de créer.
Bien sûr, le fichier est encore vide pour le moment, vous ne pouvez donc rien voir. Ajoutez quelque chose entre le
et balises.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
Enregistrez les modifications et la page Web sera automatiquement actualisée avec le nouveau contenu.
La structure d'un document HTML
Un document HTML typique a toujours la structure suivante :
<!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
Le La balise définit le type de document. Lorsque le navigateur Web rencontre , il comprend que la page doit être analysée et affichée conformément aux spécifications HTML5, la dernière version du standard HTML. Cela garantit que les navigateurs modernes interprètent correctement le contenu et la mise en page de la page Web.
Tout le reste du fichier doit être placé dans un signe élément, défini par une balise d'ouverture () et une balise de fermeture ().
lang est appelé un attribut et il a la valeur "en". Cela indique au navigateur ainsi qu'au moteur de recherche que l'anglais est la langue principale utilisée pour cette page Web.
À l'intérieur du élément, il existe deux éléments enfants,
etÉléments et attributs
Regardons de plus près l'exemple précédent et remarquons que le document HTML comprend différents éléments dans une structure imbriquée. En HTML, la plupart des éléments ont à la fois une balise d'ouverture et une balise de fermeture :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
Dans ce cas,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
Hello, world!
</body>
</html>
L'élément peut également s'enrouler autour d'autres éléments, formant une structure imbriquée.
<!DOCTYPE html>
<html lang="en">
<head>
. . .
</head>
<body>
. . .
</body>
</html>
À l'intérieur de la balise d'ouverture, vous pouvez définir des attributs, qui sont utilisés pour spécifier des informations supplémentaires sur l'élément, telles que sa classe, son identifiant, etc.
<tag>. . .</tag>
L'attribut est généralement dans une paire clé/valeur, et la valeur doit toujours être placée entre guillemets correspondants (doubles ou simples).
Il existe quelques exceptions à ces formats généraux. Par exemple, le symbole
L'élément, qui crée un saut de ligne, n'a pas besoin de balise de fermeture. Certains attributs, comme multiple, ne nécessitent pas de valeur. Nous discuterons de ces exceptions plus tard dans ce cours au fur et à mesure que nous les rencontrerons.
Cependant, vous devez vous rappeler que si un élément nécessite une balise de fermeture, il ne doit jamais être laissé de côté. Dans la plupart des cas, la page Web peut toujours s'afficher correctement, mais à mesure que la structure de votre document HTML devient plus complexe, des erreurs inattendues peuvent survenir. Jetez un œil à nos lignes directrices sur les meilleures pratiques pour écrire du HTML et du CSS si vous êtes intéressé.
Lectures complémentaires
- Présentation de la feuille de style en cascade (CSS)
- Introduction à JavaScript
- Qu'est-ce que le Responsive Design
- Comment créer des formulaires interactifs en utilisant HTML et CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
Fontes variables de polices Google
Apr 09, 2025 am 10:42 AM
Je vois que Google Fonts a déployé un nouveau design (tweet). Comparé à la dernière grande refonte, cela semble beaucoup plus itératif. Je peux à peine faire la différence
Comment créer un compte à rebours animé avec HTML, CSS et JavaScript
Apr 11, 2025 am 11:29 AM
Avez-vous déjà eu besoin d'un compte à rebours sur un projet? Pour quelque chose comme ça, il pourrait être naturel d'atteindre un plugin, mais c'est en fait beaucoup plus
Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»?
Apr 05, 2025 pm 05:51 PM
Questions sur les zones de slash violet dans les dispositions flexibles Lorsque vous utilisez des dispositions flexibles, vous pouvez rencontrer des phénomènes déroutants, comme dans les outils du développeur (D ...
Comment sélectionner un élément enfant avec l'élément de nom de première classe via CSS?
Apr 05, 2025 pm 11:24 PM
Lorsque le nombre d'éléments n'est pas fixé, comment sélectionner le premier élément enfant du nom de classe spécifié via CSS. Lors du traitement de la structure HTML, vous rencontrez souvent différents éléments ...
Guide des attributs de données HTML
Apr 11, 2025 am 11:50 AM
Tout ce que vous avez toujours voulu savoir sur les attributs de données dans HTML, CSS et JavaScript.
Une preuve de concept pour rendre Sass plus rapidement
Apr 16, 2025 am 10:38 AM
Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge
Dans le développement frontal, comment utiliser CSS et JavaScript pour obtenir des effets de procédure similaires à l'interface des paramètres de Windows 10?
Apr 05, 2025 pm 10:21 PM
Comment implémenter des fenêtres dans le développement frontal ...
