M104 -DÉVELOPPER DES SITES WEB STATIQUES

OFPPT_ISTA_SK
développement digital
LES LISTES
*
03 - Définir les éléments basiques d’une page HTML
Types de chemins d’accès

 Chemins d’accès
 • Le chemin d'accès d'un fichier (ou d'un répertoire) est une chaîne de caractères
représentant une liste de noms de répertoires séparés par des barres obliques. Cette
 chaine décrit la position de ce fichier (ou répertoire) dans le système de fichiers.
 • Généralement, un chemin standard peut être constitué de trois composants :
 • Une lettre de volume ou de lecteur suivie du séparateur de volumes (:).
 • Un nom de répertoire. Le caractère de séparation de répertoires sépare les sous-
répertoires au sein de la hiérarchie des répertoires.
 • Un nom de fichier. Le caractère de séparation de répertoires sépare le chemin et le
nom de fichier.
 • Types de chemins d’accès :
 • Le chemin absolu se rapporte toujours au dossier parent (racine).
 • Le chemin relatif basé sur la structure des dossiers.
03 - Définir les éléments basiques d’une page HTML
Les liens

 La balise <a>
La balise <a> permet de créer un lien hypertexte, c'est-à-dire rendre une partie du texte active
suite au clic de l’utilisateur.
Pour chaque lien on associe une adresse destination où l'utilisateur sera envoyé après son clic.
Cette balise permet également de créer des liens à l'intérieur d'un document ainsi que l'envoi d'un
mail.
Les principaux attributs des liens hypertextes sont :
• href : la cible du lien
Exemple :<a href="https://www.example.com">Visitez Example.com</a>
<a href="page2.html">Page 2</a>
créer un lien hypertexte pour envoyer un e-mail :
<a href="mailto:contact@example.com">Envoyez un e-mail</a>
• title : affiche une info bulle sur le lien.
<a href="https://www.example.com" title="Site Web d'exemple">Example.com</a>
03 - Définir les éléments basiques d’une page HTML
Les liens

 La balise <a>
• Target :
_blank : ouverture de la page cible dans une nouvelle fenêtre.
_parent : ouverture de la page cible dans le cadre parent (de niveau
immédiatement supérieur).
_self : (valeur par défaut), ouverture de la page cible dans le cadre d'appel.
_top : ouverture de la page cible dans la fenêtre hôte (par-dessus le FRAMESET).
<a href="https://www.example.com" target="_blank">Ouvrir dans une nouvelle
fenêtre</a>
<a href="page2.html" target="_parent">Ouvrir dans le cadre parent</a>
<a href="https://www.example.com" target="_top">Ouvrir dans la fenêtre
principale</a>
03 - Définir les éléments basiques d’une page HTML
Les balises multimédia (images, audio, vidéo)

 La balise <img>
 La balise <img> permet d’insérer une image dans une page web.
 • L’attribut src définit le chemin de l'image source
 • l’attribut alt le texte alternatif si l'image n'est pas affichée.
 • Les attributs width et height définissent la taille de l’image (en pixels)
 Exemple :
 La balise <img>
<img src="../Photos/ofppt.png" alt="Image non trouvée" width="160" height="100">
<img src="https://www.ofppt.ma/themes/custom/ofppt/assets/images/logo.png"
alt="Image non trouvée" width="160« height="100">
 La balise <picture> est une balise HTML5 utilisée pour spécifier plusieurs sources
d'images pour un élément <img>, en fonction de différents critères tels que la
résolution d'écran, la taille de l'écran ou d'autres caractéristiques du navigateur.
Cela permet aux concepteurs de sites web de fournir des images adaptées à
diverses conditions, améliorant ainsi les performances et l'expérience utilisateur.
 Voici comment utiliser la balise <picture> :
 <picture>
 <!-- Source pour les écrans avec une résolution élevée (2x) -->
 <source srcset="image-large.jpg" media="(min-resolution: 2dppx)">
 <!-- Source pour les écrans de taille supérieure à 800px de largeur -->
 <source srcset="image-medium.jpg" media="(min-width: 800px)">
 <!-- Source par défaut pour les autres écrans -->
 <img src="image-small.jpg" alt="Description de l'image">
 </picture>
Mise en forme d'un document html
exercice

 Écrire un code HTML qui permet d'afficher le texte

suivant avec sa mise en forme:
Le langage HTML sert à structurer
le contenu des pages web en y intégrant divers
éléments multimédias tels que: des images, des
vidéos ou encore des animations flash.
Le <b>langage <font
color="blue">HTML</font></b>
XHTML
sert à structurer
le <b>contenu</b> des <u>pages web</u>
en y intégrant divers éléments multimédias tels
que:
<i> des images, des vidéos ou encore des
animations flash.</i>
 <h4>Exercice 2</h4>
 <h1>Les Langage Web</h1>
 <h2>Langages coté client</h2>
 <h3>Le langage HTML</h3>
 Le <b><font color="blue">langage HTML</font></b>
est un langage coté client.<br />
 Il permet de créer des pages web.<br />
 <b><font color="red">NB:</font></b> HTML <s>n'est
pas un langage de programmation</s>
 Le 5^ème
 <u>terme</u> de la <b>suite</b>
(U_n)_n est
U₅
 <!DOCTYPE html>
 <html>
 <head>
 <title>Exercice de mise en forme</title>
 </head>
 <body>
 <p>
 <!-- la première ligne est enveloppée dans la balise <strong>
 pour appliquer le style gras.
 la deuxième ligne est enveloppée dans la balise <em>
 pour appliquer le style italique.
 La troisième ligne est enveloppée dans les balises <u><em>
 pour appliquer les styles italique et souligné en même temps.
 Chaque ligne est également séparée par une balise <br>
 pour les afficher sur des lignes distinctes.
 -->
 <strong>Première ligne</strong><br>
 <em>Deuxième ligne</em><br>
 <u><em>Troisième ligne</em></u>
 </p>
 </body>
 </html>
 Exercice 6: Créer un lien vers une page externe.
 1) - Créez un fichier HTML nommé "index.html" et à
l'intérieur du corps (<body>) de la page, ajoutez un lien
hypertexte qui pointe vers le site Web de Google (
https://www.google.com). Le lien doit afficher le texte
"Visitez Google" pour les utilisateurs.
2) - En utilisant un attribut approprié faite en sorte que le
lien affiche l'info-bulle : "Ce lien vous envoie vers google"
 Exercice 7: Créer un lien vers une page interne.
 Créez une nouvelle page HTML nommée
"about.html".
Ajoutez un paragraphe dans la page "about.html"
avec une brève description de vous-même.
Dans le fichier "index.html", créez un lien
hypertexte vers la page "about.html" en utilisant le
texte "En savoir plus sur moi".
<audio controls>
<source src="mon-fichier-audio.mp3"
type="audio/mpeg">
Votre navigateur ne prend pas en charge
l'élément audio.
</audio>
 <audio> : C'est la balise principale pour intégrer un élément
audio.
 controls : Cet attribut ajoute des contrôles de lecture audio
(comme lecture, pause, volume, etc.) pour permettre à l'utilisateur
d'interagir avec l'audio.
 <source> : C'est une balise fille de <audio> utilisée pour spécifier
les sources audio. Vous pouvez inclure plusieurs balises
<source> pour prendre en charge différents formats audio, de
sorte que le navigateur choisira celui qu'il peut lire. L'attribut src
spécifie l'URL du fichier audio, et l'attribut type indique le type de
fichier audio.
Les tableaux
 La balise <table>
 Pour insérer un tableau, on utilise la balise <table>.
 À l’intérieur de la balise <table>, la balise <tr> (table row)
signifie une ligne.
 Chaque ligne est composée d’une ou plusieurs cellules de
données définies par la balise <td>.
 Pour l’entête du tableau, on utilise la balise <th> (table
header).
 L’attribut Border permet de fixer la largeur des bordures
des cellules.
Les tableaux
 Un tableau HTML est un élément utilisé pour organiser et afficher des données sous forme
de lignes et de colonnes. Il est généralement composé de balises HTML spécifiques qui permettent de
structurer les données de manière tabulaire. Notez bien que pour la mise en forme, il est recommandé en
général d'utiliser des méthodes de mise en page CSS plutôt que de compter uniquement sur les attributs
HTML.Voici une description des balises HTML couramment utilisées pour créer des tableaux :

1. <table> : C'est l'élément de base pour créer un tableau. Il englobe toutes les autres balises liées au
tableau. À l'intérieur de cet élément, vous définissez les lignes et les cellules du tableau.
2. <tr> : Cette balise est utilisée pour définir une ligne dans le tableau. Elle contient généralement une ou
plusieurs balises <td> ou <th> pour représenter les cellules de la ligne.
3. <th> : Cette balise est utilisée pour définir une cellule d'en-tête de tableau. Les cellules d'en-tête sont
généralement utilisées pour les titres de colonnes ou de lignes. Elles sont affichées en gras par défaut.
4. <td> : Cette balise est utilisée pour définir une cellule de données dans le tableau. Elle contient les
données réelles que vous souhaitez afficher dans le tableau.
5. <caption> : Cette balise est facultative et peut être utilisée pour ajouter une légende ou une description
au tableau. Elle est généralement placée juste en dessous de la balise d'ouverture <table>.
Les tableaux
 2.1 Définir un tableau simple
<table>
<caption>Exemple de tableau</caption>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
<td>Cellule 1,1</td>
<td>Cellule 1,2</td>
</tr>
<tr>
<td>Cellule 2,1</td>
<td>Cellule 2,2</td>
</tr>
</table>
Les tableaux
 2.2 Définir un tableau avec bordure
<table border="1">
<caption>Exemple de tableau</caption>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>
<tr>
<td>Cellule 1,1</td>
<td>Cellule 1,2</td>
</tr>
<tr>
<td>Cellule 2,1</td>
<td>Cellule 2,2</td>
</tr>
</table>
Les tableaux
 Liste des attributs associés à la balise <table>
 La balise <table> en HTML peut être utilisée avec plusieurs attributs pour définir diverses
propriétés et comportements du tableau. Ces attributs vous permettent de contrôler
l'apparence et le comportement de la balise <table> et de ses éléments enfants. Il convient de
souligner que certains de ces attributs, comme border, cellpadding et cellspacing, sont
déconseillés dans les normes HTML5 au profit de méthodes de mise en page plus modernes
et flexibles à l'aide de CSS. Voici une liste des attributs couramment utilisés avec la balise
<table> :
 border: Définit la largeur de la bordure autour du tableau.
 cellpadding: Définit l'espacement entre le contenu des cellules et les bords de la cellule.
 cellspacing: Définit l'espacement entre les cellules du tableau.
 width: Définit la largeur totale du tableau.
 height: Définit la hauteur totale du tableau.
 summary: Fournit un résumé textuel du contenu du tableau pour l'accessibilité.
 align: Aligne le tableau par rapport au texte environnant.
 bgcolor: Définit la couleur d'arrière-plan du tableau.
 frame: Contrôle les bordures du tableau. Les valeurs possibles sont "void", "above", "below",
"hsides", "vsides" et "box".
Les tableaux
1. rules: Définit les règles pour afficher les lignes et les colonnes du tableau. Les valeurs possibles sont
"none", "groups", "rows" et "cols".
2. caption: Utilisé pour associer un élément
au tableau.
3. class et id: Attributs de classe et d'identifiant pour appliquer des styles CSS ou pour la manipulation
JavaScript.
4. colspan : Utilisé pour de fusionner des cellules sur plusieurs colonnes horizontalement.
5. rowspan : Utilisé pour de fusionner des cellules sur plusieurs lignes verticalement.
Les tableaux
 Exemple ( attribut width, height et border)

 <table width="400" height="120" border="1">

 <tr>
 <td>Cellule 1,1</td>
 <td>Cellule 1,2</td>
 </tr>
 <tr>
 <td>Cellule 2,1</td>
 <td>Cellule 2,2</td>
 </tr>
 </table>
Les tableaux
 Exemple ( attribut cellspacing)

 <table cellspacing="20" border="1">

 <tr>
 <td>Cellule 1,1</td>
 <td>Cellule 1,2</td>
 </tr>
 <tr>
 <td>Cellule 2,1</td>
 <td>Cellule 2,2</td>
 </tr>
 </table>
Les tableaux
 Exemple (attribut cellpadding)
<table cellpadding="20" border="1">
<tr>
<td>Cellule 1,1</td>
<td>Cellule 1,2</td>
</tr>
<tr>
<td>Cellule 2,1</td>
<td>Cellule 2,2</td>
</tr>
</table>
Les tableaux
4. Fusionner les cellules d'un tableau
L'attribut colspan : permet de fusionner des cellules sur plusieurs colonnes
horizontalement.
L'attribut rowspan : L'attribut rowspan permet de fusionner des cellules sur plusieurs
lignes verticalement.
<table border="1">
<tr>
<td>Cellule 1</td>
<td colspan="2">Cellules fusionnées</td>
<td>Cellule 4</td>
</tr>
<tr><td>Cellule 5</td>
<td>Cellule 6</td>
<td>Cellule 7</td>
<td>Cellule 8</td>
Les tableaux
 Exemple (fusionner deux cellules verticalement)
<table border="1">
<tr>
<td rowspan="2">Cellules fusionnées</td>
<td>Cellule 2</td> <td>Cellule 3</td>
</tr>
<tr>
<td>Cellule 2</td>
<td>Cellule 3</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
<td>Cellule 6</td>
</tr> </table>
 03 - Définir les éléments basiques d’une page HTML
Balises de structuration

Les balises <div>

La balise HTML <div> (ou division) est un conteneur générique : elle peut contenir
n’importe quel élément HTML.
Cet élément, de type bloc, n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est
pas mis en forme d'une manière explicite (en utilisant un style CSS).
<div> est très souvent utilisé avec la mise en page CSS d'une page Web.
<div id="conteneur">
<p>Ceci est un paragraphe à l'intérieur d'un conteneur <div>.</p>
<ul>
<li>Liste d'éléments</li>
<li>Liste d'éléments</li>
</ul>
</div>
 03 - Définir les éléments basiques d’une page HTML
Balises de structuration

Les balises <span>

La balise <span> ne produit aucun effet visuel mais sert à appliquer un effet de style CSS
aux éléments qu’elle contient (un texte par exemple).
<p>Ceci est un <span class="highlight">texte mis en évidence</span> à l'aide de la
balise <span>.</p>
 03 - Définir les éléments basiques d’une page HTML
Balises de structuration

Les balises sémantiques

Une page web est souvent composée d'un menu, d'une sidebarre et d'un pied de
page.
Tous ces ensembles peuvent (et doivent) être compris dans des balises qui vont
structurer la page.
Un élément sémantique décrit clairement son sens au navigateur et au développeur.
Des exemples d'éléments non-sémantiques :
• <div> et <span> - ne disent rien sur leur contenu.
Des exemples d'éléments sémantiques :
• <form>, <table> et <img> - contenu clairement défini.
 03 - Définir les éléments basiques d’une page HTML
Balises de structuration

Les balises sémantiques

Plusieurs sites Web utilisentles balises comme : <div id="nav">, <div class="header">, ou <div
id="footer">, pour indiquer les liens de navigation, en-tête, pied de page.
HTML5 propose des éléments sémantiques permettant de définir clairement les différentes
parties d'une page web :
• <header>
• <nav>
• <section>
• <article>
• <aside>
• <figure> / <figcaption>
• <footer>
• <details> / <summary>
• <mark>
• <time>
 03 - Définir les éléments basiques d’une page HTML
Balises de structuration

Les balises <header> et <footer>

Une page est généralement composée d'un header et d'un footer.
• Le footer reprend en général des liens vers les crédits et les mentions légales, et aussi vers
certaines pages qui ne sont pas listées dans le menu :
• Le header peut comprendre (liste non exhaustive) : un menu, un logo, des liens vers des
réseaux sociaux, …
Exemple :
<header>
<h1>Titre de la partie</h1>
<p>Publié par CDC</p>
<p>Informations supplémentaires</p>
</header>
<p>....</p>
 03 - Définir les éléments basiques d’une page HTML
Balises de structuration

Les balises <header> et <footer>

<footer>
<p>Auteur: CDC NTIC<br>
<a href="mailto:cdc@ofppt.ma">cdc@ofppt.ma</a></p>
</footer>
 03 - Définir les éléments basiques d’une page HTML
Balises de structuration

La balise <nav>
La balise<nav> (utilisée avec une balise <ul> ou <ol>) permet de spécifier les éléments de
navigation de la page (le menu).
Le menu consiste en une liste d'éléments permettant de naviguer entre plusieurs pages du
même site, ou bien vers plusieurs sections de la page.
Exemple :

<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="inscription.html">Inscription</a></li>
<li><a href="a_propos.html">À propos</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
 03 - Définir les éléments basiques d’une page HTML
Balises de structuration

Les balises <main> et <section>

La balise <main> spécifie le contenu principal de la page web.
La balise <section> permet de segmenter le contenu en plusieurs sections.
Exemple :
<main>
<p>Texte d'introduction de mon contenu.</p>
<section>
<h2>Titre de ma section</h2>
<p>Texte de ma section.</p>
</section>
<section>
<h2>Titre de ma section</h2>
<p>Texte de ma section.</p>
</section>
</main>
 03 - Définir les éléments basiques d’une page HTML
Balises de structuration

La balise <article>
La balise <article> permet d'incorporer du contenu annexe, comme par exemple :
• des articles de blog,• des produits,• des commentaires, • …
Exemple :<main>
<p>Texte de mon contenu. Voilà des articles liés à ma page :</p>
<div>
<article>
<h2>Titre de mon article</h2>
<p>Texte de mon article.</p>
</article>
<article>
<h2>Titre de mon article</h2>
<p>Texte de mon article.</p>
</article>
</div>
</main>
 03 - Définir les éléments basiques d’une page HTML
Balises de structuration

La balise <aside>
La balise <aside> permet d'afficher du contenu qui n'a pas de rapport direct avec le contenu principal, souvent
représenté comme une sidebarre :
Exemple :

<main>
<p>Texte de mon contenu.</p>
<aside>
<p>.</p>
Texte sans rapport direct
</aside>
</main>
 Activité 1
Les éléments HTML de base

Les balises sémantiques

• Définir des blocs par l’utilisation d’un tableau (cela n’est pas la meilleure méthode).
• En utilisant rowspan, colspan, width et height ainsi que les tailles par pixel et par pourcentage, créer le tableau ci-dessous
(Figure 14)
• Ensuite, insérer les balises sémantiques de disposition dans les cellules du tableau comme cité ci-dessous :
PARTIE 1

Figure 14 : Utilisation des balises sémantiques

Copyright - Tout droit réservé - OFPPT 55

 Activité 1
Les éléments HTML de base

Les balises sémantiques (Solution)

<table border="1" width="100%">

<tr height="100px">
<td rowspan="3" width="15%"><nav></nav></td>

<td><header></header></td>
<td rowspan="3" width="15%"><aside></aside></td></tr>
<tr height="400px">
<td>
<section>
<header></header>
<article></article>
<footer></footer>
</section>
</td>
</tr>
<tr height="50px"><td><footer></footer></td></tr>
</table>
PARTIE 1

Copyright - Tout droit réservé - OFPPT 56

 Activité 2
Les éléments HTML de base

Travail de synthèse

• Réaliser la page suivante et créer d’autres pages web vides à atteindre lors du clic sur les éléments du menu à gauche.
• Utilisez les attributs color du texte et bgcolor de la balise body pour modifier les couleurs de la page
• Penser à respecter les normes du W3C !
PARTIE 1

Figure 15 : Travail de synthèse

Copyright - Tout droit réservé - OFPPT 57

 Activité 2
Les éléments HTML de base

Travail de synthèse (Correction)

<table border="1" width="100%">

<tr height="100px">
<td rowspan="3" width="15%">
<nav>
<ul type="none">
<li>Accueil</li>
<li>Inscription</li>
<li>Espace étudiant</li>
<li>Espace professeur</li>
<li>Ressources</li>
<li>Contact</li>
</ul>
</nav>
</td>
<td><header><img src="banner.jpg"></header></td>
<td rowspan="3" width="15%"><aside></aside></td></tr>
<tr height="400px">
PARTIE 1

Copyright - Tout droit réservé - OFPPT 58

 Activité 2
Les éléments HTML de base

Travail de synthèse (Correction)

<td>
<section>
<header align="center"><H1 >Exemple de disposition de page web</H1></header>
<article><p align="center">Ceci est un exemple de disposition d'éléments dans une page web.
Mais ce n'est pas la bonne méthode. On utilise plutôt la balise &ltdiv&gt
</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/qsbkZ7gIKnc" title="YouTube
video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
</article>
<footer></footer>
</section>
</td>
</tr>
<tr height="50px"><td><footer></footer></td></tr>
</table>
PARTIE 1

Copyright - Tout droit réservé - OFPPT 59

 • accelerometer : Permet d'accéder aux
données de l'accéléromètre de l'appareil, ce
qui peut être utilisé par la vidéo pour des
interactions basées sur le mouvement, bien
que cela soit rarement utilisé.
• autoplay : Autorise la vidéo à démarrer
automatiquement dès que la page contenant
l'iframe est chargée. Cependant, notez que les
vidéos avec cette option activée peuvent être
bloquées par les navigateurs si elles ne
respectent pas certaines conditions, comme la
désactivation du son.
• clipboard-write : Permet à la vidéo d'écrire
dans le presse-papiers de l'utilisateur. Cette
fonctionnalité est généralement utilisée pour
copier des liens ou du texte depuis la vidéo.
• encrypted-media : Autorise la vidéo à utiliser
des médias chiffrés, tels que des flux vidéo
protégés par des droits d'auteur.
• gyroscope : Permet à la vidéo d'accéder aux
données du gyroscope de l'appareil, ce qui
PARTIE 1

peut être utilisé pour des interactions basées

sur l'inclinaison ou le mouvement.
• picture-in-picture : Cette option permet à la
vidéo de s'afficher en mode "image dans
l'image" (PiP), ce qui signifie qu'elle peut être
détachée de la page web et placée dans un
coin de l'écran tout en continuant à jouer.

Copyright - Tout droit réservé - OFPPT 60