Cours accéléré de HTML
Billet posté par Le PoissonClown dans LeCrabeInfo
3656 vues
Bonjour ! .png ":c_happy:")
Pas l'temps d'niaiser ! Dans le titre, c'est écrit "cours accéléré" !
Donc on commence : le HTML c'est quoi ?
Le langage HTML est en réalité, du texte. Ce texte est balisé, pour être compris par le navigateur. Voyons comment s'adresser à votre navigateur :
1. Les balises
Pour lui signaler quelque-chose, on écrit une balise comme ceci :
<balise> Contenu de la balise. </balise>
Ou si cette dernière ne contient rien (comme par exemple pour signaler un passage à la ligne), on écrit sa balise comme ceci :
<balise />
Il existe quantité de balises. Je ne vais vous en citer que quelques unes (on a dit "accéléré") :
| Balise | Type | Description |
|---|---|---|
| <p></p> | Bloc | Bloc paragraphe. |
| <br /> ou <br> | Inline | Passage à la ligne. |
| <img /> | Inline | Image. |
| <a><a /> | Inline | Lien hypertexte. |
| <code></code> | Inline | Petite citation de code (sur une seule ligne). |
| <i></i> | Inline | Partie en italique. |
| <b></b> | Inline | Partie en gras. |
| <em></em> | Inline | Partie mis en évidence (généralement en italique). |
| <strong></strong> | Inline | Partie mis fortement en évidence (généralement en gras). |
| <span></span> | Inline | Partie de texte. |
| <div></div> | Bloc | Groupe d'éléments autonomes. |
| <hr /> | Bloc | Ligne horizontale. |
Comme vous l'avez remarqué, on différencie deux catégories de balises :
- Les balises internes (dits de type "inline"), et
- Les balises externes (dits de type "block").
Typiquement, les balises qui concernent des morceaux de texte (b, i, em, strong, span…) sont toutes des balises internes et ne doivent pas figurer sans être encadrée par un conteneur externe (bloc). Sinon cela peut être source d'incompréhension ou d'erreurs. Les balises bloc, elles, sont autonomes, et n'ont pas besoin d'être encadrées.
2. Les attributs
Bien ! 
Maintenant que le navigateur comprend quel genre d'élément vous lui signalez, il faut maintenant préciser certaines choses sur certains éléments :
Imaginez : vous voulez lui soumettre un lien. Mais la balise <a></a> telle quelle ne lui dit absolument rien d'autre : il n'aura aucune idée de l'adresse du lien ou s'il faut l'ouvrir dans la page ou dans un nouvel onglet !
Pour lui donner ces compléments d'information, on ajoute dans l'en-tête des balises, des attributs. Voici comment s'écrit un attribut :
<balise attribut="valeur de l'attribut"><balise /> ou <balise attribut="valeur de l'attribut" />
Bien entendu, il est possible de cumuler plusieurs attributs en les séparant d'un espace. Ainsi, pour un lien qui s'ouvre dans un nouvel onglet vers le site de Wikipédia, et dont une info-bulle "Aller sur le site" apparaît au survol, on écrira :
<a href="https://www.wikipedia.fr/" target="_blank" title="Aller sur le site"> Cliquez ici pour ouvrir Wikipédia </a>
Résultat interprété par le navigateur ⬇
Citation
3. Mises en garde
Attention aux passages à la ligne :
Il ne faut pas passer à la ligne à l'intérieur d'une en-tête de balise. Vous pouvez le faire à l'intérieur du contenu de celle-ci, si elle se compose de deux éléments, mais pas à l'intérieur des caractères < et >, retenez ça !
Par exemple ceci est correct :
<b title="Ceci est de l'ironie"> ha ha ha </b>
Et ceci n'est PAS correct :
<b title=" Ceci est de l'ironie ">ha ha ha</b>
Attention aussi aux espaces :
Veillez également à ne pas mettre d'espace entre les guillemets et le signe égal de l'attribut, ou de ne pas oublier d'espace de séparation.
Si vous oubliez ces précautions simples, le navigateur ne va plus rien comprendre et ce sera buggué !
Correct :
<span title="J'ai dit de ne pas me toucher !">Ne me touchez pas.</span>
Pas correct :
<spantitle = "J'ai dit de ne pas me toucher !">Ne me touchez pas.</span>
Là, en fait, le navigateur lit une balise "spantitle", puis un égal tout seul en tant qu'attribut, puis une valeur toute seule sans le moindre nom d'attribut. Bref ! Inintelligible !
4. L'attribut Style et le CSS
Dernière chose : il existe un attribut pour ajouter des information visuelles/graphiques à des éléments. Cet attribut s'écrit « style="" ».
Dans cet attribut se placent des règles CSS qui s'appliquent à la balise elle-même (et jamais à d'autres).
Le CSS ?
C'est un langage de mise en forme graphique/visuelle d'une page HTML. Le codage est bien-sûr différent du HTML. Mais ce n'est pas très complexe non-plus :
Une règle CSS se compose d'un nom suivi de deux points, suivis d'une ou plusieurs valeurs séparées d'un espace (ou d'une virgule selon comment elle s'écrit), suivis d'un point-virgule. Comme ça :
nom:valeur1,valeur2;
Vous pouvez ajouter des espace entre ces différents composants, c'est même recommandé :
nom: valeur1, valeur2;
Vous pouvez donc enchaîner ainsi les règles dans l'attribut style :
style="regle1: valeur; regle2: valeur1 valeur2;"
Notez qu'une valeur peut être une fonction CSS, qui s'écrit comme ceci :
regle: fonction(valeur1,valeur2,valeur3);
Ne soyez donc pas surpris si vous en rencontrez.
5. Aller plus loin
a. Dans le CSS
Je vous laisse découvrir les différentes règles CSS, et comment s'écrivent leurs valeurs, sur l'excellent site developer.mozilla.org.
Sachez cependant que dans la balise style="", seules les règles css vous seront utiles ! En aucun cas, vous ne pourrez insérer des pseudo-éléments, ou des sélecteurs de balises avec des accolades, comme dans une feuille de style. C'est autre chose, et ça ne rentre pas dans l'attribut dont on parle.
b. Dans le HTML
Je vous laisse également consulter la partie HTML du même site, pour découvrir toutes les balises existantes.
Sachez quand-même que, pour des raisons de sécurité, l'éditeur du site n'acceptera pas l'insertion de certaines balises (comme iframe) ou certaines règles CSS (comme display) ou encore des marges avec des valeurs négatives.
Les pirates peuvent s'en servir potentiellement pour rediriger les visiteurs sur un autre site dès l'arrivée sur la page, ou faire déborder le contenu du message par-dessus les boutons du site et vous faire cliquer sur des liens où vous ne souhaitez pas aller.
Vous voilà armés pour démêler le code ! 
Comment !?
Écrire des pages HTML et des feuilles CSS ? Pour ça il faudra apprendre les balises déclaratives <html>, <head> (et tout ce qui va dans celle-ci), bien-sûr la balise <body>, et puis apprendre comment sélectionner vos élément HTML depuis votre feuille CSS (les sélecteurs CSS) pour leur appliquer les règles.
Comment ça "on s'est fait avoir" ? C'est des détails, ça ! 
C'est écrit « cours accéléré » d'accord, hein !?
Alors ne vous plaignez pas, vous partez sur d'excellentes bases pour apprendre à votre rythme !
Ça sers à ça, les cours accélérés, non ?! 
Modifié par Le PoissonClown
-
2
-
1
5 Commentaires
Commentaires recommandés