Apprendre le HTML (partie 1)

Découvrez les bases du HTML

Apprendre le HTML (partie 1)

Découvrez les bases du HTML

Crée le 29 mars 2021

Partie 1 : https://g-ca.fr/tutoriels/tutoriel/apprendre-le-html-partie-1 Partie 2 : https://g-ca.fr/tutoriels/tutoriel/apprendre-le-html-partie-2


Avant-propos

Mise au point

Ce tutoriel sera en plusieurs parties pour le rendre plus digeste ; il faut tout de même noter que le but de ce tutoriel n'est pas de couvrir tout HTML5 mais de vous inculquer les bases pour que vous puissiez suivre les tutoriels CSS (je vais en rédiger un aussi), js et/ou php.

Qu'est-ce que HTML ?

Le HTML est un language de balisage qui permet de structurer les pages webs.

Commencer :


Quel éditeur choisir ?

Ceux à éviter : Tout d'abord il vous faut un éditeur vous pouvez très bien utiliser le bloc-notes même si je vous le déconseille car vous manquerez pas mal de fonctionnalités pour vous aider et vous faire gagner du temps. Vous pouvez utiliser un niveau au-dessus, notepad++, qui mettra en couleurs les balises comme ceci : Alt text Ceux que je conseille : Tout d'abord il y a Sublime Text qui est un notepad++ amélioré car il commence à générer du code. sublime textEt enfin, selon moi le meilleur, Visual Studio Code ; c'est celui que j'utiliserais.VScode

Notre première page :

Commencez par créer un dossier où il y aura tout les pages de votre site puis dans votre dossier créez un nouveau fichier portant comme nom index et comme extension .htmlAlt textAlt text

Ouvrez le en faisant clic droit puis en sélectionnant l'éditeur que vous avez choisi et copiez-collez le code ci-dessous (nous nous attarderons dessus plus tard).

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Tuto GCA</title>
  </head>
  <body>
    Mon premier site
  </body>
</html>

Vous devriez voir ceci : Alt text

Nos premières balises :

La syntaxe :

Comme vous avez pu le remarquer les balises s'organisent de la manière suivante : On ouvre une balise entre chevrons (<>) et entre les deux le nom du type de la balise. Puis on la ferme avec deux chevrons également (</>) avec le nom du type de la balise après le /.

Le code exemple :

Pour commencer nous allons expliquer les balises vues dans l'exemple donné plus tôt. La balise suivante doit être mise à la première ligne du fichier pour indiquer à l'éditeur le type du fichier.

<!DOCTYPE html>

La balise head sert à indiquer les éléments non visuels au site comme la balise suivante :

<meta charset="UTF-8">

qui sert à indiquer l'encodage de la page web (ici l'UTF-8). NB : À noter les balises meta ne se ferment pas. La balise title contient le nom de la page qui s'affiche ici :Alt text Et enfin il y a la balise body qui contient le contenu de la base ici il contient "Mon premier site" qu'il considère comme du texte par défaut car il n'est pas entouré de balises.

La suite est en cours d'écriture si elle n'est pas déjà sortie donc bisous et à bientôt !

Envie de lire la suite de ce tutoriel ?

Connecte-toi dès maintenant, et accède entièrement à tous les tutoriels de GCA !

#HTML / CSS

#dev

Écrit par par la barbe de Merlin#0001

8

Sommaire