Votre guide dans les plaines du far-web

Formation développeur web


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

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…

~~ 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…
~~ 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

~~ 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 quelques exemple de balises, et la forme général d'un fichier html. Voici…
~~ 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…

~~ 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)

L'encodage du jeu de caractère est un des fondements de l'informatique. Il faudrait voir un cours entier…

~~ 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…

~~ 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…

~~ 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…

~~ 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…

~~ 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…

~~ 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,…

~~ 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
~~ 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…

~~ 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…

~~ 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…

~~ Fin de l'extrait ~~

TP

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