Apprendre le développement web (étape 1 / 3) : HTML

Après plusieurs tentatives échouées de faire cet article (il y avait un bug dans mon système de création d’article), j’en ai un peu marre, j’ai donc décidé pour l’instant de simplement copier le contenu des messages discord que j’ai envoyé à un ami pour lui apprendre le développement Web (c’est de cet échange Discord que je tient l’idée de faire cet article):

Message 1:

Balises principales:

<!DOCTYPE HTML> : pas obligatoire mais c’est l’entete qu’on est sensé metre en haut du fichier pour qu’il soit considéré comme html…
<html>...</html> : la page, c’est dans cette balise que doivent etre toutes les balises html du fichier, c’est la racine du code html, toutes les balises doivent être enfant de cette balise (bon après c’est pareil, si tu la met pas ça marchera quand meme, mais si tu la met elle doit etre à la racine du fichier…)
<head>...</head>: l’entete du fichier, c’est dedans que sont toutes les informations sur le fichier qui ne sont pas visible directement sur la page, c’est à dire les métadonnées, le titre, mais c’est aussi dedans qu’on met généralement les références vers les fichiers externes que ce soit css, javascript ou meme la favicon (icone du site)… Je ferai un autre message pour les balises qu’on peut mettre dedans
<body>...</body>: c’est dans cette balise que sera le contenu du site, tout ce que le client (utilisateur) pourra voir sur la page. le prochain message donnera les balises basiques de contenu du body

Message 2:

Balises du body:

<div>...</div> : il n’a pas d’utilité directe sur l’affichage (sans style), c’est juste un element qui sert à grouper d’autres éléments, c’est un peu un sac à element si on veut… c’est très utilisé car c’est avec cet element qu’on peut bien faire du css et meme du js car on fait le style d’un div par exemple qui aurait l’id ou la classe “hello” et ensuite c’est ce qui permet de faire un element, etc. enfin bref c’est utile
...: c’est l’élement géneralement utilisé pour les textes, pour la bonne raison que c’est l’élement paragraphe, dans html si l’on met plusieurs éléments à la suite, meme si on saute une ligne, il se suivent sur la page html, l’element … a un saut à la ligne automatique car c’est un paragraphe, ainsi si l’on veut faire plusieurs paragraphe qui ne sont pas sur la meme ligne (ou dans le meme paragraphe au moins) on utilise la balise ... (il existe aussi la balise , c’est une balise solitaire c’est à dire qu’elle ne peut pas avoir de balise enfant, cette balise permet de faire un saut à la ligne)
... : texte en gras
... : texte souligné
... ou ...: texte italique (ne pas oublier que si l’on met une u al’interierur d’une b a l’interieur d’une i par exemple , ça fera du souligné italique gras en meme temps, les styles s’aditionnent)
h1 h2 h3 h4 h5 h6 : ce sont les titres par niveau (h1 titre principal, h2 titre de 2e niveau etc.), j’en ai marre d’écrire les < et > a coté des balises alors je donne juste le nom de la balise mais faut bien considérer que ces balises sont des balises normales donc qu’elles sont sous la forme <balise\_name>...</balise\_name>

Message 3:

aussi (j’ai failli oublier):

a : la balise anchor, c’est la balise qui permet de fair des liens grace à l’attribut href

les attributs de balises :

<nom_de_balise nom_d_attribut="valeur de l'atribut">
Contenu de la balise
</nom_de_balise>

les attributs les plus fréquents:

<!-- j'en profite pour faire l'introduction du commentaire dans html, pour ça tu fais comme j'ai fait ici c'est à dire <!-- en début et ça pour arreter le commentaire: -->


<!-- id, c'est l'identifiant que tu souhaite donner à la balise, c'est un attribut facultatif comme tous les autres attributs... ça ne sert pas directement mais ça sert après avec js et css-->
<div id="identifiant"></div>

<!-- class, la classe de l'élement, idem que pour id: ça ne sert pas directement mais ça sert avec js et css -->
<div class="classe"></div>

<!-- l'attribut href des balises a, l'attribut href est principalement utile sur les balises <a></a> pour définir vers ou pointe le lien, par ailleurs si tu met un attribut href sur un p, un div, un b, etc. ça ne fera rien sauf si tu configure avec js et css -->
<a href="https://le.lien/vers_ou/aller">Cliquez sur ce lien ah ah ah </a>

Message 4:

bon et pour le head, les plus importants et utiles pour l’instant (on en introduira d’autres quand on commencera js et css):

title: c’est le titre affiché dans le titre de l’onglet en haut:

<title>Le titre du document</title>

bon je crois que c’est tout… XD

Message 5:

pour finir: exemple de page html:

<!doctype html>
<html lang=fr><!-- défini la langue du document, pas obligatoire mais utilisé par les navigateurs pour savoir si la page est en français ou en anglais-->
<head>
<title>Bonjour Monde</title>
</head>
<body>
<div id=div-principal>
<p>Bonjour <i><b><u>Syllchips</u></b></i>, rends toi sur <a href="https://virus.com">ce lien</a></p>
</div>
</body>
</html>

Conclusion

Pour suivre votre apprentissage du developpement web, lisez la prochaine étape dans le prochain article, l’étape 2 porte sur le CSS.

Apprendre le développement web en 3 étapes:

GZod01