Votre guide dans les plaines du far-web

Devenez développeur web

Formations en ligne pour apprendre le développement web


« Donne un poisson à un homme, tu le nourris pour un jour. Apprends lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Initiation HTML

Ce cours fait partie du programme de formation en ligne, vous devez être inscrit pour avoir accès à la totalité du cours.

Généralités

Mis à jour le

Le HTML est un des premiers langages que l'on apprends lorsque l'on veut travailler dans le web. C'est un des plus simples, mais aussi l'un des plus important, pour ne pas dire la clé de voûte de toute application web. Le découvrir et le manipuler est assez aisé, mais pour un novice, il va tout de même y avoir pas mal de choses à intégrer.

Voici quelques conseils pour bien démarrer en HTML :

  • être à l'aise avec l'outils informatique
  • être à
Fin de l'extrait.

Présentation

Mis à jour le

Définition

HTML veux dire HyperText Markup Language, pour "langage de balises hypertexte". Décortiquons un peu cela :

  • langage : le HTML est une forme de langage informatique très simple, donc il mérite cette dénomination. En revanche, le HTML n'est pas un langage de programmation.
  • balise : quand on écrit du HTML, tout est structuré sous forme de balises. Si par exemple on souhaite intégrer une image, on utilis
Fin de l'extrait.

Syntaxe et conventions

Mis à jour le

Dans tous les langages que vous utiliserez, il y a de nombreuses règles - plus ou moins importantes - qui permettent d'écrire un code propre et lisible. C'est un peu comme les règles de ponctuations et de syntaxe en Français.


Laquelle de ces deux phrases préférez-vous lire :

bonjourjesuisunstagiaireendeveloppementwebetjesaispastropcommentecriremoncode

ou bien ?

Bonjour ! Je suis un stagiaire en développement web et je
Fin de l'extrait.

Structuration d'un fichier HTML

Mis à jour le

Voici un exemple de fichier HTML très simple :

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <h1>Exemple de page HTML très simpe</h1>
  <p>Vous trouverez ici quelque
Fin de l'extrait.

Les balises HTML

Mis à jour le (image visible sur la plateforme de formation)Nous allons découvrir quelques balises HTML5 et leur fonctionnement, mais il y en a de très nombreuses à votre disposition.

Vous pouvez voir la structure de base d'une balise HTML dans l'image ci-contre. 

Ce schéma représente vraiment l'i

Fin de l'extrait.

Encodage du jeu de caractère

Mis à jour le
UTF-8
(image visible sur la plateforme de formation) (image visible sur la plateforme de formation)
Fin de l'extrait.

Favicon

Mis à jour le

(image visible sur la plateforme de formation)

Le favicon est la petite icône que vous voyez dans les onglets du navigateur. Elle permet aux internautes de reconnaître votre site en un coup d’œil.

Si vous l'omettez, chaque navigateur va mettre une icône par défaut, partagée avec tous les autres sites. C'est donc un bon

Fin de l'extrait.

Balises liées au SEO

Mis à jour le

Le SEO, c'est une des clés de voûte du web. Pour ceux qui n'en ont jamais entendu parler, le SEO veux dire Search Engine Optimization. Et c'est l'art de bien positionner son site dans les moteurs de recherche afin que ls internautes vous trouvent facilement. Voici quelques balises qui ont attrait au SEO dans le head.

  • <title>Titre de la page</title> : c'est ce que vous voyez dans les onglets de navigations de votre navigateur. C'est auss
Fin de l'extrait.

Chargement de fichiers CSS et Javascript externes

Mis à jour le

(image visible sur la plateforme de formation)

Un des grands rôles de la balise <head>, c'est de charger tous les fichiers CSS et Javascript qui sont nécessaires au bon fonctionnement de votre page web. Nous approfondirons ça dans les cours sur CSS et Javascript, mais voici comment charger des fichiers extérieurs à votre document HTML :

Fin de l'extrait.

Titres

Mis à jour le

Les balises de titre (heading) permettent de représenter les grandes sections d'une page web. Il y a 6 niveaux de titre, le <h1> étant le titre le plus important, jusqu'au <h6>. En plus d'avoir une taille de police différentes, les titres ont une dimension sémantique qui permettra aux robots de mieux comprendre la structure et le sens du contenu de votre page. Un moteur de recherche se basera sur les titres contenus dans votre page pour déterminer le sens général d'un texte

Fin de l'extrait.

Liens hypertexte

Mis à jour le

(image visible sur la plateforme de formation)

Les liens hypertextes sont un élément central du web. C'est grâce à eux que la toile peut se tisser "toute seule", et ça a été un des éléments les plus "disruptif" entre un format papier et un format web. Le lien hypertexte, que tout le monde connait, c'est le fait de pouvoir accéder à une nouve

Fin de l'extrait.

Images

Mis à jour le

Pour intégrer des images à vos pages, c'est très simple, il vous suffit d'utiliser la balise <img>, de lui donner le bon chemin vers le fichier qui correspond à votre image, et le navigateur se charge d'insérer votre fichier image à l'intérieur de votre page.

Comme nous l'avons vu plus haut, voici l'anatomie simple d'une balise image :

(image visible sur la plateforme de formation)

Fin de l'extrait.

Listes

Mis à jour le

Les balises de liste sont très utilisées en HTML. Comme nous l'avons vu avec les autres types de balises, elles permettent :

  1. d'avoir un affichage en cohérence avec ce que l'on souhaite exprimer
  2. de structurer l'information, et de lui donner un sens aux yeux des robots d'explorations

(image visible sur la plateforme de formation)

Fin de l'extrait.

Tableaux

Mis à jour le

Les tableaux HTML permettent de présenter et structurer des informations sous forme de lignes et de colonnes. Les balises de tableaux sont donc un peu plus complexe que les balises standard tel que les titres ou les paragraphes. Il va vous falloir jongler entre différentes balises imbriquées les unes dans les autres pour créer un tableau propre, autant sur le plan technique que sémantique.

(image visible sur la plateforme de formation)

Fin de l'extrait.

Structuration du contenu

Mis à jour le

Une autre grande famille de balises, ce sont les balises de structuration. Elles servent à créer des zones de contenu spécifique dans votre page. Elles vont vous permettre de découper votre site en plusieurs zones réservées à un usage particulier. Si on utilise seulement du HTML, c'est balise sont quasiment invisible par nature. Elles servent seulement à dire "ici c'est mon header, ici c'est mon menu de navigation, etc...".


Les <div> et les <sp

Fin de l'extrait.

Formulaires

Mis à jour le

Les formulaire sont des éléments très importants dans la conception d'un site web. C'est grâce à eux que l'utilisateur va pouvoir interagir avec l'application en saisissant des informations qui vont pouvoir être envoyées au serveur, puis traitées et stockées. Il y a de nombreuses balises permettant de concevoir des formulaires divers et variés, mais elles fonctionnent toutes à peu près de la même manière. En revanche, leur rendu graphique dans le navigateur pourra être très di

Fin de l'extrait.

TP

Mis à jour le

Pour finaliser ce cours sur HTML, voici deux TP à réaliser :