• 30 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 23/11/2017

Introduction au HTML

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Comme son nom l’indique, le HTML, ou « HyperText Markup Language », est un langage permettant d’écrire de l’hypertexte pour afficher des pages web. Tout site web a besoin de HTML pour s’afficher. Lorsque l’on crée un site web avec ASP.NET MVC, nous allons avoir besoin d'utiliser du HTML. Il est donc indispensable de comprendre les bases de ce langage, et c’est ce que nous allons voir de manière assez rapide dans ce chapitre. Si vous voulez approfondir un peu ce sujet, n’hésitez pas à vous plonger dans ce cours http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3 sur le site d'OpenClassrooms.

Les balises

Le langage HTML est un langage structuré qui décrit un document grâce à des balises, un peu comme le XML. Les balises sont des valeurs entourées de deux caractères, < et >, qui décrivent le contenu sémantique de la donnée. Par exemple :

<nom>Nicolas</nom>

La balise <nom> est ce qu’on appelle une balise ouvrante, cela signifie que ce qui se trouve après (en l’occurrence la chaîne de caractères « Nicolas ») fait partie de cette balise jusqu’à ce que l’on rencontre la balise fermante </nom> qui est comme la balise ouvrante à l’exception du / précédant le nom de la balise.

Le HTML est un fichier facile à lire par nous autres humains. On en déduit assez facilement que le fichier contient la chaîne « Nicolas » et qu’il contient un nom (contenu sémantique).

Une balise peut contenir des attributs permettant de donner des informations sur la donnée. Les attributs sont entourés de guillemets " et " et font partie de la balise. Par exemple :

<client nom="Nicolas" age="30"></client>

Ici, la balise client possède un attribut « nom » ayant la valeur « Nicolas » et un attribut « age » ayant la valeur « 30 ». Encore une fois, c’est très facile à lire pour un humain.

Il est possible que la balise n’ait pas de valeur, comme c’est le cas dans l’exemple ci-dessus. On peut alors remplacer la balise ouvrante et la balise fermante par cet équivalent :

<client nom="Nicolas" age="30"/>

Enfin, il est important de noter que le HTML peut imbriquer ses balises, ce qui nous permet d’avoir une hiérarchie de données. Par exemple nous pourrons avoir :

<listesDesClient>
  <client type="Particulier">
    <nom>Nicolas</nom>
    <age>30</age>
  </client>
  <client type="Professionel">
    <nom>Jérémie</nom>
    <age>40</age>
  </client>
</listesDesClient>

On voit tout de suite que le fichier décrit une liste de deux clients. Nous en avons un qui est un particulier, qui s’appelle Nicolas et qui a 30 ans alors que l’autre est un professionnel, nommé Jérémie et qui a 40 ans.

Sauf qu’on ne met pas n’importe quoi dans ces balises. J’ai inventé les balises <nom>, <client>, <age> juste pour vous faire comprendre le principe de fonctionnement d’une balise, mais en réalité HTML possède une série de balises pré-définies pour décrire la structure d’un document. Nous allons devoir apprendre plusieurs noms de balises afin de décrire celui-ci comme nous le souhaitons. Par exemple, la balise <h1> correspond à un titre de niveau 1. Il existe de nombreuses autres balises qui permettent de décrire le contenu de la page, comme une balise permettant d’afficher un paragraphe ( <p>  ), un saut de ligne ( <br/>  ), etc.

Pour comprendre le HTML, le plus simple est de le pratiquer. Et nous allons utiliser Visual Studio pour cela. Allez dans le menu Fichier et choisissez Nouveau fichier (ou le raccourci Ctrl+N), nous pouvons créer un nouveau fichier HTML :

Créer un nouveau fichier HTML
Créer un nouveau fichier HTML

Un fichier est généré contenant la structure de base du fichier HTML :

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

</body>
</html>

Nous pouvons voir ici plusieurs balises. Je passe volontairement sur la première ligne qui est le doctype et qui permet d’indiquer le type du document, ici du HTML. Il peut être beaucoup plus complexe que ça, mais ici il ne nous intéresse pas.

Il faut remarquer qu’il y a une balise ouvrante <html>  juste en dessous et sa correspondante fermante tout en bas du document. Il s’agit du nœud racine du document. Tout ce qui fait partie du document devra se trouver à l’intérieur de ces balises. Cette balise en contient deux autres : <head>  et <body> . Dans la balise <head>  nous devrons mettre tout ce qui est en rapport avec l’entête du document, notamment le titre grâce à la balise <title> . Vous pouvez par exemple mettre le titre suivant :

<title>Ma première page HTML</title>

Dans la balise <body>  nous pourrons mettre le contenu du document. Mettons-y par exemple un titre de niveau 1, avec :

<body>
    <h1>Hello HTML</h1>
</body>

Enregistrez le fichier (Ctrl+S) et donnez-lui un nom, par exemple « hello.html ». Et maintenant, affichons notre page HTML dans le navigateur. Pour cela, vous pouvez ouvrir votre navigateur et aller chercher le fichier HTML enregistré ou bien faire un clic-droit à l’intérieur du fichier HTML et choisir dans le menu déroulant : Afficher dans le navigateur.

Nous obtenons :

Ma première page HTML
Ma première page HTML

Waouh la belle page HTML !

Il existe plein d’autres balises et nous allons en voir plusieurs dans ce chapitre, mais pas toutes. Sinon ça ne serait pas très amusant, autant ouvrir le dictionnaire. :p On est là pour apprendre ASP.NET MVC que diable.

Mais je sais que vous êtes impatient de découvrir quelques nouvelles balises, alors agrémentons notre fichier HTML des balises suivantes :

<body>
    <h1>Hello HTML</h1>
    <p>Le HTML c'est quand même vachement bien. <br /> Nous venons de découvrir les balises : 
    </p>
    <ul>
        <li>&lt;p&gt;</li>
        <li>&lt;br /&gt;</li>
        <li>&lt;ul&gt; et &lt;li&gt;</li>
    </ul>
</body>

Ceci donnera :

Des balises HTML supplémentaires
Des balises HTML supplémentaires

Sans rentrer dans le détail, la balise :

  •  <p>  permet d’indiquer un paragraphe

  • <br />  permet de passer à la ligne

  • <ul>  permet de démarrer une liste de puces

  • <li>  permet d’écrire une puce

Remarquons qu’étant composé de balises, le HTML ne peut pas afficher un < ou un > simplement, car sinon il pourrait croire qu’il s’agit de balises HTML. Pour afficher ces deux caractères sur la page, il faut donc les remplacer par &lt; et &gt;. On dit que ces caractères sont encodés. D’autres caractères ont besoin d’être encodés, c’est le cas par exemple du symbole & qui s’écrira &amp;. 

Comme nous l'avons vu un peu plus tôt, Il est possible de définir des attributs dans les balises. Cela permet par exemple d’ajouter du style. Par exemple, pour avoir un titre de niveau 2 de couleur rouge et centré, nous pourrons écrire le code HTML suivant :

 

<h2 style="color:red;text-align:center">Je suis tout rouge et au centre de la page</h2>

 

Ce qui donnera :

Du HTML avec du style
Du HTML avec du style

Nous reviendrons un peu plus loin sur les styles, mais sachez aussi que les attributs vont nous permettre d’identifier nos balises grâce à un nom ou grâce à un identifiant. Par exemple, cette balise aura l’identifiant titre1  :

 

<h1 id="titre1">Hello HTML</h1>

Nous verrons un peu plus loin à quoi vont nous servir ces identifiants. Vous aurez sûrement remarqué que les valeurs des attributs sont placées entre guillemets.

Les liens entre pages

Une des grandes forces du HTML est qu'il permet naviguer entre des pages web. Prenons un site comme celui d'OpenClassrooms par exemple. Vous arrivez sur la page d’accueil puis vous cliquez dans le menu pour accéder aux cours, ou aux forums… Vous pouvez naviguer dans les différents sujets ou même entre les différentes pages d’un même sujet. Tout cela est possible grâce à une balise, la balise <a> .

Pour comprendre comment cette balise fonctionne, Modifiez votre page Hello.html comme ceci :

<body>
    <h1 id="titre1">Hello HTML</h1>
    <a href="page2.html">Aller voir la page 2</a>
</body>

Puis créez une nouvelle page que vous appellere, vous l'avez deviné, page2.html qui contiendra par exemple :

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>Bienvenue sur la page 2...</p>
</body>
</html>

Si vous affichez hello.html, vous pourrez voir un lien vers la page 2. En cliquant sur ce lien, vous accéderez à cette fameuse page 2 :

Les liens entre les pages
Les liens entre les pages

Ceci est possible grâce à la balise <a>  et à son attribut href  qui permet d’indiquer l’emplacement (relatif ou absolu) d’une autre page. Si vous aviez enregistré la page 2 dans un sous répertoire, vous auriez pu l’afficher grâce à :

<a href="sousrepertoire/page2.html">Aller voir la page 2</a>

Remarquez que vous pouvez aussi faire des liens vers des autres sites web, par exemple pour faire un lien vers le site d'OpenClassrooms vous pourrez faire :

<a href="http://fr.openclassrooms.com/">Découvrez plein de cours...</a>

N’oubliez pas que vous pouvez également passer des paramètres dans une URL, par exemple :

<a href="page2.html?page=hello">Aller voir la page 2</a>

Ici, je mets dans le paramètre « page » la valeur « hello », ce qui me permettra par exemple de savoir que l’utilisateur est arrivé sur la page 2 à partir de la page hello. 

Bon ok, en fait, nous ne savons pas encore exploiter ces paramètres… Mais ça va venir. ^^

Les formulaires

Nous avons déjà parlé des formulaires un peu plus haut. Rappelez-vous, le formulaire d’inscription au site d'OpenClassrooms :

Le formulaire d'inscription
Le formulaire d'inscription

Sous ce terme formulaire on désigne plusieurs choses :

  • Les contrôles faisant partie du formulaire

  • Le formulaire en lui-même

Les contrôles, ce sont les zones à remplir. Vous en voyez ici plusieurs :

  • Une zone de texte pour le nom d’utilisateur

  • Une zone de texte pour l’adresse email

  • Deux zones de texte où les caractères sont masqués pour les mots de passes

  • Une autre zone de texte pour le captcha

  • Une case à cocher pour accepter les conditions d’utilisation du site

  • Un bouton permettant de valider le formulaire

Le formulaire lui est invisible, c’est lui qui permet d’envoyer les informations au site d'OpenClassrooms afin de créer un nouveau compte.

Alors, concrètement, un formulaire c’est une balise <form>  qui contient une méthode pour envoyer les paramètres (méthode GET ou POST) et l’adresse d’un script (ou d’une action) qui sera appelé avec ces paramètres et vers lequel sera redirigé l’utilisateur.

Un script est un bout de code dans un langage (par exemple C# pour ASP.NET ou pourquoi pas PHP) qui est exécuté par le serveur web, fait des actions, et renvoie du HTML pour être interprété par les navigateurs Internet. C’est la base des sites dynamiques.

Voici donc le balisage permettant de créer un formulaire :

<form action="page2.html" method="get">
</form>

Ici dans l’action, j’ai mis le nom de la page 2 que nous avons créée un peu plus haut, mais en général il s’agira d’un script, sauf que nous ne savons pas encore comment faire. :) À noter que je précise également la méthode à utiliser : ici GET ; mais cela peut également être la méthode POST, avec :

<form action="page2.html" method="post">
</form>

Un formulaire doit être soumis, sinon il ne sert à rien. Pour ce faire, nous allons rajouter un bouton dont le rôle sera justement de s’occuper de soumettre le formulaire à l’action renseignée suivant la méthode fournie. Pour créer un tel bouton, on utilise la balise <input>  dont le type sera submit  :

<form action="page2.html" method="get">
    <input type="submit" value="Envoyer le formulaire" />
</form>

Vous pouvez voir le fameux bouton d'envoi :

Le bouton de soumission de formulaire
Le bouton d'envoi de formulaire

Remarquez que si vous cliquez dessus, alors vous serez envoyé vers la page 2 avec les valeurs du formulaire. Sauf qu’il n’y a aucune valeur ici, normal nous n’avons pas mis de champs à remplir. :-°

Nous avons à notre disposition toute une série de contrôles HTML qui nous permettent de demander à l’utilisateur d’effectuer des saisies. Voici par exemple du HTML pour un formulaire classique :

<form action="page2.html" method="get">
    <fieldset>
        <legend>Informations</legend>
        <label>Prénom :</label>
        <input id="prenom" type="text" />
            
        <br />
        <label>Sexe :</label>
        <select id="sexe">
            <option value="H">Homme</option>
            <option value="F">Femme</option>
        </select>

        <br />
        <label>Mot de passe :</label>
        <input id="mdp" type="password" />

            <br />
        <label>Avez-vous des enfants :</label>
        <input id="enfants" type="checkbox" />

            <br />
        <label>Dites quelque chose sur vous</label>
        <textarea id="apropos" style="height:50px"></textarea>
    </fieldset>
    <input type="submit" value="Envoyer le formulaire" />
</form>

Si nous l’affichons (en ouvrant la page html correspondante dans un navigateur), nous obtenons :

Les formulaires HTML
Les formulaires HTML

Nous pouvons y saisir des valeurs comme je l’ai fait. Alors, je n’ai pas illustré tous les contrôles pour pas que ça soit trop long, mais de haut en bas nous avons :

  • Une zone de texte grâce à la balise <input>  de type "text "

  • Une liste déroulante, avec la balise <select>  et ses sous-balises <option> 

  • Une zone de texte avec les caractères masqués, avec la balise <input>  de type "password "

  • Une case à cocher grâce à la balise <input>  de type "checkbox "

  • Une zone de texte longue avec la balise <textarea>

  • Nous retrouvons également le bouton de soumission grâce à la balise <input>  de type "submit "

Notez qu’à chaque fois j’ai donné un id aux balises. Ceci est indispensable pour qu’un éventuel script puisse exploiter les données envoyées. Sauf que là, une page HTML n’est pas capable d’exploiter ces informations. Il nous faut un script qui puisse intervenir du coté du serveur. Nous verrons comment récupérer ces données grâce à ASP.NET MVC plus tard.

Au passage, vous avez pu voir quelques autres balises classiques, comme la balise <legend>  ou la balise <label>  ou encore la balise <fieldset>  qui sont particulièrement adaptées à la mise en page de formulaires.

Un peu de style avec le CSS

Le style c’est ce qui permet de mettre en forme notre HTML. Nous en avons déjà aperçu un bout plus haut lorsque nous avons coloré un titre en rouge :

<h2 style="color:red;text-align:center">Je suis tout rouge et au centre de la page</h2>

On utilise la propriété style pour indiquer les éléments de style d’une balise. Il y a beaucoup d’éléments de style possibles. Ici, je donne au titre la couleur en rouge en attribuant à « color  » la valeur « red  ». De même, pour centrer le texte, il suffit d'attribuer la valeur « center  » à l’élément de style « text-align  ».

Positionner les styles de cette façon est un peu contraignant, surtout si on veut changer le style de plusieurs éléments d'un formulaire à la fois, comme la police de texte par exemple. Vous vous voyez écrire tout ça dans notre précédent formulaire ?

[…]
<label style="font-family:'Comic Sans MS';font-style:italic;color:darkblue;">Prénom :</label>
[…]
<label style="font-family:'Comic Sans MS';font-style:italic;color:darkblue;">Sexe :</label>
[…]
<label style="font-family:'Comic Sans MS';font-style:italic;color:darkblue;">Mot de passe :</label>
[…]
<label style="font-family:'Comic Sans MS';font-style:italic;color:darkblue;">Avez-vous des enfants :</label>
[…]
<label style="font-family:'Comic Sans MS';font-style:italic;color:darkblue;">Avez-vous des enfants :</label>
[…]

Même si je suis sûr que le copier-coller ne vous fait pas peur, cela devient un peu casse-pied si finalement plus tard la couleur ne vous plaît plus et que vous voulez la changer à nouveau… De plus, cela alourdit grandement le code HTML et augmente la taille finale de la page.

La solution : le CSS.

Et si je vous disais qu’on peut remplacer tout ce qu’on a écrit plus haut par :

[…]
<label class="styleformulaire">Prénom :</label>
[…]
<label class="styleformulaire">Sexe :</label>
[…]
<label class="styleformulaire">Mot de passe :</label>
[…]
<label class="styleformulaire">Avez-vous des enfants :</label>
[…]
<label class="styleformulaire">Avez-vous des enfants :</label>
[…]

C’est quand même beaucoup moins verbeux !

Pour cela, on utilise donc l'attribut class que l’on lie à un style, que j’ai nommé styleformulaire . Ce style se définit dans la balise <head>  de notre page :

<head>
    <title>Ma première page HTML</title>
    <style type="text/css">
        .styleformulaire {
            font-family:'Comic Sans MS';
            font-style:italic;
            color:darkblue;
        }
    </style>
</head>

C’est la balise <style>  de type "text/css"  qui va nous permettre de déclarer une classe de style. Ainsi le style styleformulaire sera décrit à un seul endroit, avec sa police particulière, écrite en italique et de couleur darkblue… Et si on doit changer la couleur, et bien cela se fait en une seule fois, en changeant les données à cet endroit. Pratique. ^^

Notez le point (.) qui précède le nom du style, cela permet de dire qu’il s’agit d’un style utilisable dans un attribut class. 

Quoi ? On peut encore faire plus court ? 

Dans notre cas, oui ! En effet, nous avons appliqué ce style à toutes les balises <label> . Vu qu’il n’y en a pas d’autres, il suffit de dire à la page HTML : « applique ce style à toutes les
balises <label>  ». Et cela, ça se fait comme ça en CSS :

<style type="text/css">
    label {
        font-family:'Comic Sans MS';
        font-style:italic;
        color:darkblue;
    }
</style>

On utilise le nom de la balise suivi des styles à appliquer.

Ainsi, nos labels redeviennent tout simples dans la page HTML :

[…]
<label>Prénom :</label>
[…]
<label>Sexe :</label>
[…]
<label>Mot de passe :</label>
[…]
<label>Avez-vous des enfants :</label>
[…]
<label>Avez-vous des enfants :</label>
[…]

Remarquez qu’on peut également appliquer un style à une balise grâce à son id. Rappelez-vous notre balise <textarea>  :

<textarea id="apropos" style="height:50px"></textarea>

Ici, j'ai fixé sa hauteur directement dans son attribut style . Mais j’aurais très bien pu définir cette hauteur au début dans la balise <style>  de type text/css  :

<style type="text/css">
    label {
        font-family:'Comic Sans MS';
        font-style:italic;
        color:darkblue;
    }
    #apropos {
        height:50px;
    }
</style>

C’est le # qui nous permet d’indiquer l’identifiant de la balise et de positionner son style. La balise <textarea>  redevient simplement :

<textarea id="apropos"></textarea>

Et voilà pour ce tour vite fait des styles. Sachez que les styles peuvent se mettre dans un fichier à part également afin d’être réutilisables entre plusieurs pages. 

Le JavaScript

On pourrait faire un cours entier sur JavaScript. J’en parle très très très rapidement promis, juste pour vous dire qu’il s’agit d’un langage de programmation qui s’utilise dans une page HTML et qui est exécuté par le navigateur.

Il peut nous servir à ajouter de l’interactivité à nos pages. Un des exemples classiques consiste à valider les données d'un formulaire avant de l'envoyer.

Dans notre formulaire d’inscription, il est inutile de soumettre le formulaire au serveur s’il manque un des champs obligatoires. Ou bien, imaginons qu’il y ait besoin de saisir un email, le JavaScript peut nous servir à vérifier que cet email a bien le bon format avant d’envoyer le formulaire.

Pour déclarer du JavaScript, on utilise la balise <script>  de type text/javascript . Celle-ci se définit dans la balise <head> , comme pour les feuilles de style. On pourra y créer des méthodes (dites « function  »), par exemple ici je vais créer une simple méthode qui me permettra de vérifier qu’un prénom est bien saisi :

<head>
    <title>Ma première page HTML</title>
    <script type="text/javascript">
        function VerifierFormulaire() {
            if (document.getElementById("prenom").value == "") {
                alert("Veuillez saisir un prénom !");
                return false;
            }
            return true;
        }
    </script>
    …
</head>

J’accède ici à la valeur du prénom grâce à la méthode getElementById  et grâce à sa propriété value. Si la valeur est vide, alors j’affiche un petit message et je dis que ce n’est pas valide.

Cette méthode JavaScript pourra être appelée lorsque le visiteur clique sur le bouton de soumission :

<input type="submit" value="Envoyer le formulaire" onclick="return VerifierFormulaire()" />

Ainsi, s'il n'a pas précisé son prénom, un message s'affichera et le formulaire ne sera pas envoyé :

Message d'alerte Javascript
Message d'alerte JavaScript

Allez, je m’arrête là pour le JavaScript. On peut faire énormément de choses, notamment avec des bibliothèques tierces comme jQuery, mais le but ici était simplement de l’introduire histoire que tout le monde sache de quoi on parle.

Dans ce cours, le JavaScript nous permettra de valider des données de formulaires envoyées par les visiteurs (coté client) mais nous permettra également de faire de l’AJAX. L’AJAX c’est tout ce qui permet de recharger des bouts de pages sans avoir besoin de recharger la totalité de la page. Nous verrons à la fin de ce cours de quoi il s’agit. 

En résumé

  • Le HTML est un langage utilisant des balises permettant de décrire la structure d’une page web et de l’afficher.

  • Le HTML possède de nombreux contrôles qui sont notamment utilisés pour la saisie de données dans des formulaires.

  • En plus du langage HTML, les pages web que nous allons créer dans ce cours contiendront du CSS, langage permettant de modifier le style des pages, et du JavaScript, langage permettant d’ajouter de l’interactivité à ces pages.

 Conclusion générale de la partie

Voilà pour cette première partie d’introduction. Nous avons revu comment fonctionnent les sites web en rappelant notamment ce qu’est un serveur web, quels styles de requêtes pouvaient être faites par un navigateur afin d’afficher des pages HTML... Nous avons également vu la logique et les outils que propose le framework ASP.NET MVC pour créer un site web. Enfin, nous avons vu les bases de HTML, CSS et JavaScript, langages du web qui nous seront indispensables tout au long de ce cours sur ASP.NET MVC. Ces éléments sont traités rapidement, aussi si vous avez besoin d’approfondir tout ceci, n’hésitez pas à consulter d’autres cours plus poussés sur le sujet, comme ce cours sur le site d'OpenClassrooms http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3.

Maintenant que nous avons revu nos bases web et installé nos outils de développement, place à l’apprentissage d’ASP.NET MVC pour devenir un expert en création de site. ;)

Exemple de certificat de réussite
Exemple de certificat de réussite