Langages de programmation orientés Web

Définition

HyperText Markup Language permet créer et de représenter le contenu d'une page web et sa structure au travers de balises.

Versions

• 👵🏻
• HTML
• HTML+
• HTML 2.0
• HTML 3.2
• HTML 4.01
• XHTML 1.0
• HTML5
• XHTML5
• HTML Living Standard

Doctype

Pour qu'un fichier .html soit valide et reconnu correctement comme tel, il doit contenir cette déclaration comme première ligne:

<​!DOCTYPE html>

Structure

Voici le squelette d'un fichier .html basique, on y retrouve la doctype, d'une balise englobante html qui contient une balise head et body.

<​!DOCTYPE html>
<​​html>
    <​head><​/head>
    <​body><​/body>
<​/html>

Head

Cette balise permet d'y définir des métadonnées pour notre document, comme son titre, des fichiers à lier comme du CSS, etc.

Voici 3 metadonnées essentielles pour le bon fonctionnement de l'HTML:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

Body

Le contenu visible d'une page html doit se trouver à l'intérieur de la balise body. Aucune balise ne doit se trouver en dehors, sauf celles qui se situent dans la balise head.

Voit un template qui sera une base solide pour vos projets, on le fera évoluer selon nos besoins:

<​!DOCTYPE html>
<​​html>
    <​head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    <​/head>
    <​body><​/body>
<​/html>

Anatomie d'une balise

<p class="text">Du contenu</p>

Élément

<p class="text">Du contenu</p>

Un élément c'est l'entièrté d'une balise, de ses attributs et de son contenu.

Balise

<p class="text">Du contenu</p>

Une balise commence ou clôture un élément. On peut rajouter des attributs dans la balise ouvrante, mais rien ne doit se retrouver dans la partie fermante. Parfois certaines balises sont auto-fermante.

Attributs

<p class="text">Du contenu</p>

On peut ajouter un ou plusieurs attributs dans la partie ouvrante d'une balise. Pour modifier le modifier, il est suivi d'un  =  et d'une valeur entre double guillement.

Contenu

<p class="text">Du contenu</p>

Une balise peut contenir du texte, ou d'autres éléments qui peuvent eux mêmes en contenir au besoin. L'HTML est donc une mise en abyme.

Les balises

Structurantes

Ces balises auront pour but de grouper d'autres balises afin de leurs donner un contexte, ce qui améliore la sémantique de votre document.

Nav

Représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page

Header

Représente un contenu introductif d'un document html, on y retrouve le logo et la navigation principale.

Main

Représente le contenu principal du document.

Section

Représente une section générique de notre document, qui doit toujours contenir une balise titre.

Article

Représente un contenu autonome dans notre document, qui peut lui même contenir des balises header et footer.

Aside

Représente un contenu qui n'a qu'un rapport indirect avec le reste du document.

Div

Représente un contenu générique, mais n'a aucune valeur sémantique.

Footer

Représente le pied de page d'un document html, on y retrouve les informations de contact, une navigation plus détaillée, des liens vers des pages légales, etc.

Textuelles

Ces balises sont destinées à contenir du texte et à le mettre en forme et parfois s'inmbriquer les unes dans les autres.

H1 - H6

Représente les 6 niveaux possibles pour un titre, du plus au moins important. Retenons qu'il ne peut y avoir qu'un seul h1 par document.

<h1>Titre principal unique</h1>
<h2>Titre secondaire</h2>
<h2>Autre titre secondaire</h2>
<h3>Un titre ternaire de cette section</h3>

P

Représente un paragraphe.

<p>Un paragraphe</p>

Strong

Représente une portion d'une texte avec un certain niveau d'importance.

<p>Un paragraphe avec une <strong>portion importante</strong></p>

Em

Représente une portion d'une texte sur laquelle on veut mettre l'emphase.

<p>Un paragraphe avec une <em>emphase</em></p>

A

Représente un lien. Cette balise à un attribut obligatoire pour être valide: href qui peut être un lien interne, externe, vers portion de la page ou pointer un fichier.

<a href="/contact">Lien interne vers la page /contact</a>
<a href="https://www.google.com/">Lien externe vers la google</a>
<a href="#section">Lien vers une portion de la page</a>
<a href="/mon-image.jpg">Lien vers un ficher</a>

Ul & Ol

Représente tout les deux une liste, ul pour unordered list et ol pour ordered list. Le premier est une liste où l'ordre n'a pas d'importance, tandis que le second liste de manière ordonnée. Nous aurons d'une autre balise pour indiquer les éléments de cette liste: li.

Li

Représente un élément d'une liste, ordonnée ou non.

<ul>
  <li>élément non ordonné</li>
  <li>élément non ordonné</li>
  <li>élément non ordonné</li>
</ul>
<ol>
  <li>élément ordonné</li>
  <li>élément ordonné</li>
</ol>

Img

Représente une image dans notre document. Cette balise necéssite 2 attributs: src qui est le lien vers l'image, et alt qui est un texte descriptif court obligatoire. Elle ne peut pas contenir d'autre élément et est auto-fermante.

<img src="images.unsplash.com/photo-1526481280693-3bfa7568e0f3?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Le mont Fuji au japon, avec une pagode sur au premier plan.">

Il existe un outil très important qui permet de valider son code HTML, cela se passe sur le site du W3C. Il sera très important de vérifier la validation de votre code sur tout vos projets web. Il existe 3 méthodes:

• Via une url
• Par un upload d'un fichier html
• En copiant-collant votre code

Exercice 01

Créer un fichier html valide qui reprend le contenu sur l'image suivant:

Exercice 02

Créer un fichier html qui présente vos 3 films, jeux ou séries préférés de manière la plus sémantique possible. Doit contenir:

• Un titre principal
• Un titre secondaire pour chaque film/jeu/serié
• Un texte court présentant le film/jeu/serié
• Une image illustrant le film/jeu/serié
• Avoir un code valide