-40%
Le deal à ne pas rater :
-40% Polo Lacoste – imprimé crocodile – 5 couleurs dispo
72 € 120 €
Voir le deal

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Présente quelques heures par semaine =)
----
Idea Viens papoter avec nous sur le discord

Messages : 3991
https://tambouille-raleuses.forumactif.com/

[HTML] Les bases du HTML Empty [HTML] Les bases du HTML

Lun 15 Avr 2019 - 18:29

Les bases du HTML


Bonjour bonjour Smile

Voilà un tutoriel pour les débutants en codage qui se demandent ce qu'est le HTML. Il n'est pas très poussé mais permettra de mieux comprendre le tout.

Définition et principe de base


Le HTML (Hypertext Markup Language) est un langage de programmation web permettant de structurer les pages. Pour faire une comparaison avec l'être humain : le langage HTML est pour une page ce qu'est l'ossature pour notre corps. C'est un langage qu'on dit "balisé", on reviendra dessus un peu plus loin.

Structure d'une page HTML


La structure d'une page HTML est fondamentale : elle doit toujours être respectée.
D'abord on commence par le "doctype" : c'est ça qui va indiquer à notre navigateur que c'est une page HTML qu'il va lire.
Code:
<!doctype html>
Ensuite, on a l'élément racine qui va englober l'intégralité de notre contenu :
Code:
<html lang="fr">
</html>

Ensuite, on reprend la comparaison au corps humain. En haut de notre corps, on a une tête : head en anglais. Pareil sur une page html. Et dans ce head vont être placé : le titre de la page (title), le type d'encodage (charset), le lien vers la feuille de style CSS (link) et les éventuels scripts (script).
Code:
<head>
  <meta charset="utf-8" />
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="monscript.js"></script>
</head>

Exclamation A noter qu'on peut mettre le script javascript et le style directement dans le head. Dans ce cas on aura ceci :
Code:
<head>
  <meta charset="utf-8" />
  <title>Titre de la page</title>
    <style type="text/css">
/**le style**/
</style>
<script type="text/javascript">
</script>
</head>

Et ensuite on a le corps : body.

Code:
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>

Ce qui nous donne donc, le tout mis ensemble :
Spoiler:

Code:
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="monscript.js"></script>
</head>
<body>
  ...
  <!-- Le reste du contenu -->
  ...
</body>
</html>

Les commentaires

Les commentaires permettent d'ajouter des informations qui ne seront pas affichées dans le corps de la page. Ils permettent également d'aérer le code sans risque d'éventuellement déformer le rendu.

Les commentaires se notent comme ceci :
Code:
<!-- Je suis un commentaire -->

On peut mettre tout ce qu'on veut à l'intérieur, ça ne sera pas interprété par notre page : des retours à la lignes, des balises, etc....

Les différents types de balises


Comme je l'ai dit au dessus, le HTML est un langage balisé : on utilise donc des balises pour structurer nos pages. Il existe 2 types de balises : des balises dites "en paires" et d'autres dites "orphelines".

¤ Les balises "en paires" :
ce sont des balises qui s'ouvrent puis se ferment. Ce sont des balises à l'intérieur desquelles on peut mettre d'autres balises ou du contenu.
L'ouverture se fait comme ceci :
Code:
<balise>
et la fermeture comme ceci :
Code:
</balise>

Exclamation Si une balise s'ouvre elle doit forcément se fermer ! L'ordre d'ouverture et de fermeture des balises est très important : première ouverte, dernière fermée !
On fait un exemple. Vous ne pouvez pas faire
Code:
<div> <p> mon texte </div> </p>
Il faut faire dans cet ordre là :
Code:
<div> <p> mon texte  </p> </div>
Arrow Quelques exemples de balises "en paires" : div, p, span, etc...

¤ Les balises "orphelines" :
ce sont des balises qui ne peuvent rien contenir : la fermeture se fait dans l'ouverture. Comme ceci :
Code:
<balise />
Arrow Par exemple : br, img, etc..

Inline vs Block : conventions générales d'utilisation


Dans ces balises, certaines sont dites "block" alors que d'autres sont dites "inline" (en ligne).
¤ Les balises "block" : ce sont des balises qui vont se positionner les une en dessous des autres. Elles peuvent contenir d'autres balises "block" ainsi que des balises "inline".
Arrow Exemple : Div, p, etc...

¤ Les balises "inline" : par défaut, ce sont des balises qui vont se placer les unes à coté des autres. Elles peuvent contenir d'autres balises inline, mais jamais de balises block.
Arrow Exemple : a, img, span, etc...



Et voilà, maintenant tu en sais un peu plus sur le code HTML et les différents types de balises. J'espère que ça t'éclairera un peu Smile


Revenir en haut
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses



Post-It des Râleuses