meridian-shaft Jump to content
Blogs

Cours accéléré de HTML


1127 views

Bonjour ! :c_happy:

:allthethings: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 ! :c_satisfied:
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).

:kermit: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 ! :angry-walter:

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_doubtfully:
:trump-bill-signing: 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 ?! :dicaprio:

Edited by Le PoissonClown

  • J'adore 2
  • Plusser (+1) 1

5 Comments


Recommended Comments

Il y a 15 heures, Firebird a dit :

Merci pour ce cours accéléré.
On en redemande : Python, Java, etc. :c_wink:

Avec plaisir, mais je suis loin d'être compétent pour le faire à propos de Python ou Java ! :unsure:

Link to comment

PHP et MySQL, je pourrais faire. Mais l'intérêt est limité : ça n'est pas trop utile ici et ces technos se font vieilles j'ai l'impression.

J'ai fait ce tuto surtout pour compléter la partie 6.d du guide de mise en forme.

Edited by Le PoissonClown
  • J'aime 1
Link to comment
il y a 1 minute, Le PoissonClown a dit :

PHP et MySQL, je pourrais faire. Mais l'intérêt est limité : ça n'est pas trop utile ici et ces technos se font vieilles j'ai l'impression.

Tu as raison.

Link to comment
Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...