Le HTML est un langage de balisage, à l'inverse de python qui est un langage de programmation, son but est de gérer le contenu d'une page web (la structuration et les liens).
Le principe est assez simple : à chaque morceau du texte on associe, à l'aide de balise, sa fonction : titre, lien externe, paragraphe, bouton... Au début ça fait beaucoup de balise et on se perd un peu mais avec de la pratique cela devient assez naturel.
En HTML on ne s'occupe pas du style, les espaces entre paragraphe, la police, la taille des caractères se fait en CSS.
Pour écrire le code html, un simple éditeur de texte suffit, maintenant des éditeurs sont adaptés et donne par exemple une coloration automatique bien pratique. Notepad++ par exemple.
Pour visualiser votre page, là aussi c'est simple, il suffit d'un navigateur (edge, chrome,firefox..;), il suffit de cliquer sur le fichier .html et normalement s'est automatiquement ouvert. On peut même demander à son navigateur de trouver les éventuelles fautes (F12 sur Edge par exemple).
Construction d'une page Web.
Une page web ressemble à ca :
Je vous conseille, au début et pour gagner du temps, de faire des copier-coller de mon exemple vers votre éditeur.
Le fichier commence toujours par :
<!DOCTYPE html>
C'est un mot clef permettant de déterminer la nature du fichier (en plus du .html).
En suite vient l'entête délimitée par les balises :
<head>
</head>
Dans l’entête on donne le nom de l'onglet de la page, le style, les scripts, pour l'instant on ne s'occupera que du nom de l'onglet.
En suite vient le corps délimitée par les balises :
<body>
</body>
Dans le corps on place le contenu du fichier, c'est à dire le texte, le lien vers les images...
Les balises
Les balises vont généralement en double, on ouvre par exemple de cette façon <p> et se ferme de cette façon </p>, néanmoins certaines balises sont orphelines par exemple la balise pour importer une image.
Pour la suite, on donner un nombre non exhaustif (il y en a beaucoup) de balises, aujourd'hui le web à l'aide des sites et des forums offre une aide précieuse, il ne faut pas hésiter à passer par un moteur de recherche, voici des sites utiles :
developer mozilla: très bien, clair et lisble, généralement google nous envoies sur ce site.
openclassroms: très bien aussi, le livre qui reprend le site est très agréable à lire et fait pour le débutant.
validator est un site qui vérifie la validité de votre feuille html, les navigateurs essaient de corriger les erreurs et mauvaises pratique de votre feuille, c'est agréable mais on prend des mauvaises habitudes, validator est sans pitié sur votre travail (il est interdit de valider les feuilles du site).
Pour l’entête : <head> ... </head>
Pour rappel, dans l’entête on place généralement les liens vers les styles et les bibliothèques, on définit le codage des caractères, le titre de l'onglet,.... l'entête commence avec la balise <head> et se termine par </head>.
Balise
Description
<meta />
Balise orpheline, on y place le type des codage, je vous conseille de toujours écrire <meta charset="utf-8"/>
<title></title>
Le titre qui apparaît dans l'onglet de votre page web.
<style></style>
On peut mettre ici le réglage du style (CSS).
<script></script>
On peut mettre ici des script en JavaScript par exemple.
<link />
Balise orpheline, on donne le lien vers un fichier qui contient le style en CSS.
Pour l'instant, seule la partie title est importante.
Pour le corps de la page : <body> ... </body>
La partie body est là partie où on écrit le teste de la page.
Les titres.
HTML permet plusieurs niveaux de titre.
Balise
Description
<h1> Titre principal </h1>
Titre principal.
<h2> Titre secondaire </h2>
Niveau de titre inférieur.
<h3> Titre inférieur </h3>
Niveau de titre inférieur.
...
...
Le texte.
Balise
Description
<p>Paragraphe</p>
Paragraphe
<div>Balise universelle</div>
Création d'une section "block"
<span>Balise universelle</span>
Création d'une partie sans retour à la ligne
<strong>Partie importante</strong>
Pour marquer une partie
<sub>indice</sub>
Mettre en indice.
<sup>exposant</sup>
Mettre en exposant.
<sup>exposant</sup>
Mettre en exposant.
<cite>titre</cite>
Nom d'une livre ou d'une musique.
<q>citation courte</q>
Citation en ligne.
<br>
Balise orphline de mise à la ligne.
...
...
Puce et numéro
Balise
Description
<ul>Liste à puce</ul>
Délimite la zone à puce.
<ol>Balise universelle</ol>
Délimite la zone avec des numéros.
<li>Balise universelle</li>
Nouvelle zone à puce ou numéro.
Image
Balise
Description
<img src="lien vers la source" title = "optionnel : titre" alt = "optionnel : remplacement" width = "Optionnel : largeur" height = "optionnel : hauteur">
Insere une image.
Lien
Balise
Description
<a href = "L'adresse du lien"> Message du lien </a>