Débuter en HTML. Coder votre première page en HTML.

On va apprendre à coder en HTML et CSS sur un exemple. Je reprends l'exemple de la fiche du jeu vue dans l'INTRODUCTION.

Ci-dessous vous avez une saisie d'écran de cette fiche réalisée avec le logiciel de traitement de texte Word. Dans ce tuto on va faire la partie HTML d'une page web équivalente. La partie CSS sera faite dans le tuto suivant.

Exemple HTML et CSS de la fiche à réaliser

Je vais mettre un titre à la page web. Je vais lui donner le titre CALL OF DUTY. Il s'agit du titre qui apparaîtra au niveau du nom de l'onglet dans le navigateur. Ce titre n'apparaît pas sur la maquette que vous avez vu plus haut et réalisée avec word. C'était en fait le nom du fichier.

Tout d'abord téléchargez une structure HTML minimale pour pouvoir démarrer directement le codage.
Maintenant vous prenez en édition le fichier fiche-jeu.html. Dans votre éditeur vous devez voir le code ci-dessous. C'est une structure minimale nécessaire à la création de toute page web en HTML. Je détaillerai tout ceci par la suite dans un tutoriel dédié à tout ce que l'on doit mettre dans une structure HTML minimale. Ci-dessous je vous donne juste quelques infos. <!DOCTYPE html>  <html lang='fr'> <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>  </body> </html>
Maintenant je vais donc donner un titre à cette page. Un titre qui apparaîtra au niveau du nom de l'onglet qui contiendra la page dans le navigateur. Pour cela il va falloir que j'insère un élément HTML dans la page. C'est le moment de préciser ce que l'on entend par élément HTML. Un élément HTML est un contenu balisé par une balise ouvrante et une balise fermante.

Un élément HTML porte un nom. C'est le texte qui est dans les balises. Ci-dessous il s'agit de l'élément title. Un élément HTML a un contenu. Ci-dessous c'est le texte CALL OF DUTY qui est entre les balises.

J'insère cet élément entre les balises head. Plus précisément avant la balise fermante.
<!DOCTYPE html> <html lang='fr'> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>CALL OF DUTY</title> </head> <body>  </body> </html>

Maintenant je vais créer un titre dans ma page. Ce titre là va être visible. Je vais le placer entre les balises de l'élément body. Pour cela je vais utiliser un élément HTML qu'on appelle un titre de niveau 1. <!DOCTYPE html> <html lang='fr'> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CALL OF DUTY</title> </head> <body>    <h1>BLACK OPS</h1> </body> </html>

Vous pouvez voir ce que ça donne en cliquant sur le lien ci-dessous.

Tester le code

Maintenant je vais coder un lien. Dans ce cas il y a une information à préciser c'est la page vers laquelle le visiteur ira lorsque qu'il cliquera sur le lien. Ici je choisis le site de Call of Duty. J'ai donc besoin de savoir et de noter l'adresse à laquelle il se trouve. Une petite recherche dans un moteur de recherche et je copie l'adresse de ce site dans la barre d'adresse du navigateur soit www.callofduty.com.

Au niveau HTML je vais devoir utiliser un élément pour implanter ce lien. Je vais devoir utiliser l'élément a. Oui a tout court ! 😜. Et je vais devoir placer l'adresse de ce fameux site de Call of Duty dans ce que l'on appelle un attribut.

C'est donc le moment de vous expliquer ce qu'est un attribut. Un attribut fait partie d'un élément HTML. Il lui est ajouté pour apporter une information. Il prend la forme d'un couple ou figure le nom de l'attribut suivi de sa valeur.

Vous avez ci-dessous l'attribut de nom href qu'on appelle entre nous quand on en parle l'attribut href tout simplement. Il prend la valeur http://www.callofduty.com qui est donc l'adresse de la page web où l'internaute va aller lorsqu'il va cliquer sur le lien. Il a fallu ajouter http:// qui est le nom du protocole qui permet de naviguer de lien en lien.

Il a fallu placer cette valeur entre deux caractères particuliers que l'on appelle des doubles quote " (* caractère en dessous du chiffre 3).

Cet attribut se place dans la balise ouvrante de l'élément HTML. Vous pouvez le voir dans le code ci-dessous.

Tester le code

Il faut préciser également que vous pouvez ajouter autant d'attributs que vous en avez le besoin. Si par exemple vous voulez faire en sorte que le visiteur ouvre la page dans un nouvel onglet vous ajoutez l'attribut target et vous lui donnez la valeur _blank. Je l'ai fait ci-dessous.

Pour insérer une image il faut insérer un élément HTML img. Cet élément est structuré d'une manière particulière. Il s'écrit avec une seule balise que l'on appelle une balise auto fermante ou une balise orpheline.

Vous pouvez rencontrer deux types de syntaxe qui sont très proches. La première (qui vient du XHTML et du XML) utilise une balise auto fermante avec une barre oblique / (un slash en anglais) devant le chevron > fermant soit >. La deuxième syntaxe est la syntaxe HTML5. On ne met pas le slash. Utilisez la syntaxe HTML5.

Le nom du fichier image est placé dans l'attribut src.

Toutefois les deux syntaxes sont validées par le validateur HTML5. Et oui vous pouvez faire valider votre code HTML par un validateur. C'est une bonne pratique. Si vous débutez ne soyez pas perturbé par ce petit détails de "barre oblique" notamment si vous lisez du code écrit par des gens qui comme moi traînent de vieilles habitudes d'XHTML 😕.

Maintenant j'insère mon image en utilisant la syntaxe HTML5. Vous avez le code ci-dessous.

Si vous testez le code vous constatez que l'image est derrière le lien et aussi qu'elle est sur la même ligne.

Tester le code

Ce que je veux vous faire remarquer au moins une fois c'est que les éléments HTML apparaissent sur la page web dans le même ordre que celui du fichier HTML. Vous ajoutez un élément en bas du fichier et il apparaît en bas de la page ou à la fin de la dernière ligne. C'est un comportement que l'on peut changer avec du CSS mais ne compliquons pas les choses à ce stade.

Si dans le fichier HTML je fais passer le code du lien derrière celui de l'image, sur l'écran le lien passe derrière l'image. Mais il reste sur la même ligne. Il n'y a pas de retour à la ligne entre les deux éléments. Ceci vient du fait que tous les éléments HTML ne se comportent pas à ce niveau de la même manière.

En fait les deux éléments lien et image appartiennent à un groupe d'éléments que l'on appelle les éléments de type inline. Ce sont des éléments qui se placent les uns à la suite des autres sur une même ligne tant qu'il y a de la place sur cette ligne.

Tester le code

On peut noter qu'entre l'élément h1 et le lien il y a un retour à la ligne sans que l'on ait rien fait de particulier. Pour obtenir un retour à la ligne je vais placer mon lien et mon image dans un élément paragraphe. On dit que l'on encapsule un élément dans un autre.

Je vais obtenir ainsi un retour à la ligne. Ceci vient du fait que l'élément paragraphe appartient à un deuxième groupe d'éléments que l'on appelle les éléments de type block. L'élément h1 appartient lui aussi à ce groupe. Les éléments de type block se placent les uns à la suite des autres. Ils 'ouvrent' une nouvelle ligne ET occupent toute cette ligne.

En général les éléments de type block contiennent des éléments de type inline.

Tester le code

Je crée un titre "moins important" que le titre de la fiche (* moins important par rapport au contenu du document). Pour cela j'utilise toujours un élément h mais de niveau 2. Donc je mets h2.

Tester le code

Je vais mettre en place une structure HTML de type liste à puces. Je place un élément de type ul puis je vais mettre à l'intérieur des éléments li. Je vais utiliser un élément li pour chaque puce de la liste.

Tester le code

Maintenant je m'occupe du tableau. Je place un élément de type table puis je crée une ligne avec un élément de type tr pour 'table row'. Puis dans la ligne je place autant d'éléments de type td pour 'table data' qu'il y a de cellules à créer dans la ligne.

Tester le code

Je termine ma fiche en ajoutant un résumé avec trois paragraphes. J'arrange un petit peu le tableau pour une présentation du code plus condensée.

<!DOCTYPE html>
<html lang='fr'>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<h1>BLACK OPS</h1>
	<p><img src='black-ops.jpg' alt='Fiche du jeu Black Ops'></p>
	<p><a href='https://www.callofduty.com/fr/blackops' target='_blank'>Bande Annonce</a></p>
	<h2>Mode de Jeu</h2>
	<ul>
		<li>Le mode campagne est une histoire à terminer.</li>
		<li>Le mode multijoueur permet de jouer en ligne, en réseau local et avec des amis.</li>
		<li>Le mode formation avancée qui permet de s'entraîner face à l'IA, comme dans le multijoueur.</li>
		<li>Le mode zombie est un mode survie face à des hordes de zombies.</li>
	</ul>
	<h2>Pack de Cartes</h2>  
	<table>
		<tr><td>Décembre 2010</td><td>First Stike</td></tr>
		<tr><td>Mai 2011</td><td>Escalation</td></tr>
		<tr><td>Juin 2011</td><td>Annihilation</td></tr>
	</table>
	
	<h2>Résumé</h2>
	<p>L'opus Black Ops de Call of Duty est un FPS (First-Person Shooter) qui vous plonge dans les année 1968 en pleine période de guerre froide.</p>
	<p>Vous allez vivre les aventures d'un soldat américain de Cuba à la Russie en passant par le Vietnam.</p>
	<p>Vous sentirez monter l'adrénaline dans des situations de combat qui s'enchaîneront dans un scénario digne des grands films hollywoodiens.</p>
</body>
</html>

Si je regarde le rendu visuel du code HTML de ma fiche dans un navigateur je me rends compte qu'il y a déjà une mise en forme de proposée. Par exemple le titre h1 est présenté plus gros que le titre h2. Ils sont tous les deux en gras. Les puces ont déjà une marge de retrait. Le lien a une couleur bleu et si vous le cliquez sa couleur change. On peut en déduire que le navigateur possède déjà quelques styles par défaut.

En fait j'ai ici un rendu visuel proposé par la feuille de style par défaut du navigateur. Il va falloir que je code ma propre feuille de style CSS pour terminer ma fiche et la styler à mon goût.

Débuter en HTML. Coder votre première page en HTML

#1 Présentation de ce que l'on veut faire

#2 Créer le titre de la page

#3 Créer un titre avec HTML

#4 Créer un lien avec HTML

#5 Insérer une image avec HTML

#6 Créer un titre de niveau 2 avec HTML

#7 Créer une liste à puces avec HTML

#8 Créer un tableau avec HTML