Astuces
Le code, comment ça marche ?
Raphaël |
Il est parfaitement inutile de savoir coder pour utiliser OnlineCreation.me. Cet article est donc d'une inutilité absolue, même si vous êtes un utilisateur avancé. Mais quel est le mal à partager sa passion ? Quel est le mal à être curieux et à en apprendre un peu plus chaque jour ? Cet article n'a pas la prétention de vous former, mais simplement de vous présenter les principes de base. Dans 10 minutes, vous comprendrez comment fonctionne une page web.
Posez vos balises
Le langage dans lequel sont rédigées les pages web s'appelle le HTML. Ce langage est constitué de mots clé encadré par les symboles < et > appelés balises.
Exemple de morceau de code HTML :
Bonjour <strong>tout le monde</strong>
Ce code est lu par votre navigateur et est transformé en page web, telle que vous la voyez. L'exemple vu précédemment sera interprété par votre navigateur de la façon suivante :
Bonjour tout le monde
Ici, la balise <strong> signifie que tout le texte jusqu'à </strong> doit être mis en gras. La balise <strong> est la balise dite ouvrante, la balise </strong> est dite fermante.
Il existe des centaines de balises, chacune avec une fonction définie.
Personne ne connaît par cœur toutes les balises HTML, c'est inutile. Il y en a régulièrement des nouvelles et d'anciennes disparaissent. Il est toujours préférable de se référer à un site les listant.
De beaux attributs
Il est possible de donner des instructions plus précises aux balises. Par exemple :
Bonjour <strong title="Youpi !">tout le monde</strong>
Ici, nous ajoutons l'attribut title, permettant d'ajouter une bulle d'information indiquant « Youpi ! » si l'utilisateur pose sa souris sur le texte en gras, comme ceci :
Bonjour tout le monde
Chaque balise a ses attributs avec ses propres fonctions.
Tout comme les balises, inutile d'apprendre les attributs par cœur : il en existe des milliers et il est même possible dans certains cas d'en créer.
Ne manquez pas le style
Parmi les attributs intéressants, il y a style, compatible avec toutes les balises. Dans cet attribut, on peut définir l'apparence d'un élément. Par exemple :
Bonjour <strong style="color: red; font-size: 20px;">tout le monde</strong>
Ici, nous avons indiqué dans le style que le texte en gras doit être écrit en rouge et dans une taille de police de caractère de 20 px, comme ceci :
Bonjour tout le monde
Le style est défini en CSS, un autre langage tout aussi facile à comprendre. Chaque mot-clé est suivi de deux points et d'une valeur, puis d'un point-virgule. On peut mettre autant de propriété que nécessaire.
Les experts préfèrent ne pas mélanger CSS et HTML et placent le code CSS dans un autre fichier et utilisent l'attribut class pour indiquer quel code CSS correspond à quelle balise. Pour démarrer, il n'est pas nécessaire d'aller jusque-là.
Même chose, inutile de mémoriser toutes les propriétés CSS.
La plupart des développeurs travaillant sur des applications lourdes détestent le CSS. C'est un langage qui est très atypique dans sa forme et dont l'interprétation peut varier d'un navigateur à l'autre.
Interaction et images
Et les liens entre les pages ? Encore une balise :
Inutile d'apprendre le HTML pour <a href="https://www.onlinecreation.me">créer un site internet</a> !
La balise <a> permet de créer un lien dont la destination est définie par l'attribut href. Dans l'exemple, le texte « créer un site internet » est un lien vers https://www.onlinecreation.me, comme ceci :
Inutile d'apprendre le HTML pour créer un site internet !
Une autre balise majeure est <img> qui permet d'insérer une image. Elle est toujours accompagnée de ses attributs src (pour définir l'adresse de l'image) et alt (pour définir un texte de remplacement si l'image ne peut pas être chargée ou si le visiteur est déficient visuel). Exemple :
Une image : <img src="https://source.unsplash.com/user/audreyroques/100x100" alt="Photo aléatoire">
L'image disponible à l'adresse https://source.unsplash.com/user/audreyroques/100x100 est affichée après le texte « Une image : », comme ceci :
Une image :
Notez qu'il est possible d'imbriquer les balises les unes dans les autres :
Une image :
<a href="https://unsplash.com/@audreyroques">
<img src="https://source.unsplash.com/user/audreyroques/100x100" alt="Photo aléatoire">
</a>
L'image est ici un lien qui pointe vers l'adresse https://unsplash.com/@audreyroques, comme ceci :
Une image :
Structurons les éléments
Le HTML est un langage conçu pour structurer une page et définir son contenu. Outre fournir le texte et le contenu, il permet d'indiquer que tel élément appartient à l'entête de la page, tel élément est le contenu principal, tel élément appartient au menu de navigation, etc. Pour ce faire, il existe plusieurs balises (<header> pour l'entête, <footer> pour le pied-de-page, <main> pour le contenu principal, <article> pour un article de blog, <aside> pour un élément sans lien direct avec le contenu, <nav> pour le menu de navigation, etc.) mais la plus simple et la plus courante est <div>.
Un div est un bloc. Simplement un bloc dans lequel on met ce que l'on veut, pour regrouper des éléments. Texte, images, liens... Il est possible de lui attribuer des propriétés CSS à l'aide de l'attribut style (ou class) et ainsi pouvoir facilement mettre en page les informations.
Par exemple :
<header>
<div
style="font-size: 30px; text-align: center;"
>
Mon super site
</div>
<nav
style="text-align: center; margin: 30px;"
>
<a href="/">
Page d'accueil
</a>
•
<a href="/contact.html">
Contactez-moi
</a>
•
<a href="https://www.onlinecreation.me">
OnlineCreation.me
</a>
</nav>
</header>
<main>
<div>
Bonjour tout le monde et bienvenue sur mon
super site ! Voici le dernier chapitre de mon
roman :
</div>
<div>
Un long silence se fit dans la voiture. Le
chauffeur regardait droit devant. David jeta
un œil sur le compteur qui affichait 210km/h.
L’autoroute était déserte. Depuis la construction
de la Ligne Grande Vitesse, les gens préféraient
prendre les transports en communs, plus rapides
et moins chers. La LGV traversait la France d'un
bout à l'autre avec un arrêt à Paris.
</div>
</main>
<footer
style="font-size: 10px; text-align: center; margin: 30px;"
>
Tous droits réservés.
<a href="/legal.html">Mentions légales</a>
</footer>
Facile, non ?
Si vous avez compris ça, vous avez compris 90% du HTML. Maintenant, n'hésitez pas à aller observer le code HTML des pages de votre site : vous verrez que ce n'est pas d'une complexité extrême, ce sont simplement des balises imbriquées les unes dans les autres. Tentez de comprendre à quoi sert chaque balise et comment elles fonctionnent en observant et en comparant le code source avec le résultat. C'est comme ça que j'ai commencé à écrire mes premières lignes de HTML, à l'âge de 12 ans (et j'étais loin d'être un génie !). Si un préadolescent peut y arriver, alors incontestablement vous aussi.
Des questions ? N'hésitez pas à utiliser les commentaires !