Accueil  > coulisses > Web > Créer sa page perso > HTML  > Initiation à la syntaxe

avant tout, ouvre ton explorateur puis "outils/options des dossiers/affichage", et décoche "cacher les extensions des fichiers dont le type est connu." (si c'est pas déjà fait)

ouvre un nouveau fichier bloc-notes (notepad ou équivalent) et fait dedans un copier/collé de ces 4 mots (tel quel, avec les retours chariot)

ma
première
page
Html

enregistre ton fichier ou tu veux, nomme-le par exemple "mapage" puis ferme le bloc-notes.
Dans l'explorateur, renomme mapage.txt en modifiant seulement l'extension, après le point, à la place de "txt" tu mets "html",
"êtes-vous sûr de vouloir changer l'extension etc...." OUI et tu obtiens : mapage.html l'icône doit changer automatiquement
maintenant, ouvre-le, et regarde le résultat.
MAIS ! où sont passés les retours chariots, et la taille du texte ?

Voilà ! c'est ça le HTML, il faut tout lui dire, sinon il prend les paramètres d'affichage par défaut de ton navigateur web
(pour la couleur du fond et de la police c'est dans
[panneau de configuration/affichage/apparence/element:fenêtre],
pour la taille de la police c'est le paramètre de ton navigateur [affichage/taille du texte])

Pour obtenir la taille des caractères et les retours chariots comme plus haut, il faut insérer autour du texte, des codes de mise en forme qui s'appellent des BALISES

deuxième essai

tu fais sur ta page ouverte mapage.html : [clic droit/afficher la source] ou du menu de la fenêtre [affichage/source]
le bloc-notes s'ouvre et tu vois de nouveau tes quatre mots ; tu les effaces et à la place, tu fait un copier/coller de ça

<font size="5"><b>ma<br />première<br />page<br />Html</b></font>

puis tu fermes le bloc-notes, "voulez-vous enregistrer les modifications...." OUI

et tu rafraîchis la page avec"ACTUALISER" (sinon il ne se passe rien)

et bien voilà, tu l'as
ta
première
page
Html

tu pourras ensuite de la même façon au fur et à mesure du cours, [copier/coller] des morceaux de code dans ton fichier "mapage" pour en voir le résultat

examinons les <BALISES>

<font size="5"><b>ma<br />première<br />page<br />Html</b></font>

pour que le navigateur en lisant le code, fasse la différence entre le texte de la page (ici en bleu) et les commandes HTML, les <balises> sont entre ces deux caractères < et > qui en mathématique signifient respectivement : "plus petit que" et "plus grand que"

Règle importante

en règle générale une balise s'ouvre et se ferme pour délimiter le début et la fin de sa fonction
(il y a des exceptions et des tolérances)
la syntaxe est très simple :

<balise> ... </balise>

par définition, tout ce qui se trouvera entre l'ouverture et la fermeture de la balise et sera affecté par ses fonctions et en subira les ordres

exemple :
pour écrire un mot (ou une partie d'un texte) en italique, on utilise la balise

<i></i>

la syntaxe suivante
mot en <i>italique</i> dans une phrase

donnera ce résultat

mot en italique dans une phrase

exception particulière la balise
<br />
qui a un effet unique et immédiat : "retour chariot" (BReak)
elle n'a donc pas de fermeture, il suffit de la placer dans le texte aux endroit ou l'on veut passer à la ligne comme dans l'exemple

<font size="5"><b>ma<br />première<br />page<br />Html</b></font>


<i></i> (italique) tout comme <b></b> (caractère gras, Bold en anglais) et
<u></u> (caractère souligné)

sont des balises qui n'ont qu'une seule fonction simple
mais d'autres balises ont des fonctions multiples définis par des "attribut", ces attributs auront des "valeurs"


la syntaxe est :

<BALISE attribut1 = "valeur" attribut2 = "valeur"> </BALISE>

Les balises peuvent avoir un nombre variable d'attributs selon leur fonction
on est pas obligé de les utiliser tous.

exemple avec la balise

<font> </font>

qui paramettre la police, la couleur et la taille des caractères
ces attributs principaux, (pris ici comme exemple non exhaustifs) sont:

face
qui peut avoir les valeurs comme:
Arial
Courier
Comic Sans MS
Times New Roman etc...
plus d'info

color
qui peut avoir des valeurs comme :
black
cyan
gray
magenta etc...
(plus de précisions sur les couleurs, ici)

size
de 1à 7

on pourra donc avoir comme ligne de code :

<font face = "Times New Roman" color = "magenta" size = "6" >bonjour</font>

fait un copier/coller de la ligne de code dans ton fichier mapage.html comme tout à l'heure tu dois avoir ce résultat :
bonjour
le fait que j'ai écris le code avec des couleurs pour en différencier les éléments, à ajouté des espaces inutiles ;
à présent que tu as compris le principe, j'écrirais le code ainsi
<font face="Times New Roman" color="magenta" size="6">texte</font>
pour que tu te force à l'analyser sans l'aide des couleurs, différencier la balise, ses attributs et leurs valeurs, et voir où les espaces sont nécessaires, et où ils ne le sont pas.
le schéma sera le même pour toutes les balises Html pures

---

Un autre exemple de balise qui peut avoir plusieurs attributs
celle là agit sur la mise en page du texte

<div> </div>

son principal attribut est
align

les valeurs de "align" sont

left (texte aligné à gauche)
right (texte aligné à droite)
center(texte centré)
justify(texte justifié)

exemple :

<div align="center">texte qui sera centré</div>
donnera comme résultat :

---

Emboîtement des balises

pour écrire un texte en bleu, puis en rouge, puis de nouveau en bleu, on pourrait écrire de la façon la plus basique, la syntaxe suivante :
<font color="blue">
texte en bleu
</font>

<font color="red">
texte en rouge
</font>

<font color="blue">
texte en bleu
</font>

mais le HTML a une logique plus subtile, regarde la différence

<font color="blue">
texte en bleu

<font color="red">
texte en rouge
</font>

texte en bleu
</font>

explication

<font color="blue">
on vient d'ouvrir une balise pour écrire bleu
<font color="red">
sans fermer la précédente balise, on ouvre une nouvelle balise qui prend la main sur la première pour écrire rouge
</font>
on ferme la balise pour écrire rouge, la première reprend la main, le texte repasse au bleu
</font>
et pour finir, on ferme la première balise

aller, un petit exemple d'emboîtement avec trois couleurs et après tu peux aller te reposer les neurones



c'est bien plus beau, plus équilibré, et ça fait moins de code HTML à écrire donc des pages plus légères
cette logique fonctionne aussi, bien sûr, avec la balise <div> </div> que nous avons vu plus haut


prochaine étape
Les balises <a> et <img>
pour faire des liens hypertexte et insérer des images