Support de cours HTML

Le HTML est l'épine dorsale d'une page Web. Dans ce module, nous allons voir comment créer une structure solide et pertinente pour une page Web.

Points clés à retenir

  • Les élèves comprennent la structure des fichiers HTML.
  • Les élèves savent utiliser les tags courants pour créer une page Web.

Qu'est-ce que le HTML ?

HTML est l'abréviation de HyperText Markup Language. Il s'agit d'un code que nous utilisons pour :

  • créer des documents stockés sur le World Wide Web et affichés dans un navigateur.
  • fournir une structure de base pour notre page Web (le squelette de la page Web).
  • assurer le chargement correct du texte et des images pour que notre navigateur puisse les afficher.

Quand utilisons-nous le langage HTML ?

Chaque page Web que vous consultez sur le World Wide Web est écrite en code HTML. Boutons, images, formulaires, sections de texte… tous ces éléments sont créés avec HTML.

Si nous considérons notre page Web comme un corps humain, le HTML en est le squelette. Nous pouvons ajouter de la peau et des vêtements au corps à l'aide du code CSS, mais seulement une fois que nous avons mis en place cette structure squelettique.

HTML en action

Les éléments sont au cœur du langage HTML. Les éléments sont créés avec des balises.

La plupart des éléments ont une balise ouvrante et une balise fermante :

<!-- opening tag -->
<p>

<!-- closing tag -->
</p>

Le contenu (texte ou même d'autres éléments HTML) que vous souhaitez voir sur la page Web peut être placé entre ces balises, un peu comme les couches d'un sandwich.

<p>The content that you write here will be seen on the web page</p>

<section>
  <p>This text is inside a paragraph within a section.</p>
</section>

Certains contenus HTML sont créés avec des balises autofermantes qui ne nécessitent pas de balise de fermeture supplémentaire :

<img />
<link />

Cette seule balise suffit, car le rôle de cet élément est de réserver une place dans votre document. Contrairement à la plupart des autres éléments HTML, il n'est pas possible d'imbriquer d'autres éléments ou informations dans ces éléments à fermeture automatique.

Composantes d'un élément HTML

Exemple HTML

Ce code s'afficherait dans un navigateur et ressemblerait à l'image ci-dessous.

Ce code…

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML Example</title>
</head>
<body>
  <h1>My Day In The Garden</h1>
  <section>
    <h2>Flora</h2>
    <p>I spent the morning drawing some of the daffodils that
    are inbloom.</p>
    <p>I picked a few tulips to put in a vase in the dining
    room.</p>
  </section>
  <section>
    <h2>Fauna</h2>
    <p>Today I spotted that hummingbird again, buzzing around
    the newly blooming tree.</p>
    <img
    src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
    alt="hummingbird"/>
  </section>
</body>

... Makes This Web Page

Référence HTML

Encadrement

Contexte et objectif

HTML signifie Hyper Text Markup Language. Il s'agit d'un moyen de donner une signification structurelle au texte. Il permet aux ordinateurs et aux programmeurs de déterminer facilement l'objectif d'un bloc de texte.

Considérez le HTML comme le squelette d'une page Web. Il fournit la structure et le contenu, tandis que JavaScript et CSS fournissent l'interactivité et le style.

Objectifs de la formation

Les élèves pourront :

  • créer un fichier HTML et l'ouvrir dans leur éditeur et leur navigateur ;
  • configurer un fichier HTML avec la structure appropriée ;
  • lister et utiliser des balises courantes pour ajouter de la structure et du contenu à leur site Web ;

Premiers pas

Cadrage et objectif de la section

  • Le code HTML est écrit dans des fichiers portant l'extension .html.
  • Vous pouvez donner à vos fichiers HTML le nom de votre choix. Toutefois, index.html est le nom le plus couramment utilisé pour la page de destination, sauf si le développeur a une raison de configurer le serveur autrement.
# creating an html file on the command line
touch index.html
 
# opening your html file in your browser
open index.html

Mini-défis

  1. Créez trois fichiers HTML supplémentaires avec les noms de votre choix.
  2. Ouvrez l'un des fichiers dans votre éditeur de texte et votre navigateur.

Structure d'une page HTML

Cadrage et objectif de la section

Un document HTML doit toujours commencer par la même structure :

  • La balise DOCTYPE est spéciale et ne se ferme pas. C'est également le seul tag qui peut contenir des valeurs non alphanumériques (lettres/chiffres).
  • Le <head> contient des informations sur votre site Web, mais pas le contenu qui s'affichera sur la page.
  • <body> contient tout le contenu de votre page qui s'affichera à l'écran.
  • Les balises que vous utiliserez pour créer la structure de votre page doivent être placées entre les balises <body>.
  • Entre les balises d'ouverture et de fermeture, nous insérons le texte ou le "contenu" de l'élément. Le résultat final se présente comme suit : <example-tag>Content Goes in here</example-tag>. Les balises peuvent également être placées dans d'autres balises.
  • Notez que lorsque vous placez une balise à l'intérieur d'une autre balise, vous devez indenter la nouvelle balise pour indiquer qu'il s'agit d'un enfant de sa balise parente.

Vocabulaire

  • Éléments : éléments (comme des images, des paragraphes et des titres) créés avec du code HTML.
  • Les tags sont des éléments de code qui indiquent où commencent et où se terminent certains éléments.
  • child : éléments contenus DANS d'autres éléments.
  • parent : éléments qui CONTIENNENT d'autres éléments.

Exemples HTML

Remarque  : L'exemple suivant est fourni à titre de référence. Vous n'avez pas besoin de tout comprendre tout de suite, mais il est utile de voir à quoi peut ressembler un code HTML bien mis en forme.

<!-- Standard tag setup of an HTML document  -->
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my
    interests.</p>
  </section>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>
 
<!-- Nested elements  -->
<section>
  <p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->

Mini-défis

  1. Ouvrez l'un des fichiers que vous avez créés et ajoutez la structure de balise HTML de base.
  2. Configurez le corps HTML pour afficher votre arbre généalogique (ou celui d'une autre personne). Utilisez une balise section pour contenir un groupe familial. Utilisez une balise p pour contenir un membre de la famille. Les familles sont complexes, mais voici un exemple :
<section>Jetson Family
  <div>George and Jane
    <p>Judy</p>
    <p>Elroy</p>
  </div>
  <p>Rosie the robot</p>
  <p>Astro the dog</p>
</section>

<!-- In this example, Judy and Elroy are the children of Jane and George. -->

Tags communs

Cadrage et objectif de la section

En général, nous ne créons pas nos propres types d'éléments. Il existe plutôt un ensemble d'éléments prédéfinis auxquels des fonctionnalités sont déjà associées.

Consultez la référence HTML pour obtenir des exemples de blocs de code.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Practice Website</title>
</head>
<body>
  <h1>My first website</h1>
  <br>
  <img
  src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
  alt="kitten with blue background">
  <hr>
  <section>
    <h2>Information about me</h2>
    <p>I am coding out my first website. This is a paragraph
    that I would write with information about my interests.</p>
    <h3>My favorite websites</h3>
      <ul>
        <li><a href="www.google.com">Google</a></li>
      </ul>
    <h3>My favorite books</h3>
      <section>
        <h4>Non-Fiction</h4>
        <ol>
          <li>Eloquent Javascript</li>
        </ol>
      </section>
      <section>
        <h4>Fiction</h4>
        <ol>
          <li>Hitchhiker's Guide to the Galaxy</li>
        </ol>
      </section>
  </section>
  <hr>
  <section>
    <h2>Things that I've learned in class</h2>
    <ul>
      <li>Command Line</li>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </section>
</body>

Mini-défis

  1. Réviser tout le contenu ci-dessus pour refléter VOS centres d'intérêt.
  2. Dans l'un des fichiers HTML vides que vous avez créés au début de la leçon, faites comme si vous prépariez un article de presse avec un titre, des titres et des sous-titres (vous ne trouvez pas de contenu ? Raconte une journée de voyage. Pensez aux petits voyages que vous avez effectués, aux lieux que vous avez visités, aux plats que vous avez mangés.
  3. Utilisez les balises appropriées et ajoutez du contenu pour que votre article d'actualité s'affiche sur votre site Web.
  4. Vérifiez que votre contenu s'affiche dans votre navigateur.
  5. DÉPASSEMENT : créez un formulaire que les utilisateurs peuvent remplir pour vous envoyer un commentaire sur votre article. Bien que cela ne fonctionne pas encore (nous ne l'avons pas encore connecté à JavaScript), la création de ce formulaire en HTML peut nous montrer la première étape de la création d'un formulaire fonctionnel.

Contexte

Le HTML est le langage du contenu sur le World Wide Web.

Vous utiliserez la ligne de commande pour accéder à vos fichiers HTML et les ouvrir. Vos fichiers HTML seront augmentés avec des styles CSS et un comportement écrit à l'aide de scripts JavaScript composés de diverses fonctions. Les fichiers HTML seront également des modèles utilisés par Google App Engine et remplis à partir d'une base de données.

HTML en action

Premiers pas avec HTML

Le code HTML est écrit dans des fichiers portant l'extension .html.

Afficher votre page

Pour prévisualiser un fichier HTML sur un Mac : dans la ligne de commande, accédez au dossier contenant votre page HTML et saisissez open filename, en remplaçant "filename" par le nom de votre fichier HTML.

Syntaxe générale

<tag>
  Content
</tag>

Les éléments sont imbriqués

Les éléments HTML peuvent être placés à l'intérieur d'autres éléments :

 <parent>
    <child>
      This content is inside of the child tag, which is inside of
      the parent tag. Keep an eye on indentation to see which is
      the parent and which is the child!
    </child>
  </parent>

Structure d'une page HTML

Chaque page Web possède une structure de base identique. Elle se présente comme suit :

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  • Le <head> contient des informations sur votre site Web, mais pas le contenu qui s'affichera sur la page (considérez-le comme le "cerveau" de votre page Web).
  • <body> contient tout le contenu de votre page qui s'affichera à l'écran.

Éléments courants

Utilisez ces éléments courants à l'intérieur des balises <body> et </body> pour ajouter du contenu à une page.

Paragraphe

Pour créer un paragraphe, utilisez les balises d'ouverture et de fermeture p :

<p>
  This is a paragraph about how great polar bears are. Aren't they just the best?
</p>

Commentaire

Utilisez des commentaires pour rendre votre code plus lisible sans affecter le code HTML final.

<!-- This is a comment. It lives in the code as a note to yourself or
  to other developers, but is hidden when the HTML is rendered in the
  browser. -->

Titres

<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Générique <div>

<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>

Listes

Les listes d'éléments de liste, <li>, sont encapsulées avec une balise de liste non ordonnée, <ul>, ou une balise de liste ordonnée, <ol>.

<!-- An unordered list - this will default to a bulleted list. -->
<ul>
  <li>first list item</li>
  <li>second list item</li>
</ul>
 
<!-- An ordered list - this will default to a numbered list. -->
<ol>
  <li>first list item</li>
  <li>second list item</li>
</ol>

Image

La balise <img> nécessite de spécifier l'adresse de l'image à l'aide de l'attribut src. L'attribut facultatif alt est utilisé pour l'accessibilité, y compris les lecteurs d'écran.

<!-- Image hosted elsewhere on the web -->
<img
 src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
 alt="kitten with blue background">

<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">

Pour un lien hypertexte, la balise <a> nécessite de spécifier l'adresse de la destination du lien hypertexte à l'aide de l'attribut href.

<!-- External link  -->
<a href="https://www.google.com"></a>

<!-- Local link -->
<a href="footer.html"></a>

Règle horizontale

<!-- This self-closing tag creates a line across your web page. -->
<hr>

Pause

<!-- This self-closing tag creates a line break between elements. -->
<br>

Formulaire

Un <form> permet de collecter des informations auprès d'un utilisateur. Pour qu'un <form> fonctionne, il doit envoyer les données qu'il collecte quelque part pour qu'elles soient traitées ou gérées. Par conséquent, <form> nécessite souvent des attributs supplémentaires :

  • action : destination des données du formulaire lorsqu'il est envoyé
  • method : indique si les données doivent être traitées à l'aide d'une requête de type GET ou POST.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">

</form>

Entrée

<input> est l'élément utilisé par un <form> pour collecter des informations.

Un élément <input> comporte généralement un attribut name utilisé par les bases de données pour identifier le champ auquel appartiennent les données envoyées.

<form>
    <!-- a text box with the helper text "Full Name" -->
    <input type="text" name="fullName" placeholder="Full Name">
</form>

L'élément <input> est très polyvalent : en spécifiant l'attribut type, il peut être affiché sous forme de champ de texte, de sélecteur de date de type calendrier, de bouton radio, de menu déroulant, etc. Pour obtenir une liste plus complète, vous pouvez consulter de la documentation externe.

Conseils et astuces

  • Pour découvrir les balises HTML disponibles, inspectez le code des pages Web pour voir quelles balises d'autres développeurs ont utilisées pour ajouter un élément à une page Web.
  • Si vous ne trouvez pas ce que vous souhaitez ajouter, consultez la documentation pour les développeurs. Voici quelques listes de tous les éléments HTML possibles : https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/.
  • Lorsque vous écrivez du code HTML, pour les éléments qui nécessitent une balise d'ouverture et de fermeture, il est préférable d'ouvrir et de fermer la balise avant d'ajouter du contenu entre les balises. Vous éviterez ainsi de vous retrouver avec des balises orphelines.
  • Pour mieux visualiser la nature imbriquée des éléments HTML dans votre code, mettez en retrait les éléments qui se trouvent à l'intérieur d'autres éléments. Cela vous aidera à reconnaître rapidement la structure de votre contenu HTML.
  • Utilisez beaucoup de commentaires ! Ces informations vous aideront à résoudre les problèmes liés à votre code et à aider les autres lorsque vous leur demanderez de l'examiner.
  • Des ressources sur le Web, comme html5boilerplate.com, peuvent vous aider à commencer rapidement à écrire du code HTML.

Récapitulatif des bonnes pratiques

  • Les informations sur une page Web sont placées dans l'élément <head> d'un document HTML : titre, métadonnées, liens vers les styles, etc.
  • Les informations sur une page Web se trouvent dans le <body> d'un document HTML.
  • Les développeurs peuvent utiliser de nombreux éléments pour créer le contenu d'un document HTML, y compris <p>, <h1>-<h6>, <div>, <li>, <img>, <a>, <hr>, <br>, <!-- -->, etc.
  • Certains éléments nécessitent une balise d'ouverture et une balise de fermeture : <p></p>.
  • D'autres éléments sont autofermants et ne nécessitent donc qu'une balise d'ouverture : <img>.
  • Les balises peuvent inclure des attributs (src, alt, id, etc.) qui fournissent plus d'informations sur le comportement d'un élément : <img src="filename.png" alt="description">.
  • Les commentaires, <!-- -->, fournissent des notes aux développeurs qui sont utiles pour comprendre le rôle des différentes sections d'une page Web.
  • Utilisez les outils pour les développeurs intégrés à votre navigateur pour inspecter le code HTML des pages Web et examiner comment la page a été créée.

Question 1

Lequel des éléments suivants est un élément enfant ? (ignorez les éléments body/html pour cet exercice)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>
  1. h1
  2. p
  3. a
  4. h1 et p

Question 2

Dans un document HTML, __ se trouve dans l'élément <head> et __ se trouve dans l'élément <body>.

  1. structure, métadonnées
  2. métadonnées, structure
  3. titres, contenu plus petit
  4. l'en-tête du site, le contenu principal du site

Question 3

Parmi les raisons suivantes, lesquelles ne justifient pas d'indenter les éléments imbriqués ?

  1. L'indentation permet de voir plus facilement quels éléments sont contenus dans d'autres éléments.
  2. L'indentation permet aux humains de lire plus facilement la structure de la page Web.
  3. L'indentation permet aux robots et aux moteurs de recherche de lire plus facilement la structure de la page Web.
  4. L'indentation facilite l'identification des éléments frères.

Question 4

Parmi les propositions suivantes, laquelle est un attribut de l'élément HTML ?

<div class="sidebar">Sidebar goes here!</div>
  1. div
  2. class
  3. barre latérale
  4. Barre latérale ici !

Question 5

Combien d'attributs l'élément HTML suivant comporte-t-il ?

<input type="text" placeholder="username" name="username" />
  1. 0
  2. 1
  3. 2
  4. 3

Question 6

Dans l'extrait de code HTML suivant qui illustre une relation, quel élément est un élément parent ?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>
  1. <p>
  2. <b>
  3. <i>

Question 7

Combien d'éléments de l'extrait de code HTML suivant sont des enfants d'un élément parent ?

(Ne comptez pas les éléments d'encapsulation <body> ou <html>.)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>
  1. 1
  2. 2
  3. 3
  4. 4

Question 8

Bien que certains navigateurs affichent correctement l'extrait HTML suivant, qu'est-ce qui ne va pas ?

<img src=puppies.png width=400 />
  1. Il ne comporte pas de balise de fermeture.
  2. Les valeurs des attributs doivent être entre guillemets.
  3. Si vous fournissez l'attribut width, vous devez également fournir l'attribut height.
  4. Il manque un attribut obligatoire

Question 1

Lequel des éléments suivants est un élément enfant ? (ignorez les éléments body/html pour cet exercice)

<h1>
  Welcome to the site!
</h1>
<p>
  Go to <a href="https://www.google.com">Google!</a>
</p>

L'élément a est un élément enfant, car il est contenu dans un autre élément.

Question 2

Dans un document HTML, __ se trouve dans l'élément <head> et __ se trouve dans l'élément <body>.

Les métadonnées sont placées dans l'élément <head> et la structure dans l'élément <body>. Aucun élément du tag <head> ne sera visible sur la page Web elle-même.

Question 3

Parmi les raisons suivantes, lesquelles ne justifient pas d'indenter les éléments imbriqués ?

Les retraits ne facilitent pas la lecture de la structure de la page Web par les robots/moteurs de recherche. Lorsqu'un robot lit un site Web, il peut lire le code HTML même s'il est entièrement sur une seule ligne.

Question 4

Parmi les propositions suivantes, laquelle est un attribut de l'élément HTML ?

<div class="sidebar">Sidebar goes here!</div>

class est l'attribut. Les attributs se trouvent dans un élément HTML et ont généralement une valeur (mais ce n'est pas obligatoire).

Question 5

Combien d'attributs l'élément HTML suivant comporte-t-il ?

<input type="text" placeholder="username" name="username" />

L'élément input ci-dessus comporte trois attributs : type, placeholder et name.

Question 6

Dans l'extrait de code HTML suivant qui illustre une relation, quel élément est un élément parent ?

<p>
        <b>Pomp</b> and <i>Circumstance</i>
</p>

<p> est un élément parent, car il contient d'autres éléments.

Question 7

Combien d'éléments de l'extrait de code HTML suivant sont des enfants d'un élément parent ?

(Ne comptez pas les éléments d'encapsulation <body> ou <html>.)

<div>
  <h1>Buster's site</h1>
  <p>Buster is my dog.  He is a <i>very good dog</i>.  He is a
  Labrador retriever.  Read more about it
  <a href="https://dogtime.com/dog-breeds/labrador-retriever">
    here</a>.
  <p>
</div>

L'extrait comporte quatre éléments enfants (tout élément ayant un parent au-dessus de lui, à l'exception de l'élément <div>) : <h1>, <p>, <i> et <a>.

Question 8

Bien que certains navigateurs affichent correctement l'extrait HTML suivant, qu'est-ce qui ne va pas ?

<img src=puppies.png width=400 />

Les valeurs des attributs doivent être entre guillemets. <img /> est une balise autoportante et ne comporte aucun attribut obligatoire. Vous pouvez avoir width sans height et inversement.