Fondamentaux du HTML et du CSS-tutoriel CSS-php.cn

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.

Fundamentals of HTML and CSS

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.

Fundamentals of HTML and CSS

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.

Fundamentals of HTML and CSS

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 :

Fundamentals of HTML and CSS

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>

Copier après la connexion

Remarquez que dans le coin inférieur droit de la fenêtre VSCode, il y a un bouton Go Live.

Fundamentals of HTML and CSS

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.

Fundamentals of HTML and CSS

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>

Copier après la connexion

Enregistrez les modifications et la page Web sera automatiquement actualisée avec le nouveau contenu.

Fundamentals of HTML and CSS

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>

Copier après la connexion

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 :

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

Copier après la connexion

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.

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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