Si vous êtes décidés à apprendre le vaste univers du développement web, la création de l’interface est souvent le meilleur point de départ. La page web ! Mais comment est-elle constituée ? Pour donner la structure à notre page, à notre contenu (textes, images,...), un langage est incontournable : le HTML.
Un site web a souvent pour raison l’affichage d’un contenu. Que ce soient du texte, des images, des liens, de la vidéo... Le HTML (HyperText Markup Language) intervient pour nous permettre de structurer ces différents contenus dans notre page. C’est lui qui donne l’architecture sur laquelle tout va reposer ensuite.
Les balises
Le HTML est donc composé de balises. Une balise est un bout de code composé d’un chevron ouvrant “<”, du nom de la balise, suivi d’un chevron fermant “>”. Toute balise ouvrante devra avoir une balise fermante. La balise fermante se distingue de sa sœur par l’ajout d’un “/” après le premier chevron.
En voici un exemple : <article> -----Ceci est mon contenu —-- </article>
Attention, lorsqu’on débute, on n’accorde souvent pas assez d’attention à l’ordre d’ouverture et de fermeture de nos balises. Cela a pour conséquence de casser la structure de notre page et de croiser nos contenus. Mieux vaut prendre le temps de vérifier nos lignes de HTML avant d’avancer trop dans notre page.
Structure de la page
Maintenant, que nous savons ce qu’est une balise, nous entrons dans la structure plus globale de notre page. Nous allons ainsi distinguer deux niveaux dans notre page, le Head et le Body.
Astuce : pour créer une page web, rien de plus simple. Il faut créer un fichier index.html, puis double-cliquer dessus pour l’ouvrir dans le navigateur. La page est blanche, c’est normal, notre fichier est vide. Ouvrons-le avec un éditeur de texte (Bloc-note si nous n’avons pas d’éditeur spécifique). Ensuite, continuons notre découverte.
<Head> vs <Body> : une vision simplifiée
De manière générale, une page web est composée de 2 parties principales : la tête (<head>) et le corps (<body>). La première partie (head) sert aux informations globales de notre page (son titre, sa favicon, sa langue…). La seconde partie comprend tous les éléments visibles pour notre utilisateur. C’est dans cette partie que nous mettons en place notre affichage. Voici un exemple de code de base pour créer une page :
Revenons ligne par ligne :
<!DOCTYPE html> : Cette ligne déclare la version du langage HTML utilisée dans le document. En l'occurrence, <!DOCTYPE html> indique que c'est un document HTML5.
<html lang="fr"> : Cela marque le début du document HTML. Le langage utilisé est défini comme le français (fr), mais nous pouvons changer la langue si nécessaire.
<head> : Cette balise ouvre la section d'en-tête du document. L'en-tête contient des informations sur le document lui-même, comme le titre, les métadonnées, les liens vers des feuilles de style, des scripts, etc.
<meta charset="UTF-8"> : Ceci spécifie l'encodage des caractères utilisé dans le document, qui est UTF-8. Cela garantit que le texte sera correctement interprété quel que soit le caractère utilisé.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> : Cette balise fournit des informations de visualisation pour les navigateurs. Elle indique au navigateur qu'il doit définir la largeur de l'écran de manière égale à la largeur de l'appareil et qu'il doit initialement zoomer à un facteur de 1.0. Cela aide à créer des pages web réactives et adaptées aux appareils mobiles.
<title>Document</title> : Cette balise définit le titre du document qui sera affiché dans la barre de titre du navigateur ou dans l'onglet du navigateur. Dans ce cas, le titre est simplement "Document".
</head> : Ceci marque la fin de la section d'en-tête.
<body> : C'est la balise d'ouverture du corps du document. Le corps contient tout le contenu visible de la page web.
<h1>Bienvenue à la wild</h1> : Cela définit un titre de niveau 1 dans le corps du document. Dans ce cas, il s'agit de "Bienvenue à la wild". Les titres de niveau 1 sont généralement utilisés pour les titres principaux de la page.
</body> : Cette balise marque la fin du corps du document.
</html> : Ceci marque la fin du document HTML.
Comment organiser nos balises dans notre <body> ?
Pour organiser nos balises dans notre corps, il faut imaginer notre interface web (notre page) comme un ensemble de boîtes imbriquées les unes dans les autres.
Voici un exemple possible de découpage de la page d’accueil de la Wild Code School.
En HTML, pour mettre en place ces différentes boîtes, nous avons accès à un ensemble de balises (<header>, <footer>,<main>, <section>, <article>, <div>). Fondamentalement, lorsque nous débutons, aucune n’est vraiment mauvaise pour faire notre mise en page. Certaines ont cependant plus de sens que d’autres.
Dans notre cas, cela pourrait donner ceci :
Nous avons imbriqué nos boîtes (balises) pour mettre en place notre structure HTML. Pas d’inquiétude si cela ne ressemble en rien à notre modèle. Le HTML ne gère pas la mise en page, seulement la structure. Il faudra dans un second temps découvrir et y associer du style (le CSS).
Comment intégrer du contenu à notre HTML ?
Si on entre dans le détails… Dans notre boite <article>, nous allons maintenant chercher à intégrer notre contenu. Voici une proposition de découpage possible.
Dans un premier temps, nous trouvons une image <img />, puis une boite avec deux mots séparés, un titre <h1> et un bouton de navigation <a>. Voilà nous y sommes presque...
En résumé, Le code HTML nous permet de structurer nos éléments dans notre page. Il faut l’imaginer comme un imbriquement de boîtes dans des boîtes qui finalement contiennent notre contenu.
Ces premiers pas en HTML vous ont donné envie d'en apprendre davantage ? Lancez-vous avec notre bootcamp en développement web. Cette formation intensive de 5 mois peut-être suivie sur l'un de nos campus ou à distance.
