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é.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  

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.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  
    Hello, world!
  

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 :

  
    . . .
  
  
    . . .
  

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 . contient des métadonnées et d'autres informations sur le document HTML. Ces informations ne seront pas affichées dans le navigateur mais sont souvent utilisées par les moteurs de recherche à des fins de référencement (Search Engine Optimization).

, quant à lui, contient le contenu principal de la page Web visible par les utilisateurs, et pour cette raison, c'est également la partie du fichier HTML sur laquelle nous allons nous concentrer dans ce cours. .

É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 :

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  

Dans ce cas, est la balise d'ouverture et est la balise de fermeture et ensemble, elles forment un élément HTML. Un élément peut contenir du contenu textuel entre les balises d'ouverture et de fermeture.

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
  
    Hello, world!
  

L'élément peut également s'enrouler autour d'autres éléments, formant une structure imbriquée.

  
    . . .
  
  
    . . .
  

À 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!