DEVENIR-WEBMASTER.COM Log In
 1
download close

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

Visiter ma chaine Youtube

On va apprendre à coder en HTML et CSS sur un exemple. Je reprends l'exemple de la fiche du jeu vue dans l'INTRODUCTION et qui est légèrement modifiée ici.

# Créer un titre avec HTML close

Je commence par créer le titre de la fiche. C'est l'occasion 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.

Définition d'un élément HTML

Pour le titre je vais utiliser un élément Heading de niveau 1

Code HTML d'un Titre

# Créer un lien avec HTML close

Maintenant je vais coder le 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. Je précise cette information dans ce que l'on appelle un attribut. Ici il s'agit de l'attribut href.

Code HTML d'un Lien

Je veux préciser également que le visiteur ouvrira la page dans un nouvel onglet et pour cela je vais utiliser l'attribut target. Je vais donner la valeur '_blank'.

Structure d'un attribut

Un attribut c'est donc un couple nom de l'attribut et valeur de l'attribut.

Un attribut d'un élément HTML

# Insérer une image avec HTML close

Code HTML d'une Image

Je passe au codage du logo. Ici c'est un cas particulier. Je dois utiliser un élément HTML avec une balise auto fermante.

Une balise autofermante

On se rend compte que le logo est derrière le lien et n'est pas à la bonne place. C'est normal. Les éléments apparaissent sur la page dans le même ordre que celui du code HTML.

On fait passer le code du lien derrière et ça rentre dans l'ordre. Maintenant on se rend compte que les deux éléments l'image et lien se suivent. Il n'y a pas de retour à la ligne. Ici aussi c'est normal car ces deux éléments appartiennent à un groupe d'éléments qu'on appelle de type inline. Ils se placent les uns à la suite des autres dans la ligne.

Je vais encadrer l'image et le lien par un élément paragraphe. Je vais obtenir ainsi un retour à la ligne. C'est normal car l'élément paragraphe appartient à un deuxième groupe d'éléments que l'on appelle les éléments de type block. Ils se placent les uns à la suite des autres en 'ouvrant' une nouvelle ligne.

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

Je crée un titre moins important que le titre de la fiche. Pour cela j'utilise toujours un élément heading mais de niveau 2.

# Créer une liste à puces avec HTML close

Code HTML d'une Liste à Puces

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.

Structure HTML liste à puces

# Créer un tableau avec HTML close

Code HTML d'un Tableau

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 cellule dans la ligne.

Structure HTML de tableau
Structure HTML de tableau avec cellule vide

Je termine ma fiche en ajoutant un résumé avec trois paragraphes.

Si je regarde le rendu visuel du code HTML de ma fiche dans un navigateur j'ai un rendu visuel par défaut proposé par la feuille de style du navigateur. Il va falloir que je passe au CSS pour terminer ma fiche.