Cours de Systemes de gestion de contenu

November 21, 2024

1 Cours en HTML/CSS et systèmes de gestion de contenu (CMS).

1.0.1 1. Introduction à HTML et CSS
• Objectifs : Familiariser les étudiants avec les bases de la création de sites web et les concepts
de structuration (HTML) et de stylisation (CSS).
• Contenu suggéré :
– HTML : Structure de base, éléments HTML, liens, images, tableaux et formulaires.
– CSS : Sélecteurs, propriétés de style, mise en forme de texte, mise en page avec Flexbox
et Grid.
– Exercice pratique : Créer une page web simple pour un projet fictif en finance ou
tourisme (ex : profil d’entreprise, brochure touristique).

1.0.2 2. Les Systèmes de Gestion de Contenu (CMS)

• Objectifs : Comprendre le fonctionnement des CMS et savoir utiliser WordPress (ou un
autre CMS accessible) pour créer et gérer un site web.
• Contenu suggéré :
– Qu’est-ce qu’un CMS ? : Définition, avantages, exemples populaires (WordPress,
Joomla, Wix).
– Installation et configuration de WordPress : Installation, personnalisation de
thèmes, ajout de plugins, création de contenu.
– Cas pratiques : Création d’un site vitrine pour une entreprise de finance ou une agence
de voyage, avec des pages de présentation, d’offres et de contact.

1.0.3 3. Exemples et Études de Cas Spécifiques aux Domaines MF et MT

• Applications en Management Financier :
– Exemple de site pour une société de conseil financier, avec des pages de présentation des
services, de publications et de témoignages clients.
• Applications en Management Tourisme :
– Exemple de site pour une agence de tourisme, incluant des sections pour des destinations,
des offres de voyage, et un blog touristique.

1.0.4 4. Ateliers Pratiques et Projets

1.1 Vocabulaire:
Voici une version améliorée avec des exemples concrets pour clarifier la différence entre Internet,
le Web, le W3C, et les réseaux :

1
1. Internet :
• Définition : Internet est un réseau mondial d’ordinateurs et de serveurs inter-
connectés, qui permet la communication et l’échange de données à grande échelle. Il
connecte des millions de réseaux locaux dans le monde entier, créant une infrastructure
mondiale.
• Fonctionnement : Internet utilise des protocoles de communication comme TCP/IP
pour organiser le transfert de données. Il englobe plusieurs services comme le Web, le
courrier électronique (email), le transfert de fichiers (FTP), les appels en ligne (VoIP),
etc.
• Exemples :
– Quand vous envoyez un email via Gmail ou Outlook, vous utilisez un service
d’Internet.
– Lorsque vous téléchargez un fichier depuis un serveur distant à l’aide de FTP (File
Transfer Protocol), vous êtes également sur Internet.
– En jouant en ligne sur des jeux multijoueurs, vous utilisez Internet pour interagir
avec d’autres joueurs à distance.
2. Web (World Wide Web) :
• Définition : Le Web est un service fonctionnant sur Internet qui permet d’accéder
à des informations sous forme de pages web, accessibles via des navigateurs (Chrome,
Firefox, Safari, etc.). Il est basé sur des documents HTML, connectés par des liens
hypertextes.
• Fonctionnement : Le Web utilise le protocole HTTP (HyperText Transfer Proto-
col) pour accéder à des pages web qui sont stockées sur des serveurs. Les navigateurs
interprètent les documents HTML et affichent des pages accessibles via des adresses
URL.
• Exemples :
– Consulter Wikipédia pour une recherche ou lire un article d’actualité sur un site
comme Le Monde utilise le Web.
– Accéder à une vidéo YouTube via un navigateur utilise également le Web, car
vous accédez à une page contenant des informations et des contenus multimédias.
3. W3C (World Wide Web Consortium) :
• Définition : Le W3C est l’organisme international de normalisation qui développe
et publie les standards techniques du Web, comme HTML, CSS, et XML, pour garantir
l’accessibilité et l’interopérabilité du Web.
• Fonction : Le W3C travaille avec des experts, des entreprises, et des chercheurs pour
établir des règles qui garantissent que les sites web fonctionnent de manière uniforme
sur différents navigateurs et appareils.
• Exemples :
– Le W3C a défini le standard HTML5, qui est utilisé pour créer des sites interactifs,
comme des vidéos ou des animations. HTML5 permet des fonctionnalités comme
l’intégration de vidéos sans plugins, comme on le voit sur YouTube.
– Les recommandations pour l’accessibilité (WCAG) développées par le W3C
permettent aux sites d’être accessibles aux utilisateurs handicapés, comme les
lecteurs d’écran pour les malvoyants.
4. Réseaux :
• Définition : Un réseau est un ensemble d’ordinateurs ou d’appareils interconnectés qui

2
 partagent des ressources et des informations. Les réseaux peuvent être de petite taille
(comme un réseau domestique LAN) ou étendus (comme un WAN).
• Fonctionnement : Un réseau utilise des protocoles de communication pour que les
appareils connectés puissent échanger des données, imprimer des documents partagés,
ou accéder à Internet.
• Exemples :
– Le réseau Wi-Fi de votre domicile est un réseau local qui permet à vos appareils
(téléphone, ordinateur, tablette) de se connecter entre eux et à Internet.
– Un réseau d’entreprise (intranet) permet aux employés d’une société de partager
des fichiers internes et des applications sécurisées sans accès extérieur, améliorant
la productivité et la sécurité des informations.
– Internet est lui-même un réseau très large, composé de millions de réseaux locaux
et étendus interconnectés.

1.1.1 En résumé
• Internet est une infrastructure mondiale reliant de nombreux réseaux locaux.
• Le Web est un service fonctionnant sur Internet, permettant de consulter des pages web.
• Le W3C est l’organisme qui fixe les normes du Web pour assurer l’uniformité et l’accessibilité.
• Les réseaux sont des systèmes de connexions entre appareils. Internet est l’un de ces réseaux,
mais à l’échelle mondiale.

2 L’Histoire de CMS
Les systèmes de gestion de contenu, ou CMS (Content Management Systems), n’ont pas été inventés
par une seule personne ou entreprise, mais sont le fruit d’une évolution collaborative dans le
domaine du web. Plusieurs pionniers et entreprises ont contribué à leur développement au fil des
années.
Tim Berners-Lee est principalement reconnu pour avoir inventé le World Wide Web en 1989,
en développant les premiers concepts de l’hypertexte et en créant les premiers protocoles (comme le
HTTP), le HTML et le premier navigateur web, ce qui a permis de naviguer et de visualiser des
documents en ligne. Son travail a posé les bases d’Internet tel que nous le connaissons aujourd’hui,
mais il n’a pas créé les CMS.

2.1 L’Origine et l’évolution des CMS

Les CMS sont apparus dans les années 1990 et 2000, pour faciliter la création, la gestion et la
publication de contenu en ligne sans avoir besoin de coder en HTML ou en d’autres langages. Les
CMS permettent aux utilisateurs de gérer facilement des sites web via une interface utilisateur.
Parmi les premiers CMS, on trouve des systèmes comme FileNet (créé en 1985 pour la gestion
documentaire, qui a évolué vers le contenu web) et, plus tard, WordPress (2003), Joomla (2005),
et Drupal (2001).
Les CMS ont donc évolué indépendamment de l’invention de Tim Berners-Lee, bien qu’ils reposent
sur les fondations qu’il a établies avec le World Wide Web.
1. Années 1990 - Premiers outils de gestion de contenu :

3
 • Au début d’Internet, les sites étaient créés principalement en HTML pur, demandant
des compétences techniques spécifiques.
• Pour faciliter la création de contenu pour des utilisateurs non techniques, les premiers
outils de gestion de contenu sont apparus, souvent sous la forme de logiciels pour en-
treprises permettant de gérer des documents et du contenu sur les intranets.
2. Les années 2000 - Apparition des CMS modernes :
• Avec la popularisation d’Internet, des entreprises et développeurs open-source ont com-
mencé à concevoir des CMS plus sophistiqués pour le grand public.
• Les CMS les plus célèbres comme WordPress (lancé en 2003 par Matt Mullenweg et
Mike Little), Joomla! (issu de Mambo en 2005), et Drupal (créé par Dries Buytaert
en 2000) ont été développés et popularisés.
3. CMS propriétaires et open-source :
• D’autres CMS, comme Adobe Experience Manager, Sitecore, et SharePoint de
Microsoft, sont des solutions propriétaires et sont apparus dans les années 2000, souvent
destinés aux grandes entreprises.
• Les CMS open-source comme WordPress, Joomla, et Drupal ont permis une adoption
massive grâce à leur accessibilité et leur communauté de contributeurs.
4. L’évolution vers les CMS modernes :
• Avec l’essor du mobile, des réseaux sociaux, et de nouvelles technologies (API, Head-
less CMS, Jamstack), les CMS continuent d’évoluer. Des systèmes comme Contentful,
Strapi, et Sanity se concentrent aujourd’hui sur des architectures sans interface (head-
less), permettant une plus grande flexibilité pour les développeurs.

2.1.1 Les pionniers et les contributions majeures

• Matt Mullenweg et Mike Little : créateurs de WordPress, qui est aujourd’hui le CMS
le plus utilisé au monde.
• Dries Buytaert : fondateur de Drupal, l’un des CMS open-source les plus populaires et
respectés dans la communauté des développeurs.
• Communautés open-source : des centaines de développeurs ont contribué aux CMS open-
source, créant ainsi un écosystème dynamique de thèmes, extensions, et plugins.

2.1.2 Conclusion
Les CMS sont donc le résultat d’une évolution technologique collaborative et n’ont pas
d’inventeur unique. Ils représentent une combinaison d’idées, d’innovations, et d’efforts commu-
nautaires pour simplifier la gestion de contenu en ligne pour tout le monde.

3 Différentes categories d’éléments

Les éléments HTML peuvent être classés en dif-

férentes catégories en fonction de leur rôle dans la structure et le contenu d’un document. Voici
une explication détaillée des types d’éléments que vous avez mentionnés :

4
3.0.1 1. Éléments de flux (Flow Elements)
Les éléments de flux sont des éléments qui contiennent généralement du texte ou des contenus
intégrés, comme des images, des liens, ou des vidéos. Ils sont utilisés pour organiser et structurer le
contenu principal d’un document. Les éléments de flux peuvent inclure des éléments de structure,
contenu ou mise en forme. Les exemples incluent :
• <div> : Conteneur générique qui permet de regrouper des éléments.
• <p> : Définie un paragraphe de texte.
• <section> : Utilisé pour définir une section thématique d’un document.
• <article> : Définit un contenu autonome (comme un article de blog ou une news).

3.0.2 2. Éléments de phrasé (Phrase Elements)

Les éléments de phrasé sont utilisés pour définir le texte et les balises qu’il contient. Ces éléments
modifient ou enrichissent la structure du texte à un niveau plus fin, souvent pour des mises en forme
ou des liens. Ils définissent des éléments de contenu qui font partie d’un texte plus large et sont
souvent utilisés à l’intérieur des éléments de flux. Les exemples incluent :
• <strong> : Indique que le texte doit être mis en valeur (souvent en gras).
• <em> : Indique que le texte doit être mis en évidence (souvent en italique).
• <a> : Crée un lien hypertexte.
• <span> : Un conteneur générique en ligne pour appliquer des styles ou des scripts.

3.0.3 3. Éléments intégrants (Embedded Elements)

Les éléments intégrants importent des ressources définies en dehors du document HTML. Ces
éléments sont utilisés pour intégrer des contenus provenant d’autres sources ou fichiers externes.
Ils permettent d’afficher du contenu multimédia ou des documents externes à l’intérieur d’une page
HTML. Les exemples incluent :
• <img> : Permet d’intégrer une image.
• <iframe> : Permet d’intégrer une autre page web à l’intérieur de la page courante.
• <video> : Permet d’intégrer une vidéo.
• <audio> : Permet d’intégrer un fichier audio.

3.0.4 4. Éléments de titre (Title Elements)

Les éléments de titre sont utilisés pour spécifier le titre du document ou de ses sections. Ces
éléments aident à organiser le contenu de manière hiérarchique, et sont essentiels pour la structure
du document et pour les moteurs de recherche (SEO). Les exemples incluent :
• <title> : Définit le titre du document, affiché dans la barre de titre du navigateur.
• <h1>, <h2>, …, <h6> : Définissent des titres de différentes hiérarchies dans le document, <h1>
étant le titre principal, suivi de sous-titres <h2> à <h6>.

3.0.5 5. Éléments sectionnants (Sectioning Elements)

Les éléments sectionnants permettent de décomposer un document en sections distinctes, créant
ainsi une structure logique et hiérarchique du contenu. Ils sont utilisés pour organiser le contenu
en parties significatives. Les exemples incluent :

5
 • <header> : Définit une section d’en-tête d’un document ou d’une section.
• <footer> : Définit une section de pied de page d’un document ou d’une section.
• <nav> : Définit une section de navigation (liens).
• <article> : Représente un contenu autonome, comme un article de blog ou une publication.
• <section> : Définit une section du document.
• <aside> : Représente du contenu annexe, comme une barre latérale.

3.0.6 Conclusion
• Éléments de flux : Organisent le contenu principal du document.
• Éléments de phrasé : Modifient le texte et son apparence à un niveau plus fin.
• Éléments intégrants : Importent des ressources externes.
• Éléments de titre : Définissent les titres et sous-titres du document.
• Éléments sectionnants : Permettent de diviser un document en sections logiques et hiérar-
chiques.

4 Les étapes simples pour créer votre première page HTML :

4.0.1 Étape 1 : Ouvrir un éditeur de texte
Utilisez un éditeur de texte comme Notepad (Windows), TextEdit (Mac), ou un éditeur spécialisé
comme Visual Studio Code, Sublime Text, ou Atom.

4.0.2 Étape 2 : Créer un fichier HTML

1. Dans votre éditeur de texte, créez un nouveau document.
2. Enregistrez ce document sous le nom index.html. Assurez-vous que l’extension .html soit
bien utilisée pour indiquer qu’il s’agit d’un fichier HTML.

4.0.3 Étape 3 : Écrire la structure de base HTML

Dans le fichier index.html, copiez-collez la structure HTML de base suivante :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma Première Page</title>
</head>
<body>
<h1>Bienvenue sur ma première page HTML</h1>
<p>Ceci est un paragraphe de texte sur ma page.</p>
</body>
</html>
Explications : - <!DOCTYPE html> : Indique au navigateur qu’il s’agit d’un document HTML5.
- <html lang="fr"> : Définit la langue du document (français). - <head> : Contient des infor-
mations sur le document (titre, encodage). - <meta charset="UTF-8"> : Définit l’encodage des
caractères (UTF-8) pour afficher correctement les accents et autres caractères spéciaux. - <title>

6
: Détermine le titre de la page (affiché dans l’onglet du navigateur). - <body> : Contient le contenu
principal de la page (texte, images, etc.).

4.0.4 Étape 4 : Enregistrer le fichier

Enregistrez les modifications en appuyant sur Ctrl + S (Windows) ou Cmd + S (Mac).

4.0.5 Étape 5 : Ouvrir la page dans un navigateur

1. Rendez-vous dans le dossier où vous avez enregistré index.html.
2. Double-cliquez sur le fichier pour l’ouvrir avec votre navigateur web (Chrome, Firefox, Edge,
Safari, etc.).

4.0.6 Étape 6 : Observer le résultat

Vous devriez voir une page avec le titre “Ma Première Page” dans l’onglet et le texte suivant
dans le navigateur :
• Bienvenue sur ma première page HTML (en titre principal).
• Ceci est un paragraphe de texte sur ma page. (en paragraphe).
Félicitations ! Vous avez créé votre première page HTML ! �

4.0.7 1. <html> : La balise racine d’un document HTML

• La balise <html> est la racine de tout document HTML, contenant tout le contenu de
la page.
• Exemple : html <html lang="fr"> <head> <!--
Métadonnées et liens vers les fichiers CSS --> </head> <body>
<!-- Contenu visible de la page --> </body> </html>
• Explication : Tout document HTML commence avec <html> et se termine avec </html>,
contenant la structure complète.

4.0.8 2. <head> : La balise d’en-tête de la page

• La balise <head> contient les métadonnées de la page (comme le titre, les liens CSS, les
polices, etc.).
• Exemple : html <head> <title>Ma première page</title>
<link rel="stylesheet" href="style.css"> </head>
• Explication : Ici, <title> définit le titre de la page affiché dans l’onglet du navigateur, et
<link> relie un fichier CSS externe.

4.0.9 3. <body> : La balise de contenu principal

• La balise <body> contient tout le contenu visible de la page : texte, images, liens, etc.
• Exemple : html <body> <h1>Bienvenue sur mon site !</h1>
<p>Ceci est un paragraphe.</p> </body>
• Explication : Tout ce qui se trouve dans <body> sera affiché dans le navigateur.

7
4.0.10 4. <b> : Texte en gras
• La balise <b> est utilisée pour rendre du texte en gras, sans ajouter de signification supplé-
mentaire (stylistique seulement).
• Exemple : html <p>Ce texte est <b>en gras</b></p>
• Usage : Pour mettre en avant visuellement du texte, mais sans ajouter d’importance séman-
tique. Pour un texte sémantiquement important, utilisez <strong>.

4.0.11 5. <i> : Texte en italique

• La balise <i> applique un style italique au texte, également sans signification sémantique
forte.
• Exemple : html <p>Voici un mot en <i>italique</i>.</p>
• Usage : Pour changer le ton du texte ou pour indiquer des termes techniques, des noms, ou
des pensées intérieures. Si l’italique sert d’emphase, <em> est préférable.

4.0.12 6. <u> : Texte souligné

• La balise <u> ajoute un soulignement au texte.
• Exemple : html <p>Ce texte est <u>souligné</u>.</p>
• Usage : Rarement utilisé, car le soulignement peut être confondu avec des liens. Utilisez-le
pour des styles spécifiques, comme les titres d’œuvres ou pour des textes ayant besoin de
soulignement pour une raison stylistique.

4.0.13 7. <br> : Saut de ligne

• La balise <br> insère un saut de ligne sans créer de nouveau paragraphe.
• Exemple : html <p>Première ligne<br>Deuxième ligne</p>
• Usage : À utiliser pour insérer une ligne supplémentaire sans paragraphe. Ne pas abuser de
<br> pour la mise en page (préférez <p> et le CSS pour l’espacement).

4.0.14 8. <p> : Paragraphe

• La balise <p> est utilisée pour créer un paragraphe.
• Exemple : html <p>Ceci est un paragraphe de texte.</p>
• Usage : Idéal pour structurer le texte en blocs lisibles, séparés par des sauts de ligne naturels.
Chaque paragraphe est séparé des autres par un espace vertical.

4.0.15 9. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> : Titres de niveaux différents
• Les balises <h1> à <h6> servent à créer des titres hiérarchisés.
• Exemples : html <h1>Grand Titre (H1)</h1> <h2>Sous-Titre (H2)</h2>
<h3>Sous-sous-titre (H3)</h3> <h4>Niveau 4</h4> <h5>Niveau 5</h5>
<h6>Niveau 6</h6>
• Usage :
– <h1> est le titre principal de la page (utilisé une seule fois).
– <h2> à <h6> permettent d’ajouter des sous-titres de niveau hiérarchique décroissant.
– Important pour le référencement (SEO) et la structure de contenu pour les utilisateurs
et moteurs de recherche.

8
En HTML, il existe effectivement deux types principaux de listes : les listes ordonnées et les
listes non ordonnées. Voici la différence entre les deux ainsi que leur structure correcte avec des
explications détaillées.

4.0.16 1. Liste ordonnée (<ol>)

• Une liste ordonnée utilise la balise <ol> (ordered list) et crée une liste numérotée. Chaque
élément de la liste est défini avec une balise <li> (list item).
• Par défaut, les items d’une liste ordonnée sont numérotés de manière croissante.
• Syntaxe correcte : html <ol> <li>item 1</li> <li>item
2</li> <li>item 3</li> </ol>
• Résultat : 1. item 1 2. item 2 3. item 3

4.0.17 2. Liste non ordonnée (<ul>)

• Une liste non ordonnée utilise la balise <ul> (unordered list) et crée une liste avec des
puces (ou points) pour chaque élément. Elle ne suit pas d’ordre spécifique.
• Les éléments de la liste sont également définis avec la balise <li>.
• Syntaxe correcte : html <ul> <li>item 1</li> <li>item
2</li> <li>item 3</li> </ul>
• Résultat : • item 1 • item 2 • item 3

4.0.18 Explications supplémentaires

• <ol> : Crée une liste avec un ordre, utile pour les étapes ou les éléments qui doivent suivre
une séquence.
• <ul> : Crée une liste sans ordre, idéale pour énumérer des éléments de manière générale,
comme des caractéristiques ou des options.
• <li> : Définit chaque élément dans une liste, qu’elle soit ordonnée ou non.
Il est important de fermer chaque balise pour que la structure HTML reste correcte et pour
garantir une meilleure compatibilité avec les différents navigateurs.

4.1 La balise <img>

En HTML, la balise <img> est utilisée pour insérer une image dans une page web. Cette balise est
auto-fermante, ce qui signifie qu’elle ne nécessite pas de balise de fermeture. Elle contient plusieurs
attributs importants pour définir la source, la taille et la description de l’image. Voici comment
elle fonctionne et comment l’utiliser correctement :

4.1.1 Structure de la balise <img>

La balise <img> est généralement structurée comme suit :
<img src="monimage.jpg" alt="Description de l'image">

4.1.2 Explications des attributs

1. src (source) : Obligatoire
• L’attribut src (source) spécifie le chemin vers l’image que vous souhaitez afficher.
• Exemple : src="monimage.jpg" affiche l’image nommée monimage.jpg.

9
 2. alt (texte alternatif) : Recommandé
• L’attribut alt fournit une description textuelle de l’image pour les lecteurs d’écran,
les utilisateurs ayant désactivé les images ou si l’image ne se charge pas.
• Exemple : alt="Description de l'image" décrit le contenu de l’image, utile pour
l’accessibilité.
3. Autres attributs optionnels :
• width et height : Définissent la largeur et hauteur de l’image en pixels ou pourcent-
ages. Par exemple, width="300" fixe la largeur à 300 pixels.
• title : Affiche un infobulle lorsque l’utilisateur survole l’image avec la souris.

4.1.3 Exemple complet avec attributs

<img src="monimage.jpg" alt="Un chat mignon" width="200" height="150" title="Chat mignon">

4.2 La balise <figure>

La balise <figure> en HTML est utilisée pour encapsuler du contenu autonome, tel qu’une image,
une légende, un graphique, ou une vidéo, et elle peut être associée à une légende via la balise
<figcaption>. L’objectif principal de la balise <figure> est de regrouper le contenu visuel avec
une légende, permettant ainsi de mieux structurer le document et d’améliorer l’accessibilité.

4.2.1 Syntaxe de base

<figure>
<img src="image.jpg" alt="Description de l'image">
<figcaption>Légende de l'image</figcaption>
</figure>

4.2.2 Explication
• <figure> : Cette balise contient un contenu autonome, comme une image ou un graphique,
qui peut être compris indépendamment du reste du texte du document.
• <figcaption> : Elle permet d’ajouter une légende à l’élément contenu dans la balise
<figure>, comme une description ou un titre pour une image ou une illustration.

4.2.3 Exemple complet

<figure>
<img src="https://www.example.com/image.jpg" alt="Une magnifique vue">
<figcaption>Vue panoramique depuis le sommet de la montagne.</figcaption>
</figure>

4.2.4 Utilisation
• La balise <figure> améliore l’organisation du contenu multimédia sur une page, en permet-
tant de l’associer clairement à une légende tout en préservant une structure logique pour les
moteurs de recherche et les lecteurs d’écran.
• Elle est utilisée dans le contexte des articles, blogs, et documents qui présentent des images,
graphiques, ou vidéos accompagnés de descriptions.

10
4.3 La balise <a>
Les liens en HTML permettent de créer des connexions vers d’autres pages ou vers des sections
spécifiques dans un même document. Voici un aperçu des liens externes et internes, ainsi que
les propriétés du lien.

4.3.1 1. Liens externes

Un lien externe redirige vers une page ou ressource située sur un autre site ou une autre adresse
web.
<a href="https://www.example.com" target="_blank">Ceci est un lien externe</a>
Le code que vous avez fourni est une balise de lien <a> en HTML, avec quelques attributs clés.
Voici un aperçu de chaque partie et de ses usages :
<a href="url" target="">Ceci est un lien !</a>
href="url" : - href signifie “hypertext reference” et contient l’URL de la page ou ressource
que le lien ouvre. - Par exemple : html <a href="https://www.example.com">Ceci
est un lien !</a> - Ici, cliquer sur “Ceci est un lien !” dirigera l’utilisateur vers
https://www.example.com.
target="" : - L’attribut target définit l’endroit où le lien s’ouvrira. - Valeurs courantes : -
_self : (par défaut) ouvre le lien dans la même fenêtre ou onglet. - _blank : ouvre le lien dans
un nouvel onglet ou une nouvelle fenêtre. - _parent : ouvre le lien dans la fenêtre ou le cadre
parent de la page actuelle. - _top : ouvre le lien dans la fenêtre complète, brisant tous les cadres. -
Exemple d’ouverture dans un nouvel onglet : html <a href="https://www.example.com"
target="_blank">Ceci est un lien !</a>

4.3.2 Exemple complet :

Si vous souhaitez ouvrir une page dans un nouvel onglet, voici comment écrire le code :
<a href="https://www.example.com" target="_blank">Ceci est un lien !</a>
Cela affiche un lien cliquable qui ouvrira https://www.example.com dans un nouvel onglet, offrant
une meilleure navigation pour les utilisateurs.

4.3.3 2. Liens internes

Les liens internes sont utiles dans les documents de grande taille, permettant de naviguer directe-
ment vers des sections spécifiques du même document.

Placer une position de référence (ancre) Pour créer une ancre à un endroit précis du
document, utilisez l’attribut name :
<a name="section1"></a>
<p>Contenu de la section 1...</p>
Cette ancre section1 peut maintenant être utilisée comme destination dans un lien interne.

11
Créer un lien vers une ancre Pour faire référence à cette position de référence (ou ancre),
utilisez l’attribut href avec un # suivi du nom de l’ancre.
<a href="#section1">Aller à la section 1</a>
Cela créera un lien qui fait défiler la page jusqu’à l’élément marqué par name="section1".

4.3.4 Exemple complet

Voici un exemple combinant un lien externe, une ancre et un lien interne :
<!-- Lien externe qui s'ouvre dans un nouvel onglet -->
<a href="https://www.example.com" target="_blank">Lien vers un site externe</a>

<!-- Lien interne avec une ancre -->

<h2>Table des matières</h2>
<ul>
<li><a href="#section1">Aller à la section 1</a></li>
</ul>

<!-- Ancre dans le document -->

<a name="section1"></a>
<h3>Section 1</h3>
<p>Contenu de la section 1...</p>

4.3.5 Résumé
• Liens externes : redirigent vers une autre page (sur un autre site).
• Liens internes : redirigent vers une position précise dans le même document.
• target="_blank" : ouvre le lien dans un nouvel onglet.
• Les ancres permettent de naviguer facilement dans les grandes pages en utilisant name et des
liens avec #.

4.3.6 Utilisation de la balise <font>

La balise <font> en HTML permet de personnaliser l’apparence du texte, mais elle est désormais
considérée comme obsolète. Elle permettait de changer la couleur, la taille, et la police d’un texte.
Voici les principaux attributs de la balise <font> :
• color : Définit la couleur du texte, soit avec un nom de couleur (par exemple, red), soit avec
un code hexadécimal (par exemple, #FF0000 pour du rouge).
• size : Spécifie la taille du texte, avec des valeurs de 1 à 7.
• face : Définit la police du texte (par exemple, Arial, Times New Roman).

Exemple d’utilisation
<font color="#FF0000" size="4" face="Arial">Texte en rouge, taille 4, police Arial</font>

12
4.3.7 Limitations
Bien que <font> fonctionne, elle n’est plus utilisée dans les normes HTML modernes, qui recom-
mandent d’utiliser CSS pour une meilleure flexibilité et conformité.

5 Tables
En HTML, les tableaux permettent de structurer les données en lignes et colonnes, offrant une
organisation claire et facile à lire, idéale pour les informations tabulaires comme des chiffres, du
texte, ou même des images. Voici un aperçu des balises principales pour créer et organiser un
tableau en HTML.

5.0.1 Structure de base d’un tableau

Un tableau HTML utilise principalement trois balises :
1. <table> : Balise principale qui contient l’ensemble du tableau.
2. <tr> (Table Row) : Définit une ligne dans le tableau.
3. <td> (Table Data) : Définit une cellule de données dans une ligne.
En plus de <td>, la balise <th> (Table Header) est utilisée pour les en-têtes de colonnes ou de
lignes. Elle met en valeur les cellules d’en-tête avec du texte en gras et centré par défaut.

5.0.2 Exemple d’un tableau simple

Voici un exemple d’un tableau avec des en-têtes et des données :
<table border="1">
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Profession</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>Ingénieure</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Designer</td>
</tr>
</table>
• <table border="1"> : L’attribut border dans la balise <table> permet de définir l’épaisseur
de la bordure du tableau en HTML. Si vous voulez définir des bordures directement dans la
balise <table> ou <td>, vous pouvez utiliser l’attribut border directement dans la balise
HTML ou en utilisant l’attribut style pour appliquer des règles CSS de manière en ligne
(inline).

13
Exemple avec l’attribut border direct dans la balise <table> :
<table border="1">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
Explication : border=“1” dans la balise <table> crée une bordure autour de tout le tableau
(y compris ses cellules), d’une épaisseur de 1 pixel. Cependant, cet attribut est considéré comme
obsolète dans HTML5.

5.0.3 Exemple avec l’attribut style pour la bordure (sans CSS indépendant):
Pour définir la bordure de manière plus flexible, on peut utiliser l’attribut style directement dans
la balise <table> ou <td> en ligne (inline style).
Exemple de bordure avec l’attribut style dans la balise <table> :
<table style="border: 2px solid black; border-collapse: collapse;">
<tr>
<td style="border: 1px solid red;">Cellule 1</td>
<td style="border: 1px solid blue;">Cellule 2</td>
</tr>
<tr>
<td style="border: 1px solid green;">Cellule 3</td>
<td style="border: 1px solid yellow;">Cellule 4</td>
</tr>
</table>

6 Explication :
style="border: 2px solid black; border-collapse: collapse;": Cet attribut style définit
une bordure de 2 pixels de large autour du tableau avec une couleur noire et utilise la propriété
border-collapse: collapse; pour fusionner les bordures des cellules adjacentes. Cela signifie que
vous aurez une seule bordure entre chaque cellule, au lieu de deux bordures séparées. Dans chaque
cellule <td>, un style en ligne est appliqué pour spécifier des bordures différentes (rouge, bleu, vert,
jaune).
Pour ajouter de la couleur à une cellule de tableau en HTML, vous pouvez utiliser l’attribut style
en CSS pour définir la couleur de fond background-color ou la couleur du texte color.

Exemple : Ajouter de la couleur à une cellule de tableau

<table border="1">
<tr>

14
 <td style="background-color: #FF0000; color: white;">Cellule Rouge</td>
<td style="background-color: #00FF00; color: black;">Cellule Verte</td>
<td style="background-color: #0000FF; color: white;">Cellule Bleue</td>
</tr>
<tr>
<td style="background-color: #FFFF00; color: black;">Cellule Jaune</td>
<td style="background-color: #FF00FF; color: white;">Cellule Rose</td>
<td style="background-color: #00FFFF; color: black;">Cellule Cyan</td>
</tr>
</table>
Explication : - background-color : Définit la couleur de fond de la cellule. - color : Définit
la couleur du texte dans la cellule.
Dans cet exemple, chaque cellule a une couleur de fond différente, et la couleur du texte est ajustée
pour garantir une bonne lisibilité (par exemple, du texte blanc sur un fond rouge).
Cela fonctionne dans tous les navigateurs modernes. Si vous voulez appliquer un style à toutes les
cellules d’une table de manière uniforme, vous pouvez utiliser une feuille de style CSS externe ou
interne.

7 Les frames
Les frames (ou “cadres”) en HTML permettent de diviser l’écran du navigateur en plusieurs
sections indépendantes. Chaque section peut afficher une page HTML différente, permettant ainsi
de présenter du contenu de manière plus flexible. Voici une explication détaillée du code que vous
avez fourni, qui utilise les balises <frameset> et <frame> pour créer une disposition de plusieurs
cadres dans la fenêtre du navigateur.

7.0.1 Exemple du code fourni

<frameset cols="20%, 80%">
<frame src="frame1.htm" name="gauche">
<frame src="frame2.htm" name="droite">
</frameset>

<frameset rows="20%, 80%">

<frame src="frame1.htm" name="haut">
<frame src="frame2.htm" name="bas">
</frameset>

7.0.2 Explication du code

1. Premier <frameset> (disposition en colonnes) :
• <frameset cols="20%, 80%"> : Cette balise divise la fenêtre du navigateur en deux
colonnes. La première colonne occupe 20% de la largeur de la fenêtre, et la deuxième
colonne occupe 80%.
• <frame src="frame1.htm" name="gauche"> : Charge le fichier frame1.htm dans le
cadre situé à gauche.

15
 • <frame src="frame2.htm" name="droite"> : Charge le fichier frame2.htm dans le
cadre situé à droite.
2. Deuxième <frameset> (disposition en lignes) :
• <frameset rows="20%, 80%"> : Cette balise divise la fenêtre du navigateur en deux
lignes. La première ligne occupe 20% de la hauteur de la fenêtre, et la deuxième ligne
occupe 80%.
• <frame src="frame1.htm" name="haut"> : Charge le fichier frame1.htm dans la partie
supérieure de la fenêtre.
• <frame src="frame2.htm" name="bas"> : Charge le fichier frame2.htm dans la partie
inférieure de la fenêtre.

7.0.3 Résumé
• Le premier <frameset> divise l’écran en deux colonnes (une à gauche, l’autre à droite).
• Le deuxième <frameset> divise l’écran en deux lignes (une en haut, l’autre en bas).
• Les balises <frame> spécifient quelles pages HTML sont affichées dans chaque cadre respectif,
avec des attributs src pour indiquer la source de la page et name pour nommer chaque cadre,
ce qui peut être utile pour les liens internes ou les interactions entre cadres.

7.0.4 Remarque importante

L’utilisation des frames est aujourd’hui obsolète, car elle peut causer des problèmes d’accessibilité,
de référencement, et de navigation. À la place, les techniques modernes comme CSS avec des
grilles (grid) ou des flexbox sont préférées pour organiser le contenu de manière plus flexible et
accessible.

16