I/ Initiation

LE HTML repose sur le même principe que le CSS, bien qu'il y est plusieurs différences notables. 

Pour ceux qui ont suivit mon conseil et sont aller voir le blog de Nagalia, 
vous n'êtes pas obligés de lire cette initiation, globalement, je dit la même chose.

• Le HTML, c'est quoi ?

L'abréviation HTML vient de l'anglais "Hyper Text Markup Language", avouez que ce n'est pas très simple à dire ou à retenir. C'est un langage informatique conçu pour représenter les pages web.

• A quoi il sert ?

Le HTML permet de mettre en forme un contenu, mais il peux aussi aider à structurer une page. Cela dit, sur eklablog, il vous aideras surtout à faire de magnifique présentations ou, comme sur ce blog, à placer un simple texte en haut de votre blog avec un fond. Bref, le HTML c'est vraiment pratique.

Grâce à ce langage, vous pourrez conditionner vos textes pour ajouter des ombres, des coins arrondis, des bordures ect... voyez ? Même effets que le CSS.

• Comment il marche ?

Le HTML repose sur le principe des balises, entre deux balises, se trouve votre texte et seul le texte mis entre les deux balises se verra affecter par les propriétés souhaitées. En gros, les choses se présenterons sous cette forme :

<div style="propriété: valeur;">Texte dans la balise.</div> Texte hors de balise.

Vous voyez ? On retrouve notre propriété et notre valeur qu'on avait déjà identifié dans l'article d'initiation au CSS. La propriété reste toujours ce que vous souhaiter ajouter. Pour cet exemple, on va changer la couleur du texte :

<div style="color: valeur;">Texte dans la balise.</div> Texte hors de balise.

Comme expliqué dans "initiation au CSS", la valeur sera l'effet ajouté à la propriété, si nous voulons par exemple un texte orange, nous allons donc indiquer la valeur souhaitée :

<div style="color: orange;">Texte dans la balise.</div> Texte hors de balise.

Et voici, si je place maintenant mon HTML dans la case prévu, le résultat donné par notre code :

Texte dans la balise.

Texte hors de balise.

Penchons-nous maintenant un peu plus sur les éléments que nous ne connaissons pas encore. Nous allons reprendre le code brut :

<div style="propriété: valeur;">Texte dans la balise.</div>

Ici, <div> est donc la valeur qui ouvre notre balise et </div> la valeur qui la conclut. En HTML, il existe plusieurs balises différents comme il existe différents sélecteurs en CSS. La balise <div> est celle que j'utilise le plus souvent car elle permet de traiter énormément de chose par le biais du HTML.

Vous pouvez aussi utiliser la balise <span> pour traiter un texte. Cette balise nécessite aussi une balise de fermeture. Un </span>.

Du coup, quelle différence entre le div et le span ?

• La balise div est plus de type block, elle servira plus à gérer des groupes d'éléments.
• La balise span est plus de type ligne, elle servira à gérer le texte, plus généralement.

Parmi les balises HTML, certaines ne se ferment pas. Par exemple, si vous placer les balises <img /> ou  <br /> rien ne vient après, ce sont des balises orphelines. La balise br permet de faire un saut de ligne.
Voici deux exemple plus parlant que mes mots :

Code :

Texte <br /> Texte

Résultat :

Texte
Texte

Ici, le saut de ligne est simple, si vous en voulez un plus marqué, il faut mettre deux balises à la suite :

Code :

Texte <br /><br /> Texte

Résultat :

Texte

Texte

Il reste encore quelques notions à voir dans cette initiation, mais dans un premier temps, je vais juste les survoler parce que c'est un peu compliqué. D'autant plus qu'il faut digérer beaucoup de choses d'un seul coup. Mais ne vous en faites pas, on reviendra sur certains points plus en détails plus tard. 

<div style="propriété: valeur;">Texte dans la balise.</div>

Ici style c'est l'attribut que va avoir la balise div, celui-ci défini l'apparence d'un élément. Le que div peux avoir d'autres indicatifs que le style. Le "style" permet de traiter un texte, mais on peux aussi trouver l'attribut "class" :

<div class="nom">Texte dans la balise.</div>

Quand on fait appel à l'indicatif "class" on ne met ni propriété ni valeur, on lui donne juste un nom, ce nom servira à rappeler le texte dans le CSS afin de le traiter non pas par HTML mais par CSS. Il existe un deuxième indicatif du même effet," l'id" :

<div id="nom">Texte dans la balise.</div>

Dans le CSS, on rappelle un indication "class" par un . et l'indicatif "id" par un #. Et comme je l'ai expliqué dans l'initiation au CSS, le point fait appel à une classe d'objet général alors que le hashtag fait appel à un objet précis.

Voilà je ne vais pas approfondir ces points plus que ça aujourd'hui, alors on va passer à la suite.

• Où est-ce qu'on trouve leHTML sur ekla ?

Et bien c'est très simple ! Je vous est même réservé un petit tuto imagé pour cette partie !

1/Accéder au code source

Vous voyez ce petit machin que j'ai si joliment encadré en rouge ? C'est là ! Cliquez !

2/Vous y êtes !

Et là vous tombez sur la page de HTML de votre article, encore vierge.

Et voilà qui conclut cette initiation au HTML. J'espère avoir été assez claire. En tout cas si je ne vous est pas trop embrouillé je pense que cet article est une bonne bases pour commencer le HTML. Encore une fois, c'est normal que certaines notions restes flou, on pourra les approfondir avec le temps.

Voilà voilà.

C'est le soir pour moi à l'heure où je termine cet article, alors je vous souhaite une bonne soirée et passe le bonjours à ce qui me lirons à un autre moment de la journée.

♥ Aeda